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

<template>
  <view>
	<view class="boxt" v-for="(ite,idx) in sbfjlist" :key="idx">
		<view class="txt">
			<view class="flex01">{{ite.label}}</view>
			<!-- <view class="upimg" @click="getXzFn"><image :src="fupimg"></image></view> -->
			<!-- <view class="flex1"></view> -->
			<!-- <text class="txta" @click="getDown(ite.val)">在线查看</text> -->
		</view>
		<view class="mt18" v-if="declareFj&&declareFj[ite.val]&&declareFj[ite.val].length">
			<view class="fjlists"  v-for="(fite,fidx) in declareFj[ite.val]" :key='fidx'>
				<view class="flext" @click="getDown(fite.url)">
					<view class="imgl"><image :src="filico" ></image></view>
					<view class="tit">{{fite.name}}</view>
				</view>
				<view class="upimg" @click="getXzFn(fite)"><image :src="fupimg"></image></view>
				<text class="txta" @click="getDown(fite.url)">预览</text>
			</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 {}
			}
		},
		declareFj:{
			type: Object,
			default () {
				return {}
			}
		},
		sbfjlist:{
			type: Array,
			default () {
				return []
			}
		}
	},
	components:{
		noData
	},
	data(){
		return{
			upimg: require('@/work/static/images/up.png'),
			fupimg:require('@/work/static/images/fdown.png'),
			filico:require('@/work/static/images/filico.png'),
			gdfilelist:[{name:'123'}],
			zheList:[{zheflag:true}],
		}
	},
	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)
		},
		getXzFn(ite){
			this.$emit("getXzFn",ite)
		},
	},
	
  }
</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: 26rpx;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;}

}
</style>