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

<template>
	<view class="details">
		<view class="zxtop">
			<view class="failtit">该业务申请未通过风险部审核，可完善信息后进行申诉</view>
			<view class="detop">
				<!-- 归档 归档后没有业务进度-->
				<image :src="gdicoimg" class="gdimg" v-if="gdflag"></image>
				<view class="speed" v-else @click="getSpeedFn" :style="type=='ywjd'?'z-index: 6;':''">
					<image :src="speedimg"></image>
					<view>业务进度</view>
				</view>
				<view class="head">
					<view class="top">
						<view class="toptit">安徽嘉欣医疗用品有限公司</view>
						<view class="statbox">专精特新<image :src="start"></image></view>
					</view>
					<view class="adr">企业地址 | 潜山市经济开发区</view>
					<view class="adr">申报时间 | 2024-03-21 15:12:48</view>
					<view class="adr">归档时间 | 2024-03-21 15:12:48</view>
				</view>
				<view class="deta">
					<view class="lists">
						<view class="tit">申请额度</view>
						<view class="txt">500<text>/万元</text></view>
					</view>
					<view class="lists">
						<view class="tit">使用期限</view>
						<view class="txt">12<text>/个月</text></view>
					</view>
					<view class="lists">
						<view class="tit">申贷银行</view>
						<view class="txt">农商行</view>
					</view>
					<view class="lists">
						<view class="tit">资金用途</view>
						<view class="txt">流动资金周转</view>
					</view>
					<view class="lists">
						<view class="tit">还款来源</view>
						<view class="txt">营业收入</view>
					</view>
					<view class="lists">
						<view class="tit">担保类型</view>
						<view class="txt">担保贷款</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="main">
			<!-- tab -->
			<view class="tabs" :class="fixedflag?'tabfix':''">
				<view class="tab" :class="tabval==ite.val?'act':''" v-for="(ite,idx) in tabList" :key="idx" @click="getTab(ite.val)">{{ite.tit}}</view>
			</view>
			<view style="height:116rpx;" v-if="fixedflag"></view>
			<!-- 企业信息 -->
			<view class="mainb" :style="'min-height: ' + minheight + 'px;'">
				<block v-if="tabval==0">
					<aqyxx @getDown="getDown" :datainfo="datainfo"></aqyxx>
				</block>
				<block v-if="tabval==1">
					<bfrxx @getDown="getDown" :datainfo="datainfo"></bfrxx>
				</block>
				<block v-if="tabval==2">
					<cfdbrxx @getDown="getDown" :datainfo="datainfo"></cfdbrxx>
				</block>
				<block v-if="tabval==3">
					<dfjxx @getDown="getDown" :datainfo="datainfo"></dfjxx>
				</block>
				<block v-if="tabval==4">
					<ewjcj @getDown="getDown" :datainfo="datainfo" @getEdit="getEdit"></ewjcj>
				</block>
			</view>
			<!-- 法人信息 -->
			
		</view>
		<block v-if="!gdflag">
			<view class="h50"></view>
			<view class="footbtns">
				<!-- 申请审核 start-->
				<view class="fbtns bga" @click="getShFn('sh')">审核</view>
				<!-- 业务审核后出具担保意向函-->
				<!-- <view class="fbtns bgb">上传文件</view>
				<view class="fbtns bga" @click="getSubmit">查看担保意向函</view> -->
				<!-- end -->
				<!-- a,b角按钮 start-->
				<view class="fbtns bgb" @click="getShFn('jztcsh')">尽职调查反馈</view>
				<view class="fbtns bga" @click="getShFn('ajssh')">a审核</view>
				<view class="fbtns bga" @click="getShFn('bjssh')">b审核</view>
				<!-- 审核后 -->
				<view class="fbtns bga" @click="getMoreFn('more')">更多操作</view>
				<!-- 未通过申诉 -->
				<view class="fbtns bga">申诉</view>
				<!-- end -->
				<!-- 风险部门 start-->
				<view class="fbtns bgb" @click="getMoreFn('wb')">外部工具平台</view>
				<view class="fbtns bga" @click="getMoreFn('fxmore')">更多操作</view>
				<!-- end -->
				<!-- 上会管理员 start -->
				<view class="fbtns bgb" @click="getMoreFn('shmore')">更多操作</view>
				<view class="fbtns bga" @click="getShFn('shsh')">审核</view>
				<!-- 上会管理员 end -->
				<!-- 合同签约start -->
				<view class="fbtns bgb" @click="getShFn('shhj')">上传附件</view>
				<view class="fbtns bga" @click="getMoreFn('htqy')">出具合同</view>
				<view class="fbtns bga" @click="getqmFn">签名</view>
				<!-- 合同签约end -->
				<!-- 风险部放款 start-->
				<view class="fbtns bgb" @click="getShFn('shhj')">上传附件</view>
				<view class="fbtns bga" @click="">出具放款合规表</view>
				<!-- end -->
				<view class="fbtns bga" @click="">放款通知书</view>
				<view class="fbtns bga" @click="">一键归档</view>
			</view>
		</block>
		<!-- 更多操作 -->
		<view class="bgbox" @click="getClose" v-if="moreflag"></view>
		<view v-if="moreflag" class="morebox">
			<view class="molists">
				<!-- 审核详情后 -->
				<block v-if="mtype=='more'">
					<view class="mcoa" @click="getShFn('shhj')">上传附件</view>
					<view>撤回</view>
				</block>
				<!--风险部门 start 外部工具平台 -->
				<block v-if="mtype=='wb'">
					<view >中国个人信用查询网</view>
					<view class="mcoa">中国执行信息公开网</view>
					<view>最高人民法院诉讼服务网</view>
					<view>国家企业信用信息公示系统</view>
				</block>
				<!-- 更多操作 -->
				<block v-if="mtype=='fxmore'">
					<view @click="getShFn('fxbmsh')">审核</view>
					<view class="mcoa">出具材料合规表</view>
					<view @click="getShFn('shhj')">上传附件</view>
					<view>撤回</view>
				</block>
				<!-- 风险部门 end -->
				<!-- 上会管理员 start -->
				<block v-if="mtype=='shmore'">
					<view>出具评审意见签批表</view>
					<view class="mcoa">上会纪要</view>
					<view @click="getShFn('shhj')">上传附件</view>
				</block>
				<!-- 上会管理员 end -->
				<!-- 合同签约 start -->
				<block v-if="mtype=='htqy'">
					<view>委托保证合同</view>
					<view class="mcoa">保证反担保合同(法人)</view>
					<view>保证反担保合同(自然人)</view>
					<view>抵押反担保合同(法人)</view>
					<view>抵押反担保合同(自然人)</view>
				</block>
				<!-- 合同签约 end -->
			</view>
			<view class="surbtns">确认</view>
		</view>
		<pop-up :type="type" :stepList="stepList" :stepval="stepval" @getClose="getClose" @getupSubmit="getupSubmit"></pop-up>
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import popUp from "@/work/components/popup/popup.vue"
	import aqyxx from "@/work/components/business/aqyxx.vue"
	import bfrxx from "@/work/components/business/bfrxx.vue"
	import cfdbrxx from "@/work/components/business/cfdbrxx.vue"
	import dfjxx from "@/work/components/business/dfjxx.vue"
	import ewjcj from "@/work/components/business/ewjcj.vue"
	import {uploadmore} from '@/utils/common.js'
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		components:{aqyxx,bfrxx,cfdbrxx,dfjxx,ewjcj,popUp},
		data(){
			return{
				start:require('@/work/static/images/start.png'),
				titimg:require('@/work/static/images/infotit.png'),
				speedimg:require('@/work/static/images/speed.png'),
				gdicoimg:require('@/work/static/images/gdico.png'),
				datainfo:{},
				tabval:3,
				type:'',
				tabList:[{tit:"企业信息",val:0},{tit:"法人信息",val:1},{tit:"反担保人信息",val:2},{tit:"附件信息",val:3},{tit:"文件出具",val:4},],
				stepList:[
					{tit:"业务审核、分配",time:'2024-03-10 16:12',val:0},
					{tit:"担保初审",time:'2024-03-10 16:12',val:1},
					{tit:"尽职调查",time:'2024-03-10 16:12',val:2},
					{tit:"初审风险合规",time:'2024-03-10 16:12',val:3},
					{tit:"评审会",time:'2024-03-10 16:12',val:4},
					{tit:"合同签约",time:'2024-03-10 16:12',val:4},
					{tit:"放款合规风险审核",time:'2024-03-10 16:12',val:4},
					{tit:"放款通知",time:'2024-03-10 16:12',val:4},
					{tit:"归档",time:'2024-03-10 16:12',val:4},
				],
				stepval:2,
				gdflag:false,
				moreflag:false,
				mtype:'',
				minheight:0,
				listTop:0,//距离顶部的距离
				fixedflag:false,
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (e) => {
					this.minheight = e.screenHeight- 50;
				}
			})
			this.getHeightFn()
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			var listTop=Number(this.listTop)
			if(scrollTop>listTop){
				this.fixedflag=true
			}else{
				this.fixedflag=false
			}
		},
		methods:{
			checkPermi, checkRole,
			getTab(val){
				this.tabval=val;
				uni.pageScrollTo({
					scrollTop: Number(this.listTop),
					duration: 0
				})
			},
			getClose(){
				this.type='';
				this.moreflag=false;
			},
			getupSubmit(){
				if(this.type=='ajssh'||this.type=='bjssh'||this.type=='fxbmsh'){
					this.type='confirm'
				}
			},
			getShFn(type){
				this.type=type;
				this.moreflag=false;
			},
			getMoreFn(type){
				this.mtype=type;
				this.moreflag=true
			},
			getSpeedFn(){
				if(this.type){
					this.type=''
				}else{
					this.type='ywjd'
				}
			},
			getqmFn(){
				this.$tab.navigateTo("/work/pages/business/sign")
			},
			getHeightFn(){
				let query = uni.createSelectorQuery().in(this);
				//需要给黄色区域设置一个id标识，在这里是demo
				query.select('.zxtop').boundingClientRect(data => {
					this.listTop = data.height//赋值，待会要用
				}).exec();
			},
			getPreview(url) {
				var newArr=[];
				newArr.push(url)
				uni.previewImage({
					urls: newArr,
					current:0,
					success: function(data) {
						
					},
					fail: function(err) {
						
					}
				});
			},
			onuploadEnd(item) {
				var newobj={}
				var responseText=JSON.parse(item.responseText)
				newobj.name=responseText.originalFilename;
				newobj.url=responseText.fileName;
				this.filelist.push(newobj)
				// this.datainfo.zsyzFjList=JSON.parse(JSON.stringify(this.filelist))
			},
			getEdit(){
				this.type='shhj'
			},
			getDown(e){
				uni.showLoading({
					title: '加载中'
				});
				var url=baseUrl+e;
				uni.downloadFile({
					url: url,//文件的下载路径
					success(result) {
							uni.hideLoading()
						var filePath = result.tempFilePath;
						   uni.openDocument({
						     filePath: filePath,
						     showMenu: true,
						     success: function (res) {
						       // console.log('打开文档成功');
						     }
						   });
					},
					fail(res) {uni.hideLoading()}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.failtit{background: #FFECEC;font-weight: 500;font-size: 26rpx;color: #FF6969;text-align: center;line-height: 36rpx;padding: 22rpx;}
.zxtop{padding-bottom: 2rpx;}
.detop{background: #FFFFFF;padding:0rpx 24rpx;margin-bottom: 28rpx;flex: 0 0 auto;
	position: relative;
	.head{
		padding: 40rpx 2rpx;border-bottom: 2rpx solid #E6E6E6;
		.top{display: flex;align-items: center;overflow: hidden;
			.toptit{font-weight: bold;font-size: 40rpx;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: 34rpx;
				image{width: 22rpx;height: 22rpx;margin-left: 6rpx;}
			}	
		}
		.adr{font-weight: 500;font-size: 26rpx;color: #666666;margin-top: 12rpx;}
	}
	.deta{display: flex;flex-wrap: wrap;padding: 16rpx 0 28rpx;
		.lists{padding:20rpx 0;width: 33.3%;display: flex;flex-direction: column;align-items: center;position: relative;
			&::after{width: 2rpx;height: 60rpx;background: #E6E6E6;content: '';position: absolute;right: 0;top: 50%;margin-top: -30rpx;}
			&:nth-of-type(3n){
				&::after{display: none;}
			}
			.tit{font-weight: 500;font-size: 26rpx;color: #AAAAAA;margin-bottom: 38rpx;}
			.txt{font-weight: bold;font-size: 30rpx;color: #222327;
				text{font-size: 26rpx;color: #666666;font-weight: normal;}
			}
		}
	}
}
.details{
	// display: flex;flex-direction: column;height: 100vh;overflow: hidden;
}
.main{background-color: #FFFFFF;flex: 1;display: flex;flex-direction: column;overflow: hidden;
	.tabs{padding: 0 6rpx 0 36rpx;display: flex;flex-wrap: nowrap;overflow: auto;flex: 0 0 auto;
		&.tabfix{position: fixed;left: 0;right: 0;z-index: 2;top: 0;background-color: #ffffff;border-bottom: 2rpx solid #E6E6E6;}
		.tab{font-weight: 500;font-size: 26rpx;color: #666666;height: 116rpx;display: flex;align-items: center;margin-right: 26rpx;flex: 0 0 auto;position: relative;
			&.act{color: #00A9F0;font-weight: bold;
				&::after{width: 100%;background: #00A9F0;position: absolute;left: 0;bottom: 0;
border-radius: 2rpx;height: 4rpx;content: '';}
			}
		}
	}
	.mainb{flex: 1;overflow: auto;}
}
.speed{width: 96rpx;height: 140rpx;background: #FFFFFF;box-shadow: 0px 0px 14rpx 0px rgba(184,184,184,0.76);border-radius: 20rpx;
	display: flex;align-items: center;flex-direction: column;justify-content: center;
	position: absolute;right: 28rpx;top: 86rpx;z-index: 2;padding: 0 26rpx; 
	image{width: 26rpx;height: 28rpx;margin-bottom: 8rpx;}
	view{font-weight: 500;font-size: 22rpx;color: #666666;}
}
.gdimg{width: 110rpx;height: 86rpx;position: absolute;right: 40rpx;top: 130rpx;}
.footbtns{width: 100%;height: 100rpx;position: fixed;left: 0;right: 0;bottom: 0;display: flex;border-top: 2rpx solid #E6E6E6;
	.fbtns{flex: 1;height: 100rpx;font-weight: bold;font-size: 30rpx;display: flex;align-items: center;justify-content: center;
		&.bga{background: $com-cd3;color: #FFFFFF;}
		&.bgb{background: #FFFFFF;;color: $com-cd3;}
	}	
}
.morebox{
	position: fixed;left: 0;right: 0;bottom: 0;z-index: 10;
	.molists{
		view{width: 100%;background: #ffffff;font-weight: 500;font-size: 30rpx;color: #222327;border-bottom: 2rpx solid #E6E6E6;min-height: 100rpx;display: flex;align-items: center;justify-content: center;padding: 10rpx;
		box-sizing: border-box;
		 &.mcoa{color: #00A9F0;}
		}
	}
	.surbtns{
		width: 100%;height: 100rpx;background: #00A9F0;display: flex;align-items: center;justify-content: center;
		font-size: 30rpx;color: #ffffff;margin-top: 24rpx;
	}
}
</style>