|
|
@@ -0,0 +1,375 @@
|
|
|
+<template>
|
|
|
+ <Popup
|
|
|
+ v-model="visible"
|
|
|
+ round
|
|
|
+ position="bottom"
|
|
|
+ safe-area-inset-top
|
|
|
+ safe-area-tab-bar
|
|
|
+ safe-area-inset-bottom
|
|
|
+ @close="visible = false"
|
|
|
+ >
|
|
|
+ <div class="flex_row v1">
|
|
|
+ <div class="v1_1" id="left">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in dateList"
|
|
|
+ :key="index"
|
|
|
+ :id="`left-${item.date}`"
|
|
|
+ :class="['v1_1_1', { active: dateActive(item, activeDate) }]"
|
|
|
+ @click="onChooseDate(item)"
|
|
|
+ >
|
|
|
+ {{ item.str }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="v1_2" id="right">
|
|
|
+ <div :class="['v1_2_1', { v1_2_2: type === 1 }]">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in timeList"
|
|
|
+ :key="index"
|
|
|
+ :id="`right-${item}`"
|
|
|
+ :class="[
|
|
|
+ 'v1_2_1_1',
|
|
|
+ { active: hourActive(item, chooseDate, activeDate, chooseTime) },
|
|
|
+ ]"
|
|
|
+ @click="onChooseTime(item)"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="v2">
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ class="main_sure_bt"
|
|
|
+ block
|
|
|
+ @click="onConfirm"
|
|
|
+ >
|
|
|
+ 确定
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </Popup>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { Toast, Popup, Button } from "vant";
|
|
|
+import moment from "moment";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Popup,
|
|
|
+ Button,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ value: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ //0:时间点 1：时间段
|
|
|
+ type: Number,
|
|
|
+ default: 0,
|
|
|
+ },
|
|
|
+ dateArr: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ timeArr: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ dateList: [],
|
|
|
+ timeList: [],
|
|
|
+ chooseDate: "",
|
|
|
+ chooseTime: "",
|
|
|
+ activeDate: "",
|
|
|
+ promiseStatus: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {
|
|
|
+ dateArr: {
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ handler() {
|
|
|
+ this.initPicker();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ timeArr: {
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ handler() {
|
|
|
+ this.initPicker();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ initPicker() {
|
|
|
+ this.dateList = this.dateArr?.length
|
|
|
+ ? this.dateArr
|
|
|
+ : this.getAllDateCN(new Date(), this.getDateTime());
|
|
|
+ this.timeList = {
|
|
|
+ 0: this.getHours(),
|
|
|
+ 1: this.timeArr?.length ? this.timeArr : this.getHoursRange(),
|
|
|
+ }[this.type];
|
|
|
+ },
|
|
|
+ getDateTime() {
|
|
|
+ const now = new Date();
|
|
|
+ // console.log(now, '一年后时间')
|
|
|
+ let year = now.getFullYear() + 1; //得到年份
|
|
|
+ let month = (now.getMonth() + 1).toString().padStart(2, "0"); //得到月份
|
|
|
+ let day = (now.getDate() - 1).toString().padStart(2, "0"); //得到日期
|
|
|
+
|
|
|
+ if (month === "01" && day === "00") {
|
|
|
+ year = now.getFullYear(); //得到年份
|
|
|
+ month = "12";
|
|
|
+ day = "31";
|
|
|
+ } else if (day === "00") {
|
|
|
+ year = now.getFullYear() + 1; //得到年份
|
|
|
+ month = now.getMonth().toString().padStart(2, "0"); //得到月份;
|
|
|
+ if (
|
|
|
+ month === "01" ||
|
|
|
+ month === "03" ||
|
|
|
+ month === "05" ||
|
|
|
+ month === "07" ||
|
|
|
+ month === "08" ||
|
|
|
+ month === "10" ||
|
|
|
+ month === "12"
|
|
|
+ ) {
|
|
|
+ //大月
|
|
|
+ day = "31";
|
|
|
+ } else if (
|
|
|
+ month === "04" ||
|
|
|
+ month === "06" ||
|
|
|
+ month === "09" ||
|
|
|
+ month === "11"
|
|
|
+ ) {
|
|
|
+ //小月
|
|
|
+ day = "30";
|
|
|
+ } else if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
|
|
|
+ //瑞年
|
|
|
+ day = "29";
|
|
|
+ } else {
|
|
|
+ //平年
|
|
|
+ day = "28";
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ year = now.getFullYear() + 1; //得到年份
|
|
|
+ month = (now.getMonth() + 1).toString().padStart(2, "0"); //得到月份
|
|
|
+ day = (now.getDate() - 1).toString().padStart(2, "0"); //得到日期
|
|
|
+ }
|
|
|
+ return moment(`${year}-${month}-${day}`).toDate();
|
|
|
+ },
|
|
|
+ getAllDateCN(startTime, endTime) {
|
|
|
+ var date_all = [];
|
|
|
+ var i = 0;
|
|
|
+ while (endTime.getTime() - startTime.getTime() >= 0) {
|
|
|
+ var year = startTime.getFullYear();
|
|
|
+ var month = startTime.getMonth() + 1;
|
|
|
+ var day = startTime.getDate();
|
|
|
+ var weekStr = "";
|
|
|
+ var week = startTime.getDay();
|
|
|
+ if (week === 0) {
|
|
|
+ weekStr = "周日";
|
|
|
+ } else if (week === 1) {
|
|
|
+ weekStr = "周一";
|
|
|
+ } else if (week === 2) {
|
|
|
+ weekStr = "周二";
|
|
|
+ } else if (week === 3) {
|
|
|
+ weekStr = "周三";
|
|
|
+ } else if (week === 4) {
|
|
|
+ weekStr = "周四";
|
|
|
+ } else if (week === 5) {
|
|
|
+ weekStr = "周五";
|
|
|
+ } else if (week === 6) {
|
|
|
+ weekStr = "周六";
|
|
|
+ }
|
|
|
+ if (startTime.toDateString() === new Date().toDateString()) {
|
|
|
+ weekStr = "今天";
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ startTime.toDateString() ===
|
|
|
+ new Date(new Date().setDate(new Date().getDate() + 1)).toDateString()
|
|
|
+ ) {
|
|
|
+ weekStr = "明天";
|
|
|
+ }
|
|
|
+ date_all[i] = {
|
|
|
+ date: `${year}-${month.az()}-${day.az()}`,
|
|
|
+ str: `${month}月${day}日 [${weekStr}]`,
|
|
|
+ };
|
|
|
+ startTime.setDate(startTime.getDate() + 1);
|
|
|
+ i += 1;
|
|
|
+ }
|
|
|
+ return date_all;
|
|
|
+ },
|
|
|
+ getHours() {
|
|
|
+ const arr = [];
|
|
|
+ for (let i = 0; i < 24; i++) {
|
|
|
+ arr.push(`${i.az()}:00`);
|
|
|
+ arr.push(`${i.az()}:30`);
|
|
|
+ }
|
|
|
+ return arr;
|
|
|
+ },
|
|
|
+ getHoursRange() {
|
|
|
+ const arr = [];
|
|
|
+ for (let i = 0; i < 24; i++) {
|
|
|
+ if (i < 23) {
|
|
|
+ arr.push(`${i.az()}:00-${(i + 1).az()}:00`);
|
|
|
+ } else {
|
|
|
+ arr.push(`${i.az()}:00-00:00`);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return arr;
|
|
|
+ },
|
|
|
+ dateActive(dateItem, activeDate) {
|
|
|
+ return dateItem.date === activeDate;
|
|
|
+ },
|
|
|
+ hourActive(hourItem, date, activeDate, hour) {
|
|
|
+ return hourItem === hour;
|
|
|
+ },
|
|
|
+ onChooseDate(item) {
|
|
|
+ this.activeDate = this.chooseDate = item.date;
|
|
|
+ },
|
|
|
+ onChooseTime(item) {
|
|
|
+ this.chooseTime = item;
|
|
|
+ },
|
|
|
+ showDatetimePicker() {
|
|
|
+ this.visible = true;
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.promiseStatus = { resolve, reject };
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onConfirm() {
|
|
|
+ if (!this.chooseDate) {
|
|
|
+ Toast("请选择日期！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.chooseTime) {
|
|
|
+ Toast("请选择时间！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let value = this.chooseDate + " " + this.chooseTime + ":00";
|
|
|
+ if (this.type === 1) {
|
|
|
+ const times = this.chooseTime.split("-");
|
|
|
+ value = {
|
|
|
+ date: this.chooseDate,
|
|
|
+ times: times.map((item) => `${item}:00`),
|
|
|
+ };
|
|
|
+ }
|
|
|
+ this.promiseStatus.resolve(value);
|
|
|
+ this.$emit("confirm", value);
|
|
|
+ this.visible = false;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+.v1 {
|
|
|
+ height: 50vh;
|
|
|
+ align-items: flex-start;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 0.16rem;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+
|
|
|
+ .v1_1 {
|
|
|
+ height: 100%;
|
|
|
+ width: 2.2rem;
|
|
|
+ overflow-y: scroll;
|
|
|
+ overflow-x: hidden;
|
|
|
+ background: #f1f4f8;
|
|
|
+
|
|
|
+ .v1_1_1 {
|
|
|
+ font-size: 0.28rem;
|
|
|
+ color: #3c3c3c;
|
|
|
+ font-weight: bolder;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 1.2rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ background: #fff;
|
|
|
+ color: #fb4529;
|
|
|
+ font-weight: bolder;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .v1_2 {
|
|
|
+ height: 100%;
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: scroll;
|
|
|
+ overflow-x: hidden;
|
|
|
+
|
|
|
+ .v1_2_1 {
|
|
|
+ justify-content: space-around;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+
|
|
|
+ .v1_2_1_1 {
|
|
|
+ width: 2.2rem;
|
|
|
+ height: 1.2rem;
|
|
|
+ line-height: 1.2rem;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 0.6rem;
|
|
|
+ border: 1px solid #e6e6e6;
|
|
|
+ color: #696969;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ margin-top: 0.28rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ border-color: #fb4529;
|
|
|
+ color: #fb4529;
|
|
|
+ }
|
|
|
+
|
|
|
+ .disable {
|
|
|
+ background: #e6e6e6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .v1_2_2 {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .v1_2_1_1 {
|
|
|
+ width: 80%;
|
|
|
+ height: 0.8rem;
|
|
|
+ border-radius: 0.4rem;
|
|
|
+ line-height: 0.8rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.v2 {
|
|
|
+ height: 1.76rem;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0px -2px 2px 0px rgba(243, 243, 243, 0.75);
|
|
|
+
|
|
|
+ .main_sure_bt {
|
|
|
+ width: 6.9rem;
|
|
|
+ height: 0.88rem;
|
|
|
+ background: linear-gradient(135deg, #fd7c32 0, #fb4529 100%);
|
|
|
+ box-shadow: 0px 4px 8px 0px rgba(255, 105, 51, 0.3);
|
|
|
+ border-radius: 0.44rem;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 0.88rem;
|
|
|
+ font-size: 0.3rem;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+ margin: 0.18rem auto;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xch1523480