fb/fb-app/pages/complain/detail/detail.vue

<template>
	<view class="weui-panel weui-panel_access">
		<view>
			<u-navbar title="云食堂" :border-bottom="false">
			</u-navbar>
		</view>
	    <view class="weui-panel__bd">
	        <view class="weui-media-box weui-media-box_appmsg" hoverClass="weui-cell_active">
	            <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
	                <view class="weui-cell complain-username-cell">
	                    <view class="weui-cell__bd">{{detail.complainerName}}</view>
	                    <view class="weui-cell__ft">{{detail.createTime}}</view>
	                </view>
	                <view class="weui-uploader__bd images-panel" v-if="detail.imgArr.length>0">
	                    <view class="weui-uploader__files" id="uploaderFiles">
							<view class="weui-uploader__file" v-for="(item,index) in detail.imgArr" :key="index">			
								<u-image @click="openImg(item)" width="156rpx" height="156rpx" :src="item"></u-image>
							</view>
	                    </view>
	                </view>
	                <view class="complain-content">
	    			  【{{detail.canteenName}}】{{detail.remark}}
	    			</view>
	            </view>
	        </view>
	    </view>
	    <view class="weui-panel__ft" v-if="detail.replay">
	        <view class="weui-cell weui-cell_access weui-cell_link">
	            <view class="weui-media-box__bd weui-media-box__bd_in-appmsg  complain-reply">
	                <view class="weui-cell__bd">
	                    <view class="weui-cell complain-username-cell">
	                        <view class="weui-cell__bd">{{detail.updateBy || detail.canteenName}} 回复：</view>
	                        <view class="weui-cell__ft weui-cell_replyTime">{{detail.updateTime}}</view>
	                    </view>
	                </view>
	                <view class="complain-reply-cell">{{detail.replay}}</view>
	            </view>
	        </view>
	    </view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			console.log("传递参数",option);
			this.detail = option;
			this.detail['imgArr'] =new Array();
			if(this.detail.img){
				this.detail['imgArr'] = this.detail.img.split(",");
			}
		},
		data() {
			return {
				detail:{}
			}
		},
		methods: {
			openImg(url) {
				uni.previewImage({urls:this.detail.imgArr});
			}
		}
	}
</script>

<style lang="scss" scoped>
.complain-user-image {
    width: 86rpx;
    height: 87rpx;
}

.complain-content-image {
    width: auto;
    height: 100rpx;
    display: block;
    overflow: auto;
}

.complain-reply {
    margin-left: 10rpx;
    color: #F46837;
}

.complain-reply-cell {
    color: #F46837;
    font-size: 13px;
    line-height: 1.2;
    overflow-wrap: break-word;
    display: block;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
}

.complain-username-cell {
    padding-left: 0;
}

.weui-media-box__desc.complain-content {
    display: block;
    overflow-wrap: break-word;
    padding: 10rpx 0 20rpx 0;
}

.images-panel {
    position: relative;
    padding: 15rpx;
}

.images-panel:before {
    content: " ";
    position: absolute;
    left: 20rpx;
    top: 0;
    right: 0;
    height: 1px;
}

.weui-panel_access:after {
    border: 0;
}

.weui-cell_replyTime {
    color: #F46837;
}
</style>