order page

nova-tourism/pages/my/my-order/index.js

@@ -13,7 +13,8 @@ Page({
         bottomNavHeight: 0,
         contentHeight: 0,
 
-        active: 0,
+
+        currentTab:0,
 
         option: [{
                 text: '民宿订单',
@@ -33,7 +34,7 @@ Page({
      */
     onLoad: function (options) {
         this.setData({
-            active: Number(options.active)
+            currentTab: Number(options.active)
         })
 
         const systemInfo = wx.getSystemInfoSync();
@@ -53,31 +54,31 @@ Page({
         });
         this.getRoomOrder()
     },
-    //改变民宿或物品
-    change(e) {
-        console.log(this.data.value);
+    switchTab (e) {
+        const index = e.currentTarget.dataset.index;
         this.setData({
-            active: 0
-        })
+          currentTab: index,
+        });
         if (this.data.value == '民宿') {
             this.getRoomOrder()
         } else {
 
         }
-    },
-    //改变订单状态
-    onChange(event) {
-        let active = event.detail.name;
+        console.log(this.data.currentTab, this.data.value);
+      },
+    //改变民宿或物品
+    change(e) {
+        console.log(this.data.value);
         this.setData({
-            active: active
-        });
+            currentTab: 0
+        })
         if (this.data.value == '民宿') {
             this.getRoomOrder()
         } else {
 
         }
-        console.log(this.data.active, this.data.value);
     },
+
     formatDate2(date1, date2) {
         date1 = new Date(date1);
         date2 = new Date(date2);
@@ -100,14 +101,13 @@ Page({
         Order.include('room');
         Order.equalTo('user', Parse.User.current().id);
         Order.include('shopStore');
-        if (this.data.active == 0) {
+        if (this.data.currentTab == 0) {
             Order.equalTo('status', 100);
         }
-        if (this.data.active == 1) {
+        if (this.data.currentTab == 1) {
             Order.equalTo('status', 200);
         }
-        if (this.data.active == 2) {
-            console.log(this.data.active);
+        if (this.data.currentTab == 2) {
             Order.equalTo('status', 800);
         }
         // 添加排序条件

nova-tourism/pages/my/my-order/index.less

@@ -16,7 +16,37 @@
             box-shadow:none;
         }
     }
-
+    .tab-bar {
+        display: flex;
+        justify-content: space-around;
+        background-color: white;
+        padding-bottom: 10rpx;
+      }
+      
+      .tab-item {
+        padding: 10px 0;
+        text-align: center;
+        position: relative;
+        color: #969696;
+      }
+      
+      .tab-item.active {
+        position: relative;
+        color: #67806A;
+      }
+      
+      .tab-item.active::after {
+        content: "";
+        width: 80%;
+        position: absolute;
+        left: 10%;
+        right: 10%; 
+        bottom: 0;
+        height: 6rpx;
+        background-color: #67806A;
+        border-radius: 4rpx;
+        
+      }
     .cardbox{
         width: 100%;
         height: auto;

nova-tourism/pages/my/my-order/index.wxml

@@ -9,82 +9,91 @@
         </view>
     </view>
 
-    <van-tabs active="{{ active }}" color='#B2CEB9' bind:change="onChange" title-inactive-color='#969696' title-active-color='#B2CEB9'>
-        <van-tab title="处理中">
-            <block wx:if="{{value=='民宿'}}" wx:for="{{roomList}}">
-                <view class="cardbox">
-                    <view class="title">{{item.shopStore.storeName}}</view>
-                    <view class="roombox">
-                        <image src="{{item.room.images[0]}}"></image>
-                        <view class="room">
-                            <view class="room-name">{{item.room.name}}</view>
-                            <view class="room-tag">
-                                <block wx:for="{{item.room.tags}}">
-                                    {{item}}
-                                </block>
-                            </view>
-                            <view class="room-text">{{item.tiem}}</view>
+    <view class="tab-bar">
+        <view class="tab-item {{currentTab == 0? 'active' : ''}}" bindtap="switchTab" data-index="0">
+            <text>处理中</text>
+        </view>
+        <view class="tab-item {{currentTab == 1? 'active' : ''}}" bindtap="switchTab" data-index="1">
+            <text>进行中</text>
+        </view>
+        <view class="tab-item {{currentTab == 2? 'active' : ''}}" bindtap="switchTab" data-index="2">
+            <text>已完成</text>
+        </view>
+    </view>
+    <view wx:if="{{currentTab == 0}}">
+        <block wx:if="{{value=='民宿'}}" wx:for="{{roomList}}">
+            <view class="cardbox">
+                <view class="title">{{item.shopStore.storeName}}</view>
+                <view class="roombox">
+                    <image src="{{item.room.images[0]}}"></image>
+                    <view class="room">
+                        <view class="room-name">{{item.room.name}}</view>
+                        <view class="room-tag">
+                            <block wx:for="{{item.room.tags}}">
+                                {{item}}
+                            </block>
                         </view>
-                    </view>
-                    <van-divider customStyle="margin: 20rpx;border-color:'#B1B1B1' " />
-                    <view class="pricebox">
-                        <view class="price">实付款￥{{item.price}}</view>
-                    </view>
-                    <view class="sumbitbox">
-                        <view class="sumbit" bindtap="gourl" data-url="../my-order/order-detail/index" data-id="{{item.objectId}}">订单详细</view>
+                        <view class="room-text">{{item.tiem}}</view>
                     </view>
                 </view>
-            </block>
-            <!-- <block wx:if="{{value=='物品'}}" wx:for="{{3}}">
-                <view class="cardbox">
-                    <view class="title">望仙礼遇</view>
-                    <view class="roombox">
-                        <image src="https://file-cloud.fmode.cn//tmp/mqHkA2qV3Q8nca3dc59bad49de6e5ae57afa81d78ae8.jpeg?imageView2/1/w/200/h/200"></image>
-                        <view class="room">
-                            <view class="room-name">房间描述房间描述</view>
-                            <view class="room-text2">紫色经典款</view>
-                        </view>
-                    </view>
-                    <van-divider customStyle="margin: 20rpx;border-color:'#B1B1B1' " />
-                    <view class="pricebox">
-                        <view class="ciri">望仙次日达</view>
-                        <view class="price">实付款￥19999.99</view>
-                    </view>
-                    <view class="sumbitbox">
-                        <view class="sumbit" bindtap="gourl" data-url="../my-order/order-detail/index" data-id="{{item.objectId}}">订单详细</view>
+                <van-divider customStyle="margin: 20rpx;border-color:'#B1B1B1' " />
+                <view class="pricebox">
+                    <view class="price">实付款￥{{item.price}}</view>
+                </view>
+                <view class="sumbitbox">
+                    <view class="sumbit" bindtap="gourl" data-url="../my-order/order-detail/index" data-id="{{item.objectId}}">订单详细</view>
+                </view>
+            </view>
+        </block>
+        <!-- <block wx:if="{{value=='物品'}}" wx:for="{{3}}">
+            <view class="cardbox">
+                <view class="title">望仙礼遇</view>
+                <view class="roombox">
+                    <image src="https://file-cloud.fmode.cn//tmp/mqHkA2qV3Q8nca3dc59bad49de6e5ae57afa81d78ae8.jpeg?imageView2/1/w/200/h/200"></image>
+                    <view class="room">
+                        <view class="room-name">房间描述房间描述</view>
+                        <view class="room-text2">紫色经典款</view>
                     </view>
                 </view>
-            </block> -->
-            <van-empty wx:if="{{value=='民宿'&&roomList.length==0}}" description="暂无订单" />
-        </van-tab>
-
-        <van-tab title="进行中">
-
-            <block wx:if="{{value=='民宿'}}" wx:for="{{roomList}}">
-                <view class="cardbox">
-                    <view class="title">{{item.shopStore.storeName}}</view>
-                    <view class="roombox">
-                        <image src="{{item.room.images[0]}}"></image>
-                        <view class="room">
-                            <view class="room-name">{{item.room.name}}</view>
-                            <view class="room-tag">
-                                <block wx:for="{{item.room.tags}}">
-                                    {{item}}
-                                </block>
-                            </view>
-                            <view class="room-text">{{item.tiem}}</view>
+                <van-divider customStyle="margin: 20rpx;border-color:'#B1B1B1' " />
+                <view class="pricebox">
+                    <view class="ciri">望仙次日达</view>
+                    <view class="price">实付款￥19999.99</view>
+                </view>
+                <view class="sumbitbox">
+                    <view class="sumbit" bindtap="gourl" data-url="../my-order/order-detail/index" data-id="{{item.objectId}}">订单详细</view>
+                </view>
+            </view>
+        </block> -->
+        <van-empty wx:if="{{value=='民宿'&&roomList.length==0}}" description="暂无订单" />
+        <van-empty wx:if="{{value=='物品'}}" description="暂无订单" />
+    </view>
+    <view wx:if="{{currentTab == 1}}">
+        <block wx:if="{{value=='民宿'}}" wx:for="{{roomList}}">
+            <view class="cardbox">
+                <view class="title">{{item.shopStore.storeName}}</view>
+                <view class="roombox">
+                    <image src="{{item.room.images[0]}}"></image>
+                    <view class="room">
+                        <view class="room-name">{{item.room.name}}</view>
+                        <view class="room-tag">
+                            <block wx:for="{{item.room.tags}}">
+                                {{item}}
+                            </block>
                         </view>
-                    </view>
-                    <van-divider customStyle="margin: 20rpx;border-color:'#B1B1B1' " />
-                    <view class="pricebox">
-                        <view class="price">实付款￥{{item.price}}</view>
-                    </view>
-                    <view class="sumbitbox">
-                        <view class="sumbit" bindtap="gourl" data-url="../my-order/order-detail/index" data-id="{{item.objectId}}">变更订单</view>
+                        <view class="room-text">{{item.tiem}}</view>
                     </view>
                 </view>
-            </block>
-            <!-- <block wx:if="{{value=='物品'}}" wx:for="{{3}}">
+                <van-divider customStyle="margin: 20rpx;border-color:'#B1B1B1' " />
+                <view class="pricebox">
+                    <view class="price">实付款￥{{item.price}}</view>
+                </view>
+                <view class="sumbitbox">
+                    <view class="sumbit" bindtap="gourl" data-url="../my-order/order-detail/index" data-id="{{item.objectId}}">变更订单</view>
+                </view>
+            </view>
+        </block>
+        <!-- <block wx:if="{{value=='物品'}}" wx:for="{{3}}">
                 <view class="cardbox">
                     <view class="title">望仙礼遇</view>
                     <view class="roombox">
@@ -104,36 +113,35 @@
                     </view>
                 </view>
             </block> -->
-            <van-empty wx:if="{{value=='民宿'&&roomList.length==0}}" description="暂无订单" />
-        </van-tab>
-
-        <van-tab title="已完成">
-
-            <block wx:if="{{value=='民宿'}}" wx:for="{{roomList}}">
-                <view class="cardbox">
-                    <view class="title">{{item.shopStore.storeName}}</view>
-                    <view class="roombox">
-                        <image src="{{item.room.images[0]}}"></image>
-                        <view class="room">
-                            <view class="room-name">{{item.room.name}}</view>
-                            <view class="room-tag">
-                                <block wx:for="{{item.room.tags}}">
-                                    {{item}}
-                                </block>
-                            </view>
-                            <view class="room-text">{{item.tiem}}</view>
+        <van-empty wx:if="{{value=='民宿'&&roomList.length==0}}" description="暂无订单" />
+        <van-empty wx:if="{{value=='物品'}}" description="暂无订单" />
+    </view>
+    <view wx:if="{{currentTab == 2}}">
+        <block wx:if="{{value=='民宿'}}" wx:for="{{roomList}}">
+            <view class="cardbox">
+                <view class="title">{{item.shopStore.storeName}}</view>
+                <view class="roombox">
+                    <image src="{{item.room.images[0]}}"></image>
+                    <view class="room">
+                        <view class="room-name">{{item.room.name}}</view>
+                        <view class="room-tag">
+                            <block wx:for="{{item.room.tags}}">
+                                {{item}}
+                            </block>
                         </view>
-                    </view>
-                    <van-divider customStyle="margin: 20rpx;border-color:'#B1B1B1' " />
-                    <view class="pricebox">
-                        <view class="price">实付款￥{{item.price}}</view>
-                    </view>
-                    <view class="sumbitbox">
-                        <view class="sumbit" bindtap="gourl" data-url="../my-order/order-detail/index" data-id="{{item.objectId}}">订单详细</view>
+                        <view class="room-text">{{item.tiem}}</view>
                     </view>
                 </view>
-            </block>
-            <!-- <block wx:if="{{value=='物品'}}" wx:for="{{3}}">
+                <van-divider customStyle="margin: 20rpx;border-color:'#B1B1B1' " />
+                <view class="pricebox">
+                    <view class="price">实付款￥{{item.price}}</view>
+                </view>
+                <view class="sumbitbox">
+                    <view class="sumbit" bindtap="gourl" data-url="../my-order/order-detail/index" data-id="{{item.objectId}}">订单详细</view>
+                </view>
+            </view>
+        </block>
+        <!-- <block wx:if="{{value=='物品'}}" wx:for="{{3}}">
                 <view class="cardbox">
                     <view class="title">望仙礼遇</view>
                     <view class="roombox">
@@ -153,9 +161,9 @@
                     </view>
                 </view>
             </block> -->
-            <van-empty wx:if="{{value=='民宿'&&roomList.length==0}}" description="暂无订单" />
-        </van-tab>
-    </van-tabs>
+        <van-empty wx:if="{{value=='民宿'&&roomList.length==0}}" description="暂无订单" />
+        <van-empty wx:if="{{value=='物品'}}" description="暂无订单" />
+    </view>
     <!-- 望仙礼遇 -->
     <!-- <view class="box">
         <view class="wangbox">