shuju_ui/qs_zhaoshang/components/clue/startwork.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.kgrq}}</view>
						</view>
					</view>
				</template>
				<view class="content">
					<view class="contenta">
						<view class="tit">项目名称</view>
						<view class="txt">{{datainfo.xmmc}}</view>
					</view>
					<view class="contenta flexcj mb10">
						<view class="tit" style="margin-bottom: 0;">开工日期</view>
						<view class="txt">{{datainfo.kgrq}}</view>
					</view>
					<view class="contenta flexcj mb10">
						<view class="tit" style="margin-bottom: 0;">拟竣工日期</view>
						<view class="txt">{{datainfo.njgrq}}</view>
					</view>
					<view class="contenta flexcj mb10">
						<view class="tit" style="margin-bottom: 0;">试生产日期</view>
						<view class="txt">{{datainfo.sscrq}}</view>
					</view>
					<view class="contenta flexcj mb10">
						<view class="tit" style="margin-bottom: 0;">拟投产日期</view>
						<view class="txt">{{datainfo.ntcsj}}</view>
					</view>
					<view class="contenta flexcj">
						<view class="tit" style="margin-bottom: 0;">入统日期</view>
						<view class="txt">{{datainfo.rtsj}}</view>
					</view>
					<view class="contenta flexcj">
						<view class="tit" style="margin-bottom: 0;">拟入统日期</view>
						<view class="txt">{{datainfo.nrtsj}}</view>
					</view>
					
				</view>
			</uni-collapse-item>
			<!-- 进度照片-->
			<uni-collapse-item title="进度照片" v-if="ratelist.length" :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]==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" v-for="(ite,idx) in ratelist" :key="'info-'+idx">
					<view class="contenta flexcj">
						<view class="tit">进度</view>
						<view class="txt">{{ite.rateType}}</view>
					</view>
					<view class="contenta flexcj">
						<view class="tit">描述</view>
						<view class="txt">{{ite.jdDescribe}}</view>
					</view>
					<view class="contenta" >
						<view class="tit flex0">照片</view>

						<view class="photobox">
							<image class='photo' :src="baseUrl+pite" v-for="(pite,pidx) in ite.photo" @click="getPreview(ite.photo,pidx)" :key="'info1-'+pidx"></image>
						</view>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		<!-- 备注 -->
		<view class='cldelista cldelistb' >
			<view class="contenta flexcj" style="padding: 0;">
				<view class="tit" style="margin-bottom: 0;">存在问题</view>
				<view class="txt">{{datainfo.czwt||""}}</view>
			</view>
		</view>
		<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>
	import config from '@/config.js';
	const baseUrl = config.baseUrl;
	export default{
		props:{
			datainfo:{
				type: Object,
				default () {
					return {}
				}
			},
			ratelist:{
				type: Array,
				default () {
					return []
				}
			},
			xmxsmc:''
		},
		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: '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。',
				baseUrl:''
			}
		},
		mounted() {
			this.baseUrl=baseUrl;
		},
		methods:{
			getDown(url){
				this.$emit('getDown',url)
			},
			changeone(e){
				// console.log(e,9)
			},
			changetwo(e){
				// console.log(e,9)
			},
			// 查看照片
			getPreview(iurl,idx) {
				var newArr=[];
				iurl.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {
						
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				});
			},
		}
	}
</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;}
	}
}
.photobox{flex: 1;display: flex;align-items: center;flex-wrap: wrap;}
.photo{width: 200rpx;height: 200rpx;margin: 10rpx;}
</style>