w-front-end / select_good · Commits

Commit 764f161f8f58f362b3f09faf588baa917bfc9cf6

Authored by 王强
2 parents c695c7c0 d10e5f29

Merge branch 'version_2.0.0_optimization_mall_update' of http://bj.gitlab.cnlive… 

….com/w-front-end/select_good into version_2.0.0_optimization_mall_update
Inline Side-by-side
Showing 1 changed file with 84 additions and 44 deletions
src/pages/pointsMall/pointsMall.vue
  View file @764f161
... ... @@ -33,18 +33,10 @@
33 33 </div>
34 34 </div>
35 35 <!-- 商品类型 -->
36   - <div class="item_box">
37   - <div class="item">
38   - <img src="static/img/points_item01.png" alt=""/>
39   - <div class="text">实物商品</div>
40   - </div>
41   - <div class="item">
42   - <img src="static/img/points_item02.png" alt=""/>
43   - <div class="text">虚拟商品</div>
44   - </div>
45   - <div class="item">
46   - <img src="static/img/points_item03.png" alt=""/>
47   - <div class="text">满减红包</div>
  36 + <div class="item_box" v-if="navs && navs.length">
  37 + <div class="item" v-for="(item, index) in navs" :key="index" @click="anchor(item)">
  38 + <img :src="item.simg" alt=""/>
  39 + <div class="text">{{item.title}}</div>
48 40 </div>
49 41 </div>
50 42 <!--积分赚取 -->
... ... @@ -72,46 +64,51 @@
72 64  
73 65  
74 66 <!-- 实物商品 -->
75   - <div class="tab_item_box">
76   - <div class="item active">实物商品</div>
77   - <!-- 分割线 -->
78   - <div class="line"> </div>
79   - <div class="item">实物商品实物商品实物商品实物商品</div>
  67 + <div ref="physicalGoodsBox">
  68 + <div class="tab_item_box">
  69 + <div class="item active">实物商品</div>
  70 + <!-- 分割线 -->
  71 + <div class="line"> </div>
  72 + <div class="item">实物商品实物商品实物商品实物商品</div>
  73 + </div>
  74 + <!-- 实物商品裂变 -->
  75 + <!-- 商品样式 7 列表 -->
  76 + <column-list-box class="column-list-box" v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" @jump="toDetail"
  77 + :lists="phyicalGoods"
  78 + com="7">
  79 + </column-list-box>
80 80 </div>
81   - <!-- 实物商品裂变 -->
82   - <!-- 商品样式 7 列表 -->
83   - <column-list-box class="column-list-box" v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" @jump="toDetail"
84   - :lists="phyicalGoods"
85   - com="7">
86   - </column-list-box>
87 81  
88 82  
89 83 <!-- 虚拟商品 -->
90   - <div class="tab_item_box">
91   - <div class="item active">虚拟商品</div>
92   - <!-- 分割线 -->
93   - <div class="line"> </div>
94   - <div class="item">热门商品</div>
  84 + <div ref="virtualGoodsBox">
  85 + <div class="tab_item_box">
  86 + <div class="item active">虚拟商品</div>
  87 + <!-- 分割线 -->
  88 + <div class="line"> </div>
  89 + <div class="item">热门商品</div>
  90 + </div>
  91 + <!-- 商品样式 7 列表 -->
  92 + <column-list-box class="column-list-box" v-if="virtualGoods && virtualGoods.list && virtualGoods.list.length" @jump="toDetail"
  93 + :lists="virtualGoods"
  94 + com="7">
  95 + </column-list-box>
95 96 </div>
96   - <!-- 商品样式 7 列表 -->
97   - <column-list-box class="column-list-box" v-if="virtualGoods && virtualGoods.list && virtualGoods.list.length" @jump="toDetail"
98   - :lists="virtualGoods"
99   - com="7">
100   - </column-list-box>
101   -
102 97  
103 98 <!-- 满减红包 -->
104   - <div class="tab_item_box">
105   - <div class="item active">满减红包</div>
106   - <!-- 分割线 -->
107   - <div class="line"> </div>
108   - <div class="item">热门商品</div>
  99 + <div ref="fullReductionBox">
  100 + <div class="tab_item_box">
  101 + <div class="item active">满减红包</div>
  102 + <!-- 分割线 -->
  103 + <div class="line"> </div>
  104 + <div class="item">热门商品</div>
  105 + </div>
  106 + <!-- 商品样式 7 列表 -->
  107 + <column-list-box class="column-list-box" v-if="redEnvelopeFull && redEnvelopeFull.list && redEnvelopeFull.list.length" @jump="toDetail"
  108 + :lists="redEnvelopeFull"
  109 + com="7">
  110 + </column-list-box>
109 111 </div>
110   - <!-- 商品样式 7 列表 -->
111   - <column-list-box class="column-list-box" v-if="redEnvelopeFull && redEnvelopeFull.list && redEnvelopeFull.list.length" @jump="toDetail"
112   - :lists="redEnvelopeFull"
113   - com="7">
114   - </column-list-box>
115 112 </div>
116 113 </div>
117 114 </template>
... ... @@ -128,6 +125,7 @@ export default {
128 125 return {
129 126 title: "", // 标题
130 127 backs: null, // 后退按钮组
  128 + navs: null, // 导航
131 129 myGrade: 0, // 我的积分
132 130 goodsLists: null, // 为你推荐商品
133 131 phyicalGoods: { list: null }, // 实物商品
... ... @@ -154,6 +152,30 @@ export default {
154 152 //方法表示一个具体的操作，主要书写业务逻辑；
155 153 methods: {
156 154 /**
  155 + * 锚点定位
  156 + * @param {Object} item [数据对象]
  157 + */
  158 + anchor (item) {
  159 + // 判断锚点是否存在
  160 + if (item.ref && typeof this.$refs === 'object' && typeof this.$refs[item.ref] === 'object') {
  161 +
  162 + // 根据头部设置锚点位置
  163 + let safeDistance = 0;
  164 +
  165 + // 判断是否有callApp组件
  166 + if (typeof this.$refs.callApp === 'object') {
  167 + safeDistance += this.$refs.callApp.$el.clientHeight;
  168 + }
  169 +
  170 + // 判断是否有backBox组件
  171 + if (typeof this.$refs.backBox === 'object') {
  172 + safeDistance += this.$refs.backBox.$el.clientHeight;
  173 + }
  174 +
  175 + document.documentElement.scrollTop = document.body.scrollTop = this.$refs[item.ref].offsetTop - safeDistance - (20 * ((document.documentElement.clientWidth || document.body.clientWidth) / 750));
  176 + }
  177 + },
  178 + /**
157 179 * 跳转到兑换记录详情页
158 180 * @param {Object} item [数据对象]
159 181 */
... ... @@ -301,6 +323,24 @@ export default {
301 323 // 设置标题
302 324 this.$set(this, "title", "积分商城");
303 325  
  326 + // 设置锚点定位数据
  327 + this.$set(this, 'navs', [
  328 + {
  329 + ref: 'physicalGoodsBox',
  330 + simg: 'static/img/points_item01.png',
  331 + title: '实物商品'
  332 + },
  333 + {
  334 + ref: 'virtualGoodsBox',
  335 + simg: 'static/img/points_item02.png',
  336 + title: '虚拟商品'
  337 + },
  338 + {
  339 + ref: 'fullReductionBox',
  340 + simg: 'static/img/points_item03.png',
  341 + title: '满减红包'
  342 + }
  343 + ]);
304 344 // 判断是否在App内
305 345 if (this.isCNLive.value) {
306 346  
... ...