jiuyiUniapp/jiuyi2/pages/login/forget.vue

<script setup>
	/**
	 * 忘记密码
	 */
	import {
		ref,
		reactive,
	} from 'vue'
	// 工具库
	import util from "@/common/js/util.js"
	// 获取验证码
	import getCode from '@/components/getCode/getCode.vue'
	// 须知
	import notice from '@/components/login/notice'
	// api
	import api from '@/api/index'
	// 加密
	import CryptoJS from 'crypto-js';

	// 表单
	const form = reactive({
		// 设备imei
		userImei: '',
		// 手机号
		phoneNumber: '',
		// 密码
		password: '',
		// 验证码
		verifyCode: '',
	})
	// 确认密码
	const rePwd = ref('')
	// 阅读
	const read = ref(false)

	// 登录
	function handleLogin() {
		const data = {
			...form
		}
		// 校验
		if (!data.phoneNumber) {
			util.alert('请输入手机号')
			return
		}
		if (!data.verifyCode) {
			util.alert('请输入验证码')
			return
		}
		if (!data.password) {
			util.alert('请输入密码')
			return
		}
		if (data.password !== rePwd.value) {
			util.alert('两次输入密码不一致')
			return
		}
		data.password = CryptoJS.MD5(data.password).toString()

		// 如果imei为空
		if (!data.userImei) {
			const info = uni.getSystemInfoSync()
			// 
			data.userImei = info.deviceId
		}

		// 忘记密码找回
		api.login.resetPassword({
			data,
		}).then(rs => {
			if (rs.code == 200) {
				util.alert({
					content: rs.msg,
					showCancel: false,
				})
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/login/loginPhone'
					})
				}, 500)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}
</script>

<template>
	<view class="appbw">
		<view class="container">
			<view class="logo mauto">
				<image class="logo br10" src="/static/logo.png" mode="aspectFit" />
			</view>

			<view class="form mt60 mlr60 mb30">
				<view class="title mtb30">忘记密码</view>

				<view class="inputBox mtb30 ptb10 plr30">
					<input type="text" v-model="form.phoneNumber" placeholder="请输入手机号" />
				</view>

				<view class="inputBox rows mtb30 ptb10 plr30">
					<input type="text" v-model="form.verifyCode" placeholder="请输入验证码" class="f1" />

					<view class="getCode btn sm plr20">
						<getCode event="reset_password" :phone="form.phoneNumber" />
					</view>
				</view>

				<view class="inputBox mtb30 ptb10 plr30">
					<input type="text" v-model="form.password" placeholder="请输入密码" />
				</view>

				<view class="inputBox mtb30 ptb10 plr30">
					<input type="text" v-model="rePwd" placeholder="请输入确认密码" />
				</view>

				<view class="rows c333 f24">
					<navigator url="/pages/login/loginPhone" open-type="redirect">已有账号，去登录</navigator>
					<navigator url="/pages/login/retrieve" open-type="redirect">通过实名找回账号</navigator>
				</view>

				<view class="btn lg bar black mtb30" @click="handleLogin">确认</view>
			</view>
		</view>

		<view class="footer">
			<!-- <notice class="mb60" v-model:value="read" /> -->
		</view>
	</view>
</template>

<style lang="scss">
	// 
	.container {
		margin-top: 15vh;

		// 标志
		.logo {
			width: 200rpx;
			height: 200rpx;
		}
	}

	// 获取验证码
	.getCode {
		color: #666;
		background-color: #fff;
	}
</style>