menber-center/pages/forget/forget.vue

<template>
	<view class="container">
		<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">
				<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"
					:border="true" class="form-item-input" type="password" />
			</u-form-item>
			<view class="form-button" @click="submit">
				确认
			</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>

<script>
	import {
		msg
	} from "@/utils/common.js"
	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: "", //验证码
					yanZhengMaUuid: "",
					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']
					}]
				}
			};
		},
		methods: {
			submit() {
				const that = this;
				that.$refs.forgetForm.validate((valid) => {
					console.log(valid, that.forgetForm, 456);
					if (valid) {
						msg("数据验证成功")
						// 联调
					}
				})
			},
			back() {
				uni.navigateBack({
					delta: 1,
					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() {
			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;
	}
	.code-input .u-input{
		padding-right: 200rpx !important;
	}
	.code-button .u-size-mini{
		display: block !important;
	}
</style>
<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100vw;
		background-color: #ffffff;
		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;
	}
	.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>