School_bus_h5/components/search2.vue

<template>
	<view class="search">
		<uni-data-picker v-slot:default v-model="typeValue" :localdata="typeList" popup-title="请选择预约状态" @nodeclick="onnodeclick">
			<view class="search-type">
				{{ typeList[typeValue].text }}
				<view class="search-type-img"><img src="../static/bottom.png" /></view>
			</view>
		</uni-data-picker>

		<uni-data-picker v-slot:default v-model="timeValue" :localdata="timeList" popup-title="请选择预约时间" @nodeclick="onnodeclick">
			<view class="search-time">
				{{ timeList[timeValue].text }}
				<view class="search-time-img"><img src="../static/bottom.png" /></view>
			</view>
		</uni-data-picker>
	</view>
</template>

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

const props = defineProps({
	typeList: Array,
	timeList: Array
})

const typeValue = ref(0)
const timeValue = ref(0)

const conveyData = defineEmits(['handLeConveyData'])

const onnodeclick = () => {
	conveyData('handLeConveyData', {
		typeIndex: typeValue.value,
		timeIndex: timeValue.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>