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,18 +33,10 @@
33 </div> 33 </div>
34 </div> 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 </div> 40 </div>
49 </div> 41 </div>
50 <!--积分赚取 --> 42 <!--积分赚取 -->
@@ -72,46 +64,51 @@ @@ -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 </div> 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 </div> 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 </div> 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 </div> 112 </div>
116 </div> 113 </div>
117 </template> 114 </template>
@@ -128,6 +125,7 @@ export default { @@ -128,6 +125,7 @@ export default {
128 return { 125 return {
129 title: "", // 标题 126 title: "", // 标题
130 backs: null, // 后退按钮组 127 backs: null, // 后退按钮组
  128 + navs: null, // 导航
131 myGrade: 0, // 我的积分 129 myGrade: 0, // 我的积分
132 goodsLists: null, // 为你推荐商品 130 goodsLists: null, // 为你推荐商品
133 phyicalGoods: { list: null }, // 实物商品 131 phyicalGoods: { list: null }, // 实物商品
@@ -154,6 +152,30 @@ export default { @@ -154,6 +152,30 @@ export default {
154 //方法表示一个具体的操作，主要书写业务逻辑； 152 //方法表示一个具体的操作，主要书写业务逻辑；
155 methods: { 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 * @param {Object} item [数据对象] 180 * @param {Object} item [数据对象]
159 */ 181 */
@@ -301,6 +323,24 @@ export default { @@ -301,6 +323,24 @@ export default {
301 // 设置标题 323 // 设置标题
302 this.$set(this, "title", "积分商城"); 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 // 判断是否在App内 344 // 判断是否在App内
305 if (this.isCNLive.value) { 345 if (this.isCNLive.value) {
306 346