dev/dcp-app-gate/pages/profile/profileSetUp/cancellationOfAccount.vue

<template>
	<view style="margin:0 40upx;" >
		<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff" :background="background" title-width="300" :title="i18n('Cancellation')"></u-navbar>
		<view class="" v-if="!accountIndex">
			<view class="ancellation">
				{{i18n('ProtectTheSecurity')}}
			</view>
			<view class="ancellation">
				{{i18n('AccountFinance')}}
			</view>
			<view class="ancellation">
				{{i18n('UnlockAccount')}}
			</view>
			<view class="ancellation">
				{{i18n('Theaccounthas')}}
			</view>
			
			<view class="ancellation2">
				<u-checkbox-group>
					<u-checkbox @change="radioChange" v-model="checked" style="vertical-align: top;" label-disabled="false">
					</u-checkbox>
					<text class="content">{{$i18n.locale=='zh'?'我已阅读并同意':'I have read and agree'}}</text>
					<!-- 协议地址 -->
					<span @click="toView('userAgreement')">
						{{$i18n.locale=='zh'?'《平台用户协议》':'《Platform User Agreement》'}}
					</span>
					<span @click="toView('privacyPolicy')">
						{{$i18n.locale=='zh'?'《隐私政策》':'《Privacy Policy》'}}
					</span>
				</u-checkbox-group>
				
			</view>
			<view class="ancellation">
				<button type="primary" :disabled="checked == false" @click="accountIndex = true">{{i18n('TheNextStep')}}</button>
			</view>
		</view>
		
		<view class="" v-else>
			<view class="input-code">{{i18n('EnterYourLoginPassword')}}</view>
			<view class="Unbundling-input">
				<input class="uni-input" type="password" @input="onKeyInput" :value="passwordValue" :placeholder="i18n('PleaseEnterYourLoginPassword')"/>
			</view>
			<button type="primary" style="margin-top: 50upx;" @click="submitCncel">{{i18n('submit')}}</button>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import listCell from '@/components/JumpBox';
	export default {
		components: {
			listCell
		},
		data() {
			return {
				accountIndex:false,
				current:null,
				second:60,
				showText:true,
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#FFFFFF',
				},
				checked:false,
				passwordValue:'',
				token:'',
				// 8.8.20.112:19001
				navigate1: this.$i18n.locale == 'zh' ? 'https://m.geidcp.com:19001/#/pages/profile/profileSetUp/appUser/userAgreementZH' :
					'https://m.geidcp.com/#/pages/profile/profileSetUp/appUser/userAgreementEN',
				navigate2: this.$i18n.locale == 'zh' ? 'https://m.geidcp.com:19001/#/pages/profile/profileSetUp/appUser/privacyPolicyZH' :
					'https://m.geidcp.com/#/pages/profile/profileSetUp/appUser/privacyPolicyEN',
			};
		},
		onShow(){
			this.token = uni.getStorageSync('Auth-Token');
		},
		methods:{
			radioChange(evt) {
				console.log(evt)
				this.checked = evt.value;
			},
			navTo(route) {
				this.$mRouter.push({ route });
			},
			getCodeFor(){
				
				this.showText = false
				let interval = setInterval(() => {
					let times = --this.second
					// this.second = times<10?'0'+times:times //小于10秒补 0
				}, 1000)
				setTimeout(() => {
					clearInterval(interval)
					this.second=60
					this.showText = true
				}, 60000)
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
			onKeyInput(val){
				this.passwordValue = val.target.value
			},
			//验证密码方法
			async submitCncel(){
				if (this.passwordValue == "" || this.passwordValue == null) {
					this.$refs.uToast.show({
						title: this.$i18n.locale == 'zh' ? '密码不能为空！' : 'The password cannot be empty!',
						type: "warning",
					})
				}else{
					let userInfo = JSON.parse(uni.getStorageSync('user'));
					let param = JSON.stringify({
						id: userInfo.umsUser.id,
						password: this.passwordValue,
						Authorization: this.token
					});
					const res = await this.$myRequest({
						url: '/ums/umsUsers/checkPassword',
						headers: {
							 ANON: true
						},
						data: {
							param
						},
						method: 'post'
					});
					if(res && res.status === "200"){
						this.$refs.uToast.show({
							title: this.$i18n.locale == 'zh' ? '密码验证成功！' : 'Password verification succeeded!',
							type: "success",
						})
						await this.cancellationTo()
						
						
					}else{
						this.$refs.uToast.show({
							title: this.$i18n.locale == 'zh' ? '验证失败,请重新核实密码！' : 'Validation fails,Please verify your password again!',
							type: "warning",
						})
					}
				}
				
			},
			//注销账户方法
			async cancellationTo(){
				let token = this.token
				this.resetToken();
				// 接口逻辑
				const res = await this.$myRequest({
					url: '/uc/umsUserCancellations/cancellationUmsUser',
					headers: {
						token
					},
					data: {
						token		
					},
					method: 'post'
				});
				if(res && res.status == "200"){
					this.$refs.uToast.show({
						title: this.$i18n.locale == 'zh' ? '账户注销成功！' : 'Account logout succeeded!',
						type: "success",
					})
					this.passwordValue = ""
					setTimeout(() => {
						this.navTo('/pages/public/login');
					}, 2000);
				}else{
					this.$refs.uToast.show({
						title: this.$i18n.locale == 'zh' ? '账户注销失败，请稍后再试！' : 'Account logout succeeded, Please try again later!',
						type: "success",
					})
				}
			
			},
			resetToken() {
				this.token = "";
			},
			toView(value) {
				if(this.$i18n.locale == 'zh'){
					uni.navigateTo({
						url: '/pages/profile/profileSetUp/appUser/'+value +'ZH'
					})
				}else{
					uni.navigateTo({
						url: '/pages/profile/profileSetUp/appUser/'+value +'EN'
					})
				}
				
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	page,body.pages-profile-profileSetUp-setUp uni-page-body {
		background-color:  #fff !important;
		.ancellation {
			margin-top: 50upx;
		}
		.ancellation2 {
			margin-top: 80upx;
			/deep/.uni-radio-input{
				width: 26upx!important;
				height: 26upx!important;
			}
				
		}
		
		.input-code {
			color: #666;
			font-size: 36upx;
			font-weight: 600;
			margin-top: 50upx;
			line-height: 100upx;
		}
		.Unbundling-input {
			margin-top: 30upx;
			.uni-input {
				display: inline-block;
				font-size: 30upx;
				line-height: 90upx;
				height: 90upx;
				min-height: 90upx;
				overflow: hidden;
				border: 1px solid #ccc;
				vertical-align: middle;
				text-indent: 2em;
				text-align: left !important;
				padding: 0 20upx;
				border-radius: 20upx;
				width: 100%;
			}
			.getCode {
				margin-left: 20upx;
				color: #0000ff;
			}
			.send {
				margin-left: 20upx;
			}
		}
	}
</style>