积分商城详情页改版

zhiyangdu
1 parent fe444f8b
Showing 6 changed files with 307 additions and 46 deletions
src/main.js
src/pages/goodDetails/goodDetails.less
src/pages/goodDetails/goodDetails.vue
static/img/close_grey.png
static/img/plus.png
static/img/reduce.png
@@ -17,7 +17,8 @@ import {
     ImagePreview,
     Tab,
     Tabs,
-    CountDown
+    CountDown,
+    Stepper
 } from "vant";
 import App from "./App";
 import IdCard from "./common/IdCard";
@@ -37,6 +38,7 @@ Vue.use(VueClipboard);
 Vue.use(Tab);
 Vue.use(Tabs);
 Vue.use(CountDown);
+Vue.use(Stepper);
 Vue.use(Lazyload, {
     preload: 90,
     loading: "static/img/x.jpg",
@@ -377,7 +379,6 @@ Vue.prototype.http = function(path, data, callback, ext) {
                 }
             },
             err => {
-
                 /* 加载错误处理 开始 */
  
                 Indicator.close();
@@ -390,7 +391,6 @@ Vue.prototype.http = function(path, data, callback, ext) {
                 }
  
                 /* 加载错误处理 结束 */
-
             }
         );
     }
@@ -434,7 +434,6 @@ Vue.prototype.http = function(path, data, callback, ext) {
                 }
             },
             err => {
-
                 /* 加载错误处理 开始 */
  
                 Indicator.close();
@@ -447,7 +446,6 @@ Vue.prototype.http = function(path, data, callback, ext) {
                 }
  
                 /* 加载错误处理 结束 */
-
             }
         );
     }
@@ -29,6 +29,7 @@
   }
   .main-box{
     .title{
+      width: 414px;
       font-size: 34px;
       font-weight: 500;
       color: #333333;
@@ -48,6 +49,18 @@
       display: flex;
       align-items: center;
       justify-content: center;
+       // 积分 + 现金标示
+       .goods_tip{
+        padding: 3px 8px;
+        background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
+        border-radius: 7px;
+        height: 30px;
+        font-size: 22px;
+        font-weight: 400;
+        color: #945A08;
+        line-height: 30px;
+        margin-right: 10px;
+      }
       .price{
         height: 40px;
         font-size: 28px;
@@ -142,8 +155,17 @@
     display:flex;
     justify-content: center;
     align-items: center;
+    .desc{
+      height: 130px;
+      font-size: 30px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 130px;
+      margin: 0 30px;     
+    }
     .btn{
-      width: 690px;
+      flex: 1;
+      margin: 20px 30px;
       height: 90px;
       line-height: 90px;
       background: #F5A623;
@@ -155,4 +177,136 @@
       color: #FFFFFF;
     }
   }
+  /*底部弹窗**/
+  .popup_box{
+    overflow-y: initial;
+    .popup_main{
+      height: 834px;
+      background: #FFFFFF;
+      padding: 30px 50px 37px 50px;
+      .goods_box{
+        // display: flex;
+        // justify-content: flex-end;
+        position: relative;
+        padding-bottom: 37px;
+        border-bottom: solid 1px #E4E4E4;
+        .item_pic_box{
+          position: absolute;
+          top: -70px;
+          left: 0;
+          width: 220px;
+          height: 220px;
+          background: #FFFFFF;
+          border-radius: 10px;
+          .item_pic{
+            display: block;
+            width: 190px;
+            height: 190px;
+            margin: 15px auto;
+          }
+        }
+        .right{
+          margin-left:260px;
+          .title{
+            height: 46px;
+            display: flex;
+            justify-content: space-between;
+            .title_t{
+              width: 354px;
+              font-size: 30px;
+              font-weight: 500;
+              color: #333333;
+              line-height: 42px;
+              display: -webkit-box;
+              -webkit-line-clamp: 1;
+              /*! autoprefixer: off */
+              -webkit-box-orient: vertical;
+              /*! autoprefixer: on */
+              text-overflow: ellipsis;
+              overflow: hidden;
+            }
+            .close{
+              display: block;
+              width:46px;
+              height:46px;
+            }
+          }
+          .pirce{
+            width: 304px;
+            height: 50px;
+            font-size: 36px;
+            font-weight: 500;
+            color: #FC1541;
+            line-height: 50px;
+            text-align: left;
+            margin-top:42px;
+          }
+        }
+      }
+      .num_box{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding:70px 0;
+        border-bottom: solid 1px #E4E4E4;
+        .num_tip{
+          width: 128px;
+          height: 40px;
+          font-size: 28px;
+          font-weight: 500;
+          color: #707070;
+          line-height: 40px;
+        }
+        .right{
+          display: flex;
+          .num{
+            width: 30px;
+            height: 48px;
+            font-size: 34px;
+            font-weight: 400;
+            color: #565656;
+            line-height: 48px;
+            text-align: center;
+            margin: 0 16px;
+          }
+          img{
+            display: block;
+            width: 54px;
+            height: 54px;
+          }
+        }
+      }
+      .line_box{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding:30px 0;
+        border-bottom: solid 1px #E4E4E4;
+        height: 40px;
+        font-size: 28px;
+        line-height: 40px;
+        .left{
+          font-weight: 500;
+          color: #707070;
+        }
+        .right{
+          font-weight: 400;
+          color: #FC1541;
+        }
+      }
+      .btn{
+        width: 546px;
+        height: 86px;
+        line-height:86px;
+        background: #F5A623;
+        border-radius: 100px;
+        text-align: center;
+        font-size: 34px;
+        font-weight: 500;
+        color: #fff;
+        margin: 275px auto 0 auto;
+        letter-spacing: 20px;
+      }
+    }
+  }
 }
 \ No newline at end of file
@@ -41,12 +41,17 @@
             <!-- 标题 -->
             <div v-if="goodsInfo && goodsInfo.title" class="title">
              {{goodsInfo.title}}
-            </div>
+            </div> 
             <!-- 积分 -->
             <div class="title-t">
-              <span v-if="goodsInfo && goodsInfo.prices" class="price">¥{{goodsInfo.prices}}</span>
-              <span v-if="goodsInfo && goodsInfo.num" class="integral">{{goodsInfo.num}}</span>
-              <span class="integral-in">积分</span>
+              <div class="goods_tip">
+                积分+现金
+              </div>
+              <div>
+                <span v-if="goodsInfo && goodsInfo.prices" class="price">¥{{goodsInfo.prices}}</span>
+                <span v-if="goodsInfo && goodsInfo.num" class="integral">{{goodsInfo.num}}</span>
+                <span class="integral-in">积分</span>
+              </div>
             </div>
             <!-- 商品信息 -->
             <div class="goods-info">
@@ -92,18 +97,65 @@
               <!-- 商品样式 7 列表 -->
               <column-list-box class="column-list-box" v-if="goodsInfo && goodsInfo.list && goodsInfo.list.length" @jump="toDetail" 
                   :lists="goodsInfo"
-                  com="7">
+                  com="7"
+                  goodType="1">
               </column-list-box>
             </div>
         </div>
-        <!-- 页脚 -->
+        <!-- 有积分页脚显示 -->
         <div class="footer">
           <div class="btn" @click="exchange">
             立即兑换
           </div>
         </div>
+         <!-- 积分不足页脚显示 -->
+        <!-- <div class="footer">
+          <div class="desc">还差1000积分</div>
+          <div class="btn" @click="jumpClientIntegralList">
+              获取积分
+          </div>
+        </div> -->
         <!-- 地址信息组件 -->
-        <app-address-toast ref="itemsInfo" @toUpdate="toLinkPointsMall" v-show="pointsToast_control"></app-address-toast>
+        <!-- <app-address-toast ref="itemsInfo" @toUpdate="toLinkPointsMall" v-show="pointsToast_control"></app-address-toast> -->
+        <!-- 底部弹出层 -->
+        <van-popup class="popup_box" v-model="show" position="bottom">
+            <div class="popup_main">
+              <!-- 商品信息 -->
+              <div class="goods_box">
+                <div class="item_pic_box">
+                  <img class="item_pic" src="static/img/1.png" alt="" />
+                </div>
+                <div class="right">
+                  <!-- 标题 -->
+                  <div class="title">
+                    <div class="title_t">山东沂蒙 优质大蒜山东</div> 
+                    <img @click="show=false" class="close" src="static/img/close_grey.png" alt="" />
+                  </div>
+                  <!-- 价格 -->
+                  <div class="pirce">
+                    500积分+9.9元
+                  </div>
+                </div>
+              </div>
+              <!--购买数量-->
+              <div class="num_box">
+                <div class="num_tip">购买数量</div>
+                <div class="right">
+                  <van-stepper theme="round" input-width="40px" input-size="32px" button-size="32px" v-model="stepperValue" min="1" max="8" integer />
+                  <!-- <img src="static/img/reduce.png" alt="" />
+                  <div class="num">1</div>
+                  <img src="static/img/plus.png" alt="" /> -->
+                </div>
+              </div>
+              <!-- 支付方式 -->
+              <div class="line_box">
+                <div class="left">支付方式</div>
+                <div class="right">积分加现金</div>
+              </div>
+              <!-- 按钮 -->
+              <div @click="jumpOrderDes" class="btn">确定</div>
+            </div>
+        </van-popup>
 </div>
 </template>
  
@@ -122,8 +174,10 @@ export default {
       banner: null,
       goodsInfo: null,
       backs: null, // 后退按钮组
-      pointsToast_control: false,
-      isExchange: false // 是否已经兑换
+      // pointsToast_control: false,
+      isExchange: false, // 是否已经兑换
+      show: false, // 是否显示底部支付模块
+      stepperValue: 2 // 进步器
     }
   },
   //部件
@@ -145,6 +199,24 @@ export default {
   },
   //方法表示一个具体的操作，主要书写业务逻辑；
   methods: {
+    // 显示底部模块
+    opintsPopup () {
+      this.show = true;
+    },
+    // 跳转到订单详情
+    jumpOrderDes (item) {
+      // 判断APP内
+      if (this.isCNLive.value) {
+        // （判断app内是否有该方法）
+        if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.jumpOrderDes) {
+          // 跳转到原生的任务列表
+          window.webkit.messageHandlers.jumpOrderDes.postMessage({ body: { orderId: item.id, type: 1 } })
+        } else if (window.obj && window.obj.jumpOrderDes) {
+          // 跳转到原生的任务列表
+          window.obj.jumpOrderDes(JSON.stringify({ orderId: item.id, type: 1 }));
+        }
+      }
+    },
     // 跳转网家家购买音频协议
     toLink () {
       if (this.isCNLive.value) {
@@ -163,16 +235,28 @@ export default {
         this.$parent.callApp();
       }
     },
-    toLinkPointsMall () {
-      // 调用back返回上一页
-      // this.back();
-      // this.$router.push({
-      //   path: '/pointsMall',
-      //   query: {
-      //     uid: this.getStore("uid")
-      //   }
-      // })
-    },
+    // toLinkPointsMall () {
+    //   // 显示查看地址弹框
+    //   let options = {
+    //     message: "兑换成功",
+    //     messageAlign: "center",
+    //     confirmButtonText: "我知道了",
+    //     confirmButtonCallback: ""
+    //     // confirmButtonCallback: this.addAddressCallback,
+    //     // params: { shopType: datas.shop_type, id: datas.id }
+    //   };
+    //   this.$set(this.$parent, "showOptions", options);
+    //   // 显示通用浮层
+    //   this.$parent.$refs.showModal.showLayer();
+    //   // 调用back返回上一页
+    //   // this.back();
+    //   // this.$router.push({
+    //   //   path: '/pointsMall',
+    //   //   query: {
+    //   //     uid: this.getStore("uid")
+    //   //   }
+    //   // })
+    // },
     /**
      * 后退
      */
@@ -217,8 +301,8 @@ export default {
     // 兑换
     exchange () {
       if (this.isCNLive.value) {
-         // 校验登录
-        if (this.$parent.checkLogin()){
+        // 校验登录
+        if (this.$parent.checkLogin()) {
           // 提示用积分兑换兑换
           let options = {
             title: "",
@@ -239,10 +323,19 @@ export default {
     },
     // 确定兑换回调
     addIntegralOrderconfirm () {
-      // isExchange为false才可兑换防止连续点击
-      if (!this.isExchange) {
-        // 兑换
-        this.addIntegralOrder();
+      /**
+       * 判断shop_type是否等于1等于1为实物弹出底部商品数量选择,其他商品直接走兑换接口
+       */
+      if (this.goodsInfo.shop_type == 1) {
+        // 实物弹出底部数量填写弹窗
+        this.opintsPopup();
+        //  this.addAddressCallback()
+      } else {
+        // isExchange为false才可兑换防止连续点击
+        if (!this.isExchange) {
+          // 兑换
+          this.addIntegralOrder();
+        }
       }
     },
     /**
@@ -255,7 +348,7 @@ export default {
       }
     },
     /**
-   * 积分商品详情页页面接口
+   * 积分兑换接口
    */
     addIntegralOrder () {
       // 加载中提示
@@ -271,7 +364,7 @@ export default {
     },
  
     /**
-     * 积分商品详情页页面接口回调
+     * 积分兑换接口回调
      * @param {Object} res [服务器返回数据]
      * @param {Object} ext [扩展参数]
      */
@@ -293,9 +386,7 @@ export default {
         }, 1500);
         // 提示语判断
         let tipMessage;
-        if (datas.shop_type == 1) {
-          tipMessage = "兑换成功"
-        } else if (datas.shop_type == 2) {
+        if (datas.shop_type == 2) {
           tipMessage = "红包已存入您的账户，可前往“我的”—“我的卡券查看”"
         } else if (datas.shop_type == 3) {
           tipMessage = "付费音频已存入您的账户，可前往“我的”—“我的付费内容”—“已购内容收听”"
@@ -305,8 +396,9 @@ export default {
           message: tipMessage,
           messageAlign: "center",
           confirmButtonText: "我知道了",
-          confirmButtonCallback: this.addAddressCallback,
-          params: { shopType: datas.shop_type, id: datas.id }
+          confirmButtonCallback: ""
+          // confirmButtonCallback: this.addAddressCallback,
+          // params: { shopType: datas.shop_type, id: datas.id }
         };
         this.$set(this.$parent, "showOptions", options);
         // 显示通用浮层
@@ -332,14 +424,11 @@ export default {
       }
     },
     // 填写地址
-    addAddressCallback (params) {
-      // 如果是实物弹起填写地址弹窗
-      if (params.shopType == 1) {
-        this.pointsToast_control = true;
-        // 礼品兑换弹框派发
-        this.$refs.itemsInfo.getItemInfo(this.goodsInfo, params.id)
-      }
-    },
+    // addAddressCallback () {
+    //   this.pointsToast_control = true;
+    //   // 礼品兑换弹框派发
+    //   this.$refs.itemsInfo.getItemInfo(this.goodsInfo, params.id)
+    // },
     /**
     * 跳转赚取积分页面
     * @param {Object} item [数据对象]
@@ -461,9 +550,14 @@ export default {
   },
   mounted () {
     var that = this;
+    // 原生选中地址回调
     window["appSelectAddressCallback"] = function (result) {
       that.appSelectAddressCallback(result);
     };
+    // 原生支付完成回调隐藏底部弹窗
+    // window["appPaymentCallback"] = function (result) {
+    //   that.show = false;
+    // };
     // 如果是App外，设置唤起App和微信内分享参数
     // if (!this.isCNLive.value) {
     //   // 设置积分首页唤起app参数
@@ -509,5 +603,20 @@ export default {
   display: block;
   width: 100%;
 }
+/* 更改有赞的样式 */
+.van-stepper__input {
+  font-size: 34px;
+  color: #565656;
+}
+.van-stepper__minus,
+.van-stepper__plus {
+  color: #fc1541;
+  background-color: #fff;
+  border: 1px solid #fc1541;
+  /* width: 54px;
+  height: 54px;
+  background: url('../../../static/img/reduce.png') no-repeat center top;
+  background-size: 100%; */
+}
 </style>