设置添加注销账号功能

property-uniapp-project/manifest.json

@@ -3,7 +3,7 @@
     "appid" : "__UNI__29C3D60",
     "description" : "智慧社区居民端面向小区业主使用，支持注册、验证码、账号密码多种登录方式，提供密码找回功能，账号使用安全便捷。支持多小区切换，首页设有轮播 banner、社区公告，集成远程开门、生活缴费、在线报修、访客邀请、社区活动常用服务。全服务板块统一涵盖门禁开门、线上缴费、报修申报、访客预约、投诉反馈、问卷调研、活动报名、社区公示、一键联系物业功能。个人中心可管理房屋、住户、车位、车辆信息，支持更换手机号、修改密码、消息通知设置、版本更新及账号退出，一站式满足业主居家生活、社区服务、房产车辆管理需求，实现社区生活数字化、便捷化。",
     "versionName" : "1.0.1",
-    "versionCode" : 106,
+    "versionCode" : 107,
     "transformPx" : false,
     "uniCloud" : {
         "provider" : "aliyun",

property-uniapp-project/pageSubPack/api/apiSub.js

@@ -83,6 +83,10 @@ export const authChangePassword = (data) => {
 export const authLogout = (data) => {
 	return post(`/api/resident/auth/logout`, data)
 }
+// 注销账号
+export const authDeleteAccount = (data) => {
+	return post('/api/resident/auth/cancelAccount', data)
+}
 // 编辑房屋
 export const upDateMyHouse = (data) => {
 	return putMethod(`/api/resident/my/house/${data.id}`, data)

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

@@ -0,0 +1,209 @@
+<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>

property-uniapp-project/pageSubPack/my/settingIndex.vue

@@ -66,6 +66,10 @@
 			type: 'text',
 			value: '9.2M'
 		},
+		{
+			title: '注销账号',
+			type: 'arrow'
+		},
 		{
 			title: '升级版本',
 			type: 'text',
@@ -113,7 +117,7 @@
 			currentVersion.value = manifest.version
 		}
 		// #endif
-		settingList.value[4].value = '当前版本 ' + currentVersion.value
+		settingList.value[5].value = '当前版本 ' + currentVersion.value
 	}
 
 	// 版本号比较：v1 > v2 返回 1，v1 = v2 返回 0，v1 < v2 返回 -1
@@ -234,6 +238,10 @@
 			setTimeout(() => {
 				uni.hideLoading();
 			}, 2500);
+		} else if (item.title == '注销账号') {
+				uni.redirectTo({
+					url: '/pageSubPack/my/deleteAccount'
+				});
 		} else if (item.title == '升级版本') {
 			checkVersionUpdate()
 		}

property-uniapp-project/pages.json

@@ -232,6 +232,13 @@
 						"navigationStyle": "custom"
 					}
 				},
+					{
+						"path": "deleteAccount",
+						"style": {
+							"navigationBarTitleText": "",
+							"navigationStyle": "custom"
+						}
+					},
 				{
 					"path": "myHouseIndex",
 					"style": {
@@ -508,4 +515,4 @@
 		"backgroundColor": "#F8F8F8"
 	},
 	"uniIdRouter": {}
-}
+}