yizhizan-pc/src/views/setting/logOff.vue

<template>
	<div class="logoff">
		<div class="logo flex align-center justify-center">
			<el-icon :size="60" color="#00DD9A">
				<WarningFilled />
			</el-icon>
		</div>
		<div class="title">
			注销亿职赞服务
		</div>
		<div class="titles">
			亿职赞服务注销后，您将放弃以下权益且无法找回
		</div>
		<div class="xieyi">
			<div class="xieyi-item">
				·您将无法通过该账号登录、使用亿职赞平台
			</div>
			<div class="xieyi-item">
				·您将无法访问账号的个人信息（包括账号、昵称、头像等）
			</div>
			<div class="xieyi-item">
				·您账号的所有权益，将视为主动放弃
			</div>
		</div>
		<div class="tongyi">
			点击【确认注销】即代表您已同意<span @click="dialogAgreements = true">《用户注销协议》</span>
		</div>
		<div class="btn flex align-center justify-center">
			<el-button style="width: 400px;" size="large" @click="logOff()" type="primary">确认注销</el-button>
		</div>
		<!-- 协议弹窗 -->
		<agreement :title="title" v-if="dialogAgreements" :dialogAgreements="dialogAgreements" :typeid="typeid"
			@closeAgree="closeAgree" />
	</div>
</template>

<script>
	import {
		ElMessageBox,
		ElMessage,
	} from 'element-plus'
	import agreement from '../../components/agreement/agreement.vue'
	export default {
		components: {
			agreement
		},
		data() {
			return {
				screenHeight: 0,
				dialogAgreements: false,
				title: '用户注销协议',
				typeid: '343',
			}
		},
		mounted() {
			this.screenHeight = window.innerHeight
		},
		methods: {
			//注销账号
			logOff() {
				ElMessageBox.confirm(
					'确认注销后，您将退出登录，并清除所有数据',
					'提示', {
						confirmButtonText: '确认注销',
						cancelButtonText: '我在想想想',
						type: 'warning',
					}
				).then(() => {
					let data = {
						state: 8,
					}
					this.$Request.post('/app/user/logout', data, {
						type: 'json'
					}).then(res => {
						if (res.code == 0) {
							ElMessage({
								message: '提交成功',
								type: 'success',
								duration: 1500,
								offset: this.screenHeight / 2
							})
							localStorage.removeItem('token');
							localStorage.removeItem('userId');
							localStorage.removeItem('userType')
							// 调用重置状态的函数  
							this.$store.dispatch('SET_DATA');
							this.$router.push({
								name: 'login'
							})
						} else {
							ElMessage({
								message: res.msg,
								type: 'error',
								duration: 1500,
								offset: this.screenHeight / 2
							})
						}
					})
				}).catch(() => {})
			},
			closeAgree(data) {
				this.dialogAgreements = data
			},
		}
	}
</script>

<style lang="scss" scoped>
	.logo {
		width: 100%;
	}

	.title {
		width: 100%;
		text-align: center;
		font-size: 28px;
		font-weight: bold;
		margin-top: 20px;
	}

	.titles {
		width: 100%;
		text-align: center;
		margin-top: 10px;
		color: #999999;
	}

	.xieyi {
		width: fit-content;
		padding: 10px 20px 20px 20px;
		background-color: #f5f5f5;
		margin: 0 auto;
		margin-top: 20px;
		border-radius: 10px;

		.xieyi-item {
			margin-top: 10px;
		}
	}

	.tongyi {
		width: 100%;
		text-align: center;
		color: #999999;
		margin-top: 20px;
		font-size: 13px;

		span {
			color: #00DD9A;
			cursor: pointer;
		}
	}

	.btn {
		width: 100%;
		margin-top: 20px;
	}
</style>