zx_flk_app/component/calendar/calendar.vue

<template>
	<view class="container">
		<view class="con-center">
			<uni-calendar class="uni-calendar" :selected="selected" :show="show" :mode="mode"
				@change="onChange"></uni-calendar>
			<view style="margin-top: 32rpx;">
				<view class="picker-info flex-row flex-around">
					<view class="picker-text">取车时间</view>
					<view class="picker-text">租借时长</view>
				</view>
				<view class="picker-info flex-row flex-between">
					<picker-view @change="pickerChange" :value="[startH,startM]"
						style="height: 200rpx; width: 330rpx;">
						<picker-view-column>
							<view class="item-picker" v-for="(item, index) in hours" :key="index">{{ item }} 时</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item-picker" v-for="(item, index) in minutes" :key="index">{{ item }} 分</view>
						</picker-view-column>
					</picker-view>
					<picker-view @pickend="pickend" @pickstart="pickstart" @change="pickerChangeNumber" :value="[startN]" style="height: 200rpx; width: 330rpx;">
						<picker-view-column>
							<view class="item-picker" v-for="(item, index) in number" :key="index">
								{{ item + rentalUnit }}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
			<view class="con-bottom flex-row flex-between">
				<view class="bottom-left">
					<view>{{'取车:'+startDay}}</view>
					<view>{{'还车:'+endDay}} </view>
				</view>
				<view>共{{startN+1}}{{ rentalUnit }}</view>
				<button class="custom-button"  :loading="isPaickerLoading"  @tap="navToHireCar" >确定</button>
			</view>
		</view>
	</view>
</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>
	var common = require('../../common/common.js');
	export default {
		props: {
			rentalUnit: {
				type: String,
				required: true
			}
		},
		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 {
				show: true,
				mode: 'date',
				selected: [],
				month: '',
				date: '',
				startT: 0,
				
				timeValue: [0,0],
				startDate: '', // 取车日期
				endDate: '',  // 还车日期
				duration_unit: 0, //周期单位
				startH: _startH,
				startM: _startM,
				startN: 0,
				hours: _hours,
				minutes: _minutes,
				number: [],
				startDay: '',
				endDay: '',
				time: '',
				isNextDay:_isNextDay,
				isPaickerLoading:false
			};
		},
		mounted() {
			this.bindTime()
			if (this.rentalUnit == '小时') {
				this.duration_unit = 4
			} else if (this.rentalUnit == '天') {
				this.duration_unit = 1
			} else if (this.rentalUnit == '周') {
				this.duration_unit = 6
			}
			this.time = this.isNextDay?common.getToDay(1):common.getToDay()
			//#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
			//#ifdef MP-WEIXIN
			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
			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)
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {

		},
		methods: {
			bindTime() {
				if (this.rentalUnit == '小时') {
					for (let i = 1; i < 25; i++) {
						this.number.push(i);
					}
				} else if (this.rentalUnit == '天') {
					for (let i = 1; i < 31; i++) {
						this.number.push(i);
					}
				} else if (this.rentalUnit == '周') {
					for (let i = 1; i < 5; i++) {
						this.number.push(i);
					}
				}
				
			},

			onChange(e) {
				this.time = e.fulldate
				//#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
				//#ifdef MP-WEIXIN
				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
				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
				//#ifdef MP-WEIXIN
				const val = e.detail.value;
				this.startH = val[0]
				this.startM = val[1]
				//#endif
				this.loadTime()
			},

			pickerChangeNumber(e) {
				var _startN = e.detail.value[0]
				this.startN = _startN
				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
				//#ifdef MP-WEIXIN
				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
				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
				}
				this.$emit('valuesUpdated', value);
			},
			pickstart(){
				console.log(123);
				this.setData({
					isPaickerLoading:true
				})
			},
			pickend(){
				console.log(123564);
				this.setData({
					isPaickerLoading:false
				})
			},
			
		}
	};
</script>

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