feat(卡券):优化样式

app.json

@@ -3,7 +3,6 @@
     
     "pages/activityList/activityList",
     "pages/activityInfo/activityInfo",
-    "pages/couponReceive/couponReceive",
     "pages/myCoupons/myCoupons",
     "pages/index/index",
     "pages/receiveCoupon/receiveCoupon",

pages/activityInfo/activityInfo.wxss

@@ -88,3 +88,8 @@ Page {
   font-weight: 400;
   color: #444444;
 }
+.flex-column {
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}

pages/activityList/activityList.wxss

@@ -8,8 +8,12 @@ Page {
 
 .list {
   width: 100%;
-  padding-left: 17px;
-  padding-top: 25px;
+  /* padding:0 AUTO;
+  padding-top: 25px; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
 }
 
 .activity {
@@ -98,7 +102,7 @@ Page {
 }
 
 .bottom-left {
-  width: 208px;
+  width: 215px;
   height: 20px;
   line-height: 20px;
   font-size: 9.5px;

pages/couponReceive/couponReceive.js

@@ -1,249 +0,0 @@
-const { default: activity } = require("../../api/activity");
-const util = require('../../utils/util.js')
-const app = getApp();
-Page({
-
-  /**
-   * 页面的初始数据
-   */
-  data: {
-    activityId:'', //活动id
-    userMobile:'', //电话
-    codeId:'',//code唯一码
-    memberMobile:'',//领取人手机号
-    isEffective:false, //是否过期,默认过期
-    activityInfo:[],
-  },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad: function (options) {
-    let _self = this;
-    if(options.codeId) {
-      _self.setData({
-        codeId:options.codeId,
-     })
-     //根据codeId查出该活动是否过期
-     _self.getShareActivityCode(options.codeId);
-    } 
-  },
-  //根据code-id获取券详情信息 判断该codeId是否过期
-  async getShareActivityCode(codeId) {
-    let _self = this;
-    try {
-      let result = await activity.getShareActivityCode(codeId);
-      _self.setData({
-        // activityInfo:result.activityInfo,
-        activityId:result.activityInfo.activityId
-      })
-      _self.activityInfo(result.activityInfo.activityId);
-      let expireTime = result.expireTime;
-      //失效的时间
-      let expireTimeTime = util.getUnixTime(expireTime);
-      //获取当前的时间戳
-      var nowTime = Date.parse(new Date())/1000;
-      if(expireTimeTime-nowTime>0) {
-        _self.setData({
-          isEffective:true
-        })
-      }
-    }catch(error) {
-      _self.setData({
-        isEffective:false
-      })
-    }  
-  },
-  /**
-   * 
-   */
-  getNowCoupon() {
-    let _self = this;
-    //判断是否过期
-    if(_self.isEffective==false) {
-      wx.showToast('券码包已过期')
-      return;
-    }
-    _self.createOrder();
-  },
-  /**
-   * 创建订单
-   */
-  async createOrder() {
-    let _self = this;
-    try {
-      let order = await activity.createOrder(_self.data.activityId,_self.data.memberMobile);
-      let orderSn = order.orderSn;
-      _self.setData({
-        orderSn:orderSn
-      })
-      let codeId = _self.data.codeId;
-      try {
-        //插入 订单 和 codeId  bind-share-code
-        let res = await activity.bindShareCode(orderSn,codeId);
-      }catch(e) {
-          console.log(e)
-      }
-      if (_self.data.activityInfo.isPay == 1 && orderSn) {
-        // console.log(22222)
-        //TODO::暂时屏蔽
-        // _self.goPay();
-        app.showToast('领取成功','success',1000,function(){
-          wx.redirectTo({
-            url: '/pages/myCoupons/myCoupons?mobile='+_self.data.memberMobile,
-          })
-        })
-      } else {
-        //领取成功
-        app.showToast('领取成功','success',1000,function(){
-          wx.redirectTo({
-            url: '/pages/myCoupons/myCoupons?mobile='+_self.data.memberMobile,
-          })
-        })
-      }
-     
-      
-    }catch(e) {
-
-    }
-  
-  },
-
-  /**
-   * 获取订单参数
-   */
-  async goPay() {
-    var _self = this;
-    try {
-      let res = await activity.getOrderParams(_self.data.orderSn,_self.activityInfo.name);
-      console.log(res);
-      res = res.wxPrePayVo
-      wx.requestPayment({
-        timeStamp: res.timeStamp,
-        package: res.pack,
-        nonceStr: res.nonceStr,
-        signType: res.signType,
-        paySign: res.paySign,
-        success: function (res) {
-          //领取成功
-          app.showToast('领取成功','success',1000,function(){
-            wx.redirectTo({
-              url: '/pages/myCoupons/myCoupons?mobile='+_self.data.memberMobile,
-            })
-          })
-        },
-        fail: function (res) {
-
-        }
-      })
-    } catch (err) {
-      console.log(err)
-    }
-  },
-
-  //获取手机号
-  getPhoneNumber(e) {
-    let _self = this;
-    var encryptedData = e.detail.encryptedData;
-    console.log(encryptedData);
-    var iv = e.detail.iv;
-    if (!encryptedData || encryptedData.length == 0 || !iv || iv.length == 0) {
-      return;
-    }
-    //获取手机号
-    getApp().doDecodePhone(encryptedData, iv, function () {
-      let userMobile = activity.getMobileCache();
-      if (userMobile.length !== 0) {
-        _self.setData({
-          memberMobile: userMobile,
-        })
-        _self.createOrder();
-      }
-    
-    });
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
-  },
-
-  /**
-   * 获取活动详细信息
-   * @param {*} activityId 
-   */
-   async activityInfo(activityId){
-    let result = await activity.getActivityDetail(activityId);
-    // console.log('获取活动详细信息');
-    // console.log(result)
-    var objSwitch = getApp().globalData.typeSwitchObj
-
-      var couponTypeAndNumObj = {};
-      var couponList = result.activityCouponList;
-      for (let j = 0; j < couponList.length; j++) {
-        var couponNum = couponList[j]['num'] ? couponList[j]['num'] : 1;
-
-        var value = couponList[j]['coupon']['type'];
-        var showText = objSwitch[couponList[j]['coupon']['type']];
-        
-        var nowNume = 0;
-        if (couponTypeAndNumObj[value]) {
-          nowNume = couponTypeAndNumObj[value]['num'];
-          console.log(nowNume)
-        }
-        couponTypeAndNumObj[value] = {
-          "typeText": showText,
-          "num": couponNum + nowNume
-        }
-    
-      }
-      result.couponTypeAndNumObj = couponTypeAndNumObj
-    this.setData({
-      activityInfo:result
-    })
-  },
-})

pages/couponReceive/couponReceive.json

@@ -1,8 +0,0 @@
-{
-  "usingComponents": {},
-  "navigationBarBackgroundColor": "#fff",
-  "navigationBarTextStyle": "black",
-  "navigationBarTitleText": "活动详情",
-  "backgroundColor": "#fff",
-  "backgroundTextStyle": "light"
-}

pages/couponReceive/couponReceive.wxml

@@ -1,21 +0,0 @@
-<!-- <view class="contain flex-row"> -->
-  <view class="info flex-column">
-  <view class="top flex-row">
-    <image src="/images/logo.png" class="top-image"></image>
-  </view>
-  <view class="bottom flex-column">
-  <view class="title over-ellipsi">{{activityInfo.name}}</view>
-  <view class="coupon-info over-ellipsi">含 
-  <span wx:for="{{activityInfo.couponTypeAndNumObj}}">{{item.typeText}} ({{item.num}}) </span>  
-  </view>
-  <!-- 领取 -->
-  <view class="receive-button" bindtap="getNowCoupon" wx:if="{{memberMobile.length>0 && isEffective==true}}">立即领取</view>
-  <button class="receive-button-button" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" wx:elif="{{memberMobile.length==0 && isEffective==true}}">立即领取</button>
-  <view class="bottom-line"></view>
-  <view class="flex-row bottom-date">
-  <view>有效期:</view>
-  <view style="font-size: 10px;">{{activityInfo.beginTimestamp}} 至 {{activityInfo.endTimestamp}}</view>
-  </view>
-  </view>
-</view>
-<!-- </view> -->

pages/couponReceive/couponReceive.wxss

@@ -1,116 +0,0 @@
-Page {
-  width: 100%;
-  height: 100%;
-  background-color: #BF2637;
-  box-sizing: border-box;
-  padding-top: 102px;
-  padding-left: 26px;
-}
-.info{
-  width: 327px;
-  height: 428px;
-  /* margin-top: 102px; */
-  align-items: center;
-  /* margin-left: 26px; */
-}
-.top{
-  height: 46px;
-  width: 327px;
-  background: #EEEEEE;
-  border-radius: 5px 5px 10px 10px;
-}
-.contain{
-  width: 100%;
-  height: 100%;
-  justify-content: center!important;
-}
-
-.top-image{
-  width: 142px;
-  height: 25px;
-  margin-left: 19px;
-}
-
-.bottom{
-  width: 327px;
-  /* height: 382px; */
-  background: #FFFFFF;
-  border-radius: 10px 10px 5px 5px;
-  box-sizing: border-box;
-  padding:31px  13px;
-  align-items: center;
-}
-.title{
-  width: 300px;
-  height: 24px;
-  font-size: 24px;
-  font-weight: bold;
-  color: #444444;
-  text-align: center;
-  line-height: 24px;
-}
-.coupon-info{
-  width: 300px;
-  height: 18px;
-  font-size: 16px;
-  font-weight: 400;
-  color: #444444;
-  text-align: center;
-  line-height: 18px;
-  margin-top: 15px;
-}
-.qrcode-img{
-  width: 146px;
-  height: 146px;
-  margin-top: 28px;
-}
-.qrcode-title{
-  width: 200px;
-  height: 14px;
-  font-size: 14px;
-  font-weight: 400;
-  color: #444444;
-  line-height: 14px;
-  text-align: center;
-  margin-top: 16px;
-}
-.bottom-line{
-  border-bottom: 1px solid #ABABAB;
-  width: 300px;
-  margin-top: 24px;
-}
-.bottom-date{
-  margin-top: 24px;
-  justify-content: space-between;
-  width: 300px;
-  font-size: 14px;
-  line-height: 14px;
-  height: 14px;
-  font-weight: 400;
-  color: #444444;
-}
-.receive-button {
-  width: 200rpx!important;
-  height: 60rpx!important;
-  border-radius: 8rpx!important;
-  background-color:#BF2637!important;
-  color:#fff!important;
-  align-items: center!important;
-  text-align: center!important;
-  line-height: 60rpx!important;
-  margin-top: 20rpx!important;
-  cursor: pointer!important;
-  font-size: 25rpx!important;
-}
-.receive-button-button {
-  width: 200rpx!important;
-  height: 60rpx!important;
-  border-radius: 8rpx!important;
-  background-color:#BF2637!important;
-  color:#fff!important;
-  align-items: center!important;
-  text-align: center!important;
-  margin-top: 20rpx!important;
-  cursor: pointer!important;
-  font-size: 25rpx!important;
-}

pages/receiveCoupon/receiveCoupon.js

@@ -1,21 +1,169 @@
-// pages/receiveCoupon/receiveCoupon.js
+const { default: activity } = require("../../api/activity");
+const util = require('../../utils/util.js')
+const app = getApp();
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-
+    activityId:'', //活动id
+    userMobile:'', //电话
+    codeId:'',//code唯一码
+    memberMobile:'',//领取人手机号
+    isEffective:false, //是否过期,默认过期
+    activityInfo:[],
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
+    let _self = this;
+    if(options.codeId) {
+      _self.setData({
+        codeId:options.codeId,
+      })
+      //根据codeId查出该活动是否过期
+      _self.getShareActivityCode(options.codeId);
+    }
+  },
+  //根据code-id获取券详情信息 判断该codeId是否过期
+  async getShareActivityCode(codeId) {
+    let _self = this;
+    try {
+      let result = await activity.getShareActivityCode(codeId);
+      _self.setData({
+        // activityInfo:result.activityInfo,
+        activityId:result.activityInfo.activityId
+      })
+      _self.activityInfo(result.activityInfo.activityId);
+      let expireTime = result.expireTime;
+      //失效的时间
+      let expireTimeTime = util.getUnixTime(expireTime);
+      //获取当前的时间戳
+      var nowTime = Date.parse(new Date())/1000;
+      if(expireTimeTime-nowTime>0) {
+        _self.setData({
+          isEffective:true
+        })
+      }
+    }catch(error) {
+      _self.setData({
+        isEffective:false
+      })
+    }
+  },
+  /**
+   *
+   */
+  getNowCoupon() {
+    let _self = this;
+    //判断是否过期
+    if(_self.isEffective==false) {
+      wx.showToast('券码包已过期')
+      return;
+    }
+    _self.createOrder();
+  },
+  /**
+   * 创建订单
+   */
+  async createOrder() {
+    let _self = this;
+    try {
+      let order = await activity.createOrder(_self.data.activityId,_self.data.memberMobile);
+      let orderSn = order.orderSn;
+      _self.setData({
+        orderSn:orderSn
+      })
+      let codeId = _self.data.codeId;
+      try {
+        //插入 订单 和 codeId  bind-share-code
+        let res = await activity.bindShareCode(orderSn,codeId);
+      }catch(e) {
+        console.log(e)
+      }
+      if (_self.data.activityInfo.isPay == 1 && orderSn) {
+        // console.log(22222)
+        //TODO::暂时屏蔽
+        // _self.goPay();
+        app.showToast('领取成功','success',1000,function(){
+          wx.redirectTo({
+            url: '/pages/myCoupons/myCoupons?mobile='+_self.data.memberMobile,
+          })
+        })
+      } else {
+        //领取成功
+        app.showToast('领取成功','success',1000,function(){
+          wx.redirectTo({
+            url: '/pages/myCoupons/myCoupons?mobile='+_self.data.memberMobile,
+          })
+        })
+      }
+
+
+    }catch(e) {
+
+    }
 
   },
 
   /**
+   * 获取订单参数
+   */
+  async goPay() {
+    var _self = this;
+    try {
+      let res = await activity.getOrderParams(_self.data.orderSn,_self.activityInfo.name);
+      console.log(res);
+      res = res.wxPrePayVo
+      wx.requestPayment({
+        timeStamp: res.timeStamp,
+        package: res.pack,
+        nonceStr: res.nonceStr,
+        signType: res.signType,
+        paySign: res.paySign,
+        success: function (res) {
+          //领取成功
+          app.showToast('领取成功','success',1000,function(){
+            wx.redirectTo({
+              url: '/pages/myCoupons/myCoupons?mobile='+_self.data.memberMobile,
+            })
+          })
+        },
+        fail: function (res) {
+
+        }
+      })
+    } catch (err) {
+      console.log(err)
+    }
+  },
+
+  //获取手机号
+  getPhoneNumber(e) {
+    let _self = this;
+    var encryptedData = e.detail.encryptedData;
+    console.log(encryptedData);
+    var iv = e.detail.iv;
+    if (!encryptedData || encryptedData.length == 0 || !iv || iv.length == 0) {
+      return;
+    }
+    //获取手机号
+    getApp().doDecodePhone(encryptedData, iv, function () {
+      let userMobile = activity.getMobileCache();
+      if (userMobile.length !== 0) {
+        _self.setData({
+          memberMobile: userMobile,
+        })
+        _self.createOrder();
+      }
+
+    });
+  },
+
+  /**
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady: function () {
@@ -62,5 +210,40 @@ Page({
    */
   onShareAppMessage: function () {
 
-  }
+  },
+
+  /**
+   * 获取活动详细信息
+   * @param {*} activityId
+   */
+  async activityInfo(activityId){
+    let result = await activity.getActivityDetail(activityId);
+    // console.log('获取活动详细信息');
+    // console.log(result)
+    var objSwitch = getApp().globalData.typeSwitchObj
+
+    var couponTypeAndNumObj = {};
+    var couponList = result.activityCouponList;
+    for (let j = 0; j < couponList.length; j++) {
+      var couponNum = couponList[j]['num'] ? couponList[j]['num'] : 1;
+
+      var value = couponList[j]['coupon']['type'];
+      var showText = objSwitch[couponList[j]['coupon']['type']];
+
+      var nowNume = 0;
+      if (couponTypeAndNumObj[value]) {
+        nowNume = couponTypeAndNumObj[value]['num'];
+        console.log(nowNume)
+      }
+      couponTypeAndNumObj[value] = {
+        "typeText": showText,
+        "num": couponNum + nowNume
+      }
+
+    }
+    result.couponTypeAndNumObj = couponTypeAndNumObj
+    this.setData({
+      activityInfo:result
+    })
+  },
 })

pages/receiveCoupon/receiveCoupon.json

@@ -1,3 +1,8 @@
 {
-  "usingComponents": {}
+  "usingComponents": {},
+  "navigationBarBackgroundColor": "#fff",
+  "navigationBarTextStyle": "black",
+  "navigationBarTitleText": "活动详情",
+  "backgroundColor": "#fff",
+  "backgroundTextStyle": "light"
 }

pages/receiveCoupon/receiveCoupon.wxml

@@ -1,2 +1,21 @@
-<!--pages/receiveCoupon/receiveCoupon.wxml-->
-<text>pages/receiveCoupon/receiveCoupon.wxml</text>
+<!-- <view class="contain flex-row"> -->
+  <view class="info flex-column">
+  <view class="top flex-row">
+    <image src="/images/logo.png" class="top-image"></image>
+  </view>
+  <view class="bottom flex-column">
+  <view class="title over-ellipsi">{{activityInfo.name}}</view>
+  <view class="coupon-info over-ellipsi">含
+  <span wx:for="{{activityInfo.couponTypeAndNumObj}}">{{item.typeText}} ({{item.num}}) </span>
+  </view>
+  <!-- 领取 -->
+  <view class="receive-button" bindtap="getNowCoupon" wx:if="{{memberMobile.length>0 && isEffective==true}}">立即领取</view>
+  <button class="receive-button-button" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" wx:elif="{{memberMobile.length==0 && isEffective==true}}">立即领取</button>
+  <view class="bottom-line"></view>
+  <view class="flex-row bottom-date">
+  <view>有效期:</view>
+  <view style="font-size: 10px;">{{activityInfo.beginTimestamp}} 至 {{activityInfo.endTimestamp}}</view>
+  </view>
+  </view>
+</view>
+<!-- </view> -->

pages/receiveCoupon/receiveCoupon.wxss

@@ -1 +1,116 @@
-/* pages/receiveCoupon/receiveCoupon.wxss */
+Page {
+  width: 100%;
+  height: 100%;
+  background-color: #BF2637;
+  box-sizing: border-box;
+  padding-top: 102px;
+  padding-left: 26px;
+}
+.info{
+  width: 327px;
+  height: 428px;
+  /* margin-top: 102px; */
+  align-items: center;
+  /* margin-left: 26px; */
+}
+.top{
+  height: 46px;
+  width: 327px;
+  background: #EEEEEE;
+  border-radius: 5px 5px 10px 10px;
+}
+.contain{
+  width: 100%;
+  height: 100%;
+  justify-content: center!important;
+}
+
+.top-image{
+  width: 142px;
+  height: 25px;
+  margin-left: 19px;
+}
+
+.bottom{
+  width: 327px;
+  /* height: 382px; */
+  background: #FFFFFF;
+  border-radius: 10px 10px 5px 5px;
+  box-sizing: border-box;
+  padding:31px  13px;
+  align-items: center;
+}
+.title{
+  width: 300px;
+  height: 24px;
+  font-size: 24px;
+  font-weight: bold;
+  color: #444444;
+  text-align: center;
+  line-height: 24px;
+}
+.coupon-info{
+  width: 300px;
+  height: 18px;
+  font-size: 16px;
+  font-weight: 400;
+  color: #444444;
+  text-align: center;
+  line-height: 18px;
+  margin-top: 15px;
+}
+.qrcode-img{
+  width: 146px;
+  height: 146px;
+  margin-top: 28px;
+}
+.qrcode-title{
+  width: 200px;
+  height: 14px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #444444;
+  line-height: 14px;
+  text-align: center;
+  margin-top: 16px;
+}
+.bottom-line{
+  border-bottom: 1px solid #ABABAB;
+  width: 300px;
+  margin-top: 24px;
+}
+.bottom-date{
+  margin-top: 24px;
+  justify-content: space-between;
+  width: 300px;
+  font-size: 14px;
+  line-height: 14px;
+  height: 14px;
+  font-weight: 400;
+  color: #444444;
+}
+.receive-button {
+  width: 200rpx!important;
+  height: 60rpx!important;
+  border-radius: 8rpx!important;
+  background-color:#BF2637!important;
+  color:#fff!important;
+  align-items: center!important;
+  text-align: center!important;
+  line-height: 60rpx!important;
+  margin-top: 20rpx!important;
+  cursor: pointer!important;
+  font-size: 25rpx!important;
+}
+.receive-button-button {
+  width: 200rpx!important;
+  height: 60rpx!important;
+  border-radius: 8rpx!important;
+  background-color:#BF2637!important;
+  color:#fff!important;
+  align-items: center!important;
+  text-align: center!important;
+  margin-top: 20rpx!important;
+  cursor: pointer!important;
+  font-size: 25rpx!important;
+}