zhibo/components/serve-time-pop/serve-time-pop.vue

<template>
	<u-popup :show="show" @close="close" close-on-click-overlay closeable round="20rpx">
		<view class="pop_content column">
			<text class="center bold">服务时间</text>
			<text v-if="type=='order'" class="mtb30">原服务时间: {{oldTime}}</text>
			<view class="date_tabs">
				<u-tabs :list="tabsList" @click="e=>tabCurrent=e.index" :current="tabCurrent" keyName="day" :activeStyle="{
				      color: '#fff',
							fontSize:'30rpx',
							background:'#36C3FF',
							padding:'5rpx 20rpx',
							borderRadius:'20rpx'
				  }" :inactiveStyle="{
				      color: '#242323',
				      fontSize:'30rpx',
							background:'#DBDBDB',
							padding:'5rpx 20rpx',
							borderRadius:'20rpx'
				  }" lineHeight="0" lineColor="#BFF6FF"></u-tabs>
			</view>
			<view class="content_time mt20">
				<view :class="timebCurrent==index?'time_item time_item_act':'time_item'"
					v-for="(item,index) in tabsList[tabCurrent]?tabsList[tabCurrent].time:[]" :key="index"
					@click="timebCurrent=index">{{item}}</view>
			</view>
			<view class="button justify-between m30">
				<u-button plain text="取消" @click="close" shape="circle"
					:style="{minWidth:'150rpx',marginRight:'10rpx'}"></u-button>
				<u-button text="确认" type="primary" @click="onConfirm" shape="circle"
					:style="{minWidth:'150rpx',marginLeft:'10rpx'}"></u-button>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		onMounted,
		ref,
	} from "vue";
	import {
		dateList
	} from "@/api/order";
	name: 'serve-time-pop'
	const emits = defineEmits(['update:show', 'complete', 'close'])
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		type: {
			type: String,
			default: 'pay'
		},
		oldTime: {
			type: String,
			default: ''
		}
	})
	const tabsList = ref([])
	const tabCurrent = ref(0)
	const timebCurrent = ref(0)
	onMounted(async () => {
		getDateList()
	})
	// 获取时间
	const getDateList = async () => {
		let res = await dateList()
		if (res) {
			tabsList.value = res.data
			let serveTime =
				`${tabsList.value[0].date} ${tabsList.value[0].time[0]}`
			if (props.type == 'pay') {
				emits('complete', serveTime)
				emits('update:show', false)
			}
		}
	}

	// 关闭pop
	const close = () => {
		emits('close', false)
		emits('update:show', false)
	}
	// 选择
	const onConfirm = () => {
		let serveTime =
			`${tabsList.value[tabCurrent.value].date} ${tabsList.value[tabCurrent.value].time[timebCurrent.value]}`
		emits('complete', serveTime)
		emits('update:show', false)
	}
</script>

<style lang="scss" scoped>
	.pop_content {
		padding: 25rpx 15rpx;

		.content_time {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
			grid-gap: 0rpx;
			height: 500rpx;
			overflow-y: scroll;

			.time_item {
				padding: 22rpx 14rpx;
				border: 1px solid #E6E6E6;
				color: #BEBEBE;
				transition: .5s;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
			}

			.time_item_act {
				background: $--base-bg;
				color: #fff;
			}
		}

		.button {
			width: calc(100% - 60rpx);
		}
	}
</style>