From 1fbad22c657106007321d65e635df83089e15467 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Fri, 4 Aug 2023 17:02:54 +0800
Subject: [PATCH] time dialog

---
 src/components/Setting/components/Date.vue |   4 +-
 src/components/dialogs/DatePicker.vue      |   1 -
 src/components/dialogs/TimePicker.vue      | 129 +++++++++++++++++++++++++++++
 src/main.js                                |   9 +-
 4 files changed, 139 insertions(+), 4 deletions(-)
 create mode 100644 src/components/dialogs/TimePicker.vue

diff --git a/src/components/Setting/components/Date.vue b/src/components/Setting/components/Date.vue
index 84ec259..47f6ff3 100644
--- a/src/components/Setting/components/Date.vue
+++ b/src/components/Setting/components/Date.vue
@@ -10,12 +10,14 @@
       <p class="num">11:40</p>
       <div class="btn">设置</div>
     </div>
-    <DatePicker />
+    <!-- <DatePicker /> -->
+    <TimePicker />
   </div>
 </template>
 
 <script setup>
 import DatePicker from 'cpns/dialogs/DatePicker'
+import TimePicker from 'cpns/dialogs/TimePicker'
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/dialogs/DatePicker.vue b/src/components/dialogs/DatePicker.vue
index 50fd2df..b2ac3b8 100644
--- a/src/components/dialogs/DatePicker.vue
+++ b/src/components/dialogs/DatePicker.vue
@@ -32,7 +32,6 @@
       <div class="select_wrap">
         <van-date-picker
           v-model="currentDate"
-          title="选择日期"
           :formatter="formatter"
           :columns-type="columnsType"
           :show-toolbar="false"
diff --git a/src/components/dialogs/TimePicker.vue b/src/components/dialogs/TimePicker.vue
new file mode 100644
index 0000000..c1857e8
--- /dev/null
+++ b/src/components/dialogs/TimePicker.vue
@@ -0,0 +1,129 @@
+<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">取消</div>
+        <div class="ok">确定</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const currentTime = ref(['12', '00'])
+const formatter = (type, option) => {
+  if (type === 'hour') {
+    option.text += '时'
+  }
+  if (type === 'minute') {
+    option.text += '分'
+  }
+  return option
+}
+</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>
diff --git a/src/main.js b/src/main.js
index 594446c..2cd0c00 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,9 +2,14 @@ import { createApp } from 'vue'
 import router from './router'
 import store from './store'
 import App from './App.vue'
-import { DatePicker } from 'vant'
+import { DatePicker, TimePicker } from 'vant'
 import 'vant/lib/index.css'
 import '@/assets/css/reset.css'
 import './style.scss'
 
-createApp(App).use(router).use(DatePicker).use(store).mount('#app')
+createApp(App)
+  .use(router)
+  .use(DatePicker)
+  .use(TimePicker)
+  .use(store)
+  .mount('#app')