zx_flk_app/component/smartCalendar/index.vue

<template>
	<u-popup v-model="showPopup" :closeable="false" mode="bottom" border-radius="32" @close="close">
	  <view class="main">
		<view class="cur-date">{{ curMonth }}</view>
		<img @tap="close" src="https://qiniu.bms16.com/FhBojI0tUP3dp9gZQ9lNSUNtn8B7" class="close-icon">
		<view
		  class="calendar-wrap"
		  @touchstart="handleTouchStart"
		  @touchmove="handleTouchMove"
		  @touchend="handleTouchEnd"
		>
		  <SecondaryCalendar
			ref="uniCalendar"
			:style="{ backgroundColor: '#ccc' }"
			:show="show"
			:date="defaultDate"
			:show-month="false"
			:toText="$t('取车')"
			:show-header="false"
			mode="date"
			@change="onChange"
		  />
		  <view class="director" @tap="nextMonth">
			<view :class="['dot_1', extractMonth(curMonth) % 2 !== 0 && 'opc']"/>
			<view :class="['dot_2',  extractMonth(curMonth) % 2 === 0 && 'opc']"/>
		  </view>
		</view>
  
		<view class="time-wrap">
		  <view class="picker-text">{{ $t('取车时间') }}</view>
		  <view class="flex-row flex-between">
			<picker-view
			  :value="[startH,startM]"
			  style="height: 200rpx; width: 100%;"
			  @change="pickerChange"
			>
			  <picker-view-column>
				<view v-for="(item, index) in hours" :key="index" class="item-picker">
				  {{ item }}
				  <text class="unit">{{ $t('时小') }}</text>
				</view>
			  </picker-view-column>
			  <picker-view-column>
				<view v-for="(item, index) in minutes" :key="index" class="item-picker">
				  {{ item }}
				  <text class="unit">{{ $t('分') }}</text>
				</view>
			  </picker-view-column>
			</picker-view>
		  </view>
		</view>
  
		<view class="bottom-row">
		  <view class="text">{{ $t('取车小')+'：'+startDay }}</view>
		  <button :loading="isPaickerLoading" class="custom-button" @tap="navToHireCar" >{{ $t('确定') }}</button>
		</view>
	  </view>
	</u-popup>
  </template>
  
  <script module="tools" lang="wxs" src="@/pages/common/wxs/tools.wxs"></script>
  <script module="tools" lang="sjs" src="@/pages/common/wxs/tools.sjs"></script>
	<script>
		import SecondaryCalendar from './components/uni-calendar'
		var common = require('../../common/common.js');
		export default {
			props: {
				showPopup: {
					type: Boolean,
					default: false
				},
			},
			components: { SecondaryCalendar },
			data() {
				let _hours=[]
				let _minutes=[]
				for (let i = 0; i < 24; i++) {
					if (i < 10) {
						_hours.push('0' + i);
					} else {
						_hours.push(i);
					}
				}
				for (let i = 0; i < 60; i++) {
					if (i < 10) {
						_minutes.push('0' + i);
					} else {
						_minutes.push(i);
					}
				}
				
				
				let _isNextDay=(new Date().getMinutes()-0)>30&&((new Date().getHours()-0+1)==0)
				let _startH=(new Date().getMinutes()-0)>30?(new Date().getHours()-0+1):(new Date().getHours()-0)
				let _startM=(new Date().getMinutes()-0)>30?(new Date().getMinutes()-30):(new Date().getMinutes()-0+30)
				return {
					defaultDate: null,
					show: true,
					month: '',
					date: '',
					startT: 0,

					timeValue: [0,0],
					startDate: '', // 取车日期
					endDate: '',  // 还车日期
					duration_unit: 0, //周期单位
					startH: (new Date().getMinutes()-0)>30?(new Date().getHours()-0+1):(new Date().getHours()-0),
					startM: _startM,
					startN: 0,
					hours: _hours,
					minutes: _minutes,
					number: [],
					startDay: '',
					endDay: '',
					time: '',
					isNextDay:_isNextDay,
					isPaickerLoading:false,
					startX: '',
					startY: '',
					moveX: '',
					moveY: '',
					touchStartTime: 0,
					touchEndTime: 0,
					curMonth: '',
					isClick: true
				};
			},
			mounted() {
				this.time = this.isNextDay?common.getToDay(1):common.getToDay()
				let _startH = this.startH< 10&&this.startH!== '00' ? '0' + this.startH : this.startH
				const _startM = this.startM< 10&&this.startM!== '00' ? '0' + this.startM : this.startM
				this.startDate = this.time+'T'+_startH+':'+_startM
				const DATE = new Date()
				this.curMonth = `${DATE.getFullYear()}`+'-'+`${DATE.getMonth()+1}`
				this.startDay = common.formatDate(this.time)+' '+_startH+':'+_startM
				this.endDate = common.loadAugmentTime(this.duration_unit,this.startDate,this.startN+1)
				this.endDay = common.formatTimeDate(this.endDate)
			},
			/**
			 * 生命周期函数--监听页面加载
			 */
			onLoad: function(options) {

			},
			/**
			 * 生命周期函数--监听页面显示
			 */
			onShow: function() {

			},
			methods: {
				setTakeCarData(result) {
					const [date, time] = result.takeCar.split(' ');
					const [hour, minute] = time.split(':');
					const [year, month] = result.dateText.split('-');

					this.startH = +hour;
					this.startM = +minute;
					this.curMonth = `${year}`+'-'+`${month}`;
					this.startDay = result.takeCar;
					this.defaultDate = result.dateText;
				},
				 extractMonth(str) {
					const match = str.match(/(\d+)月/);
					return match ? parseInt(match[1], 10) : null;
				},
				handleTouchStart(e) {
					this.startX = e.touches[0].clientX;
					this.startY = e.touches[0].clientY;
					this.touchStartTime = Date.now()
					this.isClick = true
				},
				handleTouchMove(e) {
					this.moveX = e.touches[0].clientX;
					this.moveY = e.touches[0].clientY;
					this.isClick = false // 如果有移动，则判定为非点击
				},
				handleTouchEnd() {
					if (this.isClick) return
					this.touchEndTime = Date.now();
					const diffX = this.moveX - this.startX;
					const diffY = this.moveY - this.startY;
					const touchDuration = this.touchEndTime - this.touchStartTime

					// 判断是否为滑动手势
					if (Math.abs(diffX) > 50 && Math.abs(diffY) < 20 && touchDuration < 500) { 
						if (diffX > 0) {
							console.log('向左滑动', this.$refs.uniCalendar);
							this.$refs.uniCalendar && this.$refs.uniCalendar.pre()
						} else {
							console.log('向右滑动');
							this.$refs.uniCalendar && this.$refs.uniCalendar.next()
						}
						const { nowDate } = this.$refs.uniCalendar
						this.curMonth = `${nowDate.year}`+'-'+`${nowDate.month}`
					}
				},
				nextMonth() {
					this.$refs.uniCalendar && this.$refs.uniCalendar.next()
					const { nowDate } = this.$refs.uniCalendar
					this.curMonth = `${nowDate.year}`+'-'+`${nowDate.month}`
				},

				onChange(e) {
					this.time = e.fulldate
					const _startH = this.startH< 10&&this.startH!== '00' ? '0' + this.startH : this.startH
					const _startM = this.startM< 10&&this.startM!== '00' ? '0' + this.startM : this.startM
					this.startDate = this.time+'T'+_startH+':'+_startM
					this.startDay = common.formatDate(this.time)+' '+_startH+':'+_startM
					this.endDate = common.loadAugmentTime(this.duration_unit,this.startDate,this.startN+1)
					this.endDay = common.formatTimeDate(this.endDate)
				},

				pickerChange(e) {
					//#ifdef MP-ALIPAY
					const val = e.detail.value;
					if (val[0] != this.timeValue[0]) {
						this.startH = val[0]
						this.timeValue[0] = val[0];
					}
					if (val[1] != this.timeValue[1]) {
						this.startM = val[1]
						this.timeValue[1] = val[1];
					}
					//#endif
					
					const val = e.detail.value;
					this.startH = val[0]
					this.startM = val[1]
					this.loadTime()
				},

				loadTime() {
					//#ifdef MP-ALIPAY
					const _startH = this.startH< 10&&this.startH!== '00' ? ('0' + this.startH ): this.startH
					const _startM = this.startM< 10&&this.startM!== '00' ? ('0' + this.startM) : this.startM
					//#endif
					
					const _startH = this.startH< 10&&this.startH!== '00' ? ('0' + this.startH) : this.startH
					const _startM = this.startM< 10&&this.startM!== '00' ? ('0' + this.startM) : this.startM
					
					this.startDate =_startH==0?(this.time+'T0'+_startH+':'+_startM):( this.time+'T'+_startH+':'+_startM)
					this.startDay = common.formatDate(this.time)+' '+_startH+':'+_startM
					this.endDate = common.loadAugmentTime(this.duration_unit,this.startDate,this.startN+1)
					this.endDay = common.formatTimeDate(this.endDate)
				},

				navToHireCar() {
					if(this.isPaickerLoading) return
					const value = {
						takeCar: this.startDay,
						returnCar: this.endDay,
						leaseTime: this.startN + 1,
						startDate: this.startDate,
						date: this.time
					}
					this.$emit('valuesUpdated', value);
				},
				close() {
					this.$emit('close', false)
				}
			}
		};
	</script>

	<style>
		@import './index.css';
	</style>