开卡

src/app.json

 {
   "pages": [
+    "pages/welcome/welcome",
     "pages/mySpend/mySpend",
     "pages/memberOfOwn/memberOfOwn",
     "pages/userCenter/userCenter",
-    "pages/welcome/welcome",
     "pages/memberRules/memberRules",
     "pages/integralWater/integralWater",
     "pages/deliveryService/deliveryService",
@@ -18,5 +18,10 @@
     "navigationBarBackgroundColor": "#fff",
     "navigationBarTitleText": "WeChat",
     "navigationBarTextStyle": "black"
-  }
+  },
+  "navigateToMiniProgramAppIdList": [
+      "wxeb490c6f9b154ef9",
+      "wx8e84d264b42cae80",
+      "wx3661dec4a09553f1"
+    ]
 }
\ No newline at end of file

src/component/authorization-modal/authorization-modal.js

+const app = getApp()
+const wxService = require('../../utils/wxService')
+const utils = require('../../utils/util')
+const envInfo = require('../../config/index').envInfo
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    isAuthorization: Boolean
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    couponNum: '2',
+    userInfo: {},
+    hasUserInfo: false,
+    env: envInfo.env,
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    //再想想
+    close() {
+      this.setData({
+        isAuthorization: false
+      })
+    },
+    //立即兑换
+    query() {
+
+    },
+    _getUserInfo(res = {}) {
+      this.setData({
+        isAuthorization: false
+      })
+      const userInfo = res.detail || {}
+      if (res.detail.userInfo) {
+        console.log('点击了同意')
+        this.setUserInfo()
+        utils.getUserInfoByBtn(userInfo).then(({ token = '', data = {} }) => {
+          wx.setStorageSync('_accreditUserInfo', userInfo)
+          wx.hideNavigationBarLoading()
+          if (token) {
+            app.globalData.userNo = token.split('###')[0]
+            wx.setStorageSync('token', token)
+          } else {
+            wx.setStorageSync('token', '')
+          }
+          if (data && data.isMember === '1') {
+            app.globalData.openCard = true
+            app.globalData.userInfo = wx.getStorageSync('_userInfo')
+            cEvent.notify('openCardSuccess', data)
+          }
+          wx.setStorageSync('_baseUserInfo', data)
+
+          this.setUserInfo()
+        }).catch(err => {
+          if (err && err.rspCode === -1) {
+            wx.showToast({
+              title: `会员系统异常请稍后重试!`,
+              icon: 'none'
+            })
+          }
+        })
+      } else {
+        console.log('点击了取消')
+        this.setData({
+          isAuthorization: false
+        })
+      }
+
+    },
+    setUserInfo: function (e) {
+      console.log('开卡')
+      // wxService.router(`/pages/userCenter/userCenter`)
+
+      if (!app.globalData.openCard) { // 没有开卡并且需要开卡
+        wxService.openCard()
+        return false
+      }
+      const urls = getCurrentPages()
+      setTimeout(() => {
+        const item = urls[0].options
+        if (item.route) {
+          try {
+            const options = JSON.parse(item.options)
+            wxService.router(`/${item.route}`).search(options).replace()
+          } catch (e) {
+            wx.switchTab({
+              url: '/pages/userCenter/userCenter'
+            })
+          }
+        } else {
+          wx.switchTab({
+            url: '/pages/userCenter/userCenter'
+          })
+        }
+      }, 200)
+
+    }
+  }
+})

src/component/authorization-modal/authorization-modal.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

src/component/authorization-modal/authorization-modal.wxml

+<view class="modal" wx:if='{{isAuthorization}}'>
+    <view class="modal-mask"></view>
+    <view class="modal-container">
+      <view class='auth-avatar'>
+        <image src='/assets/imgs/auth-avatar.png'></image>
+      </view>
+      <view class='auth-shop'>
+        广东7-Eleven申请获取授权，用于会员服务
+      </view>
+      <button type='primary'  bindgetuserinfo="_getUserInfo" open-type='getUserInfo' class='agree' >同意</button>
+      <view class='rule-wrap'>
+        
+        <view class='agree-rule'>我已阅读并同意 <text class='rule-text'>《会员规则》</text></view>
+      </view>
+      <view class='close' bindtap='close'>
+        <image src='/assets/imgs/close.png'></image>
+      </view>
+    </view>
+    
+  </view>

src/component/authorization-modal/authorization-modal.wxss

+/* component/authorization-modal/authorization-modal.wxss */
+.modal {
+  position: absolute;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  top: 0;
+  background-color: transparent;
+}
+
+.modal-mask {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  opacity: 1;
+  z-index: 3;
+
+}
+
+.modal-container {
+  position: fixed;
+  left: 96rpx;
+  top: 262rpx;
+  background-color: #fff;
+  width: 570rpx;
+  height: 712rpx;
+  z-index: 4;
+  border-radius: 20rpx;
+}
+.auth-avatar{
+  width: 126rpx;
+  height: 126rpx;
+  margin: 120rpx auto 92rpx;
+}
+.auth-avatar image{
+  width: 126rpx;
+  height: 126rpx;
+}
+.auth-shop{
+  width: 400rpx;
+  margin: 0 auto;
+  font-size: 30rpx;
+  color: #333333;
+}
+.agree{
+  width: 416rpx;
+  height: 88rpx;
+  line-height: 88rpx;
+  font-size: 32rpx;
+  background-color: #05c35b !important;
+  margin: 50rpx auto 32rpx;
+}
+.agree-rule{
+  font-size: 22rpx;
+  color: #666666;
+}
+.rule-text{
+  color: #05c35b;
+}
+.rule-wrap{
+  margin-left: 76rpx;
+}
+.close image{
+  width: 58rpx;
+  height: 58rpx;
+  position: absolute;
+  bottom: -120rpx;
+  left: 265rpx;
+}
+

src/component/exchange-coupon-modal/exchange-coupon-modal.js

+// component/exchange-coupon-modal/exchange-coupon-modal.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    isExchange:Boolean
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    couponNum:'2'
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    minusNum(){
+      let number = this.data.couponNum
+      if (this.data.couponNum > 1) {
+        number--
+        this.setData({
+          couponNum: number
+        })
+      } else {
+        wx.showToast({
+          title: '数量不能为0',
+          icon: 'none'
+        })
+      }
+    },
+    addNum(){
+      let number = this.data.couponNum
+      if (this.data.couponNum < 500) {
+        number++
+        this.setData({
+          couponNum: number
+        })
+      } else {
+        wx.showToast({
+          title: '数量不能超过库存',
+          icon: 'none'
+        })
+      }
+    },
+    //再想想
+    cancel(){
+      this.setData({
+        isExchange: false
+      })
+    },
+    //立即兑换
+    query(){
+
+    }
+  }
+})

src/component/exchange-coupon-modal/exchange-coupon-modal.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

src/component/exchange-coupon-modal/exchange-coupon-modal.wxml

+<!--component/exchange-coupon-modal/exchange-coupon-modal.wxml-->
+ <view class="modal" wx:if='{{isExchange}}'>
+    <view class="modal-mask"></view>
+    <view class="modal-container">
+      <view class='modal-header'>
+        <view class="modal-title">确认要兑换该优惠券吗？</view>
+      </view>
+      <view class="modal-content">
+        <view class='modal-desc'>
+          <text>500积分</text>
+          <view class='coupon-number'> 
+            <view class="redus"  catchtap="minusNum">-</view>
+            <input type="number"  catchtap bindblur="blurNum" bindinput="inputNum" value="{{couponNum}}"></input>
+            <view class="add"  catchtap="addNum">+</view>
+          </view>
+        </view>
+        <view>
+          <button type='default' class='cancel' bindtap='cancel'>再想想</button>
+          <button type='primary' class='query' bindtap='query'>立即兑换</button>
+        </view>
+      </view>
+    </view>
+  </view>

src/component/exchange-coupon-modal/exchange-coupon-modal.wxss

+.modal {
+  position: absolute;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  top: 0;
+  background-color: transparent;
+}
+
+.modal-mask {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  opacity: 1;
+  z-index: 3;
+
+}
+
+.modal-container {
+  position: fixed;
+  left: 96rpx;
+  top: 30%;
+  background-color: #fff;
+  width: 558rpx;
+  height: 456rpx;
+  z-index: 4;
+  border-radius: 20rpx;
+}
+
+.modal-header{
+  padding: 38rpx 56rpx;
+}
+.modal-title{
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+.modal-close {
+  position: absolute;
+  top: 40rpx;
+  right: 40rpx;
+}
+
+.modal-close>image {
+  width: 32rpx;
+  height: 32rpx;
+}
+
+.modal-content {
+  margin: 0 auto;
+  width: 432rpx;
+}
+.modal-desc{
+  font-size: 28rpx;
+  margin-top: 38rpx;
+  margin-bottom: 100rpx;
+}
+.cancel,.query{
+  display: inline-block;
+  width: 200rpx;
+  font-size: 28rpx;
+  border-radius: 40rpx;
+}
+.cancel{
+  margin-right: 30rpx;
+}
+.coupon-number{
+   float: right;
+}
+.coupon-number view{
+  display: inline-block;
+}
+.coupon-number input{
+  display: inline-block;
+  vertical-align: middle;
+  width: 60rpx;
+  border: 1px solid #999999;
+  margin: 0 20rpx;
+  border-radius: 20rpx;
+  padding: 0 20rpx;
+  text-align: center;
+}
+

src/pages/integralMallDetail/integralMallDetail.js

@@ -5,7 +5,7 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    isExchange:false
   },
 
   /**
@@ -15,12 +15,6 @@ Page({
 
   },
 
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
 
   /**
    * 生命周期函数--监听页面显示
@@ -29,38 +23,10 @@ Page({
 
   },
 
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
+  //立即兑换
+  exchange(){
+    this.setData({
+      isExchange :true
+    })
   }
 })
\ No newline at end of file

src/pages/integralMallDetail/integralMallDetail.json

 {
   "navigationBarTitleText": "积分兑换详情页",
-  "usingComponents": {}
+  "usingComponents": {
+    "exchange-coupon-modal": "./../../component/exchange-coupon-modal/exchange-coupon-modal"
+  }
 }
\ No newline at end of file

src/pages/integralMallDetail/integralMallDetail.wxml

@@ -24,6 +24,8 @@
         <view class='integral-desc'>数据库更待何时规范规定时间官方价格都十分关键是大概花费</view>
       </view>
     </view>
-    <button type='primary'>立即兑换</button>
+    <button type='primary' bindtap='exchange'>立即兑换</button>
   </view>
 </view>
+<exchange-coupon-modal isExchange='{{isExchange}}'/>
+

src/pages/welcome/welcome.js

@@ -10,7 +10,8 @@ wxService.page({
     motto: '开启广东7-Eleven会员专区',
     userInfo: {},
     hasUserInfo: false,
-    env: envInfo.env
+    env: envInfo.env,
+    isAuthorization: false
   },
   //事件处理函数
   bindViewTap: function() {
@@ -48,69 +49,11 @@ wxService.page({
       })
     }
   },
-  _getUserInfo(res = {}) {
-    console.log('-------',res)
-    const userInfo = res.detail || {}
-    if (res.detail.userInfo){
-      console.log('点击了同意')
-      utils.getUserInfoByBtn(userInfo).then(({ token = '', data = {} }) => {
-        wx.setStorageSync('_accreditUserInfo', userInfo)
-        wx.hideNavigationBarLoading()
-        if (token) {
-          app.globalData.userNo = token.split('###')[0]
-          wx.setStorageSync('token', token)
-        } else {
-          wx.setStorageSync('token', '')
-        }
-        if (data && data.isMember === '1') {
-          app.globalData.openCard = true
-          app.globalData.userInfo = wx.getStorageSync('_userInfo')
-          cEvent.notify('openCardSuccess', data)
-        }
-        wx.setStorageSync('_baseUserInfo', data)
-
-        this.setUserInfo()
-      }).catch(err => {
-        if (err && err.rspCode === -1) {
-          wx.showToast({
-            title: `会员系统异常请稍后重试!`,
-            icon: 'none'
-          })
-        }
-      })
-    }else{
-      console.log('点击了取消')
-      wxService.router(`/pages/userCenter/userCenter`)
-    }
-   
-  },
-  setUserInfo: function (e) {
-    console.log('开卡')
-    wxService.router(`/pages/userCenter/userCenter`)
-
-    // if (!app.globalData.openCard) { // 没有开卡并且需要开卡
-    //   wxService.openCard()
-    //   return false
-    // }
-    // const urls = getCurrentPages()
-    // setTimeout(() => {
-    //   const item = urls[0].options
-    //   if (item.route) {
-    //     try {
-    //       const options = JSON.parse(item.options)
-    //       wxService.router(`/${item.route}`).search(options).replace()
-    //     } catch (e) {
-    //       wx.switchTab({
-    //         url: '/pages/userCenter/userCenter'
-    //       })
-    //     }
-    //   } else {
-    //     wx.switchTab({
-    //       url: '/pages/userCenter/userCenter'
-    //     })
-    //   }
-    // }, 200)
 
+  getAuth(){
+    this.setData({
+      isAuthorization : true
+    })
   }
 
 })

src/pages/welcome/welcome.json

 {
-  "usingComponents": {}
+  "usingComponents": {
+    "authorization-modal": "./../../component/authorization-modal/authorization-modal"
+  }
 }
\ No newline at end of file

src/pages/welcome/welcome.wxml

@@ -6,6 +6,7 @@
     <open-data type="userNickName" class="userinfo-nickname" lang="zh_CN"></open-data>
   </view>
   <view class="usermotto">
-    <button bindgetuserinfo="_getUserInfo" open-type='getUserInfo' class="user-motto">{{motto}}</button>
+    <button class="user-motto" bindtap='getAuth'>{{motto}}</button>
   </view>
-</view>
+</view>
\ No newline at end of file
+<authorization-modal isAuthorization='{{isAuthorization}}'/>
\ No newline at end of file

src/project.config.json

@@ -37,7 +37,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 9,
+			"current": 10,
 			"list": [
 				{
 					"id": -1,
@@ -98,6 +98,11 @@
 					"name": "积分流水",
 					"pathName": "pages/integralMallDetail/integralMallDetail",
 					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "welvcom",
+					"pathName": "pages/welcome/welcome"
 				}
 			]
 		}

src/utils/wxService.js

@@ -408,6 +408,58 @@ class WXService extends Http {
     return promise
   }
 
+  showOpenCardModal({ options, _self, reject }) {
+    if (this.showOpenCardModelLock) {
+      return false
+    }
+    this.showOpenCardModelLock = true // 避免多次弹出开卡对话窗
+    wx.showModal({
+      title: '请激活会员卡',
+      content: '为了您更好的购物体验，请您先完善会员信息',
+      showCancel: true,
+      success: res => {
+        if (res.confirm) {
+          wx.navigateToMiniProgram({
+            appId: 'wxeb490c6f9b154ef9', // 固定为此 appid，不可改动
+            extraData: options, // 包括 encrypt_card_id, outer_str, biz三个字段，须从 step3 中获得的链接中获取参数
+            success: function (data) {
+              console.log('navigateToMiniProgram success data is %o', data)
+              _self.lock = false
+            },
+            fail: function (data) {
+              console.log('navigateToMiniProgram fail data is %o', data)
+              _self.lock = false
+              reject(data)
+            }
+          })
+        } else {
+          this.router('/pages/page/page')
+        }
+      },
+      complete: () => {
+        this.showOpenCardModelLock = false
+      }
+    })
+  }
+
+  openCard() {
+    const baseUserInfo = wx.getStorageSync('_baseUserInfo')
+    return new Promise((resolve, reject) => {
+      // const app = this.getApp()
+      if (baseUserInfo && baseUserInfo.isMember === '1') {
+        resolve(baseUserInfo)
+      } else if (!baseUserInfo || baseUserInfo.isMember === '0') {
+        return this.navigateToMiniProgram({
+          biz: baseUserInfo.biz,
+          encrypt_card_id: baseUserInfo.encrypt_card_id,
+          outer_str: baseUserInfo.outer_str
+        })
+      } else {
+        reject({ state: 0 })
+      }
+    })
+  }
+
 
   getRandom (num = 1) {
     let random = Math.random()