198 lines
7.4 KiB
Vue
198 lines
7.4 KiB
Vue
<template>
|
|
<div class="w-full flex flex-col">
|
|
<img :src="logo" alt="" class="z-100 rounded-full aspect-square self-center w-42 " STYLE="">
|
|
<div class="font-bold text-center text-xl">ثبت نام</div>
|
|
<a-form ref="formRef" :model="userFormState" class="!mt-5" name="basic"
|
|
@finish="registerAccount">
|
|
<a-form-item :rules="[required()]" class="home_appear_fade_in_down" label="نام" name="fname">
|
|
<BasicInput v-model:value="userFormState.fname" place-holder="نام" />
|
|
</a-form-item>
|
|
<a-form-item :rules="[required()]" class="home_appear_fade_in_down" label="نام خانوادگی" name="lname">
|
|
<BasicInput v-model:value="userFormState.lname" place-holder="نام خانوادگی" />
|
|
</a-form-item>
|
|
<a-form-item :rules="[required(),mobileValidation()]" class="home_appear_fade_in_down" label="شماره تلفن"
|
|
name="mobile">
|
|
<BasicInput v-model:value="userFormState.mobile" place-holder="شماره تلفن" inputmode="numeric"/>
|
|
</a-form-item>
|
|
<a-form-item :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="کلمه عبور" inputmode="decimal"/>
|
|
</a-form-item>
|
|
<a-form-item class="home_appear_fade_in_down" label="کد معرف" name="referral_id">
|
|
<BasicInput :disabled="disableForm" v-model:value="userFormState.referral_id" place-holder="کد معرف"/>
|
|
</a-form-item>
|
|
<!-- <a-form-item v-if="URLUserType() === 'customer'" :rules="[required()]" class="home_appear_fade_in_down"
|
|
label="نام فروشگاه" name="shop_name">
|
|
<BasicInput v-model:value="userFormState.shop_name" place-holder="نام فروشگاه"/>
|
|
</a-form-item>-->
|
|
<a-form-item>
|
|
<BasicButton
|
|
:disabled="loading"
|
|
class=" w-full py-2 mt-4"
|
|
html-type="submit"
|
|
type="primary"
|
|
>
|
|
<div>
|
|
<a-spin v-if="loading" size="small" />
|
|
<div v-else>ثبت نام</div>
|
|
</div>
|
|
</BasicButton>
|
|
<div class="flex gap-1 justify-center mt-5 text-xs" @click="$emit('register',false)">اگر حساب کاربری دارید
|
|
<div class="font-bold text-primary">از این قسمت</div>
|
|
وارد شوید.
|
|
</div>
|
|
</a-form-item>
|
|
</a-form>
|
|
<DialogVantOneButton v-model:show="registeredInfo" :closeOnClickOverlay="false" :timeOut="-1">
|
|
<template v-slot:img>
|
|
<img :src="registerDelayImage" alt="" class="opacity-80">
|
|
</template>
|
|
|
|
<template v-slot:title>
|
|
<div class="p-5 text-center text-sm">
|
|
ثبت نام شما با موفقیت انجام شد. شما میتوانید با اطلاعات خود، وارد اپلیکیشن شوید.
|
|
</div>
|
|
</template>
|
|
|
|
<template v-slot:button>
|
|
<div class="text-center" @click="$emit('register',false)">
|
|
متوجه شدم
|
|
</div>
|
|
</template>
|
|
</DialogVantOneButton>
|
|
|
|
<!-- <van-dialog/>-->
|
|
<!--
|
|
<div v-else>
|
|
<AFormItem
|
|
class="error-token"
|
|
:rules="[
|
|
{
|
|
required: true,
|
|
message: 'کد ارسال شده را وارد نمایید',
|
|
},
|
|
{
|
|
min: 4,
|
|
max: 4,
|
|
message: 'کد ارسال شده را وارد نمایید',
|
|
},
|
|
]"
|
|
name="token"
|
|
>
|
|
<OtpInput
|
|
style="direction: ltr"
|
|
class="mt-5 justify-center"
|
|
ref="refOtpInput"
|
|
autocomplete="one-time-code"
|
|
input-classes="otp-input"
|
|
separator=""
|
|
value=""
|
|
:num-inputs="4"
|
|
:should-auto-focus="true"
|
|
:is-input-num="true"
|
|
@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 type="dashed" class="w-full" @click="reSendCode"> ارسال مجدد کد تایید</AButton>
|
|
</div>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
import { mobileValidation, required } from '@/utils/inputRules'
|
|
import type { User } from '@/models/login'
|
|
import BasicInput from '@/components/BasicPacks/BasicInput.vue'
|
|
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
|
import { loading, URLUserType } from '@/utils'
|
|
import { onMounted, reactive, ref } from 'vue'
|
|
import type { FormInstance } from 'ant-design-vue'
|
|
import { message } from 'ant-design-vue'
|
|
import registerDelayImage from '@/assets/img/registerDelay.svg'
|
|
import DialogVantOneButton from '@/components/DialogVantOneButton.vue'
|
|
import { registerCustomer } from '@/api/login'
|
|
import router from '@/router'
|
|
import { getAppLogoFullUrl } from '@/config/brand-assets'
|
|
|
|
const logo = getAppLogoFullUrl()
|
|
|
|
|
|
// const stepTwoVerify = ref<boolean>(false)
|
|
const registeredInfo = ref<boolean>(false)
|
|
|
|
const userFormState = reactive<User>({
|
|
access_token: ''
|
|
})
|
|
const formRef = ref<FormInstance>()
|
|
const disableForm=ref(false)
|
|
/*function handleOnChange(value: string) {
|
|
userFormState.token = value
|
|
// formRef.value?.validateFields()
|
|
}
|
|
|
|
async function handleOnComplete(value: string) {
|
|
userFormState.token = value
|
|
registerAccount()
|
|
}*/
|
|
onMounted(() => {
|
|
if (router.currentRoute.value.query.id){
|
|
userFormState.referral_id = router.currentRoute.value.query.id
|
|
disableForm.value=true
|
|
}
|
|
|
|
|
|
})
|
|
|
|
function registerAccount() {
|
|
// console.log('test')
|
|
formRef.value?.validateFields().then(async () => {
|
|
try {
|
|
// console.log('test',stepTwoVerify.value)
|
|
loading.value = true
|
|
// if (!stepTwoVerify.value) {
|
|
URLUserType() === 'single' ? userFormState.type = 2 : userFormState.type = 1
|
|
// console.log(userFormState)
|
|
if (!userFormState.referral_id || userFormState.referral_id === '') delete userFormState.referral_id
|
|
const { id } = await registerCustomer(userFormState)
|
|
registeredInfo.value = true
|
|
// console.log(registeredInfo.value)
|
|
// userFormState.id = id
|
|
// stepTwoVerify.value = true
|
|
// } else {
|
|
// userFormState.mobile = undefined
|
|
// userFormState.password = undefined
|
|
// userFormState.fname = undefined
|
|
// userFormState.lname = undefined
|
|
// userFormState.shop_name = undefined
|
|
// await verifyToken(userFormState)
|
|
// }
|
|
} catch (e) {
|
|
console.log(e)
|
|
if (e.response?.status === 422) {
|
|
// message.error('این شماره همراه قبلا ثبت نام کرده است')
|
|
}
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
|
</style> |