init

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

@@ -0,0 +1,66 @@
+@import '../popup/index';
+
+.nut-theme-dark {
+  .nut-time-select {
+    background-color: $dark-background2;
+
+    &__title {
+      color: $dark-color;
+      background-color: $dark-background2;
+    }
+
+    &__content {
+      &__pannel {
+        color: $dark-color;
+        background-color: $dark-background3;
+      }
+
+      &__detail {
+        background-color: $dark-background2;
+      }
+    }
+  }
+}
+
+.nut-time-select {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  &__title {
+    display: flex;
+    width: $timeselect-title-width;
+    height: $timeselect-title-height;
+    padding-bottom: 10px;
+    font-size: $timeselect-title-font-size;
+    line-height: $timeselect-title-line-height;
+    color: $timeselect-title-color;
+    text-align: center;
+
+    &__fixed {
+      width: 100%;
+      height: 50px;
+    }
+  }
+
+  &__content {
+    display: flex;
+    width: 100%;
+    height: calc(100% - $timeselect-title-height - 10px);
+
+    &__pannel {
+      width: 140px;
+      height: 100%;
+      overflow: auto;
+      background-color: $timeselect-pannel-bg-color;
+    }
+
+    &__detail {
+      width: calc(100% - 140px);
+      height: 100%;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,42 @@
+import type { ExtractPropTypes } from 'vue'
+import { SELECT_EVENT, UPDATE_VISIBLE_EVENT } from '../_constants'
+import { commonProps, isBoolean, makeArrayProp, makeNumericProp, makeStringProp, truthProp } from '../_utils'
+
+export const timeselectProps = {
+  ...commonProps,
+  /**
+   * @description 是否显示弹层
+   */
+  visible: Boolean,
+  /**
+   * @description 弹层的高度
+   */
+  height: makeStringProp('20%'),
+  /**
+   * @description 弹层标题
+   */
+  title: String,
+  /**
+   * @description 唯一标识
+   */
+  currentKey: makeNumericProp(0),
+  /**
+   * @description 当前选择的时间，数组元素包含:key: string; list: string[]
+   */
+  currentTime: makeArrayProp<{ key: string, list: string[] }>([]),
+  /**
+   * @description 背景是否锁定
+   */
+  lockScroll: truthProp,
+  muti: Boolean,
+}
+
+export type TimeSelectProps = ExtractPropTypes<typeof timeselectProps>
+
+export const timeselectEmits = {
+  [UPDATE_VISIBLE_EVENT]: (val: boolean) => isBoolean(val),
+  [SELECT_EVENT]: (val: any) => val instanceof Object,
+
+}
+
+export type TimeSelectEmits = typeof timeselectEmits

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

@@ -0,0 +1,85 @@
+<!-- eslint-disable padded-blocks -->
+<script setup lang="ts">
+import { computed, defineComponent, provide } from 'vue'
+import { PREFIX, SELECT_EVENT, UPDATE_VISIBLE_EVENT } from '../_constants'
+import { getMainClass } from '../_utils'
+import { useTranslate } from '../../locale'
+import NutPopup from '../popup/popup.vue'
+import { timeselectEmits, timeselectProps } from './timeselect'
+
+const props = defineProps(timeselectProps)
+const emit = defineEmits(timeselectEmits)
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+
+const popStyle = computed(() => {
+  return {
+    width: '100%',
+    height: props.height,
+  }
+})
+
+const currentKey = computed(() => props.currentKey)
+
+const currentTime = computed(() => props.currentTime)
+
+const muti = computed(() => props.muti)
+
+function close() {
+  emit(UPDATE_VISIBLE_EVENT, false)
+  emit(SELECT_EVENT, currentTime.value)
+}
+
+provide('currentKey', currentKey)
+provide('currentTime', currentTime)
+provide('muti', muti)
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-time-select`
+const { translate } = useTranslate(componentName)
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <NutPopup
+    position="bottom"
+    closeable
+    round
+    :visible="visible"
+    :custom-style="popStyle"
+    :lock-scroll="lockScroll"
+    @click-overlay="close"
+    @click-close-icon="close"
+  >
+    <view :class="classes" :style="customStyle">
+      <view class="nut-time-select__title">
+        <view class="nut-time-select__title__fixed">
+          <span v-if="!$slots.title">{{ title || translate('pickupTime') }}</span>
+          <slot v-else name="title" />
+        </view>
+      </view>
+      <view class="nut-time-select__content">
+        <view class="nut-time-select__content__pannel">
+          <slot name="pannel" />
+        </view>
+        <view class="nut-time-select__content__detail">
+          <slot name="detail" />
+        </view>
+      </view>
+    </view>
+  </NutPopup>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>