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

<template>
	<view style=" background-color: #F0F0F0; height: 100%;">
		<!--pages/handleSuggest/handleSuggest.wxml-->
		
		<!-- 投诉信息 -->
		<view class="suggestHead">
		    <text>投诉号</text>
		    <text class="suggestHeadDetail">{{complaint.id}}</text>
		</view>
		<view class="suggestHead">
		    <text>投诉人UID</text>
		    <text class="suggestHeadId">{{complaint.fromUid}}</text>
		</view>
		<view class="suggestHead">
		    <text>处理人UID</text>
		    <text class="suggestHeadId">{{complaint.processorUid}}</text>
		</view>
		<view class="suggestHead">
		    <text>投诉日期</text>
		    <text class="suggestHeadDetail">{{complaint.fistDatetime}}</text>
		</view>
		<!-- 投诉标题 -->
		<view class="suggestTitle">
		    <text class="suggestTitleText">投诉标题</text>
		    <text class="suggestTitleDetail">{{complaint.complaintTitle}}</text>
		</view>
		<!-- 投诉内容 -->
		<view class="suggestTitle">
		    <text class="suggestTitleText">投诉内容</text>
		    <text class="suggestTitleDetail">{{complaint.complaintDetail}}</text>
		</view>
		<!-- 结案日期 -->
		<view class="handleDate">
		    <text>结案日期</text>
		    <text class="handleDateDetail">{{complaint.closetime}}</text>
		</view>
		<!-- 处理状态 -->
		<view class="handleStatus">
		    <text>状态</text>
		    <text class="handleStatusDetail">{{complaint.status}}</text>
		</view>
		<!-- 处理结果 -->
		<view class="handleResult">
		    <view class="handleResultTitle">处理结果</view>
		    <!-- 未处理 -->
		    <view>
		        <textarea v-model="result"  class="handleDetail" maxlength="512" placeholder="不超过512个字"></textarea>
		    </view>
		</view>
		<!-- 底部按钮 -->
		<view class="handleEnd">
		    <text class="handleClosed" @click="toHandle">结案</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
					complaint: {},
					result: ""
			};
		},
		onLoad(opt){
			this.complaint = JSON.parse(opt.item);
			if(this.complaint.processorUid==null){
				this.complaint.processorUid = " ";
			}
		},
		methods:{
			toHandle(){
				
				var head = '^[ ]+$';
				 
				var re = new RegExp(head);
				if (re.test(this.result)) {
				             uni.showModal({
				                 title: '',
				                 content: '结果不能为空'
				             })
				} 
				else if(this.result==null || this.result==""){
					uni.showModal({
					    title: '',
					    content: '结果不能为空'
					})
				}
				else{
				uni.request({
					url: `${uni.$http.baseUrl}/education/my-complaint/handleComplaint`,
					data: {
							"id": this.complaint.id,
							"result": this.result
						},
					header: {
						token: uni.getStorageSync('token')
					},
					method: 'POST',
					success: res => {
						uni.$showMsg(res.data.message)
						uni.navigateBack({
						     delta: 2,
						})
					}
				})
				}
			}
		}
	}
</script>

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

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

/* 设置页面背景 */
// page{
//     padding: 20rpx;
//     height: 100%;
//     background-color: #FFF2CC;
// }

/* 顶部的投诉信息 */
.suggestHead{
    margin-top: 20rpx;
}
/* 顶部投诉信息详情、结案日期详情、状态处理详情 */
.suggestHeadDetail,
.suggestHeadId,
.handleDateDetail,
.handleStatusDetail{
    margin-left: 20rpx;
    font-weight: bold;
}
.suggestHeadId{
    color: #00B0F0;
    text-decoration: underline;
}

/* 投诉详情 */
.suggestTitle{
    margin-top: 30rpx;
    display: flex;
    flex-direction: column;
}
/* 标题 */
.suggestTitleText{
    text-align: center;
    font-weight: bold;
    margin-bottom: 10rpx;
}
/* 内容 */
.suggestTitleDetail{
    width: 94%;    
}

/* 结案日期 */
.handleDate{
    margin-top: 40rpx;
}

/* 处理状态 */
.handleStatus{
    margin-top: 40rpx;
}
.handleStatusDetail{
    color: red;
}

/* 处理结果 */
.handleResult{
    display: flex;
    flex-direction: column;
}
.handleResultTitle{
    text-align: center;
    margin: 20rpx 0;
    font-weight: bold;
}

/* 处理结果详情 */
.handleDetail{
    padding: 10rpx;
    background-color: #fff;
    // border: 1rpx solid gray;
    border-radius: 20rpx;
    width: 93%;
	//margin: auto;
    //margin-bottom: 40rpx;
}
.handleResultDetail{
    min-height: 200rpx;
    padding: 10rpx;
    background-color: #fff;
    border-radius: 20rpx;
    width: 93%;
    margin-bottom: 40rpx;
}

/* 结案 */
.handleEnd{
    display: flex;
    justify-content: center;
	margin-top: 40rpx;
    margin-bottom: 40rpx;
}
.handleClosed{
    background-color: #35b882;
    font-size: 40rpx;
    padding: 10rpx 30rpx;
    border-radius: 40rpx;
    color: white;
}

</style>