ReedawFoodApp/body/setting/password.vue

238 lines
5.0 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 class="item">
<view class="text">{{$t('titlePassword')}}</view>
<view class="input">
<input class="uni-input" v-model="password" :placeholder="$t('verifyPassword')" />
</view>
</view>
<view class="item">
<view class="text">{{$t('titleConfirmPassword')}}</view>
<view class="input">
<input class="uni-input" v-model="password2" :placeholder="$t('verifyPasswordTwo')" />
</view>
</view>
</view>
<view class="btnlogin" @click="handleTelLogin">{{$t('btnSubmit')}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
password: "",
password2: "",
phone: "",
code: "",
disabled: false,
second: 60,
}
},
onLoad() {
let that = this
uni.setNavigationBarTitle({
title: that.$t('titlePasswordEdit')
})
},
methods: {
// 登录、
handleTelLogin() {
let that = this
if (!(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(that.phone))) {
that.$tools.msg(that.$t("verifyEmailCorrect"))
return
}
if (!that.code) {
that.$tools.msg(that.$t("verifyCode"))
return
}
if (!that.password) {
that.$tools.msg(that.$t('verifyPassword'))
return
}
if (!that.password2) {
that.$tools.msg(that.$t('verifyPasswordTwo'))
return
}
if (that.password2 != that.password) {
that.$tools.msg(that.$t('verifyPasswordCorrect'))
return
}
that.$model.getAccountPassword({
data: that.phone,
code: that.code,
password: that.password,
c_password: that.password2,
}).then(res => {
console.log("注册", res)
if (res.code != 0) {
that.$tools.msg(res.msg)
} else {
that.$tools.msg(that.$t('msgSetSuccess'))
that.$model.getloginOut({}).then((res) => {
if (res.code != 0) return
uni.setStorageSync('token', null)
uni.setStorageSync('aan_id', null)
uni.clearStorageSync()
setTimeout(function() {
uni.reLaunch({
url: "/body/login/login"
})
}, 1000)
})
}
}).catch(err => {})
},
// 获取验证码
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,
}).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;
.editem {
position: relative;
display: flex;
align-items: center;
font-size: 28rpx;
justify-content: space-between;
flex-wrap: wrap;
.item {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
.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: 28rpx;
}
.yanzhengma {
input {
right: 180px;
font-size: 32rpx;
}
}
}
}
.code {
color: #333;
position: absolute;
right: 0;
top: 0;
height: 35px;
font-size: 14px;
box-sizing: border-box;
width: 180px;
z-index: 999;
}
.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>