112 lines
3.8 KiB
Vue
112 lines
3.8 KiB
Vue
<template>
|
||
<view class="evaluation-container">
|
||
<!-- 评价内容区域 -->
|
||
<view>
|
||
<view v-for="(item, index) in orderList" :key="index">
|
||
<view class="evaluation-content">
|
||
<!-- 订单头部信息 -->
|
||
<view class="order-header">
|
||
<text class="order-name">{{ item.supplier_name }}</text>
|
||
<text class="order-number">{{ item.order_no }}</text>
|
||
</view>
|
||
|
||
<view class="evaluation-area">
|
||
<text class="evaluation-text">{{ item.evaluate_info.user_review }}</text>
|
||
<!-- 评价图片区域 -->
|
||
<view class="image-list" v-if="item.evaluate_info.review_image && item.evaluate_info.review_image.length > 0">
|
||
<view class="image-item" v-for="(img, index) in parseReviewImages(item.evaluate_info.review_image)" :key="index">
|
||
<image :src="img" @tap="previewImage(parseReviewImages(item.evaluate_info.review_image), index)"></image>
|
||
</view>
|
||
</view>
|
||
<text class="order-date">{{ item.evaluate_info.create_time }}</text>
|
||
</view>
|
||
|
||
<!-- 商品信息区域 -->
|
||
<view class="product-info">
|
||
<view class="product-img">
|
||
<image :src="item.commodity_order_item_list[0].commodity_pic"></image>
|
||
<view class="tag" v-if="item.commodity_order_item_list[0].is_same_day === 1" :key="index">当日达</view>
|
||
</view>
|
||
<view class="product-details">
|
||
<text class="product-name">{{ item.commodity_order_item_list[0].goods_name }}</text>
|
||
<text class="product-spec">{{ item.commodity_order_item_list[0].goods_spec }}</text>
|
||
<text class="product-unit">{{ item.commodity_order_item_list[0].sales_price }}/{{ item.commodity_order_item_list[0].goods_unit }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
orderData: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
orderList: [],
|
||
};
|
||
},
|
||
methods: {
|
||
// 预览图片
|
||
previewImage(imageList, currentIndex) {
|
||
uni.previewImage({
|
||
urls: imageList,
|
||
current: currentIndex,
|
||
showmenu: true
|
||
});
|
||
},
|
||
// 解析评价图片格式
|
||
parseReviewImages(reviewImage) {
|
||
try {
|
||
// 检查是否为字符串类型且包含有效内容
|
||
if (typeof reviewImage === 'string' && reviewImage.trim()) {
|
||
// 去除可能的引号和空格，然后尝试解析为数组
|
||
const cleanStr = reviewImage.replace(/^"|"$/g, '').replace(/^'|'$/g, '').trim();
|
||
let images = [];
|
||
|
||
// 尝试使用JSON解析
|
||
if (cleanStr.startsWith('[') && cleanStr.endsWith(']')) {
|
||
images = JSON.parse(cleanStr);
|
||
} else if (cleanStr.includes(',')) {
|
||
// 如果是逗号分隔的字符串
|
||
images = cleanStr.split(',').map(img => img.trim());
|
||
}
|
||
|
||
// 确保返回的是数组并且每个元素都是有效的URL
|
||
return Array.isArray(images) ? images : [];
|
||
}
|
||
// 如果已经是数组则直接返回
|
||
return Array.isArray(reviewImage) ? reviewImage : [];
|
||
} catch (error) {
|
||
console.error('解析评价图片失败:', error);
|
||
return [];
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
// 组件挂载时初始化数据
|
||
this.orderList = this.orderData;
|
||
console.log("🚀 ~ mounted ~ this.orderList:", this.orderList);
|
||
},
|
||
watch: {
|
||
// 监听orderData的变化，确保子组件能响应父组件数据更新
|
||
orderData: {
|
||
handler(newVal) {
|
||
this.orderList = newVal;
|
||
console.log("🚀 ~ watch orderData ~ this.orderList:", this.orderList);
|
||
},
|
||
deep: true
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./rated.css");
|
||
</style> |