订单详情页面修改

src/views/OrderDetails.vue

@@ -10,7 +10,7 @@
     <div class="content-box">
       <!-- 待使用状态 -->
       <div class="topBox">
-        <div class="topBox_lab" v-if="form.orderStatus == 10">待使用</div>
+        <div class="topBox_lab" v-if="form.orderStatus == 10">待航拍</div>
         <div
           class="topBox_lab"
           v-if="form.orderStatus == 20 && !form.refundStatus"
@@ -78,9 +78,9 @@
             </div>
             <div class="item_c2_item">
               <div class="item_c2_item_lab">游客信息：</div>
-              <div class="item_c2_item_val" v-if="form.refundOrderId">
-                {{ form.productOrder.productVisitor.visitorName }}，{{
-                  form.productOrder.productVisitor.visitorPhone
+              <div class="item_c2_item_val" v-if="form.productVisitor">
+                {{ form.productVisitor.visitorName }}，{{
+                  form.productVisitor.visitorPhone
                 }}
               </div>
             </div>
@@ -180,20 +180,14 @@
       </div>
 
       <!-- 底部按钮 -->
-      <div
-        class="btnBox1"
-        v-if="
-          form.orderStatus == 10 &&
-          takeOffObj.flightStatus != null &&
-          (takeOffObj.flightStatus || !takeOffObj.queueStatus)
-        "
-      >
-        <!-- <div
+      <div class="btnBox1" v-if="form.orderStatus == 10">
+        <div
+          v-if="!takeOffObj.takenOffStatu || !takeOffObj.queueStatus"
           class="btnBox_l"
-          @click="goPath('/pages/order/applicationDrawback')"
+          @click="goPath('/pages/order/applicationDrawback?orderNumber=' + form.orderNumber)"
         >
           申请退款
-        </div> -->
+        </div>
         <!-- <div
           class="btnBox_r"
           v-if="takeOffObj.takenOffStatus"
@@ -201,23 +195,30 @@
         >
           继续飞行
         </div> -->
-        <div
-          class="btnBox_r"
-          v-if="takeOffObj.flightStatus"
-          @click="setTakeOff()"
+        <template
+          v-if="
+            takeOffObj.flightStatus != null &&
+            (takeOffObj.flightStatus || !takeOffObj.queueStatus)
+          "
         >
-          起飞拍摄
-        </div>
-        <div
-          class="btnBox_r"
-          v-if="!takeOffObj.flightStatus && !takeOffObj.queueStatus"
-          @click="lineUpRefClick()"
-        >
-          排队起飞
-        </div>
+          <div
+            class="btnBox_r"
+            v-if="takeOffObj.flightStatus"
+            @click="setTakeOff()"
+          >
+            起飞拍摄
+          </div>
+          <div
+            class="btnBox_r"
+            v-if="!takeOffObj.flightStatus && !takeOffObj.queueStatus"
+            @click="lineUpRefClick()"
+          >
+            排队起飞
+          </div>
+        </template>
       </div>
     </div>
-    <LineUp ref="lineUpRef" @success="getFlightListAll()" />
+    <LineUp ref="lineUpRef" @success="getFlightListAll(true)" />
   </div>
 </template>
 
@@ -233,6 +234,7 @@ import {
   getDroneFlightTaskByQueueId,
 } from "@/api/home.js";
 import LineUp from "@/components/LineUp.vue";
+import { set } from 'vue';
 // import { mapState } from "vuex";
 export default {
   name: "OrderDetails",
@@ -244,6 +246,7 @@ export default {
       disableScroll: false,
       intervalId: null,
       takeOffObj: {},
+      timer: null,
     };
   },
   created() {
@@ -299,13 +302,19 @@ export default {
         });
         if (res.data.orderStatus == 10) {
           this.$nextTick(() => {
-            this.getFlightListAll(true);
+              this.$store.dispatch("initWebSocketUtil");
+              setTimeout(() => {
+                this.getFlightListAll(true);
+              }, 500);
           });
         }
       });
     },
     goPath(path) {
-      this.$router.push(path);
+      // this.$router.push(path);
+      wx.miniProgram.redirectTo({
+        url: path,
+      });
     },
     // 起飞
     setTakeOff() {
@@ -367,6 +376,7 @@ export default {
         productId: this.form.businessProductId,
       });
     },
+    // 获取排队详情信息
     getFlightListAll(show = false) {
       // 实际项目中应该调用API
       flightListAll({
@@ -374,19 +384,12 @@ export default {
         productId: this.form.businessProductId,
       }).then((res) => {
         if (res.code == 200 && res.data) {
-          console.log(res, "=====");
+          // console.log(res, "=====");
           this.takeOffObj = res.data;
-          // console.log(show);
-          if (show) {
-            // if (res.data.takenOffStatus) {
-            //   this.getDroneFlightTaskByQueueId(res.data.queueId)
-            // }
-            // console.log("开始执行");
-            this.$nextTick(() => {
-              this.$store.dispatch("initWebSocketUtil");
-            });
+          if(res.data.queueStatus && show){
+              this.getTimer();
           }
-        }else{
+        } else {
           this.takeOffObj = {};
         }
       });
@@ -405,7 +408,10 @@ export default {
           }).then((res) => {
             if (res.code == 200) {
               Toast("取消成功");
-              this.takeOffObj = {};
+              this.getFlightListAll();
+              if(this.timer){
+                this.beforeDestroy();
+              }
             }
           });
         })
@@ -426,6 +432,18 @@ export default {
         }
       });
     },
+    // 定时器，定时刷新
+    getTimer(){
+      if(this.timer) return;
+      this.timer = setInterval(() => {
+        this.getFlightListAll();
+      }, 120000);
+    }
+  },
+  beforeDestroy() {
+    if(!this.timer) return;
+    // 组件销毁时清除定时器
+    clearInterval(this.timer);
   },
 };
 </script>
@@ -716,7 +734,7 @@ export default {
 }
 
 .btnBox_l {
-  flex: 1;
+  /* flex: 1; */
   display: flex;
   align-items: center;
 }
@@ -766,15 +784,17 @@ export default {
   width: 100px;
   height: 40px;
   background-color: #fff;
-  color: #666;
-  border: 1px solid #ddd;
+  /* color: #666; */
+  /* border: 1px solid #ddd; */
   border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 16px;
+  font-size: 15px;
   margin-right: 15px;
   cursor: pointer;
+  color: #ff4d4f;
+  border: 1px solid #ff4d4f;
 }
 
 .btnBox1 .btnBox_r {