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 @charset "UTF-8"; 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 width: 100%; 4 width: 100%;
34 min-height: 100vh; 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 background-size: 100%; 7 background-size: 100%;
38 overflow: hidden; 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 \ No newline at end of file 24 \ No newline at end of file
  25 +}
203 \ No newline at end of file 26 \ No newline at end of file
src/pages/healthMall/healthMall.vue
  View file @ea05f86
1 <template> 1 <template>
2 -<div>  
3 - <!-- H5唤起App组件 -->  
4 - <call-app-box 2 +<div class="gift_zone_detail">
  3 + <call-app-box
5 class="call-app-box" 4 class="call-app-box"
6 :style="'padding-top: ' + $parent.top.value + 'px'" 5 :style="'padding-top: ' + $parent.top.value + 'px'"
7 ref="callApp" 6 ref="callApp"
@@ -9,149 +8,76 @@ @@ -9,149 +8,76 @@
9 :callApps="$parent.callApps" 8 :callApps="$parent.callApps"
10 > 9 >
11 </call-app-box> 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 </div> 34 </div>
120 </template> 35 </template>
121 36
122 <script> 37 <script>
123 -import { Toast, Indicator } from "mint-ui";  
124 import callAppBox from "@/components/callAppBox/callAppBox"; 38 import callAppBox from "@/components/callAppBox/callAppBox";
125 import backBox from "@/components/backBox/backBox"; 39 import backBox from "@/components/backBox/backBox";
126 -import goodsItem2 from "@/components/goodsItem_2/goodsItem_2"; 40 +import { Toast, Indicator } from "mint-ui";
127 import columnListBox from "@/components/columnListBox/columnListBox"; 41 import columnListBox from "@/components/columnListBox/columnListBox";
128 export default { 42 export default {
129 - name: 'pointsmall', 43 + name: 'morePoints',
130 data () { 44 data () {
131 return { 45 return {
132 - opacity: 0, // 透明度  
133 title: "", // 标题 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 components: { 56 components: {
145 - callAppBox,  
146 backBox, 57 backBox,
147 - goodsItem2,  
148 - columnListBox 58 + columnListBox,
  59 + callAppBox
149 }, 60 },
150 //静态 61 //静态
151 props: [ 62 props: [
152 ], 63 ],
153 //对象内部的属性监听，也叫深度监听 64 //对象内部的属性监听，也叫深度监听
  65 + head: {
  66 + title () {
  67 + return {
  68 + inner: this.title
  69 + }
  70 + }
  71 + },
154 watch: { 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 computed: { 83 computed: {
@@ -159,72 +85,81 @@ export default { @@ -159,72 +85,81 @@ export default {
159 //方法表示一个具体的操作，主要书写业务逻辑； 85 //方法表示一个具体的操作，主要书写业务逻辑；
160 methods: { 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 } else { 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 toDetail (item) { 163 toDetail (item) {
229 if (this.isCNLive.value) { 164 if (this.isCNLive.value) {
230 // this.$router.push({ 165 // this.$router.push({
@@ -240,7 +175,7 @@ export default { @@ -240,7 +175,7 @@ export default {
240 // 设置跳转参数 175 // 设置跳转参数
241 let params = { 176 let params = {
242 type: '5', 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 shop_type: '' 179 shop_type: ''
245 }; 180 };
246 181
@@ -251,25 +186,17 @@ export default { @@ -251,25 +186,17 @@ export default {
251 this.$parent.callApp(); 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 back () { 193 back () {
  194 + // 返回先隐藏弹框
269 195
270 // 判断是否有处理函数 196 // 判断是否有处理函数
271 if (typeof this.$parent.back === 'function') { 197 if (typeof this.$parent.back === 'function') {
272 - 198 + // 隐藏通用浮层
  199 + this.$parent.$refs.showModal.hideLayer();
273 // 后退 200 // 后退
274 this.$parent.back(); 201 this.$parent.back();
275 } else { 202 } else {
@@ -278,143 +205,23 @@ export default { @@ -278,143 +205,23 @@ export default {
278 window.history.go(-1); 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 created () { 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 // 判断是否在App内 225 // 判断是否在App内
419 if (this.isCNLive.value) { 226 if (this.isCNLive.value) {
420 227
@@ -432,17 +239,15 @@ export default { @@ -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 mounted () { 247 mounted () {
443 // 如果是App外，设置唤起App和微信内分享参数 248 // 如果是App外，设置唤起App和微信内分享参数
444 if (!this.isCNLive.value) { 249 if (!this.isCNLive.value) {
445 - // 设置健康首页唤起app参数 250 + // 设置积分首页唤起app参数
446 if (typeof this.$parent.getOpenApp === "function") { 251 if (typeof this.$parent.getOpenApp === "function") {
447 this.$parent.getOpenApp({ 252 this.$parent.getOpenApp({
448 type: 45, 253 type: 45,
@@ -451,25 +256,11 @@ export default { @@ -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 </script> 261 </script>
471 262
472 -<style rel="stylesheet/less" lang='less' scoped> 263 +<style rel="stylesheet/less" lang="less" scoped>
473 @import 'healthMall'; 264 @import 'healthMall';
474 </style> 265 </style>
475 266
src/pages/pointsMall/pointsMall.vue
  View file @ea05f86
@@ -70,7 +70,7 @@ @@ -70,7 +70,7 @@
70 <!-- 分割线 --> 70 <!-- 分割线 -->
71 <div class="line"> </div> 71 <div class="line"> </div>
72 <div class="item">热门商品 精品推荐</div> 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 </div> 74 </div>
75 <!-- 实物商品裂变 --> 75 <!-- 实物商品裂变 -->
76 <!-- 商品样式 7 列表 goodType=1为积分商城实物商品--> 76 <!-- 商品样式 7 列表 goodType=1为积分商城实物商品-->
@@ -88,7 +88,7 @@ @@ -88,7 +88,7 @@
88 <!-- 分割线 --> 88 <!-- 分割线 -->
89 <div class="line"> </div> 89 <div class="line"> </div>
90 <div class="item">虚拟商品 精品推荐</div> 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 </div> 92 </div>
93 <!-- 商品样式 7 列表 --> 93 <!-- 商品样式 7 列表 -->
94 <column-list-box class="column-list-box" v-if="virtualGoods && virtualGoods.list && virtualGoods.list.length" @jump="toDetail" 94 <column-list-box class="column-list-box" v-if="virtualGoods && virtualGoods.list && virtualGoods.list.length" @jump="toDetail"
@@ -104,7 +104,7 @@ @@ -104,7 +104,7 @@
104 <!-- 分割线 --> 104 <!-- 分割线 -->
105 <div class="line"> </div> 105 <div class="line"> </div>
106 <div class="item">满减红包 精品推荐</div> 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 </div> 108 </div>
109 <!-- 商品样式 7 列表 --> 109 <!-- 商品样式 7 列表 -->
110 <column-list-box class="column-list-box" v-if="redEnvelopeFull && redEnvelopeFull.list && redEnvelopeFull.list.length" @jump="toDetail" 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,8 +252,8 @@ export default {
252 * 跳转商品更多页 252 * 跳转商品更多页
253 * @param {Object} type [数据对象1实物品 2虚拟商品 3满减红包] 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 // this.$router.push({ 257 // this.$router.push({
258 // path: "/goodDetails", 258 // path: "/goodDetails",
259 // query: { 259 // query: {