|
|
<template>
|
|
|
<view>
|
|
|
<view class="g_flex_row_end flex_center" @click="showPop" v-if="from == 'reservation-time'">
|
|
|
<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 v-else mode="multiSelector" class="g_flex_column_center" :range="dateTimeArray" :value="dateTime" :z-index="99999" @change="changeDateTime" @columnchange="changeDateTimeColumn($event)" style="color: #333" :disabled="disabled">
|
|
|
<view class="g_flex_row_end flex_center">
|
|
|
<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>
|
|
|
<u-popup v-model="showPopFlag" mode="center" z-index="999999" border-radius="12" :closeable="true" :mask-close-able="true" @close="closePop">
|
|
|
<view class="g_p_12" style="width: 85vw">
|
|
|
<view class="g_fs_16 g_fw_600 g_mb_16">选择时间</view>
|
|
|
<view class="g_p_9 g_border_d9 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">
|
|
|
<template v-for="item in quickSelectTime">
|
|
|
<view class="g_mb_12" style="width: calc((100% - 12px) / 2)">
|
|
|
<rh-button primaryColor="#00b666" mode="square" @clickBtn="quickSelect(item)" :btnText="item.label" :type="selectedTime === item.id ? 'default' : 'default_b'" size="small_auto"></rh-button>
|
|
|
</view>
|
|
|
</template>
|
|
|
</view>
|
|
|
<view class="g_h_12"></view>
|
|
|
<!-- <view class="g_flex_row_center g_mt_12">
|
|
|
<view class="g_mr_12">
|
|
|
<rh-button primaryColor='#00b666' btnText="取消" type="default" size="small" @clickBtn="showPopFlag = false"></rh-button>
|
|
|
</view>
|
|
|
<view>
|
|
|
<rh-button primaryColor='#00b666' btnText="确定" type="primary" size="small" @clickBtn="setCurrentTime"></rh-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 "";
|
|
|
},
|
|
|
},
|
|
|
from: {
|
|
|
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;
|
|
|
if (this.from) {
|
|
|
}
|
|
|
|
|
|
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>
|