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

<template>
	<view>
		<view class="head">
			<view class="location">
				维修中心<image class="loc" src="../../static/rep.svg" mode=""></image>
			</view>
		</view>
		<view class="nav">
			<navigator url="../feedback/feedback" hover-class="navigator-hover">
				<image src="../../static/sug.svg" mode=""></image>
				<view>评价建议</view>
			</navigator>
		</view>

		<view class="content">
			<view class="point"></view>
			<view class="list-text" v-if="workerList.length!==0">
				---- 报修订单 ----
			</view>
			<view v-if="item.orderStatus" class="content-list" v-for="(item,index) in workerList" :key="item.orderId"
				@click="handleLookInfo(item)">
				<text class="num">订单号：{{item.orderId}}</text>
				<text class="newList">{{item.orderStatus==0?"新订单":''}} </text> <!-- 新订单 -->
				<text class="waitList">{{item.orderStatus==1?"待接单":''}} </text> <!-- 待接单 -->
				<text class="readyList">{{item.orderStatus==2?"已接单":''}} </text> <!-- 已接单 -->
				<text class="finishList">{{item.orderStatus==3?"维修完成":''}} </text> <!-- 维修完成 -->
				<text class="refuseList">{{item.orderStatus==4?"退单":''}} </text> <!-- 已退单 -->
				<view class="list">
					<view>故障类型：{{item.repairsFault.faultName}}</view>
					<view>维修人员：{{item.repairsWork.workName}}</view>
					<view>预约时间：{{item.orderExpectedTime}}</view>
					<view v-if="item.orderStatus==1">派单时间：{{item.orderCompleteTime}}</view>
					<view v-if="item.orderStatus==2">维修时间：{{item.orderCompleteTime}}</view>
					<view v-if="item.orderStatus==3">完成时间：{{item.orderCompleteTime}}</view>
				</view>
				<button class="agreeIt2" v-if="item.orderStatus == 1" @click.stop="open(item,1)">
					接受
				</button>
				<button class="refuse" v-if="item.orderStatus == 1" @click.stop="open(item,2)">
					拒绝
				</button>
				<button class="agreeIt" v-if="item.orderStatus == 2" @click.stop="handleFinish(item.orderId)">
					完成维修
				</button>
			</view>
			<view class="isOver" v-if="flag">
				----我是有底线的----
			</view>
			<view class="isOver" v-if="workerList.length==0">
				----暂无订单----
			</view>
		</view>
		<!-- 查看详情弹窗 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup_view" v-if="info">
				<view class="popup_title">订单信息</view>
				<view class="popup_item">订单号：{{info.orderId}}</view>
				<view class="popup_item">报修类型：{{info.repairsFault.faultName}}</view>
				<view class="popup_item">宿舍楼栋：{{info.repairsStudent.dormNumber}}</view>
				<view class="popup_item">预约时间：{{info.orderExpectedTime}}</view>
				<view v-if="info.orderStatus==1">派单时间：{{info.orderCompleteTime}}</view>
				<view v-if="info.orderStatus==2">维修时间：{{info.orderCompleteTime}}</view>
				<view v-if="info.orderStatus==3">完成时间：{{info.orderCompleteTime}}</view>
				<view class="popup_item">联系电话：{{info.repairsStudent.studentPhone}}</view>
				<view class="popup_item">备选电话：{{info.repairsStudent.studentOtherPhone}}</view>
				<view class="popup_img">
					<text>故障图片：</text>
					<image v-for="(item,index) in info.orderImages" :key="index" :src="item?item:'../../static/no-image.gif'" mode="aspectFit" @click="handleBig(index)"></image>
				</view>
			</view>
		</uni-popup>

		<!-- 图片放大弹窗 -->
		<uni-popup ref="popup2">
			<view class="popup_view" v-if="info" style="padding: 0px;">
				<image
					v-for="(item,index) in info.orderImages" :key="index" :src="item?item:'../../static/no-image.gif'" v-if="index==activeIndex">
				</image>
			</view>
		</uni-popup>
		
		<!-- 是否拒绝单子 -->
		<view class="box" v-if="dialogShows">
			<view id="dialog">
				<view class="replace">
					通知
				</view>
				<view class="uni-textarea">
					确定拒绝此单？
				</view>
				<view class="cancle" @click="dialogShows = false">
					取消
				</view>
				<view class="agree" @click="handleRefuse">
					确定
				</view>
			</view>
		</view>
		<!-- 是否接受单子 -->
		<view class="box" v-if="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="cancleclose">
					取消
				</view>
				<view class="agree" @click="agreeList">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MxDatePicker from "../../util/mx-datepicker/mx-datepicker"
	export default {
		components: {
			MxDatePicker
		},
		data() {
			return {
				dialogShow: false,
				dialogShows: false,
				orderId: '',
				orderStatus: null,
				workerList: [],
				flag: false,
				pageNum: 1,
				pageSize: 6,
				total: "",
				title: 'picker-view',
				visible: true,
				showPicker: false,
				datetime: '',
				range: ['2022-03-27', '2022-03-27'],
				rangetime: '',
				type: 'rangetime',
				timeValue: '请点击选择时间',
				info: null,
				activeIndex:null
			}
		},
		onLoad() {
			this.getworkList()
			this.getTime()
		},

		methods: {
			// 初始化时间
			getTime() {
				let date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				let timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				this.datetime = timer
			},

			// 获取报修订单列表
			async getworkList() {
				let res = await this.$myRequest({
					method: "post",
					url: `/order/queryAllOrderByWorkId?pageNum=${this.pageNum}&pageSize=${this.pageSize}`
				})
				// console.log(res)
				if (res.status == 200) {
					this.total = res.data.total
					this.workerList = [...this.workerList, ...res.data.list]
					uni.hideLoading()
				} else {
					uni.hideLoading()
				}
			},

			// 接受订单
			async agreeList() {
				if (this.timeValue == "请点击选择时间") {
					uni.showToast({
						title: "请选择时间"
					})
				} else {
					this.dialogShow = false
					let res = await this.$myRequest({
						method: "post",
						url: `/order/updateOrderAccept?orderId=${this.orderId}&completeTime=${this.timeValue}`,
					})
					// console.log(res)
					if (res.status == 200) {
						uni.showToast({
							title: "接单成功",
							icon: "success"
						})
						this.workerList = []
						this.pageNum = 1
						uni.pageScrollTo({
							scrollTop: 0
						});
						this.getworkList()
					}
					this.timeValue = '请点击选择时间'
				}
			},

			// 拒绝订单
			async handleRefuse() {
				this.dialogShows = false
				let res = await this.$myRequest({
					method: "post",
					url: `/order/updateOrderRefused?orderId=${this.orderId}`,
				})
				// console.log(res)
				if (res.status == 200) {
					uni.showToast({
						title: "拒单成功",
						icon: "success",
					})
					this.workerList = []
					this.pageNum = 1
					uni.pageScrollTo({
						scrollTop: 0
					});
					this.getworkList()
				}
			},

			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;
				}
			},

			// 页面拉到底部触发事件
			onReachBottom() {
				if (this.workerList.length < this.total) {
					uni.showLoading({
						title: "数据加载中"
					})
					this.pageNum++
					this.getworkList()
				} else {
					this.flag = true
				}
			},

			// 下拉页面刷新函数
			onPullDownRefresh() {
				this.flag = false
				this.workerList = []
				this.pageNum = 1
				this.getworkList()
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 1000);
			},

			// 控制 接受或者拒绝弹窗 打开
			open(item, num) {
				this.orderId = item.orderId
				this.orderStatus = item.orderStatus
				if (num == 1) {
					this.dialogShow = true
				} else {
					this.dialogShows = true
				}
			},

			cancleclose() {
				this.dialogShow = false
				this.timeValue = '请点击选择时间'
			},

			// 完成维修按钮回调
			handleFinish(orderId) {
				uni.showModal({
					title: '提示',
					content: '确定完成维修了吗？',
					success: async (res) => {
						if (res.confirm) {
							let res = await this.$myRequest({
								method: "post",
								url: `/order/updateOrderFinish?orderId=${orderId}`,
							})
							// console.log(res)
							if (res.status == 200) {
								uni.showToast({
									title: res.message,
									icon: "success",
								})
								this.workerList = []
								this.pageNum = 1
								uni.pageScrollTo({
									scrollTop: 0
								});
								this.getworkList()
							}
						} else if (res.cancel) {
							// uni.showToast({
							// 	title: "已取消"
							// })
						}
					}
				});
			},

			// 查看详情回调
			async handleLookInfo(item) {
				this.info = null
				this.$refs.popup.open()
				if (item.orderStatus == 0) {
					let res = await this.$myRequest({
						method: "post",
						url: `/order/queryByOrderIdNotWork?orderId=${item.orderId}`,
					})
					// console.log(res)
					this.$nextTick(() => {
						this.info = res.data
						this.info.orderImages=this.info.orderImages.split(";")
					})
				} else {
					let res = await this.$myRequest({
						method: "post",
						url: `/order/queryByOrderId?orderId=${item.orderId}`,
					})
					// console.log(res)
					this.$nextTick(() => {
						this.info = res.data
						this.info.orderImages=this.info.orderImages.split(";")
					})
				}
			},

			// 点击图片放大
			handleBig(index) {
				this.activeIndex=index
				this.$refs.popup2.open()
			}
		}
	}
</script>

<style lang="scss">
	.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;
		padding-left: 20rpx;
		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;
		width: 152rpx;
		height: 50rpx;
		background-color: rgba(42, 130, 228, 1);
		color: white;
		font-size: 24rpx;
		border-radius: 28rpx;
	}
	.agreeIt2{
		position: absolute;
		bottom: 20rpx;
		right: 42rpx;
		line-height: 50rpx;
		width: 122rpx;
		height: 50rpx;
		background-color: rgba(42, 130, 228, 1);
		color: white;
		font-size: 24rpx;
		border-radius: 28rpx;
	}

	.content-list .refuse {
		position: absolute;
		bottom: 20rpx;
		right: 190rpx;
		line-height: 50rpx;
		width: 122rpx;
		height: 50rpx;
		background-color: rgba(42, 130, 228, 1);
		color: white;
		font-size: 24rpx;
		border-radius: 28rpx;
	}

	.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: 70rpx;
		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.7;
		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.7;
		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: orange;
	}

	.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);
	}

	.popup_view {
		box-sizing: border-box;
		width: 600rpx;
		height: 840rpx;
		padding: 50rpx;

		image {
			width: 100%;
			height: 100%;
		}

		.popup_title {
			font-size: 20px;
		}

		.popup_item {
			margin: 20rpx 0;
		}

		.popup_img {
			display: flex;
			image {
				margin: 0 6rpx;
				width: 100rpx;
				height: 200rpx;
				background-color: #eee;
			}
		}
	}
</style>