<template>
	<view class="container">
		 <u-navbar
		            leftText="返回"
		            :title="title"
					:placeholder="true"
					:autoBack="true"
					bgColor="transparent"
		        >
		            <view
		                class="u-nav-slot"
		                slot="left"
		            >
		                <u-icon
		                    name="arrow-left"
		                    size="19"
							color="#000000"
		                ></u-icon>
		                <u-line
		                    direction="column"
		                    :hairline="false"
		                    length="16"
		                    margin="0 8px"
		                ></u-line>
		                <u-icon
		                    name="home"
		                    size="20"
							color="#000000"
		                ></u-icon>
		            </view>
		</u-navbar>
		<u-parse :content="content" :tagStyle="style"></u-parse>
		
		<view class="btnBox" @click="logout">
			确认注销
		</view>	
		
		<u-popup :show="show" :round="10" mode="center" bgColor="transparent" @close="close" @open="open">
		            <view class="popupBox">
		                <view class="popupTop">
							提醒
						</view>
						<view class="popupDesc">
							是否确认注销账号？
						</view>
						<view class="popupBtn">
							<view class="sbtnBox a1" @click="close">取消</view>
							<view class="sbtnBox a2" @click="yes">确认</view>
						</view>
		            </view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				content: `<h3>你正在申请注销合成照相馆的账号</h3>
						 <p>1.账户注销后该账户账户下的全部数据将被删除，包括但不限于面部档案，写真等</p>
						 <p>2.正在创建或已付费但未生成完毕的内容，都将马上停止并销毁。</p>
						 <p>3.已支付但未交付的内容不能退款</p>
						 <p>4.请知悉以上内容。</p>`,
				style: {
							// 字符串的形式
							h3:'font-weight: 400;font-size: 32rpx;color: #333333;line-height: 46rpx;',
							p: 'font-weight: 400;font-size: 28rpx;color: #555555;line-height: 40rpx;',
							span: 'font-size: 24rpx'
					 },
				//弹窗
				show: false,
				title:"注销账号",
			}
		},
		methods: {
			logout(){
				 this.show = true;
			},
			
			open() {
			   console.log('open');
			},
			close() {
			   this.show = false;

			},
			yes(){
				this.close();
			},
		}
	}
</script>

<style lang="scss">
page{
			background: linear-gradient( 180deg, #D1DAFF 0%, rgba(209,218,255,0.6) 46%, rgba(254,254,255,0) 100%);
}
.container{padding: 20rpx 20rpx; height: auto;}
.btnBox{
	width: 400rpx;
	height: 88rpx;
	border-radius: 44rpx;
	border: 2rpx solid #9B75FF;
	font-weight: 700;
	font-size: 30rpx;
	line-height: 88rpx;
	text-align: center;
	color: #9B75FF;
	margin: 20rpx auto;

}
.popupBox{
	width: 600rpx;
	height: 320rpx;
	border-radius: 24rpx;
	background-color: #FFFFFF;
}
.popupTop{
	width: 600rpx;
	height: 140rpx;
	background: linear-gradient(to bottom, #D3D5FF 20%, #FFFFFF 50%);
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	line-height: 140rpx;
	text-align: center;
	font-weight: 700;
	font-size: 30rpx;
	color: #333333;
}
.popupDesc{
	width: 100%;
	font-weight: 400;
	font-size: 28rpx;
	color: #555555;
	line-height: 40rpx;
	text-align: center;
}
.popupBtn{ width: 100%; height: auto;
    display: flex; flex-wrap: wrap;
	justify-content: space-around; /* 使子元素在容器中均匀分布 */
	align-items: center; /* 如果需要垂直居中子元素 */
}
.sbtnBox{
	margin-top: 30rpx;
	width: 226rpx;
	height: 80rpx;
	font-weight: 700;
	font-size: 30rpx;
	line-height: 80rpx;
	border: 2rpx solid #4D94FF;
	text-align: center;
	border-radius: 44rpx;
	
}

.a1{
	background: linear-gradient( 270deg, rgba(46,87,241,0.15) 0%, rgba(131,88,246,0.15) 100%);
	color:#7A74F0;
}
.a2{
	background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
	color:#FFFFFF;
}
</style>
