flavorOfTimeSz/subPackages/user/logout.vue

<template>
	<view class="bg">
		<image src="https://static.ticket.sz-trip.com/tongli/images/user/logout.png" class="logoutImg"></image>
		<view class="title">用户注销协议</view>
		<view class="text" v-html="formateRichText(content)"></view>
		
		<footer>
			<view>
				<view class="dui-box" :style="{backgroundImage: isTrue ? 'url(https://static.ticket.sz-trip.com/shiweisuzhou/images/user/logoutDui.png)' : '',
				border: isTrue ? '' : '1rpx solid #515150'}"
				 @click="isTrue = !isTrue"></view>
				您已经同意《用户注销协议》
			</view>
			
			<view class="flex-between">
				<view class="btn flex-center" @click="goBack">取消</view>
				<view class="btn flex-center" v-if="time != 0">查看协议({{time}}s)</view>
				<view class="btn btns flex-center" v-else @click="confirmLogout">确认注销</view>
			</view>
		</footer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				isTrue: false,
				time: 8
			}
		},
		onShow() {
			// this.Post({
			// 	id: 10274
			// },'/api/article/getArticleById').then(res => {
			// 	if(res.code == 1) {
			// 		this.content = res.data.content
			// 		var countdown = setInterval(() => {
			// 			this.time --
			// 			if(this.time == 0) {
			// 				clearInterval(countdown)
			// 			}
			// 		},1000)
			// 	}
			// })
			var countdown = setInterval(() => {
				this.time --
				if(this.time == 0) {
					clearInterval(countdown)
				}
			},1000)
		},
		methods: {
			confirmLogout() {
				if(!this.isTrue) {
					uni.showToast({
						title: '请先同意协议',
						icon: 'none'
					})
					return;
				}
				
				uni.showModal({
					title: '提示',
					content: '确认注销账号？',
					success: successRes => {
						if (successRes.confirm) {
							this.Post({
								protocol: 1
							},'/api/uservice/user/user_logout').then(res => {
								if(res.code == 1) {
									uni.showToast({
										title: '注销成功',
										icon: 'none'
									})
									this.$store.commit('changeUserInfo', {})
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/index/index'
										})
									},1000)
								}
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		background-color: #fff;
		padding: 88rpx 0 250rpx;
	}
	
	.logoutImg {
		display: block;
		width: 120rpx;
		height: 120rpx;
		margin: 0 auto;
	}
	
	.title {
		font-weight: bold;
		font-size: 40rpx;
		color: #000000;
		margin: 60rpx auto 50rpx;
		text-align: center;
	}
	
	.text {
		padding: 0 40rpx;
	}
	
	footer {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 0 68rpx;
		width: 100%;
		
		.dui-box {
			width: 40rpx;
			height: 40rpx;
			margin-right: 19rpx;
			background-size: 100% 100%;
			border-radius: 50%;
		}
		
		&>view:first-child {
			display: flex;
			align-items: center;
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
		}
		
		&>view:last-child {
			margin: 53rpx 0 67rpx;
			
			.btn {
				width: 267rpx;
				height: 80rpx;
				background: #BFBFBF;
				border-radius: 11rpx;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
			}
			
			&>view:nth-child(1) {
				border: 3rpx solid #6A8A27;
				font-weight: 500;
				color: #6A8A27;
				background: #fff;
			}
			
			.btns {
				background: #6A8A27;
				color: #FFFFFF;
			}
		}
	}
</style>