rongzidanbao-ui/work/components/business/list.vue

<template>
  <view>
	<view v-if="datalist.length>0">
		<!-- 申报业务 v-if="listtype=='case'"-->
		<block v-if="type=='work'">
			<view class="lists" v-for="(ite,idx) in datalist" @click="getDetail">
				<view class="listtop">
					<view class="toptit over">安徽嘉欣医疗用品有限公司</view>
					<view class="statbox">专精特新<image :src="start"></image></view>
				</view>
				<view class="listsm">
					<view class="txt"><text class="tit">审核状态</text><text class="line">|</text><text class="co28">等待申报审核分配</text></view>
					<view class="txt"><text class="tit">申报时间</text><text class="line">|</text><text>2024-03-21 15:13:48</text></view>
					<view class="txt"><text class="tit">归档时间</text><text class="line">|</text><text>2024-03-21 15:13:48</text></view>
					<view class="flexcw">
						<view class="txt"><text class="tit">申请额度</text><text class="line">|</text><text>1000万元</text></view>
						<view class="txt"><text class="tit">使用期限</text><text class="line">|</text><text>12个月万元</text></view>
						<view class="txt"><text class="tit">申贷银行</text><text class="line">|</text><text>农商行</text></view>
						<view class="txt"><text class="tit">担保类型</text><text class="line">|</text><text>担保贷款</text></view>
						<view class="txt"><text class="tit">资金用途</text><text class="line">|</text><text>流动资金周转</text></view>
						<view class="txt"><text class="tit">还款来源</text><text class="line">|</text><text>营业收入</text></view>
					</view>
				</view>
			</view>
		</block>
		<!-- 客户 -->
		<block v-if="type=='custom'">
			<view class="lists" v-for="(ite,idx) in datalist" @click="getDetail">
				<view class="listtop">
					<view class="head">林</view>
					<view class="flex1">
						<view class="headt">林振宇</view>
						<view class="headx">资料更新时间 | 2024年3月24日</view>
					</view>
				</view>
				<view class="listsm">
					<view class="txt"><text class="tit">身份证号</text><text class="line">|</text><text>34282419730618003X</text>
						<view class="copyimg">
							<image :src="copy" ></image>
						</view>
					</view>
					<view class="txt"><text class="tit">居住地址</text><text class="line">|</text><text>安徽省安庆市潜山市梅城镇</text></view>
					<view class="txt"><text class="tit">手机号码</text><text class="line">|</text><text>18705568888</text></view>
					<view class="flexcw">
						<view class="txt"><text class="tit">关联企业</text><text class="line">|</text><text>2家</text></view>
						<view class="txt"><text class="tit">历史申贷记录</text><text class="line">|</text><text>2次</text></view>
					</view>
				</view>
			</view>
		</block>
		<!-- 企业 -->
		<block v-if="type=='qy'">
			<view class="lists qy" v-for="(ite,idx) in datalist" @click="getDetail"  >
				<view class="listtop" style="display: block;">
					<view class="flexc">
						<view class="toptit over f20">安徽嘉欣医疗用品有限公司</view>
						<view class="statbox">专精特新<image :src="start"></image></view>
					</view>
					<view class="adr f12">企业地址 | 潜山市经济开发区</view>
				</view>
				
				<view class="listsm">
					<view class="txt"><text class="tit">统一社会信用代码：</text><text>91101085620732606</text></view>
					<view class="txt"><text class="tit">企业类型：</text><text>其他有限责任公司</text></view>
					<view class="flexcw">
						<view class="txt"><text class="tit">法人姓名：</text><text>林振宇</text></view>
						<view class="txt"><text class="tit">注册资金：</text><text>1000万元</text></view>
					</view>
					<view class="txt"><text class="tit">成立日期：</text><text>2018年09月20日</text></view>
					<view class="txt"><text class="tit">营业期限：</text><text>2018年09月20日 至 2038年09月19日</text></view>
				</view>
			</view>
		</block>
		<!-- 历史申贷记录 -->
		<block v-if="type=='sdjl'">
			<view class="lists sdjl" v-for="(ite,idx) in datalist" @click="getDetail"  >
				<view class="listsm">
					<view class="txt"><text class="tit">申贷企业：</text><text>安徽嘉欣医疗用品有限公司</text>
						<text class="flex1"></text>
						<view class="look flexc">查看<image :src="rimg"></image></view>
					</view>
					<view class="txt"><text class="tit">申报时间：</text><text>2024-03-21 15:13:58</text></view>
					<view class="txt"><text class="tit">归档时间：</text><text>2024-04-18  15:13:58</text></view>
					<view class="flexcw">
						<view class="txt"><text class="tit">申请额度：</text><text>1000万元</text></view>
						<view class="txt"><text class="tit">使用期限：</text><text>12个月</text></view>
					</view>
					<view class="flexcw">
						<view class="txt"><text class="tit">申贷银行：</text><text>农商行</text></view>
						<view class="txt"><text class="tit">担保类型：</text><text>担保贷款</text></view>
					</view>
					<view class="flexcw">
						<view class="txt"><text class="tit">资金用途：</text><text>流动资金周转</text></view>
						<view class="txt"><text class="tit">还款来源：</text><text>营业收入</text></view>
					</view>
				</view>
			</view>
		</block>
		<!-- 文件 -->
		<block v-if="type=='file'">
			<view class="lists" v-for="(ite,idx) in datalist" @click="getDetail"  >
				<view class="listtop" style="display: block;">
					<view class="toptit over">安徽嘉欣医疗用品有限公司</view>
				</view>
				<view class="listsm">
					<view class="txt"><text class="tit">申贷次数</text><text class="line">|</text><text>2次</text></view>
					<view class="txt"><text class="tit">最近申贷时间</text><text class="line">|</text><text>2023年08月23日</text>
						<view class="flex1"></view>
						<view class="looktxt">查看文件</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 文件详情列表 -->
		<block v-if="type=='filedet'">
			<view class="files" v-for="(ite,idx) in datalist" >
				<view class="fdtit">
					<image :src="titimg"></image>
					<view>2023年08月23日</view>
				</view>
				<view class="fdzbox">
					<image :src="filz"></image>
					<view>
						安徽嘉欣医疗用品有限公司230823文档.zip
					</view>
				</view>
				<view class="fdbtns flexcj mt18">
					<view class="lbtns flexc" @click="getDetail">
						<image :src="files"></image>文件详情列表
					</view>
					<view class="rbtns flexc">
						<image :src="fup"></image>保存至手机
					</view>
				</view>
			</view>
		</block>
		<view class="shax" v-if="wtdt">{{wtdt}}</view>
	</view>
	<block v-else>
		<no-data></no-data>
	</block>
  </view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import { selectValue } from '@/utils/common.js';
	import noData from "@/components/nodata/nodata.vue"
  export default {
	props:{
		datalist: {
			type: Array,
			default () {
				return []
			}
		},
		wtdt:{
			type: String,
			default () {
				return ''
			}
		},
		type:{
			type: [String,Number],
			default () {
				return ''
			}
		},
	},
	components:{
		noData
	},
	data(){
		return{
			start:require('@/work/static/images/start.png'),
			copy:require('@/work/static/images/copy.png'),
			rimg:require('@/work/static/images/rimga.png'),
			files:require('@/work/static/images/files.png'),
			filz:require('@/work/static/images/filz.png'),
			titimg:require('@/work/static/images/infotit.png'),
			fup:require('@/work/static/images/fup.png'),
		}
	},
	onLoad: function() {
	},
	methods:{
		checkPermi, checkRole,
		kaType(ite){
			return selectValue(this.tajdlist, ite);
		},
		getDetail(e){
			this.$emit('getDetail',e)
		},
		getTuiFn(ite,txt,sh){
			var that=this;
			// if(txt=='scfk'&&sh==0){
			// 	uni.showModal({
			// 		title: '确认立案',
			// 		content: "是否确认立案",
			// 		cancelText: '取消',
			// 		confirmText: '确认',
			// 		success: function(res) {
			// 			if (res.confirm) {
			// 				var obj={
			// 					id:ite.proposalId,
			// 					type:txt,
			// 					sh:sh,
			// 				}
			// 				that.$emit('getTuiFn',obj)
			// 			} else if (res.cancel) {
			// 				// console.log('用户点击取消');
			// 			}
			// 		}
			// 	});
			// }else 
			if(txt=='lmta'){
				var str='同意'
				if(sh==2){
					str='反对'
				}
				uni.showModal({
					title: '确认'+str+'联名',
					content: "是否确认"+str+"联名",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							var obj={
								id:ite.proposalId,
								type:txt,
								sh:sh,
							}
							that.$emit('getTuiFn',obj)
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			}else{
				var obj={
					id:ite.proposalId,
					type:txt,
					sh:sh,
					ite:ite
				}
				this.$emit('getTuiFn',obj)
			}
			
		},
		typeFn(data){
			if(data){
				var newArr=[]
				var astr=data.split('-')
				astr.forEach(ite=>{
					var a=ite.substring(0,5);
					newArr.push(a)
				})
				return newArr.join('-')
			}else{
				return ''
			}
		},
	},
	
  }
</script>

<style lang="scss" scoped>
.lists{background: #FFFFFF;box-shadow: 0px 0px 10rpx 0px rgba(216,216,216,0.4);border-radius: 20rpx;padding: 0 20rpx;margin-bottom: 24rpx;
	&.qy{padding: 0 24rpx;
		.listtop{
			padding: 40rpx 14rpx 42rpx;
		}
		.listsm{padding: 40rpx 14rpx 2rpx 0;
			.txt{font-size: 30rpx;margin-bottom: 44rpx;padding-left: 14rpx;
				text{color: #666666;}
			}
		}
	}
	&.sdjl{
		.listsm{padding: 40rpx 10rpx 2rpx 0;
			.txt{font-size: 30rpx;margin-bottom: 44rpx;padding-left: 10rpx;align-items: flex-start;
				text{color: #666666;}
			}
		}
		.look{flex: 0 0 auto;display: inline-flex;margin-left: 16rpx;line-height: 40rpx;font-weight: 500;font-size: 26rpx;color: #28C529;
			image{width: 14rpx;height: 20rpx;margin-left: 14rpx;}
		}
	}
	.listtop{display: flex;align-items: center;overflow: hidden;border-bottom: 2rpx solid #E6E6E6;padding: 34rpx 12rpx;
		.toptit{font-weight: bold;font-size: 30rpx;color: #222327;}
		.statbox{min-width: 140rpx;height: 36rpx;background-color: rgba(255,177,50,0.3);padding: 0 14rpx;box-sizing: border-box;font-weight: bold;font-size: 22rpx;color: #FF6924;display: flex;align-items: center;flex: 0 0 auto;border-radius: 10rpx;margin-left: 20rpx;
			image{width: 22rpx;height: 22rpx;margin-left: 6rpx;}
		}
		.head{width: 86rpx;height: 86rpx;background: #00A9F0;border-radius: 10rpx;font-weight: bold;margin-right: 36rpx;flex: 0 0 auto;
font-size: 40rpx;display: flex;align-items: center;justify-content: center;color: #FFFFFF;
		}
		.headt{font-weight: bold;font-size: 40rpx;color: #222327;margin-bottom: 10rpx;}
		.headx{font-weight: 500;font-size: 24rpx;color: #666666;}
	}
	.adr{font-weight: 500;font-size: 26rpx;color: #666666;margin-top: 12rpx;}
	.listsm{padding: 32rpx 10rpx 16rpx 0;
		.tit{font-weight: bold;margin-right: 8rpx;flex: 0 0 auto;}
		.line{margin-right: 8rpx;color: #aaaaaa;flex: 0 0 auto;}
		.txt{font-size: 26rpx;color: #222327;margin-bottom: 24rpx;display: flex;padding-left: 10rpx;}
		.copyimg{width: 30rpx;height: 30rpx;margin-left: 8rpx;display: flex;align-items: center;justify-content: center;
			image{width: 18rpx;height: 20rpx;}
		}
		.looktxt{font-weight: 500;flex: 0 0 auto;font-size: 26rpx;color: #00A9F0;margin-left: 10rpx;}
		.flexcw{
			display: flex;align-items: center;flex-wrap: wrap;
			.txt{min-width: 50%;}
		}
	}
}
// 文件
.files{padding:40rpx 36rpx 36rpx;border-bottom: 2rpx solid #E6E6E6;
	.fdtit{display: flex;font-weight: bold;margin-bottom: 44rpx;
		view{font-size: 30rpx;color: #00A9F0;}
		image{width: 30rpx;height: 30rpx;margin-right: 14rpx;flex: 0 0 auto;margin-top: 5rpx;}
	}
	.fdzbox{width: 100%;padding: 24rpx 30rpx;box-sizing: border-box;display: flex;align-items: center;background: #E1F3FA;border-radius: 20rpx;
		image{width: 62rpx;height: 74rpx;margin-right: 32rpx;flex: 0 0 auto;}
		view{font-weight: bold;font-size: 26rpx;color: #00A9F0;}
	}
	.fdbtns{
		.lbtns{font-weight: 500;font-size: 26rpx;color: #28C529;
			image{width: 24rpx;height: 20rpx;margin-right: 14rpx;}
		}
		.rbtns{font-weight: 500;font-size: 26rpx;color: #00A9F0;
			image{width: 22rpx;height: 24rpx;margin-right: 12rpx;transform: rotate(180deg);}
		}
	}
}
</style>