property-resident-side/property-uniapp-project/pageSubPack/my/deleteAccount.vue

<template>
	<view class="contentStyle">
		<view class="status-bar"></view>
		<uni-nav-bar title="注销账号" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
		</uni-nav-bar>

		<scroll-view class="page" scroll-y>
			<!-- 提示信息 -->
			<view class="warning-box">
				<text class="warning-title">注销须知</text>
				<text class="warning-text">1. 账号注销后，所有数据将被永久删除且无法恢复。</text>
				<text class="warning-text">2. 已绑定的房屋、车辆等信息将被清空。</text>
				<text class="warning-text">3. 如有未结清的费用，请先结清后再注销。</text>
			</view>

			<!-- 表单区域 -->
			<view class="form-container">
				<!-- 密码 -->
				<input class="input-item" type="password" v-model="password" placeholder="请输入登录密码"
					placeholder-class="input-placeholder" />
			</view>
		</scroll-view>

		<view class="bottom-btn">
			<button class="submit-btn" :class="{ 'submit-btn--disabled': countdown > 0 }"
				:disabled="countdown > 0 || !password" @click="onDeleteAccount">
				{{ countdown > 0 ? `请仔细阅读注销须知（${countdown}s）` : '确认注销' }}
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onUnload } from '@dcloudio/uni-app'
import { authDeleteAccount } from '../api/apiSub.js'

const password = ref('')
const countdown = ref(0)
let timer = null

// 开始倒计时
const startCountdown = () => {
	countdown.value = 10
	timer = setInterval(() => {
		countdown.value--
		if (countdown.value <= 0) {
			clearInterval(timer)
			timer = null
		}
	}, 1000)
}

// 提交注销
const onDeleteAccount = () => {
	if (countdown.value > 0) return

	if (!password.value) {
		uni.showToast({ title: '请输入登录密码', icon: 'none' })
		return
	}

	uni.showModal({
		title: '最后确认',
		content: '注销后所有数据将永久删除且无法恢复，确定要注销账号吗？',
		confirmText: '确认注销',
		confirmColor: '#e74c3c',
		success: (res) => {
			if (res.confirm) {
				uni.showLoading({ title: '注销中...', mask: true })
				authDeleteAccount({
					password: password.value
				}).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						uni.showToast({ title: '注销成功', icon: 'success' })
						setTimeout(() => {
							uni.redirectTo({
								url: '/pageSubPack/loginSub/pwd-login'
							})
						}, 1500)
					} else {
						uni.showToast({ title: res.msg || '注销失败', icon: 'none' })
					}
				}).catch((err) => {
					uni.hideLoading()
					uni.showToast({ title: err.msg || '注销失败', icon: 'none' })
				})
			}
		}
	})
}

const goBack = () => {
	uni.redirectTo({
		url: '/pageSubPack/my/settingIndex',
	});
}

// 页面进入时开始倒计时
onMounted(() => {
	startCountdown()
})

onUnload(() => {
	if (timer) {
		clearInterval(timer)
		timer = null
	}
})
</script>

<style lang="scss">
page {
	background: #f9f9f9;
}
</style>

<style scoped>
.contentStyle {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f9f9f9;
}

.page {
	flex: 1;
	overflow-y: auto;
	padding: 0px 40rpx;
	box-sizing: border-box;
}

/* 警告提示 */
.warning-box {
	background-color: #fff7e6;
	border-left: 6rpx solid #faad14;
	border-radius: 8rpx;
	padding: 30rpx;
	margin-top: 30rpx;
}

.warning-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #d48806;
	display: block;
	margin-bottom: 16rpx;
}

.warning-text {
	font-size: 26rpx;
	color: #8c6d1f;
	line-height: 1.8;
	display: block;
}

/* 表单容器 */
.form-container {
	margin-top: 40rpx;
}

/* 输入框样式 */
.input-item {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	padding: 0 20rpx;
	margin-bottom: 30rpx;
	border-radius: 8rpx;
	font-size: 30rpx;
	color: #333;
	box-sizing: border-box;
	background-color: #fff;
}

/* 占位符样式 */
.input-placeholder {
	color: #999;
	font-size: 30rpx;
}

/* 底部按钮 */
.bottom-btn {
	padding: 20rpx 30rpx 40rpx;
}

/* 确认按钮 */
.submit-btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	background-color: #e74c3c;
	color: #fff;
	font-size: 32rpx;
	border-radius: 8rpx;
	border: none;
}

.submit-btn--disabled{
	background-color: #ccc;
	color: #999;
}
.status-bar {
	width: 100vw;
	height: 46px;
}
</style>