Browse Source

优化机构认证,个人认证页面

master
wanghongjun 2 years ago
parent
commit
bdbe49c593
  1. 4
      pages/user/mycertinfo/orgverify.vue
  2. 507
      pages/user/mycertinfo/personverify.vue

4
pages/user/mycertinfo/orgverify.vue

@ -666,13 +666,13 @@ export default {
success({ tempFiles }) { success({ tempFiles }) {
oldImageList.push(tempFiles) oldImageList.push(tempFiles)
uni.uploadFile({ uni.uploadFile({
url: "kk/"+VerifyApi.getUploadUrl(), // url: VerifyApi.getUploadUrl(), //
filePath: tempFiles[0].path, filePath: tempFiles[0].path,
name: 'file', name: 'file',
success: (uploadFileRes) => { success: (uploadFileRes) => {
let res = JSON.parse(uploadFileRes.data) let res = JSON.parse(uploadFileRes.data)
if (res.resultCode != '00000000' ) { if (res.resultCode != '00000000' ) {
alert('上传失败') app.$error('上传失败')
} }
app.formData[item] = res.data app.formData[item] = res.data
} }

507
pages/user/mycertinfo/personverify.vue

@ -2,94 +2,84 @@
<view class="pvfbox"> <view class="pvfbox">
<view class="pvform"> <view class="pvform">
<view class="form-item"> <uni-forms ref="valiForm" :modelValue="formData">
<input class="form-item--input" placeholder="姓名" v-model="formData.pernalName"/> <uni-forms-item class="form-item" label="姓名" name="pernalName" required>
</view> <uni-easyinput v-model="formData.pernalName" type="text" placeholder="请输入姓名" />
</uni-forms-item>
<view class="form-item"> <uni-forms-item class="form-item" label="身份证号" name="pernalCard" required>
<input class="form-item--input" placeholder="身份证号" v-model="formData.pernalCard"/> <uni-easyinput v-model="formData.pernalCard" type="text" placeholder="请输入身份证号" />
</view> </uni-forms-item>
<uni-forms-item class="form-item" label="户籍所在地" name="domicileStr" required>
<view class="form-item"> <picker class="picker picker_select" mode="multiSelector" :range="domicileArr" range-key="name" :value="domicileIndex" @change="pickerChange"
<picker class="picker" mode="multiSelector" :range="domicileArr" range-key="name" :value="domicileIndex" @change="pickerChange" @columnchange="pickerColumnchange">
@columnchange="pickerColumnchange"> <view class="pbox" >
<view class="pbox" :class="{'pbox_hover':domicileStr != '请选择户籍所在地省/市/区'}"> <view>{{formData.domicileStr === '' ? '请点击选择户籍所在地' : formData.domicileStr}}</view>
<view>{{domicileStr}}</view> <text class="iconfont icon-you"></text>
<text class="iconfont icon-you"></text> </view>
</picker>
</uni-forms-item>
<uni-forms-item class="form-item" label="联系地址" name="pernalAddress" required>
<uni-easyinput v-model="formData.pernalAddress" type="text" placeholder="请输入联系地址" />
</uni-forms-item>
<!-- 身份证扫描件国徽面 -->
<uni-forms-item class="form-item" :class="{ view_show_image: pernalJust1!=''}" label="身份证扫描件(国徽面)" name="pernalJust1" required>
<view class="image-list" v-if="pernalJust1!=''">
<view class="image-preview" v-for="(image, imageIndex) in pernalJust1[0]">
<image class="image" mode="aspectFill" :src="image.path"></image>
</view>
</view> </view>
</picker> <button class="form-item--input" @click="chooseImage('pernalJust1')" v-else>身份证扫描件国徽面</button>
</view> <input type="text" class="image_url" v-model="formData.pernalJust1">
</uni-forms-item>
<view class="form-item"> <!-- 身份证扫描件人像面 -->
<input class="form-item--input" placeholder="联系地址" v-model="formData.pernalAddress"/> <uni-forms-item class="form-item" :class="{ view_show_image: pernalJust2!=''}" label="身份证扫描件(国徽面)" name="pernalJust2" required>
</view> <view class="image-list" v-if="pernalJust2!=''">
<!-- 身份证扫描件国徽面 --> <view class="image-preview" v-for="(image, imageIndex) in pernalJust2[0]">
<view class="image-list" v-if="pernalJust1!=''"> <image class="image" mode="aspectFill" :src="image.path"></image>
<view class="image-preview" v-for="(image, imageIndex) in pernalJust1[0]"> </view>
<image class="image" mode="aspectFill" :src="image.path"></image>
</view>
</view>
<view class="form-item" v-else>
<button class="form-item--input" @click="chooseImage('pernalJust1')">身份证扫描件国徽面</button>
</view>
<input type="hidden" id="pernalJust1" value="">
<!-- 身份证扫描件人像面 -->
<view class="image-list" v-if="pernalJust2!=''">
<view class="image-preview" v-for="(image, imageIndex) in pernalJust2[0]">
<image class="image" mode="aspectFill" :src="image.path"></image>
</view>
</view>
<view class="form-item" v-else>
<button class="form-item--input" @click="chooseImage('pernalJust2')">身份证扫描件人像面</button>
</view>
<input type="hidden" id="pernalJust2" value="">
<view class="form-item">
<input class="form-item--input" placeholder="联系电话" v-model="formData.pernalPhone"/>
</view>
<view class="form-item">
<input class="form-item--input" placeholder="邮箱地址" v-model="formData.pernalEmial"/>
</view>
<view class="form-item">
<input class="form-item--input" placeholder="银行账户账号" v-model="formData.pernalBank"/>
</view>
<view class="form-item">
<input class="form-item--input" placeholder="开户银行" v-model="formData.pernalOpenBank"/>
</view>
<view class="form-item">
<picker class="picker" mode="multiSelector" :range="bankArr" range-key="name" :value="bankIndex" @change="pickerBankChange"
@columnchange="pickerBankColumnChange">
<view class="pbox" :class="{'pbox_hover':bankStr != '请选择开户所在地省/市/区'}">
<view>{{bankStr}}</view>
<text class="iconfont icon-you"></text>
</view> </view>
</picker> <button class="form-item--input" @click="chooseImage('pernalJust2')" v-else>身份证扫描件人像面</button>
</view> <input type="hidden" class="image_url" v-model="formData.pernalJust2">
</uni-forms-item>
<view class="form-item">
<input class="form-item--input" placeholder="开户银行预留手机号" v-model="formData.peralBankPhone"/> <uni-forms-item class="form-item" label="联系电话" name="pernalPhone" required>
</view> <uni-easyinput v-model="formData.pernalPhone" type="text" placeholder="请输入联系电话" />
</uni-forms-item>
<view class="form-item"> <uni-forms-item class="form-item" label="邮箱地址" name="pernalEmial" required>
<picker mode="selector" :range="certiauditList" range-key="name" :value="idIndex2" @change="onChangeCertiaudit"> <uni-easyinput v-model="formData.pernalEmial" type="text" placeholder="请输入邮箱地址" />
<text v-if="idIndex2 > -1">{{ certiauditList[idIndex2].name }}</text> </uni-forms-item>
<text v-else class="col-80">推荐中介服务机构</text> <uni-forms-item class="form-item" label="银行账户账号" name="pernalBank" required>
</picker> <uni-easyinput v-model="formData.pernalBank" type="text" placeholder="请输入银行账户账号" />
</view> </uni-forms-item>
<uni-forms-item class="form-item" label="开户银行" name="pernalOpenBank" required>
<view class="form-item"> <uni-easyinput v-model="formData.pernalOpenBank" type="text" placeholder="请输入开户银行" />
<view >身份</view> </uni-forms-item>
<checkbox v-for="item in identityList" style="margin-left: 20px" v-model="item.show" color="#4399ff" class="ckbox" @click="onCalculateAmount(item.id)">{{item.saleType}}</checkbox> <uni-forms-item class="form-item" label="开户所在地" name="bankStr" required>
</view> <picker class="picker picker_select" mode="multiSelector" :range="bankArr" range-key="name" :value="bankIndex" @change="pickerBankChange"
@columnchange="pickerBankColumnChange">
<view class="form-item"> <view class="pbox">
<view>认证费用</view> <view>{{formData.bankStr === '' ? '请点击选择开户所在地' : formData.bankStr}}</view>
<view> {{formData.amount}}</view> <text class="iconfont icon-you"></text>
</view> </view>
</picker>
</uni-forms-item>
<uni-forms-item class="form-item" label="开户银行预留手机号" name="peralBankPhone" required>
<uni-easyinput v-model="formData.peralBankPhone" type="text" placeholder="请输入开户银行预留手机号" />
</uni-forms-item>
<uni-forms-item class="form-item" label="推荐中介服务机构" name="islicode" required>
<picker mode="selector" :range="certiauditList" range-key="name" :value="idIndex2" @change="onChangeCertiaudit">
<text v-if="idIndex2 > -1">{{ certiauditList[idIndex2].name }}</text>
<text v-else class="col-80">推荐中介服务机构</text>
</picker>
</uni-forms-item>
<uni-forms-item class="form-item" label="身份" name="saleType" required>
<checkbox v-for="item in identityList" v-model="item.show" color="#4399ff" class="ckbox title_left_radio title_content" @click="onCalculateAmount(item.id)">{{item.saleType}}</checkbox>
</uni-forms-item>
<uni-forms-item class="form-item" label="认证费用" name="fee">
<view class="title_content">{{formData.fee}}</view>
</uni-forms-item>
</uni-forms>
<!-- 隐私政策等 --> <!-- 隐私政策等 -->
<view class="privacy"> <view class="privacy">
@ -119,9 +109,13 @@
import whpop from '../../login/components/WhPopup' import whpop from '../../login/components/WhPopup'
import region from "../../../utils/json/pca.json"; import region from "../../../utils/json/pca.json";
import { returnAccountId } from '@/core/app' import { returnAccountId } from '@/core/app'
import uniForms from '../../../uni_modules/uni-forms/components/uni-forms/uni-forms';
import uniFormsItem from '../../../uni_modules/uni-forms/components/uni-forms-item/uni-forms-item'
import uniEasyinput from '../../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput'
import uniDataCheckbox from '../../../uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox'
export default { export default {
components: {whpop}, components: {whpop,uniForms,uniFormsItem,uniEasyinput,uniDataCheckbox},
data() { data() {
return { return {
// //
@ -130,6 +124,8 @@
pernalName: '', pernalName: '',
// //
pernalCard: '', pernalCard: '',
//
domicileStr: '',
// //
pernalAddress: '', pernalAddress: '',
// //
@ -142,10 +138,104 @@
pernalOpenBank: '', pernalOpenBank: '',
// //
peralBankPhone: '', peralBankPhone: '',
//
bankStr: '',
// //
islicode: '', islicode: '',
// //
amount: '0.00', fee: '0.00',
//
saleType: '',
//
pernalJust1: '',
//
pernalJust2: '',
},
rules: {
pernalName: {
rules: [{
required: true,
errorMessage: '姓名不能为空'
}]
},
pernalCard: {
rules: [{
required: true,
errorMessage: '身份证号不能为空'
}]
},
domicileStr: {
rules: [{
required: true,
errorMessage: '请点击选择户籍所在地'
}]
},
pernalAddress: {
rules: [{
required: true,
errorMessage: '联系地址不能为空'
}]
},
pernalJust1: {
rules: [{
required: true,
errorMessage: '请点击上传身份证扫描件正面'
}]
},
pernalJust2: {
rules: [{
required: true,
errorMessage: '请点击上传身份证扫描件反面'
}]
},
pernalPhone: {
rules: [{
required: true,
errorMessage: '联系电话不能为空'
}]
},
pernalEmial: {
rules: [{
required: true,
errorMessage: '邮箱地址不能为空'
}]
},
pernalBank: {
rules: [{
required: true,
errorMessage: '银行账号不能为空'
}]
},
pernalOpenBank: {
rules: [{
required: true,
errorMessage: '开户行不能为空'
}]
},
bankStr: {
rules: [{
required: true,
errorMessage: '开户行所在地不能为空'
}]
},
peralBankPhone: {
rules: [{
required: true,
errorMessage: '开户银行预留手机号不能为空'
}]
},
islicode: {
rules: [{
required: true,
errorMessage: '请点击选择推荐中介服务'
}]
},
saleType: {
rules: [{
required: true,
errorMessage: '请至少选择一种身份'
}]
},
}, },
// //
pernalJust1: [], pernalJust1: [],
@ -153,11 +243,9 @@
// //
oldRegion: region, oldRegion: region,
// //
domicileStr: "请选择户籍所在地省/市/区",
domicileIndex: [0, 0, 0], domicileIndex: [0, 0, 0],
domicileArr: [[],[],[]], domicileArr: [[],[],[]],
// //
bankStr: "请选择开户行所在地省/市/区",
bankIndex: [0, 0, 0], bankIndex: [0, 0, 0],
bankArr: [[],[],[]], bankArr: [[],[],[]],
// //
@ -175,6 +263,10 @@
isRevise: false, isRevise: false,
} }
}, },
onReady() {
// onReady
this.$refs.valiForm.setRules(this.rules)
},
mounted() { mounted() {
// //
this.getCertiauditList() this.getCertiauditList()
@ -227,18 +319,18 @@
} }
}) })
if (this.isRevise) { if (this.isRevise) {
this.domicileStr = this.domicileArr[0][this.domicileIndex[0]].name + ' ' + this.domicileArr[1][this.domicileIndex[1]].name + ' ' + this.formData.domicileStr = this.domicileArr[0][this.domicileIndex[0]].name + ' ' + this.domicileArr[1][this.domicileIndex[1]].name + ' ' +
this.domicileArr[2][this.domicileIndex[2]].name; this.domicileArr[2][this.domicileIndex[2]].name;
} else { } else {
this.domicileStr = '请选择户籍所在地省/市/区'; // this.formData.domicileStr = '//';
this.bankStr = '请选择开户所在地省/市/区'; // this.formData.bankStr = '//';
} }
}, },
methods: { methods: {
// //
pickerChange(e) { pickerChange(e) {
this.domicileIndex = e.detail.value; this.domicileIndex = e.detail.value;
this.domicileStr = this.domicileArr[0][this.domicileIndex[0]].name + ' ' + this.domicileArr[1][this.domicileIndex[1]].name + ' ' + this.formData.domicileStr = this.domicileArr[0][this.domicileIndex[0]].name + ' ' + this.domicileArr[1][this.domicileIndex[1]].name + ' ' +
this.domicileArr[2][this.domicileIndex[2]].name; this.domicileArr[2][this.domicileIndex[2]].name;
// //
@ -290,7 +382,7 @@
// //
pickerBankChange(e) { pickerBankChange(e) {
this.bankIndex = e.detail.value; this.bankIndex = e.detail.value;
this.bankStr = this.bankArr[0][this.bankIndex[0]].name + ' ' + this.bankArr[1][this.bankIndex[1]].name + ' ' + this.formData.bankStr = this.bankArr[0][this.bankIndex[0]].name + ' ' + this.bankArr[1][this.bankIndex[1]].name + ' ' +
this.bankArr[2][this.bankIndex[2]].name; this.bankArr[2][this.bankIndex[2]].name;
// //
@ -350,15 +442,15 @@
success({ tempFiles }) { success({ tempFiles }) {
oldImageList.push(tempFiles) oldImageList.push(tempFiles)
uni.uploadFile({ uni.uploadFile({
url: 'kk/'+VerifyApi.getUploadUrl(), // url: VerifyApi.getUploadUrl(), //
filePath: tempFiles[0].path, filePath: tempFiles[0].path,
name: 'file', name: 'file',
success: (uploadFileRes) => { success: (uploadFileRes) => {
let res = JSON.parse(uploadFileRes.data) let res = JSON.parse(uploadFileRes.data)
if (res.resultCode != '00000000' ) { if (res.resultCode != '00000000' ) {
alert('上传失败') app.$error('上传失败')
} }
document.getElementById(item).value = res.data app.formData[item] = res.data
} }
}) })
} }
@ -380,7 +472,7 @@
onChangeCertiaudit(e) { onChangeCertiaudit(e) {
const curIndex = e.detail.value const curIndex = e.detail.value
this.idIndex2 = curIndex this.idIndex2 = curIndex
this.islicode = this.certiauditList[curIndex].islicode this.formData.islicode = this.certiauditList[curIndex].islicode
}, },
// //
getSelectCertificationFee(){ getSelectCertificationFee(){
@ -392,7 +484,7 @@
for (let attr in data) { for (let attr in data) {
let value = data[attr] let value = data[attr]
if (value.userType == '个人') { if (value.userType == '个人') {
value.is_show = 0 value.checked = 0
app.identityList.push(value) app.identityList.push(value)
} }
} }
@ -404,27 +496,31 @@
// //
onCalculateAmount(id){ onCalculateAmount(id){
const app = this; const app = this;
app.formData.amount = 0; app.formData.fee = 0;
let saleTypeTemp = []
for (let attr in app.identityList) { for (let attr in app.identityList) {
let value = app.identityList[attr] let value = app.identityList[attr]
if (id === value.id) { if (id === value.id) {
if (value.is_show === 1) { if (value.checked === 1) {
app.identityList[attr].is_show = 0 app.identityList[attr].checked = 0
value.is_show = 0 value.checked = 0
} else { } else {
app.identityList[attr].is_show = 1 app.identityList[attr].checked = 1
value.is_show = 1 value.checked = 1
} }
} }
if (value.is_show === 1) { if (value.checked === 1) {
app.formData.amount += value.fee * 1 app.formData.fee += value.fee * 1
saleTypeTemp.push(value.saleType)
} }
} }
app.formData.saleType = saleTypeTemp.join(',')
}, },
/** /**
* 阅读注册协议和隐私 * 阅读注册协议和隐私
@ -439,113 +535,89 @@
// //
handleSubmit() { handleSubmit() {
const app = this; const app = this;
uni.showLoading()
this.$refs.valiForm.validate().then(res => {
uni.hideLoading()
if (!app.isTick) { if (!app.isTick) {
alert('请勾选《交易主体进场协议》和《文化数据交易委托协议》和《临时业务机构委托协议》') app.$error('请勾选《交易主体进场协议》和《文化数据交易委托协议》和《临时业务机构委托协议》')
} return false
}
let accountId = returnAccountId() let accountId = returnAccountId()
if (accountId === '') { if (accountId === '') {
app.$error('登录已失效,请前往登录') app.$error('登录已失效,请前往登录')
uni.navigateTo({ uni.navigateTo({
url:"/pages/login/index" url:"/pages/login/index"
}) })
return false return false
} }
let agreement = { let agreement = {
agreementIds: "4,5,6", agreementIds: "4,5,6",
userId: accountId userId: accountId
} }
// //
let domicileStr = app.domicileStr let domicileStr = app.formData.domicileStr
let domicileArr = domicileStr.split(" ") let domicileArr = domicileStr.split(" ")
// //
let pernalJust1 = document.getElementById('pernalJust1').value; let pernalJust1 = app.formData.pernalJust1;
let pernalJust2 = document.getElementById('pernalJust2').value; let pernalJust2 = app.formData.pernalJust2;
// //
let bankStr = app.bankStr let bankStr = app.formData.bankStr
let bankArr = bankStr.split(" ") let bankArr = bankStr.split(" ")
// //
let saleTypeTemp = [] let saleType = app.formData.saleType
let identityList = app.identityList
for (let attr in identityList) { let peopledata = {
let saleTypeData = identityList[attr] name: app.formData.pernalName, //
if (saleTypeData.is_show === 1) { uscc: app.formData.pernalCard, //
saleTypeTemp.push(saleTypeData.saleType) regionprovince: domicileArr[0], // -
regioncity: domicileArr[1], // -
regiondistrict: domicileArr[2], // -
address: app.formData.pernalAddress, //
cerscanpath1: pernalJust1, // url
cerscanpath2: pernalJust2, // url
contactscellphone: app.formData.pernalPhone, //
contactsemail: app.formData.pernalEmial, //
publicaccount: app.formData.pernalBank, //
bankname: app.formData.pernalOpenBank, //
bankprovince: bankArr[0], // -
bankcity: bankArr[1], // -
bankdistrict: bankArr[2], // -/
bankcellphone: app.formData.peralBankPhone, //
parentislicode: app.formData.islicode, // is
isposttion: 0, // (0 1 )
saleType: saleType, //
fees: app.formData.fee, //
updateat: "",
userid: accountId,
usertype: "个人"
} }
}
let saleType = saleTypeTemp.join(',')
let peopledata = {
name: app.formData.pernalName, //
uscc: app.formData.pernalCard, //
regionprovince: domicileArr[0], // -
regioncity: domicileArr[1], // -
regiondistrict: domicileArr[2], // -
address: app.formData.pernalAddress, //
cerscanpath1: pernalJust1, // url
cerscanpath2: pernalJust2, // url
contactscellphone: app.formData.pernalPhone, //
contactsemail: app.formData.pernalEmial, //
publicaccount: app.formData.pernalBank, //
bankname: app.formData.pernalOpenBank, //
bankprovince: bankArr[0], // -
bankcity: bankArr[1], // -
bankdistrict: bankArr[2], // -/
bankcellphone: app.formData.peralBankPhone, //
parentislicode: app.islicode, // is
isposttion: 0, // (0 1 )
saleType: saleType, //
fees: app.formData.amount, //
updateat: "",
userid: accountId,
usertype: "个人"
}
let validateRes = app.submitDataValidate(peopledata)
if (validateRes < 1) {
return false
}
VerifyApi.preservation(agreement)
let res = VerifyApi.verifySubmit(peopledata) VerifyApi.preservation(agreement)
uni.navigateTo({ return new Promise((resolve, reject) => {
url:"/pages/user/index" VerifyApi.verifySubmit(peopledata)
.then(result => {
if (result.resultCode != '00000000') {
app.$error('提交认证失败')
} else {
app.$success('认证提交成功')
uni.navigateTo({
url:"/pages/user/index"
})
}
resolve()
})
.catch(reject)
})
}).catch(err => {
uni.hideLoading()
return false
}) })
}, },
//
submitDataValidate(data) {
const app = this
let validateData = [
{key: 'name', title: '姓名'},
{key: 'uscc', title: '身份证号'},
{key: 'regionprovince', title: '户籍所在地'},
{key: 'address', title: '详细地址'},
{key: 'establishdate', title: '机构成立日期'},
{key: 'desc', title: '机构简介'},
{key: 'cerscanpath1', title: '个人身份证扫正面描件'},
{key: 'cerscanpath2', title: '个人身份证扫反面描件'},
{key: 'contactscellphone', title: '联系电话'},
{key: 'contactsemail', title: '邮箱地址'},
{key: 'publicaccount', title: '对公账户号'},
{key: 'bankname', title: '开户银行名称'},
{key: 'bankprovince', title: '开户银行所在地'},
{key: 'bankcellphone', title: '开户银行预留手机号'},
{key: 'parentislicode', title: '推荐中介服务机构'}
]
for (let i in validateData) {
let dateVal = validateData[i]
let val = data[dateVal.key]
if (val === '' || val === null || val === undefined) {
app.$error(dateVal.title + '不能为空')
return 0
}
}
return 1;
}
} }
} }
</script> </script>
@ -564,7 +636,6 @@
.form-item { .form-item {
display: flex; display: flex;
padding: 18rpx; padding: 18rpx;
border-bottom: 1rpx solid #f3f1f2;
margin-bottom: 30rpx; margin-bottom: 30rpx;
height: 96rpx; height: 96rpx;
@ -580,6 +651,17 @@
height: 100%; height: 100%;
} }
.picker_select {
margin-top: 18rpx;
}
.title_content {
margin-top: 12rpx!important;
}
.image_url {
display: none;
}
} }
// //
@ -610,10 +692,13 @@
} }
} }
.view_show_image {
margin-bottom: 110rpx;
}
.image-list { .image-list {
display: flex; display: flex;
padding: 0 20rpx; padding: 0 20rpx;
margin-top: 20rpx;
margin-bottom: -20rpx; margin-bottom: -20rpx;
&:after { &:after {
@ -680,5 +765,9 @@
// endl // endl
} }
.title_left_radio {
margin-right: 20rpx;
}
} }
</style> </style>

Loading…
Cancel
Save