1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858 |
- <template>
- <view class="body">
- <!-- 公共组件-每个页面必须引入 -->
- <public-module></public-module>
- <uni-group title="" class="carInfo">
- <uni-forms :rules="carRules" :value="carInfo" ref="carForm" validate-trigger="bind" err-show-type="toast"
- label-width="100">
- <uni-forms-item>
- <view class="title d-flex a-center j-sb font-md">
- <text class="font-weight">车辆信息</text>
- <view class="icon iconfont icon-hangshizhengshibie font-lg main-text-color"
- @tap="chooseImage('carInfo',1)" style="margin-right: 14px;"></view>
- </view>
- </uni-forms-item>
- <uni-forms-item label="车牌号: ">
- <input class="uni-input-input textColor" placeholder="暂未上牌" v-model="carInfo.licenseNo"
- placeholder-style="font-size:28upx" @input="upperCaseType('licenseNo')" />
- </uni-forms-item>
- <uni-forms-item name="frameNo" required label="车辆识别码:">
- <view class="d-flex a-center" style="height: 100%;">
- <input class="uni-input-input flex-1 textColor" placeholder="请输入车辆识别码" v-model="carInfo.frameNo"
- maxlength="17" @blur="binddata('frameNo', $event.detail.value,'carForm')"
- placeholder-style="font-size:28upx" @input="upperCaseType('frameNo')" />
- <text class="checkButton d-flex a-center j-center" @tap="toChooseVin(carInfo.frameNo)">校验</text>
- </view>
- </uni-forms-item>
- <uni-forms-item name="modelcname" required label="品牌型号: ">
- <view class="d-flex a-center textColor" style="height: 100%;">
- <input class="uni-input-input flex-1 textColor" placeholder="请输入品牌型号"
- v-model="carInfo.modelcname" @blur="binddata('modelcname', $event.detail.value,'carForm')"
- placeholder-style="font-size:28upx" @input="upperCaseType('modelcname')" />
- <text class="checkButton d-flex a-center j-center"
- @tap="toChooseVehicleType(carInfo.modelcname)">校验</text>
- </view>
- </uni-forms-item>
- <uni-forms-item name="engineNo" required label="发动机号: ">
- <input class="uni-input-input textColor" placeholder="请输入发动机号" v-model="carInfo.engineNo"
- @blur="binddata('engineNo', $event.detail.value,'carForm')" placeholder-style="font-size:28upx"
- @input="upperCaseType('engineNo')" />
- </uni-forms-item>
- <uni-forms-item label="年款: ">
- <input class="uni-input-input textColor" placeholder="请输入年款" v-model="carInfo.caryear"
- placeholder-style="font-size:28upx" />
- </uni-forms-item>
- <uni-forms-item label="座位数: ">
- <input class="uni-input-input textColor" placeholder="请输入座位数" v-model="carInfo.seatCount"
- placeholder-style="font-size:28upx" />
- </uni-forms-item>
- <uni-forms-item label="排量: ">
- <input class="uni-input-input textColor" placeholder="请输入排量" v-model="carInfo.enginedesc"
- placeholder-style="font-size:28upx" />
- </uni-forms-item>
- <uni-forms-item label="功率: ">
- <input class="uni-input-input textColor" placeholder="请输入功率" v-model="carInfo.powerScale"
- placeholder-style="font-size:28upx" />
- </uni-forms-item>
- <uni-forms-item label="新车购置价: " required name="purchasePrice">
- <input class="uni-input-input textColor" placeholder="请输入新车购置价" v-model="carInfo.purchasePrice"
- placeholder-style="font-size:28upx"
- @blur="binddata('purchasePrice', $event.detail.value,'carForm')"
- @input="upperCaseType('purchasePrice')" />
- </uni-forms-item>
- <uni-forms-item required label="使用性质: " required>
- <view class="d-flex a-center" style="width:100%;height: 100%;" @click="carnatureshow=true">
- <u-select v-model="carnatureshow" mode="single-column" :list="natureOfVehicleUseoptions"
- @confirm="dictionaryConfirm($event,'carnature')" label-name="dictTag"
- value-name="dictValue"></u-select>
- <view class="textColor">{{carInfo1.carnature}}</view>
- </view>
- </uni-forms-item>
- <uni-forms-item label="车辆用途: ">
- <view class="d-flex a-center" style="width:100%;height: 100%;" @click="vehicleUseshow=true">
- <u-select v-if="carInfo.carnature=='01'" v-model="vehicleUseshow" mode="single-column"
- :list="businessVehicleUseoptions" @confirm="dictionaryConfirm($event,'vehicleUse')"
- label-name="dictTag" value-name="dictValue"></u-select>
- <u-select v-if="carInfo.carnature=='02'" v-model="vehicleUseshow" mode="single-column"
- :list="outOfBusinessVehicleUseoptions" @confirm="dictionaryConfirm($event,'vehicleUse')"
- label-name="dictTag" value-name="dictValue"></u-select>
- <view class="textColor">{{carInfo1.vehicleUse}}</view>
- </view>
- </uni-forms-item>
- <uni-forms-item label="车辆类型: " required>
- <view class="d-flex a-center" style="width:100%;height: 100%;" @click="cartypeshow=true">
- <u-select v-model="cartypeshow" mode="single-column" :list="trafficManagementVehicleTypeoptions"
- @confirm="dictionaryConfirm($event,'cartype')" label-name="dictTag"
- value-name="dictValue"></u-select>
- <view class="textColor">{{carInfo1.cartype}}</view>
- </view>
- </uni-forms-item>
- <uni-forms-item label="车辆种类:" required>
- <view class="d-flex a-center" style="width:100%;height: 100%;" @click="cimodelclassshow=true">
- <u-select v-model="cimodelclassshow" mode="single-column" :list="vehicleTypeoptions"
- @confirm="dictionaryConfirm($event,'cimodelclass')" label-name="dictTag"
- value-name="dictValue"></u-select>
- <view class="textColor">{{carInfo1.cimodelclass}}</view>
- </view>
- </uni-forms-item>
- <uni-forms-item label="能源种类: " required name="energyType">
- <view class="d-flex a-center" style="width:100%;height: 100%;" @click="energyTypeshow=true">
- <u-select v-model="energyTypeshow" mode="single-column" :list="energyTypeoptions"
- @confirm="dictionaryConfirm($event,'energyType')" label-name="dictTag"
- value-name="dictValue"></u-select>
- <view class="textColor">{{carInfo1.energyType}}</view>
- </view>
- </uni-forms-item>
- <uni-forms-item required label="注册日期" name="registerDate" style="margin-right: 14px;">
- <u-input type="select" :select-open="registerDateShow" v-model="carInfo.registerDate"
- placeholder="请选择注册日期" @click="registerDateShow = true"
- placeholder-style="color:#808080"></u-input>
- <u-picker v-model="registerDateShow" mode="time" :params="params" :end-year="endYear"
- :end-month="endMonth" @confirm="e=> Dateconfirm(e,'carInfo','registerDate')"></u-picker>
- </uni-forms-item>
- <uni-forms-item required label="发证日期" name="issueDate" style="margin-right: 14px;">
- <u-input type="select" :select-open="issueDateShow" v-model="carInfo.issueDate"
- placeholder="请选择发证日期" @click="issueDateShow = true" placeholder-style="color:#808080"></u-input>
- <u-picker v-model="issueDateShow" mode="time" :params="params"
- @confirm="e=> Dateconfirm(e,'carInfo','issueDate')"></u-picker>
- </uni-forms-item>
- <uni-forms-item v-if="carInfo.transferFlag" required label="转移登记日期" name="transferDate"
- style="margin-right: 14px;">
- <u-input type="select" :select-open="transferDateShow" v-model="carInfo.transferDate"
- placeholder="请选择过户日期" @click="transferDateShow = true"
- placeholder-style="color:#808080"></u-input>
- <u-picker v-model="transferDateShow" mode="time" :params="params" :end-year="endYear"
- :end-month="endMonth" @confirm="e=> Dateconfirm(e,'carInfo','transferDate')"></u-picker>
- </uni-forms-item>
- <uni-forms-item required label="是否过户: ">
- <view class="d-flex j-end a-c" style="height:100%">
- <u-switch v-model="carInfo.transferFlag" active-color="#ea552d " size="30"
- style="margin-right: 15px;" @change="transferFlagchange"></u-switch>
- </view>
- </uni-forms-item>
- <uni-forms-item required label="是否脱保: ">
- <view class="d-flex j-end a-c" style="height:100%">
- <u-switch v-model="carInfo.outOfInsurance" active-color="#ea552d " size="30"
- style="margin-right: 15px;"></u-switch>
- </view>
- </uni-forms-item>
- <uni-forms-item required label="是否二手车: ">
- <view class="d-flex j-end a-c" style="height:100%">
- <u-switch v-model="carInfo.secondhandcarflag" active-color="#ea552d " size="30"
- style="margin-right: 15px;"></u-switch>
- </view>
- </uni-forms-item>
- </uni-forms>
- </uni-group>
- <uni-group title="" top="10">
- <uni-forms :rules="ownerRules" :value="ownerInfo" ref="ownerForm" validate-trigger="bind"
- err-show-type="toast" label-width="100">
- <uni-forms-item>
- <view class="title d-flex a-center j-sb font-md">
- <text class="font-weight">车主</text>
- <view class="icon iconfont icon-shenfenzhengshibie font-lg main-text-color"
- @tap="chooseImage('ownerInfo',2)" style="margin-right: 14px;"></view>
- </view>
- </uni-forms-item>
- <uni-forms-item name="name" required label="姓名: ">
- <input class="uni-input-input textColor" placeholder="请输入姓名" v-model="ownerInfo.name" maxlength="5"
- placeholder-style="font-size:28upx" />
- </uni-forms-item>
- <uni-forms-item name="identifyType" required label="证件类型:">
- <view class="d-flex a-center" style="width:100%;height: 100%;">
- <picker disabled class="d-flex a-center" style="width:100%;height: 100%;" mode="selector"
- range-key="label" :range="identifyList" v-model="ownerIdentifyIndex"
- @change="bindIdentifyTypeChange($event,'owner')">
- <view class="textColor">{{identifyList[ownerIdentifyIndex]['label']}}</view>
- </picker>
- </view>
- </uni-forms-item>
- <uni-forms-item required name="identifyNumber" label="证件号: ">
- <input class="uni-input-input textColor" placeholder="请输入证件号" v-model="ownerInfo.identifyNumber"
- maxlength="18" @blur="binddata('identifyNumber', $event.detail.value,'ownerInfo')"
- placeholder-style="font-size:28upx" />
- </uni-forms-item>
- <uni-forms-item required name="age" label="年龄: ">
- <input class="uni-input-input textColor" disabled placeholder="请输入年龄" v-model="ownerInfo.age"
- maxlength="18" placeholder-style="font-size:28upx" />
- </uni-forms-item>
- <uni-forms-item required name="mobile" label="手机号: ">
- <input class="uni-input-input textColor" placeholder="请输入手机号" v-model="ownerInfo.mobile"
- maxlength="11" placeholder-style="font-size:28upx" />
- </uni-forms-item>
- <uni-forms-item required name="addr" label="地址: " style="margin-right: 14px;">
- <textarea class="textColor" v-model="ownerInfo.addr"
- style="width:100%;line-height: 50upx;margin-top: 15upx;" placeholder-style="font-size:28upx;"
- placeholder="请输入地址" auto-height />
- </uni-forms-item>
- <uni-forms-item required label="有效期起期" name="identifyValidDate" style="margin-right: 14px;">
- <u-input type="select" :select-open="ownerDateShow" v-model="ownerInfo.identifyValidDate"
- placeholder="请选择有效期起期" @click="ownerDateShow = true"
- placeholder-style="color:#808080"></u-input>
- <u-picker v-model="ownerDateShow" mode="time" :params="params"
- @confirm="e=> Dateconfirm(e,'ownerInfo','identifyValidDate')"></u-picker>
- </uni-forms-item>
- <uni-forms-item required label="有效期止期" name="identifyValidEndDate">
- <view class="dis j-s a-c">
- <u-input type="select" :select-open="ownerEndDateShow" v-model="ownerInfo.identifyValidEndDate"
- placeholder="请选择有效期止期" @click="ownerEndDateShow = true" placeholder-style="color:#808080"
- style="margin-right: 14px;"></u-input>
- <view class=" dis j-c a-c ">
- <text>长期</text>
- <switch style="transform: scale(0.6)"
- @change="checked=> insureLongterm(checked,'ownerInfo')" />
- </view>
- </view>
- <u-picker v-model="ownerEndDateShow" mode="time" :params="params"
- @confirm="e=> Dateconfirm(e,'ownerInfo','identifyValidEndDate')"></u-picker>
- </uni-forms-item>
- </uni-forms>
- </uni-group>
- <uni-group title="" top="10">
- <uni-forms :rules="policyHolderRules" :value="policyHolderInfo" ref="policyHolderForm"
- validate-trigger="bind" err-show-type="toast" label-width="100">
- <uni-forms-item>
- <view class="title d-flex a-center j-sb font-md">
- <text class="font-weight">投保人</text>
- <view class="d-flex a-center j-sb">
- <switch style="transform: scale(0.6);" :checked="holderAndOwner"
- @change="e=>syncPersonInfo(e,'holderAndOwner','policyHolder','owner')" />
- <text style="margin-right: 10px;">同车主</text>
- <view class="icon iconfont icon-shenfenzhengshibie font-lg main-text-color"
- @tap="chooseImage('policyHolderInfo',3)" style="margin-right: 14px;"></view>
- </view>
- </view>
- </uni-forms-item>
- <template v-if="!holderAndOwner">
- <uni-forms-item name="name" required label="姓名: ">
- <input class="uni-input-input textColor" placeholder="请输入姓名" v-model="policyHolderInfo.name"
- maxlength="5" @blur="binddata('name', $event.detail.value,'policyHolderForm')"
- placeholder-style="font-size:28upx" />
- </uni-forms-item>
- <uni-forms-item name="identifyType" required label="证件类型: ">
- <view class="d-flex a-center" style="width:100%;height: 100%;">
- <picker disabled class="d-flex a-center" style="width:100%;height: 100%;" mode="selector"
- range-key="label" :range="identifyList" v-model="policyHolderIdentifyIndex"
- @change="bindIdentifyTypeChange($event,'policyHolder')">
- <view class="textColor">{{identifyList[policyHolderIdentifyIndex]['label']}}</view>
- </picker>
- </view>
- </uni-forms-item>
- <uni-forms-item required name="identifyNumber" label="证件号: ">
- <input class="uni-input-input textColor" placeholder="请输入证件号"
- v-model="policyHolderInfo.identifyNumber" maxlength="18"
- @blur="binddata('identifyNumber', $event.detail.value,'policyHolderForm')"
- placeholder-style="font-size:28upx" />
- </uni-forms-item>
- <uni-forms-item required name="mobile" label="手机号: ">
- <input class="uni-input-input textColor" placeholder="请输入手机号" v-model="policyHolderInfo.mobile"
- maxlength="11" @blur="binddata('mobile', $event.detail.value,'policyHolderForm')"
- placeholder-style="font-size:28upx" />
- </uni-forms-item>
- <uni-forms-item required name="addr" label="地址: ">
- <textarea class="textColor" v-model="policyHolderInfo.addr"
- style="width:100%;line-height: 50upx;margin-top: 15upx;"
- placeholder-style="font-size:28upx;" placeholder="请输入地址" auto-height
- @blur="binddata('addr', $event.detail.value,'policyHolderForm')" />
- </uni-forms-item>
- <uni-forms-item required label="有效期起期" name="identifyValidDate" style="margin-right: 14px;">
- <u-input type="select" :select-open="policyHolderDateShow"
- v-model="policyHolderInfo.identifyValidDate" placeholder="请选择有效期起期"
- @click="policyHolderDateShow = true" placeholder-style="color:#808080"></u-input>
- <u-picker v-model="policyHolderDateShow" mode="time" :params="params"
- @confirm="e=> Dateconfirm(e,'policyHolderInfo','identifyValidDate')"></u-picker>
- </uni-forms-item>
- <uni-forms-item required label="有效期止期" name="identifyValidEndDate">
- <view class="dis j-s a-c">
- <u-input type="select" :select-open="policyHolderEndDateShow"
- v-model="policyHolderInfo.identifyValidEndDate" placeholder="请选择有效期止期"
- @click="policyHolderEndDateShow = true" placeholder-style="color:#808080"
- style="margin-right: 14px;"></u-input>
- <view class=" dis j-c a-c ">
- <text>长期</text>
- <switch style="transform: scale(0.6)"
- @change="checked=>insureLongterm(checked,'policyHolderInfo')" />
- </view>
- </view>
- <u-picker v-model="policyHolderEndDateShow" mode="time" :params="params"
- @confirm="e=> Dateconfirm(e,'policyHolderInfo','identifyValidEndDate')"></u-picker>
- </uni-forms-item>
- </template>
- </uni-forms>
- </uni-group>
- <uni-group title="" top="10">
- <uni-forms :rules="insuredPersonRules" :value="insuredPersonInfo" ref="insuredPersonForm"
- validate-trigger="bind" err-show-type="toast" label-width="100">
- <uni-forms-item>
- <view class="title d-flex a-center j-sb font-md">
- <text class="font-weight">被保人</text>
- <view class="d-flex a-center j-sb">
- <view class="d-flex a-center j-sb">
- <switch style="transform: scale(0.6);" :checked="tbrAndOwner"
- @change="e=>syncPersonInfo(e,'tbrAndOwner','insuredPerson','policyHolder','insuredAndOwner')" />
- <text style="margin-right: 10px;">同投保人</text>
- </view>
- <view class="d-flex a-center j-sb" v>
- <switch style="transform: scale(0.6);" :checked="insuredAndOwner"
- @change="e=>syncPersonInfo(e,'insuredAndOwner','insuredPerson','owner','tbrAndOwner')" />
- <text style="margin-right: 10px;">同车主</text>
- </view>
- <view class="icon iconfont icon-shenfenzhengshibie font-lg main-text-color"
- @tap="chooseImage('insuredPersonInfo',4)" style="margin-right: 14px;"></view>
- </view>
- </view>
- </uni-forms-item>
- <template v-if="!insuredAndOwner && !tbrAndOwner">
- <uni-forms-item name="name" required label="姓名: ">
- <input class="uni-input-input textColor" placeholder="请输入姓名" v-model="insuredPersonInfo.name"
- maxlength="5" @blur="binddata('name', $event.detail.value,'insuredPersonForm')"
- placeholder-style="font-size:28upx" />
- </uni-forms-item>
- <uni-forms-item name="identifyType" required label="证件类型: ">
- <view class="d-flex a-center" style="width:100%;height: 100%;">
- <picker disabled class="d-flex a-center" style="width:100%;height: 100%;" mode="selector"
- range-key="label" :range="identifyList" v-model="insuredPersonIdentifyIndex"
- @change="bindIdentifyTypeChange($event,'insuredPerson')">
- <view class="textColor">{{identifyList[insuredPersonIdentifyIndex]['label']}}</view>
- </picker>
- </view>
- </uni-forms-item>
- <uni-forms-item required name="identifyNumber" label="证件号: ">
- <input class="uni-input-input textColor" placeholder="请输入证件号"
- v-model="insuredPersonInfo.identifyNumber" maxlength="18"
- @blur="binddata('identifyNumber', $event.detail.value,'insuredPersonForm')"
- placeholder-style="font-size:28upx" />
- </uni-forms-item>
- <uni-forms-item required name="mobile" label="手机号: ">
- <input class="uni-input-input textColor" placeholder="请输入手机号" v-model="insuredPersonInfo.mobile"
- maxlength="11" @blur="binddata('mobile', $event.detail.value,'insuredPersonForm')"
- placeholder-style="font-size:28upx" />
- </uni-forms-item>
- <uni-forms-item required name="addr" label="地址: ">
- <textarea class="textColor" v-model="insuredPersonInfo.addr"
- style="width:100%;line-height: 50upx;margin-top: 15upx;"
- placeholder-style="font-size:28upx;" placeholder="请输入地址" auto-height
- @blur="binddata('addr', $event.detail.value,'insuredPersonForm')" />
- </uni-forms-item>
- <uni-forms-item required label="有效期起期" name="identifyValidDate" style="margin-right: 14px;">
- <u-input type="select" :select-open="insuredPersonDateShow"
- v-model="insuredPersonInfo.identifyValidDate" placeholder="请选择有效期起期"
- @click="insuredPersonDateShow = true" placeholder-style="color:#808080"></u-input>
- <u-picker v-model="insuredPersonDateShow" mode="time" :params="params"
- @confirm="e=> Dateconfirm(e,'insuredPersonInfo','identifyValidDate')"></u-picker>
- </uni-forms-item>
- <uni-forms-item required label="有效期止期" name="identifyValidEndDate">
- <view class="dis j-s a-c">
- <u-input type="select" :select-open="insuredPersonEndDateShow"
- v-model="insuredPersonInfo.identifyValidEndDate" placeholder="请选择有效期止期"
- @click="insuredPersonEndDateShow = true" placeholder-style="color:#808080"
- style="margin-right: 14px;"></u-input>
- <view class=" dis j-c a-c ">
- <text>长期</text>
- <switch style="transform: scale(0.6)"
- @change="checked=>insureLongterm(checked,'insuredPersonInfo')" />
- </view>
- </view>
- <u-picker v-model="insuredPersonEndDateShow" mode="time" :params="params"
- @confirm="e=> Dateconfirm(e,'insuredPersonInfo','identifyValidEndDate')"></u-picker>
- </uni-forms-item>
- </template>
- </uni-forms>
- </uni-group>
- <view style="height: 160upx;"></view>
- <view class="infoBottom d-flex a-center j-center j-sb">
- <button type="default" class="d-flex a-center j-center" @tap="toNext">下一步</button>
- </view>
- <view class="mask mask-show" v-if="lodingshow">
- <!-- 加载动画开始 -->
- <view class="preloader">
- <view class="loader"></view>
- </view>
- <!-- 加载动画结束 -->
- <view class="title">加载中...</view>
- </view>
- <u-popup v-model="ImageOcrShow" mode="center" width="90%" border-radius="10" @close="ImagePopClose">
- <view class="popContent dis f-c a-c j-s">
- <view class="popHeader ">信息校验</view>
- <view v-if="checkType=='carInfo'" class="" style="padding: 4px 10px;width: 100%;">
- <view class="imgOcr dis j-s a-c">
- <view class="imgOcr-border">
- <u-icon v-if="carfrontImg" class="del_btn" name="close-circle-fill" style="font-size: 20px;"
- color="rgb(247, 247, 247)" @click="del_btn('carfrontImg')"></u-icon>
- <image class="obverseimg" :src="carfrontImg?carfrontImg:'/static/carfront.png'"
- @click="carfrontChange" mode="">
- </view>
- <view class="imgOcr-border">
- <u-icon v-if="carbackImg" class="del_btn" name="close-circle-fill" style="font-size: 20px;"
- color="rgb(247, 247, 247)" @click="del_btn('carbackImg')"></u-icon>
- <image class="obverseimg" :src="carbackImg?carbackImg:'/static/carback.png'"
- @click="carbackChange" mode="">
- </view>
- </view>
- <view class="line dis j-s a-c" style="margin-top: 10px;">
- <text>车主</text>
- <u-input v-model="carfront.carOwner" placeholder="请输入车主" />
- </view>
- <view class="line dis j-s a-c">
- <text>车牌号</text>
- <u-input v-model="carfront.licenseNo" placeholder="请输入车牌号" />
- </view>
- <view class="line dis j-s a-c">
- <text>发动机号</text>
- <u-input v-model="carfront.engineNo" placeholder="请输入发动机号" />
- </view>
- <view class="line dis j-s a-c">
- <text>车架号</text>
- <u-input v-model="carfront.vinNo" placeholder="请输入车架号" />
- </view>
- <view class="line dis j-s a-c">
- <text>注册日期</text>
- <u-input v-model="carfront.registerDate" placeholder="请输入注册日期" />
- </view>
- <view class="line dis j-s a-c">
- <text>发证日期</text>
- <u-input v-model="carfront.issueDate" placeholder="请输入发证日期" />
- </view>
- </view>
- <view v-else class="" style="padding: 4px 10px;width: 100%;">
- <view class="imgOcr dis j-s a-c">
- <view class="imgOcr-border">
- <u-icon v-if="userfrontImg" class="del_btn" name="close-circle-fill"
- style="font-size: 20px;" color="rgb(247, 247, 247)"
- @click="del_btn('userfrontImg')"></u-icon>
- <image class="obverseimg" :src="userfrontImg?userfrontImg:'/static/userfront.png'"
- @click="userfrontChange" mode="">
- </view>
- <view class="imgOcr-border">
- <u-icon v-if="userbackImg" class="del_btn" name="close-circle-fill" style="font-size: 20px;"
- color="rgb(247, 247, 247)" @click="del_btn('userbackImg')"></u-icon>
- <image class="obverseimg" :src="userbackImg?userbackImg:'/static/userback.png'"
- @click="userbackChange" mode="">
- </view>
- </view>
- <view class="line dis j-s a-c" style="margin-top: 10px;">
- <text>姓名</text>
- <u-input v-model="userfront.name" placeholder="请输入姓名" />
- </view>
- <view class="line dis j-s a-c">
- <text>证件号</text>
- <u-input v-model="userfront.identifyNumber" placeholder="请输入证件号" />
- </view>
- <view class="line dis j-s a-c">
- <text>地址</text>
- <u-input v-model="userfront.addr" placeholder="请输入地址" />
- </view>
- <view class="line dis j-s a-c">
- <text>有效期起期</text>
- <u-input v-model="userback.identifyValidDate" placeholder="请输入有效期起期" />
- </view>
- <view class="line dis j-s a-c">
- <text>有效期止期</text>
- <u-input v-model="userback.identifyValidEndDate" placeholder="请输入有效期止期" />
- </view>
- </view>
- <view class="popFooter dis">
- <view class="popFooter-btn" @click="ImageOcrShow=false">取消</view>
- <view class="popFooter-btn" @click="CarOCRconfirm">确认</view>
- </view>
- </view>
- </u-popup>
- <previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="previewImgs"></previewImage>
- <u-toast ref="uToast" />
- </view>
- </template>
- <script>
- import checkImageInfo from '@/components/modules/carInsure/checkImageInfo/checkImageInfo.vue'; //引用图片信息检查插件
- import previewImage from '@/components/common/previewImage/previewImage.vue'; //引用插件
- import {
- pathToBase64,
- base64ToPath
- } from '@/common/image-tools-base64.js';
- import {
- userInfo
- } from 'os';
- import store from '@/store';
- import $http from '../../config/requestConfig';
- import {
- getAgeByIdCard,
- addressCode
- } from '@/plugins/utils';
- import {
- Promise
- } from 'bluebird';
- var dateTime = new Date();
- let Year = dateTime.getFullYear();
- let Month = Number(dateTime.getMonth() + 1);
- export default {
- components: {
- checkImageInfo,
- previewImage
- },
- watch: {
- "carInfo.frameNo": {
- handler(val) {
- if (val) {
- this.carInfo.vinNo = val;
- }
- },
- deep: true
- },
- },
- data() {
- return {
- form: {
- name: "",
- },
- //影像id上传列表
- checkType: "",
- checkIndex: 1,
- carInfoPositiveList: [], //车辆
- ownerInfoPositiveList: [], //车主
- policyHolderInfoPositiveList: [], //投保人
- insuredPersonInfoPositiveList: [], //被保人
- carfront: {},
- carback: {},
- userfront: {},
- userback: {},
- carfrontImg: '', //车辆正面
- carbackImg: '', //车辆背面
- userfrontImg: '', //车主正面
- userbackImg: '', //车主背面
- carFile: [], //车辆识别list
- userFile: [], //车主识别list
- ImageOcrShow: false, //影像识别框
- vehicleUseshow: false,
- carnatureshow: false,
- cartypeshow: false,
- cimodelclassshow: false,
- energyTypeshow: false,
- lodingshow: false,
- endYear: Year,
- endMonth: Month,
- registerDateShow: false,
- issueDateShow: false,
- ownerDateShow: false,
- ownerEndDateShow: false,
- policyHolderDateShow: false,
- policyHolderEndDateShow: false,
- insuredPersonDateShow: false,
- insuredPersonEndDateShow: false,
- transferDateShow: false,
- params: {
- year: true, //年
- month: true, //月
- day: true, //日
- hour: false, //时
- minute: false, //分
- second: false, //秒
- },
- carInfo: {
- licenseNo: "", //车牌号
- brandName: "", //车辆品牌型号
- vinNo: "", //车架号
- engineNo: "", //发动机号
- modelCode: "", //车型编码
- seatCount: "0", //核定载客量 核定载人数
- purchasePrice: "", //新车购置价最低,行业实际价值,协商价值
- carBrand: "", //车型品牌
- ciCarName: "", //行业车型名称
- ciModelCode: "", //行业车型编码
- completeKerbMass: "", //整备质量
- exhaustScale: "", //排量
- factory: "", //工厂名称
- factoryid: "", //工厂编码
- frameNo: "", //车架号
- licenseTypeCode: "02", //号牌种类
- vehicleclass: "", //车辆类型
- familyName: "", //车型
- modelcname: "", //车型名称
- powertypecode: "", //燃料类型编码
- vehicleweight: "", //总质量
- limitLoad: "", //核定载质量
- caryear: "0", //年款
- cimodelclass: "A0", //车辆种类
- powertype: "汽油", //燃料类型
- energyType: "0", //能源种类
- enginedesc: "", //排量
- powerScale: "", //功率
- registerDate: "", //注册日期
- issueDate: "", //发证日期
- transferFlag: false, //过户标志
- transferDate: "", //过户日期
- loanStatus: 0, //贷款标志
- firstBeneMan: "", //第一受益人
- noLicenseFlag: false, //是否新车
- cartype: "K33", //客车A0 货车H0
- carnature: "02", //使用性质 家庭自用8A 非营业企业8B 非营业党政机关,事业团体8C 非营业货车8D
- property: "1", //所属性质 1个人 2企业 3个人
- outOfInsurance: false, //脱保
- secondhandcarflag: false, //二手车
- vehicleUse: "05" //车辆用途
- },
- carInfo1: {
- energyType: "汽油",
- cimodelclass: "客车", //车辆种类
- carnature: "非营业",
- cartype: "k33轿车",
- vehicleUse: "",
- },
- carRules: {
- modelcname: {
- rules: [{
- required: true,
- errorMessage: '请输入品牌型号',
- }, ]
- },
- frameNo: {
- rules: [{
- required: true,
- errorMessage: '请输入车辆识别码',
- }, {
- pattern: /^([0-9A-Z]){17}$/,
- errorMessage: '请输入正确的车辆识别码',
- }]
- },
- engineNo: {
- rules: [{
- required: true,
- errorMessage: '请输入发动机号',
- }, ]
- },
- purchasePrice: {
- rules: [{
- required: true,
- errorMessage: '请输入新车购置价',
- }, {
- validateField: function(rule, value, data, callback) {
- if (value == 0) {
- callback('新车购置价不能为零')
- }
- return true
- }
- }]
- },
- registerDate: {
- rules: [{
- required: true,
- errorMessage: '请选择注册日期',
- }, ]
- },
- issueDate: {
- rules: [{
- required: true,
- errorMessage: '请选择发证日期',
- }, ]
- }
- },
- ownerRules: {
- name: {
- rules: [{
- required: true,
- errorMessage: '请输入车主姓名',
- },
- {
- minLength: 2,
- maxLength: 5,
- errorMessage: '车主姓名长度在 {minLength} 到 {maxLength} 个字符',
- },
- {
- pattern: /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/,
- errorMessage: '请输入正确的车主姓名',
- }
- ]
- },
- identifyNumber: {
- rules: [{
- required: true,
- errorMessage: '请输入车主证件号',
- },
- {
- pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
- errorMessage: '请输入正确的车主证件号',
- }
- ]
- },
- mobile: {
- rules: [{
- required: true,
- errorMessage: '请输入车主手机号',
- },
- {
- pattern: /^1[3-9]\d{9}$/,
- errorMessage: '请输入正确的手机号',
- }
- ]
- },
- addr: {
- rules: [{
- required: true,
- errorMessage: '请输入车主地址',
- },
- {
- minLength: 8,
- maxLength: 40,
- errorMessage: '车主地址长度在 {minLength} 到 {maxLength} 个字符',
- },
- ]
- }
- },
- policyHolderRules: {
- name: {
- rules: [{
- required: true,
- errorMessage: '请输入投保人姓名',
- },
- {
- minLength: 2,
- maxLength: 5,
- errorMessage: '投保人姓名长度在 {minLength} 到 {maxLength} 个字符',
- },
- {
- pattern: /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/,
- errorMessage: '请输入正确的投保人姓名',
- }
- ]
- },
- identifyNumber: {
- rules: [{
- required: true,
- errorMessage: '请输入投保人证件号',
- },
- {
- pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
- errorMessage: '请输入正确的投保人证件号',
- }
- ]
- },
- mobile: {
- rules: [{
- required: true,
- errorMessage: '请输入投保人手机号',
- },
- {
- pattern: /^1[3-9]\d{9}$/,
- errorMessage: '请输入正确的手机号',
- }
- ]
- },
- addr: {
- rules: [{
- required: true,
- errorMessage: '请输入投保人地址',
- },
- {
- minLength: 8,
- maxLength: 40,
- errorMessage: '投保人地址长度在 {minLength} 到 {maxLength} 个字符',
- },
- ]
- }
- },
- insuredPersonRules: {
- name: {
- rules: [{
- required: true,
- errorMessage: '请输入被保人姓名',
- },
- {
- minLength: 2,
- maxLength: 5,
- errorMessage: '被保人姓名长度在 {minLength} 到 {maxLength} 个字符',
- },
- {
- pattern: /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/,
- errorMessage: '请输入正确的被保人姓名',
- }
- ]
- },
- identifyNumber: {
- rules: [{
- required: true,
- errorMessage: '请输入被保人证件号',
- },
- {
- pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
- errorMessage: '请输入正确的被保人证件号',
- }
- ]
- },
- mobile: {
- rules: [{
- required: true,
- errorMessage: '请输入被保人手机号',
- },
- {
- pattern: /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
- errorMessage: '请输入正确的手机号',
- }
- ]
- },
- addr: {
- rules: [{
- required: true,
- errorMessage: '请输入被保人地址',
- },
- {
- minLength: 8,
- maxLength: 40,
- errorMessage: '被保人地址长度在 {minLength} 到 {maxLength} 个字符',
- },
- ]
- }
- },
- checkInfo: {},
- checkImage: [],
- licenseNo: '', //车牌号
- //使用性质
- carnatureIndex: 0,
- cartypeIndex: 0,
- cimodelclassIndex: 0,
- fuelTypeCodeIndex: 0,
- propertyIndex: 0,
- identifyList: [{
- label: '身份证',
- id: "01"
- },
- {
- label: '护照',
- id: "02"
- },
- {
- label: '港澳台居民居住证',
- id: "03"
- },
- {
- label: '组织机构代码证',
- id: "04"
- },
- {
- label: '统一社会信用代码证',
- id: "05"
- },
- {
- label: '营业执照',
- id: "06"
- }
- ],
- ownerIdentifyIndex: 0,
- policyHolderIdentifyIndex: 0,
- insuredPersonIdentifyIndex: 0,
- holderAndOwner: true, //投保人同车主
- insuredAndOwner: false, //被保人同车主
- tbrAndOwner: true, //被保人同投保人
- ownerInfo: {
- name: "",
- identifyType: "01",
- identifyNumber: "",
- addr: "",
- email: "",
- mobile: "",
- identifyValidDate: "", //有效期起期
- identifyValidEndDate: "", //有效期止期
- age: "", //年龄
- },
- policyHolderInfo: {
- name: "",
- identifyType: "01",
- identifyNumber: "",
- addr: "",
- email: "",
- mobile: "",
- identifyValidDate: "", //有效期起期
- identifyValidEndDate: "", //有效期止期
- age: "", //年龄
- },
- insuredPersonInfo: {
- name: "",
- identifyType: "01",
- identifyNumber: "",
- addr: "",
- email: "",
- mobile: "",
- identifyValidDate: "", //有效期起期
- identifyValidEndDate: "", //有效期止期
- age: "", //年龄
- },
- riskList: [], //交强险和商业险的选择
- kindList: [], //商业险险种的选择
- token: "",
- /* 数据字典 */
- natureOfVehicleUseoptions: [],
- vehicleTypeoptions: [],
- trafficManagementVehicleTypeoptions: [],
- energyTypeoptions: [],
- businessVehicleUseoptions: [],
- outOfBusinessVehicleUseoptions: [],
- /* 数据字典 */
- model: {
- ownerInforegion: '',
- policyHolderInforegion: '',
- insuredPersonInforegion: '',
- },
- previewImgs: [],
- }
- },
- onShow() {
- this.getDicType("businessVehicleUse"); //车辆用途(营业)
- this.getDicType("outOfBusinessVehicleUse"); //车辆用途(非营业)
- this.getDicType("natureOfVehicleUse"); //车辆性质
- this.getDicType("vehicleType"); //车辆种类
- this.getDicType("trafficManagementVehicleType"); //车辆类型
- this.getDicType("energyType"); //能源种类
- },
- onLoad(options) {
- var a = 1;
- function test() {
- console.log(a)
- var a = 2;
- console.log(a)
- }
- test();
- //--数据字典 begin --
- if (!!options.licenseNo) {
- // this.licenseNo = decodeURIComponent(options.licenseNo);
- } else {
- const eventChannel = this.getOpenerEventChannel()
- // 监听acceptData事件,获取上一页面通过eventChannel传送到当前页面的数据
- eventChannel.on('acceptData', (data) => {
- console.log(data)
- if (!!data) {
- //读取上一个页面传过来数据(车辆信息,人员信息,险种信息)
- this.carInfo = data.carInfo; //车辆信息
- this.ownerInfo = JSON.parse(JSON.stringify(data.ownerInfo));
- this.policyHolderInfo = JSON.parse(JSON.stringify(data.policyHolderInfo));
- this.insuredPersonInfo = JSON.parse(JSON.stringify(data.insuredPersonInfo));
- this.carInfoPositiveList = data.carInfoPositiveList; //车辆
- this.ownerInfoPositiveList = data.ownerInfoPositiveList; //车主
- this.policyHolderInfoPositiveList = data.policyHolderInfoPositiveList; //投保
- this.insuredPersonInfoPositiveList = data.insuredPersonInfoPositiveList; //被保人
- this.riskList = data.riskList; //险种大类
- this.kindList = data.kindList; //商业险险别
- this.licenseNo = this.carInfo.licenseNo;
- this.holderAndOwner = false; //投保人同车主
- this.insuredAndOwner = false; //被保人同车主
- this.tbrAndOwner = false; //被保人同投保人
- }
- })
- };
- this.token = store.state.token
- },
- // 监听导航栏的按钮
- onNavigationBarButtonTap(e) {
- if (e.index == 0) {
- this.navigate({
- url: '/pages/index/index'
- }, "switchTab", true);
- }
- },
- computed: {
- startDate() {
- return this.getDate('start');
- },
- endDate() {
- return this.getDate('end');
- },
- },
- methods: {
- transferFlagchange(status) {
- if (status) {
- this.carInfo.transferDate = this.carInfo.issueDate;
- } else {
- this.carInfo.transferDate = ""
- }
- },
- async getDicType(type) {
- let res = await this.$http.get('/sysDict/dictDetails/' + type);
- if (res.code == 200) {
- this[type + 'options'] = res.data.ddList;
- }
- },
- dictionaryConfirm(e, name) {
- console.log(e, name)
- this.carInfo[name] = e[0].value;
- this.carInfo1[name] = e[0].label;
- },
- /**
- * @param {String} e 时间选择器的值
- * @param {String} obj 储存表单对象
- * @param {String} param 储存表单参数
- */
- Dateconfirm(e, obj, param) {
- this[obj][param] = e.year + '-' + e.month + '-' + e.day;
- },
- //选择驾照图片或拍摄驾照图片
- chooseImage(type, index) {
- this.checkType = type;
- this.checkIndex = index;
- this.ImageOcrShow = true;
- },
- //行驶证正面
- async carfrontChange() {
- if (this.carfrontImg) {
- this.previewImgs = [{
- url: this.carfrontImg
- }];
- this.$refs.previewImage.open(0); // 传入当前选中的图片地址或序号
- } else {
- let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
- count: 1,
- sizeType: ['compressed']
- });
- let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
- if (!size) {
- this.$refs.uToast.show({
- title: '上传图片大小不能超过 5MB!',
- type: 'error',
- })
- return false
- }
- if (chooseImageRes) {
- this.lodingshow = true;
- this.carfrontImg = chooseImageRes.tempFilePaths[0];
- uni.uploadFile({
- url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
- filePath: this.carfrontImg,
- name: "multipartFile",
- formData: {
- 'type': 'image',
- },
- header: {
- Authorization: this.token,
- },
- success: (imgRes) => {
- let data = JSON.parse(imgRes.data);
- if (data.code == '200') {
- if (this.carInfoPositiveList.some(v => v.imageType == 'C01')) {
- this.carInfoPositiveList.map(val => {
- if (val.imageType == 'C01') {
- val.imageId = data.data.id;
- }
- })
- } else {
- this.carInfoPositiveList.push({
- imageId: data.data.id,
- imageType: "C01",
- })
- }
- uni.uploadFile({
- url: this.$base.baseUrl + '/order/identify/drivingPermit',
- filePath: this.carfrontImg,
- name: "image1",
- header: {
- Authorization: this.token,
- },
- success: (uploadFileRes) => {
- let data = JSON.parse(uploadFileRes.data).data;
- let rdate = '';
- if (!!data.carInfo.registerDate) {
- rdate = data.carInfo.registerDate.substr(0,
- 4) +
- '-' + data.carInfo
- .registerDate.substr(4, 2) + '-' + data
- .carInfo
- .registerDate
- .substr(6,
- 2)
- }
- let isdate = '';
- if (!!data.carInfo.issueDate) {
- isdate = data.carInfo.issueDate.substr(0, 4) +
- '-' + data.carInfo
- .issueDate.substr(4, 2) + '-' + data
- .carInfo
- .issueDate.substr(6, 2)
- }
- this.ownerInfo.name = data.carInfo.carOwner; //车主
- this.carfront = {
- carOwner: data.carInfo.carOwner, //车主
- licenseNo: data.carInfo.plateNo, //车牌号
- modelcname: data.carInfo.backOcrID, //品牌型号
- frameNo: data.carInfo.vin, //车架号
- engineNo: data.carInfo.engine, //发动机号
- vinNo: data.carInfo.vin, //车架号
- issueDate: isdate, //发证日期
- registerDate: rdate, //注册日期
- cimodelclass: data.carInfo.motorTypeCode,
- carnature: data.carInfo.motorUsageTypeCode,
- }
- this.lodingshow = false;
- }
- });
- }
- }
- });
- } else {
- this.lodingshow = false;
- }
- }
- },
- //行驶证反面
- async carbackChange() {
- if (this.carbackImg) {
- this.previewImgs = [{
- url: this.carbackImg
- }];
- this.$refs.previewImage.open(0); // 传入当前选中的图片地址或序号
- } else {
- let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
- count: 1,
- sizeType: ['compressed']
- });
- let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
- if (!size) {
- this.$refs.uToast.show({
- title: '上传图片大小不能超过 5MB!',
- type: 'error',
- })
- return false
- }
- if (chooseImageRes) {
- this.lodingshow = true;
- this.carbackImg = chooseImageRes.tempFilePaths[0];
- uni.uploadFile({
- url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
- filePath: this.carbackImg,
- name: "multipartFile",
- formData: {
- 'type': 'image',
- },
- header: {
- Authorization: this.token,
- },
- success: (imgRes) => {
- let data = JSON.parse(imgRes.data);
- if (data.code == '200') {
- if (this.carInfoPositiveList.some(v => v.imageType == 'D01')) {
- this.carInfoPositiveList.map(val => {
- if (val.imageType == 'D01') {
- val.imageId = data.data.id;
- }
- })
- } else {
- this.carInfoPositiveList.push({
- imageId: data.data.id,
- imageType: "D01",
- })
- }
- uni.uploadFile({
- url: this.$base.baseUrl + '/order/identify/drivingPermit',
- filePath: this.carbackImg,
- name: "image2",
- header: {
- Authorization: this.token,
- },
- success: (uploadFileRes) => {
- let data1 = JSON.parse(uploadFileRes.data).data;
- this.carback = {
- vehicleweight: data1.carInfo
- .grossMass, //总质量
- completeKerbMass: data1.carInfo
- .unladenMass, //整备质量
- seatCount: data1.carInfo
- .approvedPassengersCapacity, //核定载客数
- }
- this.lodingshow = false;
- }
- });
- }
- }
- });
- } else {
- this.lodingshow = false;
- }
- }
- },
- //身份证正面
- async userfrontChange() {
- if (this.userfrontImg) {
- this.previewImgs = [{
- url: this.userfrontImg
- }];
- this.$refs.previewImage.open(0); // 传入当前选中的图片地址或序号
- } else {
- let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
- count: 1,
- sizeType: ['compressed']
- });
- let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
- if (!size) {
- this.$refs.uToast.show({
- title: '上传图片大小不能超过 5MB!',
- type: 'error',
- })
- return false
- }
- if (chooseImageRes) {
- this.lodingshow = true;
- this.userfrontImg = chooseImageRes.tempFilePaths[0];
- uni.uploadFile({
- url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
- filePath: this.userfrontImg,
- name: "multipartFile",
- formData: {
- 'type': 'image',
- },
- header: {
- Authorization: this.token,
- },
- success: (imgRes) => {
- let data = JSON.parse(imgRes.data);
- if (data.code == '200') {
- let type = 'C0' + this.checkIndex;
- if (this[this.checkType + 'PositiveList'].some(v => v.imageType ==
- type)) {
- this[this.checkType + 'PositiveList'].map(val => {
- if (val.imageType == type) {
- val.imageId = data.data.id;
- }
- })
- } else {
- this[this.checkType + 'PositiveList'].push({
- imageId: data.data.id,
- imageType: type,
- })
- }
- uni.uploadFile({
- url: this.$base.baseUrl + '/order/identify/idCard',
- filePath: this.userfrontImg,
- name: "image1",
- header: {
- Authorization: this.token,
- },
- success: (uploadFileRes) => {
- let data = JSON.parse(uploadFileRes.data).data;
- this.userfront = {
- age: getAgeByIdCard(data.customerInfo
- .identifyNumber),
- name: data.customerInfo.name,
- identifyNumber: data.customerInfo
- .identifyNumber,
- addr: data.customerInfo.addr,
- }
- this.lodingshow = false;
- }
- });
- }
- }
- });
- } else {
- this.lodingshow = false;
- }
- }
- },
- //身份证反面
- async userbackChange() {
- if (this.userbackImg) {
- this.previewImgs = [{
- url: this.userbackImg
- }];
- this.$refs.previewImage.open(0); // 传入当前选中的图片地址或序号
- } else {
- let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
- count: 1,
- sizeType: ['compressed']
- });
- let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
- if (!size) {
- this.$refs.uToast.show({
- title: '上传图片大小不能超过 5MB!',
- type: 'error',
- })
- return false
- }
- if (chooseImageRes) {
- this.lodingshow = true;
- this.userbackImg = chooseImageRes.tempFilePaths[0];
- uni.uploadFile({
- url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
- filePath: this.userbackImg,
- name: "multipartFile",
- formData: {
- 'type': 'image',
- },
- header: {
- Authorization: this.token,
- },
- success: (imgRes) => {
- let data = JSON.parse(imgRes.data);
- if (data.code == '200') {
- let type = 'D0' + this.checkIndex;
- if (this[this.checkType + 'PositiveList'].some(v => v.imageType ==
- type)) {
- this[this.checkType + 'PositiveList'].map(val => {
- if (val.imageType == type) {
- val.imageId = data.data.id;
- }
- })
- } else {
- this[this.checkType + 'PositiveList'].push({
- imageId: data.data.id,
- imageType: type,
- })
- }
- uni.uploadFile({
- url: this.$base.baseUrl +
- '/order/identify/idCard',
- filePath: this.userbackImg,
- name: "image2",
- header: {
- Authorization: this.token,
- },
- success: (uploadFileRes) => {
- let data1 = JSON.parse(uploadFileRes.data).data;
- let identifyValidDate = '';
- if (!!data1.customerInfo
- .identifyValidDate) {
- identifyValidDate = data1
- .customerInfo
- .identifyValidDate
- .substr(0, 4) +
- '-' + data1
- .customerInfo
- .identifyValidDate
- .substr(4, 2) + '-' +
- data1
- .customerInfo
- .identifyValidDate
- .substr(6,
- 2)
- }
- let identifyValidEndDate = '';
- if (!!data1.customerInfo
- .identifyValidEndDate) {
- identifyValidEndDate =
- data1.customerInfo
- .identifyValidEndDate
- .substr(0,
- 4) + '-' + data1
- .customerInfo
- .identifyValidEndDate
- .substr(4, 2) + '-' +
- data1
- .customerInfo
- .identifyValidEndDate
- .substr(6, 2)
- }
- this.userback = {
- identifyValidDate: identifyValidDate, //起期
- identifyValidEndDate: identifyValidEndDate, //止期
- }
- this.lodingshow = false;
- }
- });
- }
- }
- });
- } else {
- this.lodingshow = false;
- }
- }
- },
- CarOCRconfirm() {
- switch (this.checkType) {
- case 'carInfo':
- Object.assign(this.carInfo, this.carfront, this
- .carback);
- this.ImageOcrShow = false;
- break;
- case 'ownerInfo':
- case "policyHolderInfo":
- case "insuredPersonInfo":
- Object.assign(this[this.checkType], this.userfront, this
- .userback);
- this.ImageOcrShow = false;
- break;
- default:
- break;
- }
- },
- //图片删除
- del_btn(val) {
- this[val] = "";
- },
- //弹框关闭事件
- ImagePopClose() {
- this.carfrontImg = "";
- this.carbackImg = "";
- this.userfrontImg = "";
- this.userbackImg = "";
- this.carfront = {};
- this.carback = {};
- this.userfront = {};
- this.userback = {};
- },
- /**
- * 复写 binddata 方法,如果只是为了校验,无复杂自定义操作,可忽略此方法
- * @param {String} name 字段名称
- * @param {String} value 表单域的值
- */
- binddata(name, value, type) {
- if (name == 'identifyNumber') {
- this[type].age = getAgeByIdCard(value)
- }
- },
- //转变大写(车型/车架号/发动机号)
- upperCaseType(type) {
- this.carInfo[type] = this.carInfo[type].toUpperCase();
- if (type == 'vinNo') {
- this.carInfo.frameNo = this.carInfo.vinNo.trim();
- }
- },
- //下拉改变触发该方法
- bindPickerChange(e, type, list) {
- this[type + 'Index'] = e.target.value;
- this.carInfo[type] = this[list][e.target.value].dictValue;
- },
- // 身份证类型选择
- bindIdentifyTypeChange(e, type) {
- this[type + 'IdentifyIndex'] = e.target.value;
- this[type + 'Info'].identifyType = this.identifyList[e.target.value].id;
- this[type + 'Info'].identifyNumber = '';
- },
- bindDateChange(e, type) { //日期赋值
- if ((type == 'issueDate') && (!this.carInfo.registerDate)) {
- return uni.showToast({
- title: '请先输入注册日期',
- icon: "none"
- });
- }
- this.carInfo[type] = e.detail.value;
- if (new Date(this.carInfo.registerDate) > new Date(this.carInfo.issueDate)) {
- this.carInfo.issueDate = ""
- return uni.showToast({
- title: '注册日期大于发证日期',
- icon: "none"
- });
- }
- },
- //长期
- insureLongterm(checked, e) {
- checked.detail.value == true ? this[e].identifyValidEndDate = "9999-12-31" : this[e]
- .identifyValidEndDate =
- "";
- },
- //日期(可以选择20年以内的时间)
- getDate(type) {
- const date = new Date();
- let year = date.getFullYear();
- let month = date.getMonth() + 1;
- let day = date.getDate();
- if (type === 'start') {
- year = year - 20;
- } else if (type === 'end') {}
- month = month > 9 ? month : '0' + month;;
- day = day > 9 ? day : '0' + day;
- return `${year}-${month}-${day}`;
- },
- //同车主信息
- syncPersonInfo(e, type, touch1, touch2, touch3) {
- this[type] = e.detail.value;
- this[touch1 + 'IdentifyIndex'] = this[touch2 + 'IdentifyIndex'];
- if (this[type]) {
- this[touch1 + 'Info'] = JSON.parse(JSON.stringify(this[touch2 + 'Info']));
- this[touch3] = false;
- } else {
- for (let key in this[touch1 + "Info"]) {
- this[touch1 + "Info"][key] = '';
- }
- }
- },
- //跳转选择车辆类型页面
- toChooseVehicleType(cctype) {
- if (cctype == '' || cctype == null) {
- uni.showToast({
- icon: 'none',
- title: '请输入车型名称',
- duration: 1500
- });
- } else {
- let cctypeName = cctype.replace(/[^u4e00-u9fa5|,]+/ig, '')
- this.navigate({
- url: '/pages/carInsure1/carType1?modelName=' + encodeURIComponent(cctypeName)
- }, "navigateTo", true);
- }
- },
- // 通过车架号获取车型
- async toChooseVin(cctype) {
- if (cctype == '' || cctype == null) {
- return uni.showToast({
- icon: 'none',
- title: '请输入车架号',
- duration: 1500
- });
- } else {
- if (!this.isFrameno(cctype.trim())) {
- return uni.showToast({
- title: '请输入正确的车辆识别码',
- icon: "none"
- });
- }
- this.navigate({
- url: '/pages/carInsure1/carType1?frameNo=' + encodeURIComponent(cctype)
- }, "navigateTo", true);
- }
- },
- //验证车架号
- isFrameno(str) {
- let mPattern = /^([0-9A-Z]){17}$/;
- return mPattern.test(str);
- },
- toNext() {
- if (this.holderAndOwner) { //投保人同车主
- this.policyHolderInfo = this.ownerInfo;
- if (this.ownerInfoPositiveList.length > 0) {
- this.policyHolderInfoPositiveList = JSON.parse(JSON.stringify(this
- .ownerInfoPositiveList));
- if (this.policyHolderInfoPositiveList.length == 1) {
- this.policyHolderInfoPositiveList[0].imageType = "C03";
- } else {
- this.policyHolderInfoPositiveList[0].imageType = "C03";
- this.policyHolderInfoPositiveList[1].imageType = "D03";
- }
- }
- }
- if (this.insuredAndOwner) { //被保人同车主
- this.insuredPersonInfo = this.ownerInfo;
- if (this.ownerInfoPositiveList.length > 0) {
- this.insuredPersonInfoPositiveList = JSON.parse(JSON.stringify(this
- .ownerInfoPositiveList));
- if (this.insuredPersonInfoPositiveList.length == 1) {
- this.insuredPersonInfoPositiveList[0].imageType = "C04";
- } else {
- this.insuredPersonInfoPositiveList[0].imageType = "C04";
- this.insuredPersonInfoPositiveList[1].imageType = "D04";
- }
- }
- }
- if (this.tbrAndOwner) { //被保人同投保人
- this.insuredPersonInfo = this.policyHolderInfo;
- if (this.policyHolderInfoPositiveList.length > 0) {
- this.insuredPersonInfoPositiveList = JSON.parse(JSON.stringify(this
- .policyHolderInfoPositiveList));
- if (this.insuredPersonInfoPositiveList.length == 1) {
- this.insuredPersonInfoPositiveList[0].imageType = "C04";
- } else {
- this.insuredPersonInfoPositiveList[0].imageType = "C04";
- this.insuredPersonInfoPositiveList[1].imageType = "D04";
- }
- }
- }
- this.$refs.carForm.submit().then(res => {
- this.$refs.ownerForm.submit().then(res1 => {
- this.$refs.policyHolderForm.submit().then(res2 => {
- this.$refs.insuredPersonForm.submit().then(res3 => {
- this.navigate({
- url: '/pages/carInsure1/insureItems1',
- success: (res) => {
- res.eventChannel.emit(
- "acceptData", {
- carInfo: this
- .carInfo,
- ownerInfo: this
- .ownerInfo,
- policyHolderInfo: this
- .policyHolderInfo,
- insuredPersonInfo: this
- .insuredPersonInfo,
- riskList: this
- .riskList,
- kindList: this
- .kindList,
- carInfoPositiveList: this
- .carInfoPositiveList, //车辆
- ownerInfoPositiveList: this
- .ownerInfoPositiveList, //车主
- policyHolderInfoPositiveList: this
- .policyHolderInfoPositiveList, //投保人
- insuredPersonInfoPositiveList: this
- .insuredPersonInfoPositiveList, //被保人
- })
- }
- }, "navigateTo", true);
- })
- })
- })
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- @import '@/style/mixin.scss';
- /deep/ .uni-group__content {
- padding-top: 0;
- }
- /deep/ .uni-forms--top {
- padding: 0;
- }
- /deep/ .uni-forms-item {
- margin-bottom: 0;
- }
- /deep/ .uni-input-input {
- font-size: 26upx;
- }
- /deep/ .uni-switch-input-checked {
- background-color: $themeColor !important;
- border-color: $themeColor !important;
- }
- /deep/ .uni-group__content {
- padding-bottom: 0;
- }
- /deep/ .uni-input-input {
- font-size: 28upx;
- }
- .body {
- width: 100vw;
- /* min-height: 100vh; */
- background: #f5f5f5;
- /* background: #FFFFFF; */
- font-family: "Arial,Helvetica,sans-serif,PingFangSC";
- }
- .title {
- height: 90upx;
- border-bottom: 1px solid #EEEEEE;
- }
- .checkButton {
- margin: 0 20upx;
- width: 100upx;
- height: 50upx;
- flex-shrink: 1;
- background: rgba($themeColor, 0.6);
- color: #FFFFFF;
- border-radius: 5upx;
- }
- .textColor {
- color: #6091f5;
- }
- textarea {
- font-size: 28upx;
- width: 330upx;
- }
- /* 底部的样式Start */
- .infoBottom {
- height: 140upx;
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- background: #FFFFFF;
- border-top: 1upx solid #EEEEEE;
- z-index: 99;
- }
- .infoBottom>button {
- // font-size: 30upx;
- background: $themeColor;
- color: #FFFFFF;
- flex: 1;
- margin: 0upx 30upx;
- }
- /* 底部的样式End */
- .popContent {
- height: 100%;
- background-color: #f9f9f9;
- .popHeader {
- width: 100%;
- text-align: center;
- padding: 10px;
- font-weight: bold;
- background-color: #FFFFFF;
- }
- .imgOcr {
- width: 100%;
- background-color: #f9f9f9;
- .imgOcr-border {
- position: relative;
- width: 49%;
- background-color: #fff;
- padding: 2px;
- .del_btn {
- cursor: pointer;
- position: absolute;
- top: 5rpx;
- right: 0;
- width: 50rpx;
- height: 50rpx;
- border-radius: 50%;
- z-index: 20;
- }
- .obverseimg {
- height: 120px;
- border-radius: 4px;
- }
- }
- }
- .line {
- width: 100%;
- margin: 2px 0;
- background-color: #FFFFFF;
- padding: 0 10px;
- >text {
- font-weight: bold;
- width: 100px;
- }
- }
- .popFooter {
- width: 100%;
- height: 50px;
- font-weight: bold;
- background-color: #FFFFFF;
- color: #3e5cd7;
- .popFooter-btn:nth-child(1) {
- border-right: 1px solid #f9f9f9;
- }
- .popFooter-btn {
- width: 50%;
- text-align: center;
- line-height: 50px;
- }
- }
- }
- .mask {
- /* pointer-events: none; */
- position: fixed;
- z-index: 99999;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- height: 100vh;
- width: 100vw;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- flex-wrap: wrap;
- }
- .mask.mask-show {
- background: rgba(255, 255, 255, 0.3);
- }
- .title {
- color: #333;
- font-size: 28rpx;
- margin-top: 20rpx;
- }
- .loader {
- display: block;
- width: 120rpx;
- height: 120rpx;
- border-radius: 50%;
- border: 3rpx solid transparent;
- border-top-color: #9370db;
- -webkit-animation: spin 2s linear infinite;
- animation: spin 2s linear infinite;
- }
- .loader::before {
- content: "";
- position: absolute;
- top: 5rpx;
- left: 5rpx;
- right: 5rpx;
- bottom: 5rpx;
- border-radius: 50%;
- border: 3rpx solid transparent;
- border-top-color: #ba55d3;
- -webkit-animation: spin 3s linear infinite;
- animation: spin 3s linear infinite;
- }
- .loader::after {
- content: "";
- position: absolute;
- top: 15rpx;
- left: 15rpx;
- right: 15rpx;
- bottom: 15rpx;
- border-radius: 50%;
- border: 3rpx solid transparent;
- border-top-color: #ff00ff;
- -webkit-animation: spin 1.5s linear infinite;
- animation: spin 1.5s linear infinite;
- }
- @-webkit-keyframes spin {
- 0% {
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- @keyframes spin {
- 0% {
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- </style>
|