<template>
|
<div class="wrapper">
|
<div class="header">
|
<mt-header :title="$t('hj240')">
|
<router-link to="/login" slot="left">
|
<mt-button icon="back"></mt-button>
|
</router-link>
|
</mt-header>
|
</div>
|
<div class="form-group">
|
<div class="title">
|
{{ $t('jy454') }}
|
</div>
|
<div class="page-part">
|
<mt-field :label="+86" type="tel" :placeholder="$t('hj9')" v-model="phone"></mt-field>
|
<mt-field :label="$t('jy455')" type="number" :placeholder="$t('jy456')" v-model="code">
|
<span v-if="codeshow" class="getcode" @click="checkCodeBox">{{ $t('jy455') }}</span>
|
<span v-if="!codeshow" class="getcode">{{count}}s</span>
|
</mt-field>
|
<mt-field :label="$t('jy457')" :placeholder="$t('hj30')" type="password" v-model="password"></mt-field>
|
<mt-field :label="$t('jy457')" :placeholder="$t('hj20')" type="password" v-model="password2"></mt-field>
|
</div>
|
</div>
|
<div class="btnbox">
|
<span class="text-center btnok" @click="gook">{{ $t('sure') }}</span>
|
</div>
|
<mt-popup v-model="dialogShow" :closeOnClickModal="false" class="mint-popup-box mint-popup-white">
|
<div class="clearfix">
|
<a @click="dialogShow = false" class="pull-right"><i class="iconfont icon-weitongguo"></i></a>
|
</div>
|
<div class="">
|
<div class="check-box row">
|
<div class="title">
|
{{ $t('jy458') }}
|
</div>
|
<mt-field :label="$t('hj25')" :placeholder="$t('jy459')" v-model="code2">
|
<img @click="refreshImg" :src="adminUrl+'/code/getCode.do?time=' + imgCodeTime" height="45px" width="100px">
|
</mt-field>
|
<p class="red" v-if="!checkCodeState">{{ $t('jy460') }}</p>
|
<div class="text-center" style="width: 100%; padding: 0.2rem;">
|
<mt-button type="primary" @click="checkImg">{{ $t('sure') }}</mt-button>
|
<!-- <mt-button style="margin-left: 10%;width:22%" type="default" @click="dialogShow = false">返回</mt-button> -->
|
</div>
|
</div>
|
</div>
|
</mt-popup>
|
</div>
|
</template>
|
|
<script>
|
import { Toast } from 'mint-ui'
|
import { isNull, isPhone } from '@/utils/utils'
|
import * as api from '@/axios/api'
|
|
export default {
|
components: {},
|
props: {},
|
data () {
|
return {
|
phone: '',
|
password: '',
|
password2: '',
|
code: '',
|
code2: '',
|
codeshow: true,
|
count: '', // 倒计时
|
clickFalg: 0, // 点击次数
|
imgCode: '',
|
adminUrl: '',
|
dialogShow: false, // 显示弹窗
|
ischeckImg: false,
|
checkCodeState: true, // 验证码的状态
|
dialogImgShow: false, // 图片显示
|
imgCodeTime: 0
|
}
|
},
|
watch: {
|
code2 (newval) {
|
if (newval) {
|
this.checkCodeState = true
|
}
|
}
|
},
|
computed: {},
|
methods: {
|
checkCodeBox () {
|
if (isNull(this.phone) || !isPhone(this.phone)) {
|
Toast(this.$t('hj28'))
|
} else {
|
this.checkPhone()
|
}
|
},
|
async checkCode () {
|
let data = await api.checkCode({ code: this.code2 })
|
this.ischeckImg = data
|
},
|
async checkImg () {
|
if (!this.code2) {
|
this.checkCodeState = false
|
Toast(this.$t('jy460'))
|
return
|
}
|
// await this.checkCode()
|
let data = await api.checkCode({ code: this.code2 })
|
if (data === 'true' || data === true) {
|
this.getcode()
|
this.dialogShow = false
|
this.checkCodeState = true
|
} else {
|
this.checkCodeState = false
|
Toast(this.$t('jy460'))
|
this.adminUrl = process.env.API_HOST + '1'
|
this.adminUrl = process.env.API_HOST
|
if (this.adminUrl === undefined) {
|
this.adminUrl = ''
|
}
|
}
|
},
|
async getcode () {
|
if (this.clickFalg !== 0) {
|
this.clickFalg = 0
|
return
|
}
|
this.clickFalg++
|
// var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
|
let reg = /^[0-9]{11}$/ // 手机号码验证
|
if (isNull(this.phone)) {
|
Toast(this.$t('jy464'))
|
} else {
|
if (!reg.test(this.phone)) {
|
Toast(this.$t('hj28'))
|
} else {
|
let result = await api.sendForgetSms({ phoneNum: this.phone })
|
if (result.status === 0) {
|
const TIME_COUNT = 60
|
if (!this.timer) {
|
this.count = TIME_COUNT
|
this.codeshow = false
|
this.clickFalg = 0
|
this.timer = setInterval(() => {
|
if (this.count > 0 && this.count <= TIME_COUNT) {
|
this.count--
|
} else {
|
this.codeshow = true
|
clearInterval(this.timer)
|
this.timer = null
|
}
|
}, 1000)
|
} else {
|
Toast(result.msg)
|
}
|
}
|
}
|
}
|
},
|
async checkPhone () {
|
// 先验证是否已经注册
|
let data = await api.checkPhone({ phoneNum: this.phone })
|
if (data.status === 0) {
|
// 如果用户已存在返回 0
|
this.dialogShow = true
|
this.adminUrl = process.env.API_HOST
|
if (this.adminUrl === undefined) {
|
this.adminUrl = ''
|
}
|
// this.gook()
|
} else {
|
Toast(this.$t('jy463'))
|
this.$router.push('/register')
|
}
|
},
|
async gook () {
|
if (isNull(this.phone) || !isPhone(this.phone)) {
|
Toast(this.$t('hj28'))
|
} else if (isNull(this.password)) {
|
Toast(this.$t('hj30'))
|
} else if (isNull(this.password2)) {
|
Toast(this.$t('hj31'))
|
} else if (isNull(this.code)) {
|
Toast(this.$t('jy459'))
|
} else if (this.password !== this.password2) {
|
Toast(this.$t('hj32'))
|
this.password = 0
|
this.password2 = 0
|
} else {
|
let opts = {
|
phoneNum: this.phone,
|
code: this.code,
|
newPwd: this.password
|
}
|
let data = await api.forgetPas(opts)
|
if (data.status === 0) {
|
Toast(this.$t('jy462'))
|
this.$router.push('/login')
|
} else {
|
Toast(data.msg ? data.msg :this.$t('jy461'))
|
}
|
}
|
},
|
refreshImg () {
|
this.adminUrl = ''
|
this.imgCodeTime = Date.now()
|
this.dialogImgShow = false
|
let this_ = this
|
setTimeout(function () {
|
this_.adminUrl = process.env.API_HOST
|
if (this_.adminUrl === undefined) {
|
this_.adminUrl = ''
|
}
|
this_.dialogImgShow = true
|
}, 500)
|
}
|
},
|
created () {},
|
mounted () {}
|
}
|
</script>
|
<style lang="less" scoped>
|
body {
|
background-color: #fff;
|
}
|
|
body /deep/ .mint-toast {
|
z-index: 1000000;
|
}
|
|
.form-group {
|
padding: 0rem 0.97rem;
|
font-size: 0.29rem;
|
|
.title {
|
font-size: 0.43rem;
|
margin-bottom: 0.34rem;
|
margin-top: 1.40rem;
|
}
|
|
.mint-cell {
|
padding: 0;
|
}
|
|
/deep/ .mint-cell-title {
|
text-align: left;
|
}
|
|
/deep/ .mint-cell-wrapper {
|
height: 1.19rem;
|
line-height: 1.19rem;
|
}
|
}
|
|
.btnbox {
|
width: 35%;
|
padding-top: 0.28rem;
|
}
|
|
.mint-popup-box {
|
// width: 100%;
|
// height: 100%;
|
// background:#fff;
|
.title {
|
font-size: 0.43rem;
|
margin-bottom: 0.34rem;
|
// margin-top: 1.40rem;
|
padding: 0.1rem 0.4rem;
|
color: #333;
|
}
|
|
.mint-cell {
|
background: none;
|
color: #000;
|
width: 100%;
|
}
|
|
/deep/ .mint-cell-text {
|
color: #000;
|
}
|
|
.mint-cell-wrapper {
|
border: 0.02rem solid #ddd;
|
}
|
|
.mint-button {
|
margin-top: 0.2rem;
|
width: 60%;
|
}
|
|
.check-box {
|
p {
|
padding: 0.2rem 0.4rem;
|
}
|
|
padding-bottom: 0.3rem;
|
}
|
}
|
</style>
|
