init

uni_modules/nutui-uni/components/timedetail/index.scss

@@ -0,0 +1,68 @@
+.nut-theme-dark {
+  .nut-time-detail {
+    background-color: $dark-background2;
+
+    &__detail {
+      &__list {
+        &__item {
+          color: $dark-color;
+          background-color: $dark-background;
+
+          &--curr {
+            color: $timeselect-timedetail-item-cur-text-color;
+          }
+        }
+      }
+    }
+  }
+}
+
+.nut-time-detail {
+  display: flex;
+  width: 100%;
+  padding: $timeselect-timedetail-padding;
+
+  &__detail {
+    width: 100%;
+
+    &__list {
+      &__item {
+        display: inline-block;
+        width: $timeselect-timedetail-item-width;
+        height: $timeselect-timedetail-item-height;
+        margin-right: 10px;
+        margin-bottom: 10px;
+        font-size: $timeselect-timedetail-item-text-font-size;
+        font-weight: bold;
+        line-height: $timeselect-timedetail-item-line-height;
+        color: $timeselect-timedetail-item-text-color;
+        text-align: center;
+        background-color: $timeselect-timedetail-item-bg-color;
+        border: 1px solid transparent;
+        border-radius: $timeselect-timedetail-item-border-radius;
+
+        &--curr {
+          position: relative;
+          color: $timeselect-timedetail-item-cur-text-color;
+          background-color: transparent;
+          border: 1px solid $timeselect-timedetail-item-cur-border;
+
+          &::after {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            content: "";
+            background-color: $timeselect-timedetail-item-cur-bg-color;
+            opacity: 0.15;
+          }
+        }
+      }
+    }
+  }
+
+  &__detail--afternoon {
+    margin-top: 30px;
+  }
+}

uni_modules/nutui-uni/components/timedetail/index.ts

@@ -0,0 +1 @@
+export * from './timedetail'

uni_modules/nutui-uni/components/timedetail/timedetail.ts

@@ -0,0 +1,19 @@
+import type { ExtractPropTypes } from 'vue'
+import { SELECT_EVENT } from '../_constants'
+import { commonProps, isString, makeArrayProp } from '../_utils'
+
+export const timedetailProps = {
+  ...commonProps,
+  /**
+   * @description 可选择的时间，数组元素同 `current-time`
+   */
+  times: makeArrayProp<any>([]),
+}
+
+export type TimeDetailProps = ExtractPropTypes<typeof timedetailProps>
+
+export const timedetailEmits = {
+  [SELECT_EVENT]: (time: string) => isString(time),
+}
+
+export type TimeDetailEmits = typeof timedetailEmits

uni_modules/nutui-uni/components/timedetail/timedetail.vue

@@ -0,0 +1,79 @@
+<!-- eslint-disable padded-blocks -->
+<script setup lang="ts">
+import { computed, defineComponent, inject, reactive } from 'vue'
+import { PREFIX, SELECT_EVENT } from '../_constants'
+import { getMainClass } from '../_utils'
+import { timedetailEmits, timedetailProps } from './timedetail'
+
+const props = defineProps(timedetailProps)
+const emit = defineEmits(timedetailEmits)
+/* eslint-disable eqeqeq */
+
+const currentKey = inject('currentKey')
+const currentTime = inject('currentTime')
+const _muti = inject('muti')
+
+const state = reactive({
+  currentKey,
+  currentTime: currentTime as any[],
+})
+
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+
+function getClass(item: string) {
+  const find = state.currentTime.find((item: any) => item.key == state.currentKey)
+  if (find) {
+    return {
+      'nut-time-detail__detail__list__item': true,
+      'nut-time-detail__detail__list__item--curr': find.list.filter((value: string) => value === item).length > 0,
+    }
+  }
+}
+
+const renderData = computed(() => {
+  return props?.times?.find(time => time.key == state.currentKey).list
+})
+
+function handleTime(time: string) {
+  emit(SELECT_EVENT, time)
+}
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-time-detail`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    // #ifndef H5
+    styleIsolation: 'shared',
+    // #endif
+  },
+})
+</script>
+
+<template>
+  <view :class="classes" :style="customStyle">
+    <view class="nut-time-detail__detail nut-time-detail__detail--moring">
+      <!-- <view class="nut-time-detail__detail__time">上午</view> -->
+      <view class="nut-time-detail__detail__list">
+        <view
+          v-for="item in renderData"
+          :key="item"
+          :class="getClass(item)"
+          @click="handleTime(item)"
+        >
+          {{ item }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>