ghatreh_user/src/views/login/components/Register.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
        v-if="settingsStore.loaded && settingsStore.isReferralFieldVisible"
        :rules="referralIdRules"
        class="home_appear_fade_in_down"
        :label="referralIdPlaceholder"
        name="referral_id"
      >
        <BasicInput
          :disabled="disableForm"
          v-model:value="userFormState.referral_id"
          :place-holder="referralIdPlaceholder"
        />
      </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>
        <BasicButton class="mt-2 w-full" @click="goToAboutSoftware">
          <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 { computed, 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 logo from "@/assets/img/logo_full_.png";
import { useSettingsStore } from '@/store/settingsStore'


const settingsStore = useSettingsStore()
const referralIdRules = computed(() =>
  settingsStore.isReferralRequired ? [required('کد معرف')] : [],
)
const referralIdPlaceholder = computed(() =>
  settingsStore.isReferralRequired ? 'کد معرف' : 'کد معرف (اختیاری)',
)

// 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(async () => {
  if (!settingsStore.loaded) {
    await settingsStore.fetchSettings()
  }
  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 (!settingsStore.isReferralFieldVisible && !disableForm.value) {
        delete userFormState.referral_id
      } else 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
    }
  })
}

function goToAboutSoftware() {
  router.push({ name: 'aboutSoftware' })
}

</script>


<style scoped>

</style>