Commit 1264bc964aa67c2be1a824313334d9d7ba51ffe4
1 parent
eea95168
btn选中和取消选中
Showing
1 changed file
with
58 additions
and
26 deletions
src/pages/myGiftBox/myGiftBox.vue
| @@ -36,7 +36,7 @@ | @@ -36,7 +36,7 @@ | ||
| 36 | </div> | 36 | </div> |
| 37 | <!-- 筛选 --> | 37 | <!-- 筛选 --> |
| 38 | <div | 38 | <div |
| 39 | - @click="screenPopup" | 39 | + @click="popupShow = true" |
| 40 | v-show="active == 1" | 40 | v-show="active == 1" |
| 41 | class="screen_box" | 41 | class="screen_box" |
| 42 | > | 42 | > |
| @@ -109,10 +109,21 @@ | @@ -109,10 +109,21 @@ | ||
| 109 | <!-- 标题 --> | 109 | <!-- 标题 --> |
| 110 | <div class="title">筛选订单</div> | 110 | <div class="title">筛选订单</div> |
| 111 | <!--按钮选中筛选--> | 111 | <!--按钮选中筛选--> |
| 112 | - <div v-for="(items,index) in screenList" :key="'screen'+index" class="tab_box"> | ||
| 113 | - <div class="title_t">{{items.title}}</div> | 112 | + <div |
| 113 | + v-for="(items, index) in screenList" | ||
| 114 | + :key="'screen' + index" | ||
| 115 | + class="tab_box" | ||
| 116 | + > | ||
| 117 | + <div class="title_t">{{ items.title }}</div> | ||
| 114 | <div class="btn_list"> | 118 | <div class="btn_list"> |
| 115 | - <div @click="" v-for="(item,index) in items.tab_List" :key="'btn'+index" class="btn">{{item.name}}</div> | 119 | + <div |
| 120 | + class="btn" | ||
| 121 | + :class="{'active':item.show}" | ||
| 122 | + @click="changBtn(item)" | ||
| 123 | + v-for="(item, index) in items.tab_List" | ||
| 124 | + :key="index"> | ||
| 125 | + {{ item.name }} | ||
| 126 | + </div> | ||
| 116 | </div> | 127 | </div> |
| 117 | </div> | 128 | </div> |
| 118 | <!-- 重置和确定 --> | 129 | <!-- 重置和确定 --> |
| @@ -123,7 +134,7 @@ | @@ -123,7 +134,7 @@ | ||
| 123 | </div> | 134 | </div> |
| 124 | </van-popup> | 135 | </van-popup> |
| 125 | </div> | 136 | </div> |
| 126 | -</template> | 137 | +</template> |
| 127 | 138 | ||
| 128 | <script> | 139 | <script> |
| 129 | // 引入组件 | 140 | // 引入组件 |
| @@ -181,26 +192,45 @@ export default { | @@ -181,26 +192,45 @@ export default { | ||
| 181 | }, | 192 | }, |
| 182 | isLoading: false, //下拉刷新 | 193 | isLoading: false, //下拉刷新 |
| 183 | popupShow: false, // 右侧筛选抽屉显示隐藏 | 194 | popupShow: false, // 右侧筛选抽屉显示隐藏 |
| 184 | - screenList:[ | ||
| 185 | - { title:'支付', | ||
| 186 | - tab_List:[ { name: "未支付", status: 0 },] | ||
| 187 | - }, | ||
| 188 | - { title:'分享', | ||
| 189 | - tab_List:[ { name: "可分享", status: 0 },{ name: "已领完", status: 1 }] | ||
| 190 | - }, | ||
| 191 | - { title:'填写地址', | ||
| 192 | - tab_List:[ { name: "未填写地址", status: 0 },{ name: "已填写地址", status: 1 }] | 195 | + screenList: [ |
| 196 | + { title: "支付", tab_List: [{ name: "未支付", status: 0}] }, | ||
| 197 | + { | ||
| 198 | + title: "分享", | ||
| 199 | + tab_List: [ | ||
| 200 | + { name: "可分享", status: 0}, | ||
| 201 | + { name: "已领完", status: 1} | ||
| 202 | + ] | ||
| 193 | }, | 203 | }, |
| 194 | - { title:'待收货', | ||
| 195 | - tab_List:[ { name: "已揽件", status: 0 },{ name: "运输中", status: 1 },{ name: "派送中", status: 1 }] | 204 | + { |
| 205 | + title: "填写地址", | ||
| 206 | + tab_List: [ | ||
| 207 | + { name: "未填写地址", status: 0 }, | ||
| 208 | + { name: "已填写地址", status: 1 } | ||
| 209 | + ] | ||
| 196 | }, | 210 | }, |
| 197 | - { title:'已送达', | ||
| 198 | - tab_List:[ { name: "已领取", status: 0 },{ name: "已签收", status: 1 }] | 211 | + { |
| 212 | + title: "待收货", | ||
| 213 | + tab_List: [ | ||
| 214 | + { name: "已揽件", status: 0 }, | ||
| 215 | + { name: "运输中", status: 1 }, | ||
| 216 | + { name: "派送中", status: 1 } | ||
| 217 | + ] | ||
| 199 | }, | 218 | }, |
| 200 | - { title:'未领退货', | ||
| 201 | - tab_List:[ { name: "退货中", status: 0 },{ name: "已关闭", status: 1 }] | 219 | + { |
| 220 | + title: "已送达", | ||
| 221 | + tab_List: [ | ||
| 222 | + { name: "已领取", status: 0 }, | ||
| 223 | + { name: "已签收", status: 1 } | ||
| 224 | + ] | ||
| 202 | }, | 225 | }, |
| 203 | - ] // 筛选数据 | 226 | + { |
| 227 | + title: "未领退货", | ||
| 228 | + tab_List: [ | ||
| 229 | + { name: "退货中", status: 0 }, | ||
| 230 | + { name: "已关闭", status: 1 } | ||
| 231 | + ] | ||
| 232 | + } | ||
| 233 | + ] // 筛选数据 | ||
| 204 | }; | 234 | }; |
| 205 | }, | 235 | }, |
| 206 | components: { | 236 | components: { |
| @@ -303,11 +333,13 @@ export default { | @@ -303,11 +333,13 @@ export default { | ||
| 303 | this.getorderGiveGiftList(); | 333 | this.getorderGiveGiftList(); |
| 304 | } | 334 | } |
| 305 | }, | 335 | }, |
| 306 | - /** | ||
| 307 | - * 送礼列表页筛选 | ||
| 308 | - */ | ||
| 309 | - screenPopup() { | ||
| 310 | - this.popupShow = true; | 336 | + // 选中按钮 |
| 337 | + changBtn(item) { | ||
| 338 | + if(item.show){ | ||
| 339 | + this.$set(item,"show", false) | ||
| 340 | + }else{ | ||
| 341 | + this.$set(item,"show", true) | ||
| 342 | + } | ||
| 311 | }, | 343 | }, |
| 312 | /** | 344 | /** |
| 313 | * 下啦滑动加载更多 | 345 | * 下啦滑动加载更多 |