订单

src/api/order.js

@@ -9,10 +9,10 @@ export function getOrderList(data) {
   });
 }
 
-// 订单列表接口
+// 订单详情接口
 export function getOrderDetail(data) {
   return request({
-    url: '/sgyrdd/sgyOrder/groupBuy/orderInfo',
+    url: '/sgyrdd/sgyOrder/orderInfo',
     method: 'GET',
     data,
   });

src/pages/order/detail.vue

@@ -9,20 +9,20 @@
             name="check-outline"
             size="26px"
             color="#333"
-            v-if="orderDetail.status == 5 || orderDetail.status == 7"
+            v-if="orderDetail.orderStore.status == 5 || orderDetail.orderStore.status == 7"
           ></wd-icon>
           <wd-icon
             name="close-outline"
             size="26px"
             color="#333"
-            v-if="orderDetail.status == 6"
+            v-if="orderDetail.orderStore.status == 6"
           ></wd-icon>
-          <view class="status-text">{{ statusList[orderDetail.status] }}</view>
+          <view class="status-text">{{ statusList[orderDetail.orderStore.status] }}</view>
         </view>
-        <view class="detail" v-if="orderDetail.status == 3">
-          请在{{ orderDetail.receiverTime.slice(0, 4) }}年{{
-            orderDetail.receiverTime.slice(5, 7)
-          }}月{{ orderDetail.receiverTime.slice(8, 10) }}前到店消费
+        <view class="detail" v-if="orderDetail.orderStore.subStatus == 3">
+          请在{{ orderDetail.orderStore.receiverTime.slice(0, 4) }}年{{
+            orderDetail.orderStore.receiverTime.slice(5, 7)
+          }}月{{ orderDetail.orderStore.receiverTime.slice(8, 10) }}前到店消费
         </view>
       </view>
 
@@ -52,30 +52,42 @@
             <image :src="qrcode" class="qr"></image>
           </view>
           <view class="info-box">
-            <view class="between" v-if="orderDetail.status == 2 || orderDetail.status == 3">
+            <view
+              class="between"
+              v-if="orderDetail.orderStore.subStatus == 2 || orderDetail.orderStore.subStatus == 3"
+            >
               <view class="column">
                 <text class="title">券码信息（1张可用）</text>
-                <text class="text">{{ orderDetail.receiverTime }} 到期</text>
+                <text class="text">{{ orderDetail.orderStore.receiverTime }} 到期</text>
+              </view>
+              <view class="btn" @tap="handleRefund(orderDetail.orderStore.orderNumber)">
+                申请退款
               </view>
-              <view class="btn" @tap="handleRefund(orderDetail.orderNumber)">申请退款</view>
             </view>
             <view class="between">
               <view class="column">
-                <text class="title1" v-if="orderDetail.status != 2 || orderDetail.status != 3">
+                <text
+                  class="title1"
+                  v-if="
+                    orderDetail.orderStore.subStatus != 2 || orderDetail.orderStore.subStatus != 3
+                  "
+                >
                   券码信息
                 </text>
                 <text
                   :class="
-                    orderDetail.status == 5 || orderDetail.status == 6 || orderDetail.status == 7
+                    orderDetail.orderStore.subStatus == 5 ||
+                    orderDetail.orderStore.subStatus == 6 ||
+                    orderDetail.orderStore.subStatus == 7
                       ? 'linethrough'
                       : 'phone'
                   "
                 >
-                  {{ orderDetail.orderNumber.slice(6) }}
+                  {{ orderDetail.orderStore.orderNumber.slice(6) }}
                 </text>
               </view>
 
-              <text class="text">{{ orderStatusList[orderDetail.status] }}</text>
+              <text class="text">{{ orderStatusList[orderDetail.orderStore.subStatus] }}</text>
             </view>
           </view>
         </view>
@@ -153,14 +165,17 @@
       <!-- 订单详情 -->
       <view class="info">
         <view class="tips padding">
-          <text class="title">实付金额：￥{{ orderDetail.actualTotal }}</text>
+          <text class="title">实付金额：￥{{ orderDetail.orderStore.actualTotal }}</text>
           <view class="tips-box">
             <view class="row">
               <text class="name">订单号</text>
               <text class="colon">：</text>
               <view class="copybox">
-                <text class="text">{{ orderDetail.orderNumber.slice(6) }}</text>
-                <view class="copy" @tap="copyTextToClipboard(orderDetail.orderNumber.slice(6))">
+                <text class="text">{{ orderDetail.orderStore.orderNumber.slice(6) }}</text>
+                <view
+                  class="copy"
+                  @tap="copyTextToClipboard(orderDetail.orderStore.orderNumber.slice(6))"
+                >
                   复制
                 </view>
               </view>
@@ -168,17 +183,17 @@
             <view class="row">
               <text class="name">手机号</text>
               <text class="colon">：</text>
-              <text class="text">{{ maskPhoneNumber(orderDetail.receiverMobile) }}</text>
+              <text class="text">{{ maskPhoneNumber(orderDetail.orderStore.receiverMobile) }}</text>
             </view>
-            <view class="row" v-if="orderDetail.payTime">
+            <view class="row" v-if="orderDetail.orderStore.payTime">
               <text class="name">付款时间</text>
               <text class="colon">：</text>
-              <text class="text">{{ orderDetail.payTime }}</text>
+              <text class="text">{{ orderDetail.orderStore.payTime }}</text>
             </view>
             <view class="row">
               <text class="name">下单时间</text>
               <text class="colon">：</text>
-              <text class="text">{{ orderDetail.createTime }}</text>
+              <text class="text">{{ orderDetail.orderStore.createTime }}</text>
             </view>
             <view class="row">
               <text class="name">数量</text>
@@ -188,17 +203,17 @@
             <view class="row">
               <text class="name">总价</text>
               <text class="colon">：</text>
-              <text class="text">￥{{ orderDetail.total }}</text>
+              <text class="text">￥{{ orderDetail.orderStore.total }}</text>
             </view>
             <view class="row">
               <text class="name">优惠明细</text>
               <text class="colon">：</text>
-              <text class="text">-￥{{ orderDetail.reduceAmount }}</text>
+              <text class="text">-￥{{ orderDetail.orderStore.reduceAmount }}</text>
             </view>
             <view class="row">
               <text class="name">实付</text>
               <text class="colon">：</text>
-              <text class="text">￥{{ orderDetail.actualTotal }}</text>
+              <text class="text">￥{{ orderDetail.orderStore.actualTotal }}</text>
             </view>
           </view>
         </view>
@@ -260,11 +275,11 @@ const orderDetail = ref();
 const getDetail = async () => {
   const res = await getOrderDetail({ orderNumber: orderNumber.value });
   orderDetail.value = res.data;
-  if (orderDetail.value.status === '2' || orderDetail.value.status === '3') {
-    codeDetail(orderDetail.value.orderNumber);
+  if (orderDetail.value.orderStore.status === '2' || orderDetail.value.orderStore.status === '3') {
+    codeDetail(orderDetail.value.orderStore.orderNumber);
   }
   getProductDetail(orderDetail.value.orderItems[0].prodId);
-  getShopMailDetail(orderDetail.value.shopId);
+  getShopMailDetail(orderDetail.value.baseOrder.shopId);
 };
 
 /**

src/pages/order/order.vue

@@ -13,12 +13,12 @@
                     <view class="title">{{ item.shopName }}</view>
                   </view>
                   <view class="right">
-                    <span class="status">{{ statusList[item.status] }}</span>
+                    <span class="status">{{ stateList[item.status].label }}</span>
                     <wd-count-down
                       :time="item.countDown"
                       :format="format"
                       @finish="onFinish(item.orderNumber)"
-                      v-if="item.status == 1"
+                      v-if="item.status === 'not_pay'"
                     />
                   </view>
                 </view>
@@ -36,14 +36,14 @@
                 <view class="btn">
                   <view
                     class="btn-info"
-                    v-if="item.status == 5 || item.status == 6"
+                    v-if="item.status === 'complete' || item.status == 'cancel'"
                     @tap="handleDelete(item.orderNumber)"
                   >
                     删除
                   </view>
                   <view
                     class="btn-info"
-                    v-if="item.status == 3 || item.status == 2"
+                    v-if="item.status === 'receive' || item.status == 'not_use'"
                     @tap="handleQrcode(item)"
                   >
                     核销码
@@ -51,28 +51,40 @@
                   <view
                     class="btn-info"
                     @tap="handleCancel(item.orderNumber)"
-                    v-if="item.status == 1"
+                    v-if="item.status === 'not_pay'"
                   >
                     取消订单
                   </view>
-                  <view class="btn-info" v-if="item.status == 4" @tap="handleRemark(item)">
+                  <view
+                    class="btn-info"
+                    v-if="item.status === 'not_eval'"
+                    @tap="handleRemark(item)"
+                  >
                     评价
                   </view>
                   <view class="btn-info" @tap="callShopPhone(item.shopTel)">联系商家</view>
                   <view class="btn-error" v-if="item.status == 7">售后详情</view>
                   <view
                     class="btn-error"
-                    v-if="item.status == 2 || item.status == 3 || item.status == 4"
+                    v-if="
+                      item.status === 'receive' ||
+                      item.status === 'not_use' ||
+                      item.status === 'not_eval'
+                    "
                     @click="handleRefund(item)"
                   >
                     申请退款
                   </view>
-                  <view class="btn-error" v-if="item.status == 5" @tap="anotherOrder(item)">
+                  <view
+                    class="btn-error"
+                    v-if="item.status === 'complete'"
+                    @tap="anotherOrder(item)"
+                  >
                     再来一单
                   </view>
                   <view
                     class="btn-error"
-                    v-if="item.status == 1"
+                    v-if="item.status === 'not_pay'"
                     @tap="openPayment(item.orderNumber, index)"
                   >
                     立即支付
@@ -101,52 +113,53 @@ import {
   repaymentApi,
   getOrderDetail,
 } from '@/api/order';
+import { getOrderDic } from '@/utils/orderDic';
 const fileDomain = import.meta.env.VITE_APP_IMG_URL;
 
+const stateList = ref();
+onLoad(() => {
+  const orderDic = getOrderDic();
+  stateList.value = orderDic.reduce((obj, item) => {
+    obj[item.baseStatus] = item;
+    return obj;
+  }, {});
+  getList();
+});
+
 const tabs = ref([
   {
     name: '全部',
-    value: '0',
+    value: 'all',
   },
   {
     name: '待付款',
-    value: '1',
+    value: 'not_pay',
   },
   {
     name: '待使用',
-    value: '3',
+    value: 'not_use',
   },
   {
     name: '待评价',
-    value: '4',
+    value: 'not_eval',
   },
   {
     name: '已完成',
-    value: '5',
+    value: 'complete',
   },
   {
     name: '退款/售后',
-    value: '7',
+    value: 'after_sales',
   },
 ]);
 const tab = ref('0');
 
-const statusList = ref({
-  1: '待付款',
-  3: '待消费',
-  4: '待评价',
-  5: '已完成',
-  6: '已取消',
-  7: '已退款',
-});
-
 onShow(() => {
-  console.log(pendingPaymentOrder.value);
   if (pendingPaymentOrder.value) {
     // 查询订单状态决定是否支付
     getOrderDetail({ orderNumber: pendingPaymentOrder.value }).then((res) => {
-      console.log(res.data.status);
-      switch (res.data.status) {
+      console.log(res.data.baseOrder.subStatus);
+      switch (res.data.baseOrder.subStatus) {
         case '1':
           xma.showToast({
             title: '支付失败',
@@ -193,11 +206,12 @@ const catalog = reactive({
   startDate: '',
   endDate: '',
   keyword: '',
-  status: '', // 订单状态，1-待付款，2-待接单，3-待取货，4-待评价，5-完成，6-取消，7-退款
+  status: '', // 待付款-not_pay，待使用-not_use，待评价not_eval，退款-after_sales
+  orderType: 'store', // 团购到店-store，外卖订单-takeaway，筑农物流logistics
 });
 const getList = async () => {
   catalog.status = tab.value;
-  if (tab.value === '0') {
+  if (tab.value === 'all') {
     catalog.status = '';
   }
   catalog.current++;
@@ -206,7 +220,8 @@ const getList = async () => {
   if (res.data.records.length > 0) {
     res.data.records.forEach((item) => {
       // 待付款倒计时计算
-      if (item.status === '1') {
+      if (item.status === 'not_pay') {
+        console.log(item.status);
         item.countDown = calculateCountdown(item.createTime);
       }
     });
@@ -215,7 +230,6 @@ const getList = async () => {
   }
   state.value = 'finished';
 };
-getList();
 
 const handleChange = (e) => {
   tab.value = e.name;

src/pages/order/refund.vue

@@ -14,21 +14,122 @@
               <text>￥0.01</text>
             </view>
           </view>
-          <view class="item-buttom">
+          <view class="item-buttom" style="padding-top: 60rpx">
             <text>共</text>
-            <text>1</text>
+            <text class="num">1</text>
             <text>件商品 实付款</text>
-            <text>￥</text>
+            <text class="icon">￥</text>
             <text class="price">0.01</text>
           </view>
         </view>
+        <view class="content-item">
+          <view class="item-buttom">
+            <text>2024-08-02 10:12:16</text>
+          </view>
+        </view>
+        <view class="content-between">
+          <text>退款金额</text>
+          <text class="price">￥0.01</text>
+        </view>
+        <view class="content-between">
+          <text>相关图片</text>
+          <wd-upload
+            :file-list="fileList"
+            image-mode="aspectFill"
+            :action="action"
+            @change="handleChange"
+          ></wd-upload>
+        </view>
+        <view class="content-between" @tap="showPop = true">
+          <text>退款原因</text>
+          <view class="rightbox">
+            <text>选择退款原因</text>
+            <wd-icon name="arrow-right" size="22px"></wd-icon>
+          </view>
+        </view>
+      </view>
+
+      <view class="btn">提交</view>
+    </view>
+  </view>
+  <wd-popup
+    v-model="showPop"
+    position="bottom"
+    :safe-area-inset-bottom="true"
+    custom-style="border-radius: 16rpx 16rpx 0 0"
+    @close="showPop = false"
+    lockScroll
+  >
+    <view class="pop-content">
+      <view class="header">
+        <view class="title">退款原因</view>
+        <wd-icon name="close" size="20" color="#999" @tap="showPop = false"></wd-icon>
+      </view>
+      <radio-group style="width: 100%" @change="radioChange">
+        <view class="resaon" v-for="(item, index) in reasonList" :key="index">
+          <view class="resaon-item">
+            <text>{{ item.name }}</text>
+            <radio
+              class="radio"
+              color="#f62828"
+              :value="item.id"
+              :checked="item.id == selectType"
+            />
           </view>
         </view>
+        <textarea
+          v-if="selectType == 4"
+          v-model="otherReason"
+          placeholder="请填写原因"
+          placeholder-style="font-size:28rpx;color: #c0c4cc;"
+        ></textarea>
+      </radio-group>
+      <view class="btn">确认</view>
     </view>
+  </wd-popup>
 </template>
 
 <script setup>
 import Header from '@/pages/order/components/Header/index.vue';
+
+const fileList = ref([]);
+
+const action = ref('');
+
+function handleChange({ fileList: files }) {
+  console.log(files);
+  fileList.value = files;
+}
+
+const showPop = ref(false);
+const selectType = ref(0);
+const reasonList = ref([
+  {
+    id: '0',
+    name: '不想要了',
+  },
+  {
+    id: '1',
+    name: '协商一致退款',
+  },
+  {
+    id: '2',
+    name: '缺货',
+  },
+  {
+    id: '3',
+    name: '七天无理由',
+  },
+  {
+    id: '4',
+    name: '其他',
+  },
+]);
+const otherReason = ref('');
+function radioChange(evt) {
+  const { value } = evt.detail;
+  selectType.value = value;
+}
 </script>
 
 <style lang="scss" scoped>
@@ -44,11 +145,11 @@ page {
     padding: 108rpx 10rpx 0;
     display: flex;
     flex-direction: column;
-    gap: 20rpx;
+    gap: 60rpx;
 
     .content-box {
       background-color: #fff;
-      border-radius: 16rpx;
+      border-radius: 8rpx;
       padding: 0 20rpx;
       display: flex;
       flex-direction: column;
@@ -63,9 +164,156 @@ page {
         }
 
         .item-top {
+          display: flex;
+          gap: 20rpx;
+
+          .item-img {
+            width: 120rpx;
+            height: 120rpx;
+            border-radius: 6rpx;
           }
+
+          .item-info {
+            display: flex;
+            flex-direction: column;
+            gap: 20rpx;
+
+            text {
+              font-size: 30rpx;
+              color: #333;
             }
           }
         }
+
+        .item-buttom {
+          display: flex;
+          justify-content: flex-end;
+          align-items: baseline;
+
+          text {
+            font-size: 24rpx;
+            color: #b5b5b5;
+          }
+
+          .num {
+            color: #606060;
+            font-weight: bold;
+          }
+
+          .icon {
+            color: #606060;
+          }
+
+          .price {
+            font-size: 30rpx;
+            color: #606060;
+          }
+        }
+      }
+
+      .content-between {
+        border-bottom: 1rpx solid #f3f3f3;
+        padding: 20rpx 0;
+        display: flex;
+        justify-content: space-between;
+
+        text {
+          color: #747474;
+          font-size: 30rpx;
+        }
+
+        .price {
+          color: #e0302f;
+        }
+
+        .rightbox {
+          display: flex;
+          font-size: 30rpx;
+          color: #b4b4b4;
+        }
+      }
+    }
+  }
+
+  .btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 80rpx;
+    width: 100%;
+    background-color: #f8446b;
+    color: #fff;
+    font-size: 30rpx;
+    border-radius: 8rpx;
+  }
+}
+
+.pop-content {
+  display: flex;
+  flex-direction: column;
+  padding: 20rpx;
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 30rpx;
+
+    .title {
+      font-size: 28rpx;
+      color: #333;
+      font-weight: bold;
+      text-align: center;
+      width: 100%;
+    }
+  }
+
+  textarea {
+    width: 100%;
+    height: 200rpx;
+    border: 1rpx solid #e0e0e0;
+    padding: 20rpx;
+    border-radius: 8rpx;
+    box-sizing: border-box;
+    margin-top: 20rpx;
+    font-size: 28rpx;
+  }
+
+  .resaon {
+    display: flex;
+    flex-direction: column;
+    gap: 20rpx;
+
+    .resaon-item {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10rpx 0;
+      border-bottom: 1rpx solid #f3f3f3;
+
+      text {
+        font-size: 28rpx;
+        color: #333;
+      }
+
+      radio {
+        transform: scale(0.8);
+      }
+    }
+  }
+
+  .btn {
+    margin-top: 100rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 58rpx;
+    color: #fff;
+    font-size: 28rpx;
+    background-color: #f62828;
+    border-radius: 36rpx;
+    width: 100%;
+  }
 }
 </style>