CBB3/pages/user/userinfo/cancellation.vue

<template>
	<view class="app">
		<view class="app-body fx-h fx-bc fx-ac">
			<view class="app-icon fx-h fx-bc fx-ac">
				<u-icon name="info-circle-fill" size="80" color="#db292b" ></u-icon>
			</view>
			<view class="zx-title">将所绑定的账号注销</view>
			
			<view class="app-pannel">
				<view class="app-h1">注销后，您留存的信息被清空且无法找回，具体包括</view>
				<view class="app-item fx-r fx-bc">
					<view class="round"></view>
					个人资料，实名认证信息等身份信息
				</view>
				
				<view class="app-item fx-r fx-bc">
					<view class="round"></view>
					银行卡的快捷支付（含卡通）服务和交易
				</view>
				
				<view style="background: #f1f1f1;height:1px;margin: 10px 0;"></view>
				<view class="app-vr">请确保所有交易已完结且无纠纷，账号删除后的历史交易可能产生的资金退回权益等将视为作自动放弃。</view>
			</view>
			
			<view class="check-tip fx-r" @click="isRead = !isRead">
				<image  v-if="isRead" src="/static/img/radio_buttons_btn.png"></image>
				<image  v-else  src="/static/img/radio_buttons.png"></image>请勾选<text @tap.stop="tapPrivacy">《用户注销协议》</text>即代表您已经同意用户注销协议，注销之后将无法恢复，也无备份，请慎重操作。
			</view>
			
			<view class="btn" @tap="zxBtn">申请注销</view>
			
		</view>
		
	</view>
</template>


<script>
	import {mapState,mapMutations} from 'vuex';
	export default {
		computed: mapState(['user','sysData']),
		data() {
			return {
				isRead:true
			}
		},
		methods: {
			...mapMutations(['setUser','loginOut']),
			zxBtn(){
				this.utils.showModal("确认要注销吗",
				 ()=>{
					 uni.showLoading({ title: '注销中..' });
					 this.request
					 .post("zxUser")
					 .then(res=>{
					 	uni.hideLoading();
					 	if(res.code == 200) {
							this.utils.showAlert({title:"系统提示","content":res.msg},()=>{
								this.loginOut();
								uni.$emit('loginout',1);
								uni.reLaunch({
									url:"/pages/index/home"
								})
								
							});
					 	} else {
					 		uni.showToast({ title:res.msg,icon:"none",mask:true});
					 	}
					 });
				});
			},
			//注销协议
			tapPrivacy:function(){
				uni.navigateTo({ url:'/pages/operation/cancellation' })
			}
			
		}
	}
</script>

<style>
	
	.app-icon{padding-top: 40px;}
	.app-icon image{width: 40px;height: 40px;}
	.zx-title{font-weight: bold;color: #000;margin-top: 20px;}
	.app-pannel{background: #fff;padding: 20px;margin: 10px;border-radius: 6px;}
	.app-pannel .app-h1{font-size: 14px;}
	.app-pannel .app-item{font-size: 12px;margin: 6px 0;}
	.app-pannel .app-item .round{background: #db292b;width: 5px;height: 5px;border-radius: 50%;margin-right: 6px;}
	.app-vr{font-size: 14px;}
	.btn{background: #db292b;height: 40px;width: calc(100% - 20px);border-radius: 10px;text-align: center;line-height: 40px;color: #fff;}
	.check-tip{font-size: 12px;color: #aeaeae;padding: 20px 10px;}
	.check-tip image{width: 15px;height: 15px;margin: 0px 2px;}
	.check-tip text{color: #188aee;display: inline-block;}
</style>