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 v-show="item.state" 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, getOrderList)">
								开始服务
							</view>
							<view class="b2" v-if="item.tenState == 4"
								@click.stop="endVipService(item, toEvaluate, item.id, item.projectId)">
								结束服务
							</view>
							<view class="b1" @click.stop="toEvaluate()" v-if="item.tenState == 5">
								投诉举报
							</view>
							<view class="b2" @click.stop="toEvaluate(item.id,item.projectId)"
								v-if="item.tenState == 5 && item.evaluated == 0">
								立即评价
							</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
			}
		},
		onShow() {
			this.getOrderList()
			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) {

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

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

				this.$api('getTenOrderPageList', params, res => {
					if (res.code == 200) {
						if (res.code == 200) {
							this.orderList = res.result.records;
							let titles = ['completedQuantity','confirmedQuantity','numberOfVisits']
							let current = titles[state]
							this[current] = this.orderList.length
						} else {
							this.finished = true
						}
						if (this.queryParams.pageSize > this.orderList.length) {
							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) {
				uni.navigateTo({
					url: '/pages/order/evaluate?id=' + id + '&projectId=' + projectId
				})
			},
			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]
			}
		}
	}
</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>