apply-assistant-v3/components/panel/time.vue

<template>
	<view>
		<view class="g_flex_row_end flex_center" @click="showPop">
			<view class="g_fs_16">
				{{ !!currentTime ? currentTime : "----" }}
			</view>
			<view class="">
				<i class="iconfont icon-rili g_c_9 g_ml_6"></i>
			</view>
		</view>
		<u-popup v-model="showPopFlag" mode="bottom" z-index="999999" border-radius="12" :closeable="true" :mask-close-able="true" @close="closePop">
			<view class="g_p_12">
				<view class="g_fs_16 g_fw_600 g_mb_16">选择时间</view>
				<view class="g_p_12 g_border_e g_flex_row_center g_radius_6">
					<picker mode="multiSelector" class="g_flex_column_center flex_center3 g_w_all" :range="dateTimeArray" :value="dateTime" @change="changeDateTime" @columnchange="changeDateTimeColumn($event)" style="color: #333">
						<view class="g_flex_row_center flex_center g_w_all">
							<view class="g_fs_16">
								{{ !!currentTime ? currentTime : "----" }}
							</view>
							<view class="">
								<i class="iconfont icon-rili g_c_9 g_ml_6"></i>
							</view>
						</view>
					</picker>
				</view>
				<view class="g_flex_row_between g_mt_12" style="column-gap: 8px">
					<view v-for="item in quickSelectTime" @click="quickSelect(item)" class="g_flex_row_center g_radius_6 g_border_e g_p_12 g_mb_12" style="width: calc(100% / 2 - 32px)" :class="[selectedTime === item.id ? 'active' : '']">
						{{ item.label }}
					</view>
				</view>
        <view class="g_h_32"></view>
				<!-- <view class="g_flex_row_center g_mt_12">
					<view class="g_mr_12">
						<g-button btnText="取消" type="default" size="small" @clickBtn="showPopFlag = false"></g-button>
					</view>
					<view>
						<g-button btnText="确定" type="primary" size="small" @clickBtn="setCurrentTime"></g-button>
					</view>
				</view> -->
			</view>
		</u-popup>
	</view>
</template>

<script>
import dateTimePicker from "../../utils/dateTimePicker.js";
import dayjs from "dayjs";
export default {
	data() {
		return {
			dateTimeArray: null,
			showPopFlag: false,
			dateTime: [],
			selectedTime: null,
			quickSelectTime: [
				{
					label: "今天 8:00",
					value: dayjs().set("hour", 8).set("minute", 0).set("second", 0).format("YYYY-MM-DD HH:mm"),
					id: 0,
				},
				{
					label: "今天 13:00",
					value: dayjs().set("hour", 13).set("minute", 0).set("second", 0).format("YYYY-MM-DD HH:mm"),
					id: 1,
				},
				{
					label: "明天 8:00",
					value: dayjs().add(1, "day").set("hour", 8).set("minute", 0).set("second", 0).format("YYYY-MM-DD HH:mm"),
					id: 2,
				},
				{
					label: "明天 13:00",
					value: dayjs().add(1, "day").set("hour", 13).set("minute", 0).set("second", 0).format("YYYY-MM-DD HH:mm"),
					id: 3,
				},
				{
					label: "后天 8:00",
					value: dayjs().add(2, "day").set("hour", 8).set("minute", 0).set("second", 0).format("YYYY-MM-DD HH:mm"),
					id: 4,
				},
				{
					label: "后天 13:00",
					value: dayjs().add(2, "day").set("hour", 13).set("minute", 0).set("second", 0).format("YYYY-MM-DD HH:mm"),
					id: 5,
				},
			],
			startYear: new Date().getFullYear(),
			endYear: new Date().getFullYear() + 2,
			currentTime: "",
		};
	},
	props: {
		timeval: {
			type: String,
			default: () => {
				return "";
			},
		},
	},
	created() {
		console.log("create 是否触发", this.timeval);
	},
	watch: {
		timeval(oldVal, newVal) {
			console.log("watch 是否触发", oldVal, "--", newVal);
			this.currentTime = oldVal ? oldVal : newVal;
		},
		showPopFlag(oldVal, newVal) {
			if (oldVal) {
				uni.hideTabBar({
					animation: false,
				});
			} else {
				uni.showTabBar({
					animation: false,
				});
			}
		},
	},
	mounted() {
		var obj = dateTimePicker.dateTimePicker(this.startYear, this.endYear, this.currentTime);
		this.currentTime = this.timeval;
		this.dateTimeArray = obj.dateTimeArray;
		this.dateTime = obj.dateTime == -1 ? 0 : obj.dateTime;
	},
	methods: {
		changeDateTime(e) {
			console.log("DateTime：", e);
			var dateTimeArray = this.dateTimeArray,
				dateTime = e.detail.value;
			if (dateTime[3] == -1) {
				this.currentTime = dateTimeArray[0][dateTime[0]].replace("年", "") + "-" + dateTimeArray[1][dateTime[1]].replace("月", "") + "-" + dateTimeArray[2][dateTime[2]].replace("日", "") + " " + "06:00";
			} else {
				this.currentTime = dateTimeArray[0][dateTime[0]].replace("年", "") + "-" + dateTimeArray[1][dateTime[1]].replace("月", "") + "-" + dateTimeArray[2][dateTime[2]].replace("日", "") + " " + dateTimeArray[3][dateTime[3]];
			}
			console.log("拼接：", this.currentTime);

			this.$emit("confirmChooseTime", this.currentTime);
			this.selectedTime = null;
			this.showPopFlag = false;
		},
		changeDateTimeColumn(e) {
			console.log("Column：", e);
			// var arr = this.dateTime
			// var dateArr = this.dateTimeArray;
			// arr[e.detail.column] = e.detail.value;
			// dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
			// for (let index = 0; index < dateArr[2].length; index++) {
			// 	dateArr[2][index] = dateArr[2][index] + "日";
			// }
			// // .replace("年",'').replace("月",'').replace("日",'')
			// dateTimeArray = dateArr
			// dateTime = arr
		},
		showPop() {
			this.showPopFlag = true;

			this.quickSelectTime.forEach((item) => {
				if (item.value == this.currentTime) {
					this.selectedTime = item.id;
				}
			});
		},
		closePop() {
			this.showPopFlag = false;
			this.selectedTime = null;
		},
		quickSelect(_item) {
			this.selectedTime = _item.id;
			this.currentTime = this.quickSelectTime[this.selectedTime].value;
			this.$emit("confirmChooseTime", this.currentTime);
			this.showPopFlag = false;
		},
		setCurrentTime() {
			this.showPopFlag = false;
			if (this.selectedTime) {
				this.currentTime = this.quickSelectTime[this.selectedTime].value;
			}
			this.$emit("confirmChooseTime", this.currentTime);
		},
	},
};
</script>

<style lang="scss">
.active {
	color: #00b666;
  font-weight: 600;
	border-color: #00b666;
  border-width: 2rpx;
}
</style>