parking_h5/pages/handleMonthly/handleMonthly.vue

<template>
	<view class="handle-monthly">
		<view class="handle-monthly-item">
			<view>车牌选择</view>
			<view class="choose-license" @click="isShowCarLicense = true">
				<view>{{form.carLicense.label}}</view>
				<u-icon name="arrow-down" color="#7B7B7B" size="30"></u-icon>
			</view>
		</view>
		<u-select v-model="isShowCarLicense" :list="carLicenseList" @confirm="carLicenseListConfirm"></u-select>
		<view class="handle-monthly-item">
			<view>车辆信息</view>
			<view>汽油车</view>
		</view>
		<view class="handle-monthly-item">
			<view>包月金额</view>
			<view class="handle-monthly-money">200元</view>
		</view>
		<view class="handle-monthly-item">
			<view>包月时长</view>
			<view class="handle-monthly-time-long">
				<button @click="reduceMonthNum()">-</button>
				<view>{{form.month}}个月</view>
				<button @click="addMonthNum()">+</button>
			</view>
		</view>
		<view class="handle-monthly-item">
			<view>包期</view>
			<view>{{form.dateRange}}</view>
		</view>
		<view class="handle-monthly-explain">
			<view>包月说明</view>
			<view>1、停车不足30分钟，免费；</view>
			<view>2、停车 超过20分钟，按2元/小时收费；</view>
			<view>3、月卡会员在有效期内停车免费</view>
		</view>
		<view class="handle-monthly-confirm-button">
			<button type="default">确认包月</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carLicenseList: [
					{
						value: 1, label: '贵AWE45T'
					},
					{
						value: 2, label: '贵AWE45F'
					},
				],
				isShowCarLicense: false,
				form: {
					carLicense: {
						value: 2,
						label: '贵AWE45F'
					},
					month: 1,
					dateRange: this.getMonthRange(new Date(), 1)
				}
			}
		},
		onLoad () {
			this.getCarsLicenseList()
		},
		methods: {
			/**
			  * 获取几个月的日期范围
			  * {date} Date 起始日期,往后推一天
			  * {monthNum} Number  往后月数 
			  * */
			getMonthRange (date, monthNum) {
				let Date1 = new Date(date)
				Date1 = Date1.valueOf() + 24 * 60 * 60 * 1000
				Date1 = new Date(Date1)
				const year = Date1.getFullYear()
				const month = Date1.getMonth()
				const day = Date1.getDate()
				let days = new Date(year, month, 0)
				days = days.getDate() //获取当前日期中的月的天数
				let year2 = year;
				let month2 = parseInt(month) + parseInt(monthNum)
				if (month2 >12) {
					year2 = parseInt(year2) + parseInt((parseInt(month2) / 12 == 0 ? 1 : parseInt(month2) / 12))
					month2 = parseInt(month2) % 12;
				}
				const day2 = day;
				let days2 = new Date(year2, month2, 0)
				days2 = days2.getDate()
				if (day2 > days2) {
					day2 = days2
				}
				if (month2 < 10) {
					month2 = '0' + month2;
				}
				const t1 = year + '.' + (month > 9 ? month : '0' + month) + '.' + (day > 9 ? day : '0' + day)
				const t2 = year2 + '.' + month2 + '.' + day2
				return t1 + '-' + t2
			},
			/**
			 * 月操作 减1
			  * */
			reduceMonthNum () {
				if (this.form.month > 1) {
					this.form.month -= 1
					this.form.dateRange = this.getMonthRange(new Date, this.form.month)
				}
			},
			/**
			 * 月操作 加1
			  * */
			addMonthNum () {
				this.form.month += 1
				this.form.dateRange = this.getMonthRange(new Date, this.form.month)
			},
			carLicenseListConfirm (item) {
				this.form.carLicense = item[0]
			},
			getCarsLicenseList () {
				this.$u.api.getMycars()
					.then(res => {
						console.log(res)
						if (res.code === 200) {
							if (res.data) {
								this.carLicenseList = []
								res.data.rows.forEach(item => {
									const obj = {
										value: item.id,
										label: item.vehicleNo
									}
									this.carLicenseList.push(obj)
								})
								this.form.carLicense = this.carLicenseList[0]
							}
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import './handleMonthly.scss';
</style>