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

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
王强
2 parents a1e7e3c7 d77b4f8b
Showing 4 changed files with 91 additions and 9 deletions
src/components/goodsItem_2/goodsItem_2.vue
src/pages/goodDetails/goodDetails.vue
src/pages/pointsMall/pointsMall.less
src/pages/pointsMall/pointsMall.vue
@@ -9,7 +9,7 @@
 		<div class="content-box">
  
             <!-- 因积分商城需要显示白色灰色字体标示 -->
-			<div class="title" :class="{'grey': item.num ? true : false, 'align-center': pid == '5'}" v-if="pid == undefined || pid == '1' ||  pid == '3' || pid == '4' || pid == '5'">{{item.title}}</div>
+			<div class="title" :class="{'grey': item.num, 'align-center': pid == '5' || item.num}" v-if="pid == undefined || pid == '1' ||  pid == '3' || pid == '4' || pid == '5'">{{item.title}}</div>
  
             <!-- 因积分商城不价格所有加上 !item.grade判断 -->
 			<div class="price-box" v-if="pid != '5' && !item.num">
@@ -53,7 +53,7 @@
               <div class="good-title">
                 <span class="left"></span>商品详情<span class="right"></span>
               </div>
-              <div v-if="goodsInfo && goodsInfo.content" v-html="goodsInfo.content" class="good-desc">
+              <div v-if="goodsInfo && goodsInfo.content" v-html="goodsInfo.content" class="good-desc html_box">
               </div>
               <div class="good-title">
                 <span class="left"></span>兑换规则<span class="right"></span>
@@ -103,7 +103,7 @@
           </div>
         </div>
         <!-- 地址信息组件 -->
-        <address-toast ref="itemsInfo" @toUpdate="getGoodsInfo" v-show="pointsToast_control"></address-toast>
+        <address-toast ref="itemsInfo" @toUpdate="toLinkPointsMall" v-show="pointsToast_control"></address-toast>
 </div>
 </template>
  
@@ -147,9 +147,30 @@ export default {
   methods: {
     // 跳转网家家购买音频协议
     toLink () {
-      window.location.href = "https://wjj.ys1.cnliveimg.com/term/liveFwxy.html"
+      if (this.isCNLive.value) {
+        // 跳转封装
+        if (typeof this.$parent.gotoDetail === 'function') {
+          // 设置跳转参数
+          let params = {
+            type: '34',
+            to: "https://wjj.ys1.cnliveimg.com/term/liveFwxy.html?type=web",
+            shop_type: ''
+          };
+          // 页面跳转
+          this.$parent.gotoDetail(params);
+        }
+      } else {
+        this.$parent.callApps();
+      }
+    },
+    toLinkPointsMall () {
+      this.$router.push({
+        path: '/pointsMall',
+        query: {
+          uid: this.getStore("uid")
+        }
+      })
     },
-
     /**
      * 后退
      */
@@ -170,7 +191,6 @@ export default {
     * @param {Object} item [数据对象]
     */
     toDetail (item) {
-      console.log(item.id);
       if (this.isCNLive.value) {
         // 跳转封装
         if (typeof this.$parent.gotoDetail === 'function') {
@@ -423,3 +443,10 @@ export default {
 @import './goodDetails.less';
 </style>
  
+<style>
+.html_box img {
+  display: block;
+  width: 100%;
+}
+</style>
+
@@ -10,6 +10,11 @@
         height: 93px;
     }
 }
+// 列表
+.column-list-box{
+  display: flex;
+  justify-content: center;
+}
 .hide{
   display:none;
 }
@@ -19,6 +24,10 @@
 }
 .back-box{
   background-color: transparent;
+  position: fixed;
+  top: 0;
+  left:0;
+  z-index: 2;
 }
 .main_box{
   width: 100%;
@@ -12,11 +12,13 @@
                     <!-- pl -->
         <div class="pl" :class="{'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}"></div>
         <div class="main_box">
+                          <!-- pl -->
+        <div class="pl" :class="{'is-cnlive': isCNLive.value, 'hide': $route.query.hideBack == true}"></div>
           <back-box
               v-if="isCNLive.value"
               :class="{'hide': $route.query.hideBack == true}"
               class="back-box"
-              :style="'padding-top: ' + $parent.top.value + 'px'"
+              :style="'padding-top: ' + $parent.top.value + 'px; background-color: rgba(255, 248, 232, ' + opacity + ')'" ref="navBox"
               @back="back"
               :backs="backs">
           </back-box>
@@ -43,7 +45,7 @@
               <div class="earn_points_box">
                 <img class="earn_icon" src="static/img/points_icon_pice.png" alt="">
                 <div class="desc">赚取更多积分，兑换精美礼品～</div>
-                <div @click="jumpClientIntegralList" class="btn">赚取积分  <img class="earn_right_back" src="static/img/points_icon_white_right.png" alt=""/></div>
+                <div @click="jumpClientIntegralList" class="btn">赚积分  <img class="earn_right_back" src="static/img/points_icon_white_right.png" alt=""/></div>
               </div>
             </div>
             <!-- 为你推荐 -->
@@ -123,6 +125,7 @@ export default {
   name: 'pointsmall',
   data () {
     return {
+      opacity: 0,             // 透明度  
       title: "",              // 标题
       backs: null,            // 后退按钮组
       navs: null, // 导航
@@ -313,6 +316,47 @@ export default {
         Toast(res.message);
       }
     },
+
+    /**
+* 滚动条滚动/touchmove监听处理
+* @param {object} e [滚动条对象]
+* @param {boolean} isTimeout [是否为setTimeout方法调用]
+*/
+    onPageScrollFun (e, isTimeout = false) {
+
+      // 获取滚动条位置，浏览器兼容处理
+      let scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) || 0;
+
+      // 滚动控制高度
+      let maxHeight = 200;
+
+      // 动态获取百分比分配比例
+      if (typeof this.$refs === "object" && typeof this.$refs.navBox === "object" && typeof this.$refs.navBox.clientHeight === "number") {
+        maxHeight = (this.$refs.navBox.clientHeight + this.$parent.top.value) * 2;
+      }
+
+      if (scrollTop >= 0 && scrollTop <= maxHeight) {
+        this.opacity = scrollTop / maxHeight;
+      } else if (scrollTop > maxHeight) {
+        this.opacity = 1;
+      } else {
+        this.opacity = 0;
+      }
+
+      if (!isTimeout) {
+
+        if (this.timer) {
+          clearTimeout(this.timer);
+        }
+
+        // 倒计时校正滚动条位置
+        this.timer = setTimeout(function (options) {
+
+          // 递归
+          options.context.onPageScrollFun(options.e, true);
+        }, 1000, { e, context: this });
+      }
+    }
   },
   head: {
     title () {
@@ -374,7 +418,7 @@ export default {
       });
  
       // 设置标题
-      this.$set(this.backs, 'title', '优选');
+      this.$set(this.backs, 'title', '积分商城');
     }
     // 获取商品信息接口
     this.integralMallIndex();
@@ -391,6 +435,8 @@ export default {
         });
       }
     }
+    // 监听滚动条，设置滚动条推动渐变颜色和图片
+    window.addEventListener("scroll", this.onPageScrollFun, true);
   }
 }
 </script>