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.
929 lines
29 KiB
929 lines
29 KiB
<template> |
|
<view class="evan-form-show"> |
|
<view class="bottom-border"> |
|
<view class="left-border"><text class="mgl10">基本信息</text></view> |
|
</view> |
|
<uni-forms :value="formData" ref="form" validate-trigger="bind" err-show-type="toast"> |
|
<uni-forms-item required name="cusType" label="客户类型"> |
|
<uni-data-checkbox v-model="cusType" :localdata="cusTypeList"></uni-data-checkbox> |
|
</uni-forms-item> |
|
<uni-forms-item name="code" required label="客户编号"> |
|
<uni-easyinput type="text" :inputBorder="true" v-model="enterpriseForm.code" placeholder="请输入客户编号"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="name" required label="客户名称"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.name" placeholder="客户名称"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="socialUnifiedCode" required label="社会统一代码"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.socialUnifiedCode" placeholder="社会统一代码"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="联系电话"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="联系电话"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="注册时间"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="注册时间"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="注册资金(万元)"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="注册资金"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="注册地址"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="注册地址"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="员工人数"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="员工人数"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="经营地址"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="经营地址"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="业务类别"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="业务类别"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="经营范围"> |
|
<uni-easyinput disabled type="textarea" v-model="enterpriseForm.remarks" placeholder="经营范围"></uni-easyinput> |
|
</uni-forms-item> |
|
</uni-forms> |
|
|
|
<view class="bottom-border"> |
|
<view class="left-border"><text class="mgl10">法人信息</text></view> |
|
</view> |
|
|
|
<uni-forms :value="enterpriseFrom" ref="form" validate-trigger="bind" err-show-type="toast"> |
|
<uni-forms-item required name="cusType" label="姓名"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.name" placeholder="姓名"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item required name="gender" label="性别"> |
|
<uni-data-checkbox disabled v-model="enterpriseFrom.gender" :localdata="genderList"></uni-data-checkbox> |
|
</uni-forms-item> |
|
<uni-forms-item name="name" required label="身份证号"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.name" placeholder="身份证号"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="socialUnifiedCode" required label="联系电话"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.socialUnifiedCode" placeholder="联系电话"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="户口所在地"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="户口所在地"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="家庭住址"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="家庭住址"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item required name="isExist" label="是否存在关联人"> |
|
<uni-data-checkbox v-model="enterpriseForm.isExist" :localdata="isExistList"></uni-data-checkbox> |
|
</uni-forms-item> |
|
</uni-forms> |
|
|
|
<view class="bottom-border"> |
|
<view class="left-border"><text class="mgl10">关联人信息</text></view> |
|
</view> |
|
|
|
<view class="bottom-border"> |
|
<view class="left-border"><text class="mgl10">申请贷款相关信息</text></view> |
|
</view> |
|
|
|
<uni-forms :value="enterpriseFrom" ref="form" validate-trigger="bind" err-show-type="toast"> |
|
<uni-forms-item required name="cusType" label="申请额度(万元)"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.name" placeholder="申请额度"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="name" required label="申请期限"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.name" placeholder="申请期限"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="socialUnifiedCode" required label="贷款银行"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.socialUnifiedCode" placeholder="贷款银行"></uni-easyinput> |
|
<text>—</text> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.socialUnifiedCode" placeholder="分行名称"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="name" required label="贷款用途"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.name" placeholder="贷款用途"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item required name="enGuaranteeMeasures" label="反担保措施"> |
|
<uni-data-checkbox mode="list" v-model="enterpriseFrom.enGuaranteeMeasures" :localdata="easuresList"></uni-data-checkbox> |
|
</uni-forms-item> |
|
<uni-forms-item name="name" required label="反担保措施描述"> |
|
<uni-easyinput type="textarea" v-model="enterpriseForm.remarks" placeholder="请输入反担保措施描述"></uni-easyinput> |
|
</uni-forms-item> |
|
</uni-forms> |
|
|
|
<view class="bottom-border"> |
|
<view class="left-border"><text class="mgl10">资产信息</text></view> |
|
</view> |
|
|
|
<uni-forms :value="enterpriseFrom" ref="form" validate-trigger="bind" err-show-type="toast"> |
|
<uni-forms-item required name="cusType" label="资产评估报告(名称)"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.name" placeholder="资产评估报告(名称)"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="name" required label="资产评估编号"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.name" placeholder="资产评估编号"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="评估价值(万元)"> |
|
<uni-data-checkbox :inputVisble="true" :multiple="true" mode="list" v-model="enterpriseFrom.gender" :localdata="EvaluationList"></uni-data-checkbox> |
|
<view class="flex-end"> |
|
<text>合计</text> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="自动合计"></uni-easyinput> |
|
</view> |
|
</uni-forms-item> |
|
<uni-forms-item name="time" label="评估日期"> |
|
<uni-datetime-picker v-model="formData.time" :timestamp="true" @change="datetimeChange"></uni-datetime-picker> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="审计编号"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="审计编号"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="审计报告(名称)"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="审计报告(名称)"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="time" label="审计日期"> |
|
<uni-datetime-picker v-model="formData.time" :timestamp="true" @change="datetimeChange"></uni-datetime-picker> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="审计价值(万元)"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="审计价值"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="担保部期限"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="审计价值"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="担保部金额"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="审计价值"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="资产部期限"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="审计价值"></uni-easyinput> |
|
</uni-forms-item> |
|
<uni-forms-item name="phone" required label="资产部金额"> |
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="审计价值"></uni-easyinput> |
|
</uni-forms-item> |
|
</uni-forms> |
|
|
|
<view class="bottom-border"> |
|
<view class="left-border"><text class="mgl10">附件</text></view> |
|
</view> |
|
|
|
<view class="cu-bar bg-white"> |
|
<view class="action"> |
|
<text class="is-required">*</text> |
|
<text class="label-color">上传营业执照</text> |
|
</view> |
|
</view> |
|
<view class="cu-form-group"> |
|
<view class="grid col-4 grid-square flex-sub"> |
|
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]"> |
|
<image :src="imgList[index]" mode="aspectFill"></image> |
|
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"> |
|
<text class='cuIcon-close'></text> |
|
</view> |
|
</view> |
|
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4"> |
|
<text class='cuIcon-cameraadd'></text> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="cu-bar bg-white"> |
|
<view class="action"> |
|
<text class="is-required">*</text> |
|
<text class="label-color">上传法定代表人夫妻及企业实际经营者身份证附件</text> |
|
</view> |
|
</view> |
|
<view class="cu-form-group"> |
|
<view class="grid col-4 grid-square flex-sub"> |
|
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]"> |
|
<image :src="imgList[index]" mode="aspectFill"></image> |
|
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"> |
|
<text class='cuIcon-close'></text> |
|
</view> |
|
</view> |
|
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4"> |
|
<text class='cuIcon-cameraadd'></text> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="cu-bar bg-white"> |
|
<view class="action"> |
|
<text class="is-required">*</text> |
|
<text class="label-color">上传法定代表人夫妻户口本、结婚证（离婚证）</text> |
|
</view> |
|
</view> |
|
<view class="cu-form-group"> |
|
<view class="grid col-4 grid-square flex-sub"> |
|
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]"> |
|
<image :src="imgList[index]" mode="aspectFill"></image> |
|
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"> |
|
<text class='cuIcon-close'></text> |
|
</view> |
|
</view> |
|
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4"> |
|
<text class='cuIcon-cameraadd'></text> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="cu-bar bg-white"> |
|
<view class="action"> |
|
<text class="is-required">*</text> |
|
<text class="label-color">上传法定代表人身份证证明</text> |
|
</view> |
|
</view> |
|
<view class="cu-form-group"> |
|
<view class="grid col-4 grid-square flex-sub"> |
|
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]"> |
|
<image :src="imgList[index]" mode="aspectFill"></image> |
|
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"> |
|
<text class='cuIcon-close'></text> |
|
</view> |
|
</view> |
|
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4"> |
|
<text class='cuIcon-cameraadd'></text> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="cu-bar bg-white"> |
|
<view class="action"> |
|
<text class="is-required">*</text> |
|
<text class="label-color">上传公司章程</text> |
|
</view> |
|
</view> |
|
<view class="cu-form-group"> |
|
<view class="grid col-4 grid-square flex-sub"> |
|
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]"> |
|
<image :src="imgList[index]" mode="aspectFill"></image> |
|
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"> |
|
<text class='cuIcon-close'></text> |
|
</view> |
|
</view> |
|
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4"> |
|
<text class='cuIcon-cameraadd'></text> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="cu-bar bg-white"> |
|
<view class="action"> |
|
<text class="is-required">*</text> |
|
<text class="label-color">上传由会计师事务所审计的上一年度及本年度审计报告</text> |
|
</view> |
|
</view> |
|
<view class="cu-form-group"> |
|
<view class="grid col-4 grid-square flex-sub"> |
|
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]"> |
|
<image :src="imgList[index]" mode="aspectFill"></image> |
|
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"> |
|
<text class='cuIcon-close'></text> |
|
</view> |
|
</view> |
|
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4"> |
|
<text class='cuIcon-cameraadd'></text> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="cu-bar bg-white"> |
|
<view class="action"> |
|
<text class="is-required">*</text> |
|
<text class="label-color">上传企业信用报告</text> |
|
</view> |
|
</view> |
|
<view class="cu-form-group"> |
|
<view class="grid col-4 grid-square flex-sub"> |
|
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]"> |
|
<image :src="imgList[index]" mode="aspectFill"></image> |
|
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"> |
|
<text class='cuIcon-close'></text> |
|
</view> |
|
</view> |
|
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4"> |
|
<text class='cuIcon-cameraadd'></text> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="cu-bar bg-white"> |
|
<view class="action"> |
|
<text class="is-required">*</text> |
|
<text class="label-color">上传企业法人夫妇信用报告、实际经营者信用报告</text> |
|
</view> |
|
</view> |
|
<view class="cu-form-group"> |
|
<view class="grid col-4 grid-square flex-sub"> |
|
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]"> |
|
<image :src="imgList[index]" mode="aspectFill"></image> |
|
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"> |
|
<text class='cuIcon-close'></text> |
|
</view> |
|
</view> |
|
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4"> |
|
<text class='cuIcon-cameraadd'></text> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="cu-bar bg-white"> |
|
<view class="action"> |
|
<text class="is-required">*</text> |
|
<text class="label-color">上传征信业务授权书、承诺书</text> |
|
</view> |
|
</view> |
|
<view class="cu-form-group"> |
|
<view class="grid col-4 grid-square flex-sub"> |
|
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]"> |
|
<image :src="imgList[index]" mode="aspectFill"></image> |
|
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"> |
|
<text class='cuIcon-close'></text> |
|
</view> |
|
</view> |
|
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4"> |
|
<text class='cuIcon-cameraadd'></text> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="cu-bar bg-white"> |
|
<view class="action"> |
|
<text class="is-required">*</text> |
|
<text class="label-color">上传增值税纳税报表首表/完税证明</text> |
|
</view> |
|
</view> |
|
<view class="cu-form-group"> |
|
<view class="grid col-4 grid-square flex-sub"> |
|
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]"> |
|
<image :src="imgList[index]" mode="aspectFill"></image> |
|
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"> |
|
<text class='cuIcon-close'></text> |
|
</view> |
|
</view> |
|
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4"> |
|
<text class='cuIcon-cameraadd'></text> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="cu-bar bg-white"> |
|
<view class="action"> |
|
<text class="is-required">*</text> |
|
<text class="label-color">上传股东会会议纪要</text> |
|
</view> |
|
</view> |
|
<view class="cu-form-group"> |
|
<view class="grid col-4 grid-square flex-sub"> |
|
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]"> |
|
<image :src="imgList[index]" mode="aspectFill"></image> |
|
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"> |
|
<text class='cuIcon-close'></text> |
|
</view> |
|
</view> |
|
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4"> |
|
<text class='cuIcon-cameraadd'></text> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="cu-bar bg-white"> |
|
<view class="action"> |
|
<text class="is-required">*</text> |
|
<text class="label-color">上传反担保资料和评估报告</text> |
|
</view> |
|
</view> |
|
<view class="cu-form-group"> |
|
<view class="grid col-4 grid-square flex-sub"> |
|
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]"> |
|
<image :src="imgList[index]" mode="aspectFill"></image> |
|
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"> |
|
<text class='cuIcon-close'></text> |
|
</view> |
|
</view> |
|
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4"> |
|
<text class='cuIcon-cameraadd'></text> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="cu-bar bg-white"> |
|
<view class="action"> |
|
<text class="is-required">*</text> |
|
<text class="label-color">其他</text> |
|
</view> |
|
</view> |
|
<view class="cu-form-group"> |
|
<view class="grid col-4 grid-square flex-sub"> |
|
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]"> |
|
<image :src="imgList[index]" mode="aspectFill"></image> |
|
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"> |
|
<text class='cuIcon-close'></text> |
|
</view> |
|
</view> |
|
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4"> |
|
<text class='cuIcon-cameraadd'></text> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="foot-btn btn-rig pad-bt"> |
|
<button plain class="mini-btn round plain-btn" type="primary" size="mini" @click="goto('/pages/application/application')">返回</button> |
|
<button class="mini-btn round def-btn mar-lr" type="primary" size="mini" @click="goto('/pages/application/application')">保存</button> |
|
<button class="mini-btn round suc-btn" type="primary" size="mini" @click="goto('/pages/application/application')">提交</button> |
|
</view> |
|
|
|
<timeline></timeline> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import utils from '@/components/evan-form/utils.js' |
|
const CONTACT_INFO={ |
|
name:'', |
|
phone:'', |
|
duty:'' |
|
} |
|
export default { |
|
data() { |
|
return { |
|
cusTypeList: [{ |
|
text: '个人', |
|
value: '0' |
|
}, |
|
{ |
|
text: '企业', |
|
value: '1' |
|
}],//客户类型列表 |
|
cusType: '1', |
|
EvaluationList: [{ |
|
text: '房产', |
|
value: '0', |
|
InputValue: '' |
|
}, |
|
{ |
|
text: '车辆', |
|
value: '1', |
|
InputValue: '' |
|
}, |
|
{ |
|
text: '设备', |
|
value: '2', |
|
InputValue: '' |
|
}, |
|
{ |
|
text: '其他', |
|
value: '3', |
|
InputValue: '' |
|
}],//评估价值列表 |
|
employeeMsg: [{ |
|
name: '个人', |
|
value: '3' |
|
}, |
|
{ |
|
name: '企业', |
|
value: '4' |
|
}],//客户经理列表 |
|
genderList: [{ |
|
text: '男', |
|
value: 1 |
|
}, |
|
{ |
|
text: '女', |
|
value: 2 |
|
}],//性别列表 |
|
easuresList: [{ |
|
text: '第三方保证', |
|
value: 1 |
|
}, |
|
{ |
|
text: '抵押', |
|
value: 2 |
|
}, |
|
{ |
|
text: '个人无限责任连带', |
|
value: 3 |
|
}, |
|
{ |
|
text: '质押', |
|
value: 4 |
|
}], |
|
imgList: [], |
|
maritalList: ['未婚','已婚','离异','再婚'],//婚姻状况列表 |
|
educationList: ['本科','大专','高职','中专','其他'],//学历列表 |
|
isExistList: [{ |
|
text: '否', |
|
value: 0 |
|
}, |
|
{ |
|
text: '是', |
|
value: 1 |
|
}],//是否存在关联人列表 |
|
manager: '', |
|
enterpriseFrom: { |
|
maritalStatus: 0,//婚姻状况 |
|
gender: 1,//性别 |
|
education: 0, //学历 |
|
legalGender: 1, //关联人性别 |
|
isExistRelated: 0, //是否存在关联人 |
|
enGuaranteeMeasures: '' |
|
},//个人form |
|
enterpriseForm: {},//企业form |
|
hideRequiredAsterisk: false, |
|
// 表单的内容必须初始化 |
|
info: { |
|
name: '', |
|
email: '', |
|
desc: '', |
|
phone: '', |
|
sex: '', |
|
}, |
|
rules: { |
|
cusType: { |
|
required: true, |
|
message: '请选择客户' |
|
}, |
|
code: { |
|
required: true, |
|
message: '请选择客户编号' |
|
}, |
|
manager: { |
|
required: true, |
|
message: '请选择客户经理' |
|
}, |
|
name: { |
|
required: true, |
|
message: '请输入姓名' |
|
}, |
|
email: [{ |
|
required: true, |
|
message: '请输入邮箱' |
|
}, { |
|
type: 'email', |
|
message: '邮箱格式不正确' |
|
}], |
|
desc: [{ |
|
required: true, |
|
message: '请输入简介' |
|
}, |
|
{ |
|
min: 10, |
|
max: 30, |
|
message: '简介必须在10到30个字之间' |
|
} |
|
], |
|
phone: [{ |
|
required: true, |
|
message: '请输入手机号' |
|
}, |
|
{ |
|
validator: (rule, value, callback) => { |
|
// 注意这里如果用的是methods里的isMobilePhone将不生效 |
|
if (this.$utils.isMobilePhone(value)) { |
|
callback() |
|
} else { |
|
callback(new Error('手机号格式不正确')) |
|
} |
|
} |
|
}, |
|
// 或者这样也是可以的 |
|
// { |
|
// validator: this.isMobile |
|
// } |
|
], |
|
sex: { |
|
required: true, |
|
message: '请选择性别' |
|
} |
|
}, |
|
info2:{ |
|
name:'', |
|
email:'', |
|
phone:'' |
|
}, |
|
rules2:{ |
|
name: { |
|
required: true, |
|
message: '请输入姓名' |
|
}, |
|
email: [{ |
|
required: true, |
|
message: '请输入邮箱' |
|
}, { |
|
type: 'email', |
|
message: '邮箱格式不正确' |
|
}], |
|
phone:[{ |
|
required: true, |
|
message: '请输入手机号' |
|
}, |
|
{ |
|
pattern:'^1\\d{10}$', // 注意这里由于小程序的缘故正则表达式需要通过string的方式传递并且去除两边的斜杠，中间的斜杠变成两个斜杠 |
|
message:'手机号格式不正确' |
|
} |
|
] |
|
}, |
|
dynamicInfo:{ |
|
test1:'', |
|
test2:'', |
|
list:[{...CONTACT_INFO}] |
|
}, |
|
dynamicRules:{ |
|
test1:[{required:true,message:'请输入rule规则字段'},{min:4,max:8,message:'必须4-8位'}] |
|
}, |
|
showRuleParam:true, |
|
showRequiredParam:true, |
|
mobileRules:[{required:true,message:'请输入手机号'},{pattern:'^1\\d{10}$',message:'手机号格式不正确'}] // 注意这里由于小程序的缘故正则表达式需要通过string的方式传递并且去除两边的斜杠，中间的斜杠变成两个斜杠 |
|
} |
|
}, |
|
mounted() { |
|
// 这里必须放在mounted中，不然h5，支付宝小程序等会找不到this.$refs.form |
|
this.$refs.form.setRules(this.rules) |
|
}, |
|
methods: { |
|
//客户类型选择 |
|
cusChange(e) { |
|
this.cusType = e.detail.value |
|
}, |
|
//性别选择 |
|
genderChange(e) { |
|
this.personageForm.gender = e.detail.value |
|
}, |
|
//婚姻状况选择 |
|
maritalChange(e) { |
|
this.personageForm.maritalStatus = e.detail.value |
|
}, |
|
//学历选择 |
|
educationChange(e) { |
|
this.personageForm.education = e.detail.value |
|
}, |
|
//关联人性别选择 |
|
legalGenderChange(e) { |
|
this.personageForm.legalGender = e.detail.value |
|
}, |
|
isExistChange(e) { |
|
this.personageForm.isExistRelated = e.detail.value |
|
}, |
|
bindPickerChange: function(e) { |
|
// this.cusType = e.target.value |
|
}, |
|
save() { |
|
this.$refs.form.validate((res) => { |
|
if (res) { |
|
uni.showToast({ |
|
title: '验证通过' |
|
}) |
|
} |
|
}) |
|
}, |
|
promiseSave(){ |
|
this.$refs.form.validate().then((res)=>{ |
|
uni.showToast({ |
|
title: '验证通过' |
|
}) |
|
}).catch(()=>{ |
|
}) |
|
}, |
|
async asyncSave(){ |
|
try{ |
|
const result=await this.$refs.form.validate() |
|
if(result){ |
|
uni.showToast({ |
|
title: '验证通过' |
|
}) |
|
} |
|
} catch(e){ |
|
console.log(e) |
|
} |
|
}, |
|
saveForm2(){ |
|
this.$refs.form2.validate((res) => { |
|
if (res) { |
|
uni.showToast({ |
|
title: '验证通过' |
|
}) |
|
} |
|
}) |
|
}, |
|
utilsSave() { |
|
utils.validate(this.info, this.rules, (res, errors) => { |
|
if (res) { |
|
uni.showToast({ |
|
title: '验证通过' |
|
}) |
|
} |
|
}) |
|
}, |
|
validateSingle() { |
|
this.$refs.form.validateField('email', (res) => { |
|
if (res) { |
|
uni.showToast({ |
|
title: '验证通过' |
|
}) |
|
} |
|
}) |
|
}, |
|
validateMultiple() { |
|
this.$refs.form.validateField(['email', 'phone'], (res) => { |
|
if (res) { |
|
uni.showToast({ |
|
title: '验证通过' |
|
}) |
|
} |
|
}) |
|
}, |
|
isMobilePhone() { |
|
const reg = /^1\d{10}$/ |
|
if (reg.test(value)) { |
|
return true |
|
} |
|
return false |
|
}, |
|
isMobile(rule, value, callback) { |
|
if (this.$utils.isMobilePhone(value)) { |
|
callback() |
|
} else { |
|
callback(new Error('手机号格式不正确')) |
|
} |
|
}, |
|
sexChange(e) { |
|
this.info.sex = e.detail.value |
|
}, |
|
addContact(){ |
|
this.dynamicInfo.list.push({...CONTACT_INFO}) |
|
}, |
|
deleteContact(index){ |
|
this.dynamicInfo.list.splice(index,1) |
|
}, |
|
toggleRuleParam(){ |
|
this.showRuleParam=!this.showRuleParam |
|
}, |
|
toggleRequiredParam(){ |
|
this.showRequiredParam=!this.showRequiredParam |
|
}, |
|
dynamicSave(){ |
|
this.$refs.dynamicForm.validate((res)=>{ |
|
if(res){ |
|
uni.showToast({ |
|
title: '验证通过' |
|
}) |
|
} |
|
}) |
|
}, |
|
ViewImage(e) { |
|
uni.previewImage({ |
|
urls: this.imgList, |
|
current: e.currentTarget.dataset.url |
|
}); |
|
}, |
|
DelImg(e) { |
|
uni.showModal({ |
|
title: '提示', |
|
content: '确定要删除该文件吗？', |
|
cancelText: '取消', |
|
confirmText: '确定', |
|
success: res => { |
|
if (res.confirm) { |
|
this.imgList.splice(e.currentTarget.dataset.index, 1) |
|
} |
|
} |
|
}) |
|
}, |
|
ChooseImage() { |
|
uni.chooseImage({ |
|
count: 4, //默认9 |
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 |
|
sourceType: ['album'], //从相册选择 |
|
success: (res) => { |
|
if (this.imgList.length != 0) { |
|
this.imgList = this.imgList.concat(res.tempFilePaths) |
|
} else { |
|
this.imgList = res.tempFilePaths |
|
} |
|
} |
|
}); |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.evan-form-show { |
|
padding: 0 30rpx; |
|
background-color: #fff; |
|
|
|
.form-input { |
|
font-size: 28rpx; |
|
color: #333; |
|
text-align: right; |
|
width: 100%; |
|
box-sizing: border-box; |
|
height: 60rpx; |
|
&.textarea{ |
|
height: 240rpx; |
|
padding: 24rpx 0; |
|
text-align: left; |
|
} |
|
} |
|
|
|
.form-input-placeholder { |
|
font-size: 28rpx; |
|
color: #999; |
|
} |
|
|
|
&__button { |
|
width: 100%; |
|
height: 88rpx; |
|
border-radius: 8rpx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
padding: 0; |
|
font-size: 36rpx; |
|
color: #fff; |
|
margin-top: 20rpx; |
|
background-color: #2D87D5; |
|
|
|
&::before, |
|
&::after { |
|
border: none; |
|
} |
|
} |
|
|
|
.customize-form-item { |
|
&__label { |
|
font-size: 28rpx; |
|
color: #333; |
|
margin-bottom: 16rpx; |
|
} |
|
|
|
&__radio { |
|
display: flex; |
|
align-items: center; |
|
margin-bottom: 16rpx; |
|
|
|
&__text { |
|
font-size: 28rpx; |
|
color: #333; |
|
} |
|
} |
|
} |
|
} |
|
.label-color{ |
|
color: #00B9FF; |
|
} |
|
// 必填 |
|
.is-required { |
|
color: $uni-color-error; |
|
} |
|
|
|
|
|
|
|
.checklist-group { |
|
/* #ifndef APP-NVUE */ |
|
display: flex; |
|
/* #endif */ |
|
flex-direction: row; |
|
flex-wrap: wrap; |
|
} |
|
|
|
.checklist-box { |
|
/* #ifndef APP-NVUE */ |
|
display: flex; |
|
/* #endif */ |
|
flex-direction: row; |
|
align-items: center; |
|
margin: 10rpx 0; |
|
margin-right: 50rpx; |
|
} |
|
|
|
.checklist-content { |
|
/* #ifndef APP-NVUE */ |
|
display: flex; |
|
/* #endif */ |
|
flex: 1; |
|
flex-direction: row; |
|
align-items: center; |
|
justify-content: space-between; |
|
} |
|
|
|
.checklist-text { |
|
font-size: 28rpx; |
|
color: #333; |
|
margin-left: 10rpx; |
|
transition: color 0.2s; |
|
} |
|
|
|
.checkbox__inner { |
|
flex-shrink: 0; |
|
position: relative; |
|
border: 2rpx solid #DCDFE6; |
|
border-radius: 4rpx; |
|
box-sizing: border-box; |
|
width: 32rpx; |
|
height: 32rpx; |
|
background-color: #fff; |
|
z-index: 1; |
|
transition: border-color 0.1s; |
|
} |
|
|
|
.checkbox__inner-icon { |
|
border: 2rpx solid #fff; |
|
border-left: 0; |
|
border-top: 0; |
|
height: 16rpx; |
|
left: 10rpx; |
|
position: absolute; |
|
top: 2rpx; |
|
width: 6rpx; |
|
opacity: 0; |
|
transition: transform .2s; |
|
transform-origin: center; |
|
transform: rotate(40deg) scaleY(0.4); |
|
} |
|
</style>
|
|
|