个人信息 手机号

pages/user/myInfo/register/index.js

@@ -0,0 +1,141 @@
+// pages/user/myInfo/register/index.js
+import {AuthModel} from '../../../../models/auth.js'
+import { UserModel } from '../../../../models/user.js'
+let auth = new AuthModel()
+let userModel = new UserModel()
+
+Page({
+  /**
+   * 页面的初始数据
+   **/
+  data: {
+    disabled: false, // 是否允许点击注册
+    rules: [
+     { // 多个规则
+        name: 'mobile',
+        rules: [{ required: true, message: '手机号必填' }, { mobile: true, message: '手机号格式不对' }],
+      }, {
+        name: 'vcode',
+        rules: { required: true, message: '验证码必填' },
+      },
+    ],
+    formData: {},
+    time: 60,
+    fetchCode: true,
+    interval: null,
+    btnTitle: '获取验证码'
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+  onUnload () {
+    clearInterval(this.data.interval)
+  },
+  
+  // 重新获取Code
+  refetchCodeDownTime () {   
+    this.data.interval = setInterval(() => {
+      const time = this.data.time - 1
+      const title = `${time}s 重新发送`
+      this.setData({
+        fetchCode: false,
+        time: time,
+        btnTitle: title
+      })
+      if (time <= 0) {
+        this.setData({
+          fetchCode: true,
+          time: 60,
+          btnTitle: '重新发送'
+        })
+        clearInterval(this.data.interval)
+      }
+    }, 1000)
+  },
+  // 调用获取 Code 接口
+  onGetMsgCode () {
+    this.selectComponent('#form').validate((valid, errors) => {
+      if (!valid) {
+        let emptyPhone = false
+        errors.forEach(item => {
+          if (item.name === 'mobile') {
+            emptyPhone = true
+            wx.showToast({
+              title: item.message,
+              icon: 'none'
+            })
+          }
+        })
+        if (!emptyPhone) {       
+          // console.log(this.data.formData)
+          this.fetchMsgCodeApi()
+        }
+      } else {
+        this.fetchMsgCodeApi()
+      }
+    })
+  },
+  fetchMsgCodeApi () {
+    auth.getMsgCode(this.data.formData.mobile, res => {
+      console.log(res)
+      this.refetchCodeDownTime()
+    })
+  },
+  registerApi () {
+    console.log("registerApi");
+    console.log(this.data.formData);
+    const phone = this.data.formData.mobile;
+    const code = this.data.formData.vcode;
+    console.log(phone, code);
+    userModel.updatephone(phone, code, res => {
+      console.log(res)
+      console.log('成功')
+      var pages = getCurrentPages();
+      var prevPage = pages[pages.length - 2]; 
+      prevPage.setData({
+        //等五分钟检验一下，成功就把position改成phone
+        phone: phone
+      }); 
+      wx.showToast({
+        title: '修改成功',
+        icon: 'none',
+        duration: 2000,
+        success(res) {
+          setTimeout(function () {
+            wx.navigateBack({
+              delta: 1
+            })
+          }, 2000)
+        }
+      })
+    })
+  },
+  formInputChange (e) {
+    const { field } = e.currentTarget.dataset
+    this.setData({
+      [`formData.${field}`]: e.detail.value
+    })
+  },
+  submitClick () {
+    this.selectComponent('#form').validate((valid, errors) => {
+      console.log('valid', valid, errors)
+      if (!valid) {
+        const firstError = Object.keys(errors)
+        console.log(firstError)
+        if (firstError.length) {
+          const error = errors[firstError[0]].message
+          wx.showToast({
+            icon: "none",
+            title: error
+          })
+        }
+      } else {
+        this.registerApi()
+      }
+    })
+  }
+})

pages/user/myInfo/register/index.json

@@ -0,0 +1,9 @@
+{
+  "usingComponents": {
+    "mp-cell": "/components/weui/cell/cell",
+    "mp-cells": "/components/weui/cells/cells",
+    "mp-checkbox": "/components/weui/checkbox/checkbox",
+    "mp-form": "/components/weui/form/form",
+    "e-ibotton": "/components/image-button/index"
+  }
+}

pages/user/myInfo/register/index.wxml

@@ -0,0 +1,23 @@
+<!--pages/user/myInfo/register/index.wxml-->
+<view class="container">
+  <navigator open-type="navigateBack" delta>
+    <image class="register_cancel" src="/images/common/close.png"></image>
+  </navigator>
+  <view class="page_bd">
+    <view class="register_form">
+      <mp-form id="form" rules="{{rules}}" models="{{formData}}"> 
+        <mp-cells title="手机号修改" >
+          <mp-cell icon="/images/common/phone.png" prop="mobile" ext-class="">
+              <input bindinput="formInputChange" data-field="mobile" class="weui-input" placeholder="请输入手机号"/>
+          </mp-cell>
+          <mp-cell prop="vcode" ext-class="weui-cell_vcode">
+              <input bindinput="formInputChange" data-field="vcode" class="weui-input" placeholder="请输入验证码"/>
+              <view slot="footer" class="weui-vcode-btn" bindtap="{{fetchCode ? 'onGetMsgCode' : ''}}">{{btnTitle}}</view>
+          </mp-cell>
+        </mp-cells>
+      </mp-form>
+    </view>
+    <e-ibotton title="确认" bind:onTap="submitClick"/>
+  </view>
+</view>
+

pages/user/myInfo/register/index.wxss

@@ -0,0 +1,38 @@
+/* pages/user/myInfo/register/index.wxss */
+
+.container {
+  position: relative;
+  padding: 0 20px;
+  display: flex;
+  height: 100vh;
+  justify-items: center;
+  align-items: center;
+}
+.register_cancel {
+  position: absolute;
+  padding: 10px;
+  width: 30px;
+  height: 30px;
+  top: 0;
+  right: 20px;
+}
+.page_bd {
+  height: 60vh;
+  width: 100%;
+}
+
+.register_form .weui-cells__title {
+  font-size: 19px;
+  color: black;
+}
+.register_form .weui-cell__icon {
+  padding-right:5px;
+  width: 25px; 
+  height: 30px;
+}
+.register_form .weui-cells::before {
+  border-top: 0px solid white;
+}
+.register_form .weui-vcode-btn {
+  width: 100px;
+}