本组件实现了服务时间的选择功能,通过弹窗的形式让用户能够选择不同的时间段及其对应的服务时间。
功能实现
- 时间段切换:用户可以通过点击不同的标签来切换上午和下午的时间段。
- 时间列表展示:根据所选时间段展示对应的服务时间列表。
- 数据获取:通过 API 请求获取服务时间数据,并将其按照时间段分类展示。
技术要点
- Vue 组件: 使用 Vue.js 构建可复用的 UI 组件。
- 状态管理: 利用
ref
来管理组件内部的状态。 - API 调用: 通过
ApiGetStaffServiceTimeByStaffId
方法获取服务时间数据。 - 样式定制: 使用 SCSS 定制组件的样式,提升用户体验。
示例代码
<template>
<popup title="服务时间" ref="serverTimePopupRef">
<view class="server-time-popup">
<view class="server-time-popup__interval">
<text
:class="{ actived: currentInterval === item.value }"
v-for="item in intervalType"
:key="item.value"
@click="intervalType = item.value"
>
{{ item.label }}
</text>
</view>
<view class="server-time-popup__list">
<view
class="server-time-popup__list--item"
v-for="item in currentInterval == 1 ? beforeTwelfthTimeList : afterTwelfthTimeList"
:key="item.time"
:class="{ disabled: item.select }"
>
<text>{{ item.time }}</text>
<text>{{ item.select ? '' : '不' }}可选</text>
</view>
</view>
</view>
</popup>
</template>
<script setup>
// 导入依赖
import dayjs from 'dayjs'
import { ref } from 'vue'
import { ApiGetStaffServiceTimeByStaffId } from '@/service/merchant/staffManage'
// 定义属性
const props = defineProps({
staffId: {
type: String,
default: null,
},
})
// 状态定义
const intervalType = [
{ value: 1, label: '00:00-11:59' },
{ value: 2, label: '12:00-23:59' },
]
const currentInterval = ref(1)
const serverTimePopupRef = ref()
const serviceDate = dayjs().format('YYYY-MM-DD')
const beforeTwelfthTimeList = ref([])
const afterTwelfthTimeList = ref([])
// 方法定义
const open = () => {
serverTimePopupRef.value.open()
// 获取服务时间数据并处理
}
// 暴露方法
defineExpose({ open })
</script>
<style lang="scss" scoped>
.server-time-popup {
padding: 0 40rpx;
&__interval {
display: flex;
justify-content: center;
gap: 180rpx;
margin-bottom: 36rpx;
text {
color: #333;
font-size: 32rpx;
font-weight: bold;
&.actived {
color: $uni-primary;
}
}
}
&__list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 10rpx;
&--item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 5rpx 0;
background-color: #f2f2f2ff;
border-radius: 8rpx;
color: #333;
text {
font-size: 28rpx;
&:last-child {
font-size: 20rpx;
}
}
}
.disabled {
opacity: 0.55;
}
}
}
</style>
以上为组件的基本实现和使用说明,可以根据具体需求进行扩展和优化。