From a38f54f02b48cf8ef2c9ed6febed560b4f38d534 Mon Sep 17 00:00:00 2001
From: wjt <1797368093@qq.com>
Date: 星期五, 21 六月 2024 15:26:42 +0800
Subject: [PATCH] Merge branch 'master' of http://218.28.192.34:9999/r/sqys/sqys_xcx
---
uni_modules/yt-dateTimePicker/components/yt-dateTimePicker/yt-dateTimePicker.vue | 339 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 339 insertions(+), 0 deletions(-)
diff --git a/uni_modules/yt-dateTimePicker/components/yt-dateTimePicker/yt-dateTimePicker.vue b/uni_modules/yt-dateTimePicker/components/yt-dateTimePicker/yt-dateTimePicker.vue
new file mode 100644
index 0000000..4e32bc2
--- /dev/null
+++ b/uni_modules/yt-dateTimePicker/components/yt-dateTimePicker/yt-dateTimePicker.vue
@@ -0,0 +1,339 @@
+<template>
+ <view class="yt-dateTimePicker" v-if="done">
+ <view class="mask" :class="{ show: open }" @touchmove.stop.prevent catchtouchmove="true">
+ </view>
+ <view class="wrap" :class="{ show: open }">
+ <view class="picker-header" @touchmove.stop.prevent catchtouchmove="true">
+ <view class="btn-picker cancel" @click="open = false">鍙栨秷</view>
+ <view class="btn-picker submit" @click="_onSubmit">纭畾</view>
+ </view>
+ <view class="picker-body">
+ <picker-view :value="value" @change="_onChange">
+ <picker-view-column :disable-flicking="true" v-if="timeHide[0]">
+ <view class="column-item" v-for="item in years" :key="item">
+ {{ item + timeLabel[0] }}
+ </view>
+ </picker-view-column>
+ <picker-view-column :disable-flicking="true" v-if="timeHide[1]">
+ <view class="column-item" v-for="item in months" :key="item">
+ {{ formatNum(item) + timeLabel[1] }}
+ </view>
+ </picker-view-column>
+ <picker-view-column :disable-flicking="true" v-if="timeHide[2]">
+ <view class="column-item" v-for="item in days" :key="item">
+ {{ formatNum(item) + timeLabel[2] }}
+ </view>
+ </picker-view-column>
+ <picker-view-column :disable-flicking="true" v-if="timeHide[3]">
+ <view class="column-item" v-for="item in hours" :key="item">
+ {{ formatNum(item) + timeLabel[3] }}
+ </view>
+ </picker-view-column>
+ <picker-view-column :disable-flicking="true" v-if="timeHide[4]">
+ <view class="column-item" v-for="item in minutes" :key="item">
+ {{ formatNum(item) + timeLabel[4] }}
+ </view>
+ </picker-view-column>
+ <picker-view-column :disable-flicking="true" v-if="timeHide[5]">
+ <view class="column-item" v-for="item in seconds" :key="item">
+ {{ formatNum(item) + timeLabel[5] }}
+ </view>
+ </picker-view-column>
+ </picker-view>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+ export default {
+ name: "yt-dateTimePicker",
+ props: {
+ startYear: {
+ type: Number,
+ default: 2000,
+ },
+ endYear: {
+ type: Number,
+ default: 2099,
+ },
+ timeLabel: {
+ type: Array,
+ default: () => ["骞�", "鏈�", "鏃�", "鏃�", "鍒�", "绉�"],
+ },
+ timeHide: {
+ type: Array,
+ default: () => [true, true, true, true, true, true],
+ },
+ timeInit: {
+ type: String,
+ default: '', //new Date('2023-5-20').valueOf()
+ },
+ },
+
+ data() {
+ return {
+ open: false,
+ years: [],
+ months: [],
+ days: [],
+ hours: [],
+ minutes: [],
+ seconds: [],
+ year: "",
+ month: "",
+ day: "",
+ hour: "",
+ minute: "",
+ second: "",
+ value: [0, 0, 0, 0, 0, 0],
+ done: false,
+ };
+ },
+
+ computed: {
+ currentDatetime() {
+ return this.timeInit ? new Date(new Date(`${this.timeInit}`).valueOf()) : new Date(new Date().valueOf());
+ },
+ },
+
+ mounted() {
+ this.init();
+ },
+
+ watch: {
+ month() {
+ this.initDays();
+ },
+ },
+
+ methods: {
+ init() {
+ this.initYears();
+ this.initMonths();
+ this.initDays();
+ this.initHours();
+ this.initMinutes();
+ this.initSeconds();
+ this.setSelectValue();
+ this.done = true;
+ },
+
+ initYears() {
+ const years = [];
+ for (let year = this.startYear; year <= this.endYear; year++) {
+ years.push(year);
+ if (this.currentDatetime.getFullYear() === year) {
+ this.$set(this.value, 0, year - this.startYear);
+ }
+ }
+ this.years = years;
+ },
+
+ initMonths() {
+ const months = [];
+ for (let month = 1; month <= 12; month++) {
+ months.push(month);
+ if (this.currentDatetime.getMonth() + 1 === month) {
+ this.$set(this.value, 1, month - 1);
+ }
+ }
+ this.months = months;
+ },
+
+ initDays() {
+ const value = this.value;
+ const selectedYear = this.years[value[0]];
+ const selectedMonth = this.months[value[1]];
+ const days = [];
+ const totalDays = new Date(selectedYear, selectedMonth, 0).getDate();
+ for (let day = 1; day <= totalDays; day++) {
+ days.push(day);
+ if (this.currentDatetime.getDate() === day) {
+ this.$set(value, 2, day - 1);
+ }
+ }
+ this.days = days;
+ },
+
+ initHours() {
+ const hours = [];
+ for (let hour = 0; hour <= 23; hour++) {
+ hours.push(hour);
+ if (this.currentDatetime.getHours() === hour) {
+ this.$set(this.value, 3, hour);
+ }
+ }
+ this.hours = hours;
+ },
+
+ initMinutes() {
+ const minutes = [];
+ for (let minute = 0; minute < 60; minute++) {
+ minutes.push(minute);
+ if (this.currentDatetime.getMinutes() === minute) {
+ this.$set(this.value, 4, minute);
+ }
+ }
+ this.minutes = minutes;
+ },
+
+ initSeconds() {
+ const seconds = [];
+ for (let second = 0; second < 60; second++) {
+ seconds.push(second);
+ if (this.currentDatetime.getSeconds() === second) {
+ this.$set(this.value, 5, second);
+ }
+ }
+ this.seconds = seconds;
+ },
+
+ show() {
+ this.init();
+ this.open = true;
+ },
+
+ hide() {
+ this.open = false;
+ },
+
+ _onChange(e) {
+ this.value = e.detail.value;
+ this.setSelectValue();
+ },
+
+ setSelectValue() {
+ const v = this.value;
+ this.year = this.years[v[0]];
+ this.month = this.months[v[1]];
+ this.day = this.days[v[2]];
+ this.hour = this.hours[v[3]];
+ this.minute = this.minutes[v[4]];
+ this.second = this.seconds[v[5]];
+ },
+
+ _onSubmit() {
+ const {
+ year,
+ month,
+ day,
+ hour,
+ minute,
+ second,
+ formatNum,
+ timeHide,
+ timeLabel,
+ } = this;
+ const result = {
+ year: timeHide[0] ? formatNum(year) : "",
+ month: timeHide[1] ? formatNum(month) : "",
+ day: timeHide[2] ? formatNum(day) : "",
+ hour: timeHide[3] ? formatNum(hour) : "",
+ minute: timeHide[4] ? formatNum(minute) : "",
+ second: timeHide[5] ? formatNum(second) : "",
+ };
+ this.$emit("submit", result);
+ this.hide();
+ },
+
+ formatNum(num) {
+ return num < 10 ? "0" + num : num + "";
+ },
+ },
+ };
+</script>
+
+<style lang="scss">
+ $transition: all 0.3s ease;
+ $primary: #1171E0;
+
+ .yt-dateTimePicker {
+ position: relative;
+ z-index: 999;
+
+ picker-view {
+ height: 100%;
+ }
+
+ .mask {
+ position: fixed;
+ z-index: 1000;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: rgba(0, 0, 0, 0.4);
+ visibility: hidden;
+ opacity: 0;
+ transition: $transition;
+
+ &.show {
+ visibility: visible;
+ opacity: 1;
+ }
+ }
+
+ .wrap {
+ z-index: 1001;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ transition: $transition;
+ transform: translateY(100%);
+
+ &.show {
+ transform: translateY(0);
+ }
+ }
+
+ .picker-header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ padding: 8px 8px;
+ background-color: darken(#fff, 2%);
+ background-color: #fff;
+ }
+
+ .picker-body {
+ width: 100%;
+ height: 420rpx;
+ overflow: hidden;
+ background-color: #fff;
+ }
+
+ .column-item {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .btn-picker {
+ position: relative;
+ display: inline-block;
+ padding-left: 10px;
+ padding-right: 10px;
+ box-sizing: border-box;
+ text-align: center;
+ text-decoration: none;
+ line-height: 2;
+ -webkit-tap-highlight-color: transparent;
+ overflow: hidden;
+ background-color: #eee;
+ font-size: 14px;
+ border-radius: 3px;
+ color: #000;
+ cursor: pointer;
+ }
+
+ .btn-picker.submit {
+ background-color: $primary;
+ color: #fff;
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.1