family/education_uni/subpkg/complaintDetail/complaintDetail.vue

<template>
	<view>
		<!--pages/suggesDetail/suggestDetail.wxml-->
		
	
		<view class="suggestNumWrapper">
		    <view class="suggestHead">
		        <text>投诉号:</text>
		        <text class="suggestNum">{{complaint.id}}</text>
		    </view>
		    <view class="suggestHead">
		        <text class="suggestHeadID">ID</text>
		        <text class="suggestNum">{{complaint.fromUid}}</text>
		    </view>
		</view>
		<!-- 处理人ID和处理人昵称 -->
		<view class="handleSuggest">
		    <view class="suggestHead">
		        <text class="suggestPerId">处理人ID:</text>
		        <text class="suggestPerNum">{{complaint.processorUid}}</text>
		    </view>
		    <view class="suggestHeadRight">
		        <text class="suggestPerNickname">处理人昵称:</text>
		        <text class="suggestNum">{{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){
			console.log(opt);
			this.complaint = JSON.parse(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 = " ";
			}
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
/* pages/suggesDetail/suggestDetail.wxss */

/* 设置背景 */

page{
    padding: 20rpx;
    background-color: #E2F0D9;
}


/* 设置建议号、处理人的格式 */
.suggestNumWrapper,
.handleSuggest{
    display: flex;
    margin-top: 20rpx;
    font-size: 28rpx;
}

/* 设置顶部标题宽度 */
.suggestHead,
.suggestHeadRight{
    display: flex;
    width: 45%;
}
/* ID和处理人昵称 */
.suggestHeadRight,
.suggestHeadID{
    margin-left: 20rpx;
}
/* 处理人ID宽度 */
.suggestPerId{
    width: 120rpx;
}
/* 处理人ID和处理人昵称公共样式 */
.suggestPerNum,
.suggestNum{
    margin-left: 10rpx;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 处理人ID内容宽度 */
.suggestPerNum{
    width: calc(45vw - 130rpx);
}
/* 处理人昵称宽度 */
.suggestPerNickname{
    width: 160rpx;
}
/* 处理人昵称内容宽度 */
.suggestNum{
    width: calc(45vw - 160rpx);
}

/* 建议标题和时间 */
.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>