h5登录方式修改为手机号登录

pages.json

@@ -25,7 +25,8 @@
       }
     },
     {
-      "path": "pages/user/RetrievePassword/index",
+      // "path": "pages/user/RetrievePassword/index",
+	  "path": "pages/user/ChangePassword/index",
       "style": {
         "navigationBarTitleText": "重置密码"
       }

pages/user/ChangePassword/index.vue

@@ -1,8 +1,11 @@
 <template>
   <view class="ChangePassword">
-    <view class="phone">
+    <!-- <view class="phone">
       当前手机号:
       <input type="text" v-model="phone" disabled />
+    </view> -->
+	<view class="title">
+		通过手机号来修改密码：
 	</view>
     <view class="list">
       <view class="item">
@@ -19,12 +22,7 @@
     <view class="confirmBnt bg-color-red" @click="confirm">确认修改</view>
   </view>
 </template>
-<style scoped lang="less">
+
-.ChangePassword .phone input {
-  width: 2 * 100rpx;
-  text-align: center;
-}
-</style>
 <script>
 // import { mapGetters } from "vuex";
 import sendVerifyCode from '@/mixins/SendVerifyCode'
@@ -133,3 +131,14 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="less">
+.ChangePassword {
+	.list{
+		width: 100%;
+		padding: 0 10%;
+		background-color: #FFFFFF;
+		.code{}
+	}
+}
+</style>

pages/user/Login/index.vue

@@ -5,40 +5,50 @@
         <view class="item" :class="current === index ? 'on' : ''" v-for="(item, index) in navList"
           @click="navTap(index)" :key="index">{{ item }}</view>
       </view>
+	  <!-- 手机号登录 -->
       <view class="list" :hidden="current !== 0">
         <form @submit.prevent="submit">
-          <view class="item">
+          <view class="item getPhoneCode">
             <view class="acea-row row-between-wrapper">
               <input type="text" placeholder="输入手机号码"
-			  v-model="account" required
+			  v-model="account" required/>
-			  @input="checkPhone"/>
+            </view>
+			<view class="phoneCode" @click="sendCode">
+				{{ clockText }}
 			</view>
           </view>
-          <view class="item" v-if="account.length === 11">
+          <view class="item">
             <view class="acea-row row-between-wrapper">
-              <input type="password" placeholder="填写登录密码" v-model="password" required />
+              <input type="text" placeholder="请输入验证码" v-model="captcha" required />
+			  <!-- <input type="password" placeholder="填写登录密码" v-model="password" required /> -->
             </view>
           </view>
         </form>
       </view>
-      <!-- <view class="list" :hidden="current !== 1">
+	  <!-- 账号密码登录 -->
+      <view class="list" :hidden="current !== 1">
         <view class="item">
           <view class="acea-row row-between-wrapper">
             <input type="text" placeholder="输入手机号码" v-model="account" />
           </view>
         </view>
 		<view class="item">
+		  <view class="acea-row row-between-wrapper">
+		    <input type="text" placeholder="输入密码" v-model="password" />
+		  </view>
+		</view>
+        <!-- <view class="item">
           <view class="align-left">
             <input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" />
             <button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''"
               @click="code">{{ text }}</button>
           </view>
-        </view>
         </view> -->
-      <view class="logon" @click="loginMobile" :hidden="current !== 1">登录</view>
+      </view>
-      <view class="logon" @click="submit" :hidden="current === 1">登录</view>
+      <view class="logon" @click="loginMobile" :hidden="current === 1">手机号登录</view>
+      <view class="logon" @click="submit" :hidden="current !== 1">登录</view>
       <view class="tip">
-        没有账号?
+        第一次使用?
         <text @click="formItem = 2" class="font-color-red">立即注册</text>
       </view>
     </view>
@@ -124,22 +134,21 @@
     mixins: [sendVerifyCode],
     data: function () {
       return {
-        navList: ["手机号登录"],
+        // navList: ["手机号登录", "密码登录"],
+		navList: ["手机号登录",],
         current: 0,
         account: "",
         password: "",
         captcha: "",
         inviteCode: "",
         formItem: 1,
-        type: "login"
+        type: "login",
+		timer: null,
+		clock: 60,
+		clockText: '获取验证码'
       };
     },
     methods: {
-		checkPhone(e) {
-			if (e.target.value.length === 11) {
-				console.log('手机号')
-			}
-		},
 		async loginMobile() {
 			var that = this;
 			const {
@@ -166,16 +175,18 @@
 			  return validatorDefaultCatch(e);
 			}
 			loginMobile({
-				phone: that.account,
+				account: that.account,
 				captcha: that.captcha,
 				spread: cookie.get("spread")
 			})
 			.then(res => {
 				var data = res.data;
 				that.$store.commit("login", data.token, dayjs(data.expires_time));
+				that.$store.dispatch('userInfo', true)
 				handleGetUserInfo();
 			})
 			.catch(err => {
+				console.log(err)
 				uni.showToast({
 				  title: err.msg || err.response.data.msg || err.response.data.message,
 				  icon: "none",
@@ -240,12 +251,33 @@
 		},
 		// 获取验证码
 		async code() {
-        var that = this;
 			const {
 			  account
-        } = that;
+			} = this;
 			try {
-          await that
+			  await this
+				.$validator({
+				  account: [
+					required(required.message("手机号码")),
+					chs_phone(chs_phone.message())
+				  ]
+				})
+				.validate({
+				  account
+				});
+			} catch (e) {
+			  return validatorDefaultCatch(e);
+			}
+			if (this.formItem == 2) this.type = "register";
+			this.showCode()
+		},
+		// 手机号登录获取验证码
+		async sendCode () {
+			const {
+			  account
+			} = this;
+			try {
+			  await this
 				.$validator({
 				  account: [
 					required(required.message("手机号码")),
@@ -258,10 +290,30 @@
 			} catch (e) {
 			  return validatorDefaultCatch(e);
 			}
-        if (that.formItem == 2) that.type = "register";
+			// 倒计时
-        await registerVerify({
+			if (this.clock !== 60) {
-            phone: that.account,
+				return
-            type: that.type
+			}
+			this.clock--
+			this.clockText = `${this.clock} 秒`
+			this.timer = setInterval(() => {
+				if (parseInt(this.clock) === 1) {
+					clearTimeout(this.timer)
+					this.clock = 60
+					this.clockText = '获取验证码'
+					return
+				}
+				this.clock--
+				if (this.clock < 10) this.clock = `0${this.clock}`
+				this.clockText = `${this.clock} 秒`
+			}, 1000)
+			this.showCode()
+		},
+		// 验证码请求
+		showCode() {
+			return registerVerify({
+				phone: this.account,
+				type: this.type
 			  })
 			.then(res => {
 				uni.showToast({
@@ -269,7 +321,7 @@
 				  icon: "success",
 				  duration: 2000
 				});
-            that.sendCode();
+				this.sendCode();
 			})
 			.catch(err => {
 				uni.showToast({
@@ -279,9 +331,7 @@
 				});
 			});
 		},
-      navTap: function (index) {
+		navTap(index) { this.current = index; },
-        this.current = index;
-      },
 		async submit() {
 			const {
 			  account,
@@ -306,7 +356,7 @@
 			} catch (e) {
 			  return validatorDefaultCatch(e);
 			}
-
+			// 账号密码登录
 			login({
 				username: account,
 				password,
@@ -337,3 +387,22 @@
     }
   };
 </script>
+
+<style lang="scss">
+.register .whiteBg .title .item{
+	border-bottom: 2px solid;
+}
+.register .whiteBg .title .item.on{
+	border-bottom-color: #f35749;
+}
+.getPhoneCode{
+	display: flex;
+	justify-content: space-between;
+	.phoneCode{
+		color: #FFFFFF;
+		background-color: #f35749;
+		padding: 12rpx;
+		border-radius: 30rpx;
+	}
+}
+</style>

pages/user/PersonalData/index.vue

@@ -44,15 +44,13 @@
 			  <input type="text" v-else value="未绑定" disabled class="id" />
 			</view>
 		</view>
-      <!-- 
+        <!-- <view class="item acea-row row-between-wrapper" @click="goChangePassword()">
-        <view class="item acea-row row-between-wrapper" @click="goChangePassword()">
           <view>密码</view>
           <view class="input acea-row row-between-wrapper">
             <text>点击修改密码</text>
             <text class="iconfont icon-suozi"></text>
           </view>
-        </view>
+        </view> -->
-      -->
     </view>
     <view class="modifyBnt bg-color-red" @click="submit">保存修改</view>
     <!-- #ifndef MP-WEIXIN -->

utils/index.js

@@ -354,7 +354,6 @@ export const handleGetUserInfo = () => {
     console.log('获取用户信息')
     store.dispatch('setUserInfo', res.data)
     console.log('获取用户信息后跳转回显的页面')
-
     let redirect = cookie.get('redirect').replace(/\ /g, '')
     if (redirect) {
       reLaunch({