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" :default-value="carLicenseDefaultValue" @confirm="carLicenseListConfirm"></u-select>
		<view class="handle-monthly-item">
			<view>车辆信息</view>
			<view>{{form.carLicense.value | 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> -->
			<u-parse :html="monthlyContent"></u-parse>
		</view>
		<view class="handle-monthly-confirm-button">
			<button type="default"@click="submit(roadNo)">确认包月</button>
		</view>
		<u-modal
			v-model="payWayPop"
			:title-style="{color: '#404040'}"
			title="缴费方式"
			:show-confirm-button="false"
			:show-cancel-button="false">
				<view class="slot-content">
					<!-- <view class="pay-way">
						<view class="pay-way-item" @click="gyBankPay">
							<image src="../../static/img/gy-bank-pay-icon.png" mode=""></image>
							<view>贵州银行</view>
						</view>
						<view class="pay-way-item" @click="wechatPay">
							<image src="../../static/img/wechat-pay-icon.png" mode=""></image>
							<view>微信支付</view>
						</view>
					</view> -->
				<view class="pay-way-new">
					<view class="pay-way-item pay-way-item-hy" @click="gyBankPay">
						<image src="../../static/img/guiyang-bank-icon.png" mode=""></image>
						<view class="title">贵州银行</view>
					</view>
					<view class="pay-way-item pay-way-item-jh" @click="juhePay">
						<image src="../../static/img/juhe-icon.png" mode=""></image>
						<view class="title">聚合支付</view>
					</view>
				</view>
				<view class="pay-way-subtitle">
					<view class="pay-way-subtitle-item">前三个月每天首次一分钱，长期八折优惠</view>
					<view class="pay-way-subtitle-item">&nbsp;</view>
				</view>
				<button class="pay-way-close-btn" @click="payWayPop = false">关闭</button>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import getUrlParams from "../../utils/getUrlParams.js";
	import {
		getEnvIsWx
	} from '@/utils/judgEnvironment.js';
	import $wxPay from '@/utils/wxPay.js'
	import {
		monthlyWxPay
	} from '@/common/http.api.js'
	export default {
		data() {
			return {
				startTime:'',
				endTime:'',
				payUrl:'',
				monthId: '',
				vehicleNo:'',
				monthEndTime:'',
				monthStartTime:'',
				lastActiveDate:null,
				roadNo:null,
				carLicenseList: [],
				isShowCarLicense: false,
				form: {
					energyType:[],
					monthAmount: [],
					carLicense: {},
					month: 1,
					dateRange:""
				},
				label:"",
				payWayPop: false,
				jumpUrl: undefined,
				monthlyContent: '',
				carLicenseDefaultValue: [0],
				wxEnv: false
			}
		},
		onLoad(page) {
			this.wxEnv = getEnvIsWx();
			this.getSysterms(0)
			if (page.vehicleNo && page.vehicleNo) {
				this.roadNo = page.roadNo;
				this.vehicleNo = page.vehicleNo
				this.getMonthInfo(this.roadNo, this.vehicleNo);
			} else if (page.roadNo) {
				this.roadNo = page.roadNo;
				this.getMonthInfo(this.roadNo);
			}
			const baseUrl = window.location.href.split('#')[0]
			let jumpUrl = baseUrl + '#/pages/center/monthly/monthly'
			this.jumpUrl = jumpUrl
		},
		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 > 9 ? day2 : '0' + day2)
				this.startTime=t1
				this.endTime=t2
				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]
				this.vehicleNo = item[0].label
				this.getMonthInfo(this.roadNo, this.vehicleNo)
			},
			getMonthInfo(roadNo, vehicleNo){
				this.$u.api.monthInfo({roadNo: roadNo, vehicleNo: vehicleNo})
				.then(res => {
					if (res.code === 200){
						this.lastActiveDate = res.data.lastActiveDate;
						this.form.monthAmount=res.data.monthAmount;
						this.carLicenseList = [];
						let vehicleNoItem = null
						res.data.vehicleList.forEach((item, index) => {
							const obj = {
								value: item.energyType,
								label: item.vehicleNo,
								energyType:item.energyType
							}
							if (this.vehicleNo == item.vehicleNo) {
								vehicleNoItem = obj
								this.carLicenseDefaultValue = [index]
							}
							this.carLicenseList.push(obj)
						});
						// 判断是否url存在车牌号,存在则选中项默认选中
						if (vehicleNoItem) {
							this.form.carLicense = vehicleNoItem
						} else {
							this.form.carLicense = this.carLicenseList[0]
						}
					}
					
				})
			},
			submit(roadNo){
				this.$u.api.createMonth({
					roadNo:this.roadNo,
					vehicleNo:this.form.carLicense.label,
					energyType:this.form.carLicense.energyType,
					monthStartTime:this.monthStartTime,
					monthEndTime:this.monthEndTime,
					monthCount:this.form.month})
					.then(res => {
						console.log("createMonth",res)
						if(res.code === 200){
							this.monthId = res.data.monthId
							console.log(this.monthId)
							this.payWayPop = true
						}else{
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error',
							});
						}
					}).catch(err=>{
						this.$refs.uToast.show({
							title: '程序错误!',
							type: 'error',
						});
					});
			},
			gyBankPay() {
				console.log(this.jumpUrl)
				this.$u.api.monthPay({
					monthId: this.monthId,
					jumpUrl: this.jumpUrl
				}).then(res => {
					if(res.code === 200){
						window.location.href = res.data.url
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
						});
					}
				})
			},
			/**
			 * 微信支付
			 * 判断vuex中是否存在openId
			 * 存在直接调起微信支付
			 * 不存在则通过微信登录去获取用户的code
			 * 完成后通过code去获取用户的openId等信息
			 * 最后再调起微信支付
			 * */
			juhePay() {
				// const openId = this.$store.state.vuex_wxinfo.openId
				// if (openId) {
				// 	this.getWXPay()
				// } else {
				// 	this.getCode()
				// }
				this.getWXPayByJava()
			},
			/**
			 * 微信支付
			 */
			wechatPay() {
				this.$u.api.wechatPayApi({
					orderList: this.curOrderList,
					openid: this.vuex_wxinfo.openId
				}).then(res => {
					if (res.code === 200) {
						$wxPay.wexinPay(res.data.wx).then(res1 => {
							switch (Number(res1.code)) {
								case 0: // 成功
									//#ifdef H5
									window.location.reload();
									//#endif
									break;
								case 1: // 取消
									this.$refs.uToast.show({
										title: '已取消支付',
										type: 'info'
									});
									break;
								case 2: // 支付失败
									this.$refs.uToast.show({
										title: '支付失败，请检查!',
										type: 'error'
									});
									break;
							}
						})
					}
				})
			},
			/**
			 * 调起微信支付接口
			 * @param {Array} list 需要支付的订单组合数组
			 * @param {Number} deviceNo 设备编号(在停车锁部分需要)
			 * */
			async getWXPay(){
				// 支付成功跳转到包月页面
				let params = {
					monthId: this.monthId,
					openid: this.$store.state.vuex_wxinfo.openId
				};
				await this.$wxApi.config();
				this.$pay.wechatPay(params, '/client/monthpay/wechat', this.jumpUrl).then(res =>{
					switch (Number(res.code)) {
						case 0: // 成功
							//#ifdef H5
							window.location.reload();
							//#endif
							break;
						case 1: // 取消
							this.$refs.uToast.show({
								title: '已取消支付',
								type: 'info',
							});
							break;
						case 2: // 支付失败
							this.$refs.uToast.show({
								title: '支付失败，请检查!',
								type: 'error',
							});
							break;
					}
				});
			},
			/**
			 * 直接通过后台获取贵阳银行微信支付地址
			 * @param {Array} list 需要支付的订单组合数组
			 * @param {Number} deviceNo 设备编号(在停车锁部分需要)
			 * */
			getWXPayByJava(orderList, deviceNo) {
				// 支付成功跳转到包月页面
				let params = {
					monthId: this.monthId,
					openid: '',
					jumpUrl: this.jumpUrl
				};
				this.$u.api.monthlyWxPay(params)
					.then(res => {
						if (res.code === 200) {
							// if (getEnvIsWx()) {
							// 	location.href = res.data.qrCodeUrl + '&jump_url=' + encodeURIComponent(this.jumpUrl)
							// } else {
							// 	location.href = res.data.qrCodeUrl
							// }
							localStorage.setItem('jumpUrl', this.jumpUrl)
							location.href = res.data.qrCodeUrl
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error',
							});
						}
					})
					.catch(err => {
						this.$refs.uToast.show({
							title: '无法调起微信支付!',
							type: 'error',
						});
					})
			},
			/**
			 * 获取code
			 * 1 微信登录获取code
			 * 2 url中截取
			 * */
			getCode () {
				// 获取页面完整url
				const local = window.location.href
				// 获取url后面的参数
				const locationLocaturl = window.location.search;
				// 截取url中的code
				this.code = getUrlParams(locationLocaturl, "code");
				// 如果没有code，则去请求
				if (this.code == null || this.code === '') {
					window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.config.wxAppid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&#wechat_redirect`
				} else {
					// 把code传给后台获取用户信息
					this.handleGetWXInfo(this.code)
				}
			},
			/**
			 * 通过code获取openId等用户信息
			 * 拿到用户信息后再调起微信支付
			 * */
			handleGetWXInfo (code) {
				let _this = this
				this.$u.api.getWXInfo(code).then((res) => {
					if (res.code === 200 ) {
						this.$u.vuex('vuex_wxinfo', res.data);
						this.getWXPay(this.currentItem)
					}
				}).catch((err) => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
				})
			},
			/**
			 * 获取包月说明
			 * */
			getSysterms(termsType) {
				this.$u.api.getSysterms({
						termsType: termsType
					})
					.then(res => {
						if (res.code === 200) {
							this.monthlyContent = res.data?.content
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error',
							})
						}
					})
					.catch(err => {
						this.$refs.uToast.show({
							title: '系统错误!',
							type: 'error',
						})
					})
			}
		},
		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';
@import '../paymentMethod/paymentMethod.scss'
</style>