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="请输入申请额度" 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="yhidx" :range="yhlist"   @change='bindDateChangea'>
			<view class="flexc limlist">
				<view class="limimg"><image :src="limitb" class="imgb"></image></view>
				<view class="ltit flex1" :class="sdyh?'':'coa'">{{sdyh||'请选择申贷银行'}}</view>
				<image :src="hrimg" class="rimg"></image>
			</view>
		</picker>
		<!-- 使用期限 -->
		<view class="tit">使用期限</view>
		<view class="txt">自XXX当日起开始计算</view>
		<view class="flexc limlist">
			<picker  range-key='label' :value="yhidx" :range="yhlist"   @change='bindDateChangea'>
				<view class="limimg"><image :src="limitc" class="imgc"></image></view>
			</picker>
			<input @click.top="" placeholder="请选择或输入期限" placeholder-class="coa" class="ltit flex1"/>
			<picker  range-key='label' :value="yhidx" :range="yhlist"   @change='bindDateChangea'>
				<view class="flexc">
					<image :src="hrimg" class="rimg"></image>
					<view class="ltit flex0 ml33">个月</view>
				</view>
			</picker>
		</view>
		<!-- 资金用途 -->
		<view class="tit">资金用途</view>
		<view class="txt">请如实填写您需借款的资金用途</view>
		<view class="flexc limlist">
			<picker  range-key='label' :value="yhidx" :range="yhlist"   @change='bindDateChangea'>
				<view class="limimg"><image :src="limitd" class="imgd"></image></view>
			</picker>
			<input @click.top="" placeholder="请选择或输入资金用途" placeholder-class="coa" class="ltit flex1"/>
			<picker  range-key='label' :value="yhidx" :range="yhlist"   @change='bindDateChangea'>
				<image :src="hrimg" class="rimg"></image>
			</picker>
		</view>
		<!-- 资金用途 -->
		<view class="tit">还款来源</view>
		<view class="txt">请如实填写您的还款来源</view>
		<view class="flexc limlist">
			<picker  range-key='label' :value="yhidx" :range="yhlist"   @change='bindDateChangea'>
				<view class="limimg"><image :src="limite" class="imge"></image></view>
			</picker>
			<input @click.top="" placeholder="请选择或输入还款来源" placeholder-class="coa" class="ltit flex1"/>
			<picker  range-key='label' :value="yhidx" :range="yhlist"   @change='bindDateChangea'>
				<image :src="hrimg" class="rimg"></image>
			</picker>
		</view>
		<view class="rzbtn mt38" @click="getNextFn">下一步</view>
	</view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	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'),
				yhidx:1,
				yhlist:[{label:"中国银行",value:0},{label:"招商银行",value:1},{label:"农业银行",value:2}],
				sdyh:""
			}
		},
		methods:{
			checkPermi, checkRole,
			getNextFn(){
				this.$tab.navigateTo("/work/pages/business/add")
			},
			bindDateChangea(e){
				var val=e.detail.value;
				this.sdyh=this.yhlist[val].label;
				this.sdyhid=this.yhlist[val].value;
			},
		}
	}
</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: 40rpx;color: #222327;}
		.rimg{width: 16rpx;height: 30rpx;margin-left: 16rpx;flex: 0 0 auto;}
	}	
}
</style>