礼物筛选

zhiyangdu
1 parent 8d291fc1
Showing 2 changed files with 46 additions and 10 deletions
src/pages/myGiftBox/myGiftBox.less
src/pages/myGiftBox/myGiftBox.vue
@@ -71,7 +71,7 @@
             width: 100%;
         }
         .van-tab{
-            padding: 0 2.67vw;
+            margin-right: 30px;
         }
         .van-tab:first-child{
             padding-left: 0px;
@@ -16,8 +16,9 @@
         </div>
         <!-- btn按钮筛选 -->
         <div class="tab_btn_list">
-        <van-tabs swipeable>
-            <van-tab v-for="index in 10" :title="'选项 ' + index">
+        <van-tabs @change="onStatusFiltering" v-model="btnActive" swipeable>
+            <van-tab  v-for="(item,index) in (active==0?receivingGiftsTab:giveGifTab)" :title="item.name" :key="'tab'+index">
+
             </van-tab>
         </van-tabs>
         </div>
@@ -73,6 +74,23 @@ export default {
     name: "myGiftBox",
     data() {
         return {
+            receivingGiftsTab:[ // 收礼tab筛选
+                {name:'全部',status:0},
+                {name:'未填写地址',status:1},
+                {name:'待发货',status:2},
+                {name:'已完成',status:3},
+                {name:'已发货',status:4}
+            ],
+            receivingGiftStatue:null, // 收礼订单状态筛选
+            giveGifTab:[ // 送礼tab筛选
+                {name:'全部',status:0},
+                {name:'可分享',status:1},
+                {name:'未填写地址',status:2},
+                {name:'待发货',status:3},
+                {name:'未领退款',status:4}
+            ],
+            giveGifStatue:null, // 送礼订单状态筛选
+            btnActive:0, // 按钮tab状态
             active: 0,
             receivingGiftsInfo: null, // 收礼列表页数据
             loading: false, // 判断是否加载
@@ -148,6 +166,19 @@ export default {
                 this.setGiftBottomVisibleBySwitchTab(0);
             }
         },
+        // tab订单状态筛选
+        onStatusFiltering(name, title){
+            if(this.active==0){
+                // 收礼订单列表
+                this.receivingGiftStatue = name;
+                this.getorderGiftList();
+            }else{
+                // 送礼订单列表
+                this.giveGifStatue = name;
+                this.getorderGiveGiftList();
+            }
+
+        },
         /**
          * 下啦滑动加载更多
          */
@@ -155,10 +186,12 @@ export default {
             if (this.active === 0) {
                 // 收礼订单列表
                 this.loading = this.receivingGifts.loading;
+                 this.receivingGifts.pages++;
                 this.getorderGiftList();
             } else {
                 // 送礼订单列表
                 this.loading = this.giftGiving.loading;
+                this.giftGiving.pages++;
                 this.getorderGiveGiftList();
             }
             if (!this.loading) {
@@ -221,7 +254,6 @@ export default {
          */
         getorderGiftList() {
             this.receivingGifts.loading = true;
-            this.receivingGifts.pages++;
             // 加载中提示
             Indicator.open("加载中...");
  
@@ -232,7 +264,7 @@ export default {
                     uid: this.$route.query.uid, // 用户id
                     page: this.receivingGifts.pages, // 分页 默认为1 一页20条
                     type: 1, // 1 收礼列表 2 送礼列表（送礼已废弃）
-                    status: 0 // 0或者不传 全部 1 未填地址 2 未发货 3 已完成 4 已发货
+                    status:this.receivingGiftStatue// 0或者不传 全部 1 未填地址 2 未发货 3 已完成 4 已发货
                 },
                 this.getorderGiftListCallback,
                 {
@@ -252,13 +284,12 @@ export default {
  
             // 返回处理
             if (res.code == 200) {
+                 // 隐藏加载圈
+                this.receivingGifts.loading = false;
                 // 解构数据
                 let { data: datas } = res;
                 // 设置shopFnsDynamic达人动态数据
-
                 if (datas.list && datas.list.length) {
-                    // 隐藏加载圈
-                    this.receivingGifts.loading = false;
                     if (this.receivingGifts.pages > 1) {
                         this.$set(this, "receivingGiftsInfo", [
                             ...this.receivingGiftsInfo,
@@ -267,6 +298,9 @@ export default {
                     } else {
                         this.$set(this, "receivingGiftsInfo", datas.list);
                     }
+                }else{
+                    this.receivingGiftsInfo = datas.list;
+                    this.this.receivingGifts.pages = 1; // 数据为空时页脚从1开始计算
                 }
                 /* 获取达人动态数据 结束 */
             } else if (res.code == 400) {
@@ -341,7 +375,6 @@ export default {
          */
         getorderGiveGiftList() {
             this.giftGiving.loading = true;
-            this.giftGiving.pages++;
             // 加载中提示
             Indicator.open("加载中...");
  
@@ -352,7 +385,7 @@ export default {
                     uid: this.$route.query.uid, // 用户id
                     page: this.giftGiving.pages, // 分页 默认为1 一页20条
                     type: 1, // 1 收礼列表 2 送礼列表（送礼已废弃）
-                    status: 0 // 0或者不传 全部 1 未填地址 2 未发货 3 已完成 4 已发货
+                    status: this.giveGifStatue // 0或者不传 全部 1 未填地址 2 未发货 3 已完成 4 已发货
                 },
                 this.getorderGiveGiftListCallback,
                 {
@@ -387,6 +420,9 @@ export default {
                     } else {
                         this.$set(this, "giftGivingItem", datas.list);
                     }
+                }else{
+                    this.giftGivingItem = datas.list;
+                    this.giftGiving.pages = 1;// 数据为空时设置分页数为1
                 }
                 /* 获取送礼订单列表 结束 */
             } else if (res.code == 400) {