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

<template>
  <view>
	<view class="boxt" v-for="(ite,idx) in fileList" :key="idx">
		<view class="txt">
			<view class="flex01">{{ite.tit}}</view>
			<view class="upimg"><image :src="fupimg"></image></view>
			<view class="flex1"></view>
			<text class="txta" @click="getDown(a)">在线查看</text>
		</view>
		<view class="mt18" v-if="ite.files&&ite.files.length">
			<view class="fjlists"  v-for="(fite,fidx) in ite.files" :key='ite.files'>
				<view class="flext" @click="getDown(fite.url)">
					<view class="imgl"><image :src="filico" ></image></view>
					<view class="tit">{{fite.name}}</view>
				</view>
			</view>
		</view>
	</view>
	<view class="upbox" :class="zheList[0].zheflag?'':'act'" @click="getZheFn(i0dx)">
		<image :src="upimg"></image>
		<view>查看更多</view>
	</view>

	
  </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:{
		datainfo: {
			type: Object,
			default () {
				return {}
			}
		},
	},
	components:{
		noData
	},
	data(){
		return{
			upimg: require('@/work/static/images/up.png'),
			fupimg:require('@/work/static/images/fup.png'),
			filico:require('@/work/static/images/filico.png'),
			gdfilelist:[{name:'123'}],
			zheList:[{zheflag:true}],
			fileList:[
				{tit:'委托担保申请书',files:[{url:"",name:'安徽嘉欣医疗用品有限公司0403担保意向函.doc'}]},
				{tit:'股东会议纪要',files:[]},
				{tit:'上一年度财务报表',files:[]},
				{tit:'当期财务报表',files:[]},
				{tit:'上一年度审计报告',qflag:true,files:[]},
				{tit:'纳税证明',qflag:true,files:[]},
				{tit:'近三月银行对账单',qflag:true,files:[]},
				{tit:'主要账户银行流水',files:[{url:"",name:'安徽嘉欣医疗用品有限公司0403担保意向函.doc'},{url:"",name:'安徽嘉欣医疗用品有限公司0403担保意向函.doc'}]},
				{tit:'购销合同',files:[]},
				{tit:'当前从事项目情况证明',qflag:true,files:[]},
				{tit:'企业基本注册信息查询单',qflag:true,files:[]},
				{tit:'企业固定资产证明',qflag:true,files:[]},
				]
		}
	},
	onLoad: function() {
	},
	methods:{
		checkPermi, checkRole,
		kaType(ite){
			return selectValue(this.tajdlist, ite);
		},
		getZheFn(idx){
			this.zheList[idx].zheflag=!this.zheList[idx].zheflag
		},
		getDown(url){
			this.$emit('getDown',url)
		},
		getPreview(url){
			this.$emit('getPreview',url)
		},
	},
	
  }
</script>

<style lang="scss" scoped>
.boxt{padding:44rpx 36rpx 40rpx;border-top: 2rpx solid #E6E6E6;}
.txt{display: flex;align-items: flex-start;
	view{font-weight: bold;font-size: 30rpx;color: #222327;}
	text{color: #28C529;font-weight: 500;line-height: 40rpx;flex: 0 0 auto;margin-left: 18rpx;}
	.upimg{width:40rpx;height: 40rpx;margin-left: 18rpx;display: flex;align-items: center;justify-content: center;
		image{width: 30rpx;height: 28rpx;}
	}
}
.fjlists {display: flex;align-items: flex-start;justify-content: space-between;margin-bottom: 20rpx;
	&:last-child{margin-bottom: 0;}
	// image{flex: 0 0 auto;}
	.imgl{width: 40rpx;height: 40rpx;display: flex;align-items: center;flex: 0 0 auto;
		image{width: 26rpx;height: 24rpx;}
	}
	.tit{font-size: 24rpx;color: #222327;font-weight: 500;margin-top: 4rpx;}
	.delimg{width: 40rpx;height:40rpx;margin-left: 16rpx;display: flex;align-items: center;justify-content: center;flex: 0 0 auto;
		image{width: 24rpx;height: 24rpx;}
	}
}
.upbox{display: flex;flex-direction: column;align-items: center;padding: 56rpx 0 40rpx;border-top: 2rpx solid #E6E6E6;
	image{width: 30rpx;height: 26rpx;margin-bottom: 18rpx;transform: rotate(180deg);}
	view{font-weight: 500;font-size: 26rpx;color: #666666;}

}
</style>