302 lines
7.6 KiB
Vue
302 lines
7.6 KiB
Vue
<template>
|
|
<view>
|
|
<view class="u-font-32 font-bold u-m-32 text-center">商户基础信息</view>
|
|
<view class="container">
|
|
<!-- <view class="form-item">
|
|
<view class="font-bold u-m-b-16">店铺</view>
|
|
<shopSelect></shopSelect>
|
|
</view> -->
|
|
<view class="form-item required">
|
|
<view class="title">商户类型</view>
|
|
<up-radio-group v-model="form.userType">
|
|
<up-radio v-for="(value,key) in userTypes" :label="value" :name="key">
|
|
</up-radio>
|
|
</up-radio-group>
|
|
</view>
|
|
|
|
<view class="form-item required">
|
|
<view class="title">企业类型</view>
|
|
<up-radio-group v-model="form.companyChildType">
|
|
<up-radio v-for="(value,key) in companyChildTypes" :label="value" :name="key">
|
|
</up-radio>
|
|
</up-radio-group>
|
|
</view>
|
|
|
|
<view class="form-item required">
|
|
<view class="title">商户简称</view>
|
|
<up-input placeholder="商户简称" :placeholder-class="placeholderClass" v-model="form.shortName"></up-input>
|
|
</view>
|
|
<view class="form-item required">
|
|
<view class="title"> 行业类目</view>
|
|
<mccCategory v-model="form.mccCode"></mccCategory>
|
|
</view>
|
|
|
|
<view class="form-item required">
|
|
<view class="title"> 支付宝账号</view>
|
|
<up-input placeholder="支付宝账号" :placeholder-class="placeholderClass"
|
|
v-model="form.alipayAccount"></up-input>
|
|
</view>
|
|
|
|
|
|
<view class="form-item required">
|
|
<view class="title">联系人类型</view>
|
|
<up-radio-group v-model="form.contactPersonType">
|
|
<up-radio v-for="(value,key) in contactPersonTypes" :label="value" :name="key">
|
|
</up-radio>
|
|
</up-radio-group>
|
|
</view>
|
|
|
|
<template v-if="form.contactPersonType=='SUPER'">
|
|
<view class="form-item ">
|
|
<view class="title"> 联系人身份证正面</view>
|
|
<my-upload-img v-model="form.contactIdCardFrontPic.url" :size="200"
|
|
@uploadSuccess="uploadSuccess($event,'IdCard','contactIdCardFrontPic')"></my-upload-img>
|
|
</view>
|
|
|
|
<view class="form-item ">
|
|
<view class="title"> 联系人身份证背面</view>
|
|
<my-upload-img v-model="form.contactIdCardBackPic.url" :size="200"
|
|
@uploadSuccess="uploadSuccess($event,'IdCard','contactIdCardBackPic')"></my-upload-img>
|
|
</view>
|
|
|
|
<!-- <view class="form-item required">
|
|
<view class="title">证件类型</view>
|
|
<up-radio-group v-model="form.certType">
|
|
<up-radio v-for="(value,key) in certTypes" :label="value" :name="key">
|
|
</up-radio>
|
|
</up-radio-group>
|
|
</view> -->
|
|
<view class="form-item ">
|
|
<view class="title"> 联系人姓名</view>
|
|
<up-input placeholder="联系人姓名" :placeholder-class="placeholderClass"
|
|
v-model="form.contactName"></up-input>
|
|
</view>
|
|
<view class="form-item ">
|
|
<view class="title"> 联系人身份证号</view>
|
|
<up-input placeholder="联系人身份证号" :placeholder-class="placeholderClass"
|
|
v-model="form.contactPersonId"></up-input>
|
|
</view>
|
|
<view class="form-item ">
|
|
<view class="title"> 联系人身份证开始日期</view>
|
|
<up-datetime-picker hasInput :minDate="minDate" :maxDate="maxDate" format="YYYY-MM-DD"
|
|
placeholder="请选择" v-model="form.contactPersonIdStartDate" mode="date">
|
|
</up-datetime-picker>
|
|
|
|
</view>
|
|
|
|
<view class="form-item ">
|
|
<view class="title"> 联系人身份证到期日期</view>
|
|
<view class="u-m-b-16">
|
|
<up-radio-group v-model="contactPersonIdEndDateType">
|
|
<up-radio :name="1" label="有结束日期"></up-radio>
|
|
<up-radio :name="2" label="长期有效"></up-radio>
|
|
</up-radio-group>
|
|
</view>
|
|
<template v-if="contactPersonIdEndDateType==1">
|
|
<up-datetime-picker hasInput :minDate="endDataMinDate" :maxDate="maxDate" format="YYYY-MM-DD"
|
|
placeholder="请选择" v-model="form.contactPersonIdEndDate" mode="date">
|
|
</up-datetime-picker>
|
|
</template>
|
|
|
|
|
|
</view>
|
|
<view class="form-item ">
|
|
<view class="title"> 联系人电话</view>
|
|
<up-input placeholder="联系人电话" :placeholder-class="placeholderClass"
|
|
v-model="form.contactPhone"></up-input>
|
|
</view>
|
|
|
|
<view class="form-item ">
|
|
<view class="title"> 联系人通讯地址</view>
|
|
<up-input placeholder="联系人通讯地址" :placeholder-class="placeholderClass"
|
|
v-model="form.contactAddr"></up-input>
|
|
</view>
|
|
|
|
<view class="form-item ">
|
|
<view class="title"> 联系人邮箱
|
|
</view>
|
|
<up-input placeholder="联系人邮箱" :placeholder-class="placeholderClass"
|
|
v-model="form.contactEmail"></up-input>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
computed,
|
|
onMounted,
|
|
reactive,
|
|
ref,
|
|
watch
|
|
} from 'vue';
|
|
import shopSelect from './shop-select.vue'
|
|
import mccCategory from '@/entryManager/components/mcc-category.vue'
|
|
import {
|
|
userTypes,
|
|
contactPersonTypes,
|
|
companyChildTypes,
|
|
certTypes
|
|
} from '@/entryManager/data.js'
|
|
import {
|
|
getInfoByImg
|
|
} from '@/http/api/order/entryManager.js'
|
|
|
|
|
|
import dayjs from 'dayjs';
|
|
const minDate = dayjs('1970-01-01 00:00:00').valueOf()
|
|
const maxDate = dayjs('2099-12-31 23:59:59').valueOf()
|
|
const endDataMinDate = computed(() => {
|
|
if (!form.contactPersonIdStartDate) {
|
|
return minDate
|
|
}
|
|
if (form.contactPersonIdStartDate) {
|
|
return dayjs(form.contactPersonIdStartDate).add(10, 'year').valueOf()
|
|
}
|
|
return minDate
|
|
})
|
|
|
|
const contactPersonIdEndDateType = ref(1)
|
|
watch(() => contactPersonIdEndDateType.value, (newval) => {
|
|
if (newval == 2) {
|
|
form.contactPersonIdEndDate = maxDate
|
|
} else {
|
|
form.contactPersonIdEndDate = dayjs().valueOf()
|
|
}
|
|
})
|
|
|
|
|
|
function uploadSuccess(url, type, key) {
|
|
uni.showLoading({
|
|
type: '识别中，请稍等……！'
|
|
})
|
|
getInfoByImg({
|
|
url,
|
|
type
|
|
}).then(res => {
|
|
uni.hideLoading()
|
|
if (res) {
|
|
const data = res.subImages[0].kvInfo.data
|
|
if (key == 'contactIdCardBackPic') {
|
|
if (data.validPeriod) {
|
|
const [start, end] = data.validPeriod.split('-')
|
|
if (start) {
|
|
form.contactPersonIdStartDate = dayjs(start).valueOf()
|
|
}
|
|
if (end) {
|
|
if (end.includes('长期')) {
|
|
contactPersonIdEndDateType.value = 2
|
|
} else {
|
|
form.contactPersonIdEndDate = dayjs(end).valueOf()
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
if (key == 'contactIdCardFrontPic') {
|
|
form.contactName = data.name
|
|
form.contactPersonId = data.idNumber
|
|
form.contactAddr = data.address
|
|
|
|
}
|
|
}
|
|
})
|
|
}
|
|
const form = reactive({
|
|
userType: '0',
|
|
shortName: '',
|
|
mccCode: '',
|
|
alipayAccount: '',
|
|
contactPersonType: 'LEGAL',
|
|
contactName: '',
|
|
certType: '0',
|
|
contactPersonId: '',
|
|
contactPersonIdStartDate: '',
|
|
contactPersonIdEndDate: '',
|
|
contactIdCardBackPic: {
|
|
url: ''
|
|
},
|
|
contactIdCardFrontPic: {
|
|
url: ''
|
|
},
|
|
contactPhone: '',
|
|
contactAddr: '',
|
|
contactEmail: '',
|
|
companyChildType: '1',
|
|
})
|
|
|
|
const placeholderClass = ref('u-font-28')
|
|
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: () => {
|
|
|
|
}
|
|
}
|
|
})
|
|
const emits = defineEmits(['update'])
|
|
watch(() => form, (newval) => {
|
|
console.log('form', form);
|
|
emits('update', newval)
|
|
}, {
|
|
deep: true,
|
|
immediate: true
|
|
})
|
|
|
|
watch(() => props.data, (newval) => {
|
|
for (let key in form) {
|
|
if (props.data.hasOwnProperty(key)) {
|
|
form[key] = props.data[key]
|
|
}
|
|
}
|
|
}, {
|
|
deep: true,
|
|
immediate: true
|
|
})
|
|
|
|
onMounted(() => {
|
|
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container {
|
|
padding: 32rpx 28rpx;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 32rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.form-item {
|
|
margin-bottom: 32rpx;
|
|
|
|
.title {
|
|
font-weight: 700;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
&.required {
|
|
.title::before {
|
|
content: '*';
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
</style> |