yicangzongtai_app_240321/pages/government/changeAccount.vue

<template>
	<view>
		<navbar :config="config" backColor="#999999"></navbar>
		<view class="box" v-if="config.title=='注销账户'">
			<view class="item">
				<view class="item_lab">手机号</view>
				<view class="item_val">{{form.mobile}}</view>
			</view>
			<view class="item">
				<view class="item_lab">验证码</view>
				<view class="item_code">
					<u-input v-model="form.captcha" type="text" placeholder="请输入验证码" maxlength="6"/>
					<view @click="getCode()">{{txt}}</view>
				</view>
			</view>
			<view class="tig">注意:注销账户提交后，工作人员会及时跟进处理。</view>
			<view class="btnBox">
				<u-button type="primary" @click="logout">确认提交</u-button>
			</view>
		</view>
		<view class="box" v-if="config.title=='更换手机号'">
			<view class="item">
				<view class="item_lab">当前绑定的手机号码</view>
				<view class="item_val bold">{{form.mobile}}</view>
			</view>
			<view class="item">
				<view class="item_lab">验证码</view>
				<view class="item_code">
					<u-input v-model="form.captcha" type="text" placeholder="请输入验证码" maxlength="6" />
					<view @click="getCode()">{{txt}}</view>
				</view>
			</view>
			<view class="btnBox">
				<u-button type="primary" hover-class="hoverClass" @click="next()">下一步</u-button>
			</view>
		</view>
		<view class="box" v-if="config.title=='新手机号'">
			<view class="item">
				<view class="item_lab">新手机号</view>
				<view class="item_val">
					<u-input v-model="form.newMobile" type="text" placeholder="请输入新手机号" maxlength="11" />
				</view>
			</view>
			<view class="item">
				<view class="item_lab">验证码</view>
				<view class="item_code">
					<u-input v-model="form.newCaptcha" type="text" placeholder="请输入验证码" maxlength="6" />
					<view @click="getCode('newMobile')">{{txt}}</view>
				</view>
			</view>
			<view class="btnBox">
				<u-button type="primary" hover-class="hoverClass" @click="changePhoneSub()">确认提交</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {smsCode} from "@/api/government.js"
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '注销账户',
					color: '#000',
					rightSlot: true,
				},
				txt: "获取验证码",
				form: {},
				setTime:null
			}
		},
		onLoad(options) {
			if (options.type == 1) {
				this.config.title = '注销账户';
			} else if (options.type == 2) {
				this.config.title = '更换手机号';
			} else if (options.type == 3) {
				this.config.title = '新手机号';
			}
			if (options.mobile) {
				this.form.mobile = options.mobile;
			}
		},
		methods: {
			getCode(newMobile) {
				if (this.txt == "获取验证码") {
					uni.showLoading({
						title: '正在获取验证码'
					})
					let mobile=newMobile?this.form.newMobile:this.form.mobile;
					smsCode({mobile:mobile}).then(res=>{
							this.$u.toast('验证码已发送');
							this.txt = 60 + 's'
							let num = 60;
							this.setTime = setInterval(() => {
								num--
								this.txt = num + 's'
								if (num == 0) {
									this.txt = "获取验证码";
									clearInterval(this.setTime);
								}
							}, 1000);
					}).finally(e=>{
						uni.hideLoading();
					})
				}

			},
			next() {
				if (!this.form.captcha) {
					uni.showToast({
						icon:"none",
						title: '请输入验证码',
						duration: 2000,
						mask: true
					});
					return
				}
				this.$yghttp.post('/user/checkMobile',this.form).then(res=>{
					this.config.title = '新手机号';
					clearInterval(this.setTime)
					this.txt="获取验证码";
				})
			},
			// 修改手机号
			changePhoneSub() {
				if (this.btnLoading) return
				this.btnLoading = true;
				if (!this.form.newMobile) {
					uni.showToast({
						icon: "none",
						title: '请输入新的手机号',
						duration: 2000,
						mask: true
					});
					this.btnLoading = false;
					return
				} else if (!this.form.newCaptcha) {
					uni.showToast({
						icon: "none",
						title: '请输入验证码',
						duration: 2000,
						mask: true
					});
					this.btnLoading = false;
					return
				}
				this.$yghttp.post('/user/updateMobile', this.form).then(res => {
					uni.showToast({
						title: '更新成功！',
						duration: 1500,
					});
					this.btnLoading = false;
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}).catch(() => {
					this.btnLoading = false;
				})
			},
			// 用户注销申请
			logout() {
				if (this.btnLoading) return
				this.btnLoading = true;
				if (!this.form.captcha) {
					uni.showToast({
						icon:"none",
						title: '请输入验证码',
						duration: 2000,
						mask: true
					});
						this.btnLoading = false;
					return
				}
				uni.showLoading({
					title: '提交中',
					mask: true
				});
				this.$yghttp.post('/user/logout/apply/add', this.form).then(res => {
					uni.removeStorageSync('apiToken');
					uni.showToast({
						title: '注销成功！',
						duration: 1500,
					});
					uni.hideLoading();
					this.btnLoading = false;
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/home'
						});
					}, 1500)
				}).catch(() => {
					uni.hideLoading();
					this.btnLoading = false;
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss">
	.box {
		padding: 0rpx 40rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 30rpx;
		min-height:88vh;

		.item {
			padding: 40rpx 0;
			border-bottom: 2rpx solid rgba(239, 239, 239, .6);
			.item_lab{
				font-size: 30rpx;
				color: #333333;
			}
			.item_val {
				color: #333333;
				margin-top: 40rpx;
			}

			.item_code {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				>view {
					color: #45C5DA;
				}
			}
		}

		.tig {
			font-size: 24rpx;
			padding: 30rpx 0;
		}
	}
	.bold{
		font-weight: 700;
	}
	.btnBox{
		width: 100%;
		margin-top: 150rpx;
	}
	.u-btn{
		width: 534rpx;
		border-radius: 10rpx;
		background: rgb(64,149,229);
		font-size: 30rpx;
		font-weight: 700;
		margin: auto;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		background: linear-gradient(6deg,#56d9ee 0%, #3ebcd0 100%) #3c66d9;
	}
	.hoverClass{
		background: linear-gradient(6deg,#56d9ee 0%, #3ebcd0 100%) #3c66d9;
	}
</style>