zhapp/pages/set/accountCancellation.vue

<template>
	<view class="page dis f-c ">
		<view class="title dis a-c ">
			<image class="mr-1" src="/static/icon/my/warning.png" mode=""></image>
			<text>注销账号不可逆，请谨慎操作！</text>
		</view>
		<view class="content dis f-c ">
			<text>1.注销后账号将退出%登录租户名称%无法登录，无法找回。</text>

			<text>2.注销后你的身份信息，三方账号（微信，支付宝）不会存在之前的账号绑定关系。</text>

			<text>3.注销前请确保钱包内余额为0，且无其它资金纠纷问题。</text>

			<text>4.注销后你在%登录租户名称%下的订单以及其它业务相关数据将被清除。</text>
		</view>
		<view class="footerfixed">
			<view class="dis a-c checkbox">
				<u-checkbox-group v-model="checkbox" placement="row" iconPlacement="left" size="14">
					<u-checkbox v-for="(item, index) in checkboxList1" :key="index" :name="item" shape="circle"
						activeColor="#FDE935" iconColor='#333' iconSize="10">
					</u-checkbox>
				</u-checkbox-group>
				<text>请您阅读并同意 <text style="color: #1F1F1F;" class="ml-1 mr-1" @click="logoutAgreement">注销协议</text>
				</text>
			</view>
			<view class="btn dis a-c j-s">
				<view class="dis a-c j-c " @click="back">
					暂不注销
				</view>
				<view class="dis a-c j-c " @click="logout">
					确定注销
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				checkbox: [],
				// 基本案列数据
				checkboxList1: ['选中'],
			}
		},
		onShow() {

		},
		onLoad() {},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			//返回上个页面
			back() {
				uni.navigateBack(-1)
			},
			//注销
			logout() {
				if (this.checkbox.length == 0) {
					return uni.showToast({
						title: '请阅读后勾选并同意《注销协议》',
						icon: 'none'
					});
				}
				uni.navigateTo({
					url: '/pages/login/smsCode?mobile=' + this.userInfo.sysUser.mobile,
				})

			},
			//注销协议
			logoutAgreement() {
				uni.navigateTo({
					url: '/pages/set/logoutAgreement'
				})
			},
		}
	}
</script>

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

	.title {
		image {
			width: 36rpx;
			height: 36rpx;
		}

		font-size: 36rpx;
		color: #333;
		font-weight: bold;
	}

	.content {
		margin-top: 30rpx;
		font-size: 30rpx;
		color: #333;

		text {
			margin-bottom: 60rpx;
		}
	}

	.footerfixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;

		.checkbox {
			margin-left: 40rpx;
			margin-bottom: 40rpx;
			font-size: 26rpx;
			color: #999;
		}

		.btn {
			width: 100%;
			padding: 25rpx 30rpx 54rpx;
			box-sizing: border-box;
			background: linear-gradient(0, #FFFFFF 0%, rgba(255, 254, 245, 0.8) 100%);

			view:first-child {
				flex: 1;
				border-radius: 58rpx 58rpx 58rpx 58rpx;
				border: 1rpx solid #FDE935;
				padding: 20rpx;
				box-sizing: border-box;
				margin-right: 30rpx;
			}

			view:last-child {
				flex: 1;
				background: #FDE935;
				border-radius: 58rpx 58rpx 58rpx 58rpx;
				padding: 20rpx;
				box-sizing: border-box;
			}
		}
	}
</style>