disinfection_high_front_end/src/components/dialogs/TimePicker.vue

<template>
  <div class="time_picker_dialog_container">
    <div class="modal_content">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="none"
        version="1.1"
        width="124.6669921875"
        height="32"
        viewBox="0 0 124.6669921875 32"
      >
        <g>
          <g>
            <g>
              <path
                d="M44.0949921875,15.648C45.2609921875,17.342,46.7569921875,19.674,47.4609921875,21.016L48.9129921875,20.18C48.1649921875,18.838,46.646992187500004,16.594,45.4589921875,14.922L44.0949921875,15.648ZM40.7949921875,16.748L40.7949921875,21.764L37.0329921875,21.764L37.0329921875,16.748L40.7949921875,16.748ZM40.7949921875,15.274L37.0329921875,15.274L37.0329921875,10.456L40.7949921875,10.456L40.7949921875,15.274ZM35.4489921875,8.96L35.4489921875,25.042L37.0329921875,25.042L37.0329921875,23.26L42.3349921875,23.26L42.3349921875,8.96L35.4489921875,8.96ZM50.4749921875,7.21512L50.4749921875,11.512L43.3469921875,11.512L43.3469921875,13.14L50.4749921875,13.14L50.4749921875,24.866C50.4749921875,25.306,50.298992187500005,25.46,49.8589921875,25.46C49.3749921875,25.504,47.7469921875,25.504,46.030992187500004,25.438C46.2729921875,25.922,46.5369921875,26.67,46.646992187500004,27.132C48.8469921875,27.132,50.2549921875,27.11,51.046992187499995,26.824C51.8389921875,26.56,52.146992187500004,26.076,52.146992187500004,24.866L52.146992187500004,13.14L54.8309921875,13.14L54.8309921875,11.512L52.146992187500004,11.512L52.146992187500004,7.21512L50.4749921875,7.21512ZM58.548992187500005,12.062L58.548992187500005,27.3534L60.2429921875,27.3534L60.2429921875,12.062L58.548992187500005,12.062ZM58.8789921875,8.18931C59.890992187500004,9.158,61.034992187499995,10.544,61.540992187499995,11.424L62.9049921875,10.544C62.3769921875,9.62,61.1889921875,8.322,60.1549921875,7.39319L58.8789921875,8.18931ZM64.8849921875,19.102L70.16499218749999,19.102L70.16499218749999,22.072L64.8849921875,22.072L64.8849921875,19.102ZM64.8849921875,14.79L70.16499218749999,14.79L70.16499218749999,17.716L64.8849921875,17.716L64.8849921875,14.79ZM63.3889921875,13.404L63.3889921875,23.436L71.7269921875,23.436L71.7269921875,13.404L63.3889921875,13.404ZM64.2909921875,8.344L64.2909921875,9.906L74.93899218749999,9.906L74.93899218749999,25.35C74.93899218749999,25.636,74.8509921875,25.724,74.5649921875,25.746C74.2789921875,25.746,73.37699218750001,25.768,72.4529921875,25.724C72.6729921875,26.142,72.8929921875,26.846,72.9809921875,27.242C74.3229921875,27.242,75.2689921875,27.242,75.8629921875,26.978C76.4349921875,26.692,76.63299218750001,26.274,76.63299218750001,25.35L76.63299218750001,8.344L64.2909921875,8.344ZM82.1109921875,8.52C83.2769921875,9.554,84.7509921875,11.028,85.43299218749999,11.974L86.5549921875,10.808C85.8509921875,9.906,84.37699218750001,8.476,83.18899218749999,7.50559L82.1109921875,8.52ZM80.3729921875,14.02L80.3729921875,15.604L83.47499218749999,15.604L83.47499218749999,23.5078C83.47499218749999,24.5209,82.7929921875,25.2479,82.3749921875,25.5122C82.68299218749999,25.8426,83.1229921875,26.5253,83.2769921875,26.9216C83.6069921875,26.4813,84.20099218749999,26.0406,88.1169921875,23.1335C87.91899218750001,22.8032,87.6549921875,22.1865,87.5229921875,21.7458L85.0809921875,23.5298L85.0809921875,14.02L80.3729921875,14.02ZM90.2289921875,7.904L90.2289921875,10.346C90.2289921875,11.974,89.7449921875,13.8,86.8409921875,15.12C87.1489921875,15.384,87.7209921875,16.022,87.91899218750001,16.352C91.0869921875,14.834,91.7909921875,12.458,91.7909921875,10.39L91.7909921875,9.444L95.6849921875,9.444L95.6849921875,12.986C95.6849921875,14.658,95.9929921875,15.274,97.5329921875,15.274C97.7749921875,15.274,98.8529921875,15.274,99.1829921875,15.274C99.6229921875,15.274,100.0849921875,15.252,100.3489921875,15.164C100.2829921875,14.79,100.2389921875,14.152,100.1949921875,13.734C99.9309921875,13.8,99.4689921875,13.844,99.1609921875,13.844C98.8749921875,13.844,97.8849921875,13.844,97.6429921875,13.844C97.2909921875,13.844,97.2469921875,13.646,97.2469921875,13.008L97.2469921875,7.904L90.2289921875,7.904ZM97.1369921875,18.376C96.3449921875,20.1381,95.15699218750001,21.5918,93.7049921875,22.7592C92.2309921875,21.5478,91.0649921875,20.0721,90.2729921875,18.376L97.1369921875,18.376ZM87.8749921875,16.836L87.8749921875,18.376L89.0189921875,18.376L88.7109921875,18.4863C89.5909921875,20.5124,90.8449921875,22.2745,92.40699218750001,23.7062C90.7569921875,24.7632,88.86499218750001,25.4902,86.9289921875,
                fill="#000000"
                fill-opacity="1"
              />
            </g>
          </g>
          <g>
            <path
              d="M11.6667,29.3333C18.1099,29.3333,23.3333,24.1099,23.3333,17.6667C23.3333,11.22346,18.1099,6,11.6667,6C5.22346,6,0,11.22346,0,17.6667C0,24.1099,5.22346,29.3333,11.6667,29.3333ZM6.67304,21.423000000000002L10.7917,17.3041L10.7917,12.41667C10.7917,11.93342,11.1834,11.54167,11.6667,11.54167C12.1499,11.54167,12.5417,11.93342,12.5417,12.41667L12.5417,17.6667C12.5416,17.898699999999998,12.4494,18.1212,12.2853,18.2853L7.91029,22.6603C7.57044,23.0122,7.00811,23.0171,6.66219,22.6712C6.31627,22.3252,6.32116,21.762900000000002,6.67304,21.423000000000002Z"
              fill="#06518B"
              fill-opacity="1"
            />
          </g>
        </g>
      </svg>
      <div class="select_wrap">
        <van-time-picker
          :formatter="formatter"
          v-model="currentTime"
          :show-toolbar="false"
          option-height="33"
          visible-option-num="5"
        />
      </div>
      <div class="btns">
        <div class="cancel style-btn" @click="handleCancel">取消</div>
        <div class="ok style-btn" @click="selectTime">确定</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useSettingStore } from '@/store'
import moment from 'moment'

const settingStore = useSettingStore()
const props = defineProps({
  hideTimePicker: {
    type: Function,
  },
})

const currentTime = ref(moment().utcOffset(8).format('HH:mm').split(':'))
const formatter = (type, option) => {
  if (type === 'hour') {
    option.text += '时'
  }
  if (type === 'minute') {
    option.text += '分'
  }
  return option
}

const handleCancel = () => {
  props.hideTimePicker()
}

const selectTime = () => {
  settingStore.updateCurrentTime(currentTime.value)
  props.hideTimePicker()
}
</script>

<style lang="scss" scoped>
.time_picker_dialog_container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  .modal_content {
    width: 476px;
    height: 389px;
    border-radius: 16px;
    background: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
    padding: 28px 57px 32px 57px;
    display: flex;
    align-items: center;
    flex-direction: column;
    .select_wrap {
      width: 362px;
      height: 163px;
      margin: 33px 0;
      overflow: hidden;
    }
    .btns {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 362px;
      height: 68px;
      .cancel {
        width: 173px;
        height: 68px;
        border-radius: 34px;
        background: #d8d8d8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Source Han Sans CN;
        font-size: 23px;
        font-weight: 350;
        letter-spacing: 0em;
        color: #ffffff;
      }
      .ok {
        width: 173px;
        height: 68px;
        border-radius: 34px;
        background: #06518b;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Source Han Sans CN;
        font-size: 23px;
        font-weight: 350;
        letter-spacing: 0em;
        color: #ffffff;
      }
    }
  }
}
</style>