|
|
@@ -0,0 +1,163 @@
|
|
|
+<template>
|
|
|
+ <app-modal class="goods-details-address" direction="right" height="100%" v-model:show="showModal">
|
|
|
+ <app-view class="g-form">
|
|
|
+ <template #header>
|
|
|
+ <app-navbar :title="formItem.THJDeliveryMode === 2 ? '自提信息' : '代办运输信息'" @back="closed" />
|
|
|
+ </template>
|
|
|
+ <Form ref="formRef" class="goods-details-address__form g-form__container" @submit="onSubmit">
|
|
|
+ <CellGroup inset>
|
|
|
+ <template #title>
|
|
|
+ <span>联系信息</span>
|
|
|
+ <span @click="showContact = true" style="color: #333;">
|
|
|
+ <Icon name="add-o" />
|
|
|
+ 添加联系信息
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <Field v-model="formItem.ContactName" name="username" label="联系人" placeholder="必填"
|
|
|
+ :rules="formRules.ContactName" />
|
|
|
+ <Field v-model="formItem.ContactInfo" name="username" label="联系方式" placeholder="必填"
|
|
|
+ :rules="formRules.ContactInfo" />
|
|
|
+ <Field v-model="formItem.DesAddress" type="textarea" name="username" label="目的地地址" placeholder="必填"
|
|
|
+ :rules="formRules.DesAddress" v-if="formItem.THJDeliveryMode === 3" />
|
|
|
+ </CellGroup>
|
|
|
+ <CellGroup inset>
|
|
|
+ <template #title>
|
|
|
+ <span>发票信息</span>
|
|
|
+ <span @click="showReceipt = true" style="color: #333;">
|
|
|
+ <Icon name="add-o" />
|
|
|
+ 添加发票信息
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <Field v-model="formItem.ReceiptInfo" type="textarea" name="username" label="发票信息" rows="5"
|
|
|
+ placeholder="选填" :rules="formRules.ReceiptInfo" />
|
|
|
+ </CellGroup>
|
|
|
+ </Form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="g-form__footer">
|
|
|
+ <Button type="primary" @click="formRef?.submit" round block>确认</Button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </app-view>
|
|
|
+ <app-contact v-model:show="showContact" @change="contactChange" />
|
|
|
+ <app-receipt v-model:show="showReceipt" @change="receiptChange" />
|
|
|
+ </app-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { shallowRef, reactive, PropType } from 'vue'
|
|
|
+import { CellGroup, Button, Field, Form, FormInstance, FieldRule, Icon } from 'vant'
|
|
|
+import { getReceiptTypeName } from '@/constants/receipt'
|
|
|
+import AppModal from '@/components/base/modal/index.vue'
|
|
|
+import AppContact from '../contact/index.vue'
|
|
|
+import AppReceipt from '../receipt/index.vue'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ formData: {
|
|
|
+ type: Object as PropType<Proto.SpotPresaleDestingOrderReq>,
|
|
|
+ required: true
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const emit = defineEmits(['updated'])
|
|
|
+const formRef = shallowRef<FormInstance>()
|
|
|
+const showModal = shallowRef(true)
|
|
|
+const showContact = shallowRef(false) // 显示联系人选择列表
|
|
|
+const showReceipt = shallowRef(false) // 显示发票选择列表
|
|
|
+const formItem = reactive({ ...props.formData })
|
|
|
+
|
|
|
+// 表单验证规则
|
|
|
+const formRules: { [key in keyof Proto.SpotPresaleDestingOrderReq]?: FieldRule[] } = {
|
|
|
+ ContactName: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入联系人',
|
|
|
+ }],
|
|
|
+ ContactInfo: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入联系方式',
|
|
|
+ }],
|
|
|
+ DesAddress: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入目的地地址',
|
|
|
+ }],
|
|
|
+}
|
|
|
+
|
|
|
+// 选择联系信息
|
|
|
+const contactChange = (item: Model.UserReceiveInfoRsp) => {
|
|
|
+ formItem.ContactName = item.receivername
|
|
|
+ formItem.ContactInfo = item.phonenum
|
|
|
+
|
|
|
+ if (formItem.THJDeliveryMode === 3) {
|
|
|
+ formItem.DesAddress = [item.provincename, item.cityname, item.districtname, item.address].join(' ')
|
|
|
+ } else {
|
|
|
+ formItem.DesAddress = ''
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 选择发票信息
|
|
|
+const receiptChange = (item: Model.WrUserReceiptInfoRsp) => {
|
|
|
+ formItem.ReceiptInfo = ''
|
|
|
+ Object.entries(item).forEach(([key, value]) => {
|
|
|
+ if (value !== '') {
|
|
|
+ switch (key) {
|
|
|
+ case 'receipttype': {
|
|
|
+ formItem.ReceiptInfo += '发票类型:' + getReceiptTypeName(Number(value)) + '\n'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ case 'username': {
|
|
|
+ formItem.ReceiptInfo += '发票抬头:' + value + '\n'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ case 'taxpayerid': {
|
|
|
+ formItem.ReceiptInfo += '税号:' + value + '\n'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ case 'receiptbank': {
|
|
|
+ formItem.ReceiptInfo += '开户银行:' + value + '\n'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ case 'receiptaccount': {
|
|
|
+ formItem.ReceiptInfo += '银行账号:' + value + '\n'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ case 'address': {
|
|
|
+ formItem.ReceiptInfo += '企业地址:' + value + '\n'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ case 'contactinfo': {
|
|
|
+ formItem.ReceiptInfo += '企业电话:' + value + '\n'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ case 'email': {
|
|
|
+ formItem.ReceiptInfo += '邮箱:' + value + '\n'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const onSubmit = () => {
|
|
|
+ emit('updated', formItem)
|
|
|
+ closed()
|
|
|
+}
|
|
|
+
|
|
|
+// 关闭弹窗
|
|
|
+const closed = () => {
|
|
|
+ if (showContact.value) {
|
|
|
+ showContact.value = false
|
|
|
+ } else if (showReceipt.value) {
|
|
|
+ showReceipt.value = false
|
|
|
+ } else {
|
|
|
+ showModal.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 暴露组件属性给父组件调用
|
|
|
+defineExpose({
|
|
|
+ closed,
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+@import './index.less';
|
|
|
+</style>
|