cardTabs.vue
2.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<template>
<div class="tab_cart_box">
<van-tabs @change="change" type="card" v-model="active" animated swipeable>
<van-tab v-for="(item, index) in tags.list" :key="'t'+index" :title="item.key">
<!-- 实物商品裂变 -->
<div :key="'c' + index" class="gift_main_box">
<!-- 商品样式 7 列表 goodType=1为积分商城实物商品-->
<div infinite-scroll-immediate-check="true" v-infinite-scroll="loadMore" :infinite-scroll-disabled="phyicalGoods[active].loading" :infinite-scroll-distance="phyicalGoods[active].distance">
<column-list-box class="column-list-box" @jump="toDetail"
:lists="phyicalGoods[active]"
com="7" goodType="1" company="1">
</column-list-box>
</div>
<!-- 没有更多了 -->
<div v-show="phyicalGoods[active].list && phyicalGoods[active].list.length == 0 && phyicalGoods[active].isCall" class="no_gift_tip">
<img src="static/img/no_gift_tip.png" alt=""/>
<div class="text">暂无商品</div>
</div>
<div v-show="phyicalGoods[active].list && phyicalGoods[active].list.length>0 && phyicalGoods[active].isMore" class="is_more">
没有更多了
</div>
</div>
</van-tab>
</van-tabs>
</div>
</template>
<script>
import columnListBox from "@/components/columnListBox/columnListBox";
export default {
data () {
return {
active: 0,
}
},
//部件
components: {
columnListBox
},
//静态
props: ["tags","phyicalGoods"],
//对象内部的属性监听，也叫深度监听
watch: {
},
//属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
computed: {
},
//方法表示一个具体的操作，主要书写业务逻辑；
methods: {
change(index,key){
this.$set(this.tags, "value", this.tags.list[index].value);
this.$emit("tabChange",index);
},
// 商品详情页
toDetail(item){
this.$emit("toDetail",item);
},
// 下拉加载
loadMore(){
this.$emit("loadMore");
}
},
//请求数据
created() {
},
mounted() {
}
}
</script>
<style rel="stylesheet/less" lang="less">
@import './cardTabs';
</style>