<template> <view class="limbox"> <!-- 申请额度 --> <view class="tit">申请额度</view> <view class="txt">请如实填写您所需申请的额度</view> <view class="flexc limlist"> <view class="limimg"><image :src="limita" class="imga"></image></view> <input placeholder="请输入申请额度" type="number" v-model="datainfo.applicationAmount" placeholder-class="coa" class="ltit flex1"/> <view class="ltit flex0 ml8">万元</view> </view> <!-- 申贷银行 --> <view class="tit">申贷银行</view> <view class="txt">请根据您的实际情况选择申请银行</view> <picker range-key='label' :value="sdyhidx" :range="sdyhlist" @change='bindDateChangea'> <view class="flexc limlist"> <view class="limimg"><image :src="limitb" class="imgb"></image></view> <view class="ltit flex1" :class="applicationBank?'':'coa'">{{applicationBank||'请选择申贷银行'}}</view> <image :src="hrimg" class="rimg"></image> </view> </picker> <!-- 使用期限 --> <view class="tit">使用期限</view> <view class="txt">自放款日开始计算</view> <view class="flexc limlist"> <picker range-key='label' :value="syqxidx" :range="syqxlist" @change='bindDateChangeb'> <view class="limimg"><image :src="limitc" class="imgc"></image></view> </picker> <input @click.top="" placeholder="请选择或输入期限" @input="getInput" v-model="datainfo.usagePeriod" type="number" placeholder-class="coa" class="ltit flex1"/> <picker range-key='label' :value="syqxidx" :range="syqxlist" @change='bindDateChangeb'> <view class="flexc"> <image :src="hrimg" class="rimg"></image> <view class="ltit flex0 ml33">个月</view> </view> </picker> </view> <!-- 资金用途 200--> <view class="tit">资金用途</view> <view class="txt">请如实填写您需借款的资金用途</view> <view class="flexc limlist"> <picker range-key='label' :value="zjytidx" :range="zjytlist" @change='bindDateChangec'> <view class="limimg"><image :src="limitd" class="imgd"></image></view> </picker> <input @click.top="" placeholder="请选择或输入资金用途" maxlength="200" v-model="datainfo.purposeFunds" placeholder-class="coa" class="ltit flex1"/> <picker range-key='label' :value="zjytidx" :range="zjytlist" @change='bindDateChangec'> <image :src="hrimg" class="rimg"></image> </picker> </view> <!-- 还款来源 100--> <view class="tit">还款来源</view> <view class="txt">请如实填写您的还款来源</view> <view class="flexc limlist"> <picker range-key='label' :value="hklyidx" :range="hklylist" @change='bindDateChanged'> <view class="limimg"><image :src="limite" class="imge"></image></view> </picker> <input @click.top="" placeholder="请选择或输入还款来源" maxlength="100" v-model="datainfo.repaymentSource" placeholder-class="coa" class="ltit flex1"/> <picker range-key='label' :value="hklyidx" :range="hklylist" @change='bindDateChanged'> <image :src="hrimg" class="rimg"></image> </picker> </view> <view class="rzbtn mt38" @click="getNextFn">下一步</view> </view> </template> <script> import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数 import {getDictionaryFn} from "@/api/mine/register.js" export default{ components:{}, data(){ return{ limita: require('@/work/static/images/busin/limita.png'), limitb: require('@/work/static/images/busin/limitb.png'), limitc: require('@/work/static/images/busin/limitc.png'), limitd: require('@/work/static/images/busin/limitd.png'), limite: require('@/work/static/images/busin/limite.png'), hrimg:require('@/work/static/images/hrimg.png'), datainfo:{ applicationAmount:'',//申请额度(万元) applicationBank:'',//申请银行 usagePeriod:'',//使用期限(月) purposeFunds:'',//资金用途 repaymentSource:'',//还款来源 applicationType:'',//申请类型 1:企业 2:个人 }, sdyhidx:'', syqxidx:'', zjytidx:'', hklyidx:'', applicationBank:'',//申贷银行 sdyhlist:[],//申贷银行 syqxlist:[],//使用期限 zjytlist:[],//资金用途 hklylist:[],//还款来源 } }, onLoad(e) { this.init(); this.datainfo.applicationType=e.type; }, methods:{ checkPermi, checkRole, init(){ // 申贷银行 getDictionaryFn('shendai_bank').then(res=>{ if(res.code==200){ this.sdyhlist = res.data.map(v => { return { label: v.dictLabel, value: v.dictValue } }) } }) // 使用期限 getDictionaryFn('service_life').then(res=>{ if(res.code==200){ this.syqxlist = res.data.map(v => { return { label: v.dictLabel, value:v.dictValue } }) } }) // 资金用途 getDictionaryFn('purpose_of_funds').then(res=>{ if(res.code==200){ this.zjytlist = res.data.map(v => { return { label: v.dictLabel, value:v.dictValue } }) } }) // 还款来源 getDictionaryFn('repayment_source').then(res=>{ if(res.code==200){ this.hklylist = res.data.map(v => { return { label: v.dictLabel, value: v.dictValue } }) } }) }, getNextFn(){ var params=JSON.parse(JSON.stringify(this.datainfo)) if(!params.applicationAmount||params.applicationAmount<=0){ this.$toast('请输入申请额度') return } if(!this.applicationBank){ this.$toast('请选择申贷银行') return } if(!params.usagePeriod){ this.$toast('请选择或输入期限') return } if(!params.purposeFunds){ this.$toast('请选择或输入资金用途') return } if(!params.repaymentSource){ this.$toast('请选择或输入还款来源') return } // 数据保存 this.$tab.navigateTo("/work/pages/business/add?data="+encodeURIComponent(JSON.stringify(params))) }, getInput(e){ var val = e.detail.value.replace(/^0|[^\d]|[.]/g, ''); this.datainfo.usagePeriod=val }, bindDateChangea(e){ var val=e.detail.value; this.datainfo.applicationBank=this.sdyhlist[val].value; this.applicationBank=this.sdyhlist[val].label; }, bindDateChangeb(e){ var val=e.detail.value; this.datainfo.usagePeriod=this.syqxlist[val].label; }, bindDateChangec(e){ var val=e.detail.value; this.datainfo.purposeFunds=this.zjytlist[val].label; }, bindDateChanged(e){ var val=e.detail.value; this.datainfo.repaymentSource=this.hklylist[val].label; }, } } </script> <style> page{background:#ffffff;} </style> <style lang="scss" scoped> .limbox{padding: 24rpx 36rpx 54rpx; .tit{font-size: 40rpx;font-weight: bold;color: #222327;padding-top: 40rpx;margin-bottom: 18rpx;} .txt{font-weight: 500;font-size: 26rpx;color: #666666;margin-bottom: 28rpx;} .limlist{padding: 36rpx 0; border-bottom: 2rpx solid #E6E6E6;display: flex;align-items: center; .limimg{width: 40rpx;height: 40rpx;display: flex;align-items: center;justify-content: center;flex: 0 0 auto;margin-right: 38rpx; .imga{width: 30rpx;height: 40rpx;} .imgb{width: 38rpx;height: 38rpx;} .imgc{width: 40rpx;height: 40rpx;} .imgd{width: 36rpx;height: 40rpx;} .imge{width: 36rpx;height: 36rpx;} } .ltit{font-weight: 500;font-size: 38rpx;color: #222327;} .rimg{width: 16rpx;height: 30rpx;margin-left: 16rpx;flex: 0 0 auto;} } } </style>