dykj-outsource-12123/pages/schedule/index.vue

<template>
	<view style="background-color: #fff; height: 88vh; display: flow-root">
		<view class="select">
			<view style="margin-left: 1rem; font-weight: 700">以下数据来自</view>
			<view class="icon">
				<view class="">社会</view>
				<view class=""><uni-icons type="forward" size="20"></uni-icons></view>
			</view>
		</view>
		<view class="tow">
			<view class="custom-tabs">
				<view v-for="(item, index) in feedTabs" :key="item.text" @click="onTabChange(index, item)"
					:class="{ active: tabIndex === index }" class="custom-tabs-bar">
					<text class="tabbar-text">{{ item.label }}</text>
				</view>
				<view :style="{ left: cursorPosition + 'px' }" class="custom-tabs-cursor"></view>
			</view>
			<view class="content-area">
				<view v-if="tabIndex === 0">
					<view class="noData">
						<image src="../../static/wangban/oe.png" style="width: 7.8rem; height: 5rem"></image>
						<view style="font-size: 0.75rem; margin-top: 0.5rem; color: #767676">暂无数据</view>
					</view>
				</view>
				<view v-else-if="tabIndex === 1">
					<view v-if="scheduleList.length > 0">
						<view style="height: 20rpx;" />
						<view class="schedule-card" v-for="(item, index) in scheduleList" :key="index">
							<view class="card-left">
								<view class="content-top">
									<view style="display: flex; align-items: center;">
										<image src="../../static/ax3.png" class="image"></image>
										<text style="font-size: 36rpx;">{{item.title}}</text>
									</view>
									<view class="car-center-tag">
										<text style="font-size: 20rpx;">评价</text>
									</view>
								</view>
								<view class="content-bottom">
									<view class="card-content">
										<text>业务流水号</text>
										<text>{{item.cardNmu}}</text>
									</view>
									<view class="card-content">
										<text>申请时间</text>
										<text>{{item.time}}</text>
									</view>
									<view class="card-content">
										<text>受理进度</text>
										<text>{{item.plan}}</text>
									</view>
								</view>
							</view>
							<view class="card-right">
								<uni-icons type="down" size="30" color="#777777"></uni-icons>
							</view>
						</view>
					</view>
					<view class="noData" v-else>
            <image src="../../static/wangban/oe.png" style="width: 7.8rem; height: 5rem"></image>
            <view style="font-size: 0.75rem; margin-top: 0.5rem; color: #767676">暂无数据</view>
          </view>
        </view>
        <view v-else-if="tabIndex === 2">
          <view class="noData">
            <image src="../../static/wangban/oe.png" style="width: 7.8rem; height: 5rem"></image>
            <view style="font-size: 0.75rem; margin-top: 0.5rem; color: #767676">暂无数据</view>
          </view>
        </view>
        <view v-else-if="tabIndex === 3">
          <view class="noData">
            <image src="../../static/wangban/oe.png" style="width: 7.8rem; height: 5rem"></image>
            <view style="font-size: 0.75rem; margin-top: 0.5rem; color: #767676">暂无数据</view>
          </view>
        </view>
      </view>
    </view>
    <TabBar :val="1" />
  </view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		getCurrentInstance,
		computed
	} from 'vue';
	import TabBar from '@/components/tabBar/index.vue';
	const feedTabs = ref([{
			label: '受理中',
			rendered: true
		},
		{
			label: '已办结',
			rendered: false
		},
		{
			label: '已取消',
			rendered: false
		},
		{
			label: '全部',
			rendered: false
		}
	]);

	const scheduleList = ref([{
			title: '电子监控处理',
			cardNmu: '230120240427907742',
			time: '2024-04-27 13:07',
			plan: '受理完成'
		},
		{
			title: '电子监控处理',
			cardNmu: '230120240417574655',
			time: '2024-04-17 20:06',
			plan: '受理完成'
		},
		{
			title: '电子监控处理',
			cardNmu: '230120240106416206',
			time: '2024-04-27 16:47',
			plan: '受理完成'
		}
	])
	// 定义tab的索引值
	const tabIndex = ref(0);
	// 获取每个 tabbar 的位置（靠左位置）
	const tabbarRect = ref([]);

	// 根据索引值获取tabbar 的 left 值
	const cursorPosition = computed(() => {
		// 避免初始值为空数且的错误
		if (tabbarRect.value.length === 0) return;
		// 获取tabbar的宽度和left的值
		const {
			width,
			left
		} = tabbarRect.value[tabIndex.value];
		return (width - 76) / 2 + left;
	});
	onMounted(() => {
		// 1. 创建查询器
		// 组件式 api 获取组件（页面）实例时，命名用
		// getCurrentInstance 相当于选项式 API this
		const querySelector = uni.createSelectorQuery().in(getCurrentInstance());
		// 2. 查找元素
		querySelector.selectAll('.custom-tabs, .tabbar-text').boundingClientRect(([parent, ...res]) => {
			// console.log(parent, res)
			// 将tabbar的宽度和距离左侧的距离计算出来
			tabbarRect.value = res.map(({
				width,
				left
			}) => {
				return {
					width,
					left: left - parent.left
				};
			});
		});
		// 3. 执行查找
		querySelector.exec();
	});
	// Vue 组合式 Api 事件回调就是一个普通的函数
	function onTabChange(index, item) {
		tabIndex.value = index;
		// 触发事件
		customTabsEmit('click', item);
	}
</script>

<style lang="scss" scoped>
	.select {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 0.6rem;
		padding: 0.8rem 0rem;
		background-color: #fff;
		border-bottom: 1rpx solid #f2f2f3;
	}

	.icon {
		display: flex;
		align-items: center;
		margin-right: 1rem;
	}

	.tow {
		.custom-tabs {
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			position: relative;
			padding: 0 30rpx;
		}

		.custom-tabs-bar {
			height: 100rpx;
			line-height: 100rpx;
			color: #000;
			font-weight: 700;
			padding-right: 30rpx;
			position: relative;

			&.active {
				color: #49a1d7;
				font-weight: 700;
			}
		}

		.tabbar-text {
			font-size: 1rem;
		}

		.custom-tabs-cursor {
			position: absolute;
			bottom: 3px;
			left: 20px;
			width: 80px;
			height: 2px;
			border-radius: 2px;
			background-color: #49a1d7;
			transition: all 0.3s ease-out;
		}

		.content-area {
			height: 75vh;
			background-color: #f7f8fa;
		}
	}

	.schedule-card {
		height: 250rpx;
		padding: 0rpx 30rpx 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.card-left {
			width: 86%;
			margin: 10rpx 0 0 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.content-top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.car-center-tag {
					width: 80rpx;
					height: 44rpx;
					border: 1rpx solid #849cb6;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #849cb6;
					border-radius: 5rpx;
				}
			}

			.content-bottom {
				height: 60%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.card-content {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 26rpx;
					color: #808080;
				}
			}
		}

		.card-right {
			width: 10%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.noData {
		height: 70vh;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.image {
		width: 100rpx;
		height: 100rpx;
		padding: 10rpx 40rpx 0 0;
	}
</style>