|
|
<template> <div class="date_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="125" height="32" viewBox="0 0 125 32" > <g> <g> <g> <path d="M39.566,17.848L50.544,17.848L50.544,24.03L39.566,24.03L39.566,17.848ZM39.566,16.22L39.566,10.258L50.544,10.258L50.544,16.22L39.566,16.22ZM37.872,8.608L37.872,27.1162L39.566,27.1162L39.566,25.68L50.544,25.68L50.544,27.0058L52.304,27.0058L52.304,8.608L37.872,8.608ZM60.796,22.446C60.135999999999996,23.92,58.97,25.394,57.738,26.384C58.134,26.626,58.794,27.088,59.102000000000004,27.353C60.29,26.252,61.566,24.558,62.358000000000004,22.886L60.796,22.446ZM63.942,23.128C64.8,24.162,65.812,25.614,66.208,26.516L67.572,25.724C67.11,24.822,66.098,23.458,65.218,22.446L63.942,23.128ZM75.69,9.708L75.69,13.25L71.18,13.25L71.18,9.708L75.69,9.708ZM69.64,8.212L69.64,16.198C69.64,19.366,69.464,23.568,67.616,26.494C67.99000000000001,26.67,68.672,27.154,68.936,27.4421C70.256,25.35,70.828,22.534,71.048,19.872L75.69,19.872L75.69,25.218C75.69,25.57,75.55799999999999,25.658,75.25,25.68C74.92,25.702,73.798,25.702,72.632,25.658C72.852,26.098,73.094,26.824,73.16,27.264C74.76599999999999,27.264,75.822,27.242,76.438,26.956C77.076,26.692,77.274,26.186,77.274,25.24L77.274,8.212L69.64,8.212ZM75.69,14.724L75.69,18.376L71.136,18.376C71.18,17.606,71.18,16.88,71.18,16.198L71.18,14.724L75.69,14.724ZM65.394,7.376L65.394,10.038L61.39,10.038L61.39,7.376L59.894,7.376L59.894,10.038L58.024,10.038L58.024,11.512L59.894,11.512L59.894,20.51L57.716,20.51L57.716,21.984L68.562,21.984L68.562,20.51L66.934,20.51L66.934,11.512L68.562,11.512L68.562,10.038L66.934,10.038L66.934,7.376L65.394,7.376ZM61.39,11.512L65.394,11.512L65.394,13.47L61.39,13.47L61.39,11.512ZM61.39,14.79L65.394,14.79L65.394,16.946L61.39,16.946L61.39,14.79ZM61.39,18.288L65.394,18.288L65.394,20.51L61.39,20.51L61.39,18.288ZM82.444,8.52C83.61,9.554,85.084,11.028,85.76599999999999,11.974L86.888,10.808C86.184,9.906,84.71000000000001,8.476,83.52199999999999,7.50559L82.444,8.52ZM80.706,14.02L80.706,15.604L83.80799999999999,15.604L83.80799999999999,23.5078C83.80799999999999,24.5209,83.126,25.2479,82.708,25.5122C83.01599999999999,25.8426,83.456,26.5253,83.61,26.9216C83.94,26.4813,84.53399999999999,26.0406,88.45,23.1335C88.25200000000001,22.8032,87.988,22.1865,87.856,21.7458L85.414,23.5298L85.414,14.02L80.706,14.02ZM90.562,7.904L90.562,10.346C90.562,11.974,90.078,13.8,87.174,15.12C87.482,15.384,88.054,16.022,88.25200000000001,16.352C91.42,14.834,92.124,12.458,92.124,10.39L92.124,9.444L96.018,9.444L96.018,12.986C96.018,14.658,96.326,15.274,97.866,15.274C98.108,15.274,99.186,15.274,99.516,15.274C99.956,15.274,100.418,15.252,100.682,15.164C100.616,14.79,100.572,14.152,100.528,13.734C100.264,13.8,99.802,13.844,99.494,13.844C99.208,13.844,98.218,13.844,97.976,13.844C97.624,13.844,97.58,13.646,97.58,13.008L97.58,7.904L90.562,7.904ZM97.47,18.376C96.678,20.1381,95.49000000000001,21.5918,94.038,22.7592C92.564,21.5478,91.398,20.0721,90.606,18.376L97.47,18.376ZM88.208,16.836L88.208,18.376L89.352,18.376L89.044,18.4863C89.924,20.5124,91.178,22.2745,92.74000000000001,23.7062C91.09,24.7632,89.19800000000001,25.4902,87.262,25.9306C87.57,26.2829,87.922,26.9436,88.054,27.3623C90.188,26.7896,92.212,25.9526,93.994,24.7412C95.666,25.9746,97.668,26.8776,99.934,27.4283C100.132,26.9656,100.594,26.3049,100.946,25.9526C98.834,25.5122,96.94200000000001,24.7412,95.336,23.7062C97.206,22.0765,98.702,19.9621,99.582,17.21L98.57,16.77L98.284,16.836L88.208,16.836ZM116.962,9.136L120.68,9.136L120.68,11.116L116.962,11.116L116.962,9.136ZM111.814,9.136L115.444,9.136L115.444,11.116L111.814,11.116L111.814,9.136ZM106.798,9.136L110.296,9.136L110.296,11.116L106.798,11.116L106.798,9.136ZM106.82,16.198L106.82,25.46L103.894,25.46L103.894,26.692L123.43,26.692L123.43,25.46L120.416,25.46L120.416,16.198L113.53,16.198L113.838,14.9L122.924,14.9L122.924,13.602L114.08,13.602L114.322,12.326L122.33,12.326L122.33,7.948L105.214,7.948L105.214,12.326L112.628,12.326L112.452,13.602L104.136,13.602L104.136,14.9L112.232,14.9L111.968,16.198L106.82,16.198ZM108.404,25.46L108.404,24.096L118.788,24.096L118.788,25.46L108.404,25.46ZM108.404,19.542L118.788,19.542L118.788,20.818L108.404,20.818L108.404,19.542ZM108.404,18.552L108.404,17.32L118.788,17.32L118.788,18.552L108.404, fill="#000000" fill-opacity="1" /> </g> </g> <g> <path d="M24.375,8.4L21.1504,8.4C21.1504,7.075,20.0586,6,18.7129,6L18.3066,6C16.9609,6,15.8691,7.075,15.8691,8.4L10.1562,8.4C10.1562,7.7375,9.88457,7.1375,9.44277,6.7025C9.00098,6.2675,8.3916,6,7.71875,6L7.3125,6C5.9668,6,4.875,7.075,4.875,8.4L1.625,8.4C0.728711,8.4,0,9.115,0,10L0,28.4C0,29.2825,0.728711,30,1.625,30L24.375,30C25.2713,30,26,29.2825,26,28.4L26,10C26,9.115,25.2713,8.4,24.375,8.4ZM17.4941,8.6C17.4941,8.0475,17.9486,7.6,18.5098,7.6C19.0709,7.6,19.5254,8.0475,19.5254,8.6L19.5254,10.6C19.5254,11.1525,19.0709,11.6,18.5098,11.6C18.2305,11.6,17.9766,11.4875,17.7912,11.307500000000001C17.6084,11.125,17.4941,10.875,17.4941,10.6L17.4941,8.6ZM6.5,8.6C6.5,8.0475,6.95449,7.6,7.51563,7.6C8.07676,7.6,8.53125,8.0475,8.53125,8.6L8.53125,10.6C8.53125,11.1525,8.07676,11.6,7.51563,11.6C7.23633,11.6,6.98242,11.4875,6.79707,11.307500000000001C6.61426,11.125,6.5,10.875,6.5,10.6L6.5,8.6ZM24.375,27.6C24.375,28.0425,24.0119,28.4,23.5625,28.4L2.4375,28.4C1.98809,28.4,1.625,28.0425,1.625,27.6L1.625,16.4L24.375,16.4L24.375,27.6ZM2.4375,18L8.9375,18L8.9375,22L2.4375,22L2.4375,18ZM2.4375,22.8L8.9375,22.8L8.9375,26.8L2.4375,26.8L2.4375,22.8ZM9.75,18L16.25,18L16.25,22L9.75,22L9.75,18ZM9.75,22.8L16.25,22.8L16.25,26.8L9.75,26.8L9.75,22.8ZM17.0625,18L23.5625,18L23.5625,22L17.0625,22L17.0625,18ZM17.0625,22.8L23.5625,22.8L23.5625,26.8L17.0625,26.8L17.0625,22.8Z" fill="#06518B" fill-opacity="1" /> </g> </g> </svg> <div class="select_wrap"> <van-date-picker v-model="currentDate" :formatter="formatter" :columns-type="columnsType" :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="selectDate">确定</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({ hideDatePicker: { type: Function, },})// 拿到当前时间
const currentDate = ref(moment().format('YYYY-MM-DD').split('-'))const columnsType = ref(['year', 'month', 'day'])const formatter = (type, option) => { if (type === 'year') { option.text += '年' } if (type === 'month') { option.text += '月' } if (type === 'day') { option.text += '日' } return option}
const handleCancel = () => { props.hideDatePicker()}
const selectDate = () => { settingStore.updateCurrentDate(currentDate.value) props.hideDatePicker()}</script>
<style lang="scss" scoped>.date_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>
|
