订单

src/pages/guide/order.vue

@@ -40,7 +40,7 @@
 
       <div class="tab-box">
         <div
-          @click="tabIndex = item.value"
+          @click="changeTab(item.value)"
           v-for="item in tabs"
           :key="item.value"
           :class="tabIndex == item.value ? 'active' : ''"
@@ -65,10 +65,11 @@
             <van-button
               class="border-none"
               :hairline="false"
+              v-if="item.status==0"
               color="#2a2a2a"
               type="success"
               loading-text="Pay"
-              :Loading="btnLoading"
+              :loading="btnLoading"
               @click="onPay(item.orderNo)"
               >Pay</van-button
             >
@@ -106,6 +107,13 @@
             <span>{{ item.goods_lr }}</span>
           </div>
         </div>
+
+        <van-empty v-if="!orderData.length" >
+          <template #description>
+            <span style="font-size: 1.2rem;">No Data</span>
+          </template>  
+        </van-empty>
+
       </div>
     </div>
   </div>
@@ -134,6 +142,11 @@ export default {
     };
   },
   methods: {
+    changeTab(index){
+      this.orderData=[];
+      this.tabIndex=index;
+      this.getOrderList(index);
+    },
     onPay(orderId) {
       Dialog.confirm({
         title: "pay",
@@ -148,6 +161,7 @@ export default {
           }).then((res) => {
             if(res.code==200){
               Toast('Payment successful');
+              this.getOrderList(); 
             }else{
               Toast(res.msg);
             }
@@ -174,15 +188,22 @@ export default {
       }
       console.log("酒店轮播图：", res.data);
     },
-    getOrderList() {
+    getOrderList(index) {
+      Toast.loading({
+        message: 'loading...',
+        duration:0
+      });
+
       orderList({
-        status: 0,
+        status:index || 0,
         page: 1,
         size: 999,
       }).then((res) => {
         this.orderData = res.data;
+      }).finally(()=>{
+        Toast.clear();
       });
-    },
+    }
   },
   mounted() {
     this.getLunBoHotel();
@@ -212,7 +233,8 @@ export default {
   .content {
     padding: 0 20px;
     .list {
-      border-bottom: 1px solid #fafafa;
+      border-bottom: 1px solid #eee;
+      margin-bottom: 2rem;
       .header {
         flex: 1;
         display: flex;