Skip to content

B
bigwood
Commit d003c318 authored by 黄奎's avatar 黄奎
Browse files
Options

新增参数

parent 368514ee
Hide whitespace changes
Inline Side-by-side
Showing with 117 additions and 79 deletions
src/pages/auth/forget.vue
View file @ d003c318
<template>
<div class="row full-height">
<div class="col q-pa-xl fit row justify-center height">
<div style="width:450px;" class="column justify-between content-between">
<div class="row items-center">
<div class="col q-pa-xl fit row justify-center height">
<div style="width: 450px" class="column justify-between content-between">
<div class="row items-center">
<div class="col">
<q-btn round flat size="md" @click="goback">
<svg-icon icon="Navigation/Arrow-left.svg" :size="24" tips="$t('forget.goback')"></svg-icon>
<svg-icon
icon="Navigation/Arrow-left.svg"
:size="24"
tips="$t('forget.goback')"
></svg-icon>
</q-btn>
</div>
<div class="text-grey-6 text-weight-bold text-right" >
<span>{{$t("forget.notaccess")}}</span>
<router-link :to="{ path: '/auth/login' }" class="text-primary pfb text-subtitle">{{$t("forget.registlink")}}</router-link>
<div class="text-grey-6 text-weight-bold text-right">
<span>{{ $t("forget.notaccess") }}</span>
<router-link
:to="{ path: '/auth/login' }"
class="text-primary pfb text-subtitle"
>{{ $t("forget.registlink") }}</router-link
>
</div>
</div>
<div class="q-py-xxl full-width">
<div class="text-h3 text-weight-bold">{{$t("forget.title")}}</div>
<div class="text-grey-6 q-mt-sm q-mb-lg">{{$t("forget.subtitle")}}</div>
<div class="text-h3 text-weight-bold">{{ $t("forget.title") }}</div>
<div class="text-grey-6 q-mt-sm q-mb-lg">{{ $t("forget.subtitle") }}</div>
<div class="form-box q-my-lg">
<div class="q-mb-lg">
<q-input :label="$t('forget.account')" standout v-model="account" dense ref="accountRef" :rules="[(val:any, rules:any) => rules.email(val) || $t('login.ruleTipsAccount')]" />
<q-input
:label="$t('forget.account')"
standout
v-model="account"
dense
ref="accountRef"
:rules="[(val:any, rules:any) => rules.email(val) || $t('login.ruleTipsAccount')]"
/>
</div>
</div>
<div class="row items-center" :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<div
class="row items-center"
:class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }"
>
<div class="col">
<q-btn size="md" class="q-px-lg" color="primary" :loading="loading" @click="sendVerifyCode" unelevated :label="$t('forget.submit')" />
<q-btn
size="md"
class="q-px-lg"
color="primary"
:loading="loading"
@click="sendVerifyCode"
unelevated
:label="$t('forget.submit')"
/>
</div>
</div>
</div>
......@@ -36,11 +61,11 @@
map-options
option-value="langLocale"
option-label="langName"
style="width:180px"
style="width: 180px"
@update:model-value="getLanguage"
>
<template v-slot:selected>
{{$t("lanuage")}}：
{{ $t("lanuage") }}：
<q-chip
dense
square
......@@ -58,90 +83,103 @@
<div class="col right-bg full-height mobile-hide"></div>
</div>
<q-dialog no-esc-dismiss persistent v-model="successModel">
<q-card :class="{'q-pa-xl':$q.platform.is.desktop,'q-pa-lg':$q.platform.is.mobile}">
<q-card-section>
<div class="text-center q-mb-md">
<svg-icon icon="Code/Done-circle.svg" color="success" :size="80"></svg-icon>
</div>
<div>{{$t('forget.mailResult')}}</div>
<div class="text-center q-mt-xl">
<q-btn color="primary" @click="goback" unelevated :label="$t('forget.resultBtn')" />
</div>
</q-card-section>
</q-card>
<q-card
:class="{ 'q-pa-xl': $q.platform.is.desktop, 'q-pa-lg': $q.platform.is.mobile }"
>
<q-card-section>
<div class="text-center q-mb-md">
<svg-icon icon="Code/Done-circle.svg" color="success" :size="80"></svg-icon>
</div>
<div>{{ $t("forget.mailResult") }}</div>
<div class="text-center q-mt-xl">
<q-btn
color="primary"
@click="goback"
unelevated
:label="$t('forget.resultBtn')"
/>
</div>
</q-card-section>
</q-card>
</q-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import useMetaModule from '../../module/meta/metaModule'
import { useI18n } from 'vue-i18n'
import { defineComponent, reactive, ref, toRefs } from "vue";
import useMetaModule from "../../module/meta/metaModule";
import { useI18n } from "vue-i18n";
import { getLangs } from "../../utils/tools";
import { SitLang } from '../../@types';
import svgIcon from '../../components/global/svg-icon.vue';
import UserService from '../../api/user';
import message from '../../utils/message';
import { ApiResult } from '../../@types/enumHelper';
import { useQuasar } from 'quasar';
import { SitLang } from "../../@types";
import svgIcon from "../../components/global/svg-icon.vue";
import UserService from "../../api/user";
import message from "../../utils/message";
import { ApiResult } from "../../@types/enumHelper";
import { useQuasar } from "quasar";
export default defineComponent({
components: { svgIcon },
setup() {
let { setTitle } = useMetaModule()
let { setTitle } = useMetaModule();
const accountRef = ref(null)
const {locale,t } = useI18n();
setTitle(t("forget.pageTitle"))
const data=reactive({
const accountRef = ref(null);
const { locale, t } = useI18n();
setTitle(t("forget.pageTitle"));
const data = reactive({
currentLang: {} as SitLang,
langs:[] as SitLang[],
account:'',
loading:false,
successModel:false
})
data.langs=getLangs()
if(data.langs && data.langs.length>0){
data.currentLang = data.langs.find(x=> x.langLocale==locale.value) ?? {};
langs: [] as SitLang[],
account: "",
loading: false,
successModel: false,
});
data.langs = getLangs();
if (data.langs && data.langs.length > 0) {
data.currentLang = data.langs.find((x) => x.langLocale == locale.value) ?? {};
}
let methods = {
sendVerifyCode(){
if(data.loading) return
const accountRefVal=accountRef as any
console.log(accountRef.value)
accountRefVal.value.validate()
if(!accountRefVal.value.hasError){
data.loading=true
sendVerifyCode() {
if (data.loading) return;
const accountRefVal = accountRef as any;
console.log(accountRef.value);
let domainStr = window.location.hostname;
accountRefVal.value.validate();
if (!accountRefVal.value.hasError) {
data.loading = true;
//hasError
UserService.sendVerify({account:data.account,platform:3}).then(r=>{
console.log(r)
data.loading=false
if(r.data.resultCode==ApiResult.SUCCESS){
data.successModel=true
}else{
message.errorMsg(r.data.message)
}
}).catch(e=>{
data.loading=false
message.errorMsg(e.message)
UserService.sendVerify({
account: data.account,
platform: 3,
domain: domainStr,
})
.then((r) => {
console.log(r);
data.loading = false;
if (r.data.resultCode == ApiResult.SUCCESS) {
data.successModel = true;
} else {
message.errorMsg(r.data.message);
}
})
.catch((e) => {
data.loading = false;
message.errorMsg(e.message);
});
}
},
goback(){
window.history.go(-1)
goback() {
window.history.go(-1);
},
// 切换语言
getLanguage(val:SitLang) {
locale.value = val.langLocale??'';
getLanguage(val: SitLang) {
locale.value = val.langLocale ?? "";
localStorage.setItem('lanuage', val.langLocale??'')
}
}
localStorage.setItem("lanuage", val.langLocale ?? "");
},
};
return { ...toRefs(data), ...methods,accountRef }
}
})
return { ...toRefs(data), ...methods, accountRef };
},
});
</script>
<style>
......@@ -160,14 +198,14 @@ export default defineComponent({
.w-450-only {
width: 450px;
}
.right-bg{
.right-bg {
background-image: url(../../assets/images/login-right-bg.png);
background-position-x: left;
background-position-y: center;
background-repeat: no-repeat;
background-size: cover;
}
.top-bg{
.top-bg {
background-image: url(https://preview.keenthemes.com/metronic8/demo1/assets/media/auth/bg11.png);
background-position-x: -100px;
background-position-y: -85vh;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment