add educate page
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="w-full flex flex-col">
|
||||
<img :src="config.config.avatar" alt="" class="z-100 rounded-full aspect-square self-center w-42 " STYLE="margin-bottom: 60px">
|
||||
<img :src="config.config.avatar" alt="" class="z-100 rounded-full aspect-square self-center w-36 " STYLE="margin-bottom: 60px">
|
||||
|
||||
<!-- <div class="font-bold text-center text-xl">{{ URLUserType() === 'single' ? 'ورود' : 'ورود همکار' }}</div>-->
|
||||
<!-- <div v-if="URLUserType() === 'single'" class="font-bold text-center text-xl">ورود</div>-->
|
||||
@@ -117,11 +117,14 @@
|
||||
ورود با اثر انگشت
|
||||
</div>
|
||||
</BasicButton>
|
||||
<div class="flex gap-1 justify-center mt-5 text-xs" @click="$emit('register',true)">اگر حساب کاربری ندارید
|
||||
<div class="cursor-pointer flex gap-1 justify-center mt-5 text-xs" @click="$emit('register',true)">اگر حساب کاربری ندارید
|
||||
<div class="font-bold text-primary">از این قسمت</div>
|
||||
ثبت نام کنید.
|
||||
</div>
|
||||
</a-form-item>
|
||||
<BasicButton v-if="config.config.name === 'garoosi'" class="w-full !font-bold" @click="goToEducate">
|
||||
<div class="flex gap-2 items-center">آموزش کار با نرم افزار</div>
|
||||
</BasicButton>
|
||||
</a-form>
|
||||
|
||||
<!-- <div v-if="URLUserType() === 'single'" class="fixed bottom-5 left-0 right-0 text-center">
|
||||
@@ -136,7 +139,6 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
import { mobileValidation, required } from '@/utils/inputRules'
|
||||
// import type {UserMobile} from "@/models/login";
|
||||
import BasicInput from '@/components/BasicPacks/BasicInput.vue'
|
||||
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
||||
import { authenticateWithFingerprint, getToken, loading, removeToken, setToken, URLUserType } from '@/utils'
|
||||
@@ -151,16 +153,14 @@ import { loginCustomer, verifyToken } from '@/api/login'
|
||||
import router from '@/router'
|
||||
import { useUserStore } from '@/store/userStore'
|
||||
import { useWalletStore } from '@/store/walletStore'
|
||||
import logo from '@/assets/img/logo.png'
|
||||
import { fingerPosition, setTruth } from '@/main'
|
||||
import {useConfigStore} from "@/store/configStore";
|
||||
|
||||
const config=useConfigStore()
|
||||
const { time, onFinish, reset } = useCountdownTimer('00:02:00', 'mm:ss')
|
||||
const enableSendAgainCode = ref<boolean>(false)
|
||||
|
||||
const stepTwoVerify = ref<boolean>(false)
|
||||
const formRef = ref<FormInstance>()
|
||||
const config=useConfigStore()
|
||||
const userStore = useUserStore()
|
||||
const walletStore = useWalletStore()
|
||||
const data = reactive(['ورود با پیامک', 'ورود با کلمه عبور'])
|
||||
@@ -297,9 +297,11 @@ const getcode=()=>{
|
||||
console.log('not supported');
|
||||
}
|
||||
}
|
||||
|
||||
const goToEducate = () => {
|
||||
router.push({ name: "educate" })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="less">
|
||||
.animate.right {
|
||||
right: 0;
|
||||
@@ -310,345 +312,4 @@ const getcode=()=>{
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
<template>
|
||||
<div class="w-full flex flex-col">
|
||||
<img :src="logo" alt="" class="z-100 w-full aspect-square self-center h-20">
|
||||
<img :src="logoFull" alt="" class="z-100 w-50 aspect-square self-center mb-5 h-10">
|
||||
<!– <div class="font-bold text-center text-xl">{{ URLUserType() === 'single' ? 'ورود' : 'ورود همکار' }}</div>–>
|
||||
<!– <div v-if="URLUserType() === 'single'" class="font-bold text-center text-xl">ورود</div>–>
|
||||
<!– <div v-else class="font-bold text-center text-xl">ورود همکار</div>–>
|
||||
<a-form ref="formRef" :model="userFormState" class="!mt-5" name="basic" @finish="phoneVerification">
|
||||
<!– <a-segmented v-model:value="value" :options="data" />–>
|
||||
<div class="flex justify-evenly w-full px-2 h-11 items-center bg-gray-50 relative rounded mb-5">
|
||||
<div :class="isSMS?'text-primary':'text-gray-400'" class="w-full text-center z-2"
|
||||
@click.stop="setIsSMS(true) ">
|
||||
ورود با پیامک
|
||||
</div>
|
||||
<div :class="!isSMS?'text-primary':'text-gray-400'" class="w-full text-center z-2"
|
||||
@click.stop="setIsSMS(false) ">
|
||||
ورود با کلمه عبور
|
||||
</div>
|
||||
<!– <div ref="bganim" class="absolute bg-white h-8 w-1/2 rounded-lg " :style="`transform: translateX(${isDeposit? '0':'-100%'}); left: ${isDeposit? '0':'100%'}`"></div>–>
|
||||
<div ref="bganim" :style="useStyle()"
|
||||
class="absolute bg-white h-8 w-1/2 rounded-lg animate right"></div>
|
||||
</div>
|
||||
|
||||
<!– <transition name="fade" mode="out-in">–>
|
||||
<a-form-item v-if="!stepTwoVerify" :rules="[required('شماره تلفن'),mobileValidation()]"
|
||||
class="home_appear_fade_in_down" label="شماره تلفن"
|
||||
name="mobile">
|
||||
<BasicInput v-model:value="userFormState.mobile" place-holder="شماره تلفن" size="large" type="number" />
|
||||
</a-form-item>
|
||||
<!– </transition>–>
|
||||
<!– <transition name="fade" mode="out-in">–>
|
||||
<a-form-item v-if="!isSMS" :rules="[required('کلمه عبور')]" class="home_appear_fade_in_down" label="کلمه عبور"
|
||||
name="password">
|
||||
<!– <BasicInput v-model:value="userFormState.password" size="large" place-holder="کلمه عبور"/>–>
|
||||
<AInputPassword v-model:value="userFormState.password" place-holder="کلمه عبور" size="large" />
|
||||
</a-form-item>
|
||||
<div v-else-if="!stepTwoVerify" class="h-[90px]"></div>
|
||||
<div v-else>
|
||||
<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="mt-5 justify-center"
|
||||
input-classes="otp-input"
|
||||
separator=""
|
||||
style="direction: ltr"
|
||||
value=""
|
||||
@on-change="handleOnChange"
|
||||
@on-complete="handleOnComplete"
|
||||
/>
|
||||
</AFormItem>
|
||||
<div class="flex items-center my-[23px] justify-center">
|
||||
<span class="text-gray-400 mt-1">{{ userFormState.mobile }}</span>
|
||||
<div class="flex items-center text-gray-700 mr-2" @click="stepTwoVerify = false">
|
||||
<span class="ml-1">ویرایش شماره</span>
|
||||
<BasicIcon icon="vuesax-linear:edit" size="20" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 w-full">
|
||||
<AButton :disabled="!enableSendAgainCode" class="w-full" type="dashed" @click="reSendCode">
|
||||
<div v-if="!enableSendAgainCode" class="flex w-full justify-center">
|
||||
<span>ارسال مجدد کد در </span>
|
||||
<span class="text-primary mx-1">{{ time }}</span>
|
||||
<span> دیگر </span>
|
||||
</div>
|
||||
<div v-else>
|
||||
ارسال مجدد کد تایید
|
||||
</div>
|
||||
</AButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!– </transition>–>
|
||||
|
||||
|
||||
<a-form-item>
|
||||
<!– <div class="flex text-gray-600 text-xs my-2">با ورود یا ثبت نام
|
||||
<div class="mx-1 font-bold">شرایط و قوانین</div>
|
||||
را میپذیرم
|
||||
</div>–>
|
||||
<BasicButton
|
||||
:disabled="loading"
|
||||
class=" w-full py-2"
|
||||
html-type="submit"
|
||||
type="primary"
|
||||
>
|
||||
<div>
|
||||
<a-spin v-if="loading" size="small" />
|
||||
<div v-else>{{ !isSMS ? 'ورود' : stepTwoVerify ? 'ورود' : 'ارسال کد' }}</div>
|
||||
</div>
|
||||
</BasicButton>
|
||||
<BasicButton
|
||||
v-if="getToken() && userStore.userInfo?.finger_print"
|
||||
:disabled="loading"
|
||||
class=" w-full py-2 mt-2"
|
||||
@click="enterFingerPrint"
|
||||
>
|
||||
<div>
|
||||
ورود با اثر انگشت
|
||||
</div>
|
||||
</BasicButton>
|
||||
<div class="flex gap-1 justify-center mt-5 text-xs" @click="$emit('register',true)">اگر حساب کاربری ندارید
|
||||
<div class="font-bold text-[#0A1B37]">از این قسمت</div>
|
||||
ثبت نام کنید.
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<!– <div v-if="URLUserType() === 'single'" class="fixed bottom-5 left-0 right-0 text-center">
|
||||
<a class="w-full text-center"
|
||||
href="https://abshode.peransagold.com/">ورود
|
||||
همکار</a>
|
||||
</div>–>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import { mobileValidation, required } from '@/utils/inputRules'
|
||||
// import type {UserMobile} from "@/models/login";
|
||||
import BasicInput from '@/components/BasicPacks/BasicInput.vue'
|
||||
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
||||
import {
|
||||
authenticateWithFingerprint,
|
||||
getToken,
|
||||
loading,
|
||||
removeToken,
|
||||
setFingerPrint,
|
||||
setToken,
|
||||
URLUserType
|
||||
} from '@/utils'
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import OtpInput from 'vue3-otp-input'
|
||||
import type { Login } from '@/models/login'
|
||||
import type { FormInstance } from 'ant-design-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
||||
import useCountdownTimer from '@/utils/useCountdownTimer'
|
||||
import { loginCustomer, verifyToken } from '@/api/login'
|
||||
import router from '@/router'
|
||||
import { useUserStore } from '@/store/userStore'
|
||||
import { useWalletStore } from '@/store/walletStore'
|
||||
import logo from '@/assets/img/logo.svg'
|
||||
import { fingerPosition, setFingerPosition, setFingerTimeOut, setTruth } from '@/main'
|
||||
|
||||
const { time, onFinish, reset } = useCountdownTimer('00:02:00', 'mm:ss')
|
||||
const enableSendAgainCode = ref<boolean>(false)
|
||||
|
||||
const stepTwoVerify = ref<boolean>(false)
|
||||
const formRef = ref<FormInstance>()
|
||||
|
||||
const userStore = useUserStore()
|
||||
const walletStore = useWalletStore()
|
||||
const data = reactive(['ورود با پیامک', 'ورود با کلمه عبور'])
|
||||
const value = ref(data[0])
|
||||
const refOtpInput = ref<InstanceType<typeof VOtpInput> | null>(null)
|
||||
|
||||
const userFormState = reactive<Login>({
|
||||
provider: 'customer'
|
||||
})
|
||||
|
||||
//time
|
||||
onFinish(() => {
|
||||
enableSendAgainCode.value = true
|
||||
})
|
||||
const isAuthenticated = ref(false);
|
||||
onMounted(async () => {
|
||||
if (getToken()) {
|
||||
const result = await authenticateWithFingerprint();
|
||||
setFingerPosition(result)
|
||||
if (result) {
|
||||
isAuthenticated.value = true;
|
||||
await router.push({ name: 'home' }); // Redirect to home on successful authentication
|
||||
} else {
|
||||
isAuthenticated.value = false;
|
||||
// Handle failed authentication
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
async function reSendCode() {
|
||||
userFormState.token = undefined
|
||||
// refOtpInput.value?.clearInput()
|
||||
enableSendAgainCode.value = false
|
||||
await loginCustomer(userFormState)
|
||||
reset()
|
||||
}
|
||||
|
||||
const isSMS = ref<boolean>(true)
|
||||
|
||||
function setIsSMS(val: boolean) {
|
||||
isSMS.value = val
|
||||
if (!val) stepTwoVerify.value = false
|
||||
userFormState.token = ''
|
||||
userFormState.password = ''
|
||||
// console.log(bganim.value.classList)
|
||||
// bganim?.value?.classList.add(val?'right':'left')
|
||||
// bganim?.value?.style.transform = `translateX(${val ? '0' : '-100'});`
|
||||
// bganim?.value?.style.animationDirection = val? 'normal':'reverse'
|
||||
// val? bganim?.value?.classList?.add("move") : bganim?.value?.classList?.remove("move")
|
||||
// const el = bganim.value?.
|
||||
// el.
|
||||
}
|
||||
|
||||
async function enterFingerPrint() {
|
||||
const fingerPrint = await authenticateWithFingerprint()
|
||||
if (fingerPrint) {
|
||||
setTruth()
|
||||
await router.push({ name: 'home' })
|
||||
} else {
|
||||
message.error('خطا در اعتبارسنجی')
|
||||
}
|
||||
}
|
||||
|
||||
function useStyle() {
|
||||
if (isSMS.value) return 'right: 2%;'
|
||||
// if (isDeposit.value) return 'animation-direction: normal'
|
||||
// else return 'animation-direction: reverse'
|
||||
else return ' right: 98%; transform: translate(100%, 0);'
|
||||
}
|
||||
|
||||
function handleOnChange(value: string) {
|
||||
userFormState.token = value
|
||||
// formRef.value?.validateFields()
|
||||
}
|
||||
|
||||
async function handleOnComplete(value: string) {
|
||||
userFormState.token = value
|
||||
phoneVerification()
|
||||
}
|
||||
|
||||
async function login(accessToken: string | undefined) {
|
||||
setToken(accessToken)
|
||||
setFingerTimeOut(router.currentRoute.value)
|
||||
await userStore.getMyInfo()
|
||||
// console.log(URLUserType())
|
||||
// console.log(userStore.userInfo?.type)
|
||||
/* if (userStore.userInfo?.type === (URLUserType() === 'customer' ? 1 : 2)) {*/
|
||||
await walletStore.getMyWallet()
|
||||
setTruth()
|
||||
await router.push({ name: 'home' })
|
||||
/* } else {
|
||||
removeToken()
|
||||
userStore.removeInformation()
|
||||
message.error('شما مجوز ورود به این بخش را ندارید')
|
||||
}*/
|
||||
}
|
||||
|
||||
function phoneVerification() {
|
||||
formRef.value?.validateFields().then(async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
if (isSMS.value) {
|
||||
if (!stepTwoVerify.value) {
|
||||
userFormState.token = undefined
|
||||
userFormState.password = undefined
|
||||
userFormState.provider = 'customer'
|
||||
const { id } = await loginCustomer(userFormState)
|
||||
userFormState.id = id
|
||||
stepTwoVerify.value = true
|
||||
getcode()
|
||||
reset()
|
||||
} else {
|
||||
const { access_token } = await verifyToken(userFormState)
|
||||
await login(access_token)
|
||||
}
|
||||
} else {
|
||||
userFormState.token = undefined
|
||||
const { access_token } = await loginCustomer(userFormState)
|
||||
await login(access_token)
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
const getcode=()=>{
|
||||
if ('OTPCredential' in window) {
|
||||
console.log('run')
|
||||
const ac = new AbortController();
|
||||
navigator.credentials
|
||||
.get({
|
||||
otp: { transport: ['sms'] },
|
||||
signal: ac.signal,
|
||||
})
|
||||
.then((otp) => {
|
||||
console.log('otp recived');
|
||||
userFormState.token = otp?.code;
|
||||
refOtpInput.value.fillInput(otp?.code)
|
||||
phoneVerification();
|
||||
ac.abort();
|
||||
})
|
||||
.catch((err) => {
|
||||
ac.abort();
|
||||
console.log(err);
|
||||
});
|
||||
} else {
|
||||
console.log('not supported');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="less">
|
||||
.animate.right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.animate.right.move {
|
||||
right: 100%;
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
|
||||
|
||||
</style>-->
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="w-full flex flex-col">
|
||||
<img :src="config.config.avatar" alt="" class="z-100 rounded-full aspect-square self-center w-42 " STYLE="">
|
||||
<img :src="config.config.avatar" alt="" class="z-100 rounded-full aspect-square self-center w-36 " STYLE="">
|
||||
<div class="font-bold text-center text-xl">ثبت نام</div>
|
||||
<a-form ref="formRef" :model="userFormState" class="!mt-5" name="basic"
|
||||
@finish="registerAccount">
|
||||
@@ -38,11 +38,14 @@
|
||||
<div v-else>ثبت نام</div>
|
||||
</div>
|
||||
</BasicButton>
|
||||
<div class="flex gap-1 justify-center mt-5 text-xs" @click="$emit('register',false)">اگر حساب کاربری دارید
|
||||
<div class="cursor-pointer flex gap-1 justify-center mt-5 text-xs" @click="$emit('register',false)">اگر حساب کاربری دارید
|
||||
<div class="font-bold text-primary">از این قسمت</div>
|
||||
وارد شوید.
|
||||
</div>
|
||||
</a-form-item>
|
||||
<BasicButton v-if="config.config.name === 'garoosi'" class="w-full !font-bold" @click="goToEducate">
|
||||
<div class="flex gap-2 items-center">آموزش کار با نرم افزار</div>
|
||||
</BasicButton>
|
||||
</a-form>
|
||||
<DialogVantOneButton v-model:show="registeredInfo" :closeOnClickOverlay="false" :timeOut="-1">
|
||||
<template v-slot:img>
|
||||
@@ -127,7 +130,6 @@ import registerDelayImage from '@/assets/img/registerDelay.svg'
|
||||
import DialogVantOneButton from '@/components/DialogVantOneButton.vue'
|
||||
import { registerCustomer } from '@/api/login'
|
||||
import router from '@/router'
|
||||
import logo from "@/assets/img/logo.png";
|
||||
import {useConfigStore} from "@/store/configStore";
|
||||
const config = useConfigStore()
|
||||
|
||||
@@ -191,6 +193,10 @@ function registerAccount() {
|
||||
})
|
||||
}
|
||||
|
||||
const goToEducate = () => {
|
||||
router.push({ name: "educate" })
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user