lanan-repair/pages-order/my/evaluate.vue

<template>
	<view class="container">
		<v-navigation-bar background-color="#fff" title-color="#333" title="我的评价"></v-navigation-bar>
		<view class="body">
			<view v-for="(item, index) in evaluateList" :key="index" class="item">
				<view class="date">{{ item.commentTime }}</view>
				<view class="message">
<!--					这家修理厂的喷漆工艺非常不错，特别均匀，师傅也很细心。如果您需要做喷漆或者维修服务，不要错过这里！-->
          {{item.commentDesc || "未输入评价内容"}}
				</view>
				<view class="rate">
					<!-- 设置尺寸大小 -->
					<uni-rate :readonly="true" allow-half :value="item.commentStar"/>
				</view>
				<view class="shopInfo">
					<image class="shopImg" :src="item.image" mode="aspectFill"></image>
					<view class="shopInfo_content">
						<view class="shopName">{{ item.tenantName }}</view>
						<view class="shopAddress">{{ item.goodsTitle }}</view>
					</view>
				</view>
			</view>
      <view class="no-data" v-if="evaluateList.length==0">
        <image class=""  src="@/static/images/nothing.png" ></image>
      </view>
		</view>
	</view>
</template>

<script>
	import VNavigationBar from '@/components/VNavigationBar.vue'
  import request from "@/utils/request";

	export default {
		components: {
			VNavigationBar,
		},
		data() {
			return {
				// evaluateList: [{}, {}, {}],
        queryParams:{
          pageNum: 1,
          pageSize: 10
        },
        evaluateList: [],
			};
		},
    onShow(){
      this.getAppraisePage()
    },
    methods:{
      /**
       * 时间戳转文字
       * */
      timestampToDate(timestamp) {
        let date = new Date(timestamp); // 将时间戳转换为Date对象
        let year = date.getFullYear(); // 获取年份
        let month = date.getMonth() + 1; // 获取月份，需要+1因为月份是从0开始计算的
        let day = date.getDate(); // 获取日
        let hours = date.getHours(); // 获取小时
        let minutes = date.getMinutes(); // 获取分钟
        let seconds = date.getSeconds(); // 获取秒钟
        // 格式化月份、日期、小时、分钟、秒
        month = month < 10 ? '0' + month : month;
        day = day < 10 ? '0' + day : day;
        hours = hours < 10 ? '0' + hours : hours;
        minutes = minutes < 10 ? '0' + minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;
        // 拼接成 yyyy-MM-dd HH:mm:ss 格式
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; // 返回格式化后的时间字符串
      },
      async getAppraisePage(){
        const res = await request({
          url: "/userClient/repair/order/getAppraise",
          method: "get",
          params:{
            ...this.queryParams,
            pageNo: this.queryParams.pageNum
          }
        })
        this.evaluateList = res.data.records
        this.evaluateList.forEach(item => {
          item.commentTime = this.timestampToDate(item.commentTime)
          item.image = require("../static/inImage.jpg")
        })
      }
    }
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;
		background-color: #F3F5F7;
		display: flex;
		flex-direction: column;

		.body {
			padding: 20rpx 0;

			flex: 1;
			height: 0;
			overflow: auto;

			display: flex;
			flex-direction: column;
			row-gap: 10rpx;
		}

		.item {
			background-color: #fff;
			padding: 30rpx;

			display: flex;
			flex-direction: column;
			row-gap: 20rpx;
		}

		.date {
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
		}

		.shopInfo {
			display: flex;
			align-items: stretch;
			column-gap: 20rpx;

			.shopImg {
				width: 160rpx;
				height: 100rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				background-color: #efefef;
			}

			.shopInfo_content {
				flex: 1;
				width: 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				padding: 6rpx 0;
			}

			.shopName {
				font-size: 28rpx;
				color: #333333;
			}
			.shopAddress {
				font-size: 24rpx;
				color: #666666;
			}
		}
    .no-data{
      text-align: center;
    }
	}
</style>