ebike-ui/ebike-user/pages/user/login/userLogout.vue

<template>
	<view class="bg-white padding" style="height: 100vh;">
		<view class="topimg flex justify-center align-center">
			<image  :src="`${imgPath}static/userui/danger.png`" mode=""></image>
		</view>
		<view class=" padding text-center text-black" style="margin-bottom: 15px;">
			<h3>注销账号将永久失效且不可恢复，并将放弃以下权益资产与服务</h3>
		</view>
		<view class=" textinfoclass padding text-black">
			<view class="textwzclass">
				1、账号注销后，将清空手机号、用户名、个人头像等账号信息，且无法继续登录本账户
			</view>
			<view class="textwzclass">
				2、该账号的订单记录等都将被清空且无法恢复
			</view>
			<view class="textwzclass">
				3、请确保所有交易已完结且无纠纷，账号注销后的历史交易可能产生的资金退回权益等将事做自动放弃
			</view>
		</view>
		<view class="">
			<view class="wxtstitle">
				温馨提示:
			</view>
			<view class="wxtsnr text-gray">
				注销账号后,您的所有数据和账号信息将全部丢失,账号一旦注销不可恢复,为避免您的个人损失,请谨慎操作。如对注销有疑义，去爱请致电:400-888-88888
			</view>

		</view>
		<view class=" flex flex-direction" style="margin-top: 60px; ">
			<button class="cu-btn lg" @click="logout">确认注销</button>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import * as api from '@/utils/api.js';
	import {
		showModelMessage
	} from '@/utils/tools.js';
	import config from '@/utils/config';
	const imgPath = config.imgPath;


	// 创建一个响应式变量来控制是否已注销
	const isLoggedOut = ref(false);

	// 注销方法
	const logout = () => {
		let wechat_user = uni.getStorageSync('wechat_user');
		if (wechat_user) {
			uni.showModal({
				title: '注销提示',
				content: '注销将会清空您所有数据，确认要注销吗？',
				success: (res) => {
					if (res.confirm) {
						const params = {
							"userId": wechat_user.userId
						}
						api.callOrdereApi("ebikeUser/deRegister", params).then(res => {
							if (res.code == 200) {
								uni.clearStorage("wechat_user");
								showModelMessage("注销成功").then(()=>{
									uni.navigateTo({
										url: "/pages/user/home/home"
									})
								});
								
							} else {
								showModelMessage(res.message)
							}
						});
					}
				}
			});
		} else {
			showModelMessage("请先授权登录！").then(() => {
				uni.navigateTo({
					url: '/pages/user/login/wx_login'
				});
			});
		}
	};
</script>

<style scoped>
	/* 页面样式 */

	.topimg {
		height: 60px;
		width: 100%;
	}

	.topimg image {
		height: 50px;
		width: 50px;
	}

	.textinfoclass {
		box-shadow: 0 0 10px rgba(194, 194, 194, 0.5);
		/* 模拟虚化效果 */
	}

	button {
		color: white;
		background-image: linear-gradient(to right, rgb(255, 51, 52), rgb(255, 145, 118));
		/* 从左到右的渐变色 */
		border: none;
		padding: 12px 24px;
		/* 增加一些内边距让按钮看起来更大 */
		border-radius: 8px;
		/* 圆角效果，使按钮更平滑 */
		cursor: pointer;
		font-size: 16px;
	}





	.wxtstitle {
		font-size: 12px;
		margin-left: 10px;
		color: rgb(141 141 141);
		font-weight: bold;
		margin-top: 40px;
		margin-bottom: 5px;
	}

	.wxtsnr {
		font-size: 12px;
		padding: 10px;
		background-color: rgb(246, 246, 246);
	}

	.textwzclass {
		margin: 10px 2px;
		font-size: 12px;
		font-weight: bold;
		color: rgb(64, 73, 95);
	}
</style>