xioayue
/
why_in_h5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
[内网]文化云交易前端H5
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 Commits
1 Branch
0 Tags
14 MiB
 
 
 
 
 
 
Tree: a918eeff03
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'a918eeff03'
${ noResults }
why_in_h5/pages/user/mycertinfo/orgverify.vue

766 lines
21 KiB
Raw Blame History

<template>
<view class="orgvzone">
<!-- 机构认证 -->
<!-- 第一步 选择需要认证的类型 -->
<view class="vfbox" v-if="step==1">
<view class="vftit">机构认证</view>
<view class="vfitem" :class="vfindex==1?'selected':''" @click="vfselitem(1)">
<view class="vfi-tit">公共文化机构</view>
<view class="vfi-desc">
<view>公共文化是相对经营文化而言，是为满足社会的共同需要而形成的文化形态，强调的是以社会全体公众为服务对象的公共行政职能。</view>
<view class="">如：博物馆、美术馆、图书馆、文化馆及街道、社区各级文化活动站（室）</view>
</view>
</view>
<view class="vfitem" :class="vfindex==2?'selected':''" @click="vfselitem(2)">
<view class="vfi-tit">文化生产机构</view>
<view class="vfi-desc">
<view>文化生产机构是指从事文化工作，具有法人资格，以创作生产某种业态文化数字内容为目标的文化机构；比如是出版社、影视公司、演出公司、设计公司等</view>
</view>
</view>
<view class="vfitem" :class="vfindex==3?'selected':''" @click="vfselitem(3)">
<view class="vfi-tit">高校科研机构</view>
<view class="vfi-desc">
<view>高校科研机构是指经过学校上级主管部门或者学校正式下文批准成立的，一般分为实体性科研机构和非实体性科研机构</view>
<view>如：实验室、研究室、研究所、研究中心、研究院、研究基地等</view>
</view>
</view>
<view class="vfitem" :class="vfindex==4?'selected':''" @click="vfselitem(4)">
<view class="vfi-tit">其它</view>
<view class="vfi-desc">
<view>其他 - 通常指经营类企业。</view>
</view>
</view>
<!-- 立即认证 -->
<view class="vfbtn" v-if="vfindex>0">
<button @click="gotostep(2)">立即认证</button>
</view>
</view>
<!-- step 2 -->
<view class="vfbox" v-if="step==2">
<view class="form-item">
<input class="form-item--input" v-model="Organizationcode" maxlength="18" placeholder="统一社会信用代码"/>
</view>
<view class="vfbtn">
<button @click="chkinput()">下一步</button>
</view>
</view>
<!-- step 3 -->
<view class="vfbox" v-if="step==3">
<view class="ver-form">
<view class="form-item sfsel">
<view class="sf-tit">选择身份</view>
<view class="sf-item">
<view class="sfiv" :class="{ active: sfval == 10 }" @click="selsf(10)">法 人</view>
<view class="sfiv" :class="{ active: sfval == 20 }" @click="selsf(20)">经办人</view>
</view>
</view>
<!-- 如果是代办，需要下面的 -->
<view v-if="sfval==20">
<!-- 经办人授权委托书 预览图 -->
<view class="image-list" v-if="jfr_entfile!=''">
<view class="image-preview" v-for="(image, imageIndex) in jfr_entfile[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('jfr_entfile')">上传经办人授权委托书</button>
</view>
<!-- 经办人身份证扫描件（需盖章） -->
<!-- 预览图 -->
<view class="image-list" v-if="jfr_idafile!=''">
<view class="image-preview" v-for="(image, imageIndex) in jfr_idafile[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('jfr_idafile')">经办人身份证扫描件（需盖章）国徽面</button>
</view>
<!-- 经办人身份证扫描件（需盖章） 预览图 -->
<view class="image-list" v-if="jfr_idbfile!=''">
<view class="image-preview" v-for="(image, imageIndex) in jfr_idbfile[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('jfr_idbfile')">经办人身份证扫描件（需盖章）头像面</button>
</view>
<!-- 经办人姓名 -->
<view class="form-item">
<input class="form-item--input" v-model="managerName" autocomplete="off" placeholder="经办人姓名" />
</view>
<!-- 经办人身份证号 -->
<view class="form-item">
<input class="form-item--input" v-model="managerIdnum" autocomplete="off" placeholder="经办人身份证号" />
</view>
</view>
<!-- 公用表单部分 -->
<!-- 机构名称 -->
<view class="form-item">
<input class="form-item--input" v-model="name" autocomplete="off" placeholder="机构名称" />
</view>
<!-- 行业类别 -->
<view class="form-item">
<picker mode="selector" :range="industryList" range-key="name" :value="idIndex"
@change="onChangeIndustry">
<text v-if="idIndex > -1">{{ industryList[idIndex].name }}</text>
<text v-else class="col-80">选择行业类别</text>
</picker>
</view>
<!-- 2nd -->
<view class="form-item">
<picker class="picker" mode="multiSelector" :range="region" range-key="name" :value="regionIndex" @change="pickerChange"
@columnchange="pickerColumnchange">
<view class="pbox" :class="{'pbox_hover':regionStr != '请选择省市区'}">
<view>{{regionStr}}</view>
<text class="iconfont icon-you"></text>
</view>
</picker>
</view>
<view class="form-item">
<textarea class="form-item--input" placeholder="详细地址" v-model="address"/>
</view>
<view class="form-item">
<picker class="date" mode="multiSelector" :range="region" range-key="name" :value="regionIndex" @change="pickerChange"
@columnchange="pickerColumnchange">
<text>机构成立日期</text>
</picker>
</view>
<view class="form-item">
<textarea class="form-item--input " placeholder="机构简介" v-model="desc"></textarea>
</view>
<view class="form-item">
<input class="form-item--input" placeholder="法人姓名" v-model="legalsName"/>
</view>
<view class="form-item">
<input class="form-item--input" placeholder="法人证件类型" v-model="legalsName"/>
</view>
<view class="form-item">
<input class="form-item--input" placeholder="法人证件号" v-model="legalsName"/>
</view>
<view class="form-item">
<input class="form-item--input" v-model="Organizationcode" placeholder="统一社会信用代码"/>
</view>
<view class="form-item">
<input class="form-item--input" placeholder="营业执照有效期"/>
</view>
<view class="form-item">
<input class="form-item--input" placeholder="法人手机号"/>
</view>
<view class="form-item">
<input class="form-item--input" placeholder="银行账号" v-model="publicAccount"/>
</view>
<view class="form-item">
<input class="form-item--input" placeholder="开户人"/>
</view>
<view class="form-item">
<view class="">银行卡类型</view>
<radio-group>
<radio></radio>
</radio-group>
</view>
<view class="form-item">
<input class="form-item--input" placeholder="开户行名称"/>
</view>
<view class="form-item">
<input class="form-item--input" placeholder="银行行号"/>
</view>
<view class="form-item">
<picker mode="multiSelector">
<text>开户银行所在地</text>
</picker>
</view>
<view class="form-item">
<input class="form-item--input" placeholder="开户银行预留手机号"/>
</view>
<view class="image-list" v-if="jfr_idbfile!=''">
<view class="image-preview" v-for="(image, imageIndex) in jfr_idbfile[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('jfr_idbfile')">营业执照/事业单位法人证书扫描件</button>
</view>
<view class="form-item">
<button class="form-item--input">法人身份证正反面扫描件（指纹或盖章）</button>
</view>
<div class="form-item">
<button class="form-item--input">门头照</button>
</div>
<!-- 推荐中介服务机构 -->
<div class="form-item">
<picker mode="selector" :range="industryList" range-key="name" :value="idIndex"
@change="onChangeIndustry">
<text v-if="idIndex > -1">{{ industryList[idIndex].name }}</text>
<text v-else class="col-80">推荐中介服务机构</text>
</picker>
</div>
<view class="form-item">
<input placeholder="身份"/>
</view>
<view class="form-item">
<view class="u-form-item--left">认证费用</view>
</view>
<!-- 隐私政策等 -->
<view class="privacy">
<checkbox :checked="isTick" color="#4399ff" class="ckbox" @click="readpri"></checkbox>
<view class="">
我已阅读并同意网站的 《<text class="atxt" @click="gotopage('private')">隐私政策</text> 》和
《<text class="atxt" @click="gotopage('prototal')">用户注册协议</text>》
</view>
</view>
<!-- 提交按钮 -->
<view class="vf-button" @click="handleLogin">
<text>提交认证</text>
</view>
</view>
</view>
<!-- step 4 -->
</view>
</template>
<script>
// 认证api
import * as VerifyApi from '@/api/verify'
import * as cityjson from 'utils/json/city.json'
import region from 'utils/json/pca.json';
//
//const citydata = cityjson
export default {
data() {
return {
// 认证步骤
step:3,
// 当前标签索引
curvf: 0,
// 需要认证的类型
vfindex:0,
//统一社会组织代码
Organizationcode:"",
// 用户角色 默认代办
sfval:10,
// 经办人受权书
dbsqfile:"",
//机构名称
name:"",
//经办人授权委托书
jfr_entfile:[],
// 经办人身份证
jfr_idafile:[],
jfr_idbfile:[],
// 行业id
industryType:0,
// 行业列表
industryList: [],
// 选择的物流公司索引
idIndex: -1,
// 城市列表
citydata:[],
// 城市索引
cityidx:-1,
// 省区地址
regionProvince:"",
// 详细地址
address:"",
// 请选择省/市/区
regionStr:"请选择省/市/区",
//选择省市区的下标Index 传则默认选中传递的
regionIndex: [0, 0, 0],
// 处理后的数组
region: [[],[],[]],
//原数组
oldRegion: region,
}
},
mounted() {
// 页面初始化
this.getIndustList()
//
//this.citydata = cityjson
},
created() {
let provinceArr = [];
let cityArr = [];
this.oldRegion.map((item, index) => {
this.region[0].push({
name: item.name,
code: item.code
});
if (this.previnceId == item.code) {
provinceArr = item.children;
this.regionIndex[0] = index;
}
})
// console.log(provinceArr);
provinceArr.map((item, index) => {
this.region[1].push({
name: item.name,
code: item.code
});
if (this.cityId == item.code) {
cityArr = item.children;
this.regionIndex[1] = index;
}
})
cityArr.map((item, index) => {
this.region[2].push({
name: item.name,
code: item.code
});
if (this.countyId == item.code) {
this.regionIndex[2] = index;
}
})
if (this.isRevise) {
this.regionStr = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[1]].name + ' ' +
this.region[2][this.regionIndex[2]].name;
} else {
this.regionStr = '请选择省市区';
}
},
methods: {
// 身份选择
vfselitem(item){
this.vfindex = item
},
//
gotostep(step){
this.step = step
},
//检验统一社会信用代码
chkinput(){
let Code = this.Organizationcode
if(Code==""){
this.$toast("统一社会信用代码不能为空")
return false
}
// 社团统一编码
const patrn = /^[0-9A-Z]+$/
if(Code.length!=18 || patrn.test(Code) ==false){
this.$toast("统一社会信用代码格式不对")
return false;
}else{
let Ancode; //统一社会信用代码的每一个值
let Ancodevalue; //统一社会信用代码每一个值的权重
let total = 0;
const weightedfactors = [1, 3, 9, 27, 19, 26, 16, 17, 20, 29, 25, 13, 8, 24, 10, 30, 28,]; //加权因子
const str = "0123456789ABCDEFGHJKLMNPQRTUWXY";
//不用I、O、S、V、Z
for (let i = 0; i < Code.length - 1; i++) {
Ancode = Code.substring(i, i + 1);
Ancodevalue = str.indexOf(Ancode);
total = total + Ancodevalue * weightedfactors[i];
//权重与加权因子相乘之和
}
let logiccheckcode = 31 - (total % 31);
if (logiccheckcode == 31) {
logiccheckcode = 0;
}
let Str = "0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,J,K,L,M,N,P,Q,R,T,U,W,X,Y";
let Array_Str = Str.split(",");
logiccheckcode = Array_Str[logiccheckcode];
let checkcode = Code.substring(17, 18);
if (logiccheckcode != checkcode) {
this.$toast("统一社会信用代码格式不对")
return false;
} else {
this.step =3
console.info("yes");
}
}
},
// 身份选择
selsf(val){
this.sfval = val
},
// 行业列表
getIndustList(){
const app = this
return new Promise((resolve, reject) => {
VerifyApi.getIndustry()
.then(result => {
app.industryList = result.data
//app.expressList = result.data.list
resolve()
})
.catch(reject)
})
},
// 选择物流公司
onChangeIndustry(e) {
console.log("e",e)
const curIndex = e.detail.value
this.idIndex = curIndex
// console.log("curIndustry",this.industryList[curIndex])
this.industryType = this.industryList[curIndex].industryId
// console.log(this.industryType)
},
// +++++++++++++++++++++++++++
pickerChange(e) {
// console.log(e, '1');
this.regionIndex = e.detail.value;
this.regionStr = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[1]].name + ' ' +
this.region[2][this.regionIndex[2]].name;
// 组件传值
this.$emit('region', [this.region[0][this.regionIndex[0]].name , this.region[1][this.regionIndex[1]].name,
this.region[2][this.regionIndex[2]].name]);
},
pickerColumnchange(e) {
if (e.detail.column === 0) {
// 声明城市数组
let cityArr = [];
let countyArr = [];
// 设置下标
this.regionIndex = [e.detail.value, 0, 0];
// 改变城市列表
this.region[1] = this.oldRegion[e.detail.value].children.map(item => {
cityArr.push({
name: item.name,
code: item.code
});
})
this.$set(this.region, 1, cityArr);
// 改变县区列表
this.oldRegion[e.detail.value].children[0].children.map(item => {
countyArr.push({
name: item.name,
code: item.code
});
})
this.$set(this.region, 2, countyArr);
}
if (e.detail.column === 1) {
this.regionIndex[1] = e.detail.value;
this.regionIndex[2] = 0;
let countyArr = [];
this.oldRegion[this.regionIndex[0]].children[this.regionIndex[1]].children.map(item => {
countyArr.push({
name: item.name,
code: item.code
});
})
this.$set(this.region, 2, countyArr);
}
if (e.detail.column === 2) {
this.regionIndex[2] = e.detail.value;
}
},
// ++++++++++++++++++++++++++
// 选择图片
chooseImage( item) {
const app = this
const oldImageList = app.$data[item]
// 选择图片
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success({ tempFiles }) {
//tempFiles = [{path:'xxx', size:100}]
//app.formData[index].imageList = oldImageList.concat(tempFiles)
//oldImageList.concat(tempFiles)
oldImageList.push(tempFiles)
}
});
console.log(oldImageList.length)
},
// 删除图片
deleteImage(index, imageIndex) {
this.formData[index].imageList.splice(imageIndex, 1)
},
// 上传图片
uploadFile() {
const app = this
const { formData } = app
// 整理上传文件路径
const files = []
formData.forEach((item, index) => {
if (item.content.trim() && item.imageList.length) {
const images = item.imageList.map(image => image)
files.push({ formDataIndex: index, images })
}
})
// 批量上传
return new Promise((resolve, reject) => {
Promise.all(files.map((file, index) => {
return new Promise((resolve, reject) => {
VerifyApi.upload(file.images)
.then(fileIds => {
app.formData[index].uploaded = fileIds
resolve(fileIds)
})
.catch(reject)
})
}))
.then(resolve, reject)
})
}
}
}
</script>
<style lang="scss" scoped>
.orgvzone{
background: #fff;
margin-bottom: 36rpx;
.vfbox{
width: 90%;
margin: 0rpx auto;
padding: 10rpx;
.vftit{
font-size: 36rpx;
font-weight: 600;;
}
.vfitem{
font-size: 30rpx;
line-height: 1.8;
margin: 30rpx auto;
border:2rpx solid #eee;
border-radius: 10rpx;
padding: 16rpx;
.vfi-tit{
font-size: 34rpx;
line-height: 80rpx;
padding-left: 22rpx;
}
.vfi-desc{
background-color: #FEFFE8;
border: 1px solid #CFAF0F;
padding: 10px 8px;
color: #444444;
border-radius: 12rpx;
text-indent: 36rpx;
}
&:hover{
background-color: #487AEE;
color: #fff;
}
&.selected{
background-color: #487AEE;
color: #fff;
}
}
// 按钮
.vfbtn{
button{
background: #487AEE;
color: #fff;
}
}
.ver-form{
// todo o
}
.sfsel{
float: left;
width: 100%;
.sf-tit{
width: 20%;
padding: 10rpx 0;
display: flex;
flex-direction: center;
}
.sf-item{
background: #EAEAEA;
width: 80%;
display: flex;
text-align: center;
color: #333;
border-radius: 12rpx;
.sfiv{
width: 50%;
padding: 10rpx;
&.active{
border-radius: 12rpx;
background: #487AEE;
color: #fff;
}
}
}
}
// 输入框元素
.form-item {
display: flex;
padding: 18rpx;
border-bottom: 1rpx solid #f3f1f2;
margin-bottom: 30rpx;
height: 96rpx;
&--input {
font-size: 28rpx;
letter-spacing: 1rpx;
flex: 1;
height: 100%;
}
&--parts {
min-width: 100rpx;
height: 100%;
}
}
// 登录按钮
.vf-button {
width: 100%;
height: 86rpx;
margin-top: 80rpx;
background: linear-gradient(to right, #242e4b, #242e4b);
color: #fff;
// border-radius: 80rpx;
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
letter-spacing: 5rpx;
display: flex;
justify-content: center;
align-items: center;
}
// 协议
.privacy{
display: flex;
margin-top: 10rpx;
.ckbox{
border-radius: 50%;
}
.atxt{
color: #4399ff;
}
}
.image-list {
display: flex;
padding: 0 20rpx;
margin-top: 20rpx;
margin-bottom: -20rpx;
&:after {
clear: both;
content: " ";
display: table;
}
.image {
display: block;
width: 100%;
height: 100%;
}
.image-picker,
.image-preview {
width: 196rpx;
height: 196rpx;
margin-right: 30rpx;
margin-bottom: 30rpx;
float: left;
&:nth-child(3n+0) {
margin-right: 0;
}
}
.image-picker {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1rpx dashed #ccc;
color: #ccc;
.choose-icon {
font-size: 48rpx;
margin-bottom: 6rpx;
}
.choose-text {
font-size: 24rpx;
}
}
.image-preview {
position: relative;
.image-delete {
position: absolute;
top: -15rpx;
right: -15rpx;
height: 42rpx;
width: 42rpx;
line-height: 42rpx;
background: rgba(0, 0, 0, 0.64);
border-radius: 50%;
color: #fff;
font-weight: bolder;
font-size: 22rpx;
z-index: 10;
text-align: center;
}
}
}
}
}
</style>