vue3选择时间段并显示置灰

清雅白鹿记

于 2024-08-18 02:26:36 发布

阅读量41

点赞数

文章标签： vue.js 前端 javascript ecmascript 前端框架

vue3选择时间段并显示置灰_数据

本组件实现了服务时间的选择功能，通过弹窗的形式让用户能够选择不同的时间段及其对应的服务时间。

功能实现

时间段切换：用户可以通过点击不同的标签来切换上午和下午的时间段。
时间列表展示：根据所选时间段展示对应的服务时间列表。
数据获取：通过 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>