309 lines
7.4 KiB
Vue
309 lines
7.4 KiB
Vue
<template>
|
|
<view>
|
|
<el-card>
|
|
<div slot="header" class="clearfix">
|
|
<span v-if="vk.getVuex('$user.userInfo.accountType') === 1">个人认证</span>
|
|
<span v-if="vk.getVuex('$user.userInfo.accountType') === 2">企业认证</span>
|
|
</div>
|
|
<vk-data-form ref="form1" v-model="form1.data" :action="form1.props.action" :columns="form1.props.columns" :footer-show="false"
|
|
:before-action="form1.props.beforeAction" :rules="form1.props.rules" :form-type="form1.props.formType"
|
|
:loading.sync="form1.props.loading" :auto-close="true" label-width="140px" @success="onFormSuccess1">
|
|
<template v-slot:fadadaConfirm="{ form, keyName }">
|
|
<view style="display: flex;">
|
|
<el-tag type="primary" v-if="form[keyName]">已认证</el-tag>
|
|
<el-tag type="info" v-if="!form[keyName]">未认证</el-tag>
|
|
<view style="margin-left: 10px;" class="">
|
|
<el-button v-if="!form[keyName]" @click="getCertUrl" type="text"
|
|
size="small">去认证</el-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
</vk-data-form>
|
|
</el-card>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var _ = require('lodash');
|
|
export default {
|
|
data() {
|
|
// 页面数据变量
|
|
return {
|
|
// 表单相关开始-----------------------------------------------------------
|
|
form1: {
|
|
// 表单请求数据，此处可以设置默认值
|
|
data: {
|
|
person: {},
|
|
company: {},
|
|
manager: {},
|
|
fadadaConfirm: false
|
|
},
|
|
// 表单属性
|
|
props: {
|
|
// 表单请求地址
|
|
action: "user/kh/setCertification",
|
|
// 表单字段显示规则
|
|
columns: [
|
|
{
|
|
key: "fadadaConfirm",
|
|
title: "认证状态",
|
|
type: "text",
|
|
},
|
|
|
|
{
|
|
key: "person",
|
|
title: "个人",
|
|
type: "object",
|
|
showLabel: false,
|
|
showRule: (formData) => {
|
|
return formData.person.personName != null
|
|
},
|
|
columns: [{
|
|
key: "personName",
|
|
title: "姓名",
|
|
type: "text",
|
|
readonly: true,
|
|
disabled: true
|
|
},
|
|
{
|
|
key: "idCard",
|
|
title: "身份证号",
|
|
type: "text",
|
|
readonly: true,
|
|
disabled: true
|
|
},
|
|
{
|
|
key: "mobile",
|
|
title: "电话",
|
|
type: "text",
|
|
readonly: true,
|
|
disabled: true
|
|
},
|
|
|
|
]
|
|
},
|
|
{
|
|
key: "company",
|
|
title: "企业信息",
|
|
type: "object",
|
|
showLabel: false,
|
|
showRule: (formData) => {
|
|
return formData.company.companyName != null
|
|
},
|
|
columns: [{
|
|
key: "companyName",
|
|
title: "企业名称",
|
|
type: "text",
|
|
readonly: true,
|
|
disabled: true
|
|
},
|
|
{
|
|
key: "organization",
|
|
title: "统一社会信用代码",
|
|
type: "text",
|
|
readonly: true,
|
|
disabled: true
|
|
},
|
|
{
|
|
key: "legalName",
|
|
title: "法人",
|
|
type: "text",
|
|
readonly: true,
|
|
disabled: true
|
|
},
|
|
{
|
|
key: "legalMobile",
|
|
title: "法人电话",
|
|
type: "text",
|
|
readonly: true,
|
|
disabled: true
|
|
},
|
|
|
|
]
|
|
},
|
|
|
|
{
|
|
key: "manager",
|
|
title: "代理人",
|
|
type: "object",
|
|
showLabel: false,
|
|
showRule: (formData) => {
|
|
return formData.manager.personName != null
|
|
},
|
|
columns: [{
|
|
key: "personName",
|
|
title: "代理人",
|
|
type: "text",
|
|
readonly: true,
|
|
disabled: true
|
|
},
|
|
{
|
|
key: "idCard",
|
|
title: "代理人身份证号",
|
|
type: "text",
|
|
readonly: true,
|
|
disabled: true
|
|
},
|
|
{
|
|
key: "mobile",
|
|
title: "代理人电话",
|
|
type: "text",
|
|
readonly: true,
|
|
disabled: true
|
|
},
|
|
|
|
]
|
|
},
|
|
|
|
// {
|
|
// key: "bankCardNo",
|
|
// title: "银行卡号",
|
|
// type: "text",
|
|
// disabled: true,
|
|
// // tips: `请用个人账户向以下账户转账0.10元。请备注：账号认证，平台将7个工作日内退回原账户。\r\n,
|
|
// // 户名：金久信开户行：中国广发银行南宁支行账号：622252 20151145678XX'`
|
|
// },
|
|
// {
|
|
// key: "mailAddress",
|
|
// title: "有效通讯地址",
|
|
// type: "text"
|
|
// },
|
|
// {
|
|
// key: "contactQq",
|
|
// title: "QQ号码",
|
|
// type: "text",
|
|
// },
|
|
// {
|
|
// key: "contactEmail",
|
|
// title: "邮箱",
|
|
// type: "text",
|
|
// },
|
|
// {
|
|
// key: "",
|
|
// title: "",
|
|
// type: "group",
|
|
// justify: "start",
|
|
// columns: [{
|
|
// key: "contactWechatImage",
|
|
// title: "微信二维码",
|
|
// type: "image",
|
|
// limit: 1
|
|
// },
|
|
// {
|
|
// key: "contactWechat",
|
|
// title: "微信号",
|
|
// type: "text",
|
|
// },
|
|
// ]
|
|
// },
|
|
// {
|
|
// key: "bank_name",
|
|
// title: "开户行",
|
|
// type: "text",
|
|
// },
|
|
// {
|
|
// key: "bank_account_name",
|
|
// title: "户名",
|
|
// type: "text",
|
|
// },
|
|
|
|
|
|
|
|
],
|
|
// 表单验证规则
|
|
rules: {
|
|
mailAddress: [{
|
|
required: true,
|
|
message: "通讯地址不能为空",
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
contactQq: [{
|
|
required: true,
|
|
message: "QQ号码不能为空",
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
contactWechat: [{
|
|
required: true,
|
|
message: "微信不能为空",
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
contactWechatImage: [{
|
|
required: true,
|
|
message: "微信二维码不能为空",
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
contactEmail: [{
|
|
required: true,
|
|
message: "邮箱不能为空",
|
|
trigger: ['blur', 'change']
|
|
}, {
|
|
validator: vk.pubfn.validator("email"),
|
|
message: '邮箱格式错误',
|
|
trigger: 'blur'
|
|
}],
|
|
|
|
},
|
|
// add 代表添加 update 代表修改
|
|
formType: "",
|
|
// 表单是否在请求中
|
|
loading: false,
|
|
// 是否显示表单1 的弹窗
|
|
show: false,
|
|
beforeAction: (formData) => {
|
|
const newFormData = _.pick(formData, ['contactWechat', 'contactEmail',
|
|
'contactWechatImage', 'contactQq', 'mailAddress'
|
|
])
|
|
vk.userCenter.updateUser({
|
|
data: newFormData,
|
|
success: (data) => {
|
|
// 成功后的逻辑
|
|
|
|
}
|
|
});
|
|
return false;
|
|
},
|
|
}
|
|
},
|
|
// 表单相关结束-----------------------------------------------------------
|
|
|
|
};
|
|
},
|
|
created() {
|
|
|
|
this.getUserInfo()
|
|
},
|
|
methods: {
|
|
getUserInfo() {
|
|
vk.userCenter.getCurrentUserInfo({
|
|
success: (data) => {
|
|
this.form1.data = _.pick(data.userInfo, [
|
|
'fadadaConfirm', 'person', 'company', 'manager', 'contactWechat',
|
|
'contactEmail', 'contactWechatImage', 'contactQq', 'mailAddress'
|
|
])
|
|
// 成功后的逻辑
|
|
console.log('data: ', data);
|
|
}
|
|
});
|
|
|
|
},
|
|
onFormSuccess1() {
|
|
console.log(123);
|
|
},
|
|
getCertUrl() {
|
|
vk.callFunction({
|
|
url: 'client/fadada.getVerifyUrl',
|
|
success: (res) => {
|
|
location.href = res.data.url
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |