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

<template>
	<view class="details">
		<view class="detop">
			<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>
		
		<!-- 归档 归档后没有业务进度-->
		<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="main">
			<!-- tab -->
			<view class="tabs">
				<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 class="mainb">
				<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"></ewjcj>
				</block>
			</view>
			<!-- 法人信息 -->
			
		</view>
		<block v-if="!gdflag">
			<view class="h50"></view>
			<view class="footbtns">
				<view class="fbtns bga" @click="getShFn">审核</view>
				<view class="fbtns bgb">上传文件</view>
				<view class="fbtns bga" @click="getSubmit">查看担保意向函</view>
			</view>
		</block>
		
		<pop-up :type="type" :stepList="stepList" :stepval="stepval" @getClose="getClose"></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:true,
			}
		},
		methods:{
			checkPermi, checkRole,
			getTab(val){
				this.tabval=val
			},
			getClose(){
				this.type=''
			},
			getShFn(){
				this.type='sh'
			},
			getSpeedFn(){
				if(this.type){
					this.type=''
				}else{
					this.type='ywjd'
				}
			},
			// getNextFn(){
			// 	this.$tab.navigateTo("/work/pages/business/add")
			// },
			getPreview(url) {
				var newArr=[];
				newArr.push(url)
				uni.previewImage({
					urls: newArr,
					current:0,
					success: function(data) {
						
					},
					fail: function(err) {
						
					}
				});
			},
			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>
.detop{background: #FFFFFF;padding:0rpx 24rpx;margin-bottom: 28rpx;flex: 0 0 auto;
	.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;
		.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: fixed;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;}
	}	
}
</style>