mrr.sj.front/pages/shop/workSpace/saleList.vue

<template>
	<view class="service-page">
		<custom-navbar title="工位订单列表" :showBack="true" backgroundColor="#FFFFFF"></custom-navbar>
		<view class="flexed">
			<!-- 状态标签 -->
			<view class="tab-container">
				<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { active: currentTab === index }]"
					@click="switchTab(index, tab.id)">
					{{ tab.text }}
				</view>
			</view>
		</view>

		<!-- 服务列表 -->
		<view class="service-list" v-if="services && services.length != 0">
			<orderCard :dataItem="item" v-for="item in services" @cancel="cancel" @goDetail="goDetail" @accept="accept"
				@start="startServe" @done="done"></orderCard>
		</view>

		<!-- 暂无数据 -->
		<noData v-else></noData>

		<!-- 加载更多 -->
		<view v-if="hasMore" class="load-more">
			<text>已加载全部</text>
		</view>

		<serviceCodeInput :show="showInput" @close="showInput = false" @confirm="onConfirm" />
	</view>
</template>

<script>
	import request from "@/utils/request";
	import orderCard from "./components/orderCard.vue";
	import serviceCodeInput from "../../../components/service-code-input/service-code-input.vue";
	export default {
		data() {
			return {
				clickType: false, //点击状态，防止连续点击
				startItem: null,
				showInput: false,
				state: undefined,
				currentTab: 0,
				tabs: [{
						id: undefined,
						text: "全部",
					},

					// {
					//   id: 1,
					//   text: "待支付",
					// },
					{
						id: 2,
						text: "待接单",
					},
					{
						id: 3,
						text: "待开始",
					},
					{
						id: 4,
						text: "待完成",
					},
					{
						id: 5,
						text: "已完成",
					},
					{
						id: 7,
						text: "已取消",
					},
				],
				services: [],
				hasMore: false,
				startX: 0,
				moveX: 0,
				currentIndex: -1,
				count: 0,
				isLoad: true, //加载完成
				page: 1,
				limit: 10,
			};
		},
		components: {
			orderCard,
			serviceCodeInput,
		},
		onLoad() {
			this.getServicesList();
		},
		onPullDownRefresh() {
			this.getServicesList();
		},
		async onReachBottom() {
			console.log("onReachBottom");
			if (this.count <= this.page * this.limit || !this.isLoad) {
				return;
			}
			this.page++;
			this.getServicesList(false);
		},
		methods: {
			getServicesList(isRefresh = true) {
				this.isLoad = false;
				if (isRefresh) {
					this.page = 1;
					this.limit = 10;
				}
				let url = "/sj/workSeatOrder/list";
				request
					.post(url, {
						state: this.state,
						page: this.page,
						limit: this.limit
					})
					.then((res) => {
						if (isRefresh) {
							this.services = res.data.list;
							this.count = res.data.count;
						} else {
							this.services = [...this.services, ...res.data.list];
							this.count = res.data.count;
						}
					})
					.finally(() => {
						uni.stopPullDownRefresh();
						this.isLoad = true;
					});
			},
			switchTab(index, id) {
				this.currentTab = index;
				this.state = id;
				this.getServicesList();
			},
			cancel(item) {
				uni.showModal({
					title: "取消订单",
					content: "确定要取消该订单吗？（订单取消后，支付金额将原路退回）",
					success: (res) => {
						if (res.confirm) {
							let data;
							data = {
								orderNo: item.number,
								amount: item.pay_money,
								sjid: item.id,
							};

							let url = "";
							if (item.pay_kind == 1) {
								url = "";
							} else if (item.pay_kind == 2) {
								url = "/sj/workSeatOrder/weChatRefund";
							} else if (item.pay_kind == 3) {
								url = "/sj/workSeatOrder/aliRefund";
							}
							if (this.clickType) {
								return
							}
							this.clickType = true
							request
								.post(url, data)
								.then((res) => {
									if (res.code == 1 || res.code == 200) {
										this.getServicesList();
									}
								})
								.catch((err) => console.log(err)).finally(() => {
									this.clickType = false
								});
						}
					},
				});
			},
			startServe(item) {
				this.startItem = item;
				this.showInput = true;
			},
			accept(item) {
				if (this.clickType) {
					return
				}
				this.clickType = true
				request.post("/sj/workSeatOrder/sure", {
					id: item.id
				}).then((res) => {
					uni.showToast({
						title: "已接单",
						icon: "none"
					});
					if (res.code == 200) {
						this.getServicesList();
					}
				}).finally(() => {
					this.clickType = false
				});
			},
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/shop/SellerDetail?order_id=${item.id}`,
				});
			},
			done(item) {
				if (this.clickType) {
					return
				}
				this.clickType = true
				request
					.post("/sj/workSeatOrder/end", {
						id: item.id,
					})
					.then((res) => {
						if (res.code == 200) {
							this.getServicesList();
						}
					}).finally(() => {
						this.clickType = false
					});
			},
			onConfirm(code) {
				this.showInput = false;
				if (this.clickType) {
					return
				}
				this.clickType = true
				request
					.post("/sj/workSeatOrder/start", {
						id: this.startItem.id,
						server_code: code,
					})
					.then((res) => {
						console.log('API Response:', res);
						if (res.code == 200) {
							uni.showToast({
								title: res.msg,
								icon: "none"
							});
							this.getServicesList();
						} else if (res.state == 1) {
							uni.showToast({
								title: res.msg,
								icon: "none"
							});
							this.getServicesList();
						}
					}).finally(() => {
						this.clickType = false
					});
			},
		},
	};
</script>

<style scoped>
	.service-page {
		padding-bottom: 30rpx;
	}

	.flexed {
		position: sticky;
		top: 88rpx;
		left: 0;
		z-index: 999;
	}

	.search-inp {
		width: 700rpx;
		height: 68rpx;
		background-color: #eef4fa;
		border-radius: 34rpx;
		padding: 0 70rpx 0 48rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.placeholder {
		color: #999999;
	}

	.search-icon {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: 56rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	/* 标签栏样式 */
	.tab-container {
		width: 100vw;
		box-sizing: border-box;
		display: flex;
		gap: 48rpx;
		align-items: center;
		background-color: #FaFaFa;
		padding: 30rpx 0rpx 20rpx 30rpx;
		overflow-x: auto;
	}

	.tab-item {
		flex-shrink: 0;
		text-align: center;
		font-size: 30rpx;
		color: #666666;
		padding: 16rpx 0;
		position: relative;
	}

	.tab-item.active {
		color: #000000;
		font-weight: 500;
	}

	.tab-item.active::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 32rpx;
		height: 6rpx;
		background-color: #E8101E;
		border-radius: 3rpx;
	}

	/* 服务列表样式 */
	.service-list {
		background-color: #fafafa;
	}

	.service-nothings {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		padding: 280rpx 0 0;
	}

	.nothings-text {
		font-size: 32rpx;
		font-weight: 500;
		color: #999999;
		text-align: center;
		font-style: italic;
	}

	/* 平台特定样式 */
	/* #ifdef H5 */
	.service-container {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* #endif */

	/* #ifdef APP-PLUS */
	.service-image {
		border: 1rpx solid #eeeeee;
	}

	.flexed {
		top: calc(var(--status-bar-height) + 88rpx);
	}

	/* #endif */

	/* #ifdef MP-WEIXIN */
	.flexed {
		top: calc(var(--status-bar-height) + 88rpx);
	}

	.service-item {
		/* 小程序阴影效果 */
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	/* #endif */
</style>