hedena_gold/apps/user-app/src/views/user/RegisterView.vue

<!--
  Ported from legacy henza_pwa/src/views/user/LoginRegister/components/Register.vue.

  DROPPED as confirmed-dead code (not "possibly dead" — verified unreachable):
  legacy rendered a whole cascading country->province->city picker
  (WorkActionSheet + selectCityArrays + getCities() against POST /cities/list)
  alongside a plain "شهر" text <Input>. The only element that ever opened the
  picker (`#citybtn`) was itself commented out in legacy's own template, so
  the picker was unreachable UI even in the original app; the visible form
  uses the plain text input. That whole complex, and the parallel unused
  `userFormModel`/`defaultUserFormModel` objects (the template binds
  `formModel.*`, a *different*, separately-declared empty reactive object —
  `userFormModel` is never referenced anywhere), are not ported.

  STUBBED, not real: POST /major/register — apps/api has no create-customer
  endpoint. Submitting shows legacy's exact success dialog without actually
  persisting anything.
-->
<template>
  <div>
    <div class="fixed w-full">
      <img class="w-full absolute left-0 right-0" :src="pattern1" alt="" />
      <img class="absolute w-full left-0 right-0" :src="pattern2" alt="" />
    </div>
    <div class="fixed top-0 z-10 w-full">
      <AppHeader class="bg-white shadowHeader">
        <div class="flex justify-between items-center">
          <Icon icon="vuesax-linear:arrow-right-1" class="cursor-pointer" size="25" @click="router.push({ name: 'home' })" />
          <h3 class="t bold mb-0">ثبت نام</h3>
          <div></div>
        </div>
      </AppHeader>
    </div>
    <div class="relative w-full py-16 px-5">
      <div class="mt-14">
        <Spinner :spinning="profileData.loading" tip="در حال ثبت اطلاعات">
          <Form :model="formModel" layout="vertical" @finish="register" class="w-full">
            <FormItem style="font-size: 16px" name="fname" label="نام" :rules="required('نام')">
              <Input v-model:value="formModel.fname" />
            </FormItem>
            <FormItem style="font-size: 16px" name="lname" label="نام خانوادگی" :rules="required('نام خانوادگی')">
              <Input v-model:value="formModel.lname" />
            </FormItem>
            <FormItem style="font-size: 16px" name="mobile" label="شماره موبایل" :rules="[mobileRule('شماره موبایل'), required('شماره موبایل')]">
              <Input v-model:value="formModel.mobile" type="number" />
            </FormItem>
            <FormItem style="font-size: 16px" name="store_name" label="نام فروشگاه" :rules="required('نام فروشگاه')">
              <Input v-model:value="formModel.store_name" />
            </FormItem>
            <FormItem style="font-size: 16px" name="phone" label="تلفن فروشگاه" :rules="[required('تلفن فروشگاه')]">
              <Input v-model:value="formModel.phone" type="number" />
            </FormItem>
            <FormItem style="font-size: 16px" name="address" label="آدرس پستی" :rules="required('آدرس')">
              <Textarea v-model:value="formModel.address" />
            </FormItem>
            <FormItem name="city" label="شهر" :rules="required('شهر')">
              <Input v-model:value="formModel.city" />
            </FormItem>
            <Button type="primary" class="w-full max-w-[768px] m-auto" style="height: 42px" html-type="submit">
              <span style="font-size: 18px">ثبت اطلاعات</span>
            </Button>
          </Form>
        </Spinner>
        <div class="flex justify-center mt-10">
          <div>اگر حساب کاربری دارید از این قسمت</div>
          <div class="pr-1 text-primary font-bold" @click="emit('register', false)">وارد شوید.</div>
        </div>
      </div>
    </div>
    <DialogVant :timeOut="-1" v-model:show="registeredInfo" :closeOnClickOverlay="false">
      <template v-slot:img>
        <img :src="registerDelayImage" alt="" class="opacity-80" />
      </template>
      <template v-slot:title>
        <div class="p-5">ثبت نام شما با موفقیت انجام شد. منتظر تایید اطلاعات ثبت نامی شما توسط کارشناسان بمانید.</div>
      </template>
      <template v-slot:button>
        <div class="text-center" @click="router.push({ name: 'home' })">متوجه شدم</div>
      </template>
    </DialogVant>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Button, Form, FormItem, Input, Textarea } from 'ant-design-vue'
import pattern1 from '../../assets/img/pattern2.svg'
import pattern2 from '../../assets/img/pattern3.svg'
import registerDelayImage from '../../assets/img/registerDelay.svg'
import Icon from '../../components/icon/Icon.vue'
import AppHeader from '../../components/AppHeader.vue'
import Spinner from '../../components/Spinner.vue'
import DialogVant from '../../components/DialogVant.vue'
import { required, mobile as mobileRule } from '../../utils/validator'

const emit = defineEmits<{ (e: 'register', value: boolean): void }>()
const router = useRouter()

const profileData = reactive({ loading: false })
const registeredInfo = ref(false)

const formModel = reactive({
  fname: undefined as string | undefined,
  lname: undefined as string | undefined,
  mobile: undefined as string | undefined,
  store_name: undefined as string | undefined,
  phone: undefined as string | undefined,
  address: undefined as string | undefined,
  city: undefined as string | undefined,
})

const register = async () => {
  try {
    profileData.loading = true
    // Stubbed — no create-customer endpoint exists in apps/api yet.
    registeredInfo.value = true
  } finally {
    profileData.loading = false
  }
}
</script>

<style scoped>
.shadowHeader {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
}
</style>