247 lines
9.7 KiB
Vue
247 lines
9.7 KiB
Vue
<!-- 实名认证信息 -->
|
|
<template>
|
|
<el-form ref="formRef" :model="form" label-width="120" label-position="left">
|
|
<el-row :gutter="gutter">
|
|
<el-col :span="span">
|
|
<el-form-item prop="username" label="推广员名称">
|
|
<el-input v-model="form.username" placeholder="请输入推广员名称" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="span">
|
|
<el-form-item prop="loginname" label="登录账号">
|
|
<el-input v-model="form.loginname" placeholder="请输入登录账号" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="title_wrap">
|
|
<el-text>实名身份证</el-text>
|
|
</div>
|
|
<el-row :gutter="gutter" class="mt15">
|
|
<el-col :span="span">
|
|
<el-form-item prop="idCard.certname" label="姓名">
|
|
<el-input v-model="form.idCard.certname" placeholder="请输入姓名" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="span">
|
|
<el-form-item prop="idCard.certno" label="身份证号码">
|
|
<el-input v-model.trim="form.idCard.certno" placeholder="请输入身份证号码"
|
|
@input="e => form.idCard.certno = removeSpaces(e)" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="gutter">
|
|
<el-col :span="span">
|
|
<el-form-item prop="idCard.certstarttime" label="发放日期">
|
|
<el-date-picker style="width: 100%;" value-format="YYYYMMDD" v-model="form.idCard.certstarttime"
|
|
type="date" placeholder="请选择发放日期" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="span">
|
|
<el-form-item prop="idCard.certendtime" label="失效日期">
|
|
<el-date-picker style="width: 100%;" value-format="YYYYMMDD" v-model="form.idCard.certendtime"
|
|
type="date" placeholder="请选择发放日期" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="gutter">
|
|
<el-col :span="span">
|
|
<el-form-item prop="idCard.imgpositive" label="身份证正面">
|
|
<uploadCard ref="idCardRef1" @selectFile="file => form.idCard.imgpositive = file"
|
|
@removeFile="form.idCard.imgpositive = ''" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="span">
|
|
<el-form-item prop="idCard.imgnegative" label="身份证反面">
|
|
<uploadCard ref="idCardRef2" @selectFile="file => form.idCard.imgnegative = file"
|
|
@removeFile="form.idCard.imgnegative = ''" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="title_wrap">
|
|
<el-text>实名银行卡</el-text>
|
|
</div>
|
|
<el-row :gutter="gutter" class="mt15">
|
|
<el-col :span="span">
|
|
<el-form-item label="实名人">
|
|
<el-input v-model="form.bankCard.bankholder" placeholder="请输入实名人" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="span"></el-col>
|
|
</el-row>
|
|
<el-row :gutter="gutter">
|
|
<el-col :span="span">
|
|
<el-form-item prop="bankCard.bankcardno" label="银行卡号">
|
|
<el-input v-model.trim="form.bankCard.bankcardno" placeholder="请输入银行卡号"
|
|
@input="e => form.bankCard.bankcardno = removeSpaces(e)" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="span">
|
|
<el-form-item prop="bankCard.phone" label="预留手机号">
|
|
<el-input v-model.trim="form.bankCard.phone" placeholder="请输入预留手机号"
|
|
@input="e => form.bankCard.phone = removeSpaces(e)" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="gutter">
|
|
<el-col :span="span">
|
|
<el-form-item prop="bankCard.bank" label="开户行地区">
|
|
<address-card ref="addressRef" placeholder="请选择开户行地区" style="width: 100%;"
|
|
@change="selectBankAddress" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="span"></el-col>
|
|
</el-row>
|
|
<el-row :gutter="gutter">
|
|
<el-col :span="span">
|
|
<el-form-item prop="bankCard.bankname" label="开户银行">
|
|
<el-select style="width: 100%;" v-model="form.bankCard.bankname" placeholder="请选择开户银行"
|
|
@change="banknameChange">
|
|
<el-option v-for="item in bankList" :key="item" :value="item" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="span">
|
|
<el-form-item prop="bankCard.contactline" label="开户支行">
|
|
<el-select style="width: 100%;" v-model="form.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-col>
|
|
</el-row>
|
|
<el-row :gutter="gutter">
|
|
<el-col :span="span">
|
|
<el-form-item prop="bankCard.imgurl" label="银行卡照片">
|
|
<upload-card ref="uploadBank" @selectFile="file => form.bankCard.imgurl = file"
|
|
@removeFile="form.bankCard.imgurl = ''" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- <el-form-item>
|
|
<el-button type="primary" @click="submitHandle">立即提交</el-button>
|
|
</el-form-item> -->
|
|
</el-form>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { removeSpaces } from '@/utils/index.js'
|
|
import bankList from './bankList'
|
|
|
|
import { ElMessage } from 'element-plus'
|
|
import { uploadOSS } from '@/api/home.js'
|
|
import uploadCard from './uploadCard.vue'
|
|
import addressCard from '@/components/addressCard.vue'
|
|
import { merchantInfoDetail, getBranchList, updatePromoterInformation } from '@/api/shop.js'
|
|
import { useRoute } from 'vue-router'
|
|
const route = useRoute()
|
|
|
|
import { useUser } from "@/store/user.js";
|
|
const storeUser = useUser();
|
|
|
|
const formRef = ref(null)
|
|
const idCardRef1 = ref(null)
|
|
const idCardRef2 = ref(null)
|
|
const uploadBank = ref(null)
|
|
const addressRef = ref(null)
|
|
|
|
const bankBranchs = ref([])
|
|
|
|
const span = ref(10)
|
|
const gutter = ref(50)
|
|
|
|
const form = reactive({
|
|
status: '',
|
|
id: '',
|
|
merchantcode: storeUser.userInfo.merchantcode,
|
|
userid: storeUser.userInfo.userId,
|
|
username: '',
|
|
loginname: '',
|
|
idCard: {},
|
|
bankCard: {}
|
|
})
|
|
|
|
// 获取省市区
|
|
function selectBankAddress(e) {
|
|
if (e[1].label != form.bankCard.branchcity) {
|
|
form.bankCard.bankname = ''
|
|
form.bankCard.contactline = ''
|
|
}
|
|
form.bankCard.branchprovince = e[0].label
|
|
form.bankCard.branchcity = e[1].label
|
|
form.bankCard.brancharea = e[2].label
|
|
|
|
form.bankCard.branchProvinceCode = e[0].code
|
|
form.bankCard.branchCityCode = e[1].code
|
|
form.bankCard.branchAreaCode = e[2].code
|
|
}
|
|
|
|
// 确认选择开户银行
|
|
async function banknameChange(val, city) {
|
|
try {
|
|
if (form.bankCard.branchcity || city) {
|
|
const res = await getBranchList({
|
|
bankName: val,
|
|
cityName: city || form.bankCard.branchcity
|
|
})
|
|
form.bankCard.contactline = ''
|
|
bankBranchs.value = res.branchList
|
|
}
|
|
} catch (error) { }
|
|
}
|
|
|
|
// 提交表单
|
|
async function submitHandle() {
|
|
await formRef.value.validate(async vaild => {
|
|
if (vaild) {
|
|
try {
|
|
if (form.idCard.imgpositive.uid) {
|
|
form.idCard.imgpositive = await uploadOSS(form.idCard.imgpositive.raw)
|
|
}
|
|
if (form.idCard.imgnegative.uid) {
|
|
form.idCard.imgnegative = await uploadOSS(form.idCard.imgnegative.raw)
|
|
}
|
|
if (form.bankCard.imgurl.uid) {
|
|
form.bankCard.imgurl = await uploadOSS(form.bankCard.imgurl.raw)
|
|
}
|
|
await updatePromoterInformation(form)
|
|
ElMessage.success('提交成功')
|
|
merchantInfoDetailAjax()
|
|
} catch (error) {
|
|
console.log('334:提交表单===', error)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// 获取实名认证信息
|
|
async function merchantInfoDetailAjax() {
|
|
try {
|
|
const res = await merchantInfoDetail(storeUser.userInfo.userId)
|
|
await banknameChange(res.bankCard.bankname, res.bankCard.branchcity)
|
|
form.id = res.id
|
|
form.status = res.status
|
|
form.username = res.username
|
|
form.loginname = res.loginname
|
|
form.idCard = res.idCard
|
|
form.bankCard = res.bankCard
|
|
idCardRef1.value.pselectFile({ url: res.idCard.imgpositive })
|
|
idCardRef2.value.pselectFile({ url: res.idCard.imgnegative })
|
|
uploadBank.value.pselectFile({ url: res.bankCard.imgurl })
|
|
if (res.bankCard.branchProvinceCode) {
|
|
addressRef.value.setValue([res.bankCard.branchProvinceCode, res.bankCard.branchCityCode, res.bankCard.branchAreaCode])
|
|
} else {
|
|
addressRef.value.textSetValue([res.bankCard.branchprovince, res.bankCard.branchcity, res.bankCard.brancharea])
|
|
}
|
|
} catch (error) {
|
|
console.log('获取实名认证信息:', error)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
merchantInfoDetailAjax()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import './common.scss';
|
|
</style> |