<template>
|
<LoginPageLayout class="loginByForm-page-wrapper">
|
<div class="loginB-form-wrapper">
|
<div class="loginB-form-tab">
|
<div
|
:class="[
|
'loginB-form-tab-item',
|
{ active: tabType === LoginFormTabs.VerificationCodeLogin },
|
]"
|
@click="handleTabChange(LoginFormTabs.VerificationCodeLogin)"
|
>
|
<img :src="IconTabBg1" alt="" class="loginB-form-tab-item-bg1" />
|
<div class="loginB-form-tab-item-content">
|
<div class="loginB-form-tab-item-text">验证码登录</div>
|
<div class="loginB-form-tab-item-line"></div>
|
</div>
|
</div>
|
<div
|
:class="['loginB-form-tab-item', { active: tabType === LoginFormTabs.AccountLogin }]"
|
@click="handleTabChange(LoginFormTabs.AccountLogin)"
|
>
|
<img :src="IconTabBg2" alt="" class="loginB-form-tab-item-bg2" />
|
<div class="loginB-form-tab-item-content">
|
<div class="loginB-form-tab-item-text">账户登录</div>
|
<div class="loginB-form-tab-item-line"></div>
|
</div>
|
</div>
|
</div>
|
<VerificationCodeLoginForm
|
v-show="tabType === LoginFormTabs.VerificationCodeLogin"
|
:policyChecked="state.policyChecked"
|
/>
|
<AccountLoginForm
|
v-show="tabType === LoginFormTabs.AccountLogin"
|
:policyChecked="state.policyChecked"
|
/>
|
</div>
|
<Policy
|
v-model="state.policyChecked"
|
policyBtnText="我已阅读并同意"
|
class="loginB-form-policy"
|
/>
|
</LoginPageLayout>
|
</template>
|
|
<script setup lang="ts">
|
import { useUserStore } from '@/stores/modules/user';
|
import LoginPageLayout from '../components/LoginPageLayout/LoginPageLayout.vue';
|
import { LoginFormTabs } from '../constants';
|
import IconTabBg1 from '@/assets/login/icon-tab-bg-1.png';
|
import IconTabBg2 from '@/assets/login/icon-tab-bg-2.png';
|
import VerificationCodeLoginForm from './verificationCodeLoginForm.vue';
|
import AccountLoginForm from './accountLoginForm.vue';
|
import { Policy } from '@/components';
|
import Taro from '@tarojs/taro';
|
|
defineOptions({
|
name: 'loginByForm',
|
});
|
|
const userStore = useUserStore();
|
|
const state = reactive({
|
policyChecked: false,
|
});
|
|
const router = Taro.useRouter();
|
|
const tabType = ref(Number(router.params?.tab ?? LoginFormTabs.VerificationCodeLogin));
|
|
function handleTabChange(tab: LoginFormTabs) {
|
tabType.value = tab;
|
}
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
@import '../styles/login.scss';
|
</style>
|
