lanan-repair/pages-order/my/evaluate.vue
2024-10-14 18:36:20 +08:00

161 lines
4.0 KiB
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>