mechanicStore-app/pages/myEdit/logout.uvue

<template>
	<view class="page-container">
		<!-- 头部 -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<u-icon name="arrow-left" size="24" color="#333"/>
			</view>
			<view class="header-title">
				注销账号
			</view>
			<view class="header-right"></view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content">
			<!-- 提示信息 -->
			<view class="tip-text">
				为保证你的账号安全，在你提交的注销申请生效前，需同时满足以下条件
			</view>
			
			<!-- 条件列表 -->
			<view class="conditions">
				<view class="condition-item">
					<text class="condition-number">1.</text>
					<view class="condition-content">
						<text class="condition-title">账号订单均已完成</text>
						<text class="condition-desc">本账号在平台交易的订单均已完成，若存在未完成的订单状态将无法注销。</text>
					</view>
				</view>
				
				<view class="condition-item">
					<text class="condition-number">2.</text>
					<view class="condition-content">
						<text class="condition-title">账号无任何纠纷</text>
						<text class="condition-desc">包括投诉举报，均已处理完结</text>
					</view>
				</view>
				
				<view class="condition-item">
					<text class="condition-number">3.</text>
					<view class="condition-content">
						<text class="condition-title">账号内的余额、资产自愿放弃</text>
						<text class="condition-desc">若注销平台将视为你自愿放弃账户的余额、资产。</text>
					</view>
				</view>
			</view>
			
			<!-- 确认注销按钮 -->
			<button class="logout-btn" :disabled="!agree" @click="confirmLogout">确认注销</button>
			
			<!-- 协议勾选 -->
			<view class="agreement">
				<checkbox :value="agree" @change="agree = !agree"></checkbox>
				<text class="agreement-text">我已同意阅读并同意《小丁到家注销协议》</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	
	const agree = ref(false);
	
	const goBack = () => {
		uni.navigateBack();
	};
	
	const confirmLogout = () => {
		uni.showModal({
			title: '确认注销',
			content: '您确定要注销账号吗？注销后将无法恢复！',
			success: (res) => {
				if (res.confirm) {
					uni.showToast({ title: '注销成功', icon: 'success' });
					setTimeout(() => {
						uni.navigateTo({ url: '/pages/login/login' });
					}, 1500);
				}
			}
		});
	};
</script>

<style scoped>
	.page-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #ffffff;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.header-left, .header-right {
		width: 60rpx;
	}
	
	.header-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.content {
		padding: 30rpx;
	}
	
	.tip-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		margin-bottom: 40rpx;
	}
	
	.conditions {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 40rpx;
	}
	
	.condition-item {
		display: flex;
		margin-bottom: 30rpx;
	}
	
	.condition-item:last-child {
		margin-bottom: 0;
	}
	
	.condition-number {
		font-size: 28rpx;
		font-weight: bold;
		color: #ff6b35;
		margin-right: 15rpx;
	}
	
	.condition-content {
		flex: 1;
	}
	
	.condition-title {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.condition-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
	}
	
	.logout-btn {
		width: 100%;
		background-color: #ffc107;
		color: #333;
		font-size: 30rpx;
		font-weight: bold;
		border-radius: 50rpx;
		padding: 20rpx;
		border: none;
		margin-bottom: 30rpx;
	}
	
	.logout-btn[disabled] {
		background-color: #d9d9d9;
		color: #999;
	}
	
	.agreement {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.agreement-text {
		font-size: 26rpx;
		color: #666;
		margin-left: 10rpx;
	}
</style>