MoeNovaClient/pages/my/DelMemConfirm.vue

<template>
	<view class="page">
		<view class="list_info">
			<view class="title">为保证你的账号安全，在你提交的注销申请生效前，需同时满足以下条件</view>

			<view class="content">
				<view class="paragraph">
					<view class="subheading">1. 账号处于安全状态</view>
					<view class="subtitle">账号处于正常使用状态，无被盗风险</view>
				</view>
				<view class="paragraph">
					<view class="subheading">2.账号权限解除</view>
					<view class="subtitle">账号已解除与其他产品的授权登录或绑定关系</view>
				</view>
				<view class="paragraph">
					<view class="subheading">3.账号无任何纠纷，包括投诉举报</view>
					<view class="subtitle">本账号及通过本账号接入的第三方产品中没有未完成和/或存在争议的服务
						<view style="margin-top: 10rpx;">本账号无任何纠纷，包括投诉举报、侵权等</view>
					</view>
				</view>
				<view class="paragraph red">
					注意：删除账号后，你将无法找回账号信息，你的所有数据和消息也会一并删除
				</view>
			</view>
			<view class="agree">
				<checkbox-group @change="agreeChange">
					<label>
						<checkbox value="agree" :checked="agree" :class="{ 'checked': agree, 'custom-checkbox': true }"
							style="display: none;" />
						<view class="custom-checkbox-box" :class="{ 'checked': agree }"></view>
					</label>
				</checkbox-group>
				<text @click="goPage()"><text style="color: #7c7c7c;padding-right: 5rpx;">我已阅读并同意</text> 注销协议</text>
			</view>
			<view class="btn_submit" @click="DelMem()" :class="{ disabled: !agree }">下一步</view>
		</view>
		<DialogBox ref="DialogBox"></DialogBox>
	</view>
</template>

<script>
	import DialogBox from '@/components/DialogBox/DialogBox.vue';
	export default {
		components: {
			DialogBox
		},
		data() {
			return {
				agree: false,
			};
		},
		methods: {
			goPage() {
				uni.navigateTo({
					url: '/pages/AboutUs/UserLogoutAgreement'
				})

			},
			agreeChange(e) {
				this.agree = e.detail.value.includes('agree');
			},
			nextStep() {
				if (this.agree) {
					uni.navigateTo({
						url: '/pages/my/DelMemVerify',
					});
				}
			},
			// 目前逻辑当前页面直接注销
			DelMem() {
				var that = this;
				//   验证原始手机号 
				var that = this;
				this.$refs['DialogBox'].confirm({
					title: '警告',
					content: '1、注销账号是不可逆操作，该账号下所有一切资料一旦注销无法恢复；\n2、注销后，你账号下所有权益将被清除。',
					DialogType: 'inquiry',
					btn1: '否',
					btn2: '是',
					animation: 0
				}).then(() => {
					uni.request({
						url: that.$apiHost + '/My/delete', //检测是否已绑定
						data: {
							uuid: getApp().globalData.uuid
						},
						header: {
							'content-type': 'application/json' //自定义请求头信息
						},
						success: (res) => {
							uni.removeStorageSync("wapptoken");
							uni.redirectTo({
								url: '/pages/login/login',
							})
						}
					})
				}).catch(() => {
					// 点击取消按钮的回调
				}) 
			},
		},
	};
</script>

<style scoped lang="scss">
	.page {
		padding: 40rpx;
		box-sizing: border-box;
	}

	.list_info {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		color: #1F1F1F;

		.title {
			margin-top: 60rpx;
			font-family: 'PingFang SC-Bold';
			font-weight: 400;
			font-size: 40rpx;
			margin-bottom: 34rpx;
		}

		.paragraph {
			margin-bottom: 36rpx;

			.subheading {
				font-size: 28rpx;
				font-family: 'PingFang SC-Bold';
				font-weight: 400;
			}

			.subtitle {
				margin-top: 4rpx;
				font-size: 24rpx;
				font-family: 'PingFang SC';
				font-weight: 400;
				color: #7C7C7C;
			}

			&.red {
				color: #FF0000;
				font-size: 24rpx;
				font-weight: 400;
			}
		}

		.agree {
			margin-top: 200rpx;
			text-align: left;
			width: 626rpx;
			color: #333;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			font-family: 'PingFang SC-Medium';

			.custom-checkbox-box {
				display: inline-block;
				width: 28rpx;
				height: 28rpx;
				background-image: url('../../static/icon/wd_icon_gouxuan01.png'); // 未选中状态图片路径
				background-size: cover;
				margin-right: 10rpx;
				vertical-align: middle;

			}

			.custom-checkbox-box.checked {
				background-image: url('../../static/icon/wd_icon_gouxuan02.png'); // 选中状态图片路径 
			}
		}

		.btn_submit {
			width: 660rpx;
			height: 96rpx;
			margin: 0 auto;
			margin-top: 40rpx;
			background: #1f1f1f;
			border-radius: 50rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #ffffff;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			&.disabled {
				background: #999;
			}
		}
	}
</style>