menber-center/pages/setting/cancelAccount/cancelAccount.vue

<template>
	<view class="container">
		<view class="desc-box">
			<view class="desc-text">您正在申请广州市房地产中介协会会员中心小程序账户注销，为保障您的权益，我们再次提醒您：</view>
			<view class="desc-text">1、注销申请一旦提交，将无法撤销，且系统可能无法恢复相关数据，请您务必谨慎操作！我们将在您申请注销账号起15个工作日内完成与该账号相关的数据处理工作。</view>
			<view class="desc-text">2、账号注销7个工作日内，您无法通过相同手机号或身份证重新注册/登录广州市房地产中介协会会员中心小程序账号。</view>
			<view class="desc-text">3、如您在注销账号的过程中遇到任何问题，请拨打协会客服热线（020-66676400）与我们取得联系。</view>
		</view>
		<view class="form-box">
			<u-form :model="formData.form" ref="formRef" label-width="120" :label-style="{fontWeight: 'bold', fontSize: '26rpx'}">
				<u-form-item prop="phone">
					<view class="input-code">
						<view class="input">
							<u-input v-model="formData.form.phone" disabled :border="true" type="text" placeholder="请输入绑定手机号"/>
						</view>
						<view class="btn">
							<text class="form-item-text" @click="getCode">{{codeText}}</text>
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="code">
					<u-input v-model="formData.form.code" :border="true"  type="text" placeholder="请输入验证码"/>
				</u-form-item>
			</u-form>
		</view>
		<view class="bottom-box">
			<u-checkbox-group style="display: flex;justify-content: center;margin-bottom: 20rpx;">
				<u-checkbox v-model="cancelCheck" name="yes" shape="circle" label-size="26">我已阅读并同意&#x300A;会员中心小程序账号注销通知&#x300B;</u-checkbox>
			</u-checkbox-group>
			<u-button type="primary" shape="circle" @click="onSubmit">提交</u-button>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue'
	import { onShow, onReady } from '@dcloudio/uni-app'
	import { msgError, msgSuccess, showConfirm, msg } from '@/utils/common'
	import { useAuthStore } from '@/store/authStore'
	import {
		smsSend
	} from "@/api/login.js"
	import { unregister } from '@/api/setting.js'
	
	const authStore = useAuthStore()
	
	const formRef = ref()
	const formData = reactive({
		form: {
			phone: null,
			code: null,
			captchaUuid: null
		},
		rules: {
			phone: [
				{ 
					required: true, 
					message: '请输入绑定手机号', 
					// 可以单个或者同时写两个触发验证方式 
					trigger: 'blur',
				}
			],
			code: [
				{ 
					required: true, 
					message: '请输入验证码', 
					// 可以单个或者同时写两个触发验证方式 
					trigger: 'blur',
				}
			],
		}
	})
	const isAwaitCode = ref(false)
	const codeText = ref('获取验证码') // 59秒重新获取
	const cancelCheck = ref(false)
	function getCode() {
		let {phone} = formData.form
		if (!/^1[3-9]\d{9}$/.test(phone)) {
			msg("请输入正确的手机号");
			return;
		}
		if (!isAwaitCode.value) {
			smsSend({phone}).then(res => {
				if (res && res.data.captchaUuid) {
					formData.form.captchaUuid = res.data.captchaUuid
					isAwaitCode.value = true
						// 倒计时60秒后重新获取
						let time = 60
						codeText.value = `重新获取(${time > 10 ? time : '0' + time}s)`
						const timer = setInterval(() => {
							time--
							codeText.value = `重新获取(${time > 10 ? time : '0' + time}s)`
							if (time <= 0) {
								clearInterval(timer)
								codeText.value = '获取验证码'
								isAwaitCode.value = false
							}
						}, 1000)
				}
			})
		} else {
			msg('倒计时结束后再发送');
		}
	}
	
	function onSubmit() {
		formRef.value.validate((valid) => {
			if (valid) {
				if (!cancelCheck.value) {
					msg('请阅读并同意《会员中心小程序账号注销通知》')
					return
				}
				// 提交
				showConfirm('是否确认注销').then(res => {
				 	if (res.confirm) {
						const form = {
							captcha: formData.form.code,
							captchaUuid: formData.form.captchaUuid
						}
						uni.showLoading({
							title: "请稍候..."
						})
						unregister(form).then(res => {
							if (res && res.code === 0) {
								uni.hideLoading()
								authStore.clearAuthToken()
								authStore.cleanUserInfo()
								uni.reLaunch({
									url: '/pages/initial/initial?isCancelAccount=1'
								})
							}
						})
				 	}
				})
			}
		})
	}
	
	onReady(() => {
		formRef.value.setRules(formData.rules)
	})
	onShow(() => {
		formData.form.phone = authStore.userInfo.phone
	})
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100vw;
		background-color: $uni-bg-color;
		padding: 20rpx;
		
		.desc-box {
			padding: 20rpx 0;
			margin-bottom: 20rpx;
			.desc-text {
				text-indent: 2em;
				line-height: 60rpx;
				&:nth-child(1) {
					text-indent: 0em;
				}
			}
		}
		
		.form-box {
			padding: 20rpx 0;
			
			.input-code {
				display: flex;
				align-items: center;
				gap: 20rpx;
				.input {
					width: 70%;
				}
				.btn {
					width: 30%;
					text-align: center;
				}
			}
		}
		.bottom-box {
			margin-top: 50rpx;
			padding: 0 50rpx;
		}
	}
</style>