验证码输入页面

pages.json

@@ -3,13 +3,13 @@
 			"path": "pages/list/list",
 			"style": {
 				"navigationStyle": "custom",
-				"enablePullDownRefresh":true
+				"enablePullDownRefresh": true
 			}
-		},{
+		}, {
 			"path": "pages/list/news-list",
 			"style": {
 				"navigationStyle": "custom",
-				"enablePullDownRefresh":true
+				"enablePullDownRefresh": true
 			}
 		},
 		{
@@ -20,12 +20,20 @@
 		}, {
 			"path": "uni_modules/uni-login-page/pages/index/index",
 			"style": {
-				"navigationStyle": "custom",
-				"backgroundColor": "transparent",
+				"navigationBarTitleText": "",
+				"navigationBarBackgroundColor": "#FFFFFF",
 				"app-plus": {
 					"animationType": "fade-in",
 					"background": "transparent",
-					"popGesture": "none"
+					"popGesture": "none",
+					"titleNView": {
+						"buttons": [{
+							"text": "帮助",
+							"type": "none",
+							"fontSize": "16px",
+							"width": "60px"
+						}]
+					}
 				}
 			}
 			// "navigationBarTitleText": "",
@@ -68,7 +76,7 @@
 		}, {
 			"path": "pages/ucenter/ucenter",
 			"style": {
-				"navigationStyle":"custom"
+				"navigationStyle": "custom"
 			}
 		}, {
 			"path": "pages/uni-feedback/uni-feedback",
@@ -162,6 +170,23 @@
 					}
 				}
 			}
+		}, {
+			"path": "uni_modules/uni-login-page/pages/index/phone-code",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationBarBackgroundColor": "#FFFFFF",
+				"app-plus": {
+					"titleNView": {
+						"buttons": [{
+							"text": "帮助",
+							"type": "none",
+							"fontSize": "16px",
+							"width": "60px"
+						}]
+					}
+				}
+			}
+
 		}
 	],
 	"globalStyle": {
@@ -177,18 +202,18 @@
 		"backgroundColor": "#F8F8F8",
 		"list": [{
 			"pagePath": "pages/list/list",
-			"iconPath":"static/tabbar/list.png",
-			"selectedIconPath":"static/tabbar/list_active.png",
+			"iconPath": "static/tabbar/list.png",
+			"selectedIconPath": "static/tabbar/list_active.png",
 			"text": "列表"
 		}, {
 			"pagePath": "pages/grid/grid",
-			"iconPath":"static/tabbar/grid.png",
-			"selectedIconPath":"static/tabbar/grid_active.png",
+			"iconPath": "static/tabbar/grid.png",
+			"selectedIconPath": "static/tabbar/grid_active.png",
 			"text": "宫格"
 		}, {
 			"pagePath": "pages/ucenter/ucenter",
-			"iconPath":"static/tabbar/me.png",
-			"selectedIconPath":"static/tabbar/me_active.png",
+			"iconPath": "static/tabbar/me.png",
+			"selectedIconPath": "static/tabbar/me_active.png",
 			"text": "我的"
 		}]
 	}

uni_modules/uni-login-page/components/login-short-code/login-short-code.vue

 <template>
-	<view class="short-code-btn" hover-class="hover" @click="clickBtn">
+	<view class="short-code-btn" hover-class="hover" @click="start">
 		<text class="inner-text" :class="reverseNumber==0?'inner-text-active':''">{{innerText}}</text>
 	</view>
 </template>
@@ -47,7 +47,7 @@
 		},
 		methods: {
 			initClick() {
-				this.clickBtn = debounce(() => {
+				this.start = debounce(() => {
 					if (this.reverseNumber != 0) return;
 					this.$emit('getCode', () => {
 						this.reverseNumber = Number(this.count);

uni_modules/uni-login-page/pages/index/index.vue

 <template>
 	<view class="wrap" v-show="isShow">
-		<uni-nav-bar @clickLeft="back" left-icon="back" right-text="帮助" :statusBar="true" :border="false"></uni-nav-bar>
 		<view class="wrap-content">
 			<view class="content">
 				<!-- 顶部文字 -->
@@ -101,6 +100,10 @@
 				/**
 				 * 发送验证吗
 				 */
+				// 发送成功后跳转页面
+				uni.navigateTo({
+					url:'./phone-code?phoneNumber='+this.formData.phone+'&phoneArea='+this.currenPhoneArea
+				})
 			},
 			/**
 			 * 去密码登录页
@@ -112,9 +115,6 @@
 			},
 			openLoginList() {
 				this.$refs.loginActionSheet.open();
-			},
-			back() {
-				uni.navigateBack()
 			}
 		}
 	}

uni_modules/uni-login-page/pages/index/phone-code.vue

+<template>
+	<view class="wrap">
+		<view class="wrap-content">
+			<view class="content">
+				<!-- 顶部文字 -->
+				<text class="content-top-title">请输入验证码</text>
+				<login-ikonw class="login-iknow" :text="tipText"></login-ikonw>
+				<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
+				<uni-forms ref="form" :value="formData" :rules="rules">
+					<uni-forms-item name="phone">
+						<uni-easyinput type="number" class="phone-input-box" :inputBorder="false"
+							v-model="formData.code" maxlength="6" placeholder="请输入验证码">
+							<template slot="right">
+								<login-short-code ref="shortCode" @getCode="getCode"></login-short-code>
+							</template>
+						</uni-easyinput>
+					</uni-forms-item>
+					<button class="send-btn-box" :disabled="!canSubmit" :type="canSubmit?'primary':'default'"
+						@click="submit">登录</button>
+				</uni-forms>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				phoneNumber: '',
+				phoneCode: '',
+				currenPhoneArea: '',
+				formData:{
+					code:''
+				},
+				rules: {
+					code: {
+						rules: [{
+								required: true,
+								errorMessage: '请输入验证码',
+							},
+							{
+								legn: /^.{6}$/,
+								errorMessage: '请输入6位验证码',
+							}
+						]
+					}
+				}
+			}
+		},
+		computed: {
+			tipText() {
+				return `验证码已通过短信发送至${this.currenPhoneArea} ${this.phoneNumber}。`;
+			},
+			canSubmit() {
+				let reg_phone = /^1\d{10}$/;
+				let reg_code = /^\d{6}$/;
+				let isPhone = reg_phone.test(this.phoneNumber);
+				let isCode = reg_code.test(this.formData.code);
+				return isPhone && isCode;
+			}
+		},
+		onLoad(event) {
+			if (event && event.phoneNumber) {
+				this.phoneNumber = event.phoneNumber;
+				this.currenPhoneArea = '+' + Number(event.phoneArea);
+			}
+		},
+		onReady() {
+			this.$refs.shortCode.start();
+		},
+		methods: {
+			/**
+			 * 获取验证码倒计时
+			 * 倒计时期间不会触发该方法
+			 */
+			getCode(done) {
+				if (this.phoneNumber == '') return uni.showToast({
+					title: '请填写手机号',
+					icon: 'none'
+				});
+				// 发送成功后开启倒计时
+				done();
+			},
+			/**
+			 * 完成并提交
+			 */
+			submit(){
+				
+			}
+		}
+	}
+</script>
+
+<style>
+	@import url("../../common/loginPage.css");
+	.phone-input-box{
+		margin-top: 20rpx;
+	}
+</style>

uni_modules/uni-login-page/pages/index/pwd-retrieve.vue

@@ -3,7 +3,7 @@
 		<view class="wrap-content">
 			<view class="content">
 				<!-- 顶部文字 -->
-				<text class="content-top-title">手机号密码登录</text>
+				<text class="content-top-title">重置密码</text>
 				<login-ikonw class="login-iknow" :text="tipText"></login-ikonw>
 				<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
 				<uni-forms ref="form" :value="formData" :rules="rules">
@@ -15,7 +15,7 @@
 							</template>
 						</uni-easyinput>
 						<uni-easyinput type="number" class="phone-input-box" :inputBorder="false"
-							v-model="formData.pwd" placeholder="请输入密码"></uni-easyinput>
+							v-model="formData.pwd" placeholder="请输入新密码"></uni-easyinput>
 					</uni-forms-item>
 					<button class="send-btn-box" :disabled="!canSubmit" :type="canSubmit?'primary':'default'"
 						@click="submit">完成</button>
@@ -83,10 +83,6 @@
 				this.phoneNumber = event.phoneNumber;
 				this.currenPhoneArea = '+' + Number(event.phoneArea);
 			}
-			else {
-				this.phoneNumber = '17731252731';
-				this.currenPhoneArea = '+86';
-			}
 		},
 		methods: {
 			/**