From ad7818ce2dbe88062136baee4563658ae72d2eee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=AF=85?= <1335909236@qq.com>
Date: Fri, 25 Jul 2025 16:09:33 +0800
Subject: [PATCH] =?UTF-8?q?feat=20:=20=E4=BC=98=E5=8C=96=E5=BE=85=E8=AF=84?=
 =?UTF-8?q?=E4=BB=B7=20=E5=B7=B2=E8=AF=84=E4=BB=B7=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/myOrders/index/awaitRated.css | 76 +++++++++++----------
 packages/myOrders/index/awaitRated.vue | 88 ++++++++++++++-----------
 packages/myOrders/index/rated.css      | 50 +++++++++-----
 packages/myOrders/index/rated.vue      | 91 +++++++++++++++-----------
 4 files changed, 179 insertions(+), 126 deletions(-)

diff --git a/packages/myOrders/index/awaitRated.css b/packages/myOrders/index/awaitRated.css
index 8cb5adfc..45643916 100644
--- a/packages/myOrders/index/awaitRated.css
+++ b/packages/myOrders/index/awaitRated.css
@@ -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 {
diff --git a/packages/myOrders/index/awaitRated.vue b/packages/myOrders/index/awaitRated.vue
index 1623ae11..1ff9e815 100644
--- a/packages/myOrders/index/awaitRated.vue
+++ b/packages/myOrders/index/awaitRated.vue
@@ -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>
diff --git a/packages/myOrders/index/rated.css b/packages/myOrders/index/rated.css
index 23e897e7..10f3ad8a 100644
--- a/packages/myOrders/index/rated.css
+++ b/packages/myOrders/index/rated.css
@@ -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;
 }
\ No newline at end of file
diff --git a/packages/myOrders/index/rated.vue b/packages/myOrders/index/rated.vue
index b7ddd92b..92bdf544 100644
--- a/packages/myOrders/index/rated.vue
+++ b/packages/myOrders/index/rated.vue
@@ -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="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 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"
+          >
+            <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>
 
-    <!-- 商品信息区域 -->
-    <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 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>
+          <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>