cbz-sj/pages/mine/service/setting/log_off.vue

<template>
	<view class="content">
		<view class="vflex acenter jcenter top" v-if="left_active == 1">
			<u-icon name="error-circle-fill" color="#F35635" size="52"></u-icon>
			<view class="title">温馨提示</view>
			<view class="info">
				<u-parse :content="data"></u-parse>
			</view>
		</view>
		<view class="bottom vflex acenter jcenter" v-if="left_active == 1">
			<u-checkbox v-model="check" shape="circle" label="我已知晓并接受，注销账号后的权益处理结果" @change="handleChange"></u-checkbox>
			<view class="btn" @click="apply">申请注销账号</view>
		</view>
		<view class="vflex acenter jcenter top" v-if="left_active == 2">
			<u-icon name="checkmark-circle-fill" color="#52c41a" size="52"></u-icon>
			<view class="title">注销成功</view>
			<view class="text">船百知账号已注销</view>
			<view class="btn" @click="sure">确认</view>
		</view>
		<view class="vflex acenter jcenter top" v-if="left_active == 3">
			<u-icon name="error-circle-fill" color="#F35635" size="52"></u-icon>
			<view class="title">抱歉，由于以下原因，账号无法注销</view>
			<!-- <view class="text">船百知账号已注销</view> -->
			<div class="list">
				<div class="item" v-for="(item,index) in list" :key="index">
					<u-parse :content="item"></u-parse>
				</div>
			</div>
			<view class="btn" @click="sure2">确认</view>
		</view>
		<u-popup :show="openVisible" mode="center"  @close="close">
			<view class="popu vflex acenter jcenter">
				<view class="top hflex acenter jbetween">
					<view></view>
					<view class="top_title">
						短信验证码
					</view>
					<u-icon name="close" color="#000" size="16" @click="close"></u-icon>
				</view>
				<view class="info">
					我们已向手机号{{phone}}发送验证码短信请查看并输入
				</view>
				<u-input placeholder="填写验证码" v-model="code">
					<template slot="suffix">
						<u-code
							ref="uCode"
							@change="codeChange"
							seconds="60"
							changeText="X秒重新获取"
						></u-code>
						<u-button
							@tap="getCode"
							:text="tips"
							type="text"
							
						></u-button>
					</template>
				</u-input>
				<div class="next_btn" @click="next">下一步</div>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				data: '',
				left_active: 1,
				check: false,
				openVisible: false,
				phone: '',
				tips: '',
				value: '',
				code: '',
				list: [],
			}
		},
		onLoad() {
			that = this
			that.phone = uni.getStorageSync('phone')
			that.getData()
		},
		watch: {
		  value(newValue, oldValue) {
			console.log('v-model', newValue);
		  }
		},
		methods: {
			/* 获取提示信息 */
			getData() {
				$api.req({
					url: '/data/api.business.User/logout_prompt_ship',
					method: 'GET',
				},function(res) {
					console.log(res);
					that.data = res.data
				})
			},
			handleChange(e) {
				that.check = e
			},
			/* 打开验证码弹窗 */
			apply() {
				if(that.check) {
					that.openVisible = true
				} else {
					$api.info('请先同意处理通知')
					return
				}
			},
			/* 关闭弹窗 */
			close() {
				that.openVisible = false
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					$api.req({
						url: '/data/api.Login/sendsms',
						method: 'POST',
						data: {
							phone: that.phone,
							type: 8
						}
					}, function(res) {
						uni.hideLoading();
						if(res.code == 1) {
							uni.$u.toast('验证码已发送')
							that.$refs.uCode.start()
						} else {
							uni.$u.toast('验证码发送失败')
						}
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			change(e) {
				console.log('change', e);
			},
			next() {
				if(that.code == '') {
					$api.info('请先填写验证码')
					return
				}
				$api.req({
					url: '/data/api.business.User/cancellation',
					method: 'POST',
					data: {
						code: that.code,
						phone: that.phone
					}
				}, function(res) {
					console.log(res);
					if(res.code == 1) {
						that.close()
						if(res.data.type == 1) {
							that.left_active = 2
						} else {
							that.left_active = 3
							that.list = res.data.failReason
						}
					}
				})
			},
			sure() {
				$api.jump('/pages/tabbar/index/index',3)
			},
			sure2() {
				$api.jump('/pages/tabbar/mine/mine',3)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background: #fff;
		.top {
			padding-top: 56rpx;
			.title {
				padding: 48rpx 0 32rpx;
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #222222;
				line-height: 50rpx;
			}
			.info {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
			}
			.text {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
			}
			.btn {
				width: 630rpx;
				height: 92rpx;
				background: #506DFF;
				border-radius: 50rpx;
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 92rpx;
				text-align: center;
				margin-top: 64rpx;
			}
			.list {
				background: #F5F5F5;
				border-radius: 20rpx;
				width: 100%;
				.item {
					box-sizing: border-box;
					padding: 32rpx 34rpx 28rpx 34rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
				}
			}
		}
		.bottom {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
			padding: 72rpx 60rpx;
			.btn {
				width: 630rpx;
				height: 92rpx;
				background: #506DFF;
				border-radius: 50rpx;
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 92rpx;
				text-align: center;
				margin-top: 28rpx;
			}
		}
		.u-popup__content {
			width: 522rpx;
			border-radius: 20rpx;
			.popu {
				width: 522rpx;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 20rpx;
				.top {
					width: 100%;
					box-sizing: border-box;
					padding: 16rpx 0 24rpx;
					.top_title {
						font-size: 32rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 600;
						color: #222222;
						line-height: 44rpx;
					}
				}
				.info {
					width: 364rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 34rpx;
					text-align: center;
					padding-bottom: 44rpx;
				}
				.u-input {
					border: none;
					width: 100%;
					box-sizing: border-box;
					padding: 0 20rpx;
					.u-button {
						width: 200rpx;
						// font-size: 28rpx ;
						color: #506DFF !important;
					}
				}
				
				.next_btn {
					width: 322rpx;
					height: 76rpx;
					background: #506DFF;
					border-radius: 38rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 76rpx;
					text-align: center;
					margin-top: 48rpx;
				}
			}
		}
	}
</style>