357 lines
8.0 KiB
Vue
357 lines
8.0 KiB
Vue
|
<template>
|
|||
|
|
<view class="evaluation-detail">
|
|||
|
|
<custom-navbar title="评价详情" :showBack="true" borderBottom="none" backgroundColor="#FFF"></custom-navbar>
|
|||
|
|
<!-- 用户信息区域 -->
|
|||
|
|
<view class="user-section">
|
|||
|
|
<image class="avatar" :src="evaluatorPhoto" />
|
|||
|
|
<view class="user-info">
|
|||
|
|
|
|||
|
|
<text class="username">{{ evaluatorName }}</text>
|
|||
|
|
<text class="time">{{formattedCreateTime}}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="user-contant">
|
|||
|
|
<!-- 评分标题 -->
|
|||
|
|
<view class="rating-header">
|
|||
|
|
<image :src="getComposite" class="tag" mode="heightFix"></image>
|
|||
|
|
<view class="stars">
|
|||
|
|
<image v-for="n in 5" :key="n" :src="getStar(n)" class="star-icon" />
|
|||
|
|
</view>
|
|||
|
|
<text class="score">{{evaluateObj.composite}}分</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 分类评分 -->
|
|||
|
|
<view class="categories">
|
|||
|
|
<text class="category-item" v-if="evaluateObj.process!=`0.0`">
|
|||
|
|
过程:{{ evaluateObj.process }}
|
|||
|
|
</text>
|
|||
|
|
<text class="category-item" v-if="evaluateObj.attitude!=`0.0`">
|
|||
|
|
态度:{{ evaluateObj.attitude }}
|
|||
|
|
</text>
|
|||
|
|
<text class="category-item" v-if="evaluateObj.technology!=`0.0`">
|
|||
|
|
技术:{{ evaluateObj.technology }}
|
|||
|
|
</text>
|
|||
|
|
<text class="category-item" v-if="evaluateObj.effect!=`0.0`">
|
|||
|
|
效果:{{ evaluateObj.effect}}
|
|||
|
|
</text>
|
|||
|
|
<text class="category-item" v-if="evaluateObj.environment!=`0.0`">
|
|||
|
|
环境:{{ evaluateObj.environment}}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 评论内容 -->
|
|||
|
|
<view class="comment">
|
|||
|
|
<text>
|
|||
|
|
{{ evaluateObj.describe }}
|
|||
|
|
</text>
|
|||
|
|
<!-- <uv-read-more show-height="300rpx" :toggle="true" textIndent="0rem">
|
|||
|
|
|
|||
|
|
</uv-read-more> -->
|
|||
|
|
<!-- <text>
|
|||
|
|
{{ evaluateObj.describe }}
|
|||
|
|
</text> -->
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 图片展示 -->
|
|||
|
|
<view class="photos">
|
|||
|
|
<image v-for="(photo, index) in photos" :key="index" :src="photo" class="photo" mode="aspectFill"
|
|||
|
|
@tap.stop="imgPreview(index)" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import request from "@/utils/request";
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
evaluateObj: {},
|
|||
|
|
formData: {
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
evaluatorPhoto() {
|
|||
|
|
if (!this.evaluateObj.evaluator_head_photo) {
|
|||
|
|
return ""
|
|||
|
|
}
|
|||
|
|
return this.evaluateObj.anonymity == 1 ? "/static/images/evaluate/photo.jpg" : this.evaluateObj
|
|||
|
|
.evaluator_head_photo
|
|||
|
|
},
|
|||
|
|
evaluatorName() {
|
|||
|
|
if (!this.evaluateObj.evaluator_name) {
|
|||
|
|
return ""
|
|||
|
|
}
|
|||
|
|
return this.evaluateObj.anonymity == 1 ? "匿名用户" : this.evaluateObj.evaluator_name
|
|||
|
|
},
|
|||
|
|
photos() {
|
|||
|
|
if (!this.evaluateObj.images) {
|
|||
|
|
return []
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return this.evaluateObj.images.split(",")
|
|||
|
|
},
|
|||
|
|
// 计算属性：仅返回日期部分
|
|||
|
|
formattedCreateTime() {
|
|||
|
|
// 处理逻辑：通过空格分割取日期部分
|
|||
|
|
let dateString = this.evaluateObj.create_time;
|
|||
|
|
if (!dateString) {
|
|||
|
|
return ""
|
|||
|
|
}
|
|||
|
|
// 处理旧版iOS兼容性：将 "-" 替换为 "/"
|
|||
|
|
const compatibleDateStr = dateString.replace(/-/g, '/');
|
|||
|
|
|
|||
|
|
// 创建日期对象
|
|||
|
|
const date = new Date(compatibleDateStr);
|
|||
|
|
|
|||
|
|
// 兼容日期解析失败的情况
|
|||
|
|
if (isNaN(date.getTime())) {
|
|||
|
|
console.error('日期解析失败:', dateString);
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取各部分时间
|
|||
|
|
const year = date.getFullYear();
|
|||
|
|
const month = date.getMonth() + 1; // 月份从0开始，需要加1
|
|||
|
|
const day = date.getDate();
|
|||
|
|
const hours = date.getHours();
|
|||
|
|
const minutes = date.getMinutes();
|
|||
|
|
|
|||
|
|
// 补零处理
|
|||
|
|
const pad = (num) => num.toString().padStart(2, '0');
|
|||
|
|
const formattedMonth = pad(month);
|
|||
|
|
const formattedDay = pad(day);
|
|||
|
|
const formattedHours = pad(hours);
|
|||
|
|
const formattedMinutes = pad(minutes);
|
|||
|
|
|
|||
|
|
// 拼接成目标格式
|
|||
|
|
return `发布于${year}年${formattedMonth}月${formattedDay}日 ${formattedHours}:${formattedMinutes}`;
|
|||
|
|
},
|
|||
|
|
getComposite() {
|
|||
|
|
if (!this.evaluateObj.composite) {
|
|||
|
|
return ""
|
|||
|
|
}
|
|||
|
|
return `/static/images/evaluate/score${Math.floor(this.evaluateObj.composite)}.png`
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
// 接收参数并解析
|
|||
|
|
if (options.data) {
|
|||
|
|
// 先解码再解析JSON
|
|||
|
|
const receiveData = JSON.parse(decodeURIComponent(options.data));
|
|||
|
|
console.log("接收的对象参数：", receiveData);
|
|||
|
|
// 可以将数据赋值给data中的变量使用
|
|||
|
|
this.evaluateObj = receiveData;
|
|||
|
|
}
|
|||
|
|
if (options.order_id) {
|
|||
|
|
this.formData.order_id = options.order_id
|
|||
|
|
this.formData.order_type = options.order_type
|
|||
|
|
this.getList()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getList() {
|
|||
|
|
request.post("/user/orderEvaluate/details", this.formData).then((res) => {
|
|||
|
|
console.log(res, "======");
|
|||
|
|
this.evaluateObj = res.data;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
imgPreview(index) {
|
|||
|
|
uni.previewImage({
|
|||
|
|
current: index,
|
|||
|
|
urls: this.photos,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getStar(value) {
|
|||
|
|
if (!this.evaluateObj.composite) {
|
|||
|
|
return ""
|
|||
|
|
}
|
|||
|
|
let composite = this.evaluateObj.composite
|
|||
|
|
if (composite >= value) {
|
|||
|
|
return "/static/images/evaluate/star_red.png"
|
|||
|
|
} else if (composite < value && composite > value - 1) {
|
|||
|
|
return "/static/images/evaluate/star2.png"
|
|||
|
|
} else {
|
|||
|
|
return "/static/images/evaluate/star_ash2.png"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 处理函数：保留整数部分，小数部分>0.5则取0.5，否则取0
|
|||
|
|
handleDecimal(num) {
|
|||
|
|
// 提取整数部分（正数用Math.floor，负数特殊处理）
|
|||
|
|
const integerPart = Math.sign(num) === -1 ? Math.ceil(num) : Math.floor(num);
|
|||
|
|
// 提取小数部分
|
|||
|
|
const decimalPart = num - integerPart;
|
|||
|
|
|
|||
|
|
// 判断小数部分并返回结果
|
|||
|
|
if (decimalPart > 0.5) {
|
|||
|
|
return integerPart + 0.5;
|
|||
|
|
} else {
|
|||
|
|
return integerPart + 0; // 可简化为 integerPart
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less">
|
|||
|
|
page {
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.evaluation-detail {
|
|||
|
|
padding: 30rpx 20rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 用户信息区域 */
|
|||
|
|
.user-section {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.avatar {
|
|||
|
|
width: 76rpx;
|
|||
|
|
height: 76rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-right: 14rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-info {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
|
|||
|
|
.username {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 42rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
line-height: 30rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.user-contant {
|
|||
|
|
|
|||
|
|
/* 评分头部 */
|
|||
|
|
.rating-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
.tag {
|
|||
|
|
height: 50rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stars {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
|
|||
|
|
.star-icon {
|
|||
|
|
width: 34rpx;
|
|||
|
|
height: 34rpx;
|
|||
|
|
margin-right: 2rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.score {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #E8101E;
|
|||
|
|
line-height: 37rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 各项评分 */
|
|||
|
|
.categories {
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
display: flex;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #7C7C7C;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 评论内容 */
|
|||
|
|
.comment {
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 46rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 图片区域 */
|
|||
|
|
.photos {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
gap: 5rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.photo {
|
|||
|
|
width: 226rpx;
|
|||
|
|
height: 226rpx;
|
|||
|
|
border-radius: 6rpx;
|
|||
|
|
object-fit: cover;
|
|||
|
|
/* background-color: #f5f5f5; */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more {
|
|||
|
|
width: 59rpx;
|
|||
|
|
height: 28rpx;
|
|||
|
|
background: rgba(51, 51, 51, 0.4);
|
|||
|
|
border-radius: 14rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
line-height: 30rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 10rpx;
|
|||
|
|
right: 10rpx;
|
|||
|
|
|
|||
|
|
.more-img {
|
|||
|
|
width: 23rpx;
|
|||
|
|
height: 17rpx;
|
|||
|
|
margin-right: 5rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</style>
|