crm-app-vue3/pages/order/index.vue

<template>
	<view class="order_wrap">
		<u-navbar title="接单中心" :autoBack="true" :placeholder="true" v-hideNav></u-navbar>
		<yui-tabs :tabs="tabs" v-model="activeIndex" :lineWidth="'120rpx'" :isLazyRender="true" color="#108cff"
			titleActiveColor="#108cff" :swipeable="true" :swiper="false" :ellipsis="false" :scroll-threshold="3"
			:sticky="true" :sticky-threshold="0" :offset-top="offsetTop" :z-index="99">
			<template #orderCenter>
				<orderCenter ref="orderCenter" type="1" :dicts="dicts"></orderCenter>
			</template>
			<template #myOrder>
				<orderCenter ref="myOrder" type="2" :dicts="dicts"></orderCenter>
			</template>
			<template #myCommission>
				<myCommission ref="myCommission" type="2" :showStats="true"></myCommission>
			</template>
		</yui-tabs>
	</view>
</template>

<script>
	import orderCenter from "./components/orderCenter";
	import myCommission from "./components/myCommission";

	export default {
		components: {
			orderCenter,
			myCommission
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
			this.$refs[this.activeTel].resetData();
		},
		onReachBottom() {
			this.$refs[this.activeTel].handleOnReachBottom();
		},
		computed: {
			activeTel() {
				return this.tabs.find(v => v.activeIndex === this.activeIndex).slot;
			},
		},
		data() {
			return {
				activeIndex: 0,
				offsetTop: 0,
				tabs: [{
						label: '接单中心',
						slot: 'orderCenter',
						activeIndex: 0,
					}, {
						label: '我的接发单',
						slot: 'myOrder',
						activeIndex: 1,
					},
					{
						label: '我的分成',
						slot: 'myCommission',
						activeIndex: 2,
					}
				],
				dicts : {
					crmFormStateDicts : [],
				}
			}
		},
		mounted() {
			// 页面初始化后的逻辑
			uni.getSystemInfo({
				success: (e) => {
					let offsetTop = 0
					// #ifdef H5
					offsetTop = 43
					// #endif
					this.offsetTop = offsetTop;
				}
			});
			this.$getDicts('crm_follow_status').then(res => {
				this.dicts.crmFormStateDicts = res;
			});
		},
		methods: {
			// tab切换事件处理
			handleTabChange(index) {
				this.activeIndex = index;
			}
		},
		// 页面滚动触发事件
		onPageScroll(e) {
			//页面滚动事件
			uni.$emit('onPageScroll', e)
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .yui-tabs__content {
		background-color: transparent;

		.yui-tabs__track {
			background-color: transparent;
		}
	}
</style>