zhywpt-sp/pages/order/order.vue

<!-- 订单列表2 -->
<template>
	<filter>
		<empty-view v-if="!data.login" mode="permission" content="请先登录再查看订单" btnTxt="立即登录"
			@btnClick="$util.navTo('/login/login')">
		</empty-view>

		<view class="list-wrapper" v-else>
			<view class="top-content">
				<view class="top-menu">
					<view :class="item == state.tabActive ? 'tab active' : 'tab'" v-for="item in state.flowPathTabList"
						:key="item" @click="flowPathTabHandle(item)">
						<view class="border"></view>{{ item }}
					</view>
				</view>
				<order-tabbar ref="tabbarRef" :tabs="data.tabsList" v-model:curIndex="data.tabIndex"
					v-if="data.tabsList.length > 0"></order-tabbar>
			</view>

			<order-list-item ref="mescrollItem" :index="data.tabIndex" :refresh="data.refresh">
			</order-list-item>
		</view>
	</filter>
</template>

<script setup lang="ts">
	import orderTabbar from "./components/order-tabbar.vue";
	import orderListItem from "./components/order-list-item";
	import useOrderList from "@/composables/order/useOrderList";
	import filter from '@/components/filter/filter.vue';
	import { onLoad } from "@dcloudio/uni-app";
	import useOrderListItem from "@/composables/order/useOrderListItem";
	import {
		reactive
	} from "vue";
	const {
		data,
		tabbarRef
	} = useOrderList();
	const state = reactive({
		tabActive: "小程序",
		flowPathTabList: ["小程序", "线下网点"],
	})
	const props = defineProps({
		index: {
			type: Number,
			default() {
				return 0
			}
		},
		refresh: { //是否刷新列表
			type: Boolean,
			default: true
		}
	})

	const { changeTab } = useOrderListItem(props);
	onLoad((option) => {
		// 一进来就调一遍
		changeTab(state.tabActive)
	})
	const flowPathTabHandle = (tab) => {
		console.log("tab", tab)
		state.tabActive = tab;
		changeTab(state.tabActive)

	};
</script>

<style lang="scss">
	page {
		background: #eef7f7;
	}

	:deep(.u-mode-center-box) {
		border-radius: 20rpx;
	}
</style>
<style lang="scss" scoped>
	.top-content {
		position: fixed;
		left: 0;
		z-index: 99999;
		background-color: white;
	}

	.top-menu {
		display: flex;
		justify-content: space-around;
	}

	.top-menu .tab {
		font-size: 28rpx;
		padding: 30rpx 30rpx;
		color: #666666;
		position: relative;
	}

	.top-menu .active .border {
		position: absolute;
		width: 70%;
		height: 16rpx;
		background: #00b38b;
		opacity: 0.3;
		bottom: 28rpx;
		z-index: -99;
		left: 15%;
		border-radius: 6rpx;
	}

	.top-menu .active {
		font-weight: bold;
		font-size: 32rpx;
		color: #0d0f26;
	}

	.top-menu .active::before {
		width: 100%;
		height: 16rpx;
		background: #00b38b;
		opacity: 0.3;
	}
</style>