1

orderSubPackage/pages/orderInfo/index.vue

@@ -20,24 +20,34 @@
       >
     </view>
     <div
-      class="order_status"
+      class="order_status order_flow"
       :style="{
         'margin-top': statusBarHeight + navigationBarHeight + getPx(32) + 'px',
       }"
     >
-      <view class="status_text">订单状态：{{ orderStatusText }}</view>
+      <view class="code">
+        <view class="code_label">取单号:</view>
+        <view class="code_content">1978</view>
+      </view>
       <view class="tips">
-        <view v-if="orderInfo.state == 7">为保持口感，请尽快饮用哦～</view>
-        <view v-if="orderInfo.state == 4">订单已制作完成，请尽快取餐～</view>
+        <view v-if="orderInfo.state == 7">制作完成请取杯，享用愉快！</view>
+        <view v-if="orderInfo.state == 4">制作完成请取杯，享用愉快！</view>
         <view v-if="orderInfo.state >= 8 && orderInfo.state <= 15"
           >非常抱歉，我们会继续努力的～</view
         >
         <view v-if="orderInfo.state == 2 || orderInfo.state == 3"
-          >请您耐心等候，预计<text class="time">{{ waitTime }}</text
-          >分钟后可取</view
+          ><text class="time">{{waitTime}}</text
+          >分钟后可取，请稍等！</view
         >
       </view>
-      <div class="btns">
+      <view class="statusTip">
+        <view class="tip_box">
+          <view class="tip"></view>
+          <view class="tip"></view>
+          <view class="tip"></view>
+        </view>
+      </view>
+      <!-- <div class="btns">
         <a
           type="primary"
           @click="cancelOrder"
@@ -73,10 +83,10 @@
           class="btn_cancel"
           >退款详情</a
         >
-      </div>
-    </div>
-    <div class="order_flow" v-if="qrShow">
-      <div v-if="qrShow" class="code">取单码 {{ orderInfo.orderNum }}</div>
+      </div> -->
+    <!-- </div>
+    <div class="order_flow" v-if="qrShow"> -->
+      <!-- <div v-if="qrShow" class="code">取单码 {{ orderInfo.orderNum }}</div> -->
       <div class="realQrcodeBox" v-if="qrShow && isBuild">
         <image mode="aspectFit" :src="ewmImg" />
       </div>
@@ -471,36 +481,7 @@ export default {
     // 15 已退款
     // 50 其他人工干预状态
     orderStatusText() {
-      switch (this.orderInfo.state) {
-        case "1":
-          return "待付款";
-        case "2":
-          return "待制作";
-        case "3":
-          return "制作中";
-        case "4":
-          return "待取餐";
-        case "5":
-          return "取餐中";
-        case "6":
-        case "7":
-          return "已完成";
-        case "8":
-        case "9":
-        case "10":
-        case "11":
-          return "已取消";
-        case "12":
-          return "退款中";
-        case "13":
-          return "退款失败";
-        case "14":
-          return "部分退款";
-        case "15":
-          return "已退款";
-        default:
-          return "未知状态";
-      }
+      return Utils.statusFillter(this.orderInfo.state)
     },
     qrText() {
       switch (this.orderInfo.state) {
@@ -552,29 +533,46 @@ export default {
   margin: 32rpx 32rpx;
   padding: 24rpx 0rpx 32rpx 0rpx;
 
-  .status_text {
-    font-size: 32rpx;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-    color: #333333;
-    text-align: center;
+  .code {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: Futura Medium, Arial, sans-serif;
+
+    .code_label {
+      margin-right: 10rpx;
+      font-weight: 900;
+      font-size: 45rpx;
+      color: #343434;
+    }
+
+    .code_content {
+      font-size: 45rpx;
+      font-weight: 800;
+      letter-spacing: 2rpx;
+      color: #0012ff;
+    }
   }
 
   .tips {
-    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     margin-top: 15rpx;
 
-    font-size: 24rpx;
+    font-size: 28rpx;
     font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;
     color: #999999;
+    margin-left: 20rpx;
 
     .time {
-      font-size: 32rpx;
+      font-size: 25rpx;
+      font-weight: bolder;
       font-family: Futura Medium, Arial, sans-serif;
-      font-weight: normal;
-      color: #0050f6;
-      margin: 0 16rpx;
+      color: #353535;
+      margin-right: 5rpx;
+      // margin-left: 20rpx;
     }
   }
 
@@ -589,7 +587,28 @@ export default {
       line-height: 64rpx;
     }
   }
+  .statusTip {
+    border: 1rpx solid red;
+    margin: 15rpx 0px;
+    // text-align: center;
+    height: 100rpx;
 
+    .tip_box {
+      width: 450rpx;
+      margin: 0 auto;
+      border: 1rpx solid blue;
+      height: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      
+      .tip {
+        height: 100%;
+        width: 100rpx;
+        border: 1rpx solid green;
+      }
+    }
+  }
   .btn {
     font-size: 24rpx;
     font-family: PingFangSC-Regular, PingFang SC;
@@ -663,10 +682,10 @@ export default {
   }
   .realQrcodeBox {
     margin: 0 auto;
-    width: 474.6rpx;
+    width: 450rpx;
     margin-top: 38rpx;
     margin-bottom: 37rpx;
-    height: 476rpx;
+    height: 450rpx;
     overflow: hidden;
     image {
       width: 100%;

pages/order/order.vue

@@ -229,36 +229,7 @@ export default {
     },
     getStateText(state) {
       state = "" + state;
-      switch (state) {
-        case "1":
-          return "待付款";
-        case "2":
-          return "待制作";
-        case "3":
-          return "制作中";
-        case "4":
-          return "待取餐";
-        case "5":
-          return "取餐中";
-        case "6":
-        case "7":
-          return "已完成";
-        case "8":
-        case "9":
-        case "10":
-        case "11":
-          return "已取消";
-        case "12":
-          return "退款中";
-        case "13":
-          return "退款失败";
-        case "14":
-          return "部分退款";
-        case "15":
-          return "已退款";
-        default:
-          return "未知状态";
-      }
+      return Utils.statusFillter(state)
     },
     async oneMoreOrder(item) {
       // 清空购物车
@@ -349,8 +320,13 @@ export default {
       uni.navigateTo({ url });
     },
     jsonParse(json) {
+      try{
       const data = json || {};
       return JSON.parse(data);
+      }catch{
+        return {}
+      }
+
     },
     orderDetailsSize(orderDetails) {
       let size = 0;

utils/utils.js

@@ -249,4 +249,41 @@ export default {
     }
     return obj;
   },
+  // 订单状态过滤
+  statusFillter(state) {
+    switch (state) {
+      case "1":
+        return "待制作";
+      case "2":
+        return "制作中";
+      case "3":
+        return "制作中";
+      case "4":
+        return "完成";
+      case "5":
+        return "完成";
+      case "6":
+        return "订单已完成";
+      case "7":
+        return "订单已完成";
+      case "8":
+        return "订单已取消";
+      case "9":
+        return "订单已取消";
+      case "10":
+        return "订单已取消";
+      case "11":
+        return "订单已取消";
+      case "12":
+        return "退款中";
+      case "13":
+        return "退款中";
+      case "14":
+        return "退款成功";
+      case "15":
+        return "退款成功";
+      default:
+        return "未知状态";
+    }
+  }
 };