mrr.sj.front/pages/shop/userorders.vue

<template>
	<view class="orders-page">
		<!-- 顶部导航栏 -->
		<custom-navbar title="订单列表" :show-back="true" backgroundColor="#fff"></custom-navbar>
		<!-- <serviecFirstTab :tabs="tabs" :activeId="activeId" @tab-click="tabClick" bgColor="#FAFAFA">
		</serviecFirstTab> -->
		<view class="status">
			<scroll-view scroll-x class="status-tabs" :show-scrollbar="false">
				<view style="padding-left: 20rpx;">
					<view class="tab-item" v-for="(tab, index) in urls[serviceType].OrderType" :key="tab.id"
						:class="{ active: OrderTypeIndex === index }" @click="switchOrderTab(index)">
						{{tab.title}}
					</view>
				</view>

			</scroll-view>
			<scroll-view scroll-x class="status-tabs2" :show-scrollbar="false">
				<view class="tab-item2" v-for="(tab, index) in tabs" :key="tab.id"
					:class="{ active: listQuery.state === tab.id }" @click="switchTab(tab.id)">
					{{tab.title}}
				</view>
			</scroll-view>
		</view>
		<!-- 订单列表 -->
		<CommonList ref="groupRef" :apiUrl="urls[serviceType].OrderType[OrderTypeIndex].url" :queryParams="listQuery"
			:listScrollHeight="`calc(100vh - ${statusBarHeight * 2 + 290}rpx)`">
			<template #listData="{ list }">
				<view class="order_item" v-for="(item, index) in list" :key="index">
					<OrderCard :dataItem="item" @cancel="cancelOrder($event, item)" @start="startOrder($event, item)"
						@done="endOrder($event, item)" @goOrderDetail="goOrderDetail" :haveButton="haveButton" />
				</view>
				<!-- <view class="list-item" v-for="(item, index) in list" :key="index">
            <listCard :info="item" @goDetail="goDetail"></listCard>
        </view> -->
			</template>

			<!-- 空数据状态 -->
			<template #empty>
				<noData></noData>
			</template>
		</CommonList>
		<serviceCodeInput :show="showInput" @close="showInput = false" @confirm="onConfirm" />
	</view>
</template>

<script>
	import serviceCodeInput from "@/components/service-code-input/service-code-input.vue";
	import {
		debounce
	} from "@/utils/debounce";
	import OrderCard from "./components/orderCard.vue";
	import serviecFirstTab from "@/components/common/service-first-tab.vue";
	import CommonList from "@/components/common/CommonList.vue";
	import request from "../../utils/request";
	export default {
		components: {
			serviecFirstTab,
			CommonList,
			OrderCard,
			serviceCodeInput,
		},
		data() {
			const now = new Date();
			return {
				haveButton:true,
				serviceType: 1, //订单类型，1普通，2自营
				urls: {
					1: {
						
						weChatRefund: "/sj/yhwechatrefund",
						aliRefund: "/sj/yhalirefund",
						startOrder: "/sj/startserver",
						endOrder: "/sj/endserver",
						list: "/sj/sjgetyhorder",
						OrderType:[
							 {
								id: 2,
								title: '到店订单',
								url: "/sj/sjgetyhorder",
							}, {
								id: 3,
								title: '上门订单',
								url: "/sj/sjonsiteorder",
							}
						],
					},
					2: {
						weChatRefund: "/sj/orderSelf/weChatRefund",
						aliRefund: "/sj/orderSelf/aliRefund",
						startOrder: "/sj/orderSelf/start",
						endOrder: "/sj/orderSelf/end",
						list: "/sj/orderSelf/list",
						OrderType:[
							 {
								id: 2,
								title: '到店订单',
								url: "/sj/orderSelf/list",
							}, {
								id: 3,
								title: '上门订单',
								url: "/sj/orderSelf/list",
							}
						],
					}
				},
				showInput: false,
				handelOrder: {},
				statusBarHeight: 0,
				listQuery: {
					sjid: "",
					state: "",
					order_kind:2,
				},
				activeId: "",
				
				OrderTypeIndex: 0,
				currentTab:0,
				tabs: [{
						id: "",
						title: "全部",
					},
					{
						id: 3,
						title: "待开始",
					},
					{
						id: 4,
						title: "待完成",
					},
					{
						id: 5,
						title: "已完成",
					},
					{
						id: 7,
						title: "已取消",
					},
				],
				userInfo: {},
				isRefreshing: false,
				currentYear: now.getFullYear(),
				currentMonth: now.getMonth() + 1, // JavaScript月份从0开始，需要+1
				orderList: [],
				artisanType: getApp().globalData.artisanType,
			};
		},
		async onLoad(options) {
			if (options.serviceType) {
				this.serviceType = options.serviceType
			}
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			const {
				data
			} = await request.post("/user/getuser", {
				type: 3,
			});
			this.userInfo = data;
			this.listQuery.sjid = this.userInfo.id;
			this.search();
			// this.loadOrders();
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		methods: {
			// 切换标签
			switchOrderTab(index) {
				if(index==0){
					this.haveButton = true
				}else{
					this.haveButton = false
				}
				this.OrderTypeIndex = index;
				this.listQuery.state = "";
				this.listQuery.order_kind = this.urls[this.serviceType].OrderType[this.OrderTypeIndex].id;
				this.$nextTick(()=>{
					this.search();
				})
				
			},
			// 切换标签
			switchTab(id) {
				this.listQuery.state = id;
				this.$nextTick(()=>{
					this.search();
				})
			},
			search() {
				this.$refs.groupRef.manualRefresh(this.listQuery);
			},
			// 取消订单
			cancelOrder(e, order) {
				uni.showModal({
					title: "取消订单",
					content: "确定要取消该订单吗？（订单取消后，支付金额将原路退回）",
					success: (res) => {
						if (res.confirm) {
							// TODO: 取消订单
							let data = {
								orderNo: order.number,
								amount: order.pay_money,
								sjid: this.userInfo.id,
							};
							let url = "";
							if (order.pay_kind == 1) {
								url = "";
							} else if (order.pay_kind == 2) {
								url = this.urls[this.serviceType].weChatRefund;
							} else if (order.pay_kind == 3) {
								url = this.urls[this.serviceType].aliRefund;
							}
							console.log(data, url);
							request
								.post(url, data)
								.then((res) => {
									console.log("取消订单返回结果", res);
									if (res.state == 1 || res.code == 1 || res.code == 200) {
										this.$refs.groupRef.manualRefresh(this.listQuery);
									} else {
										uni.showToast({
											title: res.msg,
											icon: "none",
										});
									}
								})
								.catch((err) => {
									console.log(err);
								});
						}
					},
				});
			},
			// 开始服务
			startOrder(e, order) {
				this.showInput = true;
				this.handelOrder = order;
			},
			// 输入完成
			onConfirm(code) {
				this.showInput = false;
				request
					.post(this.urls[this.serviceType].startOrder, {
						id: this.handelOrder.id,
						server_code: code,
						sjid: this.userInfo.id,
					})
					.then((res) => {
						console.log(res);
						if (res.state == 1 || res.code == 200) {
							uni.showToast({
								title: "开始服务",
								icon: "none",
							});
							this.$refs.groupRef.manualRefresh(this.listQuery);
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
						}
						this.handelOrder = {};
					});
			},
			// 去订单详情
			goOrderDetail(item) {
				let path = "";
				path = `/pages/shop/userorder-detail?order_id=${item.id}&order_kind=${item.order_kind}&haveButton=${this.haveButton}`;
				if (item.table_source == "order_self") {
					//如果是自营订单
					path = `/pages/shop/userorder-detail?order_id=${item.id}&serviceType=2&order_kind=${item.order_kind}&haveButton=${this.haveButton}`;
				}
				uni.navigateTo({
					url: path,
				});
			},
			// 完成服务
			endOrder: debounce(function(e, order) {
				request
					.post(this.urls[this.serviceType].endOrder, {
						id: order.id,
						sjid: this.userInfo.id,
					})
					.then((res) => {
						console.log("res====================", res);
						if (res.state == 1 || res.code == 200) {
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
							this.$refs.groupRef.manualRefresh(this.listQuery);
						}
					});
			}, 500),
		},
	};
</script>

<style lang="scss" scoped>
	.orders-page {
		background-color: #fafafa;
		min-height: 100vh;
	}
	.status {
		position: sticky;
		top: 0;
		/* #ifdef H5 */
		top: 88rpx;
		/* H5端顶部适配 */
		/* #endif */
		left: 0;
		right: 0;
	}
	
	.status-tabs {
	
		height: 94rpx;
		background-color: #FFFFFF;
		z-index: 99;
		white-space: nowrap;
		// padding-left: 20rpx;
	}
	
	.tab-item {
		display: inline-block;
		height: 48rpx;
		position: relative;
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;
		margin: 20rpx 50rpx 26rpx 0rpx;
	}
	
	.tab-item.active {
		color: #FF4767;
		font-weight: 500;
	}
	
	.tab-item.active::after {
		content: '';
		position: absolute;
		width: 28rpx;
		height: 6rpx;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		background-color: #FF4767;
		border-radius: 3rpx;
	}
	
	.status-tabs2 {
		height: 56rpx;
		background-color: #FFFFFF;
		z-index: 99;
		white-space: nowrap;
		padding-bottom: 30rpx;
	}
	
	.tab-item2 {
		display: inline-block;
		height: 56rpx;
		padding: 0 20rpx;
		background: #F3F5F6;
		border-radius: 10rpx;
		position: relative;
		margin: 0 0 0 23rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 56rpx;
		text-align: left;
		font-style: normal;
	}
	
	.tab-item2.active {
		color: #FF4767;
		font-weight: 500;
		background: #FEE5E7;
	}
	
	.order-item {
		margin: 32rpx 24rpx;
		border-radius: 16rpx;
		padding: 24rpx;
		background-color: #ffffff;
		position: relative;
	}

	.order-date {
		font-size: 24rpx;
		color: #666666;
		font-weight: 400;
	}

	.order-content {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		margin-top: 16rpx;
	}

	.service-image {
		width: 162rpx;
		height: 162rpx;
		border-radius: 24rpx;
		margin-right: 16rpx;
		background-color: #333333;
	}

	.order-info {
		width: 350rpx;
		height: 162rpx;
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.service-name {
		flex: 1;
		font-size: 28rpx;
		color: #000000;
		font-weight: 400;
		margin-bottom: 6rpx;
	}

	.rating {
		display: flex;
		align-items: center;
		margin-bottom: 6rpx;
	}

	.star-icon {
		width: 20rpx;
		height: 20rpx;
		margin-right: 6rpx;
		background-color: #000000;
	}

	.rating-score {
		font-size: 16rpx;
		color: #FF4767;
		margin-left: 68rpx;
	}

	.currency {
		font-size: 24rpx;
		color: #ff0037;
	}

	.amount {
		font-size: 32rpx;
		color: #ff0037;
		font-weight: 500;
	}

	.address {
		display: flex;
		align-items: center;
	}

	.location-icon {
		width: 24rpx;
		height: 24rpx;
		margin-right: 4rpx;
	}

	.address-text {
		font-size: 24rpx;
		color: #999999;
		flex: 1;
	}

	.order-status {
		position: absolute;
		top: 0;
		right: 0;
	}

	.status-text {
		font-size: 24rpx;
		font-weight: 400;
		padding: 6rpx 16rpx;
		color: #28d189;
		background-color: rgba(40, 209, 137, 0.2);
		border-radius: 0 16rpx 0 16rpx;
	}

	.load-more {
		text-align: center;
		padding: 0 0 32rpx;
	}

	.load-date {
		font-size: 24rpx;
		color: #FF4767;
	}

	.load-text {
		font-size: 24rpx;
		color: #999999;
	}

	.nothings-box {
		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;
	}

	/* 下拉刷新样式 */
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.service-first-tab {
		border-bottom-color: transparent;
	}

	.common-list {
		padding-bottom: 0rpx;

		position: fixed;
		left: 0;
		right: 0;
		bottom: 0rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background-color: #fafafa;

		::v-deep .list-scroll {
			margin-top: 0rpx;

			.uni-scroll-view-content {
				margin-top: 0rpx;
			}

			.list-item {
				display: block;
				padding: 0;
				background-color: transparent;
				margin-bottom: 20rpx;
			}

			.list-container {
				padding: 0;
			}
		}
	}

	.service-first-tab {
		box-shadow: none;
	}
</style>