P003-WX-HomeTeacher/education_uni/subpkg/manager/complaint/complaint_not_start.vue

<template>
<view>
	 <view class="wrapper" v-if="isShow">
		        <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.adviseTitle}}</text>
		        </view>
		        <view class="suggestHead">
		            <text>投诉内容</text>
		            <text class="suggestHeadDetail">{{complaint.adviseDetail}}</text>
		        </view>
		        <view class="suggestHead">
		            <text>处理结果</text>
		            <text class="suggestHeadDetail">{{complaint.result}}</text>
		        </view>
				<view class="suggestHead">
				    <text>投诉日期</text>
				    <text class="suggestHeadDetail">{{complaint.fistDatetime}}</text>
				</view>
		        <view class="suggestHead">
		            <text>结案日期</text>
		            <text class="suggestHeadDetail">{{complaint.closetime}}</text>
		        </view>
		        <view class="suggestHead">
		            <text>状态</text>
		            <text style="width: 50px;" class="handleStatusDetail">{{complaint.status}}</text>
		        </view>
	</view>
	<view class="requires2">
		<uni-row >
				<text>待处理条数：{{current}}</text>
		</uni-row>
	</view>

	<!-- 提交按钮 -->
	<view class="suggestBtn" v-if="isShow">
	    <button class="confirmBtn"  @click="toConfirm">开始处理</button>
	</view>
	
</view>	
</template>

<script>
	import { mapState } from 'vuex';

	export default {
		computed: {
			...mapState('m_user', ['token', 'userinfo'])
		},
		data() {
			return {
				complaint: {},
				index: 0,
				current:0,
			
				datas: {},
				isShow: false,
				
			};
		},
		onLoad(){
           this.findAllNotStartList()
		},
		methods:{
			checkIsHaveNext(){
					 this.current = this.current - 1
					 this.index = this.index + 1
					if(this.current == 0){
						this.isShow = false
					}else{
						this.complaint = this.datas.list[this.index]
					}
				},
				toConfirm(){
					// 开始向后端提交数据
					let strtxt ="处理中" + this.userinfo.uid
					this.submitToBack(this.complaint.id,"处理中",strtxt,this.userinfo.uid)
					this.checkIsHaveNext()
				},
			async findAllNotStartList() {
				const { data: result } = await uni.$http.get('/education/my-complaint/findAllNotStartComplaintList')
			  // console.log(result)
				this.current = result.data.list.length
					if(this.current > 0){
						this.datas = result.data
						this.complaint = this.datas.list[this.index ]
						this.isShow = true
					}
								//console.log(this.item)
				},
				async submitToBack(complaintid,status,text,procuid) {
					// 准备参数对象
					const query = {
						complaintid: complaintid,
						status: status,
						text: text,
						procuid: procuid,
					}
					const {
						data: result
					} = await uni.$http.get('/education/my-complaint/updateComplaintInfo',query)
					//console.log(result)
					uni.$showMsg(result.message , 2000)
				},
		}
	}
</script>

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

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

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

/* 建议号、建议人、建议日期 */
.suggestHead {
    display: flex;
}

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

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

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


/* 状态详情颜色 */
.handleStatusDetail {
	font-weight: bold;
    color: red;
	 margin-left: 20rpx;
}


	.requires2 {
		background-color: #FFF;
		margin: 20rpx 20rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		padding: 20rpx 20rpx;
		//font-weight: bold;
		color: gray;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	/* 下方按钮 */
	.suggestBtn{
	    display: flex;
	    padding: 60rpx;
	    justify-content: space-around;
	}
	
	.confirmBtn{
	    font-size: 30rpx;
	    height: 85rpx;
	    width: 200rpx;
	    line-height: 85rpx;
	    border-radius: 50rpx;
	    text-align: center;
	    color: white;
		margin-top: 5rpx;
	}
	
	.confirmBtn{
		background-color: #35b882;
	}
	
</style>