CKQ/pages/risk/rectify/history/index.vue

<template>
	<view class="reviewHistory">
		<template v-if="items.length>0">
			<uni-section title="历史记录" type="line" ></uni-section>
			<uni-group :title="item.activityInsTitle" mode="card" v-for="(item,index) in items" :key="index">
				<uni-list >
					<uni-list-item  title="处理时间" :right-text="item.actionTime"></uni-list-item>
					<uni-list-item  title="人员" :right-text="item.accountName"></uni-list-item>
					<uni-list-item  title="处理关卡" :right-text="item.activityInsTitle"></uni-list-item>
					<uni-list-item  title="处理动作" :right-text="item.actionTitle"></uni-list-item>
					<uni-list-item  title="处理说明" :note="item.actionRemark"></uni-list-item>
					<uni-list-item  title="附件">
						<template v-slot:header>
							<view style="padding-right: 16rpx;">附件</view>
						</template>
						<view slot="body">
							<template v-if="item.attachList.length>0">
								<view class="attachList-box">
									<image v-for="(attach,index) in item.attachList"
									class="attach" 
									:key="index"
									:src="attach.fileUrl" 
									@click="preview(item.attachList)"
									mode="widthFix" ></image>									
								</view>
							</template>
							<template v-else>
								<view style="font-size: 28rpx;color: #666;">没有附件</view>
							</template>								
						</view>
					</uni-list-item>
				</uni-list>
			</uni-group>
		</template>
		<template v-else>
			<view class="empty">
				<image class="icon-empty" src="/static/icon/empty.png" mode="widthFix"></image>
				<p>暂无历史信息</p>					
			</view>
		</template>		
	</view>


</template>

<script>
	export default{
		name:"reviewHistory",
		data(){
			return{
				items:[]
			}
		},
		methods:{
			loadData(items=[]){
				if(items.length>0){
					this.items=items			
				}
			},
			preview(attachList=[]){
				let urls=attachList.map(item=>item.fileUrl)
				uni.previewImage({
					urls
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reviewHistory{
		.empty{
			.icon-empty{
				display: block;
				width: 160rpx;
				margin: 364rpx auto 0;
			}	
			p{
				font-size: 28rpx;
				line-height: 1.8;
				color: #666;
				text-align: center;
			}			
		}
		::v-deep.attachList-box{
			display: flex;
			flex-wrap: wrap;
			.attach{
				display: block;
				width: 120rpx;
				border: 1rpx solid #eaeaea;
				padding: 10rpx;
				box-sizing: border-box;	
				margin: 8rpx;
				&:nth-child(4n){
					margin-left: 0;
				}
			}
		}
	}
</style>