repairForMiniProgram/pages/index/index.vue

<template>
	<view>
	<view>
	<!-- 头部 -->
	<view class="head">
		
	<!-- 定位 -->
	<view class="location">
	 南昌校区（新校区）<image class="loc" src="../../static/定位.svg" mode=""></image>
	</view>
	
	<!-- 公告 -->
	<view class="notice">
	    <view class="notice-content" style="margin-top: 16rpx;">
	    <view class="notice-first">公告<image src="../../static/喇叭.svg" mode=""></image>：<text class="notice-second" selectable space="nbsp">{{notices}}</text></view>
	    </view>
	    </view>
	</view>
	
	<!-- 跳转导航 -->
	<view class="nav">
		<navigator url="../list/list" hover-class="navigator-hover">
		<image src="../../static/报修.svg" mode=""></image>
		<view>前往报修</view> 
		</navigator>
	</view>
	
	<!-- 报修订单 -->
	<view class="content">
	<!-- 导航与报修单间的灰色背景 -->	
		<view class="point"></view>
	
		<view class="list-text">
			----报修订单----
		</view>
		
		<!-- 订单 -->
		<view class="content-list" v-for="(item,index) in Studentlist" :key="index">
			<text class="num">订单号：{{item.orderId}}</text>  
			<text class="newList">{{item.orderStatus==0?show:''}} </text>       <!-- 新订单 -->
			<text class="waitList">{{item.orderStatus==1?show2:''}} </text>     <!-- 待接单 -->
			<text class="readyList">{{item.orderStatus==2?show3:''}} </text>    <!-- 已接单 -->
			<text class="finishList">{{item.orderStatus==3?show4:''}} </text>   <!-- 维修完成 -->
			<text class="refuseList">{{item.orderStatus==4?show5:''}} </text>   <!-- 已退单 -->
			<view class="list">
			<view class="">
				故障类型：{{item.repairsFault.faultName}}
			</view>
			<view class="">
				维修时间：{{item.orderExpectedTime}}
			</view>
			<view class="">
				维修人员：高××
			</view>
			</view>
			<button @click="appraise();getorderId(item);getorderBack(item.orderBack)" v-if="item.orderStatus == 3 && item.orderBack == null" style="width: 152rpx; height: 36rpx; background-color:rgba(42, 130, 228, 1); color: white;font-size: 24rpx; border-radius: 32rpx;">修后评价</button>
		    <view class="sug">{{(item.orderStatus == 3 && item.orderBack == 1 && dialogS == false)?show6:''}}</view>
		</view>

		<view class="isOver" v-if="flag" >
			----我是有底线的----
		</view>
	</view>
	</view>
	
	<!-- 修改评价遮罩层 -->
	<view class="box" v-if="dialogShow">
	    <view id="dialog">
			<view class="replace">
				修改评价
			</view>
			<view class="uni-textarea">
			<textarea @input="onInput" v-model="inputcontent"  placeholder-style="color:rgba(229, 229, 229, 0.7)" cols="20" row="2"  placeholder="请输入内容"/>
			</view>
			<view class="cancle" @click="cancle()">
				取消
			</view>
			<view class="agree"  @click="agree()">
				确定
			</view>
		</view>
	</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				pageNum:1,
				dialogShow:false,
				dialogS:true,
				flag:false,
				notices:[],
				Studentlist:[],
				show:'新订单',
				show2:'待接单',
				show3:'已接单',
				show4:'维修完成',
				show5:'已退单',
				show6:'已评价',
				value:[],
				inputcontent:'',
				orderId:null,
				studentItem:null,
				homeUrl:"https://jtishfw.ncjti.edu.cn/baoxiu/repairApi"
			}
		},
		onLoad() {
			this.getNotice()
			this.getStudentlist()
		},
		watch:{
			dialogshow(a,b){
			      this.getsuggest()
				  console.log("====")
		}},
		methods:{
			// 下拉刷新
		    onPullDownRefresh() { 
		        console.log('refresh');
		        setTimeout(()=>{
		            uni.stopPullDownRefresh();
		        }, 1000);
		    },
			// 上拉加载+结尾语句显示
			onReachBottom(){
				console.log(this.Studentlist.length)
				console.log(this.pageNum*5)
			    if(this.Studentlist.length<this.pageNum*5) 
				return this.flag = true
				this.pageNum++
				this.getStudentlist()
			},
			// 修改btn按钮
			appraise(f){
			this.dialogShow = true
			},
			// 弹窗
			agree(){
			  if(this.inputcontent == ''){
			  	uni.showToast({
			  		title:'请输入内容',
			  		icon:'none',
			  		duration:2000,
			  	})
			  	return this.dialogShow
			  }else{
				    this.dialogShow = false
					this.dialogS = false
					console.log(this.inputcontent)
					console.log('======agree====')
					this.getsuggest()
					this.inputcontent = ''
			  }
			},
			cancle(){
			  this.dialogShow = false
			  uni.showToast({
			  	title: '你已取消填写',
			  	icon:'none',
			  	duration: 2000
			  })
			},
			
			// 订单状态显示
			isEmpty(value){
				if (this.value == 1) { 
					return true;
				} else {
					return false;
				}
			},
			// 获取学生订单
			async getStudentlist(){
				this.$https.post(`${this.homeUrl}/order/queryAllOrderByStudentId?pageNum=${1}`)
				.then(result=>{
					console.log(result.data)
					console.log(result.data.list)
					this.Studentlist = [...this.Studentlist,...result.data.list]
				},err=>{})
	
			},
			// 获取公告
		    async getNotice(){
			    const res = await uni.request({
				    method:'POST',
				    url:`${this.homeUrl}/notice/releaseNotice`,
				    success: (res) => {
					    this.notices = res.data.data.noticeContent
				        }
			         })
					 },
			// 获取订单号
			 getorderId(item){
				 this.orderId = item.orderId
				 this.studentItem = item
			 },
			 getorderBack(orderBack){
				 this.orderBack = orderBack
			 },
			// 获取评价内容
			onInput(e){
					this.inputcontent = e.target.value
					console.log(e.target.value)
					console.log(this.inputcontent)
					 },
					 
			// 修后评价
			async getsuggest(item){
				if(this.dialogShow == false){
				 const res = await uni.request({
					method:'POST',
					url:`${this.homeUrl}/order/updateOrderAdvice?orderAdvice=${this.inputcontent}&orderId=${this.orderId}`,
					success: (res) => {
						console.log(this.inputcontent)
						this.studentItem.orderBack = 1
						console.log(this.orderBack)
					    }
				}) 
			}else{
					console.log('失败')
				}
			}
			}
			}
</script>

<style>
	#dialog{
		position: absolute;
		top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    width: 80%;
	    height: 25%; 
		text-align: center;
	    margin: auto;
	    background-color: white;
		border-radius: 16rpx;
	}
	textarea{
		height: 200rpx;
		width: 90%;
	    margin-top: 10rpx;
	    margin-left: 5%;
		text-align: left;
		border: 2rpx solid rgba(210, 190, 239, 0.65);
		font-size: 28rpx;
	}
	.box{
		position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(0,0,0,0.3);
	}
	.replace{
		margin-top: 4%;
		font-size: 28rpx;
		color: rgba(80, 80, 80, 1);
		}
	.cancle{
		position: absolute;
		top: 78%;
		width: 50%;
		height: 22%;
		line-height: 2;
		background-color: white;
		border: 2rpx solid rgba(229, 229, 229, 0.62);
		border-radius: 0 0 0 16rpx;
	}
	.agree{
		position: absolute;
		top: 78%;
		width: 50%;
		height: 22%;
		right:0;
		line-height: 2;
		background-color: white;
		border-radius: 0 0 16rpx 0;
		border: 2rpx solid rgba(229, 229, 229, 0.62);
	}
	.head{
		position: relative;
		height: 350rpx;
		background-color: rgba(42, 130, 228, 1);
		border-radius: 0rpx 0rpx 20rpx 20rpx;
	}
	.location{
		position: absolute;
		top: 38rpx;
		left: 228rpx;
		font-size: 24rpx;
		text-align: center;
		color:rgba(255, 255, 255, 1) ;
	}
	.loc{
		width: 40rpx;
		height: 40rpx;
		font-size: 24rpx;
		vertical-align: bottom;
	}
	.notice{
		position: absolute;
		top: 108rpx;
		left: 18rpx;
		width: 706rpx;
		height: 110rpx;
		font-size: 24rpx;
		background-color: rgba(255, 255, 255, 0.21);
		border-radius: 22rpx 20rpx 20rpx 20rpx;
	}
	.notice-first {
		margin-left: 20rpx;
		color: rgba(255, 255, 255, 1);
	}
	.notice-first image{
		height: 28rpx;
		width: 28rpx;
		font-size: 28rpx;
		vertical-align: bottom;
	}
	.notice-second {
		float: right;
		margin-right: 48rpx;
		color: rgba(255, 255, 255, 1);
		width: 76%;
		height: 70rpx;
	}
	.nav{
		position: absolute;
		top:282rpx;
		width: 718rpx;
		height: 236rpx;
		margin-left: 10rpx;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 28rpx 28rpx 0rpx 0rpx;
	}
	.nav image{
		position: absolute;
		left: 328rpx;
		width: 48rpx;
		height: 48rpx;
		font-size: 48rpx;
	}
	.nav view{
		position: absolute;
		left: 308rpx;
		top:136rpx;
		font-size: 24rpx;
	}
	.nav navigator{
		width: 108rpx;
		height: 120rpx;
		margin-top: 64rpx;
		margin-left: 304rpx;
	}
	.nav navigator:hover{
		border-radius: 10rpx;
		box-shadow: 2rpx 2rpx 4rpx 4rpx rgba(0,0,0,0.1);
	}
	.content{
		margin-top: 170rpx;
		height: 1200rpx;
		background-color: rgba(255, 255, 255, 1);
		}
	.point{
		height: 14rpx;
		background-color: rgba(229, 229, 229, 0.62);
	}
	.list-text{
		margin-top: 30rpx;
		font-size: 24rpx;
		text-align: center;
		color: rgba(80, 80, 80, 0.27);
	}
	.content-list{
		position: relative;
		height: 250rpx;
		margin-top: 22rpx;
		font-size: 24rpx;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		background-color: rgba(229, 229, 229, 0.62);
	}
	.num{
		float: left;
		margin-left: 14rpx;
		margin-top: 18rpx;
		font-size: 28rpx;
		font-weight: 700;
		color: rgba(42, 130, 228, 1);
	}
	.newList{
		float: right;
		margin-top: 20rpx;
		margin-right: 32rpx;
		color: rgba(255, 141, 26, 1);
	}
	.readyList{
		float: right;
		margin-top: 20rpx;
		margin-right: 4rpx;
		color: rgba(212, 48, 48, 1);
	}
	.waitList{
		float: right;
		margin-top: 20rpx;
		margin-right: 4rpx;
		color: rgba(212, 48, 48, 1);
	}
	.finishList{
		float: right;
		margin-top: 20rpx;
		margin-right: 4rpx;
		color: rgba(212, 48, 48, 1);
	}
	.refuseList{
		float: right;
		margin-top: 20rpx;
		margin-right: 4rpx;
		color: rgba(212, 48, 48, 1);
	}
	.list{
		float: left;
		margin-left: -328rpx;
		margin-top: 72rpx;
		font-size: 28rpx;
	}
	.content-list button{
		position: absolute;
		bottom:20rpx;
		right: 42rpx;
		line-height:36rpx ;
	}
	.content-list .sug{
		position: absolute;
		bottom:30rpx;
		right: 42rpx;
		color: #333333;
	}
	.isOver{
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 24rpx;
		color: rgba(80, 80, 80, 0.27);
	}
</style>