效果圖：
HTML部分代碼：
<cube-form-group style="background: #FFFFFF;">
<cube-form-item :field="fields[0]"></cube-form-item>
<cube-form-item :field="fields[1]"></cube-form-item>
<cube-form-item :field="fields[2]" class="cube-form-none-border">
<div class="upload-box">
<p>上傳營業執照照片</p>
<cube-upload
ref="businessLicenseUrl"
v-model="model.businessLicenseUrl"
:action="action + '?type=3&code=企業統一社會信用代碼'"
@files-added="addedHandler('businessLicenseUrl')"
@file-error="errHandler"
>
<div class="clear-fix">
<cube-upload-file
v-for="(file, i) in model.businessLicenseUrl"
:file="file"
:key="i"
></cube-upload-file>
<cube-upload-btn :multiple="false">
<div>
<i></i>
<p>上傳營業執照照片</p>
</div>
</cube-upload-btn>
</div>
</cube-upload>
</div>
</cube-form-item>
<div class="form-cap"></div>
<cube-form-item :field="fields[3]"></cube-form-item>
<cube-form-item :field="fields[4]"></cube-form-item>
<div class="upload-double">
<cube-form-item :field="fields[5]">
<div class="upload-box">
<p>上傳法人身份證</p>
<cube-upload
ref="legalPersonIdCardFrontUrl"
v-model="model.legalPersonIdCardFrontUrl"
:action="action + '?type=1&code=企業統一社會信用代碼'"
@files-added="addedHandler('legalPersonIdCardFrontUrl')"
@file-error="errHandler"
>
<div class="clear-fix">
<cube-upload-file
v-for="(file, i) in model.legalPersonIdCardFrontUrl"
:file="file"
:key="i"
></cube-upload-file>
<cube-upload-btn :multiple="false">
<div>
<i></i>
<p>上傳法人身份證正面照片</p>
</div>
</cube-upload-btn>
</div>
</cube-upload>
</div>
</cube-form-item>
<cube-form-item :field="fields[6]">
<cube-upload
ref="legalPersonIdCardBackUrl"
v-model="model.legalPersonIdCardBackUrl"
:action="action + '?type=2&code=企業統一社會信用代碼'"
@files-added="addedHandler('legalPersonIdCardBackUrl')"
@file-error="errHandler"
>
<div class="clear-fix">
<cube-upload-file
v-for="(file, i) in model.legalPersonIdCardBackUrl"
:file="file"
:key="i"
></cube-upload-file>
<cube-upload-btn :multiple="false">
<div>
<i></i>
<p>上傳法人身份證反面照片</p>
</div>
</cube-upload-btn>
</div>
</cube-upload>
</cube-form-item>
</div>
<div class="form-cap"></div>
<cube-form-item :field="fields[7]"></cube-form-item>
<cube-form-item :field="fields[8]"></cube-form-item>
<cube-form-item :field="fields[9]"></cube-form-item>
<cube-form-item :field="fields[10]"></cube-form-item>
<cube-form-item :field="fields[11]" class="cube-form-none-border">
<cube-upload
ref="controlPersonIdCardFrontUrl"
v-model="model.controlPersonIdCardFrontUrl"
:action="action + '?type=4&code=企業統一社會信用代碼'"
@files-added="addedHandler('controlPersonIdCardFrontUrl')"
@file-error="errHandler"
class="cube-upload-big"
>
<div class="clear-fix">
<cube-upload-file
v-for="(file, i) in model.controlPersonIdCardFrontUrl"
:file="file"
:key="i"
></cube-upload-file>
<cube-upload-btn :multiple="false">
<div>
<i></i>
<p>上傳實際控制人身份證正面照片（控制人爲企業，上傳營業執照正本）</p>
</div>
</cube-upload-btn>
</div>
</cube-upload>
</cube-form-item>
<cube-form-item :field="fields[12]" class="cube-form-none-border">
<cube-upload
ref="controlPersonIdCardBackUrl"
v-model="model.controlPersonIdCardBackUrl"
:action="action + '?type=5&code=企業統一社會信用代碼'"
@files-added="addedHandler('controlPersonIdCardBackUrl')"
@file-error="errHandler"
class="cube-upload-big"
>
<div class="clear-fix">
<cube-upload-file
v-for="(file, i) in model.controlPersonIdCardBackUrl"
:file="file"
:key="i"
></cube-upload-file>
<cube-upload-btn :multiple="false">
<div>
<i></i>
<p>上傳實際控制人身份證反面照片（控制人爲企業，上傳營業執照副本）</p>
</div>
</cube-upload-btn>
</div>
</cube-upload>
</cube-form-item>
<div class="form-cap"></div>
<cube-form-item :field="fields[13]"></cube-form-item>
<cube-form-item :field="fields[14]">
<drawer-address @drawerChange="getDrawerVal" :placeholder="companyOfficeAddress"></drawer-address>
</cube-form-item>
<cube-form-item :field="fields[15]"></cube-form-item>
<cube-form-item :field="fields[16]"></cube-form-item>
<cube-form-item :field="fields[17]">
<drawer-address @drawerChange="getDrawerVal" :placeholder="companyRegisterAddress"></drawer-address>
</cube-form-item>
<cube-form-item :field="fields[18]"></cube-form-item>
<cube-form-item :field="fields[19]" class="data-button-box">
<cube-button
:light="true"
@click="showStartDatePicker"
:class="model.businessStart ? '' : 'data-button'"
>{{ model.businessStart || '經營期限（起）' }}</cube-button>
<span class="data-line"></span>
<cube-button
:light="true"
@click="showEndDatePicker"
:class="model.businessStart ? '' : 'data-button'"
>{{ model.businessEnd || '經營期限（止）' }}</cube-button>
<date-picker
ref="startDatePicker"
:min="[2010, 1, 1]"
:max="[2030, 1, 1]"
:placeholder="model.businessStart || '經營期限（起）'"
@select="dateStartSelectHandler"
></date-picker>
<date-picker
ref="endDatePicker"
:min="[2010, 1, 1]"
:max="[2030, 1, 1]"
:placeholder="model.businessEnd || '經營期限（止）'"
@select="dateEndSelectHandler"
></date-picker>
</cube-form-item>
<cube-form-item :field="fields[20]"></cube-form-item>
<cube-form-item>
<div
@click="goinInstitutions"
:class="openOutlets ? '' : 'form-institutions'"
>{{ getInstitutionsVal || institutionsText }}</div>
</cube-form-item>
<cube-form-item :field="fields[21]"></cube-form-item>
<cube-form-item :field="fields[22]"></cube-form-item>
<cube-form-item :field="fields[23]"></cube-form-item>
<div class="upload-double">
<cube-form-item :field="fields[24]">
<div class="upload-box">
<p>上傳經辦人身份證</p>
<cube-upload
ref="operatorPersonIdCardFrontUrl"
v-model="model.operatorPersonIdCardFrontUrl"
:action="action + '?type=6&code=企業統一社會信用代碼'"
@files-added="addedHandler('operatorPersonIdCardFrontUrl')"
@file-error="errHandler"
>
<div class="clear-fix">
<cube-upload-file
v-for="(file, i) in model.operatorPersonIdCardFrontUrl"
:file="file"
:key="i"
></cube-upload-file>
<cube-upload-btn :multiple="false">
<div>
<i></i>
<p>上傳經辦人身份證正面照片</p>
</div>
</cube-upload-btn>
</div>
</cube-upload>
</div>
</cube-form-item>
<cube-form-item :field="fields[25]">
<cube-upload
ref="operatorPersonIdCardBackUrl"
v-model="model.operatorPersonIdCardBackUrl"
:action="action + '?type=7&code=企業統一社會信用代碼'"
@files-added="addedHandler('operatorPersonIdCardBackUrl')"
@file-error="errHandler"
>
<div class="clear-fix">
<cube-upload-file
v-for="(file, i) in model.operatorPersonIdCardBackUrl"
:file="file"
:key="i"
></cube-upload-file>
<cube-upload-btn :multiple="false">
<div>
<i></i>
<p>上傳經辦人身份證反面照片</p>
</div>
</cube-upload-btn>
</div>
</cube-upload>
</cube-form-item>
</div>
<div class="form-cap"></div>
<cube-form-item :field="fields[26]"></cube-form-item>
<cube-form-item :field="fields[27]" class="security-input">
<cube-input v-model="model.securityCode"></cube-input>
<span
:class="showCode ? 'appoint-form-butnot' : ''"
v-show="showCode"
@click="getCode"
>獲取驗證碼</span>
<span v-show="!showCode" class="count" style="color: #666666;">{{ count }} s</span>
</cube-form-item>
</cube-form-group>
<cube-form-item class="agreement-box cube-form-none-border">
<label for="input">
<input id="input" type="radio" @input="changeFlag" /> 同意簽署
</label>
<span class="agreement-span" @click="goinCFCA">《CFCA數字證書服務協議》</span>
<span class="agreement-span" @click="goinAgreement">《安心籤平臺服務協議》</span>
<span class="agreement-span" @click="goinClause">《安心籤平臺隱私條款》</span>
<span class="agreement-span" @click="goinAccredit">《安心籤開戶及管理授權書》</span>
</cube-form-item>
<cube-form-group>
<!-- @click="submitClick" -->
<div class="approve-form-submit">
<cube-button type="submit" @click="submitClick">立即申請</cube-button>
</div>
</cube-form-group>
</cube-form>
JS部分代碼：
/* eslint-disable */
let fields = {
input: function inputForm(modelKey, props, pattern) {
return {
type: "input",
modelKey: modelKey,
props,
rules: {
required: true,
pattern: pattern
}
};
},
upload: function uploadForm(modelKey, props) {
return {
type: "upload",
modelKey: modelKey,
props,
events: {
"file-removed": (...args) => {
console.log("file removed", args);
}
},
rules: {
required: true,
uploaded: (val, config) => {
// console.log(val.length)
return Promise.all(
val.length &&
val.map((file, i) => {
return new Promise((resolve, reject) => {
if (file.uploadedUrl) {
return resolve();
}
// fake request
setTimeout(() => {
if (i % 2) {
reject(new Error());
} else {
file.uploadedUrl = "uploaded/url";
resolve();
}
}, 1000);
});
})
).then(() => {
return true;
});
}
},
messages: {
uploaded: "上傳失敗"
}
};
},
select: function selectForm(modelKey, props) {
return {
type: "select",
modelKey: modelKey,
props,
rules: {
required: true
}
};
},
textarea: function textareaForm(modelKey, props) {
return {
type: "textarea",
modelKey: modelKey,
props,
rules: {
required: true
},
debounce: 200
};
},
radio: function radioForm(modelKey, props) {
return {
type: "radio-group",
modelKey: modelKey,
// label: 'Radio',
props,
rules: {
required: true
}
};
}
};
export default fields;
< script type = "text/ecmascript-6" >
/* eslint-disable */
import utils from "../../assets/utils.js";
import CubePage from "../../components/cube-page.vue";
import DatePicker from "../../components/date-picker.vue";
import DrawerAddress from "../../components/drawer-address.vue";
import Global from "../../assets/global.js";
import fields from "../../common/fields.js";
let cardReg = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/;
let creditReg = /[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g;
let cardCreditReg = /^[0-9A-Z]{2}\d{6}[0-9A-Z]{10}$/;
let emailReg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
let chineseReg = /^[\u4e00-\u9fa5]+$/;
let addressReg = /[^\s]/;
let phoneReg = /^1(3|4|5|7|8)\d{9}$/;
let securityReg = /^\d{6}$/;
export default {
data() {
return {
action: "***place/appointment/upload",
hasData: true,
list: [],
affixList: ["同意簽署"],
title: "在線預約",
preventTap: true, //防止多次點擊
isIPhoneX: Global.config.isIPhoneX(),
isIOS: !!Global.config.ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
showCustomTitle: true,
showWhiteTitle: false,
toastText: "",
showToast: false,
validity: {},
valid: undefined,
companyOfficeAddress: "請選擇企業辦公地址",
companyRegisterAddress: "請選擇企業註冊地址",
model: {
entName: "",
organizationCode: "",
businessLicenseUrl: [],
legalPersonName: "",
legalCertCode: "",
legalPersonIdCardFrontUrl: [],
legalPersonIdCardBackUrl: [],
controlPersonType: "",
controlPersonName: "",
controlPersonCertType: "",
controlPersonCertCode: "",
controlPersonIdCardFrontUrl: [],
controlPersonIdCardBackUrl: [],
entSize: "",
companyOfficeAddress: "",
businessAddress: "",
companyRegisterAddress: "",
legalAddress: "",
manageDate: "",
businessStart: "",
businessEnd: "",
businessScope: "",
entEmail: "",
operatorPersonName: "",
operatorCertCode: "",
operatorPersonIdCardFrontUrl: [],
operatorPersonIdCardBackUrl: [],
operatorMobile: "",
securityCode: ""
},
fields: [
fields.input(
"entName", {
placeholder: "請輸入準確的企業名稱",
maxlength: 50
},
/^[a-zA-Z\u4e00-\u9fa5]+$/
),
fields.input(
"organizationCode", {
placeholder: "請輸入準確的統一社會信用代碼",
maxlength: 18
},
creditReg
),
fields.upload("businessLicenseUrl", {
multiple: false,
max: 1
}),
fields.input(
"legalPersonName", {
placeholder: "請輸入準確的法人姓名",
maxlength: 20
},
chineseReg
),
fields.input(
"legalCertCode", {
placeholder: "請輸入準確的法人身份證",
maxlength: 18
},
cardReg
),
fields.upload("legalPersonIdCardFrontUrl", {
multiple: false,
max: 1
}),
fields.upload("legalPersonIdCardBackUrl", {
multiple: false,
max: 1
}),
fields.select("controlPersonType", {
options: [{
value: "01",
text: "個人"
},
{
value: "02",
text: "企業"
}
],
placeholder: "請選擇準確的實際控制人性質"
}),
fields.input(
"controlPersonName", {
placeholder: "請輸入準確的實際控制人名稱",
maxlength: 20
},
chineseReg
),
fields.select("controlPersonCertType", {
options: [{
value: 1,
text: "居民身份證"
},
{
value: 2,
text: "統一社會信用代碼"
}
],
placeholder: "請選擇準確的實際控制人證件類型"
}),
fields.input(
"controlPersonCertCode", {
placeholder: "請輸入準確的實際控制人證件號碼",
maxlength: 18
},
cardCreditReg
),
fields.upload("controlPersonIdCardFrontUrl", {
multiple: false,
max: 1
}),
fields.upload("controlPersonIdCardBackUrl", {
multiple: false,
max: 1
}),
fields.select("entSize", {
options: [{
value: 0,
text: "大型企業"
},
{
value: 1,
text: "中型企業"
},
{
value: 2,
text: "小型企業"
},
{
value: 3,
text: "微型企業"
},
{
value: 4,
text: "其它"
}
],
placeholder: "請選擇準確的企業規模"
}),
]
},
methods: {
addedHandler(val) {
let file = this.model[val];
file && this.$refs[val].removeFile(file);
},
errHandler(file) {
this.$createToast({
type: "warn",
txt: "Upload fail",
time: 1000
}).show();
},
}
}
CSS部分代碼：
>>> input::-webkit - input - placeholder {
color: #CCCCCC;
font - family: PingFangSC - Regular;
}
>>>
textarea::-webkit - input - placeholder {
color: #CCCCCC;
font - family: PingFangSC - Regular;
}
.CustomerApprove {
background: #FAFAFA;
button {
background: #FFFFFF;
box - shadow: none;
}
.appoint - banner {
width: 100 % ;
height: 150 px;
background: url('https://img.cdn.zhaoshang800.com/img/2019/10/28/broker/5d49ff75-f5f0-4c44-8e68-6b574ae72bec.png') no - repeat;
background - size: cover;
padding - top: 45 px;
box - sizing: border - box;
p {
font - size: 18 px;
color: #FFFFFF;
line - height: 28 px;
padding - left: 21 px;
letter - spacing: 1 px;
padding - bottom: 5 px;
}
}
.radio - box {
top: -10 px;
.radio - top {
padding - top: 10 px;
background: #FFFFFF;
border - top - left - radius: 10 px;
border - top - right - radius: 10 px;
}
.upload - box {
p {
padding - top: 10 px;
}
}
.upload - double {
display: flex;
align - items: flex - end;
justify - content: space - between;
margin: 0 0.4 rem;
background: #FFFFFF;
.cube - form - item {
margin: 0;
padding: 0;
}
.cube - form - item::after {
border: none;
}
}
.data - button {
color: #ccc;
}
.form - institutions {
color: #ccc;
}
.agreement - box {
margin - top: 20 px!important;
background: none!important;
.agreement - span {
color: #6C8DAA;
cursor: pointer;
}
}
.agreement-box ::after {
border: none;
}
.approve-form-submit {
width: 100%;
margin-top: 40px;
margin-bottom: 75px;
text-align: center;
button {
background-image: linear-gradient(135deg, # FC5D6A 0 % ,
#DD2534 100 % );
border - radius: 50 px;
width: 80 % ;
margin - left: 10 % ;
}
}
}
>>>
.cube - form {
background: none;
.cube - drawer {
position: fixed;
}
.cube - form - item {
background: #FFFFFF;
padding: 0;
margin: 0 0.4 rem;
}
.cube - form - item::after {
border: 1 px solid# D8D8D8;
}
.cube - form - none - border::after {
border: none;
}
.data - button - box {
.cube - validator - content {
display: flex;
align - items: center;
justify - content: space - between;
}
.cube - btn {
padding: 10 px 10 px;
width: 40 % ;
background: #FAFAFA;
}
.data - line {
display: block;
width: 20 px;
height: 2 px;
background: #000000;
}
}
.cube-validator-content {
display: flex;
align-items: center;
}
.cube-select {
width: 100%;
}
.cube-btn {
font-size: 14px;
}
.cube-input {
width: 100%;
}
.security-input .cube-input {
width: 70%;
}
.security-input span {
display: inline-block;
width: 30%;
text-align: center;
}
}
>>>.cube-textarea-wrapper {
width: 100%;
}
>>>.cube-upload {
width: 168px;
height: 105px;
// width 100%
margin: 10px 0;
border: 1px dashed # DFDBDB;
.clear - fix {
width: 168 px;
height: 105 px;
.cube - upload - file,
.cube - upload - btn {
margin: 0;
height: 105 px;
}
.cube - upload - file {
margin: 0;
+
.cube - upload - btn {
margin - top: -105 px;
opacity: 0;
}
}
.cube - upload - file - def {
width: 100 % ;
height: 100 % ;
.cubeic - wrong {
display: none;
}
}
.cube - upload - btn {
display: flex;
align - items: center;
justify - content: center;
>
div {
text - align: center;
width: 100 % ;
}
i {
display: inline - flex;
align - items: center;
justify - content: center;
width: 56 px;
height: 41 px;
margin - bottom: 10 px;
font - size: 32 px;
line - height: 1;
font - style: normal;
color: #fff;
background: url('https://img.cdn.zhaoshang800.com/img/2020/01/02/broker/95fd0077-8e3c-4885-8ffb-614eb6568747.png');
background - size: 100 % 100 % ;
}
p {
color: #999999;
font-size: 12px;
width: 80%;
margin-left: 10%;
padding-top: 0;
}
}
}
}
.cube-upload-big {
width: 100%;
height: 210px;
.clear-fix {
width: 100%;
height: 210px;
.cube-upload-file, .cube-upload-btn {
margin: 0;
height: 210px;
}
.cube-upload-btn {
p {
width: 60%;
margin-left: 20%;
}
}
.cube-upload-file {
margin: 0;
+ .cube-upload-btn {
margin-top: -210px;
opacity: 0;
}
}
}
}
}
