jje_uniapp/otherPages/order/index.vue

<template>
	<view class="content">
		<view class="order-content-wrap">

			<!-- 查看订单排号 -->
			<view ref="hContentWrap" class="hContentWrap h-content-wrap">
				<!-- 切换菜单-->
				<view class="tab-bar">
					<view class="tab-item" :class="{ active: currentTab === 'tab1' }" @click="changeTab('tab1')">
						服务订单
					</view>
					<view class="tab-item" :class="{ active: currentTab === 'tab2' }" @click="changeTab('tab2')">
						产品订单
					</view>
				</view>

				<view v-show="currentTab === 'tab1'" class="store-wrap">
					<!-- 导航-->
					<view class="service-order-tab-bar">
						<view class="service-order-tab-item" :class="{ active: currentServiceTab === 'orderTab1' }"
							@click="changeServiceTab('orderTab1')">
							<text :class="{ underline: currentServiceTab === 'orderTab1' }">全部</text>
						</view>
						<view class="service-order-tab-item" :class="{ active: currentServiceTab === 'orderTab2' }"
							@click="changeServiceTab('orderTab2')">
							<text :class="{ underline: currentServiceTab === 'orderTab2' }">当前订单</text>
						</view>
						<view class="service-order-tab-item" :class="{ active: currentServiceTab === 'orderTab3' }"
							@click="changeServiceTab('orderTab3')">
							<text :class="{ underline: currentServiceTab === 'orderTab3' }">待付款</text>
						</view>
						<view class="service-order-tab-item" :class="{ active: currentServiceTab === 'orderTab4' }"
							@click="changeServiceTab('orderTab4')">
							<text :class="{ underline: currentServiceTab === 'orderTab4' }">已完成</text>
						</view>
					</view>
				</view>

			</view>

			<view class="service-order" v-show="currentTab === 'tab1'">
				<!-- 当前订单-->
				<view class="service-order" v-show="currentTab === 'tab1'">
					<!-- 门店列表 -->
					<view class="store-wrap">
						<view :class="{ 'grayscale': item.forstStatus === '1' }">
							<view @click="orderDetail(item)" class="">
								<view class="store-list">
									<view class="store-content">
										<view class="content">
											<view class="desc flex-row justify-start ">
												<view class="time">
													<!-- {{ this.dateFormat(item.createTime) }} -->
													11111111111
												</view>
												<view class="service-type">
													<!-- {{ item.serviceModeDesc }} -->
													到店
												</view>
												<view class="service-mode">
													<!-- <text>{{ item.serviceAttrDesc }}</text> -->
													预约
												</view>
											</view>

										</view>
									</view>
									<view class=" planNumber flex-col justify-center">
										<text> {{ item.planNumber || '未排号' }}</text>
									</view>
								</view>
								<view class="order-state">
									<view class="order-num">
										<view class="h-order-num">
											<image src="../../static/index/u217.png" mode=""></image>订单编号：{{ item.orderNo }}
										</view>
										<view class="h-order-text">
											服务项目
										</view>
									</view>
									<view class="order-state-name">
										<text class="h-text1">{{ item.forstStatus === '1' ? '已冻结' : item.orderStatusDesc
										}}</text>
									</view>

								</view>
								<view class="flex-col detail11 ">
									<view class="d-item-row ">
										<view class="item-icon">
											<image src="../../static/order/ud1.png" mode=""></image>
										</view>
										<view class="item-text">
											服务对象：<text class="item-v">{{ item.serviceObjectName }}</text>
										</view>
									</view>
									<view class="d-item-row ">
										<view class="item-icon">
											<image src="../../static/order/ud2.png" mode=""></image>
										</view>
										<view class="item-text">
											服务门店：<text class="item-v">{{ item.storeName }}</text>
										</view>
									</view>
									<view class="d-item-row ">
										<view class="item-icon">
											<image src="../../static/order/ud3.png" mode=""></image>
										</view>
										<view class="item-text">
											排号时段：<text class="item-v">{{ item.createTime }}</text>
										</view>
									</view>
								</view>
								<view class="detail flex-row justify-between">
									<view class="flexLR">
										<view>
											<view class="d-item-row ">
												<view class="item-icon">
													<image src="../../static/order/ud3.png" mode=""></image>
												</view>
												<view class="item-text">
													服务日期：<text v-if="item.servicePersonName" class="item-v">{{
														item.servicePersonName }}</text>
													<text v-else class="item-v">2023-8-16</text>
												</view>
											</view>
											<view class="d-item-row ">
												<view class="item-icon">
													<image src="../../static/order/ud3.png" mode=""></image>
												</view>
												<view class="item-text">
													服务时段：<text v-if="item.servicePersonName" class="item-v">{{
														item.servicePersonName }}</text>
													<text v-else class="item-v">15:30 -- 16:30</text>
												</view>
											</view>
											<view class="d-item-row ">
												<view class="item-icon">
													<image src="../../static/order/ud3.png" mode=""></image>
												</view>
												<view class="item-text">
													服务技师：<text v-if="item.servicePersonName" class="item-v">{{
														item.servicePersonName }}</text>
													<text v-else class="item-v">签到成功自动分配</text>
												</view>
											</view>
										</view>
										<view class=" planNumber flex-col justify-center">
											<text> {{ item.planNumber || '未排号' }}</text>
										</view>
									</view>
								</view>
								<view class="price">
									<text v-if="item.totalAmount"> 订单总金额：￥{{ item.totalAmount }}</text>
									<text v-else>订单总金额：￥0</text>
								</view>
							</view>
							<view class="nav-bar">
								<view class="btn" @click="gotoPayOrder(item)" >
									<text>扫码</text>
								</view>
								<view class="btn" @click="gotoPayOrder(item)" v-if="item.orderStatus == 1">
									<text>去付款</text>
								</view>
								<view class="btn" v-else-if="item.orderStatus == 2">
									<text>已取消</text>
								</view>
								<view @click="orderSign(item)" v-else-if="item.orderStatus == 4" class="btn">
									立即排队
									<!-- <text class="text1">点击开始排号</text> -->
								</view>
								<view @click="getOrderSign(item)" class="btn" v-else-if="item.orderStatus == 5">
									<text>点击查看排号</text>
								</view>
								<view class="btn" v-else-if="item.orderStatus == 6">
									<text>服务中</text>
								</view>
								<view class="btn" v-else-if="item.orderStatus == 7">
									<text>排号过期</text>
								</view>
								<view @click="gotoEvaluate(item)" class="btn" v-else-if="item.orderStatus == 8">
									<text>待评价</text>
								</view>
								<view @click="gotoPayOrder(item)" class="btn" v-else-if="item.orderStatus == 9">
									<text>去支付预约费用</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="product-order" v-show="currentTab === 'tab2'">
				<!-- Tab 2 内容 -->
				<view class="developing">
					<text>敬请期待...</text>
				</view>
			</view>

			<uni-popup ref="serialNumber">
				<view class="serial-number">
					<view class="text">
						<text>您的排队号</text>
					</view>
					<view class="number">
						<text>{{ orderNumberData.schedulingNo }}</text>
					</view>

					<view v-if="orderNumberData.isOverNo !== '否'" class="text1">
						<text>已过号，请重新取号</text>
					</view>

					<view v-else class="text">
						<text>前面还有{{ orderNumberData.waitNoNum }}人在等待</text>
					</view>

					<view class="text">
						<text>随时关注小程序的排队进程，过号作废</text>
					</view>

					<view class="text">
						<text>0851—85833828</text>
					</view>
				</view>
			</uni-popup>

		</view>

		<view class="tabBarLineHeight"></view>
		<view class="tabBarView">
			<tab-bar :tabIndex="tabIndex"></tab-bar>
		</view>
	</view>
</template>

<script>
import tabBar from "../../components/tabBar/tabBar";
export default {
	components: {
		tabBar
	},
	data() {
		return {
			title: 'Hello',
			tabIndex: 3,
			currentTab: 'tab1',
			currentServiceTab: 'orderTab1'
		}
	},
	onLoad() {

	},
	methods: {

	}
}
</script>

<style scoped lang="scss">
@import '/common/css/common.css';
@import './index.rpx.scss';
</style>