maguodong/uniapp-ZHSQ
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : 优化待评价 已评价页面

Browse Source
This commit is contained in:
赵毅 2025-07-25 16:09:33 +08:00
parent ddd0408080
commit ad7818ce2d
4 changed files with 179 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
packages/myOrders/index/awaitRated.css
View File

@ -1,35 +1,39 @@
.order-list { .order-list {
padding: 15px; padding: 20rpx;
background-color: #f5f5f5; background-color: #f5f7fb;
} }
.order-item { .order-item {
background-color: white; background-color: white;
border-radius: 10px; border-radius: 20rpx;
padding: 15px; padding: 30rpx;
margin-bottom: 15px; margin-bottom: 25rpx;
} }
.order-header { .order-header {
margin-bottom: 15px; margin-bottom: 25rpx;
} }
.order-number { .order-name {
font-size: 16px; font-size: 30rpx;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
} }
.order-number {
font-size: 30rpx;
color: #333;
}
.product-list { .product-list {
border-top: 1px solid #eee; padding-top: 25rpx;
padding-top: 15px;
} }
.product-item { .product-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 10px 0; padding: 20rpx 0;
border-bottom: 1px solid #eee; border-bottom: 1rpx solid #eee;
} }
.product-item:last-child { .product-item:last-child {
@ -44,26 +48,26 @@
.product-img { .product-img {
position: relative; position: relative;
width: 80px; width: 130rpx;
height: 80px; height: 130rpx;
margin-right: 15px; margin-right: 25rpx;
border-radius: 20rpx;
} }
.product-img image { .product-img image {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 5px;
} }
.tag { .tag {
position: absolute; position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
background-color: #ff7d00; background-color: #ff7d00;
color: white; color: white;
font-size: 12px; font-size: 22rpx;
padding: 2px 5px; padding: 5rpx 10rpx;
border-radius: 3px 0 3px 0; border-radius: 20rpx 0 20rpx 20rpx;
} }
.product-details { .product-details {
@ -71,28 +75,34 @@
} }
.product-name { .product-name {
font-size: 14px; font-size: 28rpx;
color: #333; color: #333;
margin-bottom: 5px; font-weight: bold;
margin-bottom: 10rpx;
display: block; display: block;
} }
.product-spec, .product-spec {
.product-unit { font-size: 22rpx;
font-size: 12px;
color: #666; color: #666;
margin-bottom: 3px; margin-bottom: 10rpx;
display: block;
}
.product-unit {
font-size: 26rpx;
color: red;
margin-bottom: 10rpx;
display: block; display: block;
} }
.evaluate-btn { .evaluate-btn {
background-color: #ff7d00; background-color: #ffe8e5;
color: white; color: #e33612;
border: none; border: none;
border-radius: 10px; border-radius: 50rpx;
/* padding: 8px 15px; */ font-size: 26rpx;
font-size: 14px; min-width: 150rpx;
min-width: 80px;
} }
.evaluate-btn::after { .evaluate-btn::after {

88
packages/myOrders/index/awaitRated.vue
View File

@ -2,10 +2,15 @@
<view class="order-list"> <view class="order-list">
<view class="order-item" v-for="(item, index) in orderList" :key="index"> <view class="order-item" v-for="(item, index) in orderList" :key="index">
<view class="order-header"> <view class="order-header">
<text class="order-name">{{ item.orderName }}</text>
<text class="order-number">{{ item.orderNumber }}</text> <text class="order-number">{{ item.orderNumber }}</text>
</view> </view>
<view class="product-list"> <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-info">
<view class="product-img"> <view class="product-img">
<image :src="product.imageUrl" mode="aspectFit"></image> <image :src="product.imageUrl" mode="aspectFit"></image>
@ -17,7 +22,9 @@
<text class="product-unit">{{ product.unit }}</text> <text class="product-unit">{{ product.unit }}</text>
</view> </view>
</view> </view>
<button class="evaluate-btn" @click="evaluateOrder(product)">评价</button> <button class="evaluate-btn" @click="evaluateOrder(product)">
评价
</button>
</view> </view>
</view> </view>
</view> </view>
@ -25,67 +32,68 @@
</template> </template>
<script> <script>
import { request, NavgateTo } from '../../../utils'; import { request, NavgateTo } from "../../../utils";
export default { export default {
data() { data() {
return { return {
orderList: [ orderList: [
{ {
orderNumber: '4534534255', orderName: "衡水商贸国际公司",
orderNumber: "4534534255",
products: [ products: [
{ {
imageUrl: 'http://localhost:8080/product.png', imageUrl: "http://localhost:8080/product.png",
tag: '当日达', tag: "当日达",
name: '货品名称', name: "货品名称",
spec: '货品规格', spec: "货品规格",
unit: '货品单位' unit: "货品单位",
}, },
{ {
imageUrl: 'http://localhost:8080/product.png', imageUrl: "http://localhost:8080/product.png",
tag: '当日达', tag: "当日达",
name: '货品名称', name: "货品名称",
spec: '货品规格', spec: "货品规格",
unit: '货品单位' unit: "货品单位",
} },
] ],
}, },
{ {
orderNumber: '54352342331', orderNumber: "54352342331",
products: [ products: [
{ {
imageUrl: 'http://localhost:8080/product.png', imageUrl: "http://localhost:8080/product.png",
tag: '', tag: "",
name: '货品名称', name: "货品名称",
spec: '货品规格', spec: "货品规格",
unit: '货品单位' unit: "货品单位",
}, },
{ {
imageUrl: 'http://localhost:8080/product.png', imageUrl: "http://localhost:8080/product.png",
tag: '', tag: "",
name: '货品名称', name: "货品名称",
spec: '货品规格', spec: "货品规格",
unit: '货品单位' unit: "货品单位",
}, },
{ {
imageUrl: 'http://localhost:8080/product.png', imageUrl: "http://localhost:8080/product.png",
tag: '', tag: "",
name: '货品名称', name: "货品名称",
spec: '货品规格', spec: "货品规格",
unit: '货品单位' unit: "货品单位",
} },
] ],
} },
] ],
}; };
}, },
methods: { methods: {
evaluateOrder(item) { evaluateOrder(item) {
console.log("🚀 ~ evaluateOrder ~ orderNumber:", item) console.log("🚀 ~ evaluateOrder ~ orderNumber:", item);
NavgateTo(`../evaluate/index?item=${JSON.stringify(item)}`); NavgateTo(`../evaluate/index?item=${JSON.stringify(item)}`);
} },
} },
} };
</script> </script>
<style> <style>

50
packages/myOrders/index/rated.css
View File

@ -1,6 +1,6 @@
.evaluation-container { .evaluation-container {
padding: 20rpx; padding: 20rpx;
background-color: #f5f5f5; background-color: #f5f7fb;
min-height: 100vh; min-height: 100vh;
} }
@ -12,15 +12,21 @@
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.order-name {
font-size: 30rpx;
font-weight: bold;
color: #333;
}
.order-number { .order-number {
font-size: 32rpx; font-size: 30rpx;
font-weight: 600;
color: #333; color: #333;
} }
.order-date { .order-date {
font-size: 26rpx; font-size: 26rpx;
color: #999; color: #999;
float: right;
} }
.evaluation-content { .evaluation-content {
@ -30,6 +36,12 @@
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.evaluation-area {
background: #f5f7fb;
padding: 20rpx 20rpx 50rpx 20rpx;
border-radius: 10rpx;
}
.evaluation-text { .evaluation-text {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
@ -85,13 +97,13 @@
.tag { .tag {
position: absolute; position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
background: #ff7a00; background-color: #ff7d00;
color: #fff; color: white;
font-size: 20rpx; font-size: 22rpx;
padding: 2rpx 8rpx; padding: 5rpx 10rpx;
margin-right: 5rpx; border-radius: 20rpx 0 20rpx 20rpx;
} }
.product-details { .product-details {
@ -101,13 +113,21 @@
.product-name { .product-name {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
font-weight: bold;
margin-bottom: 10rpx; margin-bottom: 10rpx;
line-height: 40rpx; display: block;
} }
.product-specs { .product-spec {
display: flex; font-size: 22rpx;
gap: 20rpx;
font-size: 26rpx;
color: #666; color: #666;
margin-bottom: 10rpx;
display: block;
}
.product-unit {
font-size: 26rpx;
color: red;
margin-bottom: 10rpx;
display: block;
} }

91
packages/myOrders/index/rated.vue
View File

@ -1,35 +1,49 @@
<template> <template>
<view class="evaluation-container"> <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"> <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">
<view class="image-list"> <text class="evaluation-text">{{ evaluationInfo.content }}</text>
<view class="image-item" v-for="(img, index) in evaluationInfo.images" :key="index"> <!-- 评价图片区域 -->
<image :src="img.url" mode="aspectFill"></image> <view class="image-list">
<text class="image-text">{{ img.text }}</text> <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>
<text class="order-date">{{ orderInfo.date }}</text>
</view> </view>
</view>
<!-- 商品信息区域 --> <!-- 商品信息区域 -->
<view class="product-info"> <view class="product-info">
<view class="product-img"> <view class="product-img">
<image :src="productInfo.imageUrl" mode="aspectFit"></image> <image :src="productInfo.imageUrl" mode="aspectFit"></image>
<view class="tag" v-for="(tag, index) in productInfo.tags" :key="index">{{ tag }}</view> <view
</view> class="tag"
<view class="product-details"> v-for="(tag, index) in productInfo.tags"
<text class="product-name">{{ productInfo.name }}</text> :key="index"
<view class="product-specs"> >{{ tag }}</view
<text class="spec-item">{{ productInfo.spec }}</text> >
<text class="spec-item">{{ productInfo.unit }}</text> </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> </view>
</view> </view>
@ -41,26 +55,27 @@ export default {
data() { data() {
return { return {
orderInfo: { orderInfo: {
orderNumber: '4534534255', orderName: "衡水商贸国际公司",
date: '2025-07-21' orderNumber: "4534534255",
date: "2025-07-21",
}, },
evaluationInfo: { evaluationInfo: {
content: '评价文字内容', content: "评价文字内容",
images: [ images: [
{ url: 'http://localhost:8080/eval1.png', text: '评价图片' }, { url: "http://localhost:8080/eval1.png", text: "评价图片" },
{ url: 'http://localhost:8080/eval2.png', text: '评价图片' }, { url: "http://localhost:8080/eval2.png", text: "评价图片" },
{ url: 'http://localhost:8080/eval3.png', text: '评价图片' } { url: "http://localhost:8080/eval3.png", text: "评价图片" },
] ],
}, },
productInfo: { productInfo: {
imageUrl: 'http://localhost:8080/product.png', imageUrl: "http://localhost:8080/product.png",
tags: ['当日达', '当日达'], tags: ["当日达", "当日达"],
name: '货品名称', name: "货品名称",
spec: '货品规格', spec: "货品规格",
unit: '货品单位' unit: "货品单位",
} },
}; };
} },
}; };
</script> </script>