431 lines
19 KiB
Vue
431 lines
19 KiB
Vue
<!-- 结算信息 -->
|
||
<template>
|
||
<el-row :gutter="gutter">
|
||
<el-col :span="24">
|
||
<el-form ref="d1FormRef" :model="d1Form" label-width="120" label-position="left">
|
||
<div class="title_wrap">
|
||
<el-text>D1</el-text>
|
||
<el-text type="danger" size="small" style="margin-top: 6px;">小微
|
||
(注：请保持银行卡信息(证件号码、开户名、卡号、预留手机号)的匹配性)</el-text>
|
||
</div>
|
||
<el-form-item label="开户行地区" class="mt15">
|
||
<address-card ref="d1AddressRef" placeholder="请选择开户行地区" @change="d1SelectBankAddress"
|
||
style="width: 80%;" />
|
||
</el-form-item>
|
||
<el-form-item label="开户银行">
|
||
<el-select style="width: 80%;" v-model="d1Form.bankCard.bankname" placeholder="请选择开户银行"
|
||
@change="d1BanknameChange">
|
||
<el-option v-for="item in bankList" :key="item" :value="item" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="开户支行">
|
||
<el-select style="width: 80%;" v-model="d1Form.bankCard.contactline" placeholder="请选择开户支行">
|
||
<el-option :label="item.cnapsName" :value="item.cnapsCode" v-for="item in bankBranchs"
|
||
:key="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="支行联行号">
|
||
<el-input v-model="d1Form.bankCard.contactline" disabled placeholder="请输入支行联行号" style="width: 80%;"
|
||
@input="e => d1Form.bankCard.contactline = removeSpaces(e)" />
|
||
</el-form-item>
|
||
<el-form-item label="开户名">
|
||
<el-input v-model="d1Form.bankCard.bankholder" placeholder="请输入开户名" style="width: 80%;" />
|
||
</el-form-item>
|
||
<el-form-item label="开户账号">
|
||
<el-input v-model="d1Form.bankCard.bankcardno" placeholder="请输入开户账号" style="width: 80%;"
|
||
@input="e => d1Form.bankCard.bankcardno = removeSpaces(e)" />
|
||
</el-form-item>
|
||
<el-form-item label="预留手机号">
|
||
<el-input v-model="d1Form.bankCard.phone" placeholder="请输入预留手机号" style="width: 80%;"
|
||
@input="e => d1Form.bankCard.phone = removeSpaces(e)" />
|
||
</el-form-item>
|
||
<el-form-item label="身份证号码">
|
||
<el-input v-model="d1Form.idcard.certno" placeholder="请输入身份证号码" style="width: 80%;"
|
||
@input="e => d1Form.idcard.certno = removeSpaces(e)" />
|
||
</el-form-item>
|
||
<el-form-item label="发放日期">
|
||
<el-date-picker style="width: 80%;" value-format="YYYYMMDD" v-model="d1Form.idcard.certstarttime"
|
||
type="date" placeholder="请选择发放日期" />
|
||
</el-form-item>
|
||
<el-form-item label="失效日期">
|
||
<el-date-picker style="width: 80%;" value-format="YYYYMMDD" v-model="d1Form.idcard.certendtime"
|
||
type="date" placeholder="请选择失效日期" />
|
||
</el-form-item>
|
||
<el-form-item label="身份证正面">
|
||
<uploadCard ref="d1idcardRef1" @selectFile="file => d1Form.idcard.imgpositive = file"
|
||
@removeFile="d1Form.idcard.imgpositive = ''" />
|
||
</el-form-item>
|
||
<el-form-item label="身份证反面">
|
||
<uploadCard ref="d1idcardRef2" @selectFile="file => d1Form.idcard.imgnegative = file"
|
||
@removeFile="d1Form.idcard.imgnegative = ''" />
|
||
</el-form-item>
|
||
<el-form-item label="结算卡图片">
|
||
<uploadCard ref="d1BankRef3" @selectFile="file => d1Form.bankCard.imgurl = file"
|
||
@removeFile="d1Form.bankCard.imgurl = ''" />
|
||
</el-form-item>
|
||
<el-form-item label="非法人授权函" v-show="d1Form.certificateurl">
|
||
<uploadCard ref="d1BankRef4" @selectFile="file => d1Form.certificateurl = file"
|
||
@removeFile="d1Form.certificateurl = ''" />
|
||
</el-form-item>
|
||
<el-form-item label="对公开户许可证" v-show="d1Form.publicimage">
|
||
<uploadCard ref="d1BankRef5" @selectFile="file => d1Form.publicimage = file"
|
||
@removeFile="d1Form.publicimage = ''" />
|
||
</el-form-item>
|
||
<!-- <el-form-item>
|
||
<el-button type="primary" @click="d1SubmitHandle">保存-D1</el-button>
|
||
</el-form-item> -->
|
||
</el-form>
|
||
</el-col>
|
||
<el-col :span="span" v-if="false">
|
||
<el-form ref="d0FormRef" :model="d0Form" label-width="120" label-position="left">
|
||
<div class="title_wrap">
|
||
<el-text>D0</el-text>
|
||
<el-text type="danger" size="small" style="margin-top: 6px;">小微
|
||
(注：请保持银行卡信息(证件号码、开户名、卡号、预留手机号)的匹配性)</el-text>
|
||
</div>
|
||
<el-form-item label="开户行地区" class="mt15">
|
||
<address-card ref="d0AddressRef" placeholder="请选择开户行地区" @change="d0SelectBankAddress"
|
||
style="width: 80%;" />
|
||
</el-form-item>
|
||
<el-form-item label="开户银行">
|
||
<el-select style="width: 80%;" v-model="d0Form.bankCard.bankname" placeholder="请选择开户银行"
|
||
@change="d0BanknameChange">
|
||
<el-option v-for="item in bankList" :key="item" :value="item" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="开户支行">
|
||
<el-select style="width: 80%;" v-model="d0Form.bankCard.contactline" placeholder="请选择开户支行">
|
||
<el-option :label="item.cnapsName" :value="item.cnapsCode" v-for="item in bankBranchs"
|
||
:key="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="支行联行号">
|
||
<el-input v-model="d0Form.bankCard.contactline" disabled placeholder="请输入支行联行号" style="width: 80%;"
|
||
@input="e => d0Form.bankCard.contactline = removeSpaces(e)" />
|
||
</el-form-item>
|
||
<el-form-item label="开户名">
|
||
<el-input v-model="d0Form.bankCard.bankholder" placeholder="请输入开户名" style="width: 80%;" />
|
||
</el-form-item>
|
||
<el-form-item label="开户账号">
|
||
<el-input v-model="d0Form.bankCard.bankcardno" placeholder="请输入开户账号" style="width: 80%;"
|
||
@input="e => d0Form.bankCard.bankcardno = removeSpaces(e)" />
|
||
</el-form-item>
|
||
<el-form-item label="预留手机号">
|
||
<el-input v-model="d0Form.bankCard.phone" placeholder="请输入预留手机号" style="width: 80%;"
|
||
@input="e => d0Form.bankCard.phone = removeSpaces(e)" />
|
||
</el-form-item>
|
||
<el-form-item label="身份证号码">
|
||
<el-input v-model="d0Form.idcard.certno" placeholder="请输入身份证号码" style="width: 80%;"
|
||
@input="e => d0Form.idcard.certno = removeSpaces(e)" />
|
||
</el-form-item>
|
||
<el-form-item label="发放日期">
|
||
<el-date-picker style="width: 80%;" value-format="YYYYMMDD" v-model="d0Form.idcard.certstarttime"
|
||
type="date" placeholder="请选择发放日期" />
|
||
</el-form-item>
|
||
<el-form-item label="失效日期">
|
||
<el-date-picker style="width: 80%;" value-format="YYYYMMDD" v-model="d0Form.idcard.certendtime"
|
||
type="date" placeholder="请选择失效日期" />
|
||
</el-form-item>
|
||
<el-form-item label="身份证正面">
|
||
<uploadCard ref="d0idcardRef1" @selectFile="file => d0Form.idcard.imgpositive = file"
|
||
@removeFile="d0Form.idcard.imgpositive = ''" />
|
||
</el-form-item>
|
||
<el-form-item label="身份证反面">
|
||
<uploadCard ref="d0idcardRef2" @selectFile="file => d0Form.idcard.imgnegative = file"
|
||
@removeFile="d0Form.idcard.imgnegative = ''" />
|
||
</el-form-item>
|
||
<el-form-item label="结算卡图片">
|
||
<uploadCard ref="d0BankRef3" @selectFile="file => d0Form.bankCard.imgurl = file"
|
||
@removeFile="d0Form.bankCard.imgurl = ''" />
|
||
</el-form-item>
|
||
<el-form-item label="非法人授权函" v-show="d0Form.certificateurl">
|
||
<uploadCard ref="d0BankRef4" @selectFile="file => d0Form.certificateurl = file"
|
||
@removeFile="d0Form.certificateurl = ''" />
|
||
</el-form-item>
|
||
<el-form-item label="对公开户许可证" v-show="d0Form.publicimage">
|
||
<uploadCard ref="d0BankRef5" @selectFile="file => d0Form.publicimage = file"
|
||
@removeFile="d0Form.publicimage = ''" />
|
||
</el-form-item>
|
||
<!-- <el-form-item>
|
||
<el-button type="primary" @click="d0SubmitHandle">保存-D0</el-button>
|
||
</el-form-item> -->
|
||
</el-form>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="title_wrap">
|
||
<el-text>认证信息</el-text>
|
||
</div>
|
||
<el-form :model="authForm" label-width="120" label-position="left" class="mt15">
|
||
<el-row :gutter="gutter">
|
||
<el-col :span="span">
|
||
<el-form-item label="结算人与收银台合照">
|
||
<uploadCard ref="authFormUpload1" @selectFile="file => authForm.picUrl = file"
|
||
@removeFile="authForm.picUrl = ''" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- <el-form-item>
|
||
<el-button type="primary" @click="updateAuthenticationAjax" :loading="authFormLoading">保存认证信息</el-button>
|
||
</el-form-item> -->
|
||
</el-form>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { removeSpaces } from '@/utils/index.js'
|
||
import bankList from './bankList';
|
||
|
||
import addressCard from '@/components/addressCard.vue'
|
||
import uploadCard from './uploadCard.vue'
|
||
|
||
import { uploadOSS } from '@/api/home.js'
|
||
import { merchBaseAccount, getBranchList, updateAccount, authentication, updateAuthentication } from '@/api/shop.js'
|
||
|
||
import { useRoute } from 'vue-router'
|
||
import { ElMessage } from 'element-plus';
|
||
const route = useRoute()
|
||
import { useUser } from "@/store/user.js";
|
||
const storeUser = useUser();
|
||
|
||
const span = ref(12)
|
||
const gutter = ref(50)
|
||
|
||
const d1FormRef = ref(null)
|
||
const d1AddressRef = ref(null)
|
||
const d1idcardRef1 = ref(null)
|
||
const d1idcardRef2 = ref(null)
|
||
const d1BankRef3 = ref(null)
|
||
const d1BankRef4 = ref(null)
|
||
const d1BankRef5 = ref(null)
|
||
const bankBranchs = ref([])
|
||
const d1Form = reactive({
|
||
userid: storeUser.userInfo.userId,
|
||
channeltype: 'D1',
|
||
bankCard: {},
|
||
idcard: {},
|
||
certificateurl: '',
|
||
publicimage: ''
|
||
})
|
||
|
||
// d1获取省市区
|
||
function d1SelectBankAddress(e) {
|
||
if (e[1].label != d1Form.bankCard.branchcity) {
|
||
d1Form.bankCard.bankname = ''
|
||
d1Form.bankCard.contactline = ''
|
||
}
|
||
d1Form.bankCard.branchprovince = e[0].label
|
||
d1Form.bankCard.branchcity = e[1].label
|
||
d1Form.bankCard.brancharea = e[2].label
|
||
|
||
d1Form.bankCard.branchProvinceCode = e[0].code
|
||
d1Form.bankCard.branchCityCode = e[1].code
|
||
d1Form.bankCard.branchAreaCode = e[2].code
|
||
}
|
||
|
||
// d1确认选择开户银行
|
||
async function d1BanknameChange(val, city) {
|
||
try {
|
||
if (d1Form.bankCard.branchcity || city) {
|
||
const res = await getBranchList({
|
||
bankName: val,
|
||
cityName: city || d1Form.bankCard.branchcity
|
||
})
|
||
d1Form.bankCard.contactline = ''
|
||
bankBranchs.value = res.branchList
|
||
}
|
||
} catch (error) {
|
||
console.log('确认选择开户银行error', error)
|
||
}
|
||
}
|
||
|
||
// D1提交表单
|
||
async function d1SubmitHandle() {
|
||
try {
|
||
if (d1Form.idcard.imgpositive.uid) {
|
||
d1Form.idcard.imgpositive = await uploadOSS(d1Form.idcard.imgpositive.raw)
|
||
}
|
||
if (d1Form.idcard.imgnegative.uid) {
|
||
d1Form.idcard.imgnegative = await uploadOSS(d1Form.idcard.imgnegative.raw)
|
||
}
|
||
if (d1Form.bankCard.imgurl.uid) {
|
||
d1Form.bankCard.imgurl = await uploadOSS(d1Form.bankCard.imgurl.raw)
|
||
}
|
||
if (d1Form.certificateurl.uid) {
|
||
d1Form.certificateurl = await uploadOSS(d1Form.certificateurl.raw)
|
||
}
|
||
if (d1Form.publicimage.uid) {
|
||
d1Form.publicimage = await uploadOSS(d1Form.publicimage.raw)
|
||
}
|
||
await updateAccount(d1Form)
|
||
ElMessage.success('提交成功')
|
||
} catch (error) {
|
||
console.log('D1提交表单error', error)
|
||
}
|
||
}
|
||
|
||
const d0AddressRef = ref(null)
|
||
const d0idcardRef1 = ref(null)
|
||
const d0idcardRef2 = ref(null)
|
||
const d0BankRef3 = ref(null)
|
||
const d0BankRef4 = ref(null)
|
||
const d0BankRef5 = ref(null)
|
||
const d0FormRef = ref(null)
|
||
const d0Form = reactive({
|
||
userid: storeUser.userInfo.userId,
|
||
channeltype: 'D0',
|
||
bankCard: {},
|
||
idcard: {},
|
||
certificateurl: '',
|
||
publicimage: ''
|
||
})
|
||
|
||
// d0获取省市区
|
||
function d0SelectBankAddress(e) {
|
||
if (e[1].label != d0Form.bankCard.branchcity) {
|
||
d0Form.bankCard.bankname = ''
|
||
d0Form.bankCard.contactline = ''
|
||
}
|
||
d0Form.bankCard.branchprovince = e[0].label
|
||
d0Form.bankCard.branchcity = e[1].label
|
||
d0Form.bankCard.brancharea = e[2].label
|
||
|
||
d0Form.bankCard.branchProvinceCode = e[0].code
|
||
d0Form.bankCard.branchCityCode = e[1].code
|
||
d0Form.bankCard.branchAreaCode = e[2].code
|
||
}
|
||
|
||
// d0确认选择开户银行
|
||
async function d0BanknameChange(val, city) {
|
||
try {
|
||
if (d0Form.bankCard.branchcity || city) {
|
||
const res = await getBranchList({
|
||
bankName: val,
|
||
cityName: city || d0Form.bankCard.branchcity
|
||
})
|
||
d0Form.bankCard.contactline = ''
|
||
bankBranchs.value = res.branchList
|
||
}
|
||
} catch (error) {
|
||
console.log('确认选择开户银行error', error)
|
||
}
|
||
}
|
||
|
||
// D0提交表单
|
||
async function d0SubmitHandle() {
|
||
try {
|
||
if (d0Form.idcard.imgpositive.uid) {
|
||
d0Form.idcard.imgpositive = await uploadOSS(d0Form.idcard.imgpositive.raw)
|
||
}
|
||
if (d0Form.idcard.imgnegative.uid) {
|
||
d0Form.idcard.imgnegative = await uploadOSS(d0Form.idcard.imgnegative.raw)
|
||
}
|
||
if (d0Form.bankCard.imgurl.uid) {
|
||
d0Form.bankCard.imgurl = await uploadOSS(d0Form.bankCard.imgurl.raw)
|
||
}
|
||
if (d0Form.certificateurl.uid) {
|
||
d0Form.certificateurl = await uploadOSS(d0Form.certificateurl.raw)
|
||
}
|
||
if (d0Form.publicimage.uid) {
|
||
d0Form.publicimage = await uploadOSS(d0Form.publicimage.raw)
|
||
}
|
||
await updateAccount(d0Form)
|
||
ElMessage.success('提交成功')
|
||
} catch (error) {
|
||
console.log('d0提交表单error', error)
|
||
}
|
||
}
|
||
|
||
// 结算信息
|
||
async function merchBaseAccountAjax() {
|
||
try {
|
||
const res = await merchBaseAccount(storeUser.userInfo.userId)
|
||
await d1BanknameChange(res.D1.bankCard.bankname, res.D1.bankCard.branchcity)
|
||
await d0BanknameChange(res.D1.bankCard.bankname, res.D1.bankCard.branchcity)
|
||
|
||
d1Form.bankCard = res.D1.bankCard
|
||
d1Form.idcard = res.D1.idCard
|
||
d1Form.certificateurl = res.D1.certificateurl
|
||
d1Form.publicimage = res.D1.publicimage
|
||
|
||
d0Form.bankCard = res.D0.bankCard
|
||
d0Form.idcard = res.D0.idCard
|
||
d0Form.certificateurl = res.D0.certificateurl
|
||
d0Form.publicimage = res.D0.publicimage
|
||
|
||
d1idcardRef1.value.pselectFile({ url: res.D1.idCard.imgpositive })
|
||
d1idcardRef2.value.pselectFile({ url: res.D1.idCard.imgnegative })
|
||
d1BankRef3.value.pselectFile({ url: res.D1.bankCard.imgurl })
|
||
if (res.D1.certificateurl) {
|
||
d1BankRef4.value.pselectFile({ url: res.D1.certificateurl })
|
||
}
|
||
if (res.D1.publicimage) {
|
||
d1BankRef5.value.pselectFile({ url: res.D1.publicimage })
|
||
}
|
||
if (res.D1.bankCard.branchProvinceCode) {
|
||
d1AddressRef.value.setValue([res.D1.bankCard.branchProvinceCode, res.D1.bankCard.branchCityCode, res.D1.bankCard.branchAreaCode])
|
||
} else {
|
||
d1AddressRef.value.textSetValue([res.D1.bankCard.branchprovince, res.D1.bankCard.branchcity, res.D1.bankCard.brancharea])
|
||
}
|
||
|
||
d0idcardRef1.value.pselectFile({ url: res.D0.idCard.imgpositive })
|
||
d0idcardRef2.value.pselectFile({ url: res.D0.idCard.imgnegative })
|
||
d0BankRef3.value.pselectFile({ url: res.D0.bankCard.imgurl })
|
||
if (res.D0.certificateurl) {
|
||
d0BankRef4.value.pselectFile({ url: res.D0.certificateurl })
|
||
}
|
||
if (res.D0.publicimage) {
|
||
d0BankRef5.value.pselectFile({ url: res.D0.publicimage })
|
||
}
|
||
if (res.D0.bankCard.branchProvinceCode) {
|
||
d0AddressRef.value.setValue([res.D0.bankCard.branchProvinceCode, res.D0.bankCard.branchCityCode, res.D0.bankCard.branchAreaCode])
|
||
} else {
|
||
d0AddressRef.value.textSetValue([res.D0.bankCard.branchprovince, res.D0.bankCard.branchcity, res.D0.bankCard.brancharea])
|
||
}
|
||
} catch (error) {
|
||
console.error('结算信息error:', error)
|
||
}
|
||
}
|
||
|
||
// 结算人与收银台合照 结算人手持身份证照
|
||
const authForm = reactive({
|
||
merchantCode: storeUser.userInfo.merchantcode,
|
||
picUrl: ''
|
||
})
|
||
const authFormLoading = ref(false)
|
||
const authFormUpload1 = ref(null)
|
||
|
||
// 认证信息
|
||
async function authenticationAjax() {
|
||
try {
|
||
const res = await authentication(storeUser.userInfo.userId)
|
||
authForm.picUrl = res.image
|
||
authFormUpload1.value.pselectFile({ url: res.image })
|
||
} catch (error) {
|
||
console.error('认证信息===', error)
|
||
}
|
||
}
|
||
|
||
// 更改认证信息
|
||
async function updateAuthenticationAjax() {
|
||
try {
|
||
authFormLoading.value = true
|
||
if (authForm.picUrl.uid) {
|
||
authForm.picUrl = await uploadOSS(authForm.picUrl.raw)
|
||
}
|
||
await updateAuthentication(authForm)
|
||
authFormLoading.value = false
|
||
ElMessage.success('提交成功')
|
||
} catch (error) {
|
||
authFormLoading.value = false
|
||
console.error('更改认证信息===', error)
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
merchBaseAccountAjax()
|
||
authenticationAjax()
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import './common.scss';
|
||
</style> |