w-front-end / select_good · Commits

Commit ea05f865a27fca5b01799e3d1e8a2733d9e0b1ae

Authored by zhiyangdu
1 parent 0a87de5f

健康商城首页

Inline Side-by-side
Showing 3 changed files with 154 additions and 540 deletions
src/pages/healthMall/healthMall.less
  View file @ea05f86
1 1 @charset "UTF-8";
2   -// 占位
3   -.pl {
4   - background-color: transparent;
5   - width: 100%;
6   - &.is-open-app {
7   - height: 122px;
8   - }
9   - &.is-cnlive {
10   - height: 93px;
11   - }
12   -}
13   -// 列表
14   -.column-list-box{
15   - display: flex;
16   - justify-content: center;
17   -}
18   -.hide{
19   - display:none;
20   -}
21   -.call-app-box{
22   - position: fixed;
23   - z-index: 2;
24   -}
25   -.back-box{
26   - background-color: transparent;
27   - position: fixed;
28   - top: 0;
29   - left:0;
30   - z-index: 2;
31   -}
32   -.main_box{
  2 +
  3 +.gift_zone_detail{
33 4 width: 100%;
34 5 min-height: 100vh;
35   - background:#fff url("../../../static/img/pointsBack.png") no-repeat
36   - center top;
  6 + // background: #B62128 url("https://wjj.ys1.cnliveimg.com/769/h5/H5activity/kapai/detail-top.png") no-repeat center top;
37 7 background-size: 100%;
38 8 overflow: hidden;
39   - // 头部
40   - .top_main{
41   - margin:40px 30px;
42   - padding: 30px;
43   - height: 394px;
44   - background: #FFFFFF;
45   - box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.06);
46   - border-radius: 24px;
47   - .top{
48   - display: flex;
49   - justify-content: space-between;
50   - .left{
51   - height: 40px;
52   - font-size: 28px;
53   - font-weight: 400;
54   - color: #45270D;
55   - line-height: 40px;
56   - span{
57   - margin-left: 8px;
58   - height: 40px;
59   - font-size: 28px;
60   - font-weight: 500;
61   - color: #F5A623;
62   - line-height: 40px;
63   - }
64   - }
65   - .right{
66   - height: 33px;
67   - font-size: 24px;
68   - font-weight: 400;
69   - color: #999999;
70   - line-height: 33px;
71   - display: flex;
72   - justify-content: center;
73   - align-items: center;
74   - .back_right_iocn{
75   - display: block;
76   - width: 20px;
77   - height:20px;
78   - margin-left: 10px;
79   - }
80   - }
81   - }
82   - // 商品类型
83   - .item_box{
84   - display: flex;
85   - justify-content: space-between;
86   - margin: 40px 80px 30px 80px;
87   - .item{
88   - img{
89   - display: block;
90   - width: 90px;
91   - height:90px;
92   - }
93   - .text{
94   - height: 33px;
95   - font-size: 24px;
96   - font-weight: 400;
97   - color: #666666;
98   - line-height: 33px;
99   - margin-top: 12px;
100   - }
101   - }
102   - }
103   - //赚取积分
104   - .earn_points_box{
105   - height: 90px;
106   - background: #FFF8E8;
107   - border-radius: 12px;
108   - display:flex;
109   - justify-content: space-between;
110   - align-items: center;
111   - padding: 20px 20px;
112   - .earn_icon{
113   - display: block;
114   - width: 36px;
115   - height:36px;
116   - }
117   - .desc{
118   - height: 90px;
119   - font-size: 26px;
120   - font-weight: 400;
121   - color: #746037;
122   - line-height: 90px;
123   - }
124   - .btn{
125   - font-size: 24px;
126   - padding: 0 20px;
127   - height: 50px;
128   - background: #DAB277;
129   - border-radius: 26px;
130   - color: #fff;
131   - text-align: center;
132   - display: flex;
133   - align-items: center;
134   - .earn_right_back{
135   - display: block;
136   - width: 9px;
137   - height: 18px;
138   - margin-left: 8px;
139   - }
140   - }
141   - }
142   - }
143   - // 内容区域
144   - .tab_item_box{
145   - display: flex;
146   - align-items: center;
147   - // justify-content: space-between;
148   - margin:50px 30px 33px 30px;
149   - .item{
150   - height: 33px;
151   - font-size: 24px;
152   - font-weight: 400;
153   - color: #999999;
154   - line-height: 33px;
155   - }
156   - .active{
157   - height: 48px;
158   - font-size: 34px;
159   - font-weight: 600;
160   - color: #373737;
161   - line-height: 48px;
162   - }
163   - .line{
164   - width: 1px;
165   - height: 20px;
166   - background: #999999;
167   - margin: 0 16px;
168   - }
169   - .more{
170   - display: flex;
171   - flex: 1;
172   - justify-content: flex-end;
173   - align-items: center;
174   - font-size: 24px;
175   - color: #999999;
176   - img{
177   - display: block;
178   - width: 22px;
179   - height: 22px;
180   - }
181   - }
  9 + .column-list-box{
  10 + margin-top:40px;
182 11 }
183   - // 为你推荐
184   - .list-box {
185   - display: flex;
186   - justify-content: space-between;
187   - align-items: center;
188   - .discount-flag {
189   - position: absolute;
190   - top: 4px;
191   - left: 22px;
192   - z-index: 1;
193   - background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
194   - padding: 1px 8px;
195   - color: #945A08;
196   - font-size: 20px;
197   - font-weight: 400;
198   - border-radius: 6px;
199   - }
  12 + .no_more{
  13 + width:100%;
  14 + height: 37px;
  15 + font-size: 26px;
  16 + font-weight: 400;
  17 + color: #333;
  18 + line-height: 37px;
  19 + letter-spacing: 1px;
  20 + text-align: center;
  21 + margin-top:10px;
  22 + // margin-bottom: 60px;
200 23 }
201   -}
202 24 \ No newline at end of file
  25 +}
203 26 \ No newline at end of file
... ...
src/pages/healthMall/healthMall.vue
  View file @ea05f86
1 1 <template>
2   -<div>
3   - <!-- H5唤起App组件 -->
4   - <call-app-box
  2 +<div class="gift_zone_detail">
  3 + <call-app-box
5 4 class="call-app-box"
6 5 :style="'padding-top: ' + $parent.top.value + 'px'"
7 6 ref="callApp"
... ... @@ -9,149 +8,76 @@
9 8 :callApps="$parent.callApps"
10 9 >
11 10 </call-app-box>
12   - <div class="main_box">
13   - <!-- pl -->
14   - <div class="pl" :style="'padding-top: ' + $parent.top.value + 'px'" :class="{'is-open-app': $parent.isOpenApp.value,'is-cnlive': isCNLive.value, 'hide': $route.query.hideBack == true}"></div>
15   - <back-box
16   - v-if="isCNLive.value"
17   - :class="{'hide': $route.query.hideBack == true}"
18   - class="back-box"
19   - :style="'padding-top: ' + $parent.top.value + 'px; background-color: rgba(255, 255, 255, ' + opacity + ')'" ref="navBox"
20   - @back="back"
21   - :backs="backs">
22   - </back-box>
23   - <div class="top_main">
24   - <!-- 头部 -->
25   - <div class="top">
26   - <div class="left">
27   - 我的健康: <span>{{myGrade}}</span>
28   - </div>
29   - <div @click="toExchangeRecord" class="right">
30   - 兑换记录
31   - <!-- 返回图标 -->
32   - <img class="back_right_iocn" src="static/img/points_icon_grey_right.png" alt=""/>
33   - </div>
34   - </div>
35   - <!-- 商品类型 -->
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>
40   - </div>
41   - </div>
42   - <!--健康赚取 -->
43   - <div class="earn_points_box">
44   - <img class="earn_icon" src="static/img/points_icon_pice.png" alt="">
45   - <div class="desc">赚取更多健康，兑换精美礼品～</div>
46   - <div @click="jumpClientIntegralList" class="btn">赚健康 <img class="earn_right_back" src="static/img/points_icon_white_right.png" alt=""/></div>
47   - </div>
48   - </div>
49   - <!-- 为你推荐 -->
50   - <div class="tab_item_box">
51   - <div class="item active">为你推荐</div>
52   - <!-- 分割线 -->
53   - <div class="line"> </div>
54   - <div class="item">满减红包 精品推荐</div>
55   - </div>
56   - <!-- 为你推荐商品列表 -->
57   - <div class="list-box">
58   - <!-- 商品展示样式 2 -->
59   - <goods-item-2 class="item" v-for="(item, index) in goodsLists" :key="index" @jump="toDetail(item)"
60   - :item="item"
61   - pid="5">
62   - </goods-item-2>
63   - </div>
64   -
65   -
66   - <!-- 实物商品 -->
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 @click="toMore(1)" class="more">更多<img src="static/img/icon_more_arrow_right.png"alt=""/></div>
74   - </div>
75   - <!-- 实物商品裂变 -->
76   - <!-- 商品样式 7 列表 goodType=1为健康商城实物商品 company=1单位为积分2为健康值-->
77   - <column-list-box class="column-list-box" v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" @jump="toDetail"
78   - :lists="phyicalGoods"
79   - company="2"
80   - com="7">
81   - </column-list-box>
82   - </div>
83   -
84   -
85   - <!-- 虚拟商品 -->
86   - <div ref="virtualGoodsBox">
87   - <div class="tab_item_box">
88   - <div class="item active">虚拟商品</div>
89   - <!-- 分割线 -->
90   - <div class="line"> </div>
91   - <div class="item">虚拟商品 精品推荐</div>
92   - <div @click="toMore(2)" class="more">更多<img src="static/img/icon_more_arrow_right.png"alt=""/></div>
93   - </div>
94   - <!-- 商品样式 7 列表 -->
95   - <column-list-box class="column-list-box" v-if="virtualGoods && virtualGoods.list && virtualGoods.list.length" @jump="toDetail"
96   - :lists="virtualGoods"
97   - company="2"
98   - com="7">
99   - </column-list-box>
100   - </div>
101   -
102   - <!-- 满减红包 -->
103   - <div ref="fullReductionBox">
104   - <div class="tab_item_box">
105   - <div class="item active">满减红包</div>
106   - <!-- 分割线 -->
107   - <div class="line"> </div>
108   - <div class="item">满减红包 精品推荐</div>
109   - <div @click="toMore(3)" class="more">更多<img src="static/img/icon_more_arrow_right.png"alt=""/></div>
110   - </div>
111   - <!-- 商品样式 7 列表 -->
112   - <column-list-box class="column-list-box" v-if="redEnvelopeFull && redEnvelopeFull.list && redEnvelopeFull.list.length" @jump="toDetail"
113   - :lists="redEnvelopeFull"
114   - company="2"
115   - com="7">
116   - </column-list-box>
117   - </div>
118   - </div>
  11 + <back-box
  12 + v-if="isCNLive.value"
  13 + :class="{'hide': $route.query.hideBack == true}"
  14 + class="back-box"
  15 + :style="'padding-top: ' + $parent.top.value + 'px'"
  16 + @back="back"
  17 + :backs="backs"
  18 + >
  19 + </back-box>
  20 + <!-- pl -->
  21 + <div class="pl" :style="'padding-top: ' + $parent.top.value + 'px'" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}"></div>
  22 + <!-- 商品样式 7 列表 -->
  23 + <div class="gift_main_box" v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" infinite-scroll-immediate-check="true" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" :infinite-scroll-distance="distance">
  24 + <column-list-box class="column-list-box" v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" @jump="toDetail"
  25 + :lists="phyicalGoods.list"
  26 + company="2"
  27 + com="7">
  28 + </column-list-box>
  29 + </div>
  30 + <!-- 没有更多了 -->
  31 + <div v-if="isNoMore" class="no_more">
  32 + — 没有更多了 —
  33 + </div>
119 34 </div>
120 35 </template>
121 36  
122 37 <script>
123   -import { Toast, Indicator } from "mint-ui";
124 38 import callAppBox from "@/components/callAppBox/callAppBox";
125 39 import backBox from "@/components/backBox/backBox";
126   -import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
  40 +import { Toast, Indicator } from "mint-ui";
127 41 import columnListBox from "@/components/columnListBox/columnListBox";
128 42 export default {
129   - name: 'pointsmall',
  43 + name: 'morePoints',
130 44 data () {
131 45 return {
132   - opacity: 0, // 透明度
133 46 title: "", // 标题
134   - backs: null, // 后退按钮组
135   - navs: null, // 导航
136   - myGrade: 0, // 我的健康
137   - goodsLists: null, // 为你推荐商品
138   - phyicalGoods: { list: null }, // 实物商品
139   - virtualGoods: { list: null }, // 虚拟商品
140   - redEnvelopeFull: { list: null } // 满减红包
  47 + backs: null, // 后退按钮组
  48 + loading: true,
  49 + distance: 50,
  50 + phyicalGoods: { list: [] }, // 实物商品
  51 + page: 1,
  52 + isNoMore: false
141 53 }
142 54 },
143 55 //部件
144 56 components: {
145   - callAppBox,
146 57 backBox,
147   - goodsItem2,
148   - columnListBox
  58 + columnListBox,
  59 + callAppBox
149 60 },
150 61 //静态
151 62 props: [
152 63 ],
153 64 //对象内部的属性监听，也叫深度监听
  65 + head: {
  66 + title () {
  67 + return {
  68 + inner: this.title
  69 + }
  70 + }
  71 + },
154 72 watch: {
  73 + // 设置页面标题
  74 + title (newVal) {
  75 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  76 + this.$iFrame.insertIFrame(newVal);
  77 + } else {
  78 + this.$emit("updateHead");
  79 + }
  80 + }
155 81 },
156 82 //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
157 83 computed: {
... ... @@ -159,72 +85,81 @@ export default {
159 85 //方法表示一个具体的操作，主要书写业务逻辑；
160 86 methods: {
161 87 /**
162   - * 锚点定位
163   - * @param {Object} item [数据对象]
164   - */
165   - anchor (item) {
166   - if (this.isCNLive.value) {
167   - // 判断锚点是否存在
168   - if (item.ref && typeof this.$refs === 'object' && typeof this.$refs[item.ref] === 'object') {
  88 + * 上拉加载
  89 + */
  90 + loadMore () {
  91 + this.$set(this, "page", ++this.page);
  92 + this.getIntegralNewGoodsList(this.page);
  93 + },
  94 + /**
  95 + * 加载积分商城商品更多
  96 + * @param {int} page [页码]
  97 + * @param {int}type [类型1为实物 2为虚拟物品 3为红包]
  98 + */
  99 + getIntegralNewGoodsList (page) {
169 100  
170   - // 根据头部设置锚点位置
171   - let safeDistance = 0;
  101 + // 判断必须参数
  102 + if (this.$route.query.type) {
172 103  
173   - // 判断是否有callApp组件
174   - if (typeof this.$refs.callApp === 'object') {
175   - safeDistance += this.$refs.callApp.$el.clientHeight;
176   - }
  104 + // 加载中
  105 + this.$set(this, "loading", true);
177 106  
178   - // 判断是否有backBox组件
179   - if (typeof this.$refs.backBox === 'object') {
180   - safeDistance += this.$refs.backBox.$el.clientHeight;
181   - }
  107 + // 加载中提示
  108 + Indicator.open("加载中...");
182 109  
183   - document.documentElement.scrollTop = document.body.scrollTop = this.$refs[item.ref].offsetTop - safeDistance - (20 * ((document.documentElement.clientWidth || document.body.clientWidth) / 750)) - (this.$parent.top.value + 60);
184   - }
185   - } else {
186   - this.$parent.callApp();
187   - }
188   - },
189   - /**
190   - * 跳转到兑换记录详情页
191   - * @param {Object} item [数据对象]
192   - */
193   - toExchangeRecord () {
194   - if (this.isCNLive.value) {
195   - this.$router.push({
196   - path: '/pointsExchangeRecords',
197   - query: {
198   - uid: this.getStore("uid"),
199   - }
200   - })
201   - } else {
202   - this.$parent.callApp();
  110 + // 请求接口
  111 + this.http("/Api/" + (this.getApiVersion().LuckDraw) + "/integralNewGoodsList", {
  112 + type: this.$route.query.type,
  113 + // uid: this.getStore("uid"),
  114 + page: page || 1
  115 + }, this.getIntegralNewGoodsListCallback, {
  116 + method: "POST"
  117 + });
203 118 }
204 119 },
  120 +
205 121 /**
206   - * 跳转赚取健康页面
207   - * @param {Object} item [数据对象]
208   - */
209   - jumpClientIntegralList () {
210   - // 判断APP内
211   - if (this.isCNLive.value) {
212   - // （判断app内是否有该方法）
213   - if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.jumpClientIntegralList) {
214   - // 跳转到原生的任务列表
215   - window.webkit.messageHandlers.jumpClientIntegralList.postMessage({ body: {} });
216   - } else if (window.obj && window.obj.jumpClientIntegralList) {
217   - // 跳转到原生的任务列表
218   - window.obj.jumpClientIntegralList();
  122 + * 礼品专区详情页回调
  123 + * @param {object} res [服务器返回数据]
  124 + * @param {object} ext [扩展参数]
  125 + */
  126 + getIntegralNewGoodsListCallback (res, ext) {
  127 +
  128 + // 加载完成
  129 + Indicator.close();
  130 +
  131 + // 返回处理
  132 + if (res.code == 200) {
  133 + // 解构数据
  134 + let { data: datas } = res;
  135 + /* 获取商品数据 开始 */
  136 + if (datas.goods && datas.goods.length) {
  137 + // 设置列表
  138 + this.$set(this.phyicalGoods, "list", [...this.phyicalGoods.list, ...datas.goods]);
  139 + // 设置还有需要加载的内容
  140 + this.$set(this, "loading", false);
  141 + } else {
  142 + this.isNoMore = true; // 没有更多了
  143 + // 没有需要加载的内容，停止上拉加载
  144 + this.$set(this, "loading", true);
219 145 }
  146 + /* 获取抽奖记录数据 结束 */
  147 +
  148 + } else if (res.code == 400) {
  149 +
  150 + // 获取抽奖记录失败
  151 + Toast(res.message);
220 152 } else {
221   - this.$parent.callApp();
  153 +
  154 + // 获取抽奖记录失败
  155 + Toast("获取专区礼包失败");
222 156 }
223 157 },
  158 +
224 159 /**
225   - * 跳转商品详情
226   - * @param {Object} item [数据对象]
227   - */
  160 + * 跳转商品详情
  161 + * @param {Object} item [数据对象]
  162 + */
228 163 toDetail (item) {
229 164 if (this.isCNLive.value) {
230 165 // this.$router.push({
... ... @@ -240,7 +175,7 @@ export default {
240 175 // 设置跳转参数
241 176 let params = {
242 177 type: '5',
243   - to: window.location.origin + '/html/select_good/1/#/healthGoodDetails?goodsId=' + item.id,
  178 + to: window.location.origin + '/html/select_good/1/#/goodDetails?goodsId=' + item.id,
244 179 shop_type: ''
245 180 };
246 181  
... ... @@ -251,25 +186,17 @@ export default {
251 186 this.$parent.callApp();
252 187 }
253 188 },
254   - /**
255   - * 分享
256   - */
257   - toShare () {
258   -
259   - // 判断分享
260   - if (typeof this.$parent.toShare === 'function') {
261   - this.$parent.toShare(45, "1", "");
262   - }
263   - },
264 189  
265 190 /**
266   - * 后退
267   - */
  191 + * 后退
  192 + */
268 193 back () {
  194 + // 返回先隐藏弹框
269 195  
270 196 // 判断是否有处理函数
271 197 if (typeof this.$parent.back === 'function') {
272   -
  198 + // 隐藏通用浮层
  199 + this.$parent.$refs.showModal.hideLayer();
273 200 // 后退
274 201 this.$parent.back();
275 202 } else {
... ... @@ -278,143 +205,23 @@ export default {
278 205 window.history.go(-1);
279 206 }
280 207 },
281   - // 健康商场首页
282   - /**
283   - * 获取健康商场首页信息
284   - * * @param {string} uid [用户id]
285   - */
286   - integralMallIndex () {
287   -
288   - // 加载中提示
289   - Indicator.open('加载中...');
290   -
291   - // 请求接口
292   - this.http("/Api/" + (this.getApiVersion().LuckDraw) + "/integralNewIndex", {
293   - uid: this.getStore("uid"),
294   - }, this.integralMallIndexCallback, {
295   - method: "POST"
296   - });
297   - },
298 208  
299 209 /**
300   - * 获取健康商场首页信息
301   - * @param {object} res [服务器返回数据]
302   - * @param {object} ext [扩展参数]
303   - */
304   - integralMallIndexCallback (res, ext) {
305   -
306   - // 加载完成
307   - Indicator.close();
308   -
309   - // 返回处理
310   - if (res.code == 200) {
311   -
312   - // 解构数据
313   - let { data: datas } = res;
314   - this.info = datas
315   - /* 健康商场首页信息 开始 */
316   - /*用户信息 */
317   - this.$set(this, "myGrade", datas.grade);
318   - /*为你推荐 */
319   - this.$set(this, "goodsLists", datas.hot_goods);
320   - /*实物商品 */
321   - this.$set(this.phyicalGoods, "list", datas.goods1);
322   - /*满减红包商品 */
323   - this.$set(this.redEnvelopeFull, "list", datas.goods2);
324   - /*虚拟商品 */
325   - this.$set(this.virtualGoods, "list", datas.goods3);
326   - } else if (res.code == 400) {
327   -
328   - // 获取健康商场首页信息失败
329   - Toast(res.message || "获取健康商场首页信息失败");
330   - } else {
331   - // 获取健康商场首页信息失败
332   - Toast(res.message);
  210 + * 分享
  211 + */
  212 + toShare () {
  213 + // 判断分享
  214 + if (typeof this.$parent.toShare === 'function') {
  215 + this.$parent.toShare(46, this.$route.query.goodsId, "");
333 216 }
334 217 },
335 218  
336   - /**
337   -* 滚动条滚动/touchmove监听处理
338   -* @param {object} e [滚动条对象]
339   -* @param {boolean} isTimeout [是否为setTimeout方法调用]
340   -*/
341   - onPageScrollFun (e, isTimeout = false) {
342   -
343   - // 获取滚动条位置，浏览器兼容处理
344   - let scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) || 0;
345   -
346   - // 滚动控制高度
347   - let maxHeight = 200;
348   -
349   - // 动态获取百分比分配比例
350   - if (typeof this.$refs === "object" && typeof this.$refs.navBox === "object" && typeof this.$refs.navBox.clientHeight === "number") {
351   - maxHeight = (this.$refs.navBox.clientHeight + this.$parent.top.value) * 2;
352   - }
353   -
354   - if (scrollTop >= 0 && scrollTop <= maxHeight) {
355   - this.opacity = scrollTop / maxHeight;
356   - } else if (scrollTop > maxHeight) {
357   - this.opacity = 1;
358   - } else {
359   - this.opacity = 0;
360   - }
361   -
362   - if (!isTimeout) {
363   -
364   - if (this.timer) {
365   - clearTimeout(this.timer);
366   - }
367   -
368   - // 倒计时校正滚动条位置
369   - this.timer = setTimeout(function (options) {
370   -
371   - // 递归
372   - options.context.onPageScrollFun(options.e, true);
373   - }, 1000, { e, context: this });
374   - }
375   - }
376   - },
377   - head: {
378   - title () {
379   - return {
380   - inner: this.title
381   - }
382   - }
383   - },
384   - watch: {
385   -
386   - // 设置页面标题
387   - title (newVal) {
388   - if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
389   - this.$iFrame.insertIFrame(newVal);
390   - } else {
391   - this.$emit("updateHead");
392   - }
393   - }
394 219 },
395 220 //请求数据
396 221 created () {
397   - // 设置标题
398   - this.$set(this, "title", "健康商城");
  222 + // 抽奖记录
  223 + this.getIntegralNewGoodsList(this.page);
399 224  
400   - // 设置锚点定位数据
401   - this.$set(this, 'navs', [
402   - {
403   - ref: 'physicalGoodsBox',
404   - simg: 'static/img/points_item01.png',
405   - title: '实物商品'
406   - },
407   - {
408   - ref: 'virtualGoodsBox',
409   - simg: 'static/img/points_item02.png',
410   - title: '虚拟商品'
411   - },
412   - {
413   - ref: 'fullReductionBox',
414   - simg: 'static/img/points_item03.png',
415   - title: '满减红包'
416   - }
417   - ]);
418 225 // 判断是否在App内
419 226 if (this.isCNLive.value) {
420 227  
... ... @@ -432,17 +239,15 @@ export default {
432 239 ]
433 240 }
434 241 });
435   -
436   - // 设置标题
437   - this.$set(this.backs, 'title', '健康商城');
438 242 }
439   - // 获取健康商城商品信息接口
440   - this.integralMallIndex();
  243 + /*设置标题 */
  244 + this.$set(this, "title", "健康商城");
  245 + this.$set(this.backs, 'title', "健康商城");
441 246 },
442 247 mounted () {
443 248 // 如果是App外，设置唤起App和微信内分享参数
444 249 if (!this.isCNLive.value) {
445   - // 设置健康首页唤起app参数
  250 + // 设置积分首页唤起app参数
446 251 if (typeof this.$parent.getOpenApp === "function") {
447 252 this.$parent.getOpenApp({
448 253 type: 45,
... ... @@ -451,25 +256,11 @@ export default {
451 256 });
452 257 }
453 258 }
454   -
455   - // 监听滚动条，设置滚动条推动渐变颜色和图片
456   - window.addEventListener("scroll", this.onPageScrollFun, true);
457   -
458   - // 页面显示监听
459   - document.addEventListener('visibilitychange', () => {
460   -
461   - // 页面显示出来了
462   - if (document.hidden === false) {
463   -
464   - // 获取健康商城商品信息接口
465   - this.integralMallIndex();
466   - }
467   - });
468 259 }
469 260 }
470 261 </script>
471 262  
472   -<style rel="stylesheet/less" lang='less' scoped>
  263 +<style rel="stylesheet/less" lang="less" scoped>
473 264 @import 'healthMall';
474 265 </style>
475 266  
... ...
src/pages/pointsMall/pointsMall.vue
  View file @ea05f86
... ... @@ -70,7 +70,7 @@
70 70 <!-- 分割线 -->
71 71 <div class="line"> </div>
72 72 <div class="item">热门商品 精品推荐</div>
73   - <div @click="toMore(1)" class="more">更多<img src="static/img/icon_more_arrow_right.png"alt=""/></div>
  73 + <div @click="toMore(1)" class="more">更多<img src="static/img/icon_more_arrow_right.png" alt=""/></div>
74 74 </div>
75 75 <!-- 实物商品裂变 -->
76 76 <!-- 商品样式 7 列表 goodType=1为积分商城实物商品-->
... ... @@ -88,7 +88,7 @@
88 88 <!-- 分割线 -->
89 89 <div class="line"> </div>
90 90 <div class="item">虚拟商品 精品推荐</div>
91   - <div @click="toMore(2)" class="more">更多<img src="static/img/icon_more_arrow_right.png"alt=""/></div>
  91 + <div @click="toMore(2)" class="more">更多<img src="static/img/icon_more_arrow_right.png" alt=""/></div>
92 92 </div>
93 93 <!-- 商品样式 7 列表 -->
94 94 <column-list-box class="column-list-box" v-if="virtualGoods && virtualGoods.list && virtualGoods.list.length" @jump="toDetail"
... ... @@ -104,7 +104,7 @@
104 104 <!-- 分割线 -->
105 105 <div class="line"> </div>
106 106 <div class="item">满减红包 精品推荐</div>
107   - <div @click="toMore(3)" class="more">更多<img src="static/img/icon_more_arrow_right.png"alt=""/></div>
  107 + <div @click="toMore(3)" class="more">更多<img src="static/img/icon_more_arrow_right.png" class="" alt=""/></div>
108 108 </div>
109 109 <!-- 商品样式 7 列表 -->
110 110 <column-list-box class="column-list-box" v-if="redEnvelopeFull && redEnvelopeFull.list && redEnvelopeFull.list.length" @jump="toDetail"
... ... @@ -252,8 +252,8 @@ export default {
252 252 * 跳转商品更多页
253 253 * @param {Object} type [数据对象1实物品 2虚拟商品 3满减红包]
254 254 */
255   - toMore(type){
256   - if (this.isCNLive.value) {
  255 + toMore (type) {
  256 + if (this.isCNLive.value) {
257 257 // this.$router.push({
258 258 // path: "/goodDetails",
259 259 // query: {
... ...