zhywpt-sp/subpackage/after-sale/account-recharge/forget-password.vue

<template>
	<view>
		<u-form :model="form" ref="form1" label-width=180>
			<u-form-item label="用户名">
				<u-input placeholder='请输入用户名' type="text" v-model="state.form.accountId" />
				<text @click="search" class="search">查询</text>
			</u-form-item>
			<u-form-item label="手机号" v-if="state.isShow">
				<u-input placeholder='手机号' type="number" v-model="state.form.agentTel" disabled />
			</u-form-item>
			<u-form-item label="验证码" v-if="state.isShow">
				<u-input v-model="state.form.code" placeholder='请输入短信验证码' />
				<text @click="getCode" v-if="waitTime==0" class="search">获取验证码</text>
				<text class="search" v-else>{{waitTime}}后重试</text>
			</u-form-item>
			<u-form-item label="新密码" v-if="state.isShow">
				<u-input placeholder='请输入' v-model="state.form.password" type='password' />
			</u-form-item>
			<u-form-item label="确认密码" v-if="state.isShow">
				<u-input placeholder='请输入' v-model="state.form.confirmPassword" type='password' />
			</u-form-item>
		</u-form>
		<button @click='goLogin()' v-if="state.isShow">确定</button>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from "vue";
	import { navTo } from "@/utils/utils";
	import {
		request, requestNew
	} from "@/utils/network/request.js";
	import {
		sendMessage,
		checkCode,
		queryPhoneApi,
		forgetPassApi
	} from "@/utils/network/api.js";
	import { stringToJson } from "@/utils/network/encryption";
	import {
		msg
	} from "@/utils/utils";
	let waitTime = ref(0);
	const state = reactive({
		form: {
			accountId: '',
			agentTel: '',
			code: '',
			password: '',
			confirmPassword: '',
		},
		isShow: false,
	});
	const search = () => {
		if (!state.form.accountId) {
			msg('请输入用户名')
			return;
		}
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				accountId: state.form.accountId
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		request(queryPhoneApi, options)
			.then((res) => {
				let data = stringToJson(res.bizContent)
				state.form.agentTel = data.message
				state.isShow = true;
			})
			.catch((err) => {
				console.log(err);
			});
		console.log("查询")
	}
	const getCode = () => {
		console.log(123);
		if (state.form.agentTel) {
			sendCodeApi()
			codeInterval()
		} else {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
		}
	}
	// 发送验证码
	const sendCodeApi = (type) => {
		//参数说明
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				mobile: state.form.agentTel
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		requestNew(sendMessage, options)
			.then((res) => {
				let data = res
				console.log(data, "#################");
				if (data.info == "成功.") {
					console.log('######################CCCCCCCCCCCCCCCCC');
				}
			})
			.catch((err) => {
				console.log(err);
			});
	}
	//倒计时函数
	const codeInterval = () => {
		waitTime.value = 60
		let timer = setInterval(() => {
			if (waitTime.value == 1) {
				clearInterval(timer)
			}
			waitTime.value -= 1
		}, 1000)
	}
	// 校验验证码
	const checkCodeRequest = () => {
		const options = {
			type: 2,
			data: {
				mobile: state.form.agentTel,
				code: state.form.code
			},
			method: "POST",
			showLoading: true,
		};
		return new Promise(async (resolve, reject) => {
			const res = await request(checkCode, options);
			const data = stringToJson(res.bizContent);
			resolve(data);
		}).catch((error) => {
			reject(error);
		});

	}
	const goLogin = () => {
		submit()
	}
	const submit = () => {
		if (!state.form.accountId) {
			msg("请输入用户名!");
			return;
		}
		if (!state.form.code) {
			msg('请输入验证码')
			return;
		}
		if (!state.form.password) {
			msg("请输入密码!");
			return;
		}
		if (!state.form.confirmPassword) {
			msg("请确认密码");
			return;
		}
		if (state.form.password != state.form.confirmPassword) {
			msg("请确认密码输入是否一致");
			return;
		}
		checkCodeRequest().then((val : any) => {
			let options = {
				type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
				data: {
					accountId: state.form.accountId,
					agentTel: state.form.agentTel,
					passWord: state.form.password,
					confirmPassword: state.form.confirmPassword
				}, //请求参数
				method: "POST", //提交方式(默认POST)
				showLoading: true, //是否显示加载中(默认显示)
			};

			//调用方式
			request(forgetPassApi, options).then((res) => {
				msg("密码修改成功");
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1500)

			})
				.catch((err) => {
					console.log(err);
				});
		})

	}
</script>

<style scoped>
	::v-deep .u-form-item--right__content__slot {
		display: flex !important;
	}

	::v-deep .u-form-item__body {
		padding: 0 40rpx;
		font-size: 32rpx;
	}

	::v-deep .u-input__input {
		font-size: 32rpx !important;
	}

	::v-deep .u-size-mini {
		font-size: 28rpx !important;
		padding: 12px 32rpx !important;
		white-space: nowrap;
	}

	button {
		width: 75%;
		height: 80rpx;
		margin-top: 60rpx;
		background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #ffffff;
		line-height: 80rpx;
	}

	::v-deep .u-form-item--right__content__slot {
		display: flex !important;
		align-items: center;
	}
	.search{
		    color: #ffffff;
		    border-color: #19be6b;
		    background-color: #19be6b;
		    font-size: 28rpx !important;
		    padding: 8px 30rpx !important;
		    white-space: nowrap;
		    height: 30rpx;
		    line-height: 30rpx;
		    border-radius: 16rpx;
	}
</style>