shuju_ui/qs_zhaoshang/components/zdclue/tbasic.vue

<template>
	<view>
		<!-- 项目信息 -->
		<uni-collapse  ref="collapse" v-model="value" >
			<!--  -->
			<uni-collapse-item title="项目信息" :show-arrow='false' class='cldelista'   :border="false" title-border="none">
				<template v-slot:title>
					<view class="flexc contentt">
						<view class="flex0 f16 fw cofe">项目信息</view>
						<view  class="flex1 cldelistz" :class="value[0]==0?'act':''">
							<view class="cofe f15">{{value[0]==0?'信息折叠':'信息展开'}}</view>
							<image :src="upimg" ></image>
						</view>
					</view>
					<!-- 展示的内容 -->
					<view class="content pdt10" v-if="!value[0]||value[0]!=0">
						<view class="contenta">
							<view class="tit">项目名称</view>
							<view class="txt">{{datainfo.xmmc}}</view>
						</view>
						<view class="contenta">
							<view class="tit">项目单位</view>
							<view class="txt">{{datainfo.xmdw}}</view>
						</view>
					</view>
				</template>
				<view class="content">
					<view class="contenta">
						<view class="tit">项目名称</view>
						<view class="txt">{{datainfo.xmmc}}</view>
					</view>
					<view class="contenta">
						<view class="tit">项目单位</view>
						<view class="txt">{{datainfo.xmdw}}</view>
					</view>
					<view class="border"></view>
					<view class="contenta flexcj">
						<view class="tit flex0  mr10">牵头责任单位</view>
						<view class="txt">{{datainfo.qtzrdw}}</view>
					</view>
					<view class="contenta flexcj">
						<view class="tit flex0  mr10">牵头市领导</view>
						<view class="txt">{{datainfo.qtsld}}</view>
					</view>
					<view class="contenta flexcj">
						<view class="tit flex0  mr10" style="max-width: 220rpx;">主要建设规模和内容</view>
						<view class="txt">{{datainfo.gmnr}}</view>
					</view>
					<view class="contenta flexcj">
						<view class="tit flex0  mr10">计划开工时间</view>
						<view class="txt">{{datainfo.jhkgsj}}</view>
					</view>
					<view class="contenta flexcj">
						<view class="tit flex0  mr10">项目总投资(万元)</view>
						<view class="txt">{{datainfo.xmztz}}</view>
					</view>
				</view>
			</uni-collapse-item>
			
			<uni-collapse-item title="资金来源" class='cldelista' :show-arrow='false' :border="false" title-border="none">
				<template v-slot:title>
					<view class="flexc contentt">
						<view class="flex0 f16 fw cofe">资金来源</view>
						<view  class="flex1 cldelistz" :class="value[0]==1||value[1]==1?'act':''">
							<view class="cofe f15">{{value[0]==1||value[1]==1?'信息折叠':'信息展开'}}</view>
							<image :src="upimg" ></image>
						</view>
					</view>
				</template>
				<view class="content">
					<view class="contenta flexcj">
						<view class="tit flex0  mr10">合计(万元)</view>
						<view class="txt">{{datainfo.hj}}</view>
					</view>
					<view class="contenta flexcj">
						<view class="tit flex0  mr10">上级补助资金(万元)</view>
						<view class="txt">{{datainfo.sjbz}}</view>
					</view>
					<view class="contenta flexcj">
						<view class="tit flex0  mr10">市政财本资金(万元)</view>
						<view class="txt">{{datainfo.sczbj}}</view>
					</view>
					<view class="contenta flexcj">
						<view class="tit flex0  mr10">专项债(万元)</view>
						<view class="txt">{{datainfo.zxz}}</view>
					</view>
					<!-- <view class="contenta flexcj">
						<view class="tit flex0  mr10">PPP(万元)</view>
						<view class="txt">{{datainfo.ppp}}</view>
					</view> -->
					<view class="contenta flexcj">
						<view class="tit flex0  mr10">融资(万元)</view>
						<view class="txt">{{datainfo.rz}}</view>
					</view>
					<view class="contenta flexcj">
						<view class="tit flex0  mr10">企业自筹(万元)</view>
						<view class="txt">{{datainfo.qyzc}}</view>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		<view class='cldelista cldelistb'>
			<view class="contenta flexcj">
				<view class="tit flex0  mr10">年度计划完成投资(万元)</view>
				<view class="txt">{{datainfo.ndjh}}</view>
			</view>
			<view class="contenta flexcj">
				<view class="tit flex0  mr10">上级补助资金渠道</view>
				<view class="txt">{{datainfo.sjbzzjqd}}</view>
			</view>
			<view class="contenta flexcj">
				<view class="tit flex0  mr10">融资渠道</view>
				<view class="txt">{{datainfo.rzqd}}</view>
			</view>
		</view>
		<view class='cldelista cldelistb'>
			<view class="contenta">
				<view class="tit">备注</view>
				<view class="txt">{{datainfo.remark}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { selectDictLabel } from '@/utils/common.js';
	
	export default{
		props:{
			datainfo:{
				type: Object,
				default () {
					return {}
				}
			},
		},
		data(){
			return{
				upimg:require('@/static/images/index/up.png'),
				wimg:require('@/static/images/index/wicon.png'),
				downimg:require('@/static/images/index/down.png'),
				value:[],
				valuetwo:[],
				content: '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。',
			}
		},
		filters: {
			kaType(data, list) {
				return selectDictLabel(list, data);
			}
		},
		methods:{
			getDown(url){
				this.$emit('getDown',url)
			},
			getYzAdr(data){
				return selectDictLabel(this.yzadr, data);
			},
			getCytype(data){
				return selectDictLabel(this.cytype, data);
			},
			getProject(data){
				return selectDictLabel(this.projectlist, data);
			},
			getBackground(data){
				return selectDictLabel(this.backgroundlist, data);
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.cldelista{
	border-top: 2rpx solid #E5E5E5;
	// &:last-of-type{border-bottom: none;}
	.contentt{padding:48rpx 28rpx;
		.cldelistz{display: flex;align-items: center;justify-content: flex-end;
			image{width: 26rpx;height: 20rpx;margin-left: 20rpx;transition: all .5s; }
			&.act{
				image{transform: rotate(-180deg);}
			}
		}
	}
	.content{padding: 0rpx 28rpx 40rpx 28rpx;}
	.contenta{padding: 22rpx 0;
		.tit{font-size: 32rpx;font-weight: bold;color: #343434;margin-bottom: 20rpx;}
		.txt{font-size: 32rpx;color: #666666;}
	}
	&.cldelistb{padding: 48rpx 28rpx;
		.tit{margin-bottom: 0;}
	}
	.cldelistbf {
		image{margin-right: 18rpx;flex: 0 0 auto;}
		.imgl{width: 40rpx;height: 44rpx;display: flex;align-items: center;justify-content: center;margin-right: 16rpx;
			image{width: 38rpx;height: 30rpx;}
			}
		.imgr{width: 36rpx;height: 32rpx;}
	}
}
</style>