增加进件功能
This commit is contained in:
354
entryManager/add/components/settlement-info.vue
Normal file
354
entryManager/add/components/settlement-info.vue
Normal file
@@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-font-32 font-bold u-m-32 text-center">结算信息</view>
|
||||
<view class="container">
|
||||
<view class="form-item ">
|
||||
<view class="title"> 结算类型</view>
|
||||
<up-radio-group v-model="form.settlementType">
|
||||
<up-radio v-for="(value,key) in settlementTypes" :label="value" :name="key">
|
||||
</up-radio>
|
||||
</up-radio-group>
|
||||
</view>
|
||||
|
||||
<template v-if="form.settlementType*1==0">
|
||||
<view class="form-item required">
|
||||
<view class="title"> 非法人手持结算授权书</view>
|
||||
<my-upload-img v-model="form.noLegalHandSettleAuthPic.url" :size="200"></my-upload-img>
|
||||
</view>
|
||||
|
||||
<view class="form-item required">
|
||||
<view class="title"> 非法人结算授权书</view>
|
||||
<my-upload-img v-model="form.noLegalSettleAuthPic.url" :size="200"></my-upload-img>
|
||||
</view>
|
||||
|
||||
<view class="form-item required">
|
||||
<view class="title"> 非法人身份证正面</view>
|
||||
<my-upload-img v-model="form.noLegalIdCardFrontPic.url" :size="200"></my-upload-img>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="form-item required">
|
||||
<view class="title"> 非法人身份证反面</view>
|
||||
<my-upload-img v-model="form.noLegalIdCardBackPic.url" :size="200"></my-upload-img>
|
||||
</view>
|
||||
|
||||
<view class="form-item required">
|
||||
<view class="title"> 非法人姓名
|
||||
</view>
|
||||
|
||||
<up-input placeholder="非法人姓名" :placeholder-class="placeholderClass"
|
||||
v-model="form.noLegalName"></up-input>
|
||||
</view>
|
||||
<view class="form-item required">
|
||||
<view class="title"> 非法人身份证号码
|
||||
</view>
|
||||
|
||||
<up-input placeholder="非法人身份证号码" :placeholder-class="placeholderClass"
|
||||
v-model="form.noLegalId"></up-input>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<view class="form-item ">
|
||||
<view class="title"> 结算卡类型</view>
|
||||
<up-radio-group v-model="form.settlementCardType">
|
||||
<up-radio v-for="(value,key) in settlementCardTypes" :label="value" :name="key">
|
||||
</up-radio>
|
||||
</up-radio-group>
|
||||
</view>
|
||||
|
||||
<view class="form-item required">
|
||||
<view class="title"> 银行卡正面</view>
|
||||
<my-upload-img @uploadSuccess="uploadSuccess($event,'BankCard','bankCardFrontPic')"
|
||||
v-model="form.bankCardFrontPic.url" :size="200"></my-upload-img>
|
||||
</view>
|
||||
|
||||
<view class="form-item " :class="{required:form.settlementCardType==11}">
|
||||
<view class="title"> 银行卡反面</view>
|
||||
<my-upload-img v-model="form.bankCardBackPic.url" :size="200"></my-upload-img>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="form-item required">
|
||||
<view class="title"> 地区</view>
|
||||
<view class="input-box u-flex u-row-between u-col-center" @click="showCitySelect=true">
|
||||
<text class="color-999" v-if="!pro_city_area">请选择</text>
|
||||
<text class="color-333" v-else>{{pro_city_area}}</text>
|
||||
<up-icon name="arrow-down"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item required">
|
||||
<view class="title"> 银行</view>
|
||||
<bankSelect v-model="form.bankName" v-model:bankInstId="form.bankInstId"></bankSelect>
|
||||
</view>
|
||||
<view class="form-item " v-if="pro_city_area&&form.bankName">
|
||||
<view class="title"> 支行</view>
|
||||
<bankBranchList :query="bankBranchListQuery" v-model:bankBranchName="form.bankBranchName"
|
||||
v-model:bankBranchCode="form.bankBranchCode"></bankBranchList>
|
||||
</view>
|
||||
<view class="form-item ">
|
||||
<view class="title"> 结算账户卡号</view>
|
||||
<up-input placeholder="结算账户卡号" :placeholder-class="placeholderClass"
|
||||
v-model="form.settlementCardNo"></up-input>
|
||||
</view>
|
||||
<view class="form-item ">
|
||||
<view class="title"> 结算账户户名</view>
|
||||
<up-input placeholder="结算账户户名" :placeholder-class="placeholderClass"
|
||||
v-model="form.settlementName"></up-input>
|
||||
</view>
|
||||
<view class="form-item ">
|
||||
<view class="title"> 结算银行预留手机号</view>
|
||||
<up-input placeholder="结算银行预留手机号" :placeholder-class="placeholderClass"
|
||||
v-model="form.bankMobile"></up-input>
|
||||
</view>
|
||||
<view class="form-item ">
|
||||
<view class="title"> 开户行行别名称</view>
|
||||
<up-input placeholder="开户行行别名称" :placeholder-class="placeholderClass"
|
||||
v-model="form.bankName"></up-input>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="form-item ">
|
||||
<view class="title"> 开户行缩写</view>
|
||||
<up-input placeholder="开户行缩写" :placeholder-class="placeholderClass"></up-input>
|
||||
</view>
|
||||
<view class="form-item ">
|
||||
<view class="title"> 开户行编号
|
||||
</view>
|
||||
<up-input placeholder="开户行编号" :placeholder-class="placeholderClass" v-model="form.bankType"></up-input>
|
||||
</view>
|
||||
<view class="form-item ">
|
||||
<view class="title"> 支行开户行行别名称
|
||||
|
||||
</view>
|
||||
<up-input placeholder="支行开户行行别名称" :placeholder-class="placeholderClass"
|
||||
v-model="form.bankBranchName"></up-input>
|
||||
</view>
|
||||
|
||||
<view class="form-item ">
|
||||
<view class="title"> 支行开户行编号
|
||||
|
||||
</view>
|
||||
<up-input placeholder="支行开户行编号" :placeholder-class="placeholderClass"
|
||||
v-model="form.bankBranchCode"></up-input>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
<view class="form-item ">
|
||||
<view class="title"> 开户许可证</view>
|
||||
<my-upload-img v-model="form.openAccountLicencePic.url" :size="200"></my-upload-img>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<citySelect v-model="showCitySelect" @city-change="cityChange"></citySelect>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
computed,
|
||||
reactive,
|
||||
watch,
|
||||
ref
|
||||
} from 'vue';
|
||||
import shopSelect from './shop-select.vue'
|
||||
import citySelect from '../../components/u-city-select.vue'
|
||||
import bankSelect from './bank-select.vue'
|
||||
import bankBranchList from './bankBranchList.vue'
|
||||
import {
|
||||
userTypes,
|
||||
sexs,
|
||||
contactPersonTypes,
|
||||
companyChildTypes,
|
||||
settlementTypes,
|
||||
settlementCardTypes,
|
||||
certTypes
|
||||
} from '@/entryManager/data.js'
|
||||
import {
|
||||
getInfoByImg
|
||||
} from '@/http/api/order/entryManager.js'
|
||||
const showCitySelect = ref(false)
|
||||
const showBankSelect = ref(true)
|
||||
|
||||
function uploadSuccess(url, type, key) {
|
||||
uni.showLoading({
|
||||
type: '识别中，请稍等……！'
|
||||
})
|
||||
getInfoByImg({
|
||||
url,
|
||||
type
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res) {
|
||||
form.bankName = res.subImages[0].kvInfo.data.bankName
|
||||
form.settlementCardNo = res.subImages[0].kvInfo.data.cardNumber
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function basicSelectChange(e) {
|
||||
|
||||
}
|
||||
|
||||
function cityChange(e) {
|
||||
console.log('cityChange', e);
|
||||
form.openAccProvince = e.province.regionName;
|
||||
form.openAccCity = e.city.regionName;
|
||||
form.openAccArea = e.area.regionName;
|
||||
|
||||
form.openAccProvinceId = e.province.regionId;
|
||||
form.openAccCityId = e.city.regionId;
|
||||
form.openAccAreaId = e.area.regionId;
|
||||
console.log('form', form);
|
||||
}
|
||||
|
||||
const pro_city_area = computed(() => {
|
||||
if (form.openAccProvince && form.openAccCity && form.openAccArea) {
|
||||
const text = form.openAccProvince + '-' + form.openAccCity + '-' + form.openAccArea
|
||||
console.log('text', text);
|
||||
return text
|
||||
}
|
||||
return ''
|
||||
})
|
||||
const form = reactive({
|
||||
"settlementType": "0",
|
||||
"noLegalName": "",
|
||||
"noLegalId": "",
|
||||
"settlementCardType": "11",
|
||||
"settlementCardNo": "",
|
||||
"settlementName": "",
|
||||
"bankMobile": "",
|
||||
"openAccProvinceId": "",
|
||||
"openAccCityId": "",
|
||||
"openAccAreaId": "",
|
||||
"openAccProvince": "",
|
||||
"openAccCity": "",
|
||||
"openAccArea": "",
|
||||
"bankName": "",
|
||||
"bankInstId": "",
|
||||
"bankType": "",
|
||||
"bankBranchName": "",
|
||||
"bankBranchCode": "",
|
||||
"bankCardFrontPic": {
|
||||
"url": "",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
},
|
||||
"bankCardBackPic": {
|
||||
"url": "",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
},
|
||||
"openAccountLicencePic": {
|
||||
"url": "",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
},
|
||||
"noLegalHandSettleAuthPic": {
|
||||
"url": "",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
},
|
||||
"noLegalSettleAuthPic": {
|
||||
"url": "",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
},
|
||||
"noLegalIdCardFrontPic": {
|
||||
"url": "",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
},
|
||||
"noLegalIdCardBackPic": {
|
||||
"url": "",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
}
|
||||
})
|
||||
const placeholderClass = ref('u-font-28')
|
||||
|
||||
const isRequired = ref('required')
|
||||
const bankBranchListQuery = computed(() => {
|
||||
return {
|
||||
province: form.openAccProvince,
|
||||
city: form.openAccCity,
|
||||
instId: form.bankInstId,
|
||||
}
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
watch(() => props.data, (newval) => {
|
||||
console.log('watch 变', newval);
|
||||
|
||||
for (let key in form) {
|
||||
if (props.data.hasOwnProperty(key)) {
|
||||
form[key] = props.data[key]
|
||||
}
|
||||
}
|
||||
console.log(form);
|
||||
}, {
|
||||
deep: true,immediate:true
|
||||
})
|
||||
|
||||
const emits = defineEmits(['update'])
|
||||
watch(() => form, (newval) => {
|
||||
emits('update', newval)
|
||||
}, {
|
||||
deep: true
|
||||
})
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
.input-box {
|
||||
padding: 10px 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dadbde;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user