init
This commit is contained in:
359
src/views/organization/components/authentication.vue
Normal file
359
src/views/organization/components/authentication.vue
Normal file
@@ -0,0 +1,359 @@
|
||||
<!-- 实名认证信息 -->
|
||||
<template>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" 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="form.idCard.certno" placeholder="请输入身份证号码" />
|
||||
</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%;" 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%;" 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 prop="bankCard.bankcardno" label="银行卡号">
|
||||
<el-input v-model="form.bankCard.bankcardno" placeholder="请输入银行卡号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="span">
|
||||
<el-form-item prop="bankCard.phone" label="预留手机号">
|
||||
<el-input v-model="form.bankCard.phone" placeholder="请输入预留手机号" />
|
||||
</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 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()
|
||||
|
||||
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: route.query.merchantcode,
|
||||
userid: route.query.id,
|
||||
username: route.query.name,
|
||||
loginname: route.query.account,
|
||||
idCard: {
|
||||
id: '',
|
||||
userid: '',
|
||||
certname: '',
|
||||
certno: '',
|
||||
certstarttime: '',
|
||||
certendtime: '',
|
||||
imgpositive: '',
|
||||
imgnegative: ''
|
||||
},
|
||||
bankCard: {
|
||||
id: '',
|
||||
userid: '',
|
||||
bankcardno: '',
|
||||
phone: '',
|
||||
branchprovince: '',
|
||||
branchcity: '',
|
||||
brancharea: '',
|
||||
bankname: '',
|
||||
contactline: '',
|
||||
imgurl: '',
|
||||
branchProvinceCode: '',
|
||||
branchCityCode: '',
|
||||
branchAreaCode: ''
|
||||
}
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
message: '',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
loginname: [
|
||||
{
|
||||
required: true,
|
||||
message: '',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
idCard: {
|
||||
certname: [
|
||||
{
|
||||
required: true,
|
||||
message: '',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
certno: [
|
||||
{
|
||||
required: true,
|
||||
message: '',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
certstarttime: [
|
||||
{
|
||||
required: true,
|
||||
message: '',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
certendtime: [
|
||||
{
|
||||
required: true,
|
||||
message: '',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
imgpositive: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择身份证正面照片',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
imgnegative: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择身份证反面照片',
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
},
|
||||
bankCard: {
|
||||
bankcardno: [
|
||||
{
|
||||
required: true,
|
||||
message: '',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
required: true,
|
||||
message: '',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
bankname: [
|
||||
{
|
||||
required: true,
|
||||
message: '',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
bank: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
if (!form.bankCard.branchprovince || !form.bankCard.branchcity || !form.bankCard.brancharea) {
|
||||
return callback(new Error('请完善开户行地区信息'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
contactline: [
|
||||
{
|
||||
required: true,
|
||||
message: '',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
imgurl: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择银行卡照片',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
// 获取省市区
|
||||
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('提交成功')
|
||||
} catch (error) {
|
||||
console.log('334:提交表单===', error)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取实名认证信息
|
||||
async function merchantInfoDetailAjax() {
|
||||
try {
|
||||
const res = await merchantInfoDetail(route.query.id)
|
||||
await banknameChange(res.bankCard.bankname, res.bankCard.branchcity)
|
||||
form.id = res.id
|
||||
form.status = res.status
|
||||
form.bankCard = res.bankCard
|
||||
form.idCard = res.idCard
|
||||
idCardRef1.value.pselectFile({ url: res.idCard.imgpositive })
|
||||
idCardRef2.value.pselectFile({ url: res.idCard.imgnegative })
|
||||
uploadBank.value.pselectFile({ url: res.bankCard.imgurl })
|
||||
addressRef.value.setValue([res.bankCard.branchProvinceCode, res.bankCard.branchCityCode, res.bankCard.branchAreaCode])
|
||||
} catch (error) {
|
||||
console.log('获取实名认证信息:', error)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
merchantInfoDetailAjax()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './common.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user