You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
9.4 KiB
148 lines
9.4 KiB
<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,25.9306C87.2369921875,26.2829,87.5889921875,26.9436,87.7209921875,27.3623C89.8549921875,26.7896,91.8789921875,25.9526,93.6609921875,24.7412C95.3329921875,25.9746,97.3349921875,26.8776,99.6009921875,27.4283C99.7989921875,26.9656,100.2609921875,26.3049,100.6129921875,25.9526C98.5009921875,25.5122,96.60899218750001,24.7412,95.0029921875,23.7062C96.8729921875,22.0765,98.3689921875,19.9621,99.2489921875,17.21L98.2369921875,16.77L97.9509921875,16.836L87.8749921875,16.836ZM116.6289921875,9.136L120.3469921875,9.136L120.3469921875,11.116L116.6289921875,11.116L116.6289921875,9.136ZM111.4809921875,9.136L115.1109921875,9.136L115.1109921875,11.116L111.4809921875,11.116L111.4809921875,9.136ZM106.4649921875,9.136L109.9629921875,9.136L109.9629921875,11.116L106.4649921875,11.116L106.4649921875,9.136ZM106.4869921875,16.198L106.4869921875,25.46L103.5609921875,25.46L103.5609921875,26.692L123.0969921875,26.692L123.0969921875,25.46L120.0829921875,25.46L120.0829921875,16.198L113.1969921875,16.198L113.5049921875,14.9L122.5909921875,14.9L122.5909921875,13.602L113.7469921875,13.602L113.9889921875,12.326L121.9969921875,12.326L121.9969921875,7.948L104.8809921875,7.948L104.8809921875,12.326L112.2949921875,12.326L112.1189921875,13.602L103.8029921875,13.602L103.8029921875,14.9L111.8989921875,14.9L111.6349921875,16.198L106.4869921875,16.198ZM108.0709921875,25.46L108.0709921875,24.096L118.4549921875,24.096L118.4549921875,25.46L108.0709921875,25.46ZM108.0709921875,19.542L118.4549921875,19.542L118.4549921875,20.818L108.0709921875,20.818L108.0709921875,19.542ZM108.0709921875,18.552L108.0709921875,17.32L118.4549921875,17.32L118.4549921875,18.552L108.0709921875,18.552ZM108.0709921875,21.808L118.4549921875,21.808L118.4549921875,23.106L108.0709921875,23.106L108.0709921875,21.808Z"
|
|
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>
|