School_bus_h5/components/search.vue

<template>
	<view class="search">
		<picker style="width: 50%;" @change="bindPickerChange($event,1)" :value="typeIndex" :range="typeList">
			<view class="search-type">
				{{typeList[typeIndex]}}
				<div class="search-type-img">
					<img src="../static/bottom.png">
				</div>
			</view>
		</picker>

		<picker style="width: 50%;" @change="bindPickerChange($event,2)" :value="timeIndex" :range="timeList">
			<view class="search-time">
				{{timeList[timeIndex]}}
				<div class="search-time-img">
					<img src="../static/bottom.png">
				</div>
			</view>
		</picker>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	const typeList = ref(['全部', '预约成功', '已通行', '已取消', '候补中'])
	const typeIndex = ref(0)
	const timeList = ref(['当月', '当日'])
	const timeIndex = ref(0)

	const bindPickerChange = (e, type) => {
		if (type === 1) {
			typeIndex.value = e.detail.value
		} else {
			timeIndex.value = e.detail.value
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 20rpx;
		height: 100rpx;
		font-size: 28rpx;
		background-color: #fff;

		.search-type {
			flex: 1;
			display: flex;
			justify-content: space-evenly;

			.search-type-img {
				margin-top: -5rpx;
				width: 17rpx;
				height: 12rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.search-time {
			flex: 1;
			display: flex;
			justify-content: space-evenly;

			.search-time-img {
				margin-top: -5rpx;
				width: 17rpx;
				height: 12rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>