purchase-let/pagesOrder/setPayPassword/index.vue

<template>
	<view class='card'>
		<up-input v-model="form.phone" placeholder="手机号" border="none" readonly></up-input>
		<view style="margin: 30rpx 0;">
			<up-line color="#D3E3FD"></up-line>
		</view>
		<view style="display: flex;justify-content: space-between;align-items: center;">
			<up-input v-model="form.code" placeholder="验证码" border="none" type='number'></up-input>
			<view class="code-btn">
				<view style="margin: 0 20rpx;">
					<up-line color="grey" direction="col" length="30rpx"></up-line>
				</view>
				<text class='btn-text' style="color: grey;" v-if='cutDown'>重新获取({{cutDown}})</text>
				<text @click="getCode" class='btn-text' v-else> {{flag?'获取验证码':'重新获取' }} </text>
			</view>
		</view>
	</view>
	<view class='card'>
		<view @click="showKeyBorad=true,type=1">
			<up-input style="pointer-events: none;" type='password' v-model="form.password" placeholder="请输入你的密码"
				border="none" readonly></up-input>
		</view>
		<view style="margin: 30rpx 0;">
			<up-line color="#D3E3FD"></up-line>
		</view>
		<view @click="showKeyBorad=true,type=2">
			<up-input style="pointer-events: none;" type='password' v-model="form.rePassword" placeholder="请再次输入你的密码"
				border="none" readonly></up-input>
		</view>
	</view>

	<view class='submit-btn'>
		<up-button color="#20B128" shape="circle" @click="submit">确认</up-button>
	</view>
	<up-keyboard dotDisabled safeAreaInsetBottom ref="uKeyboard" @close="showKeyBorad=false" mode="number"
		:tooltip="false" :show="showKeyBorad" @change='onKetDown' @backspace='backspaceFn' />
</template>

<script setup>
	import useUserStore from "@/store/user";
	import {
		getMassageCode,
		setPayPassword
	} from "@/api/address.js"
	import {
		ref,
		reactive
	} from "vue"

	const userInfo = useUserStore().userInfo;
	const form = reactive({
		phone: userInfo.mobile, //手机号
		code: "", //验证码
		password: "", //6位数密码
		rePassword: "" //确认密码
	})

	// 获取验证码
	const cutDown = ref(0)
	const flag = ref(true)
	const code = ref('')
	const checkPhone = (phone) => {
		const regex = /^1[3-9]\d{9}$/;
		return regex.test(phone) ? true : false
	}

	const getCode = async () => {
		if (!checkPhone(form.phone)) return uni.$u.toast('请输入正确的手机号')
		await getMassageCode()
		flag.value = false
		cutDown.value = 60
		let timer = setInterval(() => {
			cutDown.value--
			if (cutDown.value <= 0) clearInterval(timer)
		}, 1000)
	}
	// 获取验证码结束

	// 键盘事件
	const showKeyBorad = ref(false)
	const type = ref(1) // 1 输入密码 2 再次输入密码

	const onKetDown = (e) => {
		uni.vibrateLong();
		if (type.value == 1) {
			form.password.length < 6 ?
				form.password += e :
				showKeyBorad.value = false
			if (form.password.length == 6) showKeyBorad.value = false;
		} else {
			form.rePassword.length < 6 ?
				form.rePassword += e :
				showKeyBorad.value = false
			if (form.rePassword.length == 6) showKeyBorad.value = false;
		}
	}

	const backspaceFn = () => {
		if (type.value == 1) {
			form.password = form.password.slice(0, -1);
		} else {
			form.rePassword = form.rePassword.slice(0, -1);
		}
	}

	// 键盘事件结束

	const submit = async () => {
		if (!form.code) return uni.$u.toast('请输入验证码');
		if (form.password.length < 6) return uni.$u.toast('请输入6位数密码');
		if (form.password !== form.rePassword) return uni.$u.toast('两次密码不一致');
		await setPayPassword({
			...form
		})
		uni.$u.toast('设置成功')
		setTimeout(() => {
			uni.navigateBack()
		}, 1000)
	}
</script>

<style lang='scss'>
	.card {
		padding: 50rpx;
		background-color: white;
		margin-bottom: 30rpx;
		padding-bottom: 30rpx;
	}

	.submit-btn {
		position: absolute;
		bottom: 100rpx;
		width: 710rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.code-btn {
		display: flex;
		align-items: center;
	}

	.btn-text {
		color: #20B128;
	}
</style>