shuju_ui/qs_zhaoshang/components/clue/signup.vue

<template>
	<view>
		<!-- 项目信息 -->
		<uni-collapse  ref="collapse" v-model="value" @change="changeone" >
			<!--  -->
			<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.qyrq}}</view>
						</view>
						<view class="contenta">
							<view class="tit">协议投资额(万元)</view>
							<view class="txt">{{datainfo.xytze}}</view>
						</view>
						<view class="contenta">
							<view class="tit">项目所在地</view>
							<view class="txt">{{datainfo.xmszd}}</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.dfqyr}}</view>
					</view>
					<view class="contenta">
						<view class="tit">我方签约人(含单位、职务、姓名)</view>
						<view class="txt">{{datainfo.wfqyr}}</view>
					</view>
					<view class="contenta">
						<view class="tit">填报日期</view>
						<view class="txt">{{datainfo.tbrq}}</view>
					</view>
					<view class="contenta">
						<view class="tit">签约日期</view>
						<view class="txt">{{datainfo.qyrq}}</view>
					</view>
					<view class="contenta">
						<view class="tit">协议投资额(万元)</view>
						<view class="txt">{{datainfo.xytze}}</view>
					</view>
					<view class="contenta">
						<view class="tit">市外资金(万元)</view>
						<view class="txt">{{datainfo.swzj}}</view>
					</view>
					<view class="contenta">
						<view class="tit">固定资产投资额(万元)</view>
						<view class="txt">{{datainfo.gdzctze}}</view>
					</view>
					<view class="contenta">
						<view class="tit">签约跟进人姓名、职务、联系方式</view>
						<view class="txt">{{datainfo.xmgjrxm}}
						<block v-if="datainfo.xmgjrzw">、</block>{{datainfo.xmgjrzw}}
						<block v-if="datainfo.xmgjrsjh">、</block>{{datainfo.xmgjrsjh}}</view>
					</view>
					<view class="contenta">
						<view class="tit">项目所在地(园区或乡镇)</view>
						<view class="txt">{{datainfo.xmszd}}</view>
					</view>
					<view class="contenta">
						<view class="tit">所属行业</view>
						<view class="txt">{{datainfo.sshy}}</view>
					</view>
					<view class="contenta">
						<view class="tit">投资方式</view>
						<view class="txt">{{datainfo.tzfs}}</view>
					</view>
					<view class="contenta">
						<view class="tit">建设方式</view>
						<view class="txt">{{datainfo.jsfs}}</view>
					</view>
					<view class="contenta">
						<view class="tit">是否宜商</view>
						<view class="txt">{{datainfo.sfys=='Y'?'是':'否'}}</view>
					</view>
					<view class="contenta">
						<view class="tit">建设内容</view>
						<view class="txt">{{datainfo.jsnr}}</view>
					</view>
					<view class="contenta">
						<view class="tit">租赁厂房(平方米)</view>
						<view class="txt">{{datainfo.zlcf}}</view>
					</view>
					<view class="contenta">
						<view class="tit">供地面积(亩)</view>
						<view class="txt">{{datainfo.gdmj}}</view>
					</view>
					<view class="contenta">
						<view class="tit">立项日期</view>
						<view class="txt">{{datainfo.lxrq}}</view>
					</view>
					<view class="contenta">
						<view class="tit">拟开工日期</view>
						<view class="txt">{{datainfo.nkgrq}}</view>
					</view>
					<view class="contenta">
						<view class="tit">存在问题</view>
						<view class="txt">{{datainfo.czwt}}</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">
						<view class="tit">注册企业名称</view>
						<view class="txt">{{datainfo.zcqymc}}</view>
					</view>
					<view class="contenta">
						<view class="tit">注册日期</view>
						<view class="txt">{{datainfo.zcrq}}</view>
					</view>
					<view class="contenta">
						<view class="tit">注册资本(万元)</view>
						<view class="txt">{{datainfo.zczb}}</view>
					</view>
					
					<view class="contenta">
						<view class="tit">法人代表</view>
						<view class="txt">{{datainfo.frdb}}</view>
					</view>
					<view class="contenta">
						<view class="tit">联系方式</view>
						<view class="txt">{{datainfo.lxfs}}</view>
					</view>
					<view class="contenta">
						<view class="tit">经营范围</view>
						<view class="txt">{{datainfo.jyfw}}</view>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		<!-- 备注 -->
		<block v-if="datainfo.zsyzFjList">
			<view class='cldelista cldelistb' >
				<!-- <view class="contenta" v-if="datainfo.remark">
					<view class="tit">备注</view>
					<view class="txt">{{datainfo.remark}}</view>
				</view> -->
				<view class="contenta " v-if="datainfo.zsyzFjList">
					<view class="tit">附件</view>
					<view class="txt flexcj cldelistbf mb10" v-for="ite,idx in datainfo.zsyzFjList" :key='idx'>
						<view class="flext f16 c6">
							<view class="imgl">
								<image :src="wimg" ></image>
							</view>
							
							<view>{{ite.fjName}}</view>
							</view>
						<view class="flexc f16 co28 flex0" @click="getDown(ite.path)">
							<image :src="downimg" class="imgr"></image>
							预览</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	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: '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。',
			}
		},
		methods:{
			getDown(url){
				this.$emit('getDown',url)
			},
			changeone(e){
				// console.log(e,9)
			},
			changetwo(e){
				// console.log(e,9)
			}
		}
	}
</script>

<style lang="scss" scoped>
.cldelista{
	border-bottom: 2rpx solid #E5E5E5;
	.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;}
	.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>