jje_uniapp/pages/order/index.vue

<template>
	<view class="content">

		<u-sticky>
			<view ref="hContentWrap" class="hContentWrap h-content-wrap">
				<view class="tab-bar">
					<view class="tab-item" :class="{ active: currentTab === 0 }" @click="changeTab(0)">
						服务订单
					</view>
					<view class="tab-item" :class="{ active: currentTab === 1 }" @click="changeTab(1)">
						产品订单
					</view>
				</view>
			</view>
			<View class=" tabs" v-if="currentTab === 0">
				<u-tabs :list="tabList" :scrollable="false" lineWidth="30" lineColor="#FFE05C" :activeStyle="{
            					color: '#333333',
            					fontWeight: 'bold',
            					transform: 'scale(1.05)'
       							 }" :current="tabIndex" @click="clickTab"></u-tabs>
			</View>
		</u-sticky>

		<!-- 订单列表 -->
		<view :style="{'height':windowHeight}" v-if="currentTab === 0">
			<swiper :style="{'height':windowHeight}" :current="tabIndex" @change="swiperChange">
				<swiper-item class="swiperItem" v-for="(item,index) in tabList" :key="index">
					<view>
						<mescroll-item ref="MescrollItem" :i="index" :index="tabIndex" :tabs="tabList"
							:height="windowHeight">
						</mescroll-item>
					</view>
				</swiper-item>
			</swiper>
		</view>


		<view class="product-order" v-if="currentTab === 1">
			<!-- 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 class="tabBarLineHeight"></view>
		<view class="tabBarView">
			<tab-bar :tabIndex="tabBarIndex"></tab-bar>
		</view>
	</view>
</template>

<script>
	import MescrollItem from "./module/mescrollUni-item.vue";
	import tabBar from "../../components/tabBar/tabBar";
	export default {
		components: {
			tabBar,
			MescrollItem
		},
		data() {
			return {
				num: 0,
				title: 'Hello',
				tabIndex: 0,
				tabBarIndex:3,
				currentTab: 0,
				currentServiceTab: 'orderTab1',

				tabList: [{
					name: '全部'
				}, {
					name: '当前订单'
				}, {
					name: '待付款'
				}, {
					name: '已完成'
				}],
				windowHeight: ''

			}
		},
		onLoad() {
			uni.hideTabBar({
				animation: false
			})
			let sysInfo = uni.getSystemInfoSync()
			this.windowHeight = sysInfo.windowHeight - 44 + 'px' //除标题栏栏外的屏幕可用高度
		},
		methods: {

			clickTab(e) {
				this.tabIndex = e.index
			},
			swiperChange(e) {
				this.tabIndex = e.detail.current
			},

			changeTab(currentTab) {
				this.currentTab = currentTab
			},

		}
	}
</script>

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