优化ios版本，新增注销账号功能
This commit is contained in:
唐明明
292
pages/off/verify.vue
Normal file
292
pages/off/verify.vue
Normal file
@@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<view class="registered-content">
|
||||
<view class="title">注销账号</view>
|
||||
<view class="submit-title">请填写您的账号信息</view>
|
||||
<view class="from">
|
||||
<view class="from-inpus from-input-phoen">
|
||||
<label>+86</label>
|
||||
<input type="number" v-model="username" maxlength="11" placeholder="输入手机号码">
|
||||
</view>
|
||||
<view class="from-inpus from-password">
|
||||
<label>登录密码</label>
|
||||
<input type="safe-password" password v-model="password" placeholder="请输入登录密码">
|
||||
</view>
|
||||
<view class="from-inpus from-input-code">
|
||||
<label>验证码</label>
|
||||
<input type="number" v-model="code" maxlength="4" placeholder="短信验证码">
|
||||
<button :disabled="username.length < 11 || getSms" @click="getCode">{{sendCode}}</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="button">
|
||||
<button @click="onRegistered()">注销账号</button>
|
||||
</view>
|
||||
<!-- 显示图形验证码 -->
|
||||
<u-popup :show="captchaShow" mode="center" :round="10" closeable @close="captchaShow = false, captcha = ''">
|
||||
<view class="captcha-lay">
|
||||
<view class="captcha-title">图形验证</view>
|
||||
<view class="captcha-img">
|
||||
<image :src="captchaImg" mode="widthFix" @click="getCode()"></image>
|
||||
</view>
|
||||
<view class="captcha-input">
|
||||
<input type="text" placeholder="请输入验证码" v-model="captcha" maxlength="10">
|
||||
</view>
|
||||
<button class="captcha-btn" @click="getPhoneCode">验证</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var outTime;
|
||||
import { offSmsCode, offUser } from '@/apis/interfaces/user.js'
|
||||
import { captcha } from '@/apis/interfaces/auth.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
password : '',
|
||||
username : '',
|
||||
code : '',
|
||||
getSms : false,
|
||||
sendCode : '获取验证码',
|
||||
captcha : '',
|
||||
captchaImg : '',
|
||||
captchaKey : '',
|
||||
captchaShow : false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 提交修改信息
|
||||
onRegistered(){
|
||||
uni.showLoading({
|
||||
title: '提交中...',
|
||||
mask : true
|
||||
})
|
||||
offUser({
|
||||
username: this.username,
|
||||
password: this.password,
|
||||
code : this.code,
|
||||
}).then(res => {
|
||||
// 重置验证码与计时器
|
||||
this.getSms = false;
|
||||
this.sendCode = '获取验证码';
|
||||
clearInterval(outTime);
|
||||
uni.hideLoading()
|
||||
uni.showModal({
|
||||
title : "提示",
|
||||
content : "账号注销申请已提交",
|
||||
showCancel : false,
|
||||
confirmColor: "#446EFE",
|
||||
success : modalRes => {
|
||||
this.$store.commit('setToken', '');
|
||||
this.$Router.replaceAll({
|
||||
name: 'Auth'
|
||||
})
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 弹出图形验证码
|
||||
getCode(){
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask : true
|
||||
})
|
||||
captcha().then(res => {
|
||||
let { img, key } = res
|
||||
this.captchaImg = img
|
||||
this.captchaKey = key
|
||||
this.captchaShow = true
|
||||
uni.hideLoading()
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取验证码
|
||||
getPhoneCode() {
|
||||
uni.showLoading({
|
||||
title : '加载中...',
|
||||
mask :true
|
||||
})
|
||||
let smsTime = 60;
|
||||
offSmsCode({
|
||||
mobileNo : this.username,
|
||||
captcha : this.captcha,
|
||||
captcha_key : this.captchaKey
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: res.message,
|
||||
icon: "none",
|
||||
});
|
||||
this.captchaShow = false;
|
||||
this.captcha = '';
|
||||
this.getSms = true;
|
||||
this.sendCode = smsTime + 's后重新获取';
|
||||
outTime = setInterval(() => {
|
||||
if (smsTime <= 1) {
|
||||
this.getSms = false;
|
||||
this.sendCode = '重新获取';
|
||||
clearInterval(outTime);
|
||||
return
|
||||
}
|
||||
this.sendCode = smsTime + 's后重新获取';
|
||||
smsTime -= 1;
|
||||
}, 1000);
|
||||
}).catch((err) => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none",
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 图形验证码
|
||||
.captcha-lay{
|
||||
padding: 30rpx;
|
||||
width: 70vw;
|
||||
box-sizing: border-box;
|
||||
.captcha-title{
|
||||
text-align: center;
|
||||
font-size: 35rpx;
|
||||
font-weight: bold;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
.captcha-img{
|
||||
text-align: center;
|
||||
padding-bottom: 30rpx;
|
||||
image{
|
||||
width: 300rpx;
|
||||
}
|
||||
}
|
||||
.captcha-input{
|
||||
input{
|
||||
height: 100rpx;
|
||||
border:solid 1rpx #ddd;
|
||||
text-align: center;
|
||||
line-height: 98rpx;
|
||||
font-size: 34rpx;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: $radius-lg;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.captcha-btn{
|
||||
margin-top: 30rpx;
|
||||
background: $main-color;
|
||||
color: white;
|
||||
font-weight: normal;
|
||||
font-size: 34rpx;
|
||||
border-radius: $radius-lg;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 注册
|
||||
.registered-content{
|
||||
padding: 50rpx;
|
||||
.title{
|
||||
padding-top: 3vh;
|
||||
padding-bottom: 10rpx;
|
||||
font-weight: bold;
|
||||
font-size: 44rpx;
|
||||
}
|
||||
.submit-title{
|
||||
font-size: 30rpx;
|
||||
color: gray;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
// 注册单
|
||||
.from{
|
||||
margin-top: 80rpx;
|
||||
}
|
||||
.from-inpus{
|
||||
@extend .border-solid;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
justify-content: space-between;
|
||||
label{
|
||||
width: 170rpx;
|
||||
line-height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
input{
|
||||
width: calc(100% - 200rpx);
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
.from-password{
|
||||
input{
|
||||
width: calc(100% - 200rpx);
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
.from-input-phoen{
|
||||
label{
|
||||
line-height: 60rpx;
|
||||
height: 60rpx;
|
||||
border-right: solid 1rpx $border-color;
|
||||
}
|
||||
}
|
||||
.from-input-code{
|
||||
button{
|
||||
font-size: 32rpx;
|
||||
width: 230rpx;
|
||||
padding: 0;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: $main-color;
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
&[disabled]{
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
input{
|
||||
width: calc(100% - 460rpx);
|
||||
}
|
||||
}
|
||||
// 按钮
|
||||
.button{
|
||||
padding-top: 50rpx;
|
||||
button{
|
||||
background: $main-color;
|
||||
border-radius: $radius-lg;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
color: white;
|
||||
font-size: 38rpx;
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
&[disabled]{
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user