验证码输入页面

pages.json

-{
-	"pages": [{
-			"path": "pages/list/list",
-			"style": {
-				"navigationStyle": "custom",
-				"enablePullDownRefresh":true
-			}
-		},{
-			"path": "pages/list/news-list",
-			"style": {
-				"navigationStyle": "custom",
-				"enablePullDownRefresh":true
-			}
-		},
-		{
-			"path": "pages/grid/grid",
-			"style": {
-				"navigationStyle": "custom"
-			}
-		}, {
-			"path": "uni_modules/uni-login-page/pages/index/index",
-			"style": {
-				"navigationStyle": "custom",
-				"backgroundColor": "transparent",
-				"app-plus": {
-					"animationType": "fade-in",
-					"background": "transparent",
-					"popGesture": "none"
-				}
-			}
-			// "navigationBarTitleText": "",
-			// "navigationBarBackgroundColor": "#FFFFFF",
-			// "app-plus": {
-			// 	"titleNView": {
-			// 		"buttons": [{
-			// 			"text": "帮助",
-			// 			"type": "none",
-			// 			"fontSize": "16px",
-			// 			"width": "60px"
-			// 		}]
-			// 	}
-			
-		}, {
-			"path": "pages/search/search",
-			"style": {
-				"navigationStyle": "custom"
-			}
-		}, {
-			"path": "pages/list/detail",
-			"style": {
-				"app-plus": {
-					"titleNView": {
-						"buttons": [{
-							"type": "share"
-						}],
-						"type": "transparent"
-					}
-				},
-				"h5": {
-					"titleNView": {
-						"buttons": [],
-						"type": "transparent"
-					}
-				},
-				"navigationBarTitleText": "文章详情"
-			}
-
-		}, {
-			"path": "pages/ucenter/ucenter",
-			"style": {
-				"navigationStyle":"custom"
-			}
-		}, {
-			"path": "pages/uni-feedback/uni-feedback",
-			"style": {
-				"navigationBarTitleText": "问题反馈"
-			}
-		}, {
-			"path": "pages/about/about",
-			"style": {
-				"navigationBarTitleText": "关于"
-			}
-
-		}, {
-			"path": "pages/agree-list/agree-list",
-			"style": {
-				"navigationBarTitleText": "政策与协议"
-			}
-
-		}, {
-			"path": "pages/agree-list/privacy/privacy",
-			"style": {
-				"navigationBarTitleText": "隐私政策"
-			}
-
-		}, {
-			"path": "pages/agree-list/service/service",
-			"style": {
-				"navigationBarTitleText": "服务协议"
-			}
-
-		}, {
-			"path": "uni_modules/uni-upgrade-center-app/pages/upgrade-popup",
-			"style": {
-				"disableScroll": true,
-				"app-plus": {
-					"backgroundColorTop": "transparent",
-					"background": "transparent",
-					"titleNView": false,
-					"scrollIndicator": false,
-					"popGesture": "none",
-					"animationType": "fade-in",
-					"animationDuration": 200
-
-				}
-			}
-		}, {
-			"path": "pages/settings/settings",
-			"style": {
-				"navigationBarTitleText": "设置"
-			}
-
-		}, {
-			"path": "pages/ucenter/edit/edit",
-			"style": {
-				"navigationBarTitleText": "编辑资料"
-			}
-		}, {
-			"path": "pages/ucenter/edit/uploadCutImageToUnicloud",
-			"style": {
-				"navigationStyle": "custom"
-			}
-		}, {
-			"path": "uni_modules/uni-login-page/pages/index/pwd-login",
-			"style": {
-				"navigationBarTitleText": "",
-				"navigationBarBackgroundColor": "#FFFFFF",
-				"app-plus": {
-					"titleNView": {
-						"buttons": [{
-							"text": "帮助",
-							"type": "none",
-							"fontSize": "16px",
-							"width": "60px"
-						}]
-					}
-				}
-			}
-		}, {
-			"path": "uni_modules/uni-login-page/pages/index/pwd-retrieve",
-			"style": {
-				"navigationBarTitleText": "",
-				"navigationBarBackgroundColor": "#FFFFFF",
-				"app-plus": {
-					"titleNView": {
-						"buttons": [{
-							"text": "帮助",
-							"type": "none",
-							"fontSize": "16px",
-							"width": "60px"
-						}]
-					}
-				}
-			}
-		}
-	],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "base-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
-	},
-	"tabBar": {
-		"color": "#7A7E83",
-		"selectedColor": "#007AFF",
-		"borderStyle": "black",
-		"backgroundColor": "#F8F8F8",
-		"list": [{
-			"pagePath": "pages/list/list",
-			"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",
-			"text": "宫格"
-		}, {
-			"pagePath": "pages/ucenter/ucenter",
-			"iconPath":"static/tabbar/me.png",
-			"selectedIconPath":"static/tabbar/me_active.png",
-			"text": "我的"
-		}]
-	}
+{
+	"pages": [{
+			"path": "pages/list/list",
+			"style": {
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": true
+			}
+		}, {
+			"path": "pages/list/news-list",
+			"style": {
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": true
+			}
+		},
+		{
+			"path": "pages/grid/grid",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		}, {
+			"path": "uni_modules/uni-login-page/pages/index/index",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationBarBackgroundColor": "#FFFFFF",
+				"app-plus": {
+					"animationType": "fade-in",
+					"background": "transparent",
+					"popGesture": "none",
+					"titleNView": {
+						"buttons": [{
+							"text": "帮助",
+							"type": "none",
+							"fontSize": "16px",
+							"width": "60px"
+						}]
+					}
+				}
+			}
+			// "navigationBarTitleText": "",
+			// "navigationBarBackgroundColor": "#FFFFFF",
+			// "app-plus": {
+			// 	"titleNView": {
+			// 		"buttons": [{
+			// 			"text": "帮助",
+			// 			"type": "none",
+			// 			"fontSize": "16px",
+			// 			"width": "60px"
+			// 		}]
+			// 	}
+
+		}, {
+			"path": "pages/search/search",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		}, {
+			"path": "pages/list/detail",
+			"style": {
+				"app-plus": {
+					"titleNView": {
+						"buttons": [{
+							"type": "share"
+						}],
+						"type": "transparent"
+					}
+				},
+				"h5": {
+					"titleNView": {
+						"buttons": [],
+						"type": "transparent"
+					}
+				},
+				"navigationBarTitleText": "文章详情"
+			}
+
+		}, {
+			"path": "pages/ucenter/ucenter",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		}, {
+			"path": "pages/uni-feedback/uni-feedback",
+			"style": {
+				"navigationBarTitleText": "问题反馈"
+			}
+		}, {
+			"path": "pages/about/about",
+			"style": {
+				"navigationBarTitleText": "关于"
+			}
+
+		}, {
+			"path": "pages/agree-list/agree-list",
+			"style": {
+				"navigationBarTitleText": "政策与协议"
+			}
+
+		}, {
+			"path": "pages/agree-list/privacy/privacy",
+			"style": {
+				"navigationBarTitleText": "隐私政策"
+			}
+
+		}, {
+			"path": "pages/agree-list/service/service",
+			"style": {
+				"navigationBarTitleText": "服务协议"
+			}
+
+		}, {
+			"path": "uni_modules/uni-upgrade-center-app/pages/upgrade-popup",
+			"style": {
+				"disableScroll": true,
+				"app-plus": {
+					"backgroundColorTop": "transparent",
+					"background": "transparent",
+					"titleNView": false,
+					"scrollIndicator": false,
+					"popGesture": "none",
+					"animationType": "fade-in",
+					"animationDuration": 200
+
+				}
+			}
+		}, {
+			"path": "pages/settings/settings",
+			"style": {
+				"navigationBarTitleText": "设置"
+			}
+
+		}, {
+			"path": "pages/ucenter/edit/edit",
+			"style": {
+				"navigationBarTitleText": "编辑资料"
+			}
+		}, {
+			"path": "pages/ucenter/edit/uploadCutImageToUnicloud",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		}, {
+			"path": "uni_modules/uni-login-page/pages/index/pwd-login",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationBarBackgroundColor": "#FFFFFF",
+				"app-plus": {
+					"titleNView": {
+						"buttons": [{
+							"text": "帮助",
+							"type": "none",
+							"fontSize": "16px",
+							"width": "60px"
+						}]
+					}
+				}
+			}
+		}, {
+			"path": "uni_modules/uni-login-page/pages/index/pwd-retrieve",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationBarBackgroundColor": "#FFFFFF",
+				"app-plus": {
+					"titleNView": {
+						"buttons": [{
+							"text": "帮助",
+							"type": "none",
+							"fontSize": "16px",
+							"width": "60px"
+						}]
+					}
+				}
+			}
+		}, {
+			"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": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "base-app",
+		"navigationBarBackgroundColor": "#F8F8F8",
+		"backgroundColor": "#F8F8F8"
+	},
+	"tabBar": {
+		"color": "#7A7E83",
+		"selectedColor": "#007AFF",
+		"borderStyle": "black",
+		"backgroundColor": "#F8F8F8",
+		"list": [{
+			"pagePath": "pages/list/list",
+			"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",
+			"text": "宫格"
+		}, {
+			"pagePath": "pages/ucenter/ucenter",
+			"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">
 				<!-- 顶部文字 -->
@@ -100,7 +99,11 @@
 				if (!this.canGetShortMsg) return;
 				/**
 				 * 发送验证吗
-				 */
+				 */
+				// 发送成功后跳转页面
+				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>
@@ -82,10 +82,6 @@
 			if (event && event.phoneNumber) {
 				this.phoneNumber = event.phoneNumber;
 				this.currenPhoneArea = '+' + Number(event.phoneArea);
-			}
-			else {
-				this.phoneNumber = '17731252731';
-				this.currenPhoneArea = '+86';
 			}
 		},
 		methods: {