小程序：登录

htmldev/wxMini/README.md

@@ -16,7 +16,7 @@
 - [x] 优秀合作社 partner 4
 - 农事天地 news 4
 - [x] 我的 mine 4
-- 登录 bind 4
+- [x] 登录 login 4
 - 商户端 businessHome 4
   - 产品管理 businessGoodsManage 6
     - 产品新增/编辑 businessGoodsEdit 16

htmldev/wxMini/app.json

@@ -15,7 +15,8 @@
     "pages/VR/VR",
     "pages/media/media",
     "pages/mediaDetail/mediaDetail",
-    "pages/partner/partner"
+    "pages/partner/partner",
+    "pages/login/login"
   ],
   "permission": {
     "scope.userLocation": {
@@ -54,4 +55,4 @@
       }
     ]
   }
-}
+}

htmldev/wxMini/pages/login/login.js

@@ -0,0 +1,216 @@
+const { isMobile } = require('../../utils/validate')
+const { sendCode, miniPhoneLogin, modifyUserPhone } = require('../../api/common')
+const { login, sessionStorageKey } = require('../../api/request')
+const app = getApp()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    form: {
+      cellphone: '',
+      code: ''
+    },
+    numCount: 60,
+    bindType: 1, // 绑定类型：1手机号登录 2手机号解绑后绑定新的手机号
+    booLock: false
+  },
+  timer: null,
+  wxCode: '',
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+    clearInterval(this.timer)
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+  async getWxCode() {
+    try {
+      this.wxCode = await login()
+    } catch (e) {}
+  },
+  mobileEventhandle(e) {
+    const val = e.detail.value.replace(/[^\d]$/, '').replace(/^0/, '').replace(/(\d{11}(.*))/, '$1')
+
+    this.setData({
+      'form.cellphone': val
+    })
+
+    return {
+      value: val
+    }
+  },
+  codeEventhandle(e) {
+    const val = e.detail.value.replace(/[^\d]$/, '').replace(/(\d{6}(.*))/, '$1')
+
+    this.setData({
+      'form.code': val
+    })
+
+    return {
+      value: val
+    }
+  },
+  funCutDown() {
+    let numCount = this.data.numCount
+    this.timer = setInterval(() => {
+      if (numCount === 0) {
+        clearInterval(this.timer)
+        this.setData({
+          numCount: 0
+        })
+        return
+      }
+      numCount--
+      this.setData({
+        numCount: numCount
+      })
+    }, 1000)
+  },
+  async funGetCode() {
+    const numCount = this.data.numCount
+    const { cellphone } = this.data.form
+
+    if (!isMobile(cellphone)) {
+      wx.showToast({
+        title: '请输入正确的手机号~',
+        icon: 'none'
+      })
+      return
+    }
+    if (numCount < 60 && numCount > 0) {
+      return
+    }
+    this.setData({
+      numCount: 60,
+      code: ''
+    })
+
+    this.funCutDown()
+
+    try {
+      const { status } = await sendCode({ phone: cellphone, type: 2 })
+      let title = '验证码发送成功'
+      if (status) {
+      } else {
+        title = '验证码发送失败'
+      }
+      wx.showToast({
+        title: title,
+        icon: 'none'
+      })
+    } catch (err) {}
+  },
+  async bindEvent() {
+    const { cellphone, code } = this.data.form
+
+    this.setData({
+      booLock: true
+    })
+
+    if (this.data.bindType === 1) {  // 登录、注册
+      try {
+        const { status, data } = await miniPhoneLogin({ wxCode: this.wxCode, cellphone, code })
+        if (status) {
+          try {
+            wx.setStorageSync(sessionStorageKey, data.token)
+          } catch (err) {}
+
+          await app.fetchUserData()
+
+          const pages = getCurrentPages()
+          if (pages.length > 2 && pages[pages.length - 2].route === 'pages/login/login') {
+            const route = pages[pages.length - 3]
+            wx.navigateBack({
+              delta: 2
+            })
+            route.bindCallBack && route.bindCallBack()
+          } else if (pages.length > 1) {
+            const route = pages[pages.length - 2]
+            wx.navigateBack({
+              delta: 1
+            })
+            route.bindCallBack && route.bindCallBack()
+          }
+        } else {
+          wx.showToast({
+            title: '登录出错了，请重试',
+            icon: 'none'
+          })
+          this.getWxCode()
+        }
+      } catch (err) {
+        this.getWxCode()
+      }
+    } else { // 绑定新手机号
+      try {
+        const { status, msg } = await modifyUserPhone({ cellphone, code })
+        if (status) {
+          await app.fetchUserData()
+          wx.reLaunch({
+            url: '/pages/mine/mine'
+          })
+        } else {
+          wx.showToast({
+            title: msg || '绑定手机号出错了，请重试',
+            icon: 'none'
+          })
+        }
+      } catch (err) {}
+    }
+
+    this.setData({
+      booLock: false
+    })
+  }
+})

htmldev/wxMini/pages/login/login.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

htmldev/wxMini/pages/login/login.scss

@@ -0,0 +1,146 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 108rpx;
+}
+
+.title {
+  width: 100%;
+  padding-left: 39rpx;
+  line-height: 72rpx;
+  font-size: 48rpx;
+  color: rgba(51, 51, 51, 1);
+}
+
+input {
+  height: 72rpx;
+  background-color: transparent;
+  padding: 15rpx 10rpx;
+  font-size: 28rpx;
+  color: rgba(68, 68, 68, 1);
+  border-bottom: 1rpx solid rgba(153, 153, 153, 1);
+}
+
+.placeholder {
+  color: #999999;
+  font-size: 28rpx;
+}
+
+.mobile {
+  display: block;
+  width: 672rpx;
+  margin-top: 92rpx;
+}
+
+.code-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 672rpx;
+  margin-top: 50rpx;
+
+  .ver-code {
+    width: 363rpx;
+  }
+
+  button {
+    width: 285rpx;
+    height: 72rpx;
+    border-radius: 36rpx;
+
+    &[type='default'] {
+      color: #FFF;
+      background-color: rgba(145, 179, 121, 1);
+    }
+
+    &[disabled][type='default'] {
+      color: #FFFFFF;
+      background-color: #DFDFDF;
+    }
+  }
+
+  text {
+    font-size: 28rpx;
+  }
+
+  text:nth-of-type(2) {
+    width: 72rpx;
+  }
+}
+
+.agreement-wrap {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-top: 18rpx;
+
+  .checked-wrap {
+    display: flex;
+    align-items: center;
+    height: 34rpx;
+    padding: 0 19rpx 0 50rpx;
+  }
+
+  image {
+    width: 17rpx;
+    height: 18rpx;
+    background: pink;
+  }
+
+  .text-wrap {
+    display: flex;
+    flex-flow: row wrap;
+    font-size: 0;
+  }
+
+  text {
+    line-height: 34rpx;
+    font-size: 28rpx;
+  }
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 104rpx;
+}
+
+button.login {
+  width: 504rpx;
+  height: 76rpx;
+  border-radius: 38rpx;
+  font-size: 32rpx;
+
+  &[type='primary'] {
+    color: #FFFFFF;
+    background-color: rgba(145, 179, 121, 1);
+  }
+
+  &[disabled][type=primary] {
+    color: #FFFFFF;
+    background-color: #DFDFDF;
+  }
+}
+
+button.auth {
+  width: 504rpx;
+  height: 76rpx;
+  margin-top: 48rpx;
+
+  &[type='default'] {
+    color: rgba(145, 179, 121, 1);
+    background-color: transparent;
+  }
+
+  text {
+    font-size: 28rpx;
+  }
+
+  image {
+    width: 21rpx;
+    height: 24rpx;
+    background: pink;
+  }
+}

htmldev/wxMini/pages/login/login.wxml

@@ -0,0 +1,56 @@
+<view class="wrapper">
+  <block>
+    <view class="title">欢迎登录</view>
+  </block>
+  <input class="mobile"
+         type="number"
+         placeholder="请输入手机号码"
+         maxlength="11"
+         placeholder-class="placeholder"
+         value="{{form.cellphone}}"
+         bindinput="mobileEventhandle"/>
+  <view class="code-box">
+    <input class="ver-code"
+           type="number"
+           placeholder="6位短信验证码"
+           maxlength="6"
+           placeholder-class="placeholder"
+           value="{{form.code}}"
+           bindinput="codeEventhandle"/>
+    <button
+      type="default"
+      disabled="{{!(numCount === 0 || numCount === 60) || form.cellphone.length < 11}}"
+      bind:tap="funGetCode">
+      <text>获取验证码</text>
+      <text hidden="{{numCount === 0 || numCount === 60}}">{{'(' + numCount + 's)'}}</text>
+    </button>
+  </view>
+  <view class="agreement-wrap">
+    <view class="checked-wrap">
+      <image src="" wx:if="{{true}}"></image>
+      <image src="" wx:if="{{false}}"></image>
+    </view>
+    <view class="text-wrap">
+      <text style="color:rgba(102, 102, 102, 1);">同意</text>
+      <text
+        style="color:rgba(107, 133, 89, 1);"
+        wx:for="{{'《xxAPP商家协议》'}}"
+        wx:key="index">{{item}}</text>
+    </view>
+  </view>
+  <view class="footer">
+    <button class="login"
+            hover-class="none"
+            type="primary"
+            disabled="{{!(form.cellphone.length === 11 && form.code.length === 6) || booLock}}"
+            bind:tap="bindEvent">确定
+    </button>
+
+    <button
+      class="auth"
+      type="default">
+      <text>微信登陆</text>
+      <image src=""></image>
+    </button>
+  </view>
+</view>

htmldev/wxMini/project.private.config.json

@@ -8,7 +8,7 @@
       "list": [
         {
           "name": "1111",
-          "pathName": "pages/mine/mine",
+          "pathName": "pages/login/login",
           "query": "",
           "launchMode": "default",
           "scene": null