From bbece21ba4aa1f16cca6a3f02ca152e27b0315b9 Mon Sep 17 00:00:00 2001
From: chen <2659004835@qq.com>
Date: Fri, 1 Apr 2022 08:55:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/dates/yy-mm-dd-hh-ss.vue | 528 ++++++++++++++--------------
 1 file changed, 270 insertions(+), 258 deletions(-)

diff --git a/components/dates/yy-mm-dd-hh-ss.vue b/components/dates/yy-mm-dd-hh-ss.vue
index 920196a..eab00e0 100644
--- a/components/dates/yy-mm-dd-hh-ss.vue
+++ b/components/dates/yy-mm-dd-hh-ss.vue
@@ -1,283 +1,295 @@
 <template>
-  <view class="datetime-picker">
-    <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>
-            <view class="column-item" v-for="item in years" :key="item">
-              {{ item + "年" }}
-            </view>
-          </picker-view-column>
-          <picker-view-column>
-            <view class="column-item" v-for="item in months" :key="item">
-              {{ formatNum(item) + "月" }}
-            </view>
-          </picker-view-column>
-          <picker-view-column>
-            <view class="column-item" v-for="item in days" :key="item">
-              {{ formatNum(item) + "日" }}
-            </view>
-          </picker-view-column>
-          <picker-view-column>
-            <view class="column-item" v-for="item in hours" :key="item">
-              {{ formatNum(item) + "时" }}
-            </view>
-          </picker-view-column>
-          <picker-view-column>
-            <view class="column-item" v-for="item in minutes" :key="item">
-              {{ formatNum(item) + "分" }}
-            </view>
-          </picker-view-column>
-        </picker-view>
-      </view>
-    </view>
-  </view>
+	<view class="datetime-picker">
+		<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>
+						<view class="column-item" v-for="item in years" :key="item">
+							{{ item + "年" }}
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="column-item" v-for="item in months" :key="item">
+							{{ formatNum(item) + "月" }}
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="column-item" v-for="item in days" :key="item">
+							{{ formatNum(item) + "日" }}
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="column-item" v-for="item in hours" :key="item">
+							{{ formatNum(item) + "时" }}
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="column-item" v-for="item in minutes" :key="item">
+							{{ formatNum(item) + "分" }}
+						</view>
+					</picker-view-column>
+				</picker-view>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
-export default {
-  name: "buuug7-simple-datetime-picker",
-  props: {
-    startYear: {
-      type: Number,
-      default: 2000,
-    },
-    endYear: {
-      type: Number,
-      default: 2030,
-    },
-  },
+	export default {
+		name: "buuug7-simple-datetime-picker",
+		props: {
+			startYear: {
+				type: Number,
+				default: 2000,
+			},
+			endYear: {
+				type: Number,
+				default: 2030,
+			},
+		},
 
-  data() {
-    return {
-      open: false,
-      years: [],
-      months: [],
-      days: [],
-      hours: [],
-      minutes: [],
-      currentDate: new Date(),
-      year: "",
-      month: "",
-      day: "",
-      hour: "",
-      minute: "",
-      value: [0, 0, 0, 0, 0],
-    };
-  },
+		data() {
+			return {
+				open: false,
+				years: [],
+				months: [],
+				days: [],
+				hours: [],
+				minutes: [],
+				currentDate: new Date(),
+				year: "",
+				month: "",
+				day: "",
+				hour: "",
+				minute: "",
+				value: [0, 0, 0, 0, 0],
+			};
+		},
 
-  mounted() {
-    this.init();
-  },
+		mounted() {
+			this.init();
+		},
 
-  watch: {
-    month() {
-      this.initDays();
-    },
-  },
+		watch: {
+			month() {
+				this.initDays();
+			},
+		},
 
-  methods: {
-    init() {
-      this.initYears();
-      this.initMonths();
-      this.initDays();
-      this.initHours();
-      this.initMinutes();
-      this.setSelectValue();
-    },
+		methods: {
+			init() {
+				this.initYears();
+				this.initMonths();
+				this.initDays();
+				this.initHours();
+				this.initMinutes();
+				this.setSelectValue();
+			},
 
-    initYears() {
-      const years = [];
-      for (let year = this.startYear; year <= this.endYear; year++) {
-        years.push(year);
-        if (this.currentDate.getFullYear() === year) {
-          this.$set(this.value, 0, year - this.startYear);
-        }
-      }
-      this.years = years;
-    },
+			initYears() {
+				const years = [];
+				for (let year = this.startYear; year <= this.endYear; year++) {
+					years.push(year);
+					if (this.currentDate.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.currentDate.getMonth() + 1 === month) {
-          this.$set(this.value, 1, month - 1);
-        }
-      }
-      this.months = months;
-    },
+			initMonths() {
+				const months = [];
+				for (let month = 1; month <= 12; month++) {
+					months.push(month);
+					if (this.currentDate.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.currentDate.getDate() === day) {
-          this.$set(value, 2, day - 1);
-        }
-      }
-      this.days = days;
-    },
+			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.currentDate.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.currentDate.getHours() === hour) {
-          this.$set(this.value, 3, hour);
-        }
-      }
-      this.hours = hours;
-    },
+			initHours() {
+				const hours = [];
+				for (let hour = 0; hour <= 23; hour++) {
+					hours.push(hour);
+					if (this.currentDate.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.currentDate.getMinutes() === minute) {
-          this.$set(this.value, 4, minute);
-        }
-      }
-      this.minutes = minutes;
-    },
+			initMinutes() {
+				const minutes = [];
+				for (let minute = 0; minute < 60; minute++) {
+					minutes.push(minute);
+					if (this.currentDate.getMinutes() === minute) {
+						this.$set(this.value, 4, minute);
+					}
+				}
+				this.minutes = minutes;
+			},
 
-    show() {
-      this.open = true;
-    },
+			show() {
+				this.open = true;
+			},
 
-    hide() {
-      this.open = false;
-    },
+			hide() {
+				this.open = false;
+			},
 
-    _onChange(e) {
-      this.value = e.detail.value;
-      this.setSelectValue();
-    },
+			_onChange(e) {
+				this.value = e.detail.value;
+				this.setSelectValue();
+			},
 
-    setSelectValue() {
-      const v = this.value;
+			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.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]];
+			},
 
-    _onSubmit() {
-      const { year, month, day, hour, minute, formatNum } = this;
-      const result = {
-        year: formatNum(year),
-        month: formatNum(month),
-        day: formatNum(day),
-        hour: formatNum(hour),
-        minute: formatNum(minute),
-      };
-      this.$emit("submit", result);
-      this.hide();
-    },
+			_onSubmit() {
+				const {
+					year,
+					month,
+					day,
+					hour,
+					minute,
+					formatNum
+				} = this;
+				const result = {
+					year: formatNum(year),
+					month: formatNum(month),
+					day: formatNum(day),
+					hour: formatNum(hour),
+					minute: formatNum(minute),
+				};
+				this.$emit("submit", result);
+				this.hide();
+			},
 
-    formatNum(num) {
-      return num < 10 ? "0" + num : num + "";
-    },
-  },
-};
+			formatNum(num) {
+				return num < 10 ? "0" + num : num + "";
+			},
+		},
+	};
 </script>
 
 <style lang="scss">
-$transition: all 0.3s ease;
-$primary: #488ee9;
+	$transition: all 0.3s ease;
+	$primary: #488ee9;
 
-.datetime-picker {
-  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.6);
-    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: 2px;
-    color: #000;
-    cursor: pointer;
-  }
-  .btn-picker.submit {
-    background-color: $primary;
-    color: #fff;
-  }
-}
+	.datetime-picker {
+		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.6);
+			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: 2px;
+			color: #000;
+			cursor: pointer;
+		}
+
+		.btn-picker.submit {
+			background-color: $primary;
+			color: #fff;
+		}
+	}
 </style>