完成注册页面和忘记密码页面设计

pages/forget/forget.vue

@@ -3,13 +3,16 @@
 		<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"
+				<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" />
+				<view class="code-form-item">
+					<u-input height="80" placeholder="请输入验证码" border-color="#d0d0d0" v-model="forgetForm.yanzhengma"
+						:border="true" class="form-item-input code-input">
+					</u-input>
+					<u-button size="mini" type="primary" class="code-button" @click="getCode">{{ tips }}</u-button>
+				</view>
 			</u-form-item>
 			<u-form-item label="新密码" prop="xinmima" :border-bottom="false">
 				<u-input height="80" placeholder="请输入新密码" border-color="#d0d0d0" v-model="forgetForm.xinmima"
@@ -19,6 +22,23 @@
 				确认
 			</view>
 		</u-form>
+		<u-verification-code :seconds="seconds" ref="uCode1" @change="codeChange"></u-verification-code>
+		<u-popup v-model="show" mode="center" border-radius="10">
+			<view class="popup">
+				<text class="popup-title">请输入验证码</text>
+				<view class="popup-content">
+					<u-input height="80" placeholder="请输入验证码" border-color="#d0d0d0"
+						v-model="shuzijiaoduimaForm.shuzijiaoduima" :border="true" class="form-item-input"
+						style="flex-grow: 1;" @confirm="submitCode" />
+					<image :src="shuzijiaoduimaSrc" mode="aspectFit"
+						style="height:40px;margin-left:20rpx;width: 180rpx;flex: 0 0 auto;"></image>
+				</view>
+				<view class="popup-btn">
+					<u-button type="primary" @click="submitCode" style="width: 48%;flex: 0 0 auto;">提交</u-button>
+					<u-button type="default" @click="closePopup" style="width: 48%;flex: 0 0 auto;">取消</u-button>
+				</view>
+			</view>
+		</u-popup>
 	</view>
 </template>
 
@@ -29,20 +49,31 @@
 	export default {
 		data() {
 			return {
+				// ----验证码 start -----
+				shuzijiaoduimaForm: {
+					shuzijiaoduima: '',
+					shuzijiaoduimaUuid: ''
+				},
+				shuzijiaoduimaSrc: 'https://imgconvert.csdnimg.cn/aHR0cDovL3RjLnhpYW55dWNvZGVyLmNuL2Jsb2cyMDIwMDEwNDIwMzUwNy5wbmc?x-oss-process=image/format,png',
+				show: false,
+				tips: '',
+				seconds: 60,
+				// ----验证码 end -----
 				forgetForm: {
-					shoujihao: '', //账号
-					yanzhengma: "", //密码
-					xinmima: '', // 确认密码
+					shoujihao: '', //手机号
+					yanzhengma: "", //验证码
+					yanzhengmaUuid: "",
+					xinmima: '', // 新密码
 				},
 				rules: {
 					yanzhengma: [{
 						required: true,
-						message: '请输入账号',
+						message: '请输入验证码',
 						trigger: ['blur']
 					}],
 					xinmima: [{
 						required: true,
-						message: '请输入密码',
+						message: '请输入新密码',
 						trigger: ['blur']
 					}],
 					shoujihao: [{
@@ -61,9 +92,10 @@
 			submit() {
 				const that = this;
 				that.$refs.forgetForm.validate((valid) => {
-					console.log(valid, that.forgetForm.xingbie, 456);
+					console.log(valid, that.forgetForm, 456);
 					if (valid) {
 						msg("数据验证成功")
+						// 联调
 					}
 				})
 			},
@@ -73,7 +105,94 @@
 					animationType: 'pop-out',
 					animationDuration: 200
 				})
+			},
+			// --------验证码 start---------
+			codeChange(text) {
+				this.tips = text;
+			},
+			getCode() {
+				let { shoujihao } = this.forgetForm
+				if(!/^1[3-9]\d{9}$/.test(shoujihao)){
+					msg("请输入正确的手机号");
+					return;
+				}
+				if (this.$refs.uCode1.canGetCode) {
+					this.showPopup()
+				} else {
+					msg('倒计时结束后再发送');
+				}
+			},
+			end() {
+				msg('倒计时结束');
+			},
+			start() {
+				msg('倒计时开始');
+			},
+			showPopup() {
+				// 模拟向后端请求验证码
+				// 1.获取数字校验码图片
+				// 2.显示弹窗
+				uni.showLoading({
+					title: '正在获取图片'
+				})
+				setTimeout(() => {
+					uni.hideLoading();
+					msg('获取成功')
+					this.show = true;
+				}, 1500);
+				// 联调
+				// this.loadImage()
+				// this.show = true;
+			},
+			closePopup() {
+				this.show = false;
+				this.shuzijiaoduimaForm.shuzijiaoduima = ''; // 清空输入框
+			},
+			async submitCode() {
+				let { shuzijiaoduima } = this.shuzijiaoduimaForm
+				if (!/^\d{4}$/.test(shuzijiaoduima)) {
+					uni.showToast({
+						title: '请输入4位验证码',
+						icon: 'none'
+					});
+					return;
+				}
+				// 联调 检验是否正确
+				// const checkRes = await checkShuzijiaoduima();
+				// if(!checkRes){
+				// 	uni.showToast({
+				// 		title: '验证码输入错误',
+				// 		icon: 'none'
+				// 	});
+				// 	return;
+				// }
+				// // 发送手机验证码
+				// const codeRes = await getCodeApi();
+				// if(codeRes && codeRes.yanzhengmaUuid){
+				// 	this.forgetForm.yanzhengmaUuid = codeRes.yanzhengmaUuid
+				// 	this.closePopup();
+				// 	this.$refs.uCode1.start()
+				// }
+			
+				uni.showLoading({
+					title: '正在校验验证码'
+				})
+				setTimeout(() => {
+					uni.hideLoading();
+					msg('填写正确');
+					this.closePopup();
+					this.$refs.uCode1.start()
+				}, 1500);
+			},
+			// 加载验证码图片
+			async loadImage() {
+				// 联调
+				// const img = await loadShuzijiaoduima();
+				// this.shuzijiaoduimaForm.shuzijiaoduimaUuid = img.shuzijiaoduimaUuid
+				// this.shuzijiaoduimaSrc = img.shuzijiaoduimaSrc
+				console.log("加载图片")
 			}
+			// --------验证码 end---------
 		},
 		onLoad() {},
 		onReady() {
@@ -85,9 +204,11 @@
 	.u-form-item {
 		padding: 30rpx 0 !important;
 	}
-	.u-form-item .u-input--border{
+
+	.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;
@@ -98,6 +219,12 @@
 	.u-input {
 		background-color: #f7f7f7 !important;
 	}
+	.code-input .u-input{
+		padding-right: 200rpx !important;
+	}
+	.code-button .u-size-mini{
+		display: block !important;
+	}
 </style>
 <style lang="scss" scoped>
 	.container {
@@ -124,4 +251,38 @@
 		text-align: center;
 		color: #000000;
 	}
-</style>
+	.code-form-item{
+		position: relative;
+		.code-button{
+			position: absolute;
+			right: 15rpx;
+			top: 50%;
+			transform: translateY(-50%);
+		}
+	}
+	
+	// 数字验证码弹窗
+	.popup {
+		padding: 40rpx;
+		border-radius: 20rpx;
+	
+		.popup-title {
+			font-size: 18px;
+			text-align: center;
+			display: inline-block;
+			width: 100%;
+			// margin-bottom: 15px;
+		}
+	
+		.popup-content {
+			display: flex;
+			align-items: center;
+			margin: 50rpx 0;
+		}
+	
+		.popup-btn {
+			display: flex;
+			justify-content: space-between;
+		}
+	}
+</style>

pages/register/register.vue

@@ -39,7 +39,9 @@
 </template>
 
 <script>
-	import { msg } from "@/utils/common.js"
+	import {
+		msg
+	} from "@/utils/common.js"
 	export default {
 		data() {
 			return {
@@ -75,6 +77,10 @@
 					}],
 					querenmima: [{
 						required: true,
+						message: '请确认密码',
+						trigger: ['blur']
+					}, {
+						required: true,
 						message: "密码与确认密码不一致",
 						trigger: ['blur'],
 						validator: this.validateConfirmPassword
@@ -124,11 +130,11 @@
 			// 提示
 			showToast(msg, type) {
 				uni.showToast({
-				  icon: type ? type : "none",
-				  title: msg
+					icon: type ? type : "none",
+					title: msg
 				})
 			},
-			back(){
+			back() {
 				uni.navigateBack({
 					delta: 1,
 					animationType: 'pop-out',
@@ -146,9 +152,11 @@
 	.u-form-item {
 		padding: 30rpx 0 !important;
 	}
-	.u-form-item .u-input--border{
+
+	.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;
@@ -180,8 +188,9 @@
 		color: #fff;
 		margin: 20rpx 0 50rpx;
 	}
-	.form-tip{
+
+	.form-tip {
 		text-align: center;
 		color: #000000;
 	}
-</style>
+</style>