69 lines
2.0 KiB
Vue
69 lines
2.0 KiB
Vue
<template>
|
|
<view class="evaluation-container">
|
|
<!-- 订单头部信息 -->
|
|
<view class="order-header">
|
|
<text class="order-number">{{ orderInfo.orderNumber }}</text>
|
|
<text class="order-date">{{ orderInfo.date }}</text>
|
|
</view>
|
|
|
|
<!-- 评价内容区域 -->
|
|
<view class="evaluation-content">
|
|
<text class="evaluation-text">{{ evaluationInfo.content }}</text>
|
|
|
|
<!-- 评价图片区域 -->
|
|
<view class="image-list">
|
|
<view class="image-item" v-for="(img, index) in evaluationInfo.images" :key="index">
|
|
<image :src="img.url" mode="aspectFill"></image>
|
|
<text class="image-text">{{ img.text }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品信息区域 -->
|
|
<view class="product-info">
|
|
<view class="product-img">
|
|
<image :src="productInfo.imageUrl" mode="aspectFit"></image>
|
|
<view class="tag" v-for="(tag, index) in productInfo.tags" :key="index">{{ tag }}</view>
|
|
</view>
|
|
<view class="product-details">
|
|
<text class="product-name">{{ productInfo.name }}</text>
|
|
<view class="product-specs">
|
|
<text class="spec-item">{{ productInfo.spec }}</text>
|
|
<text class="spec-item">{{ productInfo.unit }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
orderInfo: {
|
|
orderNumber: '4534534255',
|
|
date: '2025-07-21'
|
|
},
|
|
evaluationInfo: {
|
|
content: '评价文字内容',
|
|
images: [
|
|
{ url: 'http://localhost:8080/eval1.png', text: '评价图片' },
|
|
{ url: 'http://localhost:8080/eval2.png', text: '评价图片' },
|
|
{ url: 'http://localhost:8080/eval3.png', text: '评价图片' }
|
|
]
|
|
},
|
|
productInfo: {
|
|
imageUrl: 'http://localhost:8080/product.png',
|
|
tags: ['当日达', '当日达'],
|
|
name: '货品名称',
|
|
spec: '货品规格',
|
|
unit: '货品单位'
|
|
}
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
@import url("./rated.css");
|
|
</style> |