ErectionPlatform/pagesUser/pages/changePassword/changePassword.vue

<template>
	<BasicContainer ref='basicContainer' :option="option">
		<!-- 主体 -->
		<template #body>
			<view class="changePwd_main">
				<!-- 提示 -->
				<view class="tip">
					<view>
						提示
					</view>

					<view>
						密码必须是由8-16位的数字、符号、大小写字母组合（不能是纯数字）
					</view>
				</view>

				<view class="content" :style="{minHeight: details.height}">
					<view class="">
						<!-- 原密码 -->
						<view class="change_row flex-c-sb">
							<view class="input_title">
								原密码
							</view>

							<MyInput style="height: 100%;" class="flex1" v-model="details.form.oldPwd" :showPwd="true"
								placeholder="请输入旧密码" type="password" :rules="details.rules.oldPwd"
								@change="handleInputChange" />
						</view>

						<!-- 新密码 -->
						<view class="change_row flex-c-sb">
							<view class="input_title">
								新密码
							</view>

							<MyInput style="height: 100%;" class="flex1" v-model="details.form.newPwd" :showPwd="true"
								placeholder="请输入新密码" type="password" :rules="details.rules.newPwd"
								@change="handleInputChange" />
						</view>

						<!-- 确认密码 -->
						<view class="change_row flex-c-sb">
							<view class="input_title">
								确认密码
							</view>

							<MyInput style="height: 100%;" class="flex1" v-model="details.form.confirmNewPwd" :showPwd="true"
								placeholder="请再次输入新密码" type="password" :rules="details.rules.confirmNewPwd"
								@change="handleInputChange" />
						</view>

						<view class="forgetThePassword">
							忘记密码?
						</view>
					</view>

					<view class="submitButton flex-c-c" @click="handleSubmit">
						确认修改
					</view>
				</view>
			</view>
		</template>
	</BasicContainer>

	<tips ref="tip" />

	<!-- #ifdef APP -->
	<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
	<!-- #endif -->
</template>



<script lang="ts" setup>
	import {
		postUpdatePwd,
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
	} from '@dcloudio/uni-app'
	import { nextTick, reactive, ref, toRefs } from "vue";
	import utils from '@/utils/utils.js'
	import useSystemSettingsStore from '@/store/useSystemSettingsStore';
	import { storeToRefs } from 'pinia';
	const { scanState } = storeToRefs(useSystemSettingsStore())
	// 组件配置
	const option = reactive({
		// 标题
		title: '修改密码',
		// 下拉刷新回调函数
		async pullDownRefreshInitPage() {

			return null
		},
		// 触底加载回到函数
		reachBottomInitPage: async () => { return null },
		haveData: true,
		isEnd: false,
		pageLoading: false
	})

	// 组件实例
	const basicContainer = ref() // 基础组件
	const tip = ref() // 提示组件

	let details = reactive({
		height: '70vh',
		rules: {
			oldPwd: {
				required: true,
				trigger: 'input',
				message: '请输入旧密码'
			},
			newPwd: {
				required: true,
				rulesFn(value) {
					const isNumber = utils.isNumber(value)
					if (isNumber) return false

					return /^[\u4E00-\u9FA5A-Za-z0-9_]{8,16}$/.test(value);
				},
				trigger: 'input',
				message: '密码格式错误'
			},
			confirmNewPwd: {
				required: true,
				rulesFn(value) {
					return details.form.newPwd === details.form.confirmNewPwd;
				},
				trigger: 'input',
				message: '密码不一致'
			}
		},
		form: {
			/** 旧密码 */
			oldPwd: '',
			/** 新密码 */
			newPwd: '',
			/** 确认新密码 */
			confirmNewPwd: ''
		}
	})

	onShow(async () => {
		await nextTick()
		details.height = await utils.getViewDistanceFormTop('.content')
	})

	/** 提交修改密码 */
	const handleSubmit = () => {
		if (!details.form.oldPwd) return utils.handleToast('请输入旧密码')
		if (!details.rules.newPwd.rulesFn(details.form.oldPwd)) return utils.handleToast('新密码格式错误')
		if (!details.rules.confirmNewPwd.rulesFn('')) return utils.handleToast('二次输入密码不一致')

		tip.value.setdetails({
			isshow: true,
			content: '确认提交修改密码',
			cancelTxt: '取 消',
			confirmTxt: '确 认',
			async success() {
				option.pageLoading = true
				const submitData = {
					old_password: details.form.oldPwd,
					new_password: details.form.newPwd
				}

				try {
					const res = await postUpdatePwd(submitData)

					const { code, data } = res
					if (code !== 200) return
				} catch (err) {
					console.log('err :>> ', err);
					//TODO handle the exception
				} finally {
					option.pageLoading = false

					// 关闭弹窗
					tip.value.setdetails({ isshow: false })
				}
			},
		})
	}

	const handleInputChange = (newValue, oldValue) => {
		console.log('newValue :>> ', newValue);
		console.log('oldValue :>> ', oldValue);
	};
</script>

<style lang="scss" scoped>
	@import url("@/utils/style/common.scss");

	.changePwd_main {
		.tip {
			background: #f5f5f6;
			padding: 40upx;
			color: #AFB4BA;
			font-size: 0.8rem;
			line-height: 1.5rem;
		}

		.content {
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			background: #fff;
			padding: 100upx 40upx 60upx;
			box-sizing: border-box;

			// 修改行
			.change_row {
				// padding: 40upx 0 20upx;
				height: 70upx;
				padding: 40upx 0 0;
				border-bottom: 2upx solid #eee;

				.input_title {
					color: #092C4D;
					font-weight: bold;
					width: 150upx;
				}
			}

			// 忘记密码
			.forgetThePassword {
				margin-top: 60upx;
				color: var(--primaryColor);
				font-size: 0.9rem;
			}


			$btnHeight: 80upx;

			// 确认按钮
			.submitButton {
				margin-top: 60upx;
				width: 80%;
				height: $btnHeight;
				background-color: var(--subjectColor);
				color: #fff;
				margin: 0 auto;
				border-radius: calc($btnHeight / 2);
			}
		}
	}
</style>