<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"
v-if="monthlyRuleObj.giveFlag && Number(monthlyRuleObj.giveFlag) === 1"
:class="{ 'pb20': monthlyRuleObj.minMonth && form.month >= monthlyRuleObj.minMonth && Number(monthlyRuleObj.giveFlag) === 1 }">
<view>包月时长</view>
<view class="handle-monthly-time-long">
<button @click="reduceMonthNum()">-</button>
<view>{{ form.month || 0 }}个月</view>
<button @click="addMonthNum()">+</button>
</view>
<view class="handle-monthly-time-tips"
v-if="monthlyRuleObj.minMonth && form.month >= monthlyRuleObj.minMonth && Number(monthlyRuleObj.giveFlag) === 1">
赠送提示：可获得{{ freeMonthNum }}个月的免费停车时长
</view>
</view>
<view class="handle-monthly-item" v-else>
<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="$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"> </view> -->
<!-- #endif -->
<view class="pay-way-subtitle-item"> </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',
monthlyRuleObj: {},
freeMonthNum: 0
};
},
watch: {
'form.month':{
handler(val){
this.calcFreeMonthNum(val)
},
deep:true,
immediate:false
}
},
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
}
if (page.roadNo) {
this.monthlyRuleDetails(page.roadNo);
}
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 + this.freeMonthNum);
}
},
/**
* 月操作 加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 + this.freeMonthNum));
},
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-12-20
* @param {any} roadNo
* @returns {any}
*/
monthlyRuleDetails(roadNo) {
this.$u.api.monthlyRuleDetailsApi({
roadNo
}).then(res => {
if (res.code === 200) {
this.monthlyRuleObj = res?.rows[0] ?? {}
this.calcFreeMonthNum(this.form.month)
}
})
},
calcFreeMonthNum(val){
let freeNum = 0;
if (this.monthlyRuleObj.giveFlag && Number(this.monthlyRuleObj.giveFlag) === 1) {
// let remainNum = Number(val) % Number(this.monthlyRuleObj.minMonth)
let timesNum = parseInt(Number(val) / Number(this.monthlyRuleObj.minMonth));
if (timesNum > 0) {
this.freeMonthNum = Number(timesNum) * Number(this.monthlyRuleObj.giveMonth);
} else {
this.freeMonthNum = 0
}
}
},
/**
* 提交包月信息
* @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.weixinPay(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 + this.freeMonthNum);
}
},
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>