w-front-end / select_good · Commits

Commit 512055965db9218bfc2519e1034076fe5b6b9e67

Authored by 王强
1 parent 0cd57fc2

工会商品列表页对接完成，待测试~

Inline Side-by-side
Showing 1 changed file with 90 additions and 62 deletions
src/pages/labourUnion/labourUnion.vue
  View file @5120559
... ... @@ -22,8 +22,8 @@
22 22 <div class="main-box">
23 23  
24 24 <!-- 头图 -->
25   - <div class="header-box" v-if="tabs.list[tabs.active].img">
26   - <img :src="tabs.list[tabs.active].img + SIGN.BIG" class="header-img" />
  25 + <div class="header-box" v-if="ghBanner">
  26 + <img :src="ghBanner + SIGN.BIG" class="header-img" />
27 27 </div>
28 28  
29 29 <!-- 余额展示区块 -->
... ... @@ -38,10 +38,12 @@
38 38 </div>
39 39 </div>
40 40 <div class="balance-bottom">
41   - <div class="price-box">
  41 +
  42 + <!-- 添加key，用户重新渲染计算属性 -->
  43 + <div class="price-box" :key="priceUpdateKey">
42 44 <div class="sy">￥</div>
43   - <div class="integer">{{getInteger(1950.00)}}.</div>
44   - <div class="decimal">{{getDecimal(1950.00)}}</div>
  45 + <div class="integer">{{getInteger(money)}}.</div>
  46 + <div class="decimal">{{getDecimal(money)}}</div>
45 47 </div>
46 48 <div class="btn btn-default" @click="toOrderList">
47 49 <div class="text">
... ... @@ -109,7 +111,10 @@
109 111 return {
110 112 title: "", // 标题
111 113 backs: null, // 后退按钮组
  114 + ghBanner: '', // 工会Banner图片
112 115 balanceBg: 'static/img/balance_bg.png', // 余额区块背景图片
  116 + money: '0.00', // 我的余额
  117 + priceUpdateKey: 0, // 余额组件key
113 118 CALL_STATUS: {
114 119 INIT: "init", // 初始化页面
115 120 LOAD_MORE: "loadMore" // 加载更多
... ... @@ -118,7 +123,16 @@
118 123 fixed: false, // 是否吸顶
119 124 offsetTop: 0, // 距离顶部距离
120 125 active: 0, // 活动项
121   - list: [] // tabs数组
  126 + list: [ // tabs数组
  127 + {
  128 + id: 0,
  129 + title: '全部',
  130 + page: 1,
  131 + loading: false,
  132 + loadingNow: false,
  133 + finished: false
  134 + }
  135 + ]
122 136 },
123 137 lists: [] // 列表数据
124 138 }
... ... @@ -161,15 +175,11 @@
161 175 },
162 176 created() {
163 177  
164   - // 设置标题
165   - this.$set(this, 'title', '工会商品');
166   -
167 178 // 判断是否在App内
168 179 if (this.isCNLive.value) {
169 180  
170 181 // 添加后退按钮组“后退”和“分享”按钮
171 182 this.$set(this, 'backs', {
172   - title: this.title,
173 183 funcs: {
174 184 back: {
175 185 icon: "static/img/icon_back.png"
... ... @@ -184,8 +194,11 @@
184 194 });
185 195 }
186 196  
187   - // 获取tabs列表
188   - this.discountGoods2();
  197 + // 获取页面头部数据
  198 + this.ghIndex();
  199 +
  200 + // 工会商品列表（初始化）
  201 + this.ghGoodsList(this.CALL_STATUS.INIT);
189 202 },
190 203 methods: {
191 204  
... ... @@ -205,15 +218,15 @@
205 218 // 设置初始化页码
206 219 this.$set(this.tabs.list[this.tabs.active], 'page', 1);
207 220  
208   - // 获取店铺首页推荐商品列表
209   - this.getShopRecommendGoods(this.CALL_STATUS.INIT);
  221 + // 工会商品列表
  222 + this.ghGoodsList(this.CALL_STATUS.INIT);
210 223 } else {
211 224  
212 225 // 判断页面是数字再执行
213 226 if (!isNaN(parseInt(this.tabs.list[this.tabs.active].page))) {
214 227  
215   - // 获取店铺首页推荐商品列表
216   - this.getShopRecommendGoods(this.CALL_STATUS.LOAD_MORE);
  228 + // 工会商品列表
  229 + this.ghGoodsList(this.CALL_STATUS.LOAD_MORE);
217 230 }
218 231 }
219 232 }
... ... @@ -232,8 +245,8 @@
232 245 // 根据参数判断请求哪个接口，获取哪个列表
233 246 if (this.tabs.list[this.tabs.active].type == '1' && (!this.tabs.list[this.tabs.active].page || this.tabs.list[this.tabs.active].page == 1)) {
234 247  
235   - // 获取店铺首页推荐商品列表（初始化）
236   - this.getShopRecommendGoods(this.CALL_STATUS.INIT);
  248 + // 工会商品列表（初始化）
  249 + this.ghGoodsList(this.CALL_STATUS.INIT);
237 250 }
238 251  
239 252 // 回到顶部
... ... @@ -248,27 +261,32 @@
248 261 },
249 262  
250 263 /**
251   - * 获取tabs列表
  264 + * 获取页面头部数据
252 265 */
253   - discountGoods2() {
  266 + ghIndex() {
254 267  
255   - // 加载中提示
256   - Indicator.open("加载中...");
  268 + // 判断必要参数
  269 + if (this.$route.query.ghId) {
257 270  
258   - // 获取证书请求接口
259   - this.http("/Api/" + (this.getApiVersion().good) + "/discountGoods2", {
260   - uid: this.getStore("uid") || 0
261   - }, this.discountGoods2Callback, {
262   - method: "POST"
263   - });
  271 + // 加载中提示
  272 + Indicator.open("加载中...");
  273 +
  274 + // 获取证书请求接口
  275 + this.http("/Api/" + (this.getApiVersion().index) + "/ghIndex", {
  276 + id: this.$route.query.ghId,
  277 + uid: (this.$route.query.uid || 0)
  278 + }, this.ghIndexCallback, {
  279 + method: "POST"
  280 + });
  281 + }
264 282 },
265 283  
266 284 /**
267   - * 获取tabs列表回调
  285 + * 获取页面头部数据回调
268 286 * @param {Object} res [服务器返回数据]
269 287 * @param {Object} ext [扩展参数]
270 288 */
271   - discountGoods2Callback(res, ext) {
  289 + ghIndexCallback(res, ext) {
272 290  
273 291 // 加载完成
274 292 Indicator.close();
... ... @@ -279,24 +297,33 @@
279 297 // 解构数据
280 298 let { data: datas } = res;
281 299  
282   - /* 获取tabs数据 开始 */
  300 + /* 设置首页数据 开始 */
  301 +
  302 + // 设置标题
  303 + this.$set(this, 'title', datas.title);
  304 +
  305 + // 设置nav标题
  306 + this.$set(this.backs, 'title', this.title);
  307 +
  308 + // 设置工会Banner图片
  309 + if (datas.banner) {
  310 + this.$set(this, 'ghBanner', datas.banner);
  311 + }
  312 +
  313 + // 设置余额
  314 + this.$set(this, 'money', datas.money);
283 315  
284   - if (datas.nav && datas.nav.length) {
  316 + // 更新余额组件key，用于重新渲染余额
  317 + this.$set(this, 'priceUpdateKey', ++this.priceUpdateKey);
285 318  
  319 + // 获取tabs数据
  320 + if (datas.list && datas.list.length) {
  321 +
286 322 // 合并数组
287   - this.$set(this.tabs, 'list', [...this.tabs.list, ...datas.nav]);
288   -
289   - // 单独设置标题颜色/起始页码/加载中控制
290   - for (let i = 0; i < this.tabs.list.length; i++) {
291   - this.$set(this.tabs.list[i], 'titleColor', this.tabs.list[i].color);
292   - this.$set(this.tabs.list[i], 'page', 1);
293   - this.$set(this.tabs.list[i], 'loading', false);
294   - this.$set(this.tabs.list[i], 'loadingNow', false);
295   - this.$set(this.tabs.list[i], 'finished', false);
296   - }
  323 + this.$set(this.tabs, 'list', [...this.tabs.list, ...datas.list]);
297 324 }
298 325  
299   - /* 获取tabs数据 结束 */
  326 + /* 设置首页数据 结束 */
300 327  
301 328 } else if (res.code == 400) {
302 329  
... ... @@ -310,13 +337,13 @@
310 337 },
311 338  
312 339 /**
313   - * 获取店铺首页推荐商品列表
  340 + * 工会商品列表
314 341 * @param {Object} CALL_STATUS [何处触发请求]
315 342 */
316   - getShopRecommendGoods(CALL_STATUS = this.CALL_STATUS.LOAD_MORE) {
  343 + ghGoodsList(CALL_STATUS = this.CALL_STATUS.LOAD_MORE) {
317 344  
318 345 // 判断必要参数
319   - if (this.tabs.list[this.tabs.active].shop_id) {
  346 + if (this.$route.query.ghId && this.tabs.list[this.tabs.active].id >= 0) {
320 347  
321 348 // 设置开始加载
322 349 this.$set(this.tabs.list[this.tabs.active], "loading", true);
... ... @@ -325,10 +352,11 @@
325 352 Indicator.open('加载中...');
326 353  
327 354 // 请求接口
328   - this.http("/Api/" + (this.getApiVersion().index) + "/shopRecommendGoods", {
329   - shop_id: this.tabs.list[this.tabs.active].shop_id,
  355 + this.http("/Api/" + (this.getApiVersion().index) + "/ghGoodsList", {
  356 + id: this.$route.query.ghId,
  357 + group_id: this.tabs.list[this.tabs.active].id,
330 358 page: this.tabs.list[this.tabs.active].page
331   - }, this.getShopRecommendGoodsCallback, {
  359 + }, this.ghGoodsListCallback, {
332 360 method: "POST",
333 361 CALL_STATUS
334 362 });
... ... @@ -336,11 +364,11 @@
336 364 },
337 365  
338 366 /**
339   - * 获取店铺首页推荐商品列表回调
  367 + * 工会商品列表回调
340 368 * @param {Object} res [服务器返回数据]
341 369 * @param {Object} ext [扩展参数]
342 370 */
343   - getShopRecommendGoodsCallback(res, ext) {
  371 + ghGoodsListCallback(res, ext) {
344 372  
345 373 // 加载完成
346 374 Indicator.close();
... ... @@ -524,17 +552,6 @@
524 552 },
525 553  
526 554 /**
527   - * 分享
528   - */
529   - toShare() {
530   -
531   - // 判断分享
532   - if (typeof this.$parent.toShare === 'function') {
533   - this.$parent.toShare(51, this.$route.query.id || 1);
534   - }
535   - },
536   -
537   - /**
538 555 * 后退
539 556 */
540 557 back() {
... ... @@ -595,6 +612,17 @@
595 612  
596 613 // 设置滚动条监听
597 614 this.handleScroll();
  615 +
  616 + // 页面切换可见状态监听
  617 + document.addEventListener('visibilitychange', () => {
  618 +
  619 + // 页面显示出来了
  620 + if (document.hidden === false && this.$route.name == 'labourUnion') {
  621 +
  622 + // 获取页面头部数据
  623 + this.ghIndex();
  624 + }
  625 + });
598 626 }
599 627 }
600 628 </script>
... ...