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

<template>
  <view>
	<view class="boxt" v-for="(ite,idx) in fileList" :key="idx">
		<view class="txt">
			<view class="flex1">{{ite.tit}}</view>
			<view class="edit" v-if="ite.qflag">
				<image :src="edit"></image>
				<view>在线签名</view>
			</view>
			<text  @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='fidx'>
				<view class="flext" @click="getDown(fite.url)">
					<view class="imgl"><image :src="filico" ></image></view>
					<view class="tit">{{fite.name}}</view>
				</view>
				<text class="txta" @click="getDown(a)">预览</text>
				<!-- <view class="delimg flex0" @click.stop="getDelFj(idx)">
					<image :src="fdelimg"></image>
				</view> -->
			</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'),
			edit:require('@/work/static/images/edit.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'}]},
				]
		}
	},
	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: 46rpx;padding: 0 6rpx;}
	.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;}
	.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;}
	}
	.txta{color: #28C529;font-weight: 500;line-height: 40rpx;flex: 0 0 auto;margin-left: 18rpx;padding: 0 6rpx;}
}
.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;}
}
.edit{flex:0 0 auto;display: flex;align-items: center;
	view{font-weight: 500;font-size: 26rpx;color: #00A9F0;}
	image{width: 20rpx;height: 24rpx;margin-right: 2rpx;}
}
</style>