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 || 0 }}元</view>
		</view>
		<view class="handle-monthly-item">
			<view>包月时长</view>
			<view class="handle-monthly-time-long">
				<button @click="reduceMonthNum()">-</button>
				<view>{{ form.month || 0 }}个月</view>
				<button @click="addMonthNum()">+</button>
			</view>
		</view>
		<view class="handle-monthly-item">
			<view>有效期限</view>
			<view>{{ dateRange || '-' }}</view>
		</view>
		<view class="handle-monthly-explain">
			<u-parse :html="monthlyContent"></u-parse>
		</view>
		<view class="handle-monthly-confirm-button">
			<template v-if="carLicenseList.length && form.carLicense && form.carLicense.label">
				<u-button type="primary" :loading="loading" @click="submit(roadNo)">确认包月</u-button>
			</template>
			<template v-else>
				<u-button>未选车牌</u-button>
			</template>
		</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-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 class="pay-way-item pay-way-item-hy"
						@click="$u.debounce(gyBankPay, 1000, (immediate = true))">
						<image src="/static/img/gyyh-icon.svg" mode=""></image>
						<view class="title">贵州银行</view>
					</view>
					<!-- #ifdef H5 || MP-WEIXIN -->
					<view class="pay-way-item pay-way-item-wx" @click="$u.debounce(wechatPay, 1000, (immediate = true))"
						v-if="wxEnv">
						<image src="/static/img/weixin-icon.svg" mode=""></image>
						<view class="title">微信支付</view>
					</view>
					<!-- #endif -->
					<view class="pay-way-item pay-way-item-jh" @click="$u.debounce(juhePay, 1000, (immediate = true))">
						<image src="/static/img/juhe-icon.svg" mode=""></image>
						<view class="title">聚合支付</view>
					</view>
				</view>
				<view class="pay-way-subtitle">
					<view class="pay-way-subtitle-item">前三个月每天首次一分钱，长期八折优惠</view>
					<!-- #ifdef H5 || MP-WEIXIN -->
					<!-- <view class="pay-way-subtitle-item" v-if="wxEnv">&nbsp;</view> -->
					<!-- #endif -->
					<view class="pay-way-subtitle-item">&nbsp;</view>
				</view>
				<button class="pay-way-close-btn" @click="cancel">关闭</button>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getEnvIsWx
	} from '@/utils/judgEnvironment.js';
	import $wxPay from '@/utils/wxPay.js';
	export default {
		data() {
			return {
				startTime: '',
				endTime: '',
				payUrl: '',
				monthId: '',
				vehicleNo: '',
				monthEndTime: '',
				monthStartTime: '',
				lastActiveDate: null,
				roadNo: null,
				parkNo: null,
				carLicenseList: [],
				isShowCarLicense: false,
				form: {
					energyType: [],
					monthAmount: 0,
					carLicense: {},
					month: 1,
					dateRange: ''
				},
				label: '',
				payWayPop: false,
				jumpUrl: undefined,
				monthlyContent: '',
				carLicenseDefaultValue: [0],
				wxEnv: false,
				loading: false,
				type: 'road'
			};
		},
		onLoad(page) {
			this.wxEnv = getEnvIsWx();
			this.getSysterms(0);
			if (page.vehicleNo && page.roadNo) {
				this.roadNo = page.roadNo;
				this.vehicleNo = page.vehicleNo;
				this.type = 'road'
				this.getMonthInfo(this.roadNo, this.vehicleNo);
			} else if (page.roadNo) {
				this.roadNo = page.roadNo;
				this.type = 'road'
				this.getMonthInfo(this.roadNo);
			} else if (page.vehicleNo && page.parkNo) {
				this.parkNo = page.parkNo;
				this.vehicleNo = page.vehicleNo;
				this.type = 'park'
				this.getMonthInfo(this.parkNo, this.vehicleNo);
			} else if (page.parkNo) {
				this.parkNo = page.parkNo;
				this.type = 'park'
				this.getMonthInfo(this.parkNo);
			}
			if (page.monthId) {
				this.monthId = page.monthId
				this.payWayPop = true
			}
			const baseUrl = window.location.href.split('#')[0];
			let jumpUrl = baseUrl + '#/pages/center/monthly/monthly?type=' + this.type;
			this.jumpUrl = jumpUrl;
		},
		methods: {
			/**
			 * 获取几个月的日期范围
			 * {date} Date 起始日期,往后推一天
			 * {monthNum} Number  往后月数
			 * */
			getMonthRange(date, monthNum) {
				let Date1 = this.lastActiveDate;
				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);
			},
			/**
			 * 获取包月信息
			 * @date 2022-10-09
			 * @param {any} roadNo
			 * @param {any} vehicleNo
			 * @returns {any}
			 */
			getMonthInfo(roadNo, vehicleNo) {
				const params = {
					vehicleNo
				}
				if (this.type === 'park') {
					params.parkNo = roadNo
				} else {
					params.roadNo = roadNo
				}
				this.$u.api
					.monthInfo(params)
					.then((res) => {
						if (res.code === 200 && res.data.vehicleList && res.data.vehicleList.length) {
							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];
							}
						}
					}).catch((err) => {
						console.log(err);
					})
			},
			/**
			 * 提交包月信息
			 * @date 2022-10-09
			 * @param {any} roadNo
			 * @returns {any}
			 */
			submit(roadNo) {
				this.loading = true;
				const params = {
					vehicleNo: this.form.carLicense.label,
					energyType: this.form.carLicense.energyType,
					monthStartTime: this.monthStartTime,
					monthEndTime: this.monthEndTime,
					monthCount: this.form.month
				}
				if (this.type === 'park') {
					params.parkNo = this.parkNo
				} else {
					params.roadNo = this.roadNo
				}
				this.$u.api
					.createMonth(params)
					.then((res) => {
						if (res.code === 200) {
							this.monthId = res.data.monthId;
							this.payWayPop = true;
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							});
						}
						this.loading = false;
					})
					.catch((err) => {
						this.$refs.uToast.show({
							title: '程序错误!',
							type: 'error'
						});
						this.loading = false;
					});
			},
			/**
			 * 贵州银行包月支付
			 * @date 2022-10-09
			 * @returns {any}
			 */
			gyBankPay() {
				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'
							});
							this.jumpMonthList()
						}
					});
			},
			/**
			 * 聚合支付直接通过后台获取贵阳银行微信支付地址
			 * @date 2022-10-09
			 * @returns {any}
			 */
			juhePay() {
				// 支付成功跳转到包月页面
				let params = {
					monthId: this.monthId,
					openid: '',
					jumpUrl: this.jumpUrl
				};
				this.$u.api
					.monthlyWxPay(params)
					.then((res) => {
						if (res.code === 200) {
							localStorage.setItem('jumpUrl', this.jumpUrl);
							location.href = res.data.qrCodeUrl;
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							});
							this.jumpMonthList()
						}
					})
					.catch((err) => {
						this.$refs.uToast.show({
							title: '无法调起微信支付!',
							type: 'error'
						});
					});
			},
			/**
			 * 微信支付
			 * @date 2022-10-09
			 * @returns {any}
			 */
			wechatPay() {
				this.$u.api
					.wechatMonthlyPayapi({
						monthId: this.monthId,
						openid: this.vuex_wxinfo.openId
					})
					.then((r) => {
						if (r.code === 200) {
							$wxPay.wexinPay(r.data.wx).then((res) => {
								switch (Number(res.code)) {
									case 0: // 成功
										//#ifdef H5
										// this.jumpMonthList()
										location.href = this.jumpUrl
										//#endif
										break;
									case 1: // 取消
										this.$refs.uToast.show({
											title: '已取消支付',
											type: 'info'
										});
										this.jumpMonthList()
										break;
									case 2: // 支付失败
										this.$refs.uToast.show({
											title: '支付失败，请检查!',
											type: 'error'
										});
										this.jumpMonthList()
										break;
								}
							});
						}
					});
			},
			/**
			 * 获取包月说明
			 * @date 2022-10-09
			 * @param {any} termsType
			 * @returns {any}
			 */
			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'
						});
					});
			},
			cancel() {
				this.payWayPop = false
				this.jumpMonthList()
			},
			jumpMonthList() {
				this.$u.route({
					url: '/pages/center/monthly/monthly',
					type: 'redirect',
					params: {
						type: this.type
					}
				})
			}
		},
		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>