reservation-uniapp-250509/service-uniapp-technician/pages/index/order.vue

<template>
	<view class="content">

		<view style="width: 710rpx; margin: 40rpx auto 20rpx;">

			<view class="flex rr" style="align-items: center;">
				<uni-icons type="sound" size="50rpx" color="#FBA54F"></uni-icons>
				<view class="xx" v-html="notice">
				</view>
				<!-- 长沙市刘师傅在服务过程中客户投诉“服务过程中有不文明的行为”,扣信用分5分罚款500元，公布三日望引以为戒！ -->
			</view>

			<view
				style="width: 670rpx;height: 80rpx;background-color: #fff; border-radius: 16rpx;padding: 15rpx 20rpx;">
				<view class="flex-sb" style="line-height: 40rpx; font-size: 28rpx;">
					<view :class="{'sb-w8' : true, select : item == selectDate}" @click="onSelectDate(item)"
						v-for="(item, index) in dateList">
						<view class="">
							{{ item.format('dddd')[2] }}
						</view>
						<view class="">
							{{ index == 0 ? '今' : index == 1 ? '明' : item.format('DD') }}
						</view>
					</view>
					<!-- <view class="sb-w8" style="border-left: 1rpx solid #999;"><uni-icons type="list" size="34rpx"/></view> -->
				</view>
				<!-- <view class="flex-sb" style="line-height: 48rpx;">
					<view class="sb-w8" v-for="(item, index) in dateList">
						{{ index == 0 ? '今' : index == 1 ? '明' : item.format('DD') }}
					</view> -->

				<!-- <view class="sb-w8" style="border-left: 1rpx solid #999;"><uni-icons type="down" size="34rpx"/></view> -->
				<!-- </view> -->
			</view>

			<view class="flex-sb" style="margin-top: 20rpx;">
				<view :class="{'status-card' : true, select : queryParams.state == 0}" @click="selectTenState(0)">
					<view>
						<view class="num">{{ completedQuantity }}</view>
						<view>已完成</view>
					</view>
				</view>
				<view :class="{'status-card' : true, select : queryParams.state == 1}" @click="selectTenState(1)">
					<view>
						<view class="num">{{ confirmedQuantity }}</view>
						<view>待确认</view>
					</view>
				</view>
				<view :class="{'status-card' : true, select : queryParams.state == 2}" @click="selectTenState(2)">
					<view>
						<view class="num">{{ numberOfVisits }}</view>
						<view>待上门</view>
					</view>
				</view>
			</view>

			<view class="mt20">

				<van-list v-if="orderList.length > 0" v-model:loading="loading" :finished="finished" @load="onLoad">

					<view class="item" v-for="(item, index) in orderList"
						@click="toOrderDetail(item.id)">
						<view class="top">
							<view class="service">
								<text>{{item.projectId_dictText}}</text>
								<uni-icons type="right" size="15"></uni-icons>
								<text>{{item.type_dictText}}</text>
							</view>
							<view class="status">
								<text> {{item.tenState_dictText}}</text>
							</view>
						</view>
						<view class="content">
							<view class="left">
								<image mode="aspectFill" :src="item.image"></image>
								<view class="tag">
									{{item.technicianId_dictText}}
								</view>
							</view>
							<view class="right">
								<view class="text-hidden-1">
									客户姓名：{{item.name}}
								</view>
								<view class="text-hidden-1">
									下单时间：{{item.createTime}}
								</view>
								<view class="text-hidden-1">
									下单地址：{{item.addressId_dictText}}
								</view>
								<view class="text-hidden-1">
									总计时间：{{item.useTime}}分钟
								</view>
								<view class="price">
									总价格：<text class="num">{{item.money}}元</text>
								</view>
							</view>
						</view>
						<view v-if="item.state !=4" class="bottom">
							<view class="b2" v-if="item.tenState == 0"
								@click.stop="confirmVipOrder(item, getOrderList)">
								确认订单
							</view>
							<view class="b2" v-if="item.tenState == 1" @click.stop="startVipOrder(item, getOrderList)">
								技师出发
							</view>
							<view class="b2" v-if="item.tenState == 2" @click.stop="arriveVipOrder(item, getOrderList)">
								到达打卡
							</view>
							<view class="b2" v-if="item.tenState == 3"
								@click.stop="startVipService(item, startServiceCallback)">
								开始服务
							</view>
							<view class="b1" v-if="item.tenState == 4 && !item.isTimeout"
								@click.stop="toCountdown(item)">
								服务时间
							</view>
							<view class="b2" v-if="item.tenState == 4"
								@click.stop="endVipService(item, toEvaluate, item.id, item.projectId,item.technicianId)">
								结束服务
							</view>
							<!-- <view class="b1" @click.stop="toEvaluate()" v-if="item.tenState == 5">
								投诉举报
							</view> -->
							<view class="b2" @click.stop="toEvaluate(item.id,item.projectId,item.technicianId)"
								v-if="item.tenState == 5">
								立即评价
							</view>
						</view>
						<view v-else class="bottom">
							<view @click.stop="()=>{}" class="b3">
								用户取消
							</view>
						</view>
					</view>

				</van-list>

				<van-empty v-else image="/static/empty/order.png" image-size="400rpx" :description="getStatus()" />

			</view>

		</view>

	</view>
</template>

<script>
	import orderMixins from '@/mixins/order.js'
	export default {
		mixins: [orderMixins],
		data() {
			return {
				dateList: [],
				active: 0,
				queryParams: {
					state: 1,
					pageNo: 1,
					pageSize: 10
				},
				orderList: [], //订单列表数据
				loading: false,
				finished: false,
				tenState: 0,
				selectDate: null,
				config: [],
				notice: '',
				completedQuantity: 0,
				confirmedQuantity: 0,
				numberOfVisits: 0,
				countdownOrder: uni.getStorageSync('countdownOrder') ? JSON.parse(uni.getStorageSync('countdownOrder')) :
					{}
			}
		},
		onShow() {
			this.getOrderList(this.queryParams.state)
			this.getConfig()

			this.dateList = []

			let today = this.dayjs()
			this.selectDate = today;

			this.dateList.push(today)

			for (let i = 1; i < 7; i++) {
				this.dateList.push(today.add(i, 'day'))
			}
		},
		methods: {
			onLoad() {
				this.queryParams.pageSize += 10
				this.getOrderList()
			},
			//获取订单列表
			getOrderList(state, order) {

				let params = {
					...this.queryParams,
				}

				if (this.selectDate) {
					params.serviceDate = this.selectDate.format('YYYY-MM-DD')
				}

				this.$api('getTenOrderPageList', params, res => {
					if (res.code == 200) {
						res.result.records.forEach(item => {
							item.isTimeout = true; //是否服务时间已过
							if (item && item.startServiceTime) { //有开始服务时间说明技师已开始服务
								let isTimeout = new Date(item.startServiceTime).valueOf() + item.useTime *
									1000 * 60
								if (Date.now() <= isTimeout) {
									item.isTimeout = false
								}
							}
						})
						this.orderList = res.result.records;

						//统计各种状态订单数量
						let titles = ['completedQuantity', 'confirmedQuantity', 'numberOfVisits']
						let current = titles[state]
						this[current] = res.result.total

						//打开倒计时页面
						if (order && order.id) {
							this.orderList.forEach(item => {
								if (item.id == order.id) {
									this.toCountdown(item)
								}
							})
						}
						
						if (this.queryParams.pageSize > this.orderList.length) {
							this.finished = true
						}
					} else {
						this.finished = true
					}
					this.loading = false
				})
			},
			selectTenState(state) {
				this.queryParams.pageSize = 10
				this.queryParams.state = state;
				this.getOrderList(state)
			},
			onSelectDate(selectDate) {
				if (this.selectDate == selectDate) {
					this.selectDate = null
				} else {
					this.selectDate = selectDate
				}
				this.queryParams.pageSize = 10
				this.queryParams.serviceTime = this.dayjs(selectDate).format('YYYY-MM-DD')
				this.getOrderList(this.queryParams.state)
			},
			toEvaluate(id, projectId, terId) {
				uni.navigateTo({
					url : `/pages/order/evaluate?id=${id}&projectId=${projectId}&terId=${terId}`
				})
			},
			toOrderDetail(id) {
				uni.navigateTo({
					url: '/pages/order/orderDetail?id=' + id
				})
			},
			getConfig() {
				this.vid = uni.getStorageSync("ivcode");
				this.$api('getConfig', {}, res => {
					if (res.code == 200) {
						res.result.forEach(n => {
							if (n.keyValue == 'notice') {
								this.notice = n.content
							}
						})
						this.config = res.result
					}
				})
			},
			//获取当前查询订单状态
			getStatus() {
				let titles = ['暂无已完成订单', '暂无待确认订单', '暂无待上门']
				return titles[this.queryParams.state]
			},
			//跳转倒计时
			toCountdown(order) {
				let {
					useTime,
					startServiceTime
				} = order
				let isTimeout = new Date(startServiceTime).valueOf() + useTime * 1000 * 60
				if (Date.now() >= isTimeout) {
					return uni.showToast({
						title: '服务时间已过',
						icon: 'none'
					})
				}
				uni.navigateTo({
					url: `/pages/mine/countdown?time=${useTime}&startTime=${startServiceTime}`
				})
			},
			//开始服务回调
			startServiceCallback(order) {
				this.getOrderList(this.queryParams.state, order)
			}
		}
	}
</script>

<style scoped lang="scss">
	body {
		background-color: #f3f3f3;
		font-family: PingFang SC;
	}

	.rr {
		height: 52rpx;
		background: #fbecdd;
		border-radius: 16rpx;
		width: calc(710rpx - 40rpx);
		padding: 20rpx;
		margin: 20rpx 0;
	}

	.xx {
		width: 602rpx;
		height: 56rpx;
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #323232;
		display: flex;
		align-items: center;
	}

	.status-card {
		width: 132rpx;
		height: 92rpx;
		background-color: #fff;
		border-radius: 16rpx;

		padding: 40rpx;
		text-align: center;
		color: #ccc;

		.num {
			color: #0d0d0d;
			font-size: 42rpx;
		}
	}

	.status-card.select {
		background-color: var(--van-primary-color);
		color: #eee;

		.num {
			color: #fff;
		}
	}

	.select {
		color: var(--van-primary-color);
		font-weight: 900;
	}

	.item {
		width: calc(100% - 40rpx);
		background-color: #fff;
		margin: 20rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		padding: 30rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;

			.service {}

			.status {
				color: var(--van-primary-color);
				font-size: 26rpx;
				font-weight: 600;
			}
		}

		.content {
			display: flex;
			margin: 10rpx 0;

			.left {
				width: 150rpx;
				height: 150rpx;
				overflow: hidden;
				border-radius: 10rpx;

				image {
					width: 150rpx;
					height: 150rpx;
				}

				.tag {
					color: var(--van-primary-color);
					font-size: 24rpx;
					text-align: center;
					width: 100%;
					background-color: #e7fdf7;
					border: 1px solid var(--van-primary-color);
					border-radius: 8rpx;
					padding: 2rpx 0;
				}
			}

			.right {
				width: calc(100% - 160rpx);
				color: #777;
				font-size: 24rpx;
				padding-left: 20rpx;
				line-height: 40rpx;

				.price {
					font-weight: 900;
					text-align: right;

					text {
						color: #ff780099;
						font-size: 30rpx;
					}
				}
			}
		}

		.bottom {
			display: flex;
			justify-content: flex-end;
			font-size: 25rpx;

			.b1,
			.b3 {
				border: 1px solid #777;
				color: #777;
				box-sizing: border-box;
			}

			.b2 {
				background: linear-gradient(178deg, #4FD3BC, #60C285);
				color: #fff;
			}

			.b3 {
				background: transparent;
			}

			view {
				margin: 12rpx;
				border-radius: 28rpx;
				padding: 8rpx 28rpx;
				margin-bottom: 0;
			}
		}
	}
</style>