80 lines
1.9 KiB
Vue
80 lines
1.9 KiB
Vue
<!-- 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>
|