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.
153 lines
8.7 KiB
153 lines
8.7 KiB
<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,18.552ZM108.404,21.808L118.788,21.808L118.788,23.106L108.404,23.106L108.404,21.808Z"
|
|
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>
|