feat : 优化待评价 已评价页面
This commit is contained in:
赵毅
parent
ddd0408080
commit
ad7818ce2d
@ -1,35 +1,39 @@
|
||||
.order-list {
|
||||
padding: 15px;
|
||||
background-color: #f5f5f5;
|
||||
padding: 20rpx;
|
||||
background-color: #f5f7fb;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
|
||||
.order-header {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
|
||||
.order-number {
|
||||
font-size: 16px;
|
||||
.order-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.order-number {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
border-top: 1px solid #eee;
|
||||
padding-top: 15px;
|
||||
padding-top: 25rpx;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.product-item:last-child {
|
||||
@ -44,26 +48,26 @@
|
||||
|
||||
.product-img {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 15px;
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
margin-right: 25rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.product-img image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #ff7d00;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px 0 3px 0;
|
||||
font-size: 22rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 20rpx 0 20rpx 20rpx;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
@ -71,28 +75,34 @@
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product-spec,
|
||||
.product-unit {
|
||||
font-size: 12px;
|
||||
.product-spec {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
margin-bottom: 3px;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product-unit {
|
||||
font-size: 26rpx;
|
||||
color: red;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.evaluate-btn {
|
||||
background-color: #ff7d00;
|
||||
color: white;
|
||||
background-color: #ffe8e5;
|
||||
color: #e33612;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
/* padding: 8px 15px; */
|
||||
font-size: 14px;
|
||||
min-width: 80px;
|
||||
border-radius: 50rpx;
|
||||
font-size: 26rpx;
|
||||
min-width: 150rpx;
|
||||
}
|
||||
|
||||
.evaluate-btn::after {
|
||||
|
||||
@ -2,10 +2,15 @@
|
||||
<view class="order-list">
|
||||
<view class="order-item" v-for="(item, index) in orderList" :key="index">
|
||||
<view class="order-header">
|
||||
<text class="order-name">{{ item.orderName }}</text>
|
||||
<text class="order-number">{{ item.orderNumber }}</text>
|
||||
</view>
|
||||
<view class="product-list">
|
||||
<view class="product-item" v-for="(product, pIndex) in item.products" :key="pIndex">
|
||||
<view
|
||||
class="product-item"
|
||||
v-for="(product, pIndex) in item.products"
|
||||
:key="pIndex"
|
||||
>
|
||||
<view class="product-info">
|
||||
<view class="product-img">
|
||||
<image :src="product.imageUrl" mode="aspectFit"></image>
|
||||
@ -17,7 +22,9 @@
|
||||
<text class="product-unit">{{ product.unit }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="evaluate-btn" @click="evaluateOrder(product)">评价</button>
|
||||
<button class="evaluate-btn" @click="evaluateOrder(product)">
|
||||
评价
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -25,67 +32,68 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request, NavgateTo } from '../../../utils';
|
||||
import { request, NavgateTo } from "../../../utils";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderList: [
|
||||
{
|
||||
orderNumber: '4534534255',
|
||||
orderName: "衡水商贸国际公司",
|
||||
orderNumber: "4534534255",
|
||||
products: [
|
||||
{
|
||||
imageUrl: 'http://localhost:8080/product.png',
|
||||
tag: '当日达',
|
||||
name: '货品名称',
|
||||
spec: '货品规格',
|
||||
unit: '货品单位'
|
||||
imageUrl: "http://localhost:8080/product.png",
|
||||
tag: "当日达",
|
||||
name: "货品名称",
|
||||
spec: "货品规格",
|
||||
unit: "货品单位",
|
||||
},
|
||||
{
|
||||
imageUrl: 'http://localhost:8080/product.png',
|
||||
tag: '当日达',
|
||||
name: '货品名称',
|
||||
spec: '货品规格',
|
||||
unit: '货品单位'
|
||||
}
|
||||
]
|
||||
imageUrl: "http://localhost:8080/product.png",
|
||||
tag: "当日达",
|
||||
name: "货品名称",
|
||||
spec: "货品规格",
|
||||
unit: "货品单位",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
orderNumber: '54352342331',
|
||||
orderNumber: "54352342331",
|
||||
products: [
|
||||
{
|
||||
imageUrl: 'http://localhost:8080/product.png',
|
||||
tag: '',
|
||||
name: '货品名称',
|
||||
spec: '货品规格',
|
||||
unit: '货品单位'
|
||||
imageUrl: "http://localhost:8080/product.png",
|
||||
tag: "",
|
||||
name: "货品名称",
|
||||
spec: "货品规格",
|
||||
unit: "货品单位",
|
||||
},
|
||||
{
|
||||
imageUrl: 'http://localhost:8080/product.png',
|
||||
tag: '',
|
||||
name: '货品名称',
|
||||
spec: '货品规格',
|
||||
unit: '货品单位'
|
||||
imageUrl: "http://localhost:8080/product.png",
|
||||
tag: "",
|
||||
name: "货品名称",
|
||||
spec: "货品规格",
|
||||
unit: "货品单位",
|
||||
},
|
||||
{
|
||||
imageUrl: 'http://localhost:8080/product.png',
|
||||
tag: '',
|
||||
name: '货品名称',
|
||||
spec: '货品规格',
|
||||
unit: '货品单位'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
imageUrl: "http://localhost:8080/product.png",
|
||||
tag: "",
|
||||
name: "货品名称",
|
||||
spec: "货品规格",
|
||||
unit: "货品单位",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
evaluateOrder(item) {
|
||||
console.log("🚀 ~ evaluateOrder ~ orderNumber:", item)
|
||||
console.log("🚀 ~ evaluateOrder ~ orderNumber:", item);
|
||||
NavgateTo(`../evaluate/index?item=${JSON.stringify(item)}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.evaluation-container {
|
||||
padding: 20rpx;
|
||||
background-color: #f5f5f5;
|
||||
background-color: #f5f7fb;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@ -12,15 +12,21 @@
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.order-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.order-number {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.order-date {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.evaluation-content {
|
||||
@ -30,6 +36,12 @@
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.evaluation-area {
|
||||
background: #f5f7fb;
|
||||
padding: 20rpx 20rpx 50rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.evaluation-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
@ -85,13 +97,13 @@
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #ff7a00;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 8rpx;
|
||||
margin-right: 5rpx;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #ff7d00;
|
||||
color: white;
|
||||
font-size: 22rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 20rpx 0 20rpx 20rpx;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
@ -101,13 +113,21 @@
|
||||
.product-name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
line-height: 40rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product-specs {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
font-size: 26rpx;
|
||||
.product-spec {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product-unit {
|
||||
font-size: 26rpx;
|
||||
color: red;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
@ -1,35 +1,49 @@
|
||||
<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="order-header">
|
||||
<text class="order-name">{{ orderInfo.orderName }}</text>
|
||||
<text class="order-number">{{ orderInfo.orderNumber }}</text>
|
||||
</view>
|
||||
|
||||
<view class="evaluation-area">
|
||||
<text class="evaluation-text">{{ evaluationInfo.content }}</text>
|
||||
<!-- 评价图片区域 -->
|
||||
<view class="image-list">
|
||||
<view class="image-item" v-for="(img, index) in evaluationInfo.images" :key="index">
|
||||
<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>
|
||||
<text class="order-date">{{ orderInfo.date }}</text>
|
||||
</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
|
||||
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>
|
||||
<text class="product-spec">{{ productInfo.spec }}</text>
|
||||
<text class="product-unit">{{ productInfo.unit }}</text>
|
||||
<!-- <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>
|
||||
@ -41,26 +55,27 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
orderInfo: {
|
||||
orderNumber: '4534534255',
|
||||
date: '2025-07-21'
|
||||
orderName: "衡水商贸国际公司",
|
||||
orderNumber: "4534534255",
|
||||
date: "2025-07-21",
|
||||
},
|
||||
evaluationInfo: {
|
||||
content: '评价文字内容',
|
||||
content: "评价文字内容",
|
||||
images: [
|
||||
{ url: 'http://localhost:8080/eval1.png', text: '评价图片' },
|
||||
{ url: 'http://localhost:8080/eval2.png', text: '评价图片' },
|
||||
{ url: 'http://localhost:8080/eval3.png', text: '评价图片' }
|
||||
]
|
||||
{ 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: '货品单位'
|
||||
}
|
||||
imageUrl: "http://localhost:8080/product.png",
|
||||
tags: ["当日达", "当日达"],
|
||||
name: "货品名称",
|
||||
spec: "货品规格",
|
||||
unit: "货品单位",
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user