用户端 修改订单页面 修改商品评价页面

src/pages/client/clientPackage/goodsEstimation.vue

@@ -2,16 +2,22 @@
   <view class="container">
     <view class="top-box">
       <view class="top-rate">
-        <u-rate count="5" v-model="value"></u-rate>
+        <view class="title">评价得分：</view>
+        <u-rate count="5" v-model="queryParams.score"></u-rate>
+      </view>
+      <view class="content-box">
+        <view class="title">评价内容：</view>
+        <view class="comment-box">
+          <u--textarea v-model="queryParams.content" count placeholder="请输入评价内容" ></u--textarea>
+        </view>
       </view>
     </view>
-    <button @click="handlerContextSumbit">提交</button>
-    <button @click="handlerGetGoodsCommitList">获取列表</button>
+    <button class="btn" @click="handlerContextSumbit">提交</button>
   </view>
 </template>
 
 <script>
-  import { goodsCommentsAdd , getGoodsConcentList } from "@/api/client/business.js"
+  import { goodsCommentsAdd  } from "@/api/client/business.js"
   export default {
     data(){
       return{
@@ -21,22 +27,30 @@
           goodsId: "1748379280745975820", // 商品id
           orderId: "1763028797466587137", // 订单id
           merchantId: "9", // 商家id
-        }
+        },
       }
     },
     methods:{
       // 测试提交
       handlerContextSumbit(){
+        console.log('@@@@queryParams',this.queryParams);
+        return
         goodsCommentsAdd(this.queryParams).then(res=>{
           console.log('@@@@res',res);
+          if(res.code == 200){
+            uni.showToast({
+              title:"评论成功",
+              icon:'none'
+            })
+            uni.navigateBack(-1)
+          }else{
+            uni.showToast({
+              title:res.msg,
+              icon:'none'
+            })
+          }
         })
       },
-      // 获取列表
-      handlerGetGoodsCommitList(){
-        getGoodsConcentList(this.queryParams.goodsId).then(res=>{
-          console.log('@@@@res',res);
-        })
-      }
     }
   }
 </script>
@@ -48,6 +62,30 @@
       padding: 20rpx;
       border-radius: 20rpx;
       box-shadow: 0 5rpx 12rpx 0 rgba(0,0,0,0.2);
+      background-color: #fff;
+      .top-rate{
+        display: flex;
+        align-items: center;
+      }
+      .content-box{
+        margin-top: 20rpx;
+        .comment-box{
+          margin-top: 20rpx;
+        }
+      }
+      .title{
+        color: #000;
+        font-size: 28rpx;
+      }
+    }
+
+    .btn{
+      margin-top: 20rpx;
+      background-color: #F57F32;
+      color: #fff;
+      font-size:28rpx;
+      border-radius: 20rpx;
+      box-shadow: 0 5rpx 10rpx 0 rgba(245,127,50, 0.8);
     }
   }
 </style>

src/pages/client/clientPackage/orderAll.vue

@@ -7,35 +7,51 @@
     <!-- 订单 -->
     <view class="order">
       <view class="order-box">
-        <view class="order-item" v-for="(item,index) of init_list" :key='index' @click="handlerSkipDetail(item)">
-          <view class="order-top">
-            <view class="top-left"> 订单号：{{ item.orderSn }} </view>
-            <view class="top-right"> {{ type_name }} </view>
+        <view class="order-item" v-for="(item,index) of init_list" :key="index">
+          <view class="item-top">
+            <view class="top-left gray-color">订单编号 : 3000291847772181</view>
+            <view class="top-right ">待付款</view>
+          </view>
+          <view class="item-top">
+            <view class="top-left gray-color">支付时间 : 2024-01-12</view>
+            <view class="top-right"></view>
           </view>
 
           <u-line margin='20rpx 0'></u-line>
 
-          <view class="order-center" v-for="(itm,idx) of item.goodsInfo">
+          <view class="item-center" v-for="item of 3">
             <view class="center-left">
-              <image class="left-img" src="@/static/QR57a.jpg"></image>
+              <image src="@/static/QR57a.jpg" class="img"></image>
             </view>
-
             <view class="center-right">
-              <view class="right-title">
-                {{ itm.goodsName }}
+              <view class="r-l">
+                <view class="right-name"> 测试名称 </view>
+                <view class="right-descript"> 测试商品描述111 </view>
+                <view class="l-box">
+                  <view class="right-price"> ￥1200 </view>
+                  <view class="right-numb"> ×1 </view>
+                </view>
               </view>
-              <view class="right-title">
-                Ceshi 111
-              </view>
-              <view class="right-price">
-               <view class="price"> ￥{{ itm.goodsPrice }} </view>
-               <view class="numb"> x {{ itm.realAmount }} </view>
+              <view class="r-r">
+                <view class="r-item" @click="handlerSkipComment(item)">
+                  <u-icon name="chat" color="#000" size="28"></u-icon>
+                  <span>评价</span>
+                </view>
               </view>
             </view>
           </view>
-          <view class="u-border-bottom">
-            <button @click.stop='handlerCancelOrder(item)'>取消订单</button>
+
+          <u-line margin='20rpx 0' dashed='true'></u-line>
+
+          <view class="item-allnumb-box">
+            <view class="allnumb-left"> 3件商品 </view>
+            <view class="allnumb-right"> <span class="r-text">共计</span>￥2371.19 </view>
+          </view>
+
+          <view class="item-bottom">
+            <button class='btn'>取消订单</button>
           </view>
+
         </view>
       </view>
       <!-- <view v-else style="margin-top: 40rpx">
@@ -46,152 +62,220 @@
 </template>
 
 <script>
-import { userOrdersApi , getUserOrderList , cancelOrder } from '@/api/client/order';
-export default {
-  data() {
-    return {
-      current: 0,
-      type: 0,
-      type_name:'',
-      size: 20,
-      // 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->无效订单
-      list: [
-        {
-          name: '待付款',
-          type: 0,
-        },
-        {
-          name: '待发货',
-          type: 1,
-        },
-        {
-          name: '已发货',
-          type: 2,
-        },
-        {
-          name: '已完成',
-          type: 3,
-        },
-        {
-          name: '已关闭',
-          type: 4,
-        },
-        {
-          name: '无效订单',
-          type: 5,
-        },
-      ],
-      init_list: [],
-    };
-  },
-  mounted() {
-    this.userOrdersPage();
-  },
-
-  methods: {
-    handlerChangeItem(data) {
-      this.current = data.index;
-      this.type = data.type;
-      this.type_name = data.name;
-      this.userOrdersPage(this.type);
+  import {
+    userOrdersApi,
+    getUserOrderList,
+    cancelOrder
+  } from '@/api/client/order';
+  export default {
+    data() {
+      return {
+        current: 0,
+        type: 0,
+        type_name: '',
+        size: 20,
+        // 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->无效订单
+        list: [{
+            name: '待付款',
+            type: 0,
+          },
+          {
+            name: '待发货',
+            type: 1,
+          },
+          {
+            name: '已发货',
+            type: 2,
+          },
+          {
+            name: '已完成',
+            type: 3,
+          },
+          {
+            name: '已关闭',
+            type: 4,
+          },
+          {
+            name: '无效订单',
+            type: 5,
+          },
+        ],
+        init_list: [],
+      };
     },
-
-    async userOrdersPage(type) {
-      let orderStatus = type == undefined ? 0 : `${type}`;
-      let res = await getUserOrderList({
-        status:orderStatus,
-        paging: '1,20',
-      });
-      if ((res.code = 200 && res.data)) {
-       this.init_list = res.data.records;
-      }
+    mounted() {
+      this.userOrdersPage();
     },
 
-    // 跳转到订单详情
-    handlerSkipDetail(e){
-      console.log('@@@@e',e);
-      uni.navigateTo({
-        url:`/pages/client/clientPackage/orderDetail?orderList=${JSON.stringify(e)}`
-      })
-    },
-    // 取消订单
-    handlerCancelOrder(e){
-      cancelOrder(e.id).then(res=>{
-        console.log('###res',res);
-        if(res.code == 200){
-          uni.showToast({
-            title:'取消成功',
-            icon:'none'
-          })
-          this.userOrdersPage(this.type)
-        }else{
-          console.log('###res',res);
+    methods: {
+      handlerChangeItem(data) {
+        this.current = data.index;
+        this.type = data.type;
+        this.type_name = data.name;
+        this.userOrdersPage(this.type);
+      },
+
+      async userOrdersPage(type) {
+        let orderStatus = type == undefined ? 0 : `${type}`;
+        let res = await getUserOrderList({
+          status: orderStatus,
+          paging: '1,20',
+        });
+        if ((res.code = 200 && res.data)) {
+          this.init_list = res.data.records;
         }
-      })
-    }
-  },
-};
+      },
+
+      // 跳转到订单详情
+      handlerSkipDetail(e) {
+        console.log('@@@@e', e);
+        uni.navigateTo({
+          url: `/pages/client/clientPackage/orderDetail?orderList=${JSON.stringify(e)}`
+        })
+      },
+      // 取消订单
+      handlerCancelOrder(e) {
+        cancelOrder(e.id).then(res => {
+          console.log('###res', res);
+          if (res.code == 200) {
+            uni.showToast({
+              title: '取消成功',
+              icon: 'none'
+            })
+            this.userOrdersPage(this.type)
+          } else {
+            console.log('###res', res);
+          }
+        })
+      },
+      // 点击跳转到商品评价
+      handlerSkipComment(item){
+        uni.navigateTo({
+          url:"/pages/client/clientPackage/goodsEstimation"
+        })
+      }
+    },
+  };
 </script>
 
 <style lang="scss" scoped>
-  .order{
-    .order-box{
-      padding: 20rpx;
-      .order-item{
-        border-radius: 20rpx;
-        padding: 20rpx;
+  .order {
+    margin-top: 10px;
+    padding: 10rpx 20rpx 20rpx;
+    box-sizing: border-box;
+
+    .order-box {
+      .order-item {
         margin-bottom: 20rpx;
         background-color: #fff;
-        box-shadow: 5rpx 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.2);
-        .order-top{
+        border-radius: 20rpx;
+        padding: 20rpx;
+        box-shadow: 0 8rpx 15rpx 0 rgba(0, 0, 0, 0.08);
+
+        .item-top {
           display: flex;
           justify-content: space-between;
-          .top-left{
-            font-size: 26rpx;
-            color: #C7C7C7;
-          }
-          .top-right{
-            font-size: 28rpx;
-            color: #C54E55;
-          }
+          margin-bottom: 10rpx;
         }
 
-        .order-center{
+        .item-center {
           display: flex;
-          .center-left{
-            margin-right: 20rpx;
-            width: 30%;
-            .left-img{
-              width: 200rpx;
-              height: 200rpx;
-              border-radius: 20rpx;
+          align-items: center;
+          margin-bottom: 10rpx;
+          .center-left {
+            height: 160rpx;
+
+            .img {
+              width: 160rpx;
+              height: 160rpx;
             }
           }
 
-          .center-right{
+          .center-right {
+            width: 100%;
+            height: 160rpx;
             display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-            width: 70%;
-            .right-title{
-
-            }
-            .right-price{
+            justify-content: space-between;
+            margin-left: 20rpx;
+            .r-l{
               display: flex;
-              justify-content: space-between;
-              .price{
-
+              flex-direction: column;
+              justify-content: space-around;
+              .right-name {
+                color: #4D5671;
+                font-size: 32rpx;
+                font-weight: bold;
               }
-              .numb{
-
+              .right-descript{
+                font-size:28rpx;
+                color: #858797;
+              }
+              .l-box{
+                display: flex;
+                font-size: 24rpx;
+                align-items: center;
+                font-style: italic;
+                .right-price{
+                  margin-right: 20rpx;
+                  font-weight: bold;
+                  font-size: 28rpx;
+                  color: #F57F32;
+                }
+                .right-numb{
+                  font-size: 24rpx;
+                  color: #858797;
+                }
+              }
+            }
+            .r-r{
+              .r-item{
+                align-items: center;
               }
             }
           }
         }
+
+        .item-allnumb-box{
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-weight: bold;
+          .allnumb-left{
+            font-size: 32rpx;
+          }
+          .allnumb-right{
+            font-size: 26rpx;
+            color: #F57F32;
+            .r-text{
+              color: #000;
+            }
+          }
+        }
+
+        .item-bottom{
+          display: flex;
+          width: 100%;
+          margin-top: 20rpx;
+          .btn{
+            width: 80%;
+            height: 70rpx;
+            background-color: rgba(248,213,53, 0.8);
+            color: #4e5059;
+            font-size:28rpx;
+            text-align: center;
+            line-height: 70rpx;
+            border-radius: 20rpx;
+          }
+        }
       }
     }
   }
-::deep .u-tabs__wrapper__nav__item__text {
-  font-size: 30px;
-}
+
+  .gray-color{
+    color: #858797;
+  }
+
+  ::deep .u-tabs__wrapper__nav__item__text {
+    font-size: 30px;
+  }
 </style>