展开忘记密码页面设计

pages/forget/forget.vue

@@ -1,39 +1,127 @@
 <template>
 	<view class="container">
-		<view :style="{height: statusBarHeight + 'px'}"></view>
-		<u-navbar back-text="返回" title="找回密码"></u-navbar>
-		忘记密码
+		<u-form :model="forgetForm" ref="forgetForm" label-width="160"
+			:label-style="{ color: '#000', fontSize: '30rpx'}">
+			<u-form-item label="手机号" prop="shoujihao" :border-bottom="false">
+				<u-input height="80" placeholder="请输入手机号"
+				border-color="#d0d0d0" v-model="forgetForm.shoujihao"
+					:border="true" class="form-item-input" type="number" />
+			</u-form-item>
+			<u-form-item label="验证码" prop="yanzhengma" :border-bottom="false">
+				<u-input height="80" placeholder="请输入验证码" border-color="#d0d0d0" v-model="forgetForm.yanzhengma"
+					:border="true" class="form-item-input" />
+			</u-form-item>
+			<u-form-item label="新密码" prop="xinmima" :border-bottom="false">
+				<u-input height="80" placeholder="请输入新密码" border-color="#d0d0d0" v-model="forgetForm.xinmima"
+					:border="true" class="form-item-input" type="password" />
+			</u-form-item>
+			<view class="form-button" @click="submit">
+				确认
+			</view>
+		</u-form>
 	</view>
 </template>
 
 <script>
+	import {
+		msg
+	} from "@/utils/common.js"
 	export default {
 		data() {
 			return {
-				statusBarHeight: 0,
-				navBarHeight:0
+				forgetForm: {
+					shoujihao: '', //账号
+					yanzhengma: "", //密码
+					xinmima: '', // 确认密码
+				},
+				rules: {
+					yanzhengma: [{
+						required: true,
+						message: '请输入账号',
+						trigger: ['blur']
+					}],
+					xinmima: [{
+						required: true,
+						message: '请输入密码',
+						trigger: ['blur']
+					}],
+					shoujihao: [{
+						required: true,
+						message: '请输入手机号码',
+						trigger: ['blur']
+					}, {
+						pattern: /^1[3-9]\d{9}$/,
+						message: '请输入正确的手机号',
+						trigger: ['blur']
+					}]
+				}
 			};
 		},
-		onReady() {
-			const that = this;
-			uni.getSystemInfo({
-				success(e) {
-					that.statusBarHeight = e.statusBarHeight;
-					let custom = uni.getMenuButtonBoundingClientRect();
-					that.navBarHeight = custom.height + (custom.top - e.statusBarHeight) * 2;
-				}
-			})
+		methods: {
+			submit() {
+				const that = this;
+				that.$refs.forgetForm.validate((valid) => {
+					console.log(valid, that.forgetForm.xingbie, 456);
+					if (valid) {
+						msg("数据验证成功")
+					}
+				})
+			},
+			back() {
+				uni.navigateBack({
+					delta: 1,
+					animationType: 'pop-out',
+					animationDuration: 200
+				})
+			}
 		},
-		onLoad() {
+		onLoad() {},
+		onReady() {
+			this.$refs.forgetForm.setRules(this.rules);
 		}
 	}
 </script>
+<style lang="scss">
+	.u-form-item {
+		padding: 30rpx 0 !important;
+	}
+	.u-form-item .u-input--border{
+		border-radius: 16rpx !important;
+	}
+	.u-form-item .u-form-item--left__content__label {
+		display: block !important;
+		text-align: justify;
+		text-align-last: justify;
+		padding: 0 20rpx 0 10rpx;
+	}
 
+	.u-input {
+		background-color: #f7f7f7 !important;
+	}
+</style>
 <style lang="scss" scoped>
 	.container {
 		height: 100vh;
 		width: 100vw;
 		background-color: #ffffff;
-		padding: 0 20rpx;
+		padding: 0 40rpx;
+	}
+
+	.form-item-input {
+		width: 100%;
+	}
+
+	.form-button {
+		background: linear-gradient(90deg, #006af5, #21b0fc);
+		border-radius: 20rpx;
+		line-height: 80rpx;
+		text-align: center;
+		color: #fff;
+		margin: 50rpx 0;
+	}
+
+	.form-tip {
+		text-align: center;
+		color: #000000;
 	}
 </style>

pages/login/login.vue

@@ -16,11 +16,11 @@
 				</view>
 				<view class="phone-form" v-if="loginType=='phone'">、
 					<view class="form-item">
-						<u-input height="80" placeholder="请输入手机号" border-color="#b1b1b1" v-model="phoneForm.shoujihao"
+						<u-input height="80" placeholder="请输入手机号" border-color="#d0d0d0" v-model="phoneForm.shoujihao"
 							:border="true" class="form-item-input" type="number"/>
 					</view>
 					<view class="form-item">
-						<u-input height="80" placeholder="请输入验证码" border-color="#b1b1b1" v-model="phoneForm.yanzhengma"
+						<u-input height="80" placeholder="请输入验证码" border-color="#d0d0d0" v-model="phoneForm.yanzhengma"
 							:border="true" class="form-item-input" />
 						<text class="form-item-text" v-if="!isCounting" @click="requestVerificationCode">
 							发送验证码</text>
@@ -33,11 +33,11 @@
 				</view>
 				<view class="phone-form" v-if="loginType=='username'">、
 					<view class="form-item">
-						<u-input height="80" placeholder="请输入账号" border-color="#b1b1b1" v-model="usernameForm.zhanghao"
+						<u-input height="80" placeholder="请输入账号" border-color="#d0d0d0" v-model="usernameForm.zhanghao"
 							:border="true" class="form-item-input" />
 					</view>
 					<view class="form-item">
-						<u-input height="80" placeholder="请输入密码" border-color="#b1b1b1" v-model="usernameForm.mima"
+						<u-input height="80" placeholder="请输入密码" border-color="#d0d0d0" v-model="usernameForm.mima"
 							:border="true" class="form-item-input" />
 					</view>
 					<view class="form-button" @click="usenameLoginHandle">
@@ -97,7 +97,6 @@
 					return;
 				}
 				console.log(this.phoneForm)
-				// this.showToast("密码错误")
 			},
 			// 账号登录
 			usenameLoginHandle(){
@@ -123,7 +122,7 @@
 			// 点击获取验证码
 			requestVerificationCode() {
 				if (!this.isCounting) {
-					console.log(2)
+					// console.log(2)
 					// 发起请求验证码的操作
 					console.log("请求验证码...");
 					// 开始倒计时
@@ -153,7 +152,11 @@
 		},
 	}
 </script>
-
+<style lang="scss">
+	.form-item .u-input--border{
+		border-radius: 16rpx !important;
+	}
+</style>
 <style lang="scss" scoped>
 	.app-login-page {
 		background-color: #f7f7f7;

pages/register/register.vue

@@ -1,25 +1,25 @@
 <template>
 	<view class="container">
-		<u-form :model="registerForm" ref="registerForm" label-width="180"
+		<u-form :model="registerForm" ref="registerForm" label-width="160"
 			:label-style="{ color: '#000', fontSize: '30rpx'}">
 			<u-form-item label="账号" prop="zhanghao" required :border-bottom="false">
-				<u-input height="80" placeholder="请输入账号" border-color="#b1b1b1" v-model="registerForm.zhanghao"
+				<u-input height="80" placeholder="请输入账号" border-color="#d0d0d0" v-model="registerForm.zhanghao"
 					:border="true" class="form-item-input" />
 			</u-form-item>
 			<u-form-item label="密码" prop="mima" required :border-bottom="false">
-				<u-input height="80" placeholder="请输入密码" border-color="#b1b1b1" v-model="registerForm.mima"
+				<u-input height="80" placeholder="请输入密码" border-color="#d0d0d0" v-model="registerForm.mima"
 					:border="true" class="form-item-input" type="password" />
 			</u-form-item>
 			<u-form-item label="确认密码" prop="querenmima" required :border-bottom="false">
-				<u-input height="80" placeholder="请确认密码" border-color="#b1b1b1" v-model="registerForm.querenmima"
+				<u-input height="80" placeholder="请确认密码" border-color="#d0d0d0" v-model="registerForm.querenmima"
 					:border="true" class="form-item-input" type="password" />
 			</u-form-item>
 			<u-form-item label="手机号码" prop="shoujihaoma" required :border-bottom="false">
-				<u-input height="80" placeholder="请输入手机号" border-color="#b1b1b1" v-model="registerForm.shoujihaoma"
+				<u-input height="80" placeholder="请输入手机号" border-color="#d0d0d0" v-model="registerForm.shoujihaoma"
 					:border="true" class="form-item-input" type="number" />
 			</u-form-item>
 			<u-form-item label="身份证" prop="shenfenzheng" :border-bottom="false">
-				<u-input height="80" placeholder="请输入身份证" border-color="#b1b1b1" v-model="registerForm.shenfenzheng"
+				<u-input height="80" placeholder="请输入身份证" border-color="#d0d0d0" v-model="registerForm.shenfenzheng"
 					:border="true" class="form-item-input" />
 			</u-form-item>
 			<u-form-item label="性别" prop="xingbie" required :border-bottom="false">
@@ -146,7 +146,9 @@
 	.u-form-item {
 		padding: 30rpx 0 !important;
 	}
-
+	.u-form-item .u-input--border{
+		border-radius: 16rpx !important;
+	}
 	.u-form-item .u-form-item--left__content__label {
 		display: block !important;
 		text-align: justify;
@@ -182,4 +184,4 @@
 		text-align: center;
 		color: #000000;
 	}
-</style>
+</style>