repairForMiniProgram/miniRepairPro/pages/list-center/list-center.vue

<template>
	<view>
	<view class="head">
		<view class="location">
			维修中心<image class="loc" src="../../static/钳子.svg" mode=""></image>
		</view>
	</view>
	<view class="nav">
		<navigator url="../feedback/feedback" 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,key,index) in workerList" :key="item.id">
			<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 class="agreeIt"  v-if="item.orderStatus == 1" @click="open();getorderId(item.orderId)" style="width: 76px; height: 25px; background-color:rgba(42, 130, 228, 1); color: white;font-size: 12px; border-radius: 14px;">接受</button>
			<button class="refuse" v-if="item.orderStatus == 1"  @click="openRefuse();getorderStatus(item.orderStatus);getorderId(item.orderId)" style="width: 76px; height: 25px; background-color:rgba(42, 130, 228, 1); color: white;font-size: 12px; border-radius: 14px;">拒绝</button>
		</view>
		<view class="isOver" v-if="flag">
			----我是有底线的----
		</view>
	</view>
	<!-- 是否拒绝单子 -->
	<view class="box" v-if="vm.dialogShows">
	    <view id="dialog">
			<view class="replace">
				通知
			</view>
			<view class="uni-textarea">
				确定拒绝此单？
			</view>
			<view class="cancle" @click="closeRefuse">
				取消
			</view>
			<view  class="agree" @click="closeRefuse();refuseList()">
				确定
			</view>
		</view>
	  </view>
	  <!-- 是否接受单子 -->
	<view class="box" v-if="vm.dialogShow">
	    <view id="dialog">
			<view class="replace">
				选择维修时间
			</view>
			<view class="uni-textarea">
				<view @click="onShowDatePicker('datetime')"class="uni-list-cell-db-2">
					<text style="margin-left: 10px;">{{timeValue}}</text>
				</view>
				<mx-date-picker :show="showPicker" :type="type" :value="timeValue" :show-tips="true" :begin-text="'开始'" :end-text="'截至'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
			</view>
			<view class="cancle" @click="close">
				取消
			</view>
			<view class="agree"  @click="close();agreeList()">
				确定
			</view>
		</view>
	  </view>
	</view>
</template>

<script>
	import MxDatePicker  from "../../util/mx-datepicker/mx-datepicker"
	export default {
		components: {
					MxDatePicker
				},
		data() {
			return {
				vm:{
				  dialogShow:false,
				  dialogShows:false
				},
				workerList:[],
				flag:false,
				flags:true,
				pageNum:1,
			    show: '新订单',
			    show2: '待接单',
			    show3: '已接单',
			    show4:'维修完成',
			    show5:'退单',
				title: 'picker-view',
				visible: true,
				showPicker: false,
				datetime: '2022-03-27 15:00:12',
				range: ['2022-03-27','2022-03-27'],
				rangetime:'',
				type: 'rangetime',
				timeValue: ''
			}
		},
		onLoad() {
			this.getworkList()
			this.refuseList()
			this.agreeList()
		},

		methods:{
			onShowDatePicker(type){
				this.type = type;
				this.showPicker = true;
				this.timeValue = this[type];
				},
			onSelected(e){
				this.showPicker = false;
				if(e) {
					this[this.type] = e.value; 
					this.timeValue = e.value;
					//选择的值
					console.log('value => '+ e.value);
					//原始的Date对象
					console.log('date => ' + e.date);
						}
						},
			getorderId(orderId){
				this.orderId = orderId
				console.log(orderId)
			},
		    getorderStatus(orderStatus){
				this.orderStatus = orderStatus
				console.log(orderStatus)
			},
		    onReachBottom(){
			console.log(this.workerList.length)
			console.log(this.pageNum*5)
			if(this.workerList.length<this.pageNum*5)
			return this.flag = true
			this.pageNum++
			this.getworkList()
		    },
		    onPullDownRefresh() {
		        console.log('refresh');
		        setTimeout(()=>{
		            uni.stopPullDownRefresh();
		        }, 1000);
		    },
			// 是否接受单子
			open(){
			  this.vm.dialogShow = true
			},
			close(){
			  this.vm.dialogShow = false
			},
			// 接受订单
			async agreeList(){
				const res = await uni.request({
					method:'POST',
					url:'/api/order/updateOrderAccept?orderId='+this.orderId+'&completeTime='+this[this.type],
					success: (res) => {
						console.log(this[this.type])
						console.log("hahah----------")
						this.workerList.forEach(item=>{
						if(item.orderId==this.orderId){
						item.orderExpectedTime = this[this.type]
						item.orderStatus = 4
							}
						})
					}
				})
			},
			// 是否拒绝单子
			openRefuse(){
			  this.vm.dialogShows = true
			},
			closeRefuse(){
				this.vm.dialogShows = false
			},
			// 拒绝订单	
			async refuseList(){
				const res = await uni.request({
					method:'POST',
					url:'/api/order/updateOrderRefused?orderId'+this.orderId,
					success: (res) => {
						console.log(this.orderId)
						this.workerList.forEach(item=>{
						if(item.orderId==this.orderId){
						item.orderStatus = 4
							}
						})
					}
				})
			},
			// 获取订单列表
			async getworkList(){
				this.$http.post('/api/order/queryAllOrderByWorkId?pageNum'+this.pageNum).then(result=>{
					console.log(result.data)
					console.log(result.data.list)
					this.workerList = [...this.workerList,...result.data.list]
					this.workerList.forEach((item,index)=>{
					 			this.$set(item,'isShow',true);
					 		})
				},err=>{})
			}
		}}
</script>

<style>
	.picker-view {
			width: 750rpx;
			height: 600rpx;
			margin-top: 20rpx;
		}
	.item {
			height: 50px;
			align-items: center;
			justify-content: center;
			text-align: center;
		}
	.head{
		position: relative;
		height: 175px;
		border-radius: 0px 0px 10px 10px;
		background-color: rgba(42, 130, 228, 1);
	}
	.location{
		position: absolute;
		top: 19px;
		left: 150px;
		font-size: 15px;
		font-weight: bold;
		color:rgba(255, 255, 255, 1) ;
	}
	.loc{
		font-size: 12px;
		width: 20px;
		height: 20px;
		vertical-align: bottom;
	}
	.nav{
		position: absolute;
		top:72px;
		width: 359px;
		height: 118px;
		margin-left: 9px;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 14px 14px 0px 0px;
	}
	.nav image{
		display: block;
		width: 24px;
		height: 24px;
		margin: 32px auto;
		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;
	}
	.content{
		margin-top: 15px;
		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;
		margin-top: 11px;
		height: 125px;
		border-radius: 14px 14px 0px 0px;
		font-size: 12px;
        background-color: rgba(229, 229, 229, 0.62);
	}
	.num{
		float: left;
		margin-left: 7px;
		margin-top: 9px;
		font-weight: 700;
		color: rgba(42, 130, 228, 1);
	}
	.list{
		float: left;
		margin-left: -140px;
		margin-top: 32px;
	}
	.content-list .agreeIt{
		position: absolute;
		bottom:10px;
		right: 21px;
		line-height:25px;
	}
	.content-list .refuse{
		position: absolute;
		bottom: 10px;
		right: 110px;
		line-height: 25px;
	}
	.isOver{
        width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 12px;
		color: rgba(80, 80, 80, 0.27);
	}
	#dialog{ 
		position: absolute;
		top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
		width: 80%;
	    height: 25%;
		margin: auto;
	    border-radius: 8px;
	    text-align: center;
	    background-color: white;
	  }
	.uni-textarea{
		margin-top: 25px;
		color: rgba(80, 80, 80, 1);
	}
	.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: #4CD964;
		}
	.cancle{
		position: absolute;
		top: 78%;
		width: 50%;
		height: 22%;
		border: 1px solid rgba(229, 229, 229, 0.62);
		border-radius: 0 0 0 8px;
		line-height: 2;	
		background-color: white;
	}
	.agree{
		position: absolute;
		right:0;
	    top: 78%;
		width: 50%;
		height: 22%;
		border-radius: 0 0 8px 0;
		border: 1px solid rgba(229, 229, 229, 0.62);
		line-height: 2;
		background-color: white;
	}
	.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: yellow;
	}
	.finishList{
		float: right;
		margin-top: 10px;
		margin-right: 2px;
		color: blue;
	}
	.refuseList{
		float: right;
		margin-top: 10px;
		margin-right: 2px;
		color: rgba(212, 48, 48, 1);
	}
</style>