|
@@ -2,31 +2,35 @@
|
|
|
<view>
|
|
|
<u-modal
|
|
|
v-model="payWayPop"
|
|
|
- :title-style="{ color: '#404040' }"
|
|
|
+ :title-style="{ color: '#1E1E1E', fontSize: '34rpx' }"
|
|
|
title="选择支付方式"
|
|
|
width="550rpx"
|
|
|
:show-confirm-button="false"
|
|
|
:show-cancel-button="false"
|
|
|
+ :mask-close-able="true"
|
|
|
+ @input="modalClose"
|
|
|
>
|
|
|
<view class="pay-content">
|
|
|
<view class="pay-list">
|
|
|
- <radio-group>
|
|
|
- <view class="pay-list-item">
|
|
|
+ <radio-group @change="payRadioChange">
|
|
|
+ <!-- #ifdef H5 || MP-WEIXIN -->
|
|
|
+ <view class="pay-list-item" v-if="wxEnv">
|
|
|
<view class="pay-list-item-image">
|
|
|
<image class="image" src="/static/img/wechat-icon-new.png" mode="aspectFit" />
|
|
|
<view>微信支付</view>
|
|
|
</view>
|
|
|
<view class="radioBox">
|
|
|
- <radio color="#2DCF8C" value="1" :checked="1 === radioCurrent" />
|
|
|
+ <radio color="#2DCF8C" value="weixin" :checked="'weixin' === radioCurrent" />
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <!-- #endif -->
|
|
|
<view class="pay-list-item">
|
|
|
<view class="pay-list-item-image">
|
|
|
<image class="image" src="/static/img/gy-icon-new.png" mode="aspectFit" />
|
|
|
<view>贵州银行</view>
|
|
|
</view>
|
|
|
<view class="radioBox">
|
|
|
- <radio color="#2DCF8C" value="2" :checked="2 === radioCurrent" />
|
|
|
+ <radio color="#2DCF8C" value="gzyh" :checked="'gzyh' === radioCurrent" />
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="pay-list-item">
|
|
@@ -35,13 +39,88 @@
|
|
|
<view>聚合支付</view>
|
|
|
</view>
|
|
|
<view class="radioBox">
|
|
|
- <radio color="#2DCF8C" value="3" :checked="3 === radioCurrent" />
|
|
|
+ <radio color="#2DCF8C" value="juhe" :checked="'juhe' === radioCurrent" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</radio-group>
|
|
|
</view>
|
|
|
+ <view class="pay-coupon" v-if="radioCurrent === 'weixin' && isShowCoupon">
|
|
|
+ <u-cell-group :border="false">
|
|
|
+ <u-cell-item icon="" title="优惠券" :value="couponName || '暂无优惠券'" :border-bottom="false" @click="chooseCoupon"></u-cell-item>
|
|
|
+ </u-cell-group>
|
|
|
+ </view>
|
|
|
+ <view class="pay-money"> 金额¥{{ orderMoney }} </view>
|
|
|
+ <view class="pay-btn">
|
|
|
+ <u-button type="primary" shape="circle" @click="immediatePayment">立即支付</u-button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</u-modal>
|
|
|
+ <!-- 选择优惠券弹框 -->
|
|
|
+ <u-popup v-model="couponPopup.show" mode="top" length="100%">
|
|
|
+ <view class="coupon-popup">
|
|
|
+ <u-navbar
|
|
|
+ back-text=""
|
|
|
+ title="我的优惠券"
|
|
|
+ :background="couponPopup.background"
|
|
|
+ title-color="#fff"
|
|
|
+ back-icon-color="#fff"
|
|
|
+ :custom-back="customBack"
|
|
|
+ />
|
|
|
+ <view class="coupon-popup-list">
|
|
|
+ <template v-if="couponPopup.couponList.length">
|
|
|
+ <radio-group @change="couponRadioChange">
|
|
|
+ <view class="coupon-popup-list-item" v-for="(item, index) in couponPopup.couponList" :key="index">
|
|
|
+ <view class="coupon-popup-list-item-top">
|
|
|
+ <view class="coupon-popup-list-item-top-left">
|
|
|
+ <view class="cplitl-left">
|
|
|
+ <view>
|
|
|
+ <text>¥</text>
|
|
|
+ <text>{{ item.couponContent }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="cplitl-left-bottom">{{ Number(item.threshold) > 0 ? `停车时长满${item.threshold}分钟` : '无门槛' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="cplitl-right">
|
|
|
+ <view>{{ item.couponName }}</view>
|
|
|
+ <view>有限期:剩余{{ calcValidity(item.startTime, item.endTime) }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="coupon-popup-list-item-top-right">
|
|
|
+ <radio color="#FF6D6D" :value="item.id" :checked="item.id === couponPopup.radioCurrent" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="coupon-popup-list-item-bottom">
|
|
|
+ 适用停车点:
|
|
|
+ <template v-if="item.parkList">
|
|
|
+ <template v-if="item.parkList.length > 1"> 适用多个停车点 </template>
|
|
|
+ <template v-else> 仅限{{ item.parkList.map((item) => item.parkName).join('、') }} </template>
|
|
|
+ <template v-if="item.parkList && item.parkList.length > 1">
|
|
|
+ <view class="cplib-point">
|
|
|
+ <u-read-more
|
|
|
+ text-indent="0"
|
|
|
+ show-height="0"
|
|
|
+ :toggle="true"
|
|
|
+ :shadow-style="{ backgroundImage: 'none' }"
|
|
|
+ fontSize="20rpx"
|
|
|
+ close-text="展开所有停车点"
|
|
|
+ >
|
|
|
+ <view class="cplib-point-content">{{ item.parkList.map((item) => item.parkName).join('、') }}</view>
|
|
|
+ </u-read-more>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </radio-group>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <u-empty text="没有适合的优惠券" mode="coupon" margin-top="300"></u-empty>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <view class="coupon-popup-btn">
|
|
|
+ <u-button type="primary" shape="circle" :disabled="!couponPopup.radioCurrent" @click="confimCoupon">确 定</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
<u-toast ref="uToast" />
|
|
|
</view>
|
|
|
</template>
|
|
@@ -51,11 +130,6 @@ import { getEnvIsWx } from '@/utils/judgEnvironment.js';
|
|
|
import $wxPay from '@/utils/wxPay.js';
|
|
|
export default {
|
|
|
props: {
|
|
|
- // 弹框显示
|
|
|
- payWayPop: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
// 订单数组
|
|
|
curOrderList: {
|
|
|
type: Array,
|
|
@@ -104,14 +178,155 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ payWayPop: false,
|
|
|
wxEnv: true,
|
|
|
- radioCurrent: 1
|
|
|
+ radioCurrent: '',
|
|
|
+ couponName: '',
|
|
|
+ orderMoney: '',
|
|
|
+ isShowCoupon: false,
|
|
|
+ couponPopup: {
|
|
|
+ show: false,
|
|
|
+ couponList: [
|
|
|
+ {
|
|
|
+ id: '770098293625933824',
|
|
|
+ createTime: '2023-01-03 11:42:31',
|
|
|
+ updateTime: '2023-01-02 21:57:18',
|
|
|
+ merchantName: '',
|
|
|
+ couponId: '770098213246291968',
|
|
|
+ couponName: '路段10元券',
|
|
|
+ exchangeId: '770098224449277952',
|
|
|
+ exchangeCode: 'h3zi1nek',
|
|
|
+ memberId: '550854924816437248',
|
|
|
+ memberName: '15085256944',
|
|
|
+ startTime: '2023-01-02 11:42:31',
|
|
|
+ endTime: '2023-04-13 11:42:31',
|
|
|
+ vehicleNo: '贵A22223',
|
|
|
+ status: 0,
|
|
|
+ source: 1,
|
|
|
+ threshold: 0.0,
|
|
|
+ couponContent: 10.0,
|
|
|
+ parkList: [
|
|
|
+ {
|
|
|
+ id: '770098213267263488',
|
|
|
+ createBy: 'admin',
|
|
|
+ createTime: '2023-01-03 11:42:12',
|
|
|
+ delFlag: 0,
|
|
|
+ couponId: '770098213246291968',
|
|
|
+ couponName: '路段10元券',
|
|
|
+ parkType: 1,
|
|
|
+ parkId: '1395602533837180929',
|
|
|
+ parkName: '本杰路',
|
|
|
+ parkNo: 'RN000000038'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '770098213279846400',
|
|
|
+ createBy: 'admin',
|
|
|
+ createTime: '2023-01-03 11:42:12',
|
|
|
+ delFlag: 0,
|
|
|
+ couponId: '770098213246291968',
|
|
|
+ couponName: '路段10元券',
|
|
|
+ parkType: 1,
|
|
|
+ parkId: '1395602161655615489',
|
|
|
+ parkName: '党固路',
|
|
|
+ parkNo: 'RN000000031'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '770097376860131328',
|
|
|
+ createTime: '2023-01-03 11:38:53',
|
|
|
+ updateTime: '2023-02-17 09:57:38',
|
|
|
+ merchantName: '',
|
|
|
+ couponId: '770097278759555072',
|
|
|
+ couponName: '优惠券10元',
|
|
|
+ exchangeId: '770097291925475328',
|
|
|
+ exchangeCode: 'TTqBGghf',
|
|
|
+ memberId: '550854924816437248',
|
|
|
+ memberName: '15085256944',
|
|
|
+ startTime: '2023-01-02 11:38:53',
|
|
|
+ endTime: '2023-04-13 11:38:53',
|
|
|
+ vehicleNo: '贵A22223',
|
|
|
+ status: 0,
|
|
|
+ source: 1,
|
|
|
+ threshold: 0.0,
|
|
|
+ couponContent: 10.0,
|
|
|
+ parkList: [
|
|
|
+ {
|
|
|
+ id: '770097278818275328',
|
|
|
+ createBy: 'admin',
|
|
|
+ createTime: '2023-01-03 11:38:29',
|
|
|
+ delFlag: 0,
|
|
|
+ couponId: '770097278759555072',
|
|
|
+ couponName: '优惠券10元',
|
|
|
+ parkType: 0,
|
|
|
+ parkId: '657028028294320128',
|
|
|
+ parkName: '工信局停车场',
|
|
|
+ parkNo: 'ecd4650febc94ad4a2e8fcedfbec266a'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ radioCurrent: '',
|
|
|
+ background: {
|
|
|
+ backgroundColor: '#008CFF'
|
|
|
+ },
|
|
|
+ currentCoupon: {}
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
this.wxEnv = getEnvIsWx();
|
|
|
},
|
|
|
methods: {
|
|
|
+ /**
|
|
|
+ * 打开弹框触发
|
|
|
+ * @date 2023-02-17
|
|
|
+ * @param {any} details
|
|
|
+ * @param {any} numType single 单笔订单 multiple 多比订单 用于区分多笔订单不能使用优惠券
|
|
|
+ * @param {any} orderType road 路段订单 parking 停车场订单 用于区分路段订单不使用优惠券
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ openPopup(details, numType = 'single', orderType = 'road') {
|
|
|
+ this.payWayPop = true;
|
|
|
+ this.orderMoney = details.totalAmount.toFixed(2);
|
|
|
+ if (numType === 'single' && orderType === 'parking') {
|
|
|
+ this.isShowCoupon = true;
|
|
|
+ this.getCouponList(details.id);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 描述
|
|
|
+ * @date 2023-02-17
|
|
|
+ * @param {any} orderId
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ getCouponList(orderId) {
|
|
|
+ this.$u.api.getCouponByOrderIdApi({ orderId }).then((res) => {
|
|
|
+ this.couponPopup.couponList = res?.data ?? [];
|
|
|
+ if (this.couponPopup.couponList.length) {
|
|
|
+ this.couponPopup.currentCoupon = this.couponPopup.couponList[0];
|
|
|
+ this.couponPopup.radioCurrent = this.couponPopup.couponList[0].id;
|
|
|
+ this.couponName = this.couponPopup.couponList[0].couponName;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 选中支付类型
|
|
|
+ * @date 2023-02-17
|
|
|
+ * @param {any} {detail}
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ payRadioChange({ detail }) {
|
|
|
+ this.radioCurrent = detail.value;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 选中优惠券
|
|
|
+ * @date 2023-02-17
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ chooseCoupon() {
|
|
|
+ this.couponPopup.show = true;
|
|
|
+ },
|
|
|
/**
|
|
|
* 贵阳银行支付
|
|
|
* @param {Array} orderList 需要支付的订单号组成的数组
|
|
@@ -355,6 +570,89 @@ export default {
|
|
|
* */
|
|
|
closePaymentMethod() {
|
|
|
this.$emit('closePaymentMethod');
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 支付弹框支付触发
|
|
|
+ * @date 2023-02-17
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ modalClose() {
|
|
|
+ this.wxEnv = true,
|
|
|
+ this.radioCurrent = 'weixin',
|
|
|
+ this.couponName = '',
|
|
|
+ this.orderMoney = '',
|
|
|
+ this.isShowCoupon = false,
|
|
|
+ this.couponPopup = {
|
|
|
+ show: false,
|
|
|
+ couponList: [],
|
|
|
+ radioCurrent: '',
|
|
|
+ background: {
|
|
|
+ backgroundColor: '#008CFF'
|
|
|
+ },
|
|
|
+ currentCoupon: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 关闭优惠券弹框
|
|
|
+ * @date 2023-02-17
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ customBack() {
|
|
|
+ this.couponPopup.show = false;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 优惠券单选触发
|
|
|
+ * @date 2023-02-17
|
|
|
+ * @param {any} val
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ couponRadioChange(val) {
|
|
|
+ this.couponPopup.radioCurrent = val.detail.value;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 优惠券确认
|
|
|
+ * @date 2023-02-17
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ confimCoupon() {
|
|
|
+ this.couponPopup.currentCoupon = this.couponPopup.couponList.find((item) => item.id === this.couponPopup.radioCurrent);
|
|
|
+ this.couponName = this.couponPopup.currentCoupon.couponName;
|
|
|
+ this.couponPopup.show = false;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 立即支付
|
|
|
+ * @date 2023-02-17
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ immediatePayment() {
|
|
|
+ switch (this.radioCurrent) {
|
|
|
+ case 'weixin': // 微信支付
|
|
|
+ this.wechatPay();
|
|
|
+ break;
|
|
|
+ case 'gzyh':
|
|
|
+ this.gyBankPay();
|
|
|
+ break;
|
|
|
+ case 'juhe':
|
|
|
+ this.juhePay();
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 计算剩余时间
|
|
|
+ * @date 2022-02-17
|
|
|
+ * @param {any} datetime
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ calcValidity(startTime, endTime) {
|
|
|
+ let endTimeStr = new Date(endTime).valueOf(),
|
|
|
+ nowTimeStr = new Date(startTime).valueOf() < Date.now() ? Date.now() : new Date(startTime).valueOf(),
|
|
|
+ remainTimeStr = endTimeStr - nowTimeStr,
|
|
|
+ day = Math.floor(remainTimeStr / (1000 * 3600 * 24)),
|
|
|
+ dayOver = remainTimeStr % (1000 * 3600 * 24),
|
|
|
+ hours = Math.floor(dayOver / (3600 * 1000)),
|
|
|
+ hourOver = dayOver % (3600 * 1000),
|
|
|
+ minutes = Math.floor(hourOver / (60 * 1000));
|
|
|
+ return `${day}天${hours}小时${minutes}分`;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
@@ -362,4 +660,4 @@ export default {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@import './choosePayment.scss';
|
|
|
-</style>
|
|
|
+</style>
|