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

王强
1 parent 0cd57fc2
Showing 1 changed file with 90 additions and 62 deletions
src/pages/labourUnion/labourUnion.vue
@@ -22,8 +22,8 @@
         <div class="main-box">
             <!-- 头图 -->
-            <div class="header-box" v-if="tabs.list[tabs.active].img">
-                <img :src="tabs.list[tabs.active].img + SIGN.BIG" class="header-img" />
+            <div class="header-box" v-if="ghBanner">
+                <img :src="ghBanner + SIGN.BIG" class="header-img" />
             </div>
             <!-- 余额展示区块 -->
@@ -38,10 +38,12 @@
                         </div>
                     </div>
                     <div class="balance-bottom">
-                        <div class="price-box">
+
+                        <!-- 添加key，用户重新渲染计算属性 -->
+                        <div class="price-box" :key="priceUpdateKey">
                             <div class="sy">￥</div>
-                            <div class="integer">{{getInteger(1950.00)}}.</div>
-                            <div class="decimal">{{getDecimal(1950.00)}}</div>
+                            <div class="integer">{{getInteger(money)}}.</div>
+                            <div class="decimal">{{getDecimal(money)}}</div>
                         </div>
                         <div class="btn btn-default" @click="toOrderList">
                             <div class="text">
@@ -109,7 +111,10 @@
             return {
                 title: "",                                  // 标题
                 backs: null,                                // 后退按钮组
+                ghBanner: '',                               // 工会Banner图片
                 balanceBg: 'static/img/balance_bg.png',     // 余额区块背景图片
+                money: '0.00',                              // 我的余额
+                priceUpdateKey: 0,                          // 余额组件key
                 CALL_STATUS: {
 					INIT: "init",				            // 初始化页面
 					LOAD_MORE: "loadMore"		            // 加载更多
@@ -118,7 +123,16 @@
                     fixed: false,                           // 是否吸顶
                     offsetTop: 0,                           // 距离顶部距离
                     active: 0,                              // 活动项
-                    list: []                                // tabs数组
+                    list: [                                 // tabs数组
+                        {
+                            id: 0,
+                            title: '全部',
+                            page: 1,
+                            loading: false,
+                            loadingNow: false,
+                            finished: false
+                        }
+                    ]
                 },
                 lists: []                                   // 列表数据
             }
@@ -161,15 +175,11 @@
         },
         created() {
-            // 设置标题
-            this.$set(this, 'title', '工会商品');
-
             // 判断是否在App内
             if (this.isCNLive.value) {
                 // 添加后退按钮组“后退”和“分享”按钮
                 this.$set(this, 'backs', {
-                    title: this.title,
                     funcs: {
                         back: {
                             icon: "static/img/icon_back.png"
@@ -184,8 +194,11 @@
                 });
             }
-            // 获取tabs列表
-            this.discountGoods2();
+            // 获取页面头部数据
+            this.ghIndex();
+
+            // 工会商品列表（初始化）
+            this.ghGoodsList(this.CALL_STATUS.INIT);
         },
         methods: {
@@ -205,15 +218,15 @@
                         // 设置初始化页码
                         this.$set(this.tabs.list[this.tabs.active], 'page', 1);
-                        // 获取店铺首页推荐商品列表
-                        this.getShopRecommendGoods(this.CALL_STATUS.INIT);
+                        // 工会商品列表
+                        this.ghGoodsList(this.CALL_STATUS.INIT);
                     } else {
                         // 判断页面是数字再执行
                         if (!isNaN(parseInt(this.tabs.list[this.tabs.active].page))) {
-                            // 获取店铺首页推荐商品列表
-                            this.getShopRecommendGoods(this.CALL_STATUS.LOAD_MORE);
+                            // 工会商品列表
+                            this.ghGoodsList(this.CALL_STATUS.LOAD_MORE);
                         }
                     }
                 }
@@ -232,8 +245,8 @@
                 // 根据参数判断请求哪个接口，获取哪个列表
                 if (this.tabs.list[this.tabs.active].type == '1' && (!this.tabs.list[this.tabs.active].page || this.tabs.list[this.tabs.active].page == 1)) {
-                    // 获取店铺首页推荐商品列表（初始化）
-                    this.getShopRecommendGoods(this.CALL_STATUS.INIT);
+                    // 工会商品列表（初始化）
+                    this.ghGoodsList(this.CALL_STATUS.INIT);
                 }
                 // 回到顶部
@@ -248,27 +261,32 @@
 			},
             /**
-             * 获取tabs列表
+             * 获取页面头部数据
              */
-            discountGoods2() {
+            ghIndex() {
-                // 加载中提示
-                Indicator.open("加载中...");
+                // 判断必要参数
+                if (this.$route.query.ghId) {
-                // 获取证书请求接口
-                this.http("/Api/" + (this.getApiVersion().good) + "/discountGoods2", {
-                    uid: this.getStore("uid") || 0
-                }, this.discountGoods2Callback, {
-                    method: "POST"
-                });
+                    // 加载中提示
+                    Indicator.open("加载中...");
+    
+                    // 获取证书请求接口
+                    this.http("/Api/" + (this.getApiVersion().index) + "/ghIndex", {
+                        id: this.$route.query.ghId,
+                        uid: (this.$route.query.uid || 0)
+                    }, this.ghIndexCallback, {
+                        method: "POST"
+                    });
+                }
             },
             /**
-             * 获取tabs列表回调
+             * 获取页面头部数据回调
              * @param {Object} res [服务器返回数据]
              * @param {Object} ext [扩展参数]
              */
-            discountGoods2Callback(res, ext) {
+            ghIndexCallback(res, ext) {
                 // 加载完成
                 Indicator.close();
@@ -279,24 +297,33 @@
                     // 解构数据
                     let { data: datas } = res;
-                    /* 获取tabs数据 开始 */
+                    /* 设置首页数据 开始 */
+
+                    // 设置标题
+                    this.$set(this, 'title', datas.title);
+
+                    // 设置nav标题
+                    this.$set(this.backs, 'title', this.title);
+
+                    // 设置工会Banner图片
+                    if (datas.banner) {
+                        this.$set(this, 'ghBanner', datas.banner);
+                    }
+
+                    // 设置余额
+                    this.$set(this, 'money', datas.money);
-                    if (datas.nav && datas.nav.length) {
+                    // 更新余额组件key，用于重新渲染余额
+                    this.$set(this, 'priceUpdateKey', ++this.priceUpdateKey);
+                    // 获取tabs数据
+                    if (datas.list && datas.list.length) {
+                        
                         // 合并数组
-                        this.$set(this.tabs, 'list', [...this.tabs.list, ...datas.nav]);
-
-                        // 单独设置标题颜色/起始页码/加载中控制
-                        for (let i = 0; i < this.tabs.list.length; i++) {
-                            this.$set(this.tabs.list[i], 'titleColor', this.tabs.list[i].color);
-                            this.$set(this.tabs.list[i], 'page', 1);
-                            this.$set(this.tabs.list[i], 'loading', false);
-                            this.$set(this.tabs.list[i], 'loadingNow', false);
-                            this.$set(this.tabs.list[i], 'finished', false);
-                        }
+                        this.$set(this.tabs, 'list', [...this.tabs.list, ...datas.list]);
                     }
-                    /* 获取tabs数据 结束 */
+                    /* 设置首页数据 结束 */
                 } else if (res.code == 400) {
@@ -310,13 +337,13 @@
             },
             /**
-			 * 获取店铺首页推荐商品列表
+			 * 工会商品列表
 			 * @param {Object} CALL_STATUS	[何处触发请求]
 			 */
-			getShopRecommendGoods(CALL_STATUS = this.CALL_STATUS.LOAD_MORE) {
+			ghGoodsList(CALL_STATUS = this.CALL_STATUS.LOAD_MORE) {
 				// 判断必要参数
-				if (this.tabs.list[this.tabs.active].shop_id) {
+				if (this.$route.query.ghId && this.tabs.list[this.tabs.active].id >= 0) {
 					// 设置开始加载
 					this.$set(this.tabs.list[this.tabs.active], "loading", true);
@@ -325,10 +352,11 @@
                 	Indicator.open('加载中...');
 					// 请求接口
-					this.http("/Api/" + (this.getApiVersion().index) + "/shopRecommendGoods", {
-						shop_id: this.tabs.list[this.tabs.active].shop_id,
+					this.http("/Api/" + (this.getApiVersion().index) + "/ghGoodsList", {
+                        id: this.$route.query.ghId,
+						group_id: this.tabs.list[this.tabs.active].id,
 						page: this.tabs.list[this.tabs.active].page
-					}, this.getShopRecommendGoodsCallback, {
+					}, this.ghGoodsListCallback, {
 						method: "POST",
 						CALL_STATUS
 					});
@@ -336,11 +364,11 @@
 			},
 			/**
-			 * 获取店铺首页推荐商品列表回调
+			 * 工会商品列表回调
 			 * @param {Object} res [服务器返回数据]
 			 * @param {Object} ext [扩展参数]
 			 */
-			getShopRecommendGoodsCallback(res, ext) {
+			ghGoodsListCallback(res, ext) {
 				// 加载完成
 				Indicator.close();
@@ -524,17 +552,6 @@
             },
             /**
-             * 分享
-             */
-            toShare() {
-
-                // 判断分享
-                if (typeof this.$parent.toShare === 'function') {
-                    this.$parent.toShare(51, this.$route.query.id || 1);
-                }
-            },
-
-            /**
              * 后退
              */
             back() {
@@ -595,6 +612,17 @@
             // 设置滚动条监听
             this.handleScroll();
+
+            // 页面切换可见状态监听
+            document.addEventListener('visibilitychange', () => {
+
+                // 页面显示出来了
+                if (document.hidden === false && this.$route.name == 'labourUnion') {
+
+                    // 获取页面头部数据
+                    this.ghIndex();
+                }
+            });
         }
     }
 </script>