|
@@ -6,16 +6,17 @@
|
|
|
</template>
|
|
</template>
|
|
|
<Form ref="formRef" class="g-form__container" @submit="formSubmit">
|
|
<Form ref="formRef" class="g-form__container" @submit="formSubmit">
|
|
|
<CellGroup inset>
|
|
<CellGroup inset>
|
|
|
- <Field v-model="formData.ReceiverName" name="ReceiverName" label="收货人" placeholder="必填"
|
|
|
|
|
- :rules="formRules.ReceiverName" />
|
|
|
|
|
- <Field v-model="formData.PhoneNum" type="tel" name="PhoneNum" label="联系电话" placeholder="必填"
|
|
|
|
|
- :rules="formRules.PhoneNum" />
|
|
|
|
|
- <Field label="收货地区" placeholder="请选择" is-link>
|
|
|
|
|
|
|
+ <Field v-model="formData.ReceiverName" :rules="formRules.ReceiverName" name="ReceiverName"
|
|
|
|
|
+ label="收货人" placeholder="必填" />
|
|
|
|
|
+ <Field v-model="formData.PhoneNum" :rules="formRules.PhoneNum" type="tel" name="PhoneNum"
|
|
|
|
|
+ label="联系电话" placeholder="必填" />
|
|
|
|
|
+ <Field :rules="formRules.Region" name="Region" label="收货地区" placeholder="请选择" is-link>
|
|
|
<template #input>
|
|
<template #input>
|
|
|
- <app-region v-model="formData.DistrictID" />
|
|
|
|
|
|
|
+ <app-region v-model="formData.DistrictID" @finish="onRegionFinish" />
|
|
|
</template>
|
|
</template>
|
|
|
</Field>
|
|
</Field>
|
|
|
- <Field v-model="formData.Address" name="refernum" label="详细地址" placeholder="详细地址" />
|
|
|
|
|
|
|
+ <Field v-model="formData.Address" :rules="formRules.Address" name="Address" label="详细地址"
|
|
|
|
|
+ placeholder="必填" />
|
|
|
</CellGroup>
|
|
</CellGroup>
|
|
|
</Form>
|
|
</Form>
|
|
|
<template #footer>
|
|
<template #footer>
|
|
@@ -28,9 +29,9 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
-import { reactive, shallowRef, PropType } from 'vue'
|
|
|
|
|
|
|
+import { shallowRef, PropType } from 'vue'
|
|
|
import { CellGroup, Button, Field, Form, FormInstance, Toast, FieldRule } from 'vant'
|
|
import { CellGroup, Button, Field, Form, FormInstance, Toast, FieldRule } from 'vant'
|
|
|
-import { fullloading, dialog } from '@/utils/vant'
|
|
|
|
|
|
|
+import { fullloading } from '@/utils/vant'
|
|
|
import { validateRules } from '@/constants/regex'
|
|
import { validateRules } from '@/constants/regex'
|
|
|
import { useNavigation } from '@/hooks/navigation'
|
|
import { useNavigation } from '@/hooks/navigation'
|
|
|
import { useAddressForm } from '@/business/user'
|
|
import { useAddressForm } from '@/business/user'
|
|
@@ -50,11 +51,39 @@ const formRef = shallowRef<FormInstance>()
|
|
|
const showModal = shallowRef(true)
|
|
const showModal = shallowRef(true)
|
|
|
|
|
|
|
|
// 表单验证规则
|
|
// 表单验证规则
|
|
|
-const formRules: { [key in keyof Proto.UserReceiveInfoReq]?: FieldRule[] } = {
|
|
|
|
|
|
|
+const formRules: { [key in keyof Proto.UserReceiveInfoReq | 'Region']?: FieldRule[] } = {
|
|
|
ReceiverName: [{
|
|
ReceiverName: [{
|
|
|
required: true,
|
|
required: true,
|
|
|
message: '请输入收货人',
|
|
message: '请输入收货人',
|
|
|
}],
|
|
}],
|
|
|
|
|
+ PhoneNum: [{
|
|
|
|
|
+ required: true,
|
|
|
|
|
+ message: '请输入联系电话',
|
|
|
|
|
+ validator: (val) => {
|
|
|
|
|
+ if (validateRules.phone.validate(val)) {
|
|
|
|
|
+ return true
|
|
|
|
|
+ }
|
|
|
|
|
+ return validateRules.phone.message
|
|
|
|
|
+ }
|
|
|
|
|
+ }],
|
|
|
|
|
+ Region: [{
|
|
|
|
|
+ message: '请选择收货地区',
|
|
|
|
|
+ validator: () => {
|
|
|
|
|
+ return !!formData.ProvinceID && !!formData.CityID && !!formData.DistrictID
|
|
|
|
|
+ }
|
|
|
|
|
+ }],
|
|
|
|
|
+ Address: [{
|
|
|
|
|
+ required: true,
|
|
|
|
|
+ message: '请输入详细地址',
|
|
|
|
|
+ }],
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 选择地区
|
|
|
|
|
+const onRegionFinish = ([province, city, district]: number[]) => {
|
|
|
|
|
+ formData.ProvinceID = province
|
|
|
|
|
+ formData.CityID = city
|
|
|
|
|
+ formData.DistrictID = district
|
|
|
|
|
+ formRef.value?.validate('Region')
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 表单提交
|
|
// 表单提交
|
|
@@ -62,7 +91,7 @@ const formSubmit = () => {
|
|
|
fullloading((hideLoading) => {
|
|
fullloading((hideLoading) => {
|
|
|
addOrUpdate().then(() => {
|
|
addOrUpdate().then(() => {
|
|
|
hideLoading()
|
|
hideLoading()
|
|
|
- Toast.fail('保存成功')
|
|
|
|
|
|
|
+ router.back()
|
|
|
}).catch((err) => {
|
|
}).catch((err) => {
|
|
|
Toast.fail(err)
|
|
Toast.fail(err)
|
|
|
})
|
|
})
|