vue-insagent-app/pages/set/accountCancellation.vue

<template>
	<view class="page">
		<view class="header dis a-c f-c">
			<image src="../../static/image/my/zgcx.png" mode=""></image>
			<text class="name">申请注销晋掌柜账号</text>
		</view>
		<view class="content">
			<view class="mb-4">
				<text class="p">在您注销账号前，请确保账号内的 <text style="color: #343EEF;">余额</text> 已全部提现，<text
						style="color: #343EEF;">订单</text> 已全部关闭以保障您的账号，财产安全。</text>
			</view>
			<text class="title">注销账号后，将放弃所有资产和权益</text>
			<ul class="ul">
				<li>身份、帐号信息、增员关系等资产将清空且无法恢复</li>
				<li>订单记录、出单员身份、增员关系及收益记录清空</li>
				<li>帐号一旦被注销将不可恢复，请在操作前自行备份帐号相关的所有信息和数据</li>
				<li>账号注销前请确认不存在或不需要管理的业务团队，否则一旦注销后将会导致其他产品或服务的必要功能无法实现，你将无法再登录掌柜应用。</li>
			</ul>
		</view>
		<view class="footer dis f-c a-start">
			<view class="selection">
				<u-checkbox v-model="checked" style="margin-top: 4px;"></u-checkbox>
				<text>
					我已阅读并同意<text @tap="nav('/pages/login/logoutAgreement')" class="text-color">《用户注销协议》</text>
				</text>
			</view>
			<view class="btn dis a-c j-c " @click="accountSubmit">
				申请注销
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				checked: false,
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onShow() {

		},
		onLoad() {

		},
		methods: {
			...mapMutations(['emptyUserInfo']),
			nav(url) {
				uni.navigateTo({
					url: url
				});
			},
			async accountSubmit() {
				let _this = this;
				if (!this.checked) {
					return uni.showToast({
						title: '请勾选用户注销协议',
						icon: 'none'
					});
				}
				uni.showModal({
					title: '提示',
					content: '是否要注销账户？',
					confirmText: '立刻注销',
					success: async res => {
						if (res.confirm) {
							let res = await _this.$http.get('/user/userLogout?userId=' + _this.userInfo
								.sysUser.id)
							console.log(res);
							if (res.code == 200) {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
								_this.emptyUserInfo();
								setTimeout(() => {
									uni.reLaunch({
										url: "/pages/login/login"
									})
									return true;
								}, 500);
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						}
					},
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.header {
		border-top: 1px solid #EEEEEE;
		border-bottom: 1px solid #EEEEEE;
		padding: 69rpx 69rpx 65rpx;

		image {
			width: 72rpx;
			height: 72rpx;
			margin-bottom: 24rpx;

		}

		.name {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.content {
		padding: 40rpx 40rpx;

		.p {
			font-size: 28rpx;
			color: #333;
		}

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-top: 60rpx;
		}

		.ul {
			li {
				font-size: 28rpx;
				color: #666;
				margin: 30rpx 0;
			}
		}
	}

	.footer {
		padding: 32rpx;

		.selection {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 40rpx;

			.text-color {
				color: #343EEF;
			}
		}

		.btn {
			width: 100%;
			background: #343EEF;
			border-radius: 6rpx;
			padding: 16rpx;
			color: #fff;
			font-size: 32rpx;
		}
	}
</style>