repairForMiniProgram/miniRepairPro/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: 8px;">
	    <text class="notice-first">公告<image src="../../static/喇叭.svg" mode=""></image>：</text>
	    <view class="notice-second" selectable space="nbsp" >{{notices}}</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: 76px; height: 18px; background-color:rgba(42, 130, 228, 1); color: white;font-size: 12px; border-radius: 16px;">修后评价</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: 8px;
	}
	textarea{
		height: 100px;
		width: 90%;
	    margin-top: 5px;
	    margin-left: 5%;
		text-align: left;
		border: 1px solid rgba(210, 190, 239, 0.65);
		font-size: 14px;
	}
	.box{
		position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(0,0,0,0.3);
	}
	.replace{
		margin-top: 4%;
		font-size: 14px;
		color: rgba(80, 80, 80, 1);
		}
	.cancle{
		position: absolute;
		top: 78%;
		width: 50%;
		height: 22%;
		line-height: 2;
		background-color: white;
		border: 1px solid rgba(229, 229, 229, 0.62);
		border-radius: 0 0 0 8px;
	}
	.agree{
		position: absolute;
		top: 78%;
		width: 50%;
		height: 22%;
		right:0;
		line-height: 2;
		background-color: white;
		border-radius: 0 0 8px 0;
		border: 1px solid rgba(229, 229, 229, 0.62);
	}
	.head{
		position: relative;
		height: 175px;
		background-color: rgba(42, 130, 228, 1);
		border-radius: 0px 0px 10px 10px;
	}
	.location{
		position: absolute;
		top: 19px;
		left: 114px;
		font-size: 12px;
		text-align: center;
		color:rgba(255, 255, 255, 1) ;
	}
	.loc{
		width: 20px;
		height: 20px;
		font-size: 12px;
		vertical-align: bottom;
	}
	.notice{
		position: absolute;
		top: 54px;
		left: 9px;
		width: 353px;
		height: 55px;
		font-size: 12px;
		background-color: rgba(255, 255, 255, 0.21);
		border-radius: 11px 10px 10px 10px;
	}
	.notice-first {
		margin-left: 10px;
		color: rgba(255, 255, 255, 1);
	}
	.notice-first image{
		height: 14px;
		width: 14px;
		font-size: 14px;
		vertical-align: bottom;
	}
	.notice-second {
		float: right;
		margin-right: 24px;
		color: rgba(255, 255, 255, 1);
		width: 76%;
		height: 35px;
	}
	.nav{
		position: absolute;
		top:141px;
		width: 359px;
		height: 118px;
		margin-left: 5px;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 14px 14px 0px 0px;
	}
	.nav image{
		position: absolute;
		left: 164px;
		width: 24px;
		height: 24px;
		font-size: 24px;
	}
	.nav view{
		position: absolute;
		left: 154px;
		top:68px;
		font-size: 12px;
	}
	.nav navigator{
		width: 54px;
		height: 60px;
		margin-top: 32px;
		margin-left: 152px;
	}
	.nav navigator:hover{
		border-radius: 5px;
		box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.1);
	}
	.content{
		margin-top: 85px;
		height: 600px;
		background-color: rgba(255, 255, 255, 1);
		}
	.point{
		height: 7px;
		background-color: rgba(229, 229, 229, 0.62);
	}
	.list-text{
		margin-top: 15px;
		font-size: 12px;
		text-align: center;
		color: rgba(80, 80, 80, 0.27);
	}
	.content-list{
		position: relative;
		height: 125px;
		margin-top: 11px;
		font-size: 12px;
		border-radius: 14px 14px 0px 0px;
		background-color: rgba(229, 229, 229, 0.62);
	}
	.num{
		float: left;
		margin-left: 7px;
		margin-top: 9px;
		font-size: 14px;
		font-weight: 700;
		color: rgba(42, 130, 228, 1);
	}
	.newList{
		float: right;
		margin-top: 10px;
		margin-right: 16px;
		color: rgba(255, 141, 26, 1);
	}
	.readyList{
		float: right;
		margin-top: 10px;
		margin-right: 2px;
		color: rgba(212, 48, 48, 1);
	}
	.waitList{
		float: right;
		margin-top: 10px;
		margin-right: 2px;
		color: rgba(212, 48, 48, 1);
	}
	.finishList{
		float: right;
		margin-top: 10px;
		margin-right: 2px;
		color: rgba(212, 48, 48, 1);
	}
	.refuseList{
		float: right;
		margin-top: 10px;
		margin-right: 2px;
		color: rgba(212, 48, 48, 1);
	}
	.list{
		float: left;
		margin-left: -164px;
		margin-top: 36px;
		font-size: 14px;
	}
	.content-list button{
		position: absolute;
		bottom:10px;
		right: 21px;
		line-height:18px ;
	}
	.content-list .sug{
		position: absolute;
		bottom:15px;
		right: 21px;
		color: #333333;
	}
	.isOver{
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 12px;
		color: rgba(80, 80, 80, 0.27);
	}
</style>