党建积分商城兑换

zhiyangdu
1 parent 5ea9febc
Showing 3 changed files with 201 additions and 3 deletions
src/pages/partyBuildingGoodDetails/partyBuildingGoodDetails.vue
src/pages/partyBuildingPointsMall/partyBuildingPointsMall.less
src/pages/partyBuildingPointsMall/partyBuildingPointsMall.vue
@@ -54,7 +54,8 @@
       </div>
       <!-- 商品信息 -->
       <div class="goods-info">
-        <div class="good-title">
+        <div v-if="goodsInfo && goodsInfo.content"
+             class="good-title">
           <span class="left"></span>商品详情
           <span class="right"></span>
         </div>
@@ -26,6 +26,89 @@
           height: 93px;
       }
   }
+    // 头部
+    .top_main{
+      margin:40px 30px;
+      padding: 30px;
+      background: #FFFFFF;
+      box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.06);
+      border-radius: 24px;
+      .top{
+        display: flex;
+        justify-content: space-between;
+        .left{
+          height: 40px;
+          font-size: 28px;
+          font-weight: 400;
+          color: #45270D;
+          line-height: 40px;
+          span{
+            margin-left: 8px;
+            height: 40px;
+            font-size: 28px;
+            font-weight: 500;
+            color: #F5A623;
+            line-height: 40px;
+          }
+        }
+        .right{
+          height: 33px;
+          font-size: 24px;
+          font-weight: 400;
+          color: #999999;
+          line-height: 33px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .back_right_iocn{
+            display: block;
+            width: 20px;
+            height:20px;
+            margin-left: 10px;
+          }
+        }
+      }
+      //赚取积分
+      .earn_points_box{
+        height: 90px;
+        background: #FFF8E8;
+        border-radius: 12px;
+        display:flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px 20px;
+        margin-top: 20px;
+        .earn_icon{
+          display: block;
+          width: 36px;
+          height:36px;
+        }
+        .desc{
+          height: 90px;
+          font-size: 26px;
+          font-weight: 400;
+          color: #746037;
+          line-height: 90px;
+        }
+        .btn{
+          font-size: 24px;
+          padding: 0 20px;
+          height: 50px;
+          background: #DAB277;
+          border-radius: 26px;
+          color: #fff;
+          text-align: center;
+          display: flex;
+          align-items: center;
+          .earn_right_back{
+            display: block;
+            width: 9px;
+            height: 18px;
+            margin-left: 8px;
+          }
+        }
+      } 
+    }
   .back-box{
     background-color: #FFF;
     position:fixed;
@@ -18,6 +18,34 @@
          :style="'padding-top: ' + $parent.top.value + 'px'"
          :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}"></div>
     <!-- 商品样式 7 列表 -->
+    <div class="top_main">
+      <!-- 头部 -->
+      <div class="top">
+        <div class="left">
+          我的积分:
+          <span>{{myGrade || 0}}</span>
+        </div>
+        <div @click="toExchangeRecord"
+             class="right">
+          兑换记录
+          <!-- 返回图标 -->
+          <img class="back_right_iocn"
+               src="static/img/points_icon_grey_right.png"
+               alt="" />
+        </div>
+      </div>
+      <!--积分赚取  -->
+      <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>
+    </div>
     <div class="gift_main_box"
          v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length"
          infinite-scroll-immediate-check="true"
@@ -54,6 +82,7 @@ export default {
   name: 'morePoints',
   data () {
     return {
+      myGrade: 0, // 我的积分
       title: "积分商城",              // 标题
       backs: null, // 后退按钮组
       loading: true,
@@ -95,6 +124,22 @@ export default {
   },
   //方法表示一个具体的操作，主要书写业务逻辑；
   methods: {
+      /**
+    * 跳转到兑换记录详情页
+    * @param {Object} item [数据对象]
+    */
+    toExchangeRecord () {
+       // 校验登录
+        if (this.$parent.checkLogin()) {
+            this.$router.push({
+            path: '/pointsExchangeRecords',
+            query: {
+              uid: this.getStore("uid"),
+              type: 3 // 1亲子嘉年华 2 康疫健步 3 积分商城 4 脐橙 7 健康商城
+            }
+          })
+        }
+    },
     /**
     * 上拉加载
     */
@@ -198,7 +243,75 @@ export default {
         }
       }
     },
+    /**
+       * 跳转赚取积分页面
+       * @param {Object} item [数据对象]
+       */
+    jumpClientIntegralList () {
+      // 判断APP内
+      if (this.isCNLive.value) {
+        // 校验登录
+        if (this.$parent.checkLogin()) {
+          // （判断app内是否有该方法）
+          if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.jumpClientIntegralList) {
+            // 跳转到原生的任务列表
+            window.webkit.messageHandlers.jumpClientIntegralList.postMessage({ body: {} });
+          } else if (window.obj && window.obj.jumpClientIntegralList) {
+            // 跳转到原生的任务列表
+            window.obj.jumpClientIntegralList();
+          }
+        }
+      } else {
+        this.$parent.callApp();
+      }
+    },
+      // 积分商场首页
+    /**
+     * 获取积分商场首页信息
+     * * @param {string} uid [用户id]
+     */
+    integralMallIndex () {
+
+      // 加载中提示
+      Indicator.open('加载中...');
+
+      // 请求接口
+      this.http("/Api/" + (this.getApiVersion().LuckDraw) + "/integralNewIndex", {
+        uid: this.getStore("uid"),
+        goods_id:this.$route.query.user_selected_goods_id || 0 // 记录从优选库那个商品点击进入进来的
+      }, this.integralMallIndexCallback, {
+          method: "POST"
+        });
+    },
+
+    /**
+     * 获取积分商场首页信息
+     * @param {object} res [服务器返回数据]
+     * @param {object} ext [扩展参数]
+     */
+    integralMallIndexCallback (res, ext) {
+
+      // 加载完成
+      Indicator.close();
+
+      // 返回处理
+      if (res.code == 200) {
+        // 解构数据
+        let { data: datas } = res;
+        this.info = datas
+        /* 积分商场首页信息 开始 */
+        /*用户信息 */
+        this.$set(this, "myGrade", datas.grade);
+      } else if (res.code == 400) {
+
+        // 获取积分商场首页信息失败
+        Toast(res.message || "获取积分商场首页信息失败");
+      } else {
+        // 获取积分商场首页信息失败
+        Toast(res.message);
+      }
+    },
     /**
     * 后退
     */
@@ -231,7 +344,7 @@ export default {
   },
   //请求数据
   created () {
-    // 抽奖记录
+    // 加载商品列表
     this.getIntegralNewGoodsList(this.page);
     // 判断是否在App内
@@ -255,7 +368,8 @@ export default {
       /*设置标题 */
       this.$set(this.backs, 'title', "积分商城");
     }
-
+     // 获取积分商城商品信息接口
+    this.integralMallIndex();
   },
   mounted () {
     // 如果是App外，设置唤起App和微信内分享参数