179crm_user_app/pages_company/complaintDetail.vue

<template>
	<view class="content">
			    <view class="datebox">
					<!-- <view class="form-item">
						<text class="label">日期</text>
						<view class="right-box">
							<view class="input-box">
								{{form.completeTime}}
							</view>
						</view>
						<picker class="birth-picker" mode="date"   @change="bindDateChange">
							<view class="right-box">
								<view class="input-box">
									<input type="text" :value="form.dueDate" placeholder="请选择日期" placeholder-class="form-input" disabled="disabled" />
								</view>
								<image class="w48 h48" src="@/static/images/health/right_arrow_right_icon24.png"></image>
							</view>
						</picker>
					</view> -->
					<view class="form-item">
						<text class="label">创建时间</text>
						<view class="right-box">
							<view class="input-box">
								{{utils.timeFormat(form.createTime,'yyyy-mm-dd hh:MM:ss')}}
							</view>
						</view>
					</view>
					<view class="form-item">
						<text class="label">联系方式</text>
						<view class="right-box">
							<view class="input-box">
								{{form.contactPhone}}
							</view>
						</view>
					</view>
					
					<view class="form-item">
						<text class="label">处理状态</text>
						<picker class="birth-picker"  mode="selector"  @change="bindStatusChange($event,tags)" :range="tags" range-key="dictLabel">
							<view class="right-box">
								<view class="input-box">
									<input type="text" :value="form.statusName" placeholder="请选择状态" placeholder-class="form-input" disabled="disabled" />
								</view>
								<image class="w48 h48" src="@/static/images/health/right_arrow_right_icon24.png"></image>
							</view>
						</picker>
					</view>
			    </view>
				
			      <view class="datebox2">
					  <view class="bold">投诉内容</view>
					  <view class="textinput">
					  	<textarea  v-model="form.content" auto-height maxlength='500' placeholder="请输入事项情况" disabled="true"/>
					  </view>
					  </view>
		<view class="btn-box">
			<view  class="sub-btn" @click="submit()">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import {getComplaintById,updateComplaint,getCategory} from '@/api/companyUser.js'
	import {getDictByKey} from '@/api/common.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], 
		data() {
			return {
				time:this.utils.timeFormat(new Date(),'yyyy-mm-dd'),
				type:null,
				showType:1,
				mescroll:null,
				tags:[
					{id:1,dictLabel:'待处理'},
					{id:2,dictLabel:'处理中'},
					{id:3,dictLabel:'已完成'},
					{id:4,dictLabel:'已关闭'},
				],
				// 上拉加载的配置
				upOption: {
					onScroll:true,
					use: true, // 是否启用上拉加载; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						icon:'/static/images/no_data.png',
						tip: '暂无数据'
					}
				},
				form:{
				}
			}
		},
		onLoad(option) {
			this.type=option.type;
			console.log(this.type)
			if(this.type=='edit'){
				this.id=option.id;
				this.getInfo();
			}
			// this.getDictByKey()
		},
		methods: {
			navgetTo(url){
				uni.navigateTo({
					url:url
				})
			},
			bindDateChange: function(e) {
				this.form.dueDate= e.target.value
			},
			bindTimeChange: function(e) {
				this.form.completeTime = e.target.value
			},
			bindStatusChange: function(e,list) {
				this.form.status = list[e.target.value].id
				this.form.statusName=list[e.target.value].dictLabel
			},
			getDictByKey(){
				// var data={key:'todo_item_status'}
				getCategory().then(
					res => {
						if(res.code==200){
							this.tags=res.data;
						}
					},
					err => {
					}
				);
				
			},
			getInfo(){
				// var data={id:this.recordId};
				getComplaintById(this.id).then(
					res => {
						if(res.code==200){
							  this.form=res.data;
							  // this.form.completeTime=this.form.completeTime.slice(0,5)
							  
						}else{
							uni.showToast({
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
		    submit(){
		    	if(this.form.status==null){
		    		uni.showToast({
		    			icon:'none',
		    			title: "请选择状态",
		    		});
		    		return;
		    	}
		    	// if(this.form.recordTime==null){
		    	// 	uni.showToast({
		    	// 		icon:'none',
		    	// 		title: "记录时间不能为空",
		    	// 	});
		    	// 	return;
		    	// }
		    	// if(this.form.mealDescription==null){
		    	// 	uni.showToast({
		    	// 		icon:'none',
		    	// 		title: "用餐情况不能为空",
		    	// 	});
		    	// 	return;
		    	// }
		    	if(this.type=="add"){
		    		this.addRecord()
		    	}
		    	else if(this.type=="edit"){
		    		this.updateById()
		    	}
		    	
		    },
		    updateById(){
		    	updateComplaint(this.id,this.form).then(
		    		res => {
		    			if(res.code==200){
		    				 uni.showToast({
		    				 	icon:'success',
		    				 	title: "操作成功",
		    				 });
		    				 setTimeout(function() {
		    					 uni.$emit('refreshComplaintList');
		    					 uni.navigateBack({
		    						 delta: 1
		    					 })
		    				 }, 500);
		    			}else{
		    				uni.showToast({
		    					icon:'none',
		    					title: res.msg,
		    				});
		    			}
		    		},
		    		rej => {}
		    	);
		    },
		    addRecord(){
		    	addRecord(this.form).then(
		    		res => {
		    			if(res.code==200){
		    				 uni.showToast({
		    				 	icon:'success',
		    				 	title: "操作成功",
		    				 });
		    				 setTimeout(function() {
		    					uni.$emit('refreshToDoList');
		    					 uni.navigateBack({
		    						 delta: 1
		    					 })
		    				 }, 500);
		    			}else{
		    				uni.showToast({
		    					icon:'none',
		    					title: res.msg,
		    				});
		    			}
		    		},
		    		rej => {}
		    	);
		    },
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.flex-bt {
		@include u-flex(row, center, space-between);
	}
	.default {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}
	.content{
		padding: 20upx;
		.datebox {
			padding: 0 30rpx;
			margin-bottom: 20rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			.form-item{
				padding: 30upx 0;
				display: flex;
				align-items: flex-start;
				border-bottom: 1px solid #F1F1F1;
				&:last-child{
					border-bottom: none;
				}
				.label{
					flex:1;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #222426;
					line-height: 34rpx;
					text-align: left;
				}
				input{
					text-align: right;
				}
				.form-input{
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					text-align: right;
				}
				.form-textarea{
					font-size: 30upx;
					color: #999999;
					height: 100upx;
					padding: 4upx 0;
				}
				 
				.birth-picker {
					flex: 1;
					display: flex;
					align-items: center;
					
					.right-box{
						width: 100%;
						display: flex;
						align-items: center;
						.input-box{
							// width: 470upx;
						}
						.arrow{
							width: 13upx;
							height: 23upx;
							margin-left: 20upx;
						}
					}
				}
			}
		}
		.datebox2{
			background: #FFFFFF;
			padding:30rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			.textinput{
				margin-top: 30rpx;
				height:200rpx;
				color: #999;
				overflow-y: scroll;
			}
		}
		.top-fixed{
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;
		}
		.pub-tab-box{
			box-sizing: border-box;
			width: 100%;
			padding: 0 40upx;
			background-color: #FFFFFF;
			.tab-inner{
				height: 88upx;
				line-height: 88upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				overflow-x: auto;
			}
			.item{
				flex:1;
				font-size: 28upx;
				white-space: nowrap;
				line-height: 1;
				font-family: PingFang SC;
				font-weight: 500;
				color: #626468;
				// margin-right: 60upx;
				display: flex;
				align-items: center;
				justify-content: center;
				&:last-child{
					margin-right: 0;
				}
				&.active{
					font-weight: bold;
					color:#008FD3;
					&::after {
						content: "";
						width: 48rpx;
						height: 8rpx;
						background: linear-gradient(120deg, #31A1FE  0%, #008FD3 100%);
						position: absolute;
						bottom: 0;
						border-radius: 6upx 6upx 0upx 0;
					}
				}
				.text{
					position: relative;
					z-index: 1;
				}
				.tab-bg{
					width: 72upx;
					height: 28upx;
					position: absolute;
					top: 17upx;
					left: 50%;
					transform: translateX(-36upx);
					z-index: -1;
				}
			}
		}
		.btn-box{
			z-index: 9999;
			width: 100%;
			padding: 30upx;
			// position: fixed;
			bottom: 0;
			left: 0;
			box-sizing: border-box;
			// background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			 padding-bottom: 40rpx;
			.sub-btn{
				flex:1;
				// width: 100%;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #008FD3;
				border-radius: 44upx;
				display: flex;
				align-items: center;
				 border: 2rpx solid #008FD3;
				justify-content: center;
				image{
					margin-right: 16rpx;
				}
			}
			.sub-btn2{
					flex:1;
					height: 88upx;
					line-height: 88upx;
					text-align: center;
					font-size: 32rpx;
					color: #008FD3;
					font-family: PingFang SC;
					font-weight: bold;
					background: #FFFFFF;
						 border-radius: 44rpx 44rpx 44rpx 44rpx;
						 border: 2rpx solid #008FD3;
						 margin-right: 20rpx;
			}
		}
	   .phone-list{
		   // padding: 30rpx;
		  
		   .item{
			   display: flex;
			   align-items: center;
			   justify-content: space-between;
			   background: #FFFFFF;
			   border-radius: 16rpx 16rpx 16rpx 16rpx;
			   // border-bottom: 1rpx solid #ECECEC;
			   padding: 20rpx;
			   margin-bottom: 20rpx;
			   &:last-child{
				    margin-bottom: 0;
					
			   }
			   .phone-name{
				   display: flex;
				   flex-direction: column;
				   align-items: flex-start;
				   // justify-content: flex-start;
				   // padding-left: 24rpx;
				       flex: 1;
				   .name{
				   				   font-family: PingFang SC, PingFang SC;
				   				   font-weight: 500;
				   				   font-size: 32rpx;
				   				   color: #222426;
				   				   text-align: left;
				   }
				   .type{
					   font-family: PingFang SC;
					   font-weight: 400;
					   font-size: 28rpx;
					   color: #626468;
					   text-align: right;
				   }
				   .time{
					   font-family: PingFang SC;
					   font-weight: 400;
					   font-size: 24rpx;
					   color: #898E91;
					   text-align: left;
					   margin-top: 14rpx;
				   }
			   }
			   
		   }
	   }
	   .sms-list{
		   .item{
			   padding: 30rpx;
			   background: #FFFFFF;
			   border-radius: 16rpx 16rpx 16rpx 16rpx;
			   margin-bottom: 20rpx;
			   .title{
				   font-family: PingFang SC;
				   font-weight: 500;
				   font-size: 32rpx;
				   color: #222426;
				   text-align: left;
			   }
			   .box{
				   display: flex;
				   align-items: center;
				   justify-content: space-between;
				   padding-top: 22rpx;
				   .time{
					   font-family: PingFang SC;
					   font-weight: 400;
					   font-size: 24rpx;
					   color: #898E91;
					   text-align: left;
				   }
				   .state{
					   font-family: PingFang SC;
					   font-weight: 400;
					   font-size: 24rpx;
					   color: #2CAE5C;
					   text-align: right;
				   }
			   }
		   }
	   }
		
	}
</style>