safavi works

src/views/base/address/components/New_EditAddress.vue

@@ -1,81 +1,71 @@
 <template>
-  <div >
-    <a-form ref="formRef" :model="address" class="!mt-5" name="basic"
-            @finish="ok()">
+  <div>
+    <a-form ref="formRef" :model="address" class="!mt-5" name="basic" @finish="ok()">
       <div class="font-bold text-lg mb-2">آدرس</div>
       <div class="flex flex-col gap-4 pb-30 w-full h-65vh overflow-y-auto">
         <a-form-item label="استان" name="province" :rules="[required()]">
           <BasicSelect
-              v-model:value="address.province"
-              :items="provinceList"
-              @change="changeProvince"
-              valueName="title"
-              keyName="title"
+            v-model:value="address.province"
+            :items="provinceList"
+            value-name="title"
+            key-name="title"
+            :has-tooltip="false"
+            @change="changeProvince"
           />
         </a-form-item>
         <a-form-item label="شهر" name="city" :rules="[required()]">
           <BasicSelect
-              :disabled="!cityList"
-              v-model:value="address.city"
-              valueName="title"
-              :items="cityList"
-              keyName="title"
+            :disabled="!cityList?.length"
+            v-model:value="address.city"
+            value-name="title"
+            :items="cityList"
+            key-name="title"
+            :has-tooltip="false"
           />
         </a-form-item>
 
-        <a-form-item
-            label="کد پستی" name="zip" :rules="[required()]">
+        <a-form-item label="کد پستی" name="zip" :rules="[required()]">
           <BasicInput placeholder="کد پستی را وارد نمایید" v-model:value="address.zip" />
         </a-form-item>
-        <a-form-item
-            label="تلفن تماس" name="phone" :rules="[required()]"
-        >
+        <a-form-item label="تلفن تماس" name="phone" :rules="[required()]">
           <BasicInput placeholder="تلفن تماس را وارد نمایید" v-model:value="address.phone" />
         </a-form-item>
-        <!--        <FormItem label="کد پستی" name="">
-          <Input placeholder="کد پستی را وارد نمایید" />
-        </FormItem>-->
-        <a-form-item
-            label="آدرس کامل"
-            name="address"
-            :rules="[required()]"
-        >
+        <a-form-item label="آدرس کامل" name="address" :rules="[required()]">
           <BasicTextArea placeholder="آدرس کامل را وارد نمایید" v-model:value="address.address" />
         </a-form-item>
       </div>
-
     </a-form>
-    <div class="absolute bottom-18 right-0 w-full p-4    bg-white flex justify-center !text-white  ">
-      <BasicButton class=" w-full   !text-white  " type="primary" @click="handleOk">ثبت آدرس
-      </BasicButton>
+    <div class="absolute bottom-18 right-0 w-full p-4 bg-white flex justify-center !text-white">
+      <BasicButton class="w-full !text-white" type="primary" @click="handleOk">ثبت آدرس</BasicButton>
     </div>
-
   </div>
-
-
-
-
 </template>
 
 <script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { required } from '@/utils/inputRules'
+import BasicSelect from '@/components/BasicPacks/BasicSelect.vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicInput from '@/components/BasicPacks/BasicInput.vue'
+import BasicTextArea from '@/components/BasicPacks/BasicTextArea.vue'
+import { loading } from '@/utils'
+import { createAddress, getCity, updateAddress } from '@/api/address'
+import { FormInstance, message } from 'ant-design-vue'
+import { Address } from '@/models/address'
+import { addressProvinceList, loadAddressProvinces } from '@/views/base/address/composables/useAddressPageData'
 
-import {required} from "@/utils/inputRules";
-import BasicSelect from "@/components/BasicPacks/BasicSelect.vue";
-import BasicButton from "@/components/BasicPacks/BasicButton.vue";
-import BasicInput from "@/components/BasicPacks/BasicInput.vue";
-import BasicTextArea from "@/components/BasicPacks/BasicTextArea.vue";
-import {loading} from "@/utils";
-import {createAddress, getCity, getProvince, updateAddress} from "@/api/address";
-import {FormInstance, message} from "ant-design-vue";
+const props = withDefaults(
+  defineProps<{
+    visible?: boolean
+  }>(),
+  {
+    visible: false,
+  },
+)
 
-import {Address} from "@/models/address";
-import {createPriceTrigger, updatePriceTrigger} from "@/api/triggerPrice";
-import {onMounted, ref} from "vue";
 const formRef = ref<FormInstance>()
-const provinceList = ref<any[]>([])
 const cityList = ref<any[]>()
-const emits = defineEmits([ 'onOk'])
-const addAddressVisible=ref<boolean>(false)
+const emits = defineEmits(['onOk'])
 const editId = ref<number | undefined>(undefined)
 const address = ref<Address>({
   city: '',
@@ -83,38 +73,62 @@ const address = ref<Address>({
   phone: '',
   address: '',
   zip: '',
-  default_address: false
+  default_address: false,
 })
+
+const provinceList = computed(() => addressProvinceList.value)
+
 function resetFields() {
   editId.value = undefined
+  cityList.value = undefined
   address.value = {
     city: '',
     province: '',
     phone: '',
     address: '',
     zip: '',
-    default_address: false
+    default_address: false,
   }
 }
-onMounted(async () => {
-  resetFields()
-  provinceList.value = await getProvince()
-})
 
+async function loadProvinces() {
+  try {
+    await loadAddressProvinces()
+  } catch (e) {
+    console.log(e)
+    message.error('خطا در دریافت لیست استان‌ها')
+  }
+}
 
-const handleOk = (e: MouseEvent) => {
+watch(
+  () => props.visible,
+  (visible) => {
+    if (!visible) {
+      return
+    }
+    resetFields()
+    void loadProvinces()
+  },
+  { immediate: true },
+)
+
+const handleOk = () => {
   formRef.value?.validate().then(async () => {
-    editId.value ? await updateAddress(editId.value, address.value) : await createAddress(address.value)
-    addAddressVisible.value = false
+    editId.value
+      ? await updateAddress(editId.value, address.value)
+      : await createAddress(address.value)
     message.success('آدرس با موفقیت ثبت شد')
     emits('onOk')
     resetFields()
+  }).catch((error) => {
+    console.log('error', error)
   })
-      .catch((error) => {
-        console.log('error', error)
-      })
 }
+
 const changeProvince = async (obj: any) => {
+  if (!obj?.id) {
+    return
+  }
   try {
     loading.value = true
     cityList.value = undefined
@@ -128,23 +142,6 @@ const changeProvince = async (obj: any) => {
 }
 
 async function ok() {
-  formRef.value?.validateFields().then(async () => {
-    try {
-      loading.value = true
-      editId.value ? await updatePriceTrigger(editId.value, address.value) : await createPriceTrigger(address.value)
-      message.success('آدرس با موفقیت ایجاد شد')
-      addAddressVisible.value = false
-      emits('onOk')
-      //
-    } catch (e) {
-      console.log(e)
-    } finally {
-      loading.value = false
-    }
-  })
+  handleOk()
 }
 </script>
-
-<style scoped>
-
-</style>

src/views/base/address/composables/useAddressPageData.ts

@@ -39,6 +39,10 @@ async function loadProvinces() {
   addressProvinceList.value = await getProvince()
 }
 
+export async function loadAddressProvinces(force = false) {
+  return runOnceAsync('address:provinces', () => loadProvinces(), force)
+}
+
 export async function initAddressPageData(force = false) {
   if (!force && initialized.value) {
     return

src/views/base/address/mobile/MobileAddressView.vue

@@ -1,19 +1,13 @@
 <template>
   <div>
-    <div class="bg-white py-3 px-3 text-primary font-bold drop-shadow wrap-fix flex z-10">
-      <div @click="router.back()">
-        <BasicIcon icon="vuesax-linear:arrow-right-1" />
-      </div>
-      <div class="mr-2">آدرس ها</div>
-    </div>
+    <MobilePageHeader title="آدرس ها" show-back />
     <div>
       <img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
     </div>
 
     <div
       :class="loading ? 'h-screen' : ''"
-      class="px-3 pt-16 pb-2 overflow-y-scroll"
-      style="max-height: calc(100vh - 50px)"
+      class="px-3 mpage-content pb-2 overflow-y-scroll mpage-scroll"
     >
       <div
         v-if="isBazretalaProject()"
@@ -54,9 +48,9 @@
 
 <script lang="ts" setup>
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import MobilePageHeader from '@/layouts/components/MobilePageHeader.vue'
 import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
 import img from '@/assets/img/user_ly1.svg'
-import router from '@/router'
 import Item from '../components/Item.vue'
 import { useAddressPageContext } from '../composables/useAddressPage'