btn选中和取消选中

zhiyangdu
1 parent eea95168
Showing 1 changed file with 58 additions and 26 deletions
src/pages/myGiftBox/myGiftBox.vue
@@ -36,7 +36,7 @@
                 </div>
                 <!-- 筛选 -->
                 <div
-                    @click="screenPopup"
+                    @click="popupShow = true"
                     v-show="active == 1"
                     class="screen_box"
                 >
@@ -109,10 +109,21 @@
                 <!-- 标题 -->
                 <div class="title">筛选订单</div>
                 <!--按钮选中筛选-->
-                <div v-for="(items,index) in screenList" :key="'screen'+index" class="tab_box">
-                    <div class="title_t">{{items.title}}</div>
+                <div
+                    v-for="(items, index) in screenList"
+                    :key="'screen' + index"
+                    class="tab_box"
+                >
+                    <div class="title_t">{{ items.title }}</div>
                     <div class="btn_list">
-                        <div @click="" v-for="(item,index) in items.tab_List" :key="'btn'+index" class="btn">{{item.name}}</div>
+                        <div
+                            class="btn"
+                            :class="{'active':item.show}"
+                            @click="changBtn(item)"
+                            v-for="(item, index) in items.tab_List"
+                            :key="index">
+                            {{ item.name }}
+                        </div>
                     </div>
                 </div>
                 <!-- 重置和确定 -->
@@ -123,7 +134,7 @@
             </div>
         </van-popup>
     </div>
-</template> 
+</template>
  
 <script>
 // 引入组件
@@ -181,26 +192,45 @@ export default {
             },
             isLoading: false, //下拉刷新
             popupShow: false, // 右侧筛选抽屉显示隐藏
-            screenList:[
-                {   title:'支付',
-                    tab_List:[ { name: "未支付", status: 0 },] 
-                },
-                {   title:'分享',
-                    tab_List:[ { name: "可分享", status: 0 },{ name: "已领完", status: 1 }] 
-                },
-                 {   title:'填写地址',
-                    tab_List:[ { name: "未填写地址", status: 0 },{ name: "已填写地址", status: 1 }] 
+            screenList: [
+                { title: "支付", tab_List: [{ name: "未支付", status: 0}] },
+                {
+                    title: "分享",
+                    tab_List: [
+                        { name: "可分享", status: 0},
+                        { name: "已领完", status: 1}
+                    ]
                 },
-                 {   title:'待收货',
-                    tab_List:[ { name: "已揽件", status: 0 },{ name: "运输中", status: 1 },{ name: "派送中", status: 1 }] 
+                {
+                    title: "填写地址",
+                    tab_List: [
+                        { name: "未填写地址", status: 0 },
+                        { name: "已填写地址", status: 1 }
+                    ]
                 },
-                {   title:'已送达',
-                    tab_List:[ { name: "已领取", status: 0 },{ name: "已签收", status: 1 }] 
+                {
+                    title: "待收货",
+                    tab_List: [
+                        { name: "已揽件", status: 0 },
+                        { name: "运输中", status: 1 },
+                        { name: "派送中", status: 1 }
+                    ]
                 },
-                 {   title:'未领退货',
-                    tab_List:[ { name: "退货中", status: 0 },{ name: "已关闭", status: 1 }] 
+                {
+                    title: "已送达",
+                    tab_List: [
+                        { name: "已领取", status: 0 },
+                        { name: "已签收", status: 1 }
+                    ]
                 },
-            ]   // 筛选数据
+                {
+                    title: "未领退货",
+                    tab_List: [
+                        { name: "退货中", status: 0 },
+                        { name: "已关闭", status: 1 }
+                    ]
+                }
+            ] // 筛选数据
         };
     },
     components: {
@@ -303,11 +333,13 @@ export default {
                 this.getorderGiveGiftList();
             }
         },
-        /**
-         * 送礼列表页筛选
-         */
-        screenPopup() {
-            this.popupShow = true;
+        // 选中按钮
+        changBtn(item) {
+            if(item.show){
+               this.$set(item,"show", false)
+            }else{
+               this.$set(item,"show", true)
+            }
         },
         /**
          * 下啦滑动加载更多