jp-education-student/pages/parents/mine/logout.vue

<template>
	<view class="all">
		<u-navbar title="注销账号" >
		
		</u-navbar>	 
		<view class="logout-head">
			<img src="../../../assets/img/logout.png" alt="">
			<p>注销帐号</p>
		</view>
		<view class="logout-text">
			<p>我们很遗憾您做出注销帐号的决定，在提交申请前请您仔细阅读以下内容:</p>
			<p>	1.您应确保您有权决定该账户的注销事宜,不侵犯任何第三方的合法权益,如因此引发任何投诉争议,由您自行承担。</p>
			<p>	2.帐号注销后您无法再使用本社区的各项服务,您的个人信息及求助记录也将被清空。</p>
			<p>	3.如您已被国家机关调查或正处于诉讼、仲裁程序中,请注意，注销您的帐号并不代表此帐号注销前的帐号行为和相关责任得到豁免或减轻。</p>
		</view>
		<view class="logout-btn">
			<u-button class="logout-btn1" shape="circle" type="" @click="logout">
				<span>继续注销</span>
			</u-button>
			<u-button class="logout-btn2" shape="circle" type="success" @click="toMine">
				<span>我再想想</span>
			</u-button>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/index.js'
	
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			toMine() {
				uni.navigateBack({
					
				})
			},
			logout() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				API.deleteUser().then((res) => {
					uni.hideLoading();
					
					this.carhelp.logoff();
					uni.reLaunch({
						url: '/pages/parents/login/login'
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	
	.collapse{
		background-color: #fff;
		padding:0 10px;
	}
	.logout-head{
		background-color: #FF5E5E ;
		padding: 20px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		img{
			height: 52px;
			width: 52px;
		}
		p{
			color:#fff;
			margin-top: 4px;
			line-height: 28px;
		}
		
	}
	.logout-text{
		padding: 24px;
		p{
			line-height: 28px;
			
		}
	}
	.logout-btn{
		display: flex;
		justify-content: space-between;
		padding: 0 24px;
		
	}
	.logout-btn1{
		color:#BBBBBB!important;
		background-color:#fff!important;
		flex: 0.4;
		span{
			color:#333;
		}
		
	}
	.logout-btn2{
		background-color:#00B962!important;
		flex: 0.4;
		border-color: #00B962!important;
		color:#fff!important;
		
	}
</style>