rongzidanbao-ui/work/pages/business/limit.vue

<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>