kitchendDevice/pageTwo/setting/email.vue

218 lines
4.2 KiB
Vue

<template>
<view class="content">
<view class="login">
<view class="editem">
<view class="item">
<view class="text">{{$t("infoEmail")}}</view>
<view class="input">
<input v-model="phone" :placeholder="$t('verifyEmail')" />
</view>
</view>
<view class="item ">
<view class="text">{{$t("titleCode")}}</view>
<view class="input yanzhengma">
<input class="uni-input" v-model="code" />
<button class="code" type="none" @click="handleCode" v-model="code"
:disabled="disabled">{{second<60 ? second+$t("titleSendCodeRetry"):$t("titleSendCode")}}
</button>
</view>
</view>
</view>
<view class="btnlogin" @click="handleOutLogin">{{$t("btnConfirm")}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
phone: "",
code: "",
disabled: false,
second: 60,
}
},
onLoad() {
let that = this
uni.setNavigationBarTitle({
title: that.$t('btnDeleteAccount')
})
},
methods: {
handleOutLogin() {
let that = this
uni.showModal({
title: that.$t("msgTitle"),
confirmText: that.$t("btnDelete"),
content: that.$t("verifyDeleteAccount"),
success: function(res) {
if (res.confirm) {
that.$model.getDeleteAccount({
code: that.code
}).then((res) => {
if (res.code != 0) return
that.$tools.msg(that.$t('msgDelete'));
uni.setStorageSync('token', null)
uni.setStorageSync('aan_id', null)
uni.clearStorageSync()
setTimeout(() => {
uni.reLaunch({
url: "/pageTwo/login/login"
})
}, 3000);
})
} else if (res.cancel) {
that.$tools.msg(that.$t("msgCancel"));
}
},
})
},
// 获取验证码
handleCode() {
let that = this
if (!that.phone) {
that.$tools.msg(that.$t("verifyEmail"))
return
}
if (!(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(that.phone))) {
that.$tools.msg(that.$t("verifyEmailCorrect"))
return
}
//
that.$model.getSendCode({
data: that.phone,
// type: that.type
}).then(res => {
console.log(res)
if (res.code != 0) {
that.$tools.msg(res.msg)
return
}
that.disabled = true
let interval = setInterval(() => {
--that.second
}, 1000)
setTimeout(() => {
clearInterval(interval)
that.disabled = false
that.second = 60
}, 60000)
}).catch(err => {})
},
}
}
</script>
<style scoped lang="scss">
.content {
width: 100%;
height: 100vh;
background-color: #fff;
}
.login {
width: calc(100% - 60rpx);
height: auto;
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
z-index: 99;
.title {
text-align: left;
color: #333;
font-size: 40rpx;
font-weight: bold;
margin-bottom: 30rpx;
}
.editem {
position: relative;
display: flex;
align-items: center;
font-size: 32rpx;
justify-content: space-between;
flex-wrap: wrap;
.item {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin-bottom: 30rpx;
.text {
width: 100%;
height: 80rpx;
line-height: 80rpx;
font-size: 32rpx;
font-weight: bold;
}
.input {
width: 100%;
height: 35px;
line-height: 35px;
display: flex;
position: relative;
border: #dfdfdf 1px solid;
border-radius: 5px;
padding: 0 20rpx;
background-color: #f7f7f7;
}
input {
height: 80rpx;
line-height: 80rpx;
position: absolute;
left: 20rpx;
right: 0px;
z-index: 88;
font-size: 32rpx;
}
.yanzhengma {
input {
right: 180px;
font-size: 32rpx;
}
}
}
.code {
color: #333;
width: 180px;
background: #dfdfdf;
font-size: 14px;
margin: 0;
line-height: 80rpx;
border-radius: 5px;
text-align: center;
position: absolute;
right: 0px;
top: 0px;
bottom: 0;
z-index: 99;
}
}
.btnlogin {
width: 100%;
margin: 30rpx 0;
height: 42px;
line-height: 42px;
background: $btncolor;
font-weight: 700;
border-radius: 30rpx;
text-align: center;
color: #fff !important;
}
}
</style>