158 lines
3.8 KiB
Vue
158 lines
3.8 KiB
Vue
<template>
|
|
<j-nav-bar :placeholder="false" color="#FFF" nav-bar-background="#F9BF3A00"/>
|
|
<div class="content">
|
|
|
|
<j-gap height="50" background="#F9BF3A" opacity="0"/>
|
|
<j-gap height="120" opacity="1"/>
|
|
<van-field
|
|
v-model="loginData.phoneNumber"
|
|
v-if="flag === '1'"
|
|
class="login-btn"
|
|
:label="$t('app.phoneNumber')"
|
|
:placeholder="$t('app.enter') + $t('app.phoneNumber')"
|
|
label-align="top"
|
|
style="background: #12332100"
|
|
type="tel"
|
|
/>
|
|
|
|
<van-field
|
|
v-model="loginData.code"
|
|
class="login-btn"
|
|
v-if="flag === '1'"
|
|
:label="$t('app.verificationCode')"
|
|
:placeholder="$t('app.enter') + $t('app.verificationCode')"
|
|
label-align="top"
|
|
style="background: #12332100"
|
|
type="number"
|
|
>
|
|
<template #button>
|
|
<div class="password-btn">
|
|
<van-count-down v-show="countDownFlag" ref="countDown" :auto-start="false" :time="time" @finish="onFinish">
|
|
<template #default="timeData">
|
|
<span class="block">{{ timeData.seconds }}{{ $t('app.second') }}</span>
|
|
</template>
|
|
</van-count-down>
|
|
<div v-show="!countDownFlag" style="color: #bc7c1c" @click="start">{{ $t('app.send') }}{{ $t('app.verificationCode') }}</div>
|
|
</div>
|
|
</template>
|
|
</van-field>
|
|
|
|
<van-field
|
|
v-model="loginData.password"
|
|
class="login-btn"
|
|
v-if="flag === '2'"
|
|
:label="$t('app.login') + $t('app.password')"
|
|
label-align="top"
|
|
:placeholder="$t('app.passwordPlaceholder')"
|
|
style="background: #12332100"
|
|
type="password"
|
|
/>
|
|
|
|
<van-field
|
|
v-model="loginData.confirmPassword"
|
|
class="login-btn"
|
|
v-if="flag === '2'"
|
|
:label="$t('app.confirm') + $t('app.password')"
|
|
label-align="top"
|
|
:placeholder="$t('app.passwordPlaceholder1')"
|
|
style="background: #12332100"
|
|
type="password"
|
|
/>
|
|
|
|
<van-button
|
|
:disabled="!loginData.phoneNumber || !loginData.code"
|
|
color="linear-gradient(to right, #D2A64C, #F9D88D)"
|
|
round
|
|
style="width: 100%; margin: 20px 0"
|
|
v-if="flag === '1'"
|
|
@click.stop="next"
|
|
>
|
|
{{ $t('app.next') }}
|
|
</van-button>
|
|
|
|
<van-button
|
|
:disabled="!loginData.password || !loginData.confirmPassword"
|
|
color="linear-gradient(to right, #D2A64C, #F9D88D)"
|
|
round
|
|
style="width: 100%; margin: 20px 0"
|
|
v-if="flag === '2'"
|
|
@click.stop="updatePwdBtn"
|
|
>
|
|
{{ $t('app.confirm') }}{{ $t('app.update') }}
|
|
</van-button>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {reactive, ref} from "vue";
|
|
import {sendSmsForget, updatePwd} from "@/api/login";
|
|
import {showToast} from "vant";
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const loginData = reactive({
|
|
phone: null,
|
|
phoneNumber: '',
|
|
code: null,
|
|
password: '',
|
|
confirmPassword: '',
|
|
checkCode: '',
|
|
})
|
|
|
|
const flag = ref('1')
|
|
const { t } = useI18n()
|
|
|
|
|
|
const time = ref(60 * 1000);
|
|
const countDown = ref();
|
|
const countDownFlag = ref(false);
|
|
const start = () => {
|
|
if (loginData.phoneNumber) {
|
|
countDown.value.start();
|
|
countDownFlag.value = true
|
|
sendSmsForget({
|
|
phoneNumber: loginData.phoneNumber
|
|
}).then(res => {
|
|
console.log(res)
|
|
loginData.code = res
|
|
loginData.checkCode = res
|
|
onFinish()
|
|
})
|
|
} else {
|
|
showToast(t('app.enter') + t('app.phoneNumber'))
|
|
}
|
|
};
|
|
|
|
const next = () => {
|
|
flag.value = '2'
|
|
}
|
|
|
|
const updatePwdBtn = () => {
|
|
updatePwd({
|
|
checkCode: loginData.checkCode,
|
|
confirmPassword: loginData.confirmPassword,
|
|
password: loginData.password
|
|
}).then(res => {
|
|
console.log(res)
|
|
})
|
|
}
|
|
|
|
|
|
const onFinish = () => {
|
|
countDownFlag.value = false
|
|
countDown.value.reset();
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
padding: 0 10px;
|
|
background-image: linear-gradient(to bottom, #F9BF3A, #ffffff, #ffffff, #ffffff, #ffffff);
|
|
height: 100vh;
|
|
|
|
|
|
|
|
}
|
|
</style> |