family-education/education_uni/subpkg/my/complaint/my_complaint_detail.vue

<template>
	<view class="wrapper">
		<view>
		    <view>
		        <text>投诉号:</text>
		        <text class="benginTwo">{{complaint.id}}</text>
		    </view>
		    <view>
		        <text>ID:</text>
		        <text class="benginTwo">{{complaint.fromUid}}</text>
		    </view>
		</view>
		<!-- 处理人ID和处理人昵称 -->
		<view>
		    <view>
		        <text>处理人ID:</text>
		        <text>{{complaint.processorUid}}</text>
		    </view>
		    <view>
		        <text>处理人昵称:</text>
		        <text>{{complaint.name}}</text>
		    </view>
		</view>
		<!-- 建议标题和日期 -->
		<view class="suggestTitleWrapper">
		    <text class="suggestTtile">投诉标题</text>
		    <text class="suggestTime">{{complaint.complaintTitle}}</text>
		</view>
		<!-- 建议内容 -->
		<view class="suggestContentWrapper">
		    <text>投诉内容：</text>
		    <text>{{complaint.complaintDetail}}</text>
		</view>
		<!-- 处理结果 -->
		<view class="handleResult">
		    <text>处理结果描述：</text>
		    <text>{{complaint.result}}</text>
		</view>
		<!-- 日期 -->
		<view class="handleResult">
		    <text>结案日期时间：</text>
		    <text class="handleTime">{{complaint.closetime}}</text>
		</view>
		<!-- 处理状态 -->
		<view class="handleStatus">
		    <text>{{complaint.status}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				complaint: {}
			}
		},
		onLoad(opt){
			this.complaint = JSON.parse(decodeURIComponent(opt.item));
			if(this.complaint.processorUid==null){
				this.complaint.processorUid = " ";
			}
			if(this.complaint.name==null){
				this.complaint.name = " ";
			}
			if(this.complaint.result==null){
				this.complaint.result = " ";
			}
			if(this.complaint.closetime==null){
				this.complaint.closetime = " ";
			}
		}
	}
</script>

<style lang="scss">
/* 设置背景 */
page{
    background-color: #FFF2CC;
	height: 100%;
}

.wrapper {
	padding: 20rpx;
}

.benginTwo {
	margin-left: 10rpx;
}

/* 建议标题和时间 */
.suggestTitleWrapper{
    margin-top: 50rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* 单独设置标题 */
.suggestTtile{
    font-weight: bold;
}
/* 单独设置建议时间 */
.suggestTime{
    font-size: 26rpx;
    color: #A6A6A6;
}

/* 建议内容 */
.suggestContentWrapper{
    margin-top: 40rpx;
    display: flex;
    flex-direction: column;
    height: 600rpx;
}
/* 处理结果 */
.handleResult{
    margin-top: 30rpx;
}
/* 处理时间 */
.handleTime{
    font-weight: bold;
}
/* 处理状态 */
.handleStatus{
    margin: 60rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    color: red;
}
</style>