uniIM/pages/mine/zhuxiaozhanghao.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <view>
    <cu-custom bgImage="/static/bg.png" :isBack="true">
      <template v-slot:content>
        <text class="text-black">注销账号</text>
      </template>
    </cu-custom>
    <view class="contentIncolumnC">
		<view style="width: 90%;margin-top: 40rpx;">
			<view class="contentInRowL">
					  <text class="text-bold text-black">用户名：</text>
					  <text>{{name}}</text>
			</view>
			<view class="contentInRowL" style="margin-top: 20rpx;">
					  <text class="text-bold text-black">验证码：</text>
					  <input type="number" class="main-input" v-model="form.yanzhma" placeholder="请输入验证码"/>
			</view>
			<view class="yzmbt" @click="getEmailcodeSele">
					<text>{{huoquyzm}}</text>
			</view>
			<view class="contentInRowL" style="margin-top: 20rpx;">
					  <text class="text-grey">验证码将发至注册时填写的邮箱</text>
			</view>
			<view class="margin-top text-center">
				<button class="cu-btn bg-zblue border lg margin-top" style="width: 100%;" @tap="submit">注销</button>
			</view>
		</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import CuCustom from '@/colorui/components/cu-custom.vue'
import {ref,reactive} from "vue";
import Auth from "@/api/Auth";
import {useUserStore} from "@/store/userStore";
import {getcodeByUsername,zhuxiaozhanghao,clearVoipTk} from "@/api/Login";
import MessageUtils from "@/utils/MessageUtils";
const fontValue=ref(Auth.getfontSize());
const userStore = useUserStore();
let name = userStore.getUser()?.name;
let username = userStore.getUser()?.username;
const form = reactive({
  yanzhma: ""
});

const huoquyzm=ref('获取验证码');
const timeCall=ref(0);
const timer=ref();

//邮箱验证码
const getEmailcodeSele = () =>{
	if(timeCall.value==0){
		getEmailcodeact();
	}
	else{
		return;
	}
}

const getEmailcodeact = () =>{
	uni.showLoading({
		mask:true
	})
	getcodeByUsername(username).then((res : any) => {
	  console.log('getEmailcode',res);
	  uni.hideLoading();
	  if(res.code==200){
		  MessageUtils.success(res.msg);
		  timeCall.value=60;
		  timer.value = setInterval(() => {
		  	timeCall.value=timeCall.value-1;
		  	if(timeCall.value==0){
		  		clearInterval(timer.value);
		  		huoquyzm.value='获取验证码';
		  	}
		  	else{
				huoquyzm.value='重新获取'+'('+timeCall.value+')';
		  	}
		  }, 1000);
	  }
	  else{
		  MessageUtils.success(res.msg);
	  }
	});
}

/** 提交按钮 */
function submit() {
	console.log(form.yanzhma);
	if(form.yanzhma==''){
		MessageUtils.success('验证码不能为空');
		return;
	}
	let data={
		username: username,
		code:form.yanzhma
	}
  zhuxiaozhanghao(data)
    .then((res) => {
		console.log(res)
        MessageUtils.success('注销成功');
		var data={
			"voipTk":Auth.getvoipTk()
		}
		clearVoipTk(JSON.stringify(data)).then((res)=>{
			console.log('clearVoipTk2',res);
		})
		.catch((err) => {
		   console.log('clearVoipTk2',err);
		});
  	    Auth.logout();
		
    })
    .catch((err) => {
        MessageUtils.error(err.msg);
    })
}
</script>

<style scoped>
@import url('@/static/css/main.css');
.yzmbt{
	margin-top: 16rpx;
	color: white;
	font-size: 26upx;
	width: 170rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	margin-left: auto;
	margin-right: 10rpx;
	border-radius: 2rpx;
	background-color:#60BA63;
}
.oBorder {
  border: none;
  border-radius: 8px;
  border: 1rpx solid #6E75FB;
  -webkit-box-shadow: 0 0 60upx 0 rgba(43, 86, 112, .1);
  box-shadow: 0 0 60upx 0 rgba(43, 86, 112, .1);
}
.main-input {
  flex: 1;
  text-align: left;
  font-size: 28upx;
  height: 60upx;
  padding-right: 10upx;
  border-radius: 8px;
  border: 1rpx solid #6E75FB;
}
</style>