frontend-app/pages/rwa_package/setting/account-out.vue

<template>
	<view class="content">
		<TopSafe></TopSafe>
		<Header title="注销账号" />
		<view class="setting-view">
			<view class="name-box">
				<view class="top-view">
					<u-icon name="error-circle-fill" color="#e88900" size="54"></u-icon>
					<text class="text-36 text-zu text-bold mt-12">注销信任桥账号</text>
				</view>
				<view class="mid-view">
					<text class="text-fu text-28">账号注销后不可恢复，请您谨慎操作。注销成功后，您将无法登录或使用原账号，账号内的信息和权益将均无法找回:</text>
					<text class="text-fu text-28 mt-48">1.账号将无法登录 </text>
					<text class="text-fu text-28">2.历史订单将无法查询 </text>
					<text class="text-fu text-28">3.放弃会员等级权益和会员积分 </text>
					<text class="text-fu text-28">4.放弃钱包余额、优惠券等资产 </text>
				</view>
				<text class="text-fu text-28 mt-32">*详细注销信息可阅读
					<text class="text-zi" @click="onJump">《信任桥账号注销协议》</text>
				</text>
			</view>
			
		</view>
		<view class="bottom-btn">
			<MyBtn text="已清楚风险，确定注销" @ok="onZhu"></MyBtn>
		</view>
		<u-modal :show="tipsShow" title="提示" showCancelButton @cancel="onCancel" @confirm="onConfirm" :content='content'></u-modal>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
import { getUserInfo,updateName,deleteAccount } from '@/api/auth.js';
import Header from '@/components/common/header.vue';
import { clear } from '@/utils/auth.js';
import TopSafe from '@/components/common/top-safe.nvue'
import MyBtn from '@/components/common/my-btn.vue'
import func from '@/utils/func.js';

export default {
	components: { Header, TopSafe,MyBtn },
	data() {
		return {
			userInfo: null,
			inputText:'',
			tipsShow:false,
			content:'是否确定注销账号？'
		};
	},
	onShow() {
	},
	onLoad() {
		this.init();
		// this.userinfo();
	},
	methods: {
		init() {
			this.userinfo()
		},
		onJump(){
			uni.navigateTo({
				url:'/pages/rwa_package/setting/out-agreement'
			})
		},
		onZhu(){
			this.tipsShow = true;
		},
		onConfirm(){
			// uni.navigateTo({
			// 	url:'/pages/rwa_package/setting/out-code'
			// })
			this.onCancel();
			deleteAccount().then(res=>{
				if (res.bizcode == 100) {
					clear()
					this.$refs.uToastRef.show({
						type: 'success',
						message: "注销成功",
					});
					setTimeout(()=>{
						uni.redirectTo({
							url:'/pages/login_package/login/login'
						})
					},2000)
				}
			})
		},
		onCancel(){
			this.tipsShow = false;
		},
		userinfo() {
			getUserInfo().then(res => {
				if (res.bizcode == 100) {
					this.userInfo = res.data;
					this.inputText = this.userInfo.nickname;
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.bottom-btn{
	width: 100%;
	margin-bottom:92rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 32rpx;
	box-sizing: border-box;
	position: relative;
	
}
.setting-view {
	width: 100%;
	height: calc(100% - 88rpx - 92rpx - 88rpx - var(--status-bar-height));
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
	padding: 0 32rpx;
	box-sizing: border-box;
	position: relative;
	.name-box{
		width:100%;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		padding: 64rpx 32rpx;
		box-sizing: border-box;
		margin-top:24rpx;
		.mid-view{
			width:100%;
			padding: 40rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			border:2rpx solid #eaeaea;
			border-radius: 16rpx;
			margin-top:48rpx;
		}
		.top-view{
			width:100%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.input-view{
			border-radius: 20rpx;
			margin-top:52rpx;
			width:100%;
			padding: 0 32rpx;
			min-height:104rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: #f5f5f5;
			box-sizing: border-box;
			
		}
	}
	
}
</style>