300 lines
8.1 KiB
Vue
300 lines
8.1 KiB
Vue
<template>
|
|
<view class="forgot-wrap" :class="[`${themeInfo.theme}-theme`]">
|
|
<navBar></navBar>
|
|
<view class="container">
|
|
<view class="logoBox">
|
|
<image src="/static/logo.png" mode=""></image>
|
|
<text>EMPOWER YOUR SELF STORAGE</text>
|
|
</view>
|
|
<view class="formBox">
|
|
<view class="form">
|
|
<uv-form labelPosition="left" :model="state" labelWidth='160rpx' :rules="rules" ref='formRef'>
|
|
<uv-form-item :label="$t('login.account')" prop="username" borderBottom>
|
|
<uv-input v-model="state.username" :placeholder="$t('login.account')" border="none">
|
|
</uv-input>
|
|
</uv-form-item>
|
|
<uv-form-item :label="$t('login.password')" prop="password" borderBottom >
|
|
<uv-input v-model="state.password" :placeholder="$t('login.password')" :type='state.passwordVisible?"text":"password"' border="none">
|
|
<template #suffix>
|
|
|
|
<uv-icon @click="state.passwordVisible = !state.passwordVisible" :name="state.passwordVisible?'eye-off-outline':'eye'" size="18" ></uv-icon>
|
|
</template>
|
|
</uv-input>
|
|
</uv-form-item>
|
|
<uv-form-item labelWidth='300rpx' :label="$t('login.confirm')" prop="passwordTow" borderBottom >
|
|
<uv-input v-model="state.passwordTow" :placeholder="$t('login.password')" :type='state.passwordVisible?"text":"password"' border="none">
|
|
<template #suffix>
|
|
|
|
<uv-icon @click="state.passwordVisible = !state.passwordVisible" :name="state.passwordVisible?'eye-off-outline':'eye'" size="18" ></uv-icon>
|
|
</template>
|
|
</uv-input>
|
|
</uv-form-item>
|
|
<uv-form-item :label="$t('login.code')" prop="code" borderBottom >
|
|
<uv-input v-model="state.code" :placeholder="$t('login.code')" border="none">
|
|
</uv-input>
|
|
<template #right>
|
|
<uv-button size="small" type="primary" @click="send">{{ count ? count+'S' : $t("login.send") }}</uv-button>
|
|
</template>
|
|
</uv-form-item>
|
|
<view>
|
|
<uv-button shape="circle" block type="primary" @click="onSubmit">{{ $t("login.change") }}</uv-button>
|
|
<view class="goLogin" @click="goLogin">
|
|
{{ $t("login.toLogin") }}
|
|
</view>
|
|
</view>
|
|
</uv-form>
|
|
</view>
|
|
|
|
<!-- <van-form class="form" @submit="onSubmit" ref='formRef'>
|
|
<van-cell-group inset>
|
|
<van-field v-model="state.username" name="account" label="account" placeholder="account"
|
|
:rules="[{ required: true, message: 'Please input' }]" />
|
|
<van-field v-model="state.password" type="password" name="password" label="password"
|
|
:right-icon="state.passwordVisible ? 'eye-o' : 'eye-off-o'" placeholder="password"
|
|
:rules="[{ required: true, message: 'Please input' }]" />
|
|
<van-field
|
|
v-model="state.passwordTow"
|
|
type="password"
|
|
name="passwordTow"
|
|
label="confirm password"
|
|
:right-icon="state.passwordVisible ? 'eye-o' : 'eye-off-o'"
|
|
placeholder="password"
|
|
:rules="[{ required: true, message: 'Please input' },{ validator: passwordIsSame, message: 'The password is different.' }]"
|
|
/>
|
|
<van-field v-model="state.code" name="code" label="code" placeholder="code"
|
|
:rules="[{ required: true, message: 'Please input' }]">
|
|
<template #button>
|
|
<van-button size="small" type="primary" @click="send">{{count? count+'S' : 'SEND'}}</van-button>
|
|
</template>
|
|
</van-field>
|
|
<div>
|
|
<van-button round block type="primary" native-type="submit">
|
|
change
|
|
</van-button>
|
|
<view class="goLogin" @click="goLogin">
|
|
LOGIN AN ACCOUNT
|
|
</view>
|
|
</div>
|
|
</van-cell-group>
|
|
</van-form> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from 'vue';
|
|
import {
|
|
onTabItemTap
|
|
} from '/utils/common.js'
|
|
import {
|
|
useLoginApi
|
|
} from '@/Apis/login.js';
|
|
import { useCountDown } from "@/hooks/index";
|
|
import { navigateBack } from '@/utils/common.js'
|
|
import navBar from '@/components/navBar.vue'
|
|
// 主题色配置
|
|
import { useMainStore } from "@/store/index.js";
|
|
const { themeInfo } = useMainStore();
|
|
const formRef = ref()
|
|
const { count, countDown,cancelCout } = useCountDown();
|
|
const getApi = useLoginApi()
|
|
// 国际化配置
|
|
import { useI18n } from 'vue-i18n';
|
|
const { t } = useI18n();
|
|
const passwordIsSame = ()=> state.value.password === state.value.passwordTow
|
|
const state = ref({
|
|
codeImage: '',
|
|
username: '',
|
|
uuid: '',
|
|
code: '',
|
|
password: '',
|
|
passwordTow:'',
|
|
passwordVisible: false,
|
|
})
|
|
const rules = {
|
|
username:[{ required: true, message: t("login.input"), trigger: ['blur', 'change'] }],
|
|
password:[{ required: true, message: t("login.input"), trigger: ['blur', 'change']}],
|
|
passwordTow:[{ required: true, message: t("login.input"), trigger: ['blur', 'change']}, { validator: passwordIsSame, message: t("login.different"), trigger: ['blur', 'change']}],
|
|
code:[{ required: true, message: t("login.input"), trigger: ['blur', 'change']}],
|
|
}
|
|
const togglePasswordVisibility = () => {
|
|
state.value.passwordVisible = !state.value.passwordVisible
|
|
};
|
|
const goLogin = ()=>{
|
|
navigateBack('/pages/login/index')
|
|
}
|
|
const send = () => {
|
|
formRef.value.validateField(['username','password','passwordTow'],vaild=>{
|
|
if(!vaild.length){
|
|
countDown(30,()=>{
|
|
ForgotPassword()
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
const ForgotPassword = () => {
|
|
uni.showLoading()
|
|
getApi.ForgotPassword(`"${state.value.username}"`).then(res => {
|
|
uni.hideLoading()
|
|
if (res.code === 200) {
|
|
uni.showToast({
|
|
title:res.msg,
|
|
icon:'none'
|
|
})
|
|
}else{
|
|
cancelCout()
|
|
}
|
|
})
|
|
}
|
|
const EmailVerify = () => {
|
|
uni.showLoading()
|
|
getApi.EmailVerify({
|
|
emailAddress: state.value.username,
|
|
verifyCode: state.value.code,
|
|
}).then(res => {
|
|
uni.hideLoading()
|
|
if (res.code === 200) {
|
|
UpdateUserInfo()
|
|
} else {
|
|
}
|
|
})
|
|
}
|
|
|
|
const UpdateUserInfo = () => {
|
|
uni.showLoading()
|
|
getApi.UpdateUserInfo({
|
|
emailAddress: state.value.username,
|
|
password: state.value.password,
|
|
type: 0,
|
|
}).then(res => {
|
|
uni.hideLoading()
|
|
if (res.code === 200) {
|
|
uni.showToast({
|
|
title:res.msg,
|
|
icon:'none'
|
|
})
|
|
goLogin()
|
|
} else {
|
|
}
|
|
})
|
|
}
|
|
const onSubmit = (values) => {
|
|
formRef.value.validate().then(()=>{
|
|
EmailVerify()
|
|
})
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '@/static/style/theme.scss';
|
|
.forgot-wrap {
|
|
background: linear-gradient(0deg, var(--left-linear) 0%, var(--right-linear) 94.004%);
|
|
height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
padding: 20rpx;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
min-width: 100%;
|
|
|
|
.logoBox {
|
|
margin-top: 6%;
|
|
padding: 40upx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #FFFFFF;
|
|
font-weight: 900;
|
|
font-size: 34rpx;
|
|
|
|
image {
|
|
margin-top: 20rpx;
|
|
width: 256rpx;
|
|
height: 63rpx;
|
|
}
|
|
}
|
|
|
|
.formBox {
|
|
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
left: 0;
|
|
padding: 0 20rpx;
|
|
|
|
.form {
|
|
background: #FFFFFF;
|
|
padding: 60rpx 20rpx;
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
|
|
.goLogin {
|
|
text-align: center;
|
|
padding: 30rpx 0;
|
|
}
|
|
::v-deep .uv-form-item__body{
|
|
margin-bottom: 25rpx;
|
|
background-color: #F6F7F9;
|
|
overflow: visible;
|
|
padding: 10px 16px;
|
|
.uv-form-item__body__left{
|
|
width: auto;
|
|
min-width: 140rpx;
|
|
flex-wrap: nowrap;
|
|
color: #617986;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
// ::v-deep .van-field{
|
|
// margin-bottom: 25rpx;
|
|
// background-color: #F6F7F9;
|
|
// overflow: visible;
|
|
// .van-field__label{
|
|
// width: auto;
|
|
// min-width: 120rpx;
|
|
// flex-wrap: nowrap;
|
|
// color: #617986;
|
|
// font-weight: 600;
|
|
// white-space: nowrap;
|
|
// display: flex;
|
|
// align-items: center;
|
|
// }
|
|
// .van-field__error-message{
|
|
// position: absolute;
|
|
// top: 40rpx;
|
|
// }
|
|
// .van-field__value{
|
|
// position: relative;
|
|
// }
|
|
// .van-field__control{
|
|
// color: #121819;
|
|
// font-weight: 600;
|
|
|
|
// }
|
|
// .van-field__button {
|
|
// .van-button {
|
|
// height: 50rpx;
|
|
// }
|
|
// }
|
|
// }
|
|
}
|
|
|
|
::v-deep .uv-button {
|
|
border-color: var(--btn-color5);
|
|
background-color: var(--btn-color5);
|
|
}
|
|
}
|
|
}
|
|
.code {
|
|
width: 140rpx;
|
|
height: 56rpx;
|
|
}
|
|
</style> |