授权后绑定手机号

pages/bind-phone/index.js

@@ -1,20 +1,101 @@
 import {
   imgServerUrl
 } from '../../config/config.js'
+import $wuxCountDown from '../../utils/coutdown.js'
+import {
+  sendPhoneCode,
+  saveMinaPhone
+} from '../../services/index.js'
+import {
+  showToast
+} from '../../utils/tips.js'
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-    imgServerUrl: imgServerUrl
+    imgServerUrl: imgServerUrl,
+    iphone: '',
+    yzm: "",
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad: function (options) {
+  onLoad: function(options) {
+
+  },
+
+  // 手机号输入
+  bindPhoneInput(e) {
+    this.setData({
+      iphone: e.detail.value
+    })
+  },
+  // 验证码号输入
+  bindYzmInput(e) {
+    this.setData({
+      yzm: e.detail.value
+    })
+  },
+
+  // 验证码发送
+  sendCode(e) {
+    if (this.data.iphone.length != 11) {
+      showToast('请输入11位手机号码！')
+      return
+    }
+    if (this.data.djs && this.data.djs != '获取验证码') {
+      return false;
+    }
+    sendPhoneCode({
+      phone: this.data.iphone
+    }).then(data => {
+
+    })
+    this.vcode()
+  },
+  //倒计时
+  vcode() {
+    if (this.djs && this.djs.interval) return !1
+    this.djs = new $wuxCountDown({
+      date: +(new Date) + 60000,
+      onEnd() {
+        this.setData({
+          djs: '获取验证码',
+        })
+      },
+      render(date) {
+        const sec = this.leadingZeros(date.sec, 2) + ' 秒 '
+        date.sec !== 0 && this.setData({
+          djs: '剩余' + sec + '',
+        })
+      },
+    })
+  },
+  //绑定手机号
+  phone_login() {
+    if (this.data.phone.length != 11) {
+      return false;
+    }
+    if (this.data.ymz.length != 6) {
+      return false;
+    }
+    var openId = wx.getStorageSync('openId');
+    var sessionKey = wx.getStorageSync('sessionKey');
+    var unionId = wx.getStorageSync('unionId');
+    let paramsObj = {
+      phone: this.data.phone,
+      code: this.data.ymz,
+      openId: openId,
+      unionId: unionId,
+      sessionKey: sessionKey
+    }
+    Object.assign(paramsObj);
+    saveMinaPhone(paramsObj).then(data => {
 
+    })
   },
 
 })

pages/bind-phone/index.json

@@ -1,3 +1,4 @@
 {
-  "usingComponents": {}
+  "usingComponents": {},
+  "navigationBarTitleText": "登录"
 }

pages/bind-phone/index.wxml

@@ -1,11 +1,11 @@
+<!-- 手机号 -->
 <view class='inputphone'>
-  <input class='add' value="{{ iphone }}" type="number" placeholder="请输入手机号码" maxlength='11' bindchange="bindPhoneInput" />
+  <input class='add' value="{{ iphone }}" type="number" placeholder="请输入手机号码" placeholder-style="color:rgba(187, 187, 187, 1)" maxlength='11' bindinput="bindPhoneInput" />
 </view>
-
-
+<!-- 验证码 -->
 <view class='inputyzm'>
-  <input class='add' value="{{ yzm }}" type="number" placeholder="请输入短信验证码" maxlength='6' bindchange="bindYzmInput" />
-  <view class='getyzm'>获取短信验证码</view>
+  <input class='add' value="{{ yzm }}" type="number" placeholder="请输入短信验证码" placeholder-style="color:rgba(187, 187, 187, 1)" maxlength='6' bindinput="bindYzmInput" disabled='{{iphone.length!=11}}' />
+  <view class="{{ yzm.length ==6? 'getyzm1':'getyzm'}}" bindtap='sendCode'>{{ djs || '获取验证码'}}</view>
 </view>
 
 <view class='tips'>
@@ -14,8 +14,6 @@
   <text class='tipclick'>》</text>
 </view>
 
-<view class='login'>
-  <view class='logintext'>登录</view>
-</view>
-
-<view class='notlogin'>暂不登录</view>
+<view class="{{ yzm.length ==6? 'login1':'login'}}">
+  <view class='logintext' bindtap='phone_login'>登录</view>
+</view>

pages/bind-phone/index.wxss

@@ -12,7 +12,7 @@
   font-size: 32rpx;
   font-family: SourceHanSansCN-Regular;
   font-weight: 400;
-  color: rgba(187, 187, 187, 1);
+  color: rgba(51, 51, 51, 1);
 }
 
 .inputyzm {
@@ -33,6 +33,14 @@
   margin-right: 12rpx;
 }
 
+.getyzm1 {
+  font-size: 28rpx;
+  font-family: SourceHanSansCN-Medium;
+  font-weight: 500;
+  color: rgba(36, 98, 186, 1);
+  margin-right: 12rpx;
+}
+
 .tips {
   margin-top: 47rpx;
   margin-left: 30rpx;
@@ -67,6 +75,18 @@
   margin-right: 30rpx;
 }
 
+.login1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 88rpx;
+  background: linear-gradient(90deg, rgba(50, 122, 225, 1), rgba(90, 191, 225, 1));
+  border-radius: 44rpx;
+  margin-top: 94rpx;
+  margin-left: 30rpx;
+  margin-right: 30rpx;
+}
+
 .logintext {
   font-size: 34rpx;
   font-family: SourceHanSansCN-Medium;
@@ -74,12 +94,12 @@
   color: rgba(255, 255, 255, 1);
 }
 
-.notlogin{
+.notlogin {
   display: flex;
- justify-content: center;
-font-size:28rpx;
-font-family:SourceHanSansCN-Medium;
-font-weight:500;
-color:rgba(204,204,204,1);
-margin-top: 70rpx;
+  justify-content: center;
+  font-size: 28rpx;
+  font-family: SourceHanSansCN-Medium;
+  font-weight: 500;
+  color: rgba(204, 204, 204, 1);
+  margin-top: 70rpx;
 }

services/wx.js

@@ -43,10 +43,21 @@ function checkPhone(params){
   })
 }
 
+//小程序绑定手机号
+function saveMinaPhone(params) {
+  return http({
+    url: url.saveMinaPhone,
+    method: "POST",
+    header: {},
+    data: params
+  })
+}
+
 
 module.exports = {
   decodePhone,
   wxLogin,
   saveLogin,
-  checkPhone
+  checkPhone,
+  saveMinaPhone
 }

utils/http.js

@@ -39,8 +39,11 @@ const http = (params) => {
               url: '/pages/auth/auth',
             })
           } else if (errorCode == 1014) {
+            wx.setStorageSync('openId', res.data.data.openId);
+            wx.setStorageSync('sessionKey', res.data.data.sessionKey);
+            wx.setStorageSync('unionId', res.data.data.unionId);
             //前往绑定手机号
-            wx.navigateTo({
+            wx.redirectTo({
               url: '/pages/bind-phone/index',
             })
           } else if (errorCode == 1005) {