增加tab切换功能

zhiyangdu
1 parent c150b2a5
Showing 2 changed files with 54 additions and 9 deletions
src/pages/myGiftBox/myGiftBox.less
src/pages/myGiftBox/myGiftBox.vue
@@ -53,6 +53,44 @@
         overflow-y: auto;
         box-sizing: border-box;
     }
+    .tab_btn_list{
+        margin: 30px 30px 0 30px;
+        // tab边框
+        .van-hairline--top-bottom::after,
+        .van-hairline-unset--top-bottom::after {
+            border-width: 0;
+        }
+        .van-tabs__nav--line{
+            padding-bottom: 0;
+        }
+        .van-tabs{
+            width: 100%;
+        }
+        .van-tab{
+            padding: 0 2.67vw;
+        }
+        .van-tab:first-child{
+            padding-left: 0px;
+        }
+        .van-tabs--line .van-tabs__wrap{
+            height:100%;
+        }
+        .van-tab span{
+            display: block;
+            width: auto;
+            font-size: 26px;
+            color: #999999;
+            background-color: #F9F9F9;
+            border-radius: 8px;
+        }
+        .van-tab--active span{
+            font-weight:400;
+            color:rgba(208,2,27,1);
+        }
+        .van-tabs__line{
+            display: none;
+        }
+    }
     .tip_text{
         text-align: center;
         margin-top: 20px;
@@ -14,6 +14,13 @@
             </div>
             <div class="desc" @click="giftRules">规则说明</div>
         </div>
+        <!-- btn按钮筛选 -->
+        <div class="tab_btn_list">
+        <van-tabs swipeable>
+            <van-tab v-for="index in 10" :title="'选项 ' + index">
+            </van-tab>
+        </van-tabs>
+        </div>
         <!--内容-->
         <div class="item_box">
             <div
@@ -112,11 +119,11 @@ export default {
             // 暴露方法，由APP调用，接受参数
             if (this.isiPhone.value) {
                 window.appPaymentCallback = item => {
-                    this.appPaymentCallback()
+                    this.appPaymentCallback();
                 };
             } else if (this.isAndroid.value) {
                 window.payFinish = item => {
-                    this.payFinish()
+                    this.payFinish();
                 };
             }
         }
@@ -198,14 +205,14 @@ export default {
                 ) {
                     // App内，iOS销毁WebView
                     window.webkit.messageHandlers.CNDSWebScrollEnabled.postMessage(
-                        { body: { display: 'none' } }
+                        { body: { display: "none" } }
                     );
                 } else if (
                     window.obj &&
                     window.obj.setGiftBottomVisibleBySwitchTab
                 ) {
                     // App内，Android销毁WebView
-                    window.obj.CNDSWebScrollEnabled('none');
+                    window.obj.CNDSWebScrollEnabled("none");
                 }
             }
         },
@@ -535,7 +542,7 @@ export default {
             // 隐藏底部聊天弹框
             this.setGiftBottomVisibleBySwitchTab(0);
             // 获取当前操作的支付订单
-            this.orderOperation.item = item
+            this.orderOperation.item = item;
             // App内
             if (this.isCNLive.value) {
                 // 调用App，返回按键
@@ -564,8 +571,8 @@ export default {
         },
         // 安卓支付成功回调
         payFinish() {
-             // 检测是否已支付
-             this.cancelorder(this.orderOperation.item)
+            // 检测是否已支付
+            this.cancelorder(this.orderOperation.item);
         },
         // 安卓调用支付后检测是否已支付
         cancelorder(item) {
@@ -576,7 +583,7 @@ export default {
             this.http(
                 "/Api/" + this.getApiVersion().index + "/isOrderPay",
                 {
-                    orderId: item.orderid, // 订单编号
+                    orderId: item.orderid // 订单编号
                 },
                 this.cancelorderCallback,
                 {
@@ -601,7 +608,7 @@ export default {
                     this.$set(ext.item, "status", "1");
                 }
             }
-        },
+        }
     }
 };
 </script>