Split desktop and mobile layouts with shared page data so APIs fetch once per context.
Add layout shells, desktop views, module-level page caches, and UI fixes for auth, home, wallet, transactions, address, and related pages. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,204 @@
|
||||
<script setup lang="ts">
|
||||
import { mobileValidation, required } from '@/utils/inputRules'
|
||||
import BasicInput from '@/components/BasicPacks/BasicInput.vue'
|
||||
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
||||
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
||||
import OtpInput from 'vue3-otp-input'
|
||||
import { useConfigStore } from '@/store/configStore'
|
||||
import { useLoginPageContext } from '../../composables/useLoginPage'
|
||||
import DesktopPwaGuideModal from './DesktopPwaGuideModal.vue'
|
||||
import router from '@/router'
|
||||
|
||||
const emit = defineEmits<{
|
||||
register: [val: boolean]
|
||||
}>()
|
||||
|
||||
const config = useConfigStore()
|
||||
const {
|
||||
time,
|
||||
enableSendAgainCode,
|
||||
stepTwoVerify,
|
||||
formRef,
|
||||
refOtpInput,
|
||||
isSMS,
|
||||
isRegister,
|
||||
showPWAInstallGuide,
|
||||
userFormState,
|
||||
loading,
|
||||
submitLabel,
|
||||
showFingerprint,
|
||||
setIsSMS,
|
||||
reSendCode,
|
||||
enterFingerPrint,
|
||||
handleOnChange,
|
||||
handleOnComplete,
|
||||
phoneVerification,
|
||||
editPhoneNumber,
|
||||
installWebApp,
|
||||
proceedWithInstall,
|
||||
} = useLoginPageContext().loginForm
|
||||
|
||||
function goToEducate() {
|
||||
router.push({ name: 'educate' })
|
||||
}
|
||||
|
||||
function goToAboutUs() {
|
||||
router.push('/aboutUs')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dauth-card">
|
||||
<header class="dauth-card__header">
|
||||
<p class="dauth-card__eyebrow">حساب کاربری</p>
|
||||
<h2 class="dauth-card__title">ورود</h2>
|
||||
<p class="dauth-card__subtitle">برای ادامه، روش ورود خود را انتخاب کنید</p>
|
||||
</header>
|
||||
|
||||
<div class="dauth-toggle">
|
||||
<button
|
||||
type="button"
|
||||
class="dauth-toggle__btn"
|
||||
:class="{ 'dauth-toggle__btn--active': isSMS }"
|
||||
@click="setIsSMS(true)"
|
||||
>
|
||||
ورود با پیامک
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="dauth-toggle__btn"
|
||||
:class="{ 'dauth-toggle__btn--active': !isSMS }"
|
||||
@click="setIsSMS(false)"
|
||||
>
|
||||
ورود با کلمه عبور
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="userFormState"
|
||||
layout="vertical"
|
||||
class="dauth-form"
|
||||
name="desktop-login"
|
||||
@finish="phoneVerification"
|
||||
>
|
||||
<a-form-item
|
||||
v-if="!stepTwoVerify"
|
||||
:rules="[required('شماره تلفن'), mobileValidation('شماره تلفن')]"
|
||||
:validate-trigger="['change', 'blur']"
|
||||
label="شماره تلفن"
|
||||
name="mobile"
|
||||
>
|
||||
<BasicInput
|
||||
v-model:value="userFormState.mobile"
|
||||
place-holder="۰۹۱۲۳۴۵۶۷۸۹"
|
||||
size="large"
|
||||
inputmode="numeric"
|
||||
type="tel"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-if="!isSMS"
|
||||
:rules="[required('کلمه عبور')]"
|
||||
label="کلمه عبور"
|
||||
name="password"
|
||||
>
|
||||
<AInputPassword
|
||||
v-model:value="userFormState.password"
|
||||
place-holder="کلمه عبور"
|
||||
size="large"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<template v-if="isSMS && stepTwoVerify">
|
||||
<AFormItem
|
||||
:rules="[
|
||||
{ required: true, message: 'کد ارسال شده را وارد نمایید' },
|
||||
{ min: 4, max: 4, message: 'کد ارسال شده را وارد نمایید' },
|
||||
]"
|
||||
class="error-token"
|
||||
name="token"
|
||||
>
|
||||
<OtpInput
|
||||
ref="refOtpInput"
|
||||
:is-input-num="true"
|
||||
:num-inputs="4"
|
||||
:should-auto-focus="true"
|
||||
autocomplete="one-time-code"
|
||||
class="dauth-otp justify-center"
|
||||
input-classes="otp-input"
|
||||
separator=""
|
||||
style="direction: ltr"
|
||||
value=""
|
||||
@on-change="handleOnChange"
|
||||
@on-complete="handleOnComplete"
|
||||
/>
|
||||
</AFormItem>
|
||||
|
||||
<div class="dauth-phone-edit">
|
||||
<span class="dauth-phone-edit__number">{{ userFormState.mobile }}</span>
|
||||
<button type="button" class="dauth-phone-edit__btn" @click="editPhoneNumber">
|
||||
<span>ویرایش شماره</span>
|
||||
<BasicIcon icon="vuesax-linear:edit" size="16" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="dauth-resend">
|
||||
<AButton :disabled="!enableSendAgainCode" class="w-full" type="dashed" @click="reSendCode">
|
||||
<span v-if="!enableSendAgainCode">
|
||||
ارسال مجدد کد در <span class="text-primary mx-1">{{ time }}</span> دیگر
|
||||
</span>
|
||||
<span v-else>ارسال مجدد کد تایید</span>
|
||||
</AButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="dauth-actions">
|
||||
<BasicButton :disabled="loading" class="w-full" html-type="submit" type="primary">
|
||||
<a-spin v-if="loading" size="small" />
|
||||
<span v-else>{{ submitLabel }}</span>
|
||||
</BasicButton>
|
||||
|
||||
<BasicButton
|
||||
v-if="showFingerprint"
|
||||
:disabled="loading"
|
||||
class="w-full"
|
||||
@click="enterFingerPrint"
|
||||
>
|
||||
ورود با اثر انگشت
|
||||
</BasicButton>
|
||||
|
||||
<template v-if="config.config?.name === 'garoosi'">
|
||||
<div class="dauth-actions-row">
|
||||
<a
|
||||
class="dauth-link-btn dauth-link-btn--primary"
|
||||
download="Garoosi.apk"
|
||||
href="https://garoosigholaktala.ir/apk/Garoosi.apk"
|
||||
>
|
||||
دانلود اپ اندروید
|
||||
</a>
|
||||
<button type="button" class="dauth-link-btn" @click="installWebApp">
|
||||
نصب نسخه وب اپ
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" class="dauth-link-btn" @click="goToEducate">
|
||||
آموزش کار با نرم افزار
|
||||
</button>
|
||||
<button type="button" class="dauth-link-btn" @click="goToAboutUs">
|
||||
درباره ما
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div v-if="isRegister" class="dauth-switch">
|
||||
<span>حساب کاربری ندارید؟</span>
|
||||
<button type="button" class="dauth-switch__link" @click="emit('register', true)">
|
||||
ثبت نام کنید
|
||||
</button>
|
||||
</div>
|
||||
</a-form>
|
||||
|
||||
<DesktopPwaGuideModal v-model:show="showPWAInstallGuide" @confirm="proceedWithInstall" />
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user