repairForMiniProgram/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">
				<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" @click="openRefuse();getorderId(item)" v-if="item.orderStatus == 1"
					style="width: 152rpx; height: 50rpx; background-color:rgba(42, 130, 228, 1); color: white;font-size: 24rpx; border-radius: 28rpx;">接受</button>
				<button class="refuse" v-if="item.orderStatus == 1"
					@click="openRefuse();getorderStatus(item);getorderId(item);"
					style="width: 152rpx; height: 50rpx; background-color:rgba(42, 130, 228, 1); color: white;font-size: 24rpx; border-radius: 28rpx;">拒绝</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: 20rpx;">{{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
				},
				orderId: '',
				orderStatus: null,
				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: '',
				homeUrl: "https://jtishfw.ncjti.edu.cn/baoxiu/repairApi"
			}
		},
		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(item) {
				this.orderId = item.orderId
			},

			//获取订单状态 
			getorderStatus(item) {
				this.orderStatus = item.orderStatus
				console.log(this.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: `${this.homeUrl}/order/updateOrderAccept?orderId=` + this.orderId + `&completeTime=` +
						this.timeValue,
					success: (res) => {
						console.log(this.timeValue)
						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: `${this.homeUrl}/order/updateOrderRefused?orderId=${this.orderId}`,
					success: (res) => {
						console.log('========')
						console.log(this.orderId)
						this.workerList.forEach(item => {
							if (item.orderId == this.orderId) {
								item.orderStatus = 4
							}
						})
					}
				})
			},
			// 获取订单列表
			async getworkList() {
				this.$http.post(`${this.homeUrl}/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: 100rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.head {
		position: relative;
		height: 350rpx;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		background-color: rgba(42, 130, 228, 1);
	}

	.location {
		position: absolute;
		top: 38rpx;
		left: 300rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
	}

	.loc {
		font-size: 24rpx;
		width: 40rpx;
		height: 40rpx;
		vertical-align: bottom;
	}

	.nav {
		position: absolute;
		top: 144rpx;
		width: 718rpx;
		height: 236rpx;
		margin-left: 18rpx;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 28rpx 28rpx 0rpx 0rpx;
	}

	.nav image {
		display: block;
		width: 48rpx;
		height: 48rpx;
		margin: 64rpx auto;
		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;
	}

	.content {
		margin-top: 30rpx;
		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;
		margin-top: 22rpx;
		height: 250rpx;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		font-size: 24rpx;
		background-color: rgba(229, 229, 229, 0.62);
	}

	.num {
		float: left;
		margin-left: 14rpx;
		margin-top: 18rpx;
		font-weight: 700;
		color: rgba(42, 130, 228, 1);
	}

	.list {
		float: left;
		margin-left: -280rpx;
		margin-top: 64rpx;
	}

	.content-list .agreeIt {
		position: absolute;
		bottom: 20rpx;
		right: 42rpx;
		line-height: 50rpx;
	}

	.content-list .refuse {
		position: absolute;
		bottom: 20rpx;
		right: 220rpx;
		line-height: 50rpx;
	}

	.isOver {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 24rpx;
		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: 16rpx;
		text-align: center;
		background-color: white;
	}

	.uni-textarea {
		margin-top: 50rpx;
		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: 28rpx;
		color: #4CD964;
	}

	.cancle {
		position: absolute;
		top: 78%;
		width: 50%;
		height: 22%;
		border: 2rpx solid rgba(229, 229, 229, 0.62);
		border-radius: 0 0 0 16rpx;
		line-height: 2;
		background-color: white;
	}

	.agree {
		position: absolute;
		right: 0;
		top: 78%;
		width: 50%;
		height: 22%;
		border-radius: 0 0 16rpx 0;
		border: 2rpx solid rgba(229, 229, 229, 0.62);
		line-height: 2;
		background-color: white;
	}

	.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: yellow;
	}

	.finishList {
		float: right;
		margin-top: 20rpx;
		margin-right: 4rpx;
		color: blue;
	}

	.refuseList {
		float: right;
		margin-top: 20rpx;
		margin-right: 4rpx;
		color: rgba(212, 48, 48, 1);
	}
</style>