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>{{form.energyType| verifyStatusFilter}}</view>
		</view>
		<view class="handle-monthly-item">
			<view>包月金额</view>
			<view class="handle-monthly-money">{{form.monthAmount}}元</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>{{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"@click="submit(roadNo)">确认包月</button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import getUrlParams from "../../utils/getUrlParams.js";
	export default {
		data() {
			return {
				payUrl:'',
				monthId: '',
				vehicleNo:'',
				monthEndTime:'',
				monthStartTime:'',
				lastActiveDate:null,
				roadNo:null,
				carLicenseList: [],
				isShowCarLicense: false,
				form: {
					energyType:[],
					monthAmount: [],
					carLicense: {},
					month: 1,
					dateRange:""
				},
				label:""
			}
		},
		onLoad (page) {
			let locationLocaturl = window.location.hash;
			// this.roadNo = this.$u.queryParams(page).slice();
			this.roadNo = getUrlParams(locationLocaturl,"roadNo");
			this.getMonthInfo(this.roadNo);
			// this.form.dateRange=this.getMonthRange(this.lastActiveDate,1)
			// this.getCarsLicenseList();
			
		},
		mounted(){
			// console.log(this.lastActiveDate)
			// this.form.dateRange=this.getMonthRange(new Date(this.lastActiveDate),1)
		},
		methods: {
			/**
			  * 获取几个月的日期范围
			  * {date} Date 起始日期,往后推一天
			  * {monthNum} Number  往后月数 
			  * */
			getMonthRange (date, monthNum) {
				let Date1 = this.lastActiveDate;
				// Date1 = Date1.valueOf() + 24 * 60 * 60 * 1000
				Date1 = new Date(Date1)
				const year = Date1.getFullYear()
				const month = Date1.getMonth()+1
				const day = Date1.getDate()
				const hours = Date1.getHours();
				const minutes = Date1.getMinutes();
				const seconds = Date1.getSeconds();
				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;
				}
				let 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
				this.monthStartTime=year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day) + ' ' + hours + ':' + minutes + ':' +seconds
				this.monthEndTime=year2 + '-' + month2 + '-' + day2 + ' ' + hours + ':' + minutes + ':' +seconds
				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 () {
				if(this.form.month >=24){
					this.$refs.uToast.show({
						title: '最多24月',
						type: 'warning',
					})
					return 
				}
				this.form.month += 1
				
				this.form.dateRange = this.getMonthRange(new Date, this.form.month)
			},
			carLicenseListConfirm (item) {
				this.form.carLicense = item[0]
			},
			getMonthInfo(roadNo){
				this.$u.api.monthInfo({roadNo: this.roadNo})
				.then(res => {
					if (res.code === 200){
						this.vehicleNo = res.data.vehicleList[0].vehicleNo
						this.lastActiveDate = res.data.lastActiveDate;
						this.form.energyType=res.data.vehicleList[0].energyType;
						this.form.monthAmount=res.data.monthAmount;
						this.carLicenseList = [];
						res.data.vehicleList.forEach(item => {
							const obj = {
								value: item.id,
								label: item.vehicleNo
							}
							this.carLicenseList.push(obj)
						})
						this.form.carLicense = this.carLicenseList[0]
					}
				})
			},
			submit(roadNo){
				// console.log(this.monthStartTime)
				this.$u.api.createMonth({
					roadNo:this.roadNo,
					vehicleNo:this.form.carLicense.label,
					energyType:this.form.energyType,
					monthStartTime:this.monthStartTime,
					monthEndTime:this.monthEndTime,
					monthCount:this.form.monthAmount})
					.then(res => {
						console.log("1111",res)
						if(res.code === 200){
							this.monthId = res.data.monthId
							console.log(this.monthId)
							this.$u.api.monthPay({
								monthId:this.monthId
							}).then(res => {
								console.log("monthPay",res)
								if(res.code === 200){
									this.payUrl=encodeURIComponent(res.data.url);
									this.$u.route({
										url: 'pages/handleMonthly/monthPay',
										params: {
											payUrl:this.payUrl
										}
									});
								}
							})
						}
					})
				// this.getMonthInfo(roadNo)
			}
		},
		computed:{
			dateRange:function(){
				return this.getMonthRange(this.lastActiveDate,this.form.month)
			},
		},
		filters:{
			verifyStatusFilter(value) {
				if (value === 0) {
				  return '';
				} else if(value === 1){
					return '汽油车';				
				} else if(value === 2){
					return '新能源';				
				} else {
				  return '';
				}
			},
		}
	}
</script>

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