family-education/education_uni/subpkg/manager/complaint/manager_complaint_detail.vue

<template>
	 <view>
		<view class="wrapper">
		    <view>
		        <view class="suggestHead">
		            <text>投诉号</text>
		            <text class="suggestHeadDetail">{{complaint.id}}</text>
		        </view>
		        <view class="suggestHead">
		            <text>投诉人UID</text>
		            <text class="suggestHeadDetailID">{{complaint.fromUid}}</text>
		        </view>
		        <view class="suggestHead">
		            <text>处理人UID</text>
		            <text class="suggestHeadDetailID">{{complaint.processorUid}}</text>
		        </view>
		        <view class="suggestHead">
		            <text>投诉日期</text>
		            <text class="suggestHeadDetail">{{complaint.fistDatetime}}</text>
		        </view>
		    </view>
		   
		    <view>
		        <view class="suggestTitle">
		            <text>投诉标题</text>
		            <text class="suggestTitleDetail">{{complaint.complaintTitle}}</text>
		        </view>
		        <view class="suggestContent">
		            <text>投诉内容</text>
		            <text class="suggestContentDetail">{{complaint.complaintDetail}}</text>
		        </view>
		    </view>
		  
		    <view>
		        <view class="handleResult">
		            <text>处理结果</text>
		            <text class="handleResultDetail">{{complaint.result}}</text>
		        </view>
		        <view class="handleDate">
		            <text>结案日期</text>
		            <text class="DateDetail">{{complaint.closetime}}</text>
		        </view>
		        <view class="handleStatus">
		            <text>状态</text>
		            <text style="width: 50px;" class="handleStatusDetail">{{complaint.status}}</text>
		        </view>
				<view class="handleBtn-wrapper">
					<view class="handleBtn" @click="toHandleSuggest">处理</view>
				</view>
				
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				complaint: {}
			};
		},
		onLoad(opt){
			this.complaint = JSON.parse(opt.item);
			
			if(this.complaint.result==null){
				this.complaint.result=" ";
			}
			if(this.complaint.closetime==null){
				this.complaint.closetime = " ";
			}
			if(this.complaint.processorUid==null){
				this.complaint.processorUid = " ";
			}
		},
		methods:{
			toHandleSuggest(){
				
				if(this.complaint.status=="已处理"){
							
					uni.showModal({
					    title: '',
					    content: '该投诉已被处理'
					})					
				
				}
				
				else{
					uni.request({
						url: `${uni.$http.baseUrl}/education/my-complaint/handlingComplaint`,
						data: {
								"id": this.complaint.id
							},
						header: {
							token: uni.getStorageSync('token')
						},
						method: 'POST',
						success: res => {
							console.log(res)
							this.complaint.status = "处理中"
							let complaint = JSON.stringify(this.complaint)
							uni.navigateTo({
								url: '/subpkg/manager/complaint/manager_complaint_handle?item=' + complaint
							})
							
						}
					})
				}
				
			}
		}
	}
</script>

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

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

.wrapper {
	width: 93%;
	padding: 20rpx;
	margin-left: 10rpx;
	border-radius: 20rpx;
	background-color: #FFF;
}

/* 建议号、建议人、建议日期 */
.suggestHead {
    display: flex;
    margin-top: 10rpx;
    padding: 10rpx;
}

.suggestHeadDetail,
.suggestHeadDetailID {
    margin-left: 20rpx;
    font-weight: bold;
}

/* 建议人和处理人ID */
.suggestHeadDetailID {
    color: #00B0F0;
    text-decoration: underline;
}

/* 建议标题 */
.suggestTitle,
.suggestContent {
    margin-top: 40rpx;
    display: flex;
}

/* 建议标题内容 */
.suggestTitleDetail {
    display: block;
    width: 70%;
    height: 120rpx;
    margin-left: 20rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* 建议内容 */
.suggestContentDetail {
    display: block;
    width: 70%;
    height: 200rpx;
    margin-left: 20rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

/* 处理结果 */
.handleResult {
    margin-top: 60rpx;
    display: flex;
}

/* 处理结果详情 */
.handleResultDetail {
    display: block;
    width: 70%;
    height: 80rpx;
    margin-left: 20rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* 结案日期、处理状态 */
.handleDate,
.handleStatus {
    display: flex;
    margin-top: 40rpx;
}

/* 结案日期详情、状态详情 */
.DateDetail,
.handleStatusDetail {
    margin-left: 20rpx;
    font-weight: bold;
}

/* 状态详情颜色 */
.handleStatusDetail {
    color: red;
}

/* 开始处理按钮 */
.handleStart {
    position: absolute;
    bottom: 160rpx;
    width: 200rpx;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.handleBtn-wrapper{
	display: flex;
	margin-top: 40rpx;
	// border: 2rpx solid red;
	height: 100rpx;
	width: 100%;
	align-items: center;
	justify-content: center;
}

.handleBtn {
	display: flex;
   // padding: 10rpx 20rpx;
	width: 80px;
	height: 60rpx;
	line-height: 60rpx;
	// padding-left: 15px;
	justify-content: center;
    border-radius: 30rpx;
    background-color: #35b882;
    color: white;
	margin-left: 20px;
}
</style>