forked from angelo/web-retail-h5
1787 lines
51 KiB
Vue
1787 lines
51 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="contxt">
|
||
<!-- 充值 -->
|
||
<template v-if="isRecharge">
|
||
<div class="tit4">充值金额</div>
|
||
<QuickRechargePanel
|
||
ref="quickRechargePanel"
|
||
:amounts="quickAmounts"
|
||
@amount-selected="onAmountSelected"
|
||
style="margin-bottom: 20rpx"
|
||
/>
|
||
<u-input
|
||
class="recharge-input"
|
||
fontSize="36"
|
||
v-model="rechargeAmount"
|
||
placeholder="或输入自定义金额"
|
||
></u-input>
|
||
</template>
|
||
<template v-else>
|
||
<view class="tit">{{ '待支付金额' }}</view>
|
||
<view class="tit1">
|
||
{{ userInfo.currencyIcon
|
||
}}{{ orderData.orderAmount | numberToCurrency }}
|
||
</view>
|
||
<view class="tit2"
|
||
>{{ '请在' }} <view class="tit3">{{ countDown }}</view
|
||
>{{ '内完成支付，否则订单将会被自动取消' }}
|
||
</view>
|
||
</template>
|
||
<view class="kuang">
|
||
<u-collapse
|
||
:value="activeNames"
|
||
ref="collapse"
|
||
@open="change"
|
||
@close="close"
|
||
accordion
|
||
:border="false"
|
||
>
|
||
<u-collapse-item
|
||
name="1"
|
||
v-if="
|
||
!isRecharge && !isShare && userInfo.memberCode != 'BL66886688'
|
||
"
|
||
>
|
||
<view slot="title" class="pf">
|
||
<img src="@/static/images/yhkzf.jpg" alt="" />
|
||
<view>{{ '钱包支付' }}</view>
|
||
</view>
|
||
<view class="quan_i" v-if="payDetail.payAccount1 > 0">
|
||
<view class="tTit">{{ '消费账户' }}</view>
|
||
<view class="lan">
|
||
<view>
|
||
{{ payDetail.account1 | numberToCurrency | isLocal }}
|
||
</view>
|
||
<view>
|
||
-{{ payDetail.payAccount1 | numberToCurrency | isLocal }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="quan_i" v-show="payDetail.payAccount2 > 0">
|
||
<view class="tTit">{{ '现金账户' }}</view>
|
||
<view class="lan">
|
||
<view>
|
||
{{ payDetail.account2 | numberToCurrency | isLocal }}
|
||
</view>
|
||
<view>
|
||
-{{ payDetail.payAccount2 | numberToCurrency | isLocal }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="quan_i" v-show="payDetail.payAccount3 > 0">
|
||
<view class="tTit">{{ '政策账户' }}</view>
|
||
<view class="lan">
|
||
<view>
|
||
{{ payDetail.account3 | numberToCurrency | isLocal }}
|
||
</view>
|
||
<view>
|
||
-{{ payDetail.payAccount3 | numberToCurrency | isLocal }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="quan_i" v-show="payDetail.payAccount4 > 0">
|
||
<view class="tTit">{{ '奖金账户' }}</view>
|
||
<view class="lan">
|
||
<view>
|
||
{{ payDetail.account4 | numberToCurrency | isLocal }}
|
||
</view>
|
||
<view>
|
||
-{{ payDetail.payAccount4 | numberToCurrency | isLocal }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="quan_i" v-show="payDetail.payAccount5 > 0">
|
||
<view class="tTit">{{ '重消账户' }}</view>
|
||
<view class="lan">
|
||
<view>
|
||
{{ payDetail.account5 | numberToCurrency | isLocal }}
|
||
</view>
|
||
<view>
|
||
-{{ payDetail.payAccount5 | numberToCurrency | isLocal }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="quan_i" v-show="payDetail.payAccount6 > 0">
|
||
<view class="tTit">{{ '积分账户' }}</view>
|
||
<view class="lan">
|
||
<view>
|
||
{{ payDetail.account6 | numberToCurrency | isLocal }}
|
||
</view>
|
||
<view>
|
||
-{{ payDetail.payAccount6 | numberToCurrency | isLocal }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="quan_i" v-show="payDetail.payAccount7 > 0">
|
||
<view class="tTit">{{ '鼓励账户' }}</view>
|
||
<view class="lan">
|
||
<view>
|
||
{{ payDetail.account7 | numberToCurrency | isLocal }}
|
||
</view>
|
||
<view>
|
||
-{{ payDetail.payAccount7 | numberToCurrency | isLocal }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="quan_i" v-show="payDetail.payAccount8 > 0">
|
||
<view class="tTit">{{ '复购券账户' }}</view>
|
||
<view class="lan">
|
||
<view>
|
||
{{ payDetail.account8 | numberToCurrency | isLocal }}
|
||
</view>
|
||
<view>
|
||
-{{ payDetail.payAccount8 | numberToCurrency | isLocal }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="quan_i" v-show="payDetail.payAccount9 > 0">
|
||
<view class="tTit">{{ '全球积分' }}</view>
|
||
<view class="lan">
|
||
<view>
|
||
{{ payDetail.account9 | numberToCurrency | isLocal }}
|
||
</view>
|
||
<view>
|
||
-{{ payDetail.payAccount9 | numberToCurrency | isLocal }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="quan_i" v-show="payDetail.payAccount10 > 0">
|
||
<view class="tTit">{{ '车奖积分' }}</view>
|
||
<view class="lan">
|
||
<view>
|
||
{{ payDetail.account10 | numberToCurrency | isLocal }}
|
||
</view>
|
||
<view>
|
||
-{{ payDetail.payAccount10 | numberToCurrency | isLocal }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="quan_i" v-show="payDetail.payAccount12 > 0">
|
||
<view class="tTit">{{ '法宝券' }}</view>
|
||
<view class="lan">
|
||
<view> </view>
|
||
<view>
|
||
-{{ payDetail.payAccount12 | numberToCurrency | isLocal }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="quan_i" v-show="payDetail.payAccount13 > 0">
|
||
<view class="tTit">{{ '海豆账户' }}</view>
|
||
<view class="lan">
|
||
<view>
|
||
{{ payDetail.account13 | numberToCurrency | isLocal }}
|
||
</view>
|
||
<view>
|
||
-{{ payDetail.payAccount13 | numberToCurrency | isLocal }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-collapse-item>
|
||
<!-- 暂时隐藏在线支付 -->
|
||
<u-collapse-item name="2" v-if="onlinePay">
|
||
<view slot="title" class="pf">
|
||
<img src="@/static/images/under_pay.png" alt="" />
|
||
<view>{{ '在线支付' }}</view>
|
||
</view>
|
||
<view
|
||
class="flex_ac"
|
||
v-show="payList[PAY_AUTH[PAY_TYPE.BAO_FU_WECHAT]]"
|
||
>
|
||
<view class="flex_ac_i">
|
||
<img src="@/static/images/pay_i2.png" alt="" />
|
||
<view>{{ '宝付微信支付' }}</view>
|
||
</view>
|
||
<u-radio-group v-model="whatPay">
|
||
<u-radio
|
||
activeColor="red"
|
||
size="14"
|
||
label=""
|
||
:name="PAY_TYPE.BAO_FU_WECHAT"
|
||
>
|
||
</u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
<view
|
||
class="flex_ac"
|
||
v-show="payList[PAY_AUTH[PAY_TYPE.BAO_FU_WECHAT_SCAN]]"
|
||
>
|
||
<view class="flex_ac_i">
|
||
<img src="@/static/images/pay_i2.png" alt="" />
|
||
<view>{{ '宝付微信扫码' }}</view>
|
||
</view>
|
||
<u-radio-group v-model="whatPay">
|
||
<u-radio
|
||
activeColor="red"
|
||
size="14"
|
||
label=""
|
||
:name="PAY_TYPE.BAO_FU_WECHAT_SCAN"
|
||
>
|
||
</u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
<view
|
||
class="flex_ac"
|
||
v-show="payList[PAY_AUTH[PAY_TYPE.HUI_FU_WECHAT]]"
|
||
>
|
||
<view class="flex_ac_i">
|
||
<img src="@/static/images/pay_i2.png" alt="" />
|
||
<view>{{ '汇付微信支付' }}</view>
|
||
</view>
|
||
<u-radio-group v-model="whatPay">
|
||
<u-radio
|
||
activeColor="red"
|
||
size="14"
|
||
label=""
|
||
:name="PAY_TYPE.HUI_FU_WECHAT"
|
||
>
|
||
</u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
<!-- 微信支付 -->
|
||
<view
|
||
class="flex_ac"
|
||
v-show="payList[PAY_AUTH[PAY_TYPE.WECHAT_PAY]]"
|
||
>
|
||
<view class="flex_ac_i">
|
||
<img src="@/static/images/pay_i2.png" alt="" />
|
||
<view>{{ '微信支付' }}</view>
|
||
</view>
|
||
<u-radio-group v-model="whatPay">
|
||
<u-radio
|
||
activeColor="red"
|
||
size="14"
|
||
label=""
|
||
:name="PAY_TYPE.WECHAT_PAY"
|
||
>
|
||
</u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
<!-- 支付宝支付 -->
|
||
<view class="flex_ac" v-show="payList[PAY_AUTH[PAY_TYPE.ALI_PAY]]">
|
||
<view class="flex_ac_i">
|
||
<img src="@/static/images/pay_i3.png" alt="" />
|
||
<view>{{ '支付宝支付' }}</view>
|
||
</view>
|
||
<u-radio-group v-model="whatPay">
|
||
<u-radio
|
||
activeColor="red"
|
||
size="14"
|
||
label=""
|
||
:name="PAY_TYPE.ALI_PAY"
|
||
>
|
||
</u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
<view
|
||
class="flex_ac1"
|
||
v-show="payList[PAY_AUTH[PAY_TYPE.HUI_FU_BANK_CARD]]"
|
||
>
|
||
<view class="flex_ac_i">
|
||
<img src="@/static/images/jdBank.jpg" alt="" />
|
||
<view>{{ '汇付银行卡' }} </view>
|
||
</view>
|
||
<view class="pad">
|
||
<view
|
||
v-for="(item, index) in hfList"
|
||
:key="index"
|
||
class="pay_flax flex_bet"
|
||
@click.prevent="selPayRadio('hf' + index)"
|
||
>
|
||
<view class="flax_i">
|
||
<view>{{ item.bankName }} ({{ item.bankNo }})</view>
|
||
<view class="fixBind" @click="fixBind(item)">解绑</view>
|
||
</view>
|
||
|
||
<u-radio-group v-model="whatPay">
|
||
<u-radio
|
||
activeColor="red"
|
||
size="14"
|
||
label=""
|
||
:name="PAY_TYPE.HUI_FU_BANK_CARD + index"
|
||
>
|
||
</u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
<view class="pay_flax flax_i" @click="bindBank('hf')">
|
||
<img class="img1" src="@/static/images/addto.png" alt="" />
|
||
<view>{{ '绑定银行卡' }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="flex_ac"
|
||
v-show="payList[PAY_AUTH[PAY_TYPE.TONG_LIAN_WECHAT]]"
|
||
>
|
||
<view class="flex_ac_i">
|
||
<img src="@/static/images/pay_i2.png" alt="" />
|
||
<view>通联微信支付</view>
|
||
</view>
|
||
<u-radio-group v-model="whatPay">
|
||
<u-radio
|
||
activeColor="red"
|
||
size="14"
|
||
label=""
|
||
:name="PAY_TYPE.TONG_LIAN_WECHAT"
|
||
>
|
||
</u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
<view
|
||
class="flex_ac1"
|
||
v-show="payList[PAY_AUTH[PAY_TYPE.JING_DONG_BANK_CARD]]"
|
||
>
|
||
<view class="flex_ac_i">
|
||
<img src="@/static/images/jdBank.jpg" alt="" />
|
||
<view>{{ '京东银行卡' }}</view>
|
||
</view>
|
||
<view class="pad">
|
||
<view
|
||
v-for="(item, index) in jdList"
|
||
:key="index"
|
||
class="pay_flax flex_bet"
|
||
@click.prevent="selPayRadio('jd' + index)"
|
||
>
|
||
<view class="flax_i">
|
||
{{ item.bankName }} ({{ item.bankNo }})
|
||
</view>
|
||
<u-radio-group v-model="whatPay">
|
||
<u-radio
|
||
activeColor="red"
|
||
size="14"
|
||
label=""
|
||
:name="PAY_TYPE.JING_DONG_BANK_CARD + index"
|
||
>
|
||
</u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
<view class="pay_flax flax_i" @click="bindBank('jd')">
|
||
<img class="img1" src="@/static/images/addto.png" alt="" />
|
||
<view>{{ '绑定银行卡' }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="flex_ac"
|
||
v-show="payList[PAY_AUTH[PAY_TYPE.JING_DONG_H5]]"
|
||
>
|
||
<view class="flex_ac_i">
|
||
<img src="@/static/images/jdBank.jpg" alt="" />
|
||
<view>京东收银台</view>
|
||
</view>
|
||
<u-radio-group v-model="whatPay">
|
||
<u-radio
|
||
activeColor="red"
|
||
size="14"
|
||
label=""
|
||
:name="PAY_TYPE.JING_DONG_H5"
|
||
>
|
||
</u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
<view
|
||
class="flex_ac1"
|
||
v-show="payList[PAY_AUTH[PAY_TYPE.TONG_LIAN_BANK_CARD]]"
|
||
>
|
||
<view class="flex_ac_i">
|
||
<img src="@/static/images/jdBank.jpg" alt="" />
|
||
<view>{{ '通联银行卡' }}</view>
|
||
</view>
|
||
<view class="pad">
|
||
<view
|
||
v-for="(item, index) in tlList"
|
||
:key="index"
|
||
class="pay_flax flex_bet"
|
||
@click.prevent="selPayRadio('tl' + index)"
|
||
>
|
||
<view class="flax_i">
|
||
{{ item.bankName }} ({{ item.bankNo }})
|
||
</view>
|
||
<u-radio-group v-model="whatPay">
|
||
<u-radio
|
||
activeColor="red"
|
||
size="14"
|
||
label=""
|
||
:name="PAY_TYPE.TONG_LIAN_BANK_CARD + index"
|
||
>
|
||
</u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
<view class="pay_flax flax_i" @click="bindBank('tl')">
|
||
<img class="img1" src="@/static/images/addto.png" alt="" />
|
||
<view>{{ '绑定银行卡' }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-collapse-item>
|
||
</u-collapse>
|
||
</view>
|
||
<view class="kuang" v-if="!isRecharge">
|
||
<div v-show="specialArea == REGIEST_AREA.id">
|
||
<div class="tit4">{{ '注册会员信息' }}</div>
|
||
<div class="quan">
|
||
<!-- <div class="kuang_i">
|
||
<div>{{ '新会员编号' }}</div>
|
||
<div>{{ orderData.memberCode }}</div>
|
||
</div> -->
|
||
<div class="kuang_i">
|
||
<div>{{ '申请级别' }}</div>
|
||
<div>{{ orderData.pkGradeVal }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '新会员姓名' }}</div>
|
||
<div>{{ orderData.memberName }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '新联系方式' }}</div>
|
||
<div>{{ orderData.phone }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '推荐编号' }}</div>
|
||
<div>{{ orderData.parent }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '推荐姓名' }}</div>
|
||
<div>{{ orderData.parentName }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '发货方式' }}</div>
|
||
<div>{{ orderData.deliveryWayVal }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '运输方式' }}</div>
|
||
<div>{{ orderData.transTypeVal }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '收货人' }}</div>
|
||
<div>{{ orderData.recName }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '收货电话' }}</div>
|
||
<div>{{ orderData.recPhone }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div style="white-space: nowrap">{{ '收货地址' }}</div>
|
||
<div>
|
||
{{ orderData.recProvince }}{{ orderData.recCity
|
||
}}{{ orderData.recCounty }}{{ orderData.recAddress }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-show="specialArea == UPGRADE_AREA.id">
|
||
<div class="tit4">{{ '升级会员信息' }}</div>
|
||
<div class="quan">
|
||
<div class="kuang_i">
|
||
<div>{{ '升级编号' }}</div>
|
||
<div>{{ orderData.memberCode }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '升级姓名' }}</div>
|
||
<div>{{ orderData.memberName }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '升级级别' }}</div>
|
||
<div>{{ orderData.pkGradeVal }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '发货方式' }}</div>
|
||
<div>{{ orderData.deliveryWayVal }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '运输方式' }}</div>
|
||
<div>{{ orderData.transTypeVal }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '收货人' }}</div>
|
||
<div>{{ orderData.recName }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '收货电话' }}</div>
|
||
<div>{{ orderData.recPhone }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div style="white-space: nowrap">{{ '收货地址' }}</div>
|
||
<div>
|
||
{{ orderData.recProvince }}{{ orderData.recCity
|
||
}}{{ orderData.recCounty }}{{ orderData.recAddress }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-show="specialArea == REPURCHASE_AREA.id">
|
||
<div class="tit4">{{ '复购会员信息' }}</div>
|
||
<div class="quan">
|
||
<div class="kuang_i">
|
||
<div>{{ '复购编号' }}</div>
|
||
<div>{{ orderData.memberCode }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '复购姓名' }}</div>
|
||
<div>{{ orderData.memberName }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '发货方式' }}</div>
|
||
<div>{{ orderData.deliveryWayVal }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '运输方式' }}</div>
|
||
<div>{{ orderData.transTypeVal }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '收货人' }}</div>
|
||
<div>{{ orderData.recName }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '收货电话' }}</div>
|
||
<div>{{ orderData.recPhone }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div style="white-space: nowrap">{{ '收货地址' }}</div>
|
||
<div>
|
||
{{ orderData.recProvince }}{{ orderData.recCity
|
||
}}{{ orderData.recCounty }}{{ orderData.recAddress }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-show="specialArea == REISSUE_AREA.id">
|
||
<div class="tit4">{{ '重消会员信息' }}</div>
|
||
<div class="quan">
|
||
<div class="kuang_i">
|
||
<div>{{ '会员编号' }}</div>
|
||
<div>{{ orderData.memberCode }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '会员姓名' }}</div>
|
||
<div>{{ orderData.memberName }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '发货方式' }}</div>
|
||
<div>{{ orderData.deliveryWayVal }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '运输方式' }}</div>
|
||
<div>{{ orderData.transTypeVal }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '收货人' }}</div>
|
||
<div>{{ orderData.recName }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '收货电话' }}</div>
|
||
<div>{{ orderData.recPhone }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div style="white-space: nowrap">{{ '收货地址' }}</div>
|
||
<div>
|
||
{{ orderData.recProvince }}{{ orderData.recCity
|
||
}}{{ orderData.recCounty }}{{ orderData.recAddress }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<!-- 输入验证码，密码 -->
|
||
<u-popup :show="isPw" mode="center" closeable @close="closePw">
|
||
<view class="t_tit">{{ '支付验证' }}</view>
|
||
<view class="box">
|
||
<view class="c_tit" v-if="isBank">{{ '请输入短信验证码' }}</view>
|
||
<view class="c_tit" v-else>{{ '请输入密码' }}</view>
|
||
<u--input
|
||
v-if="isBank"
|
||
border="surround"
|
||
v-model="codeValue"
|
||
></u--input>
|
||
<u--input
|
||
v-else
|
||
border="surround"
|
||
type="password"
|
||
v-model="codeValue"
|
||
></u--input>
|
||
<u-button
|
||
type="success"
|
||
class="uBtn"
|
||
shape="circle"
|
||
:loading="isLoading"
|
||
loadingText="支付中"
|
||
@tap="payPw()"
|
||
color="linear-gradient(to right, #005BAC, #005BAC )"
|
||
>{{ '立即支付' }}
|
||
</u-button>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 底部 -->
|
||
<view class="footer_f">
|
||
<view class="footer">
|
||
<view class="footer_r">
|
||
<u-button
|
||
type="success"
|
||
class="uBtn"
|
||
shape="circle"
|
||
:loading="isLoading"
|
||
loadingText="支付中"
|
||
:disabled="payBtnDisabled"
|
||
@tap="quickPay(isRecharge)"
|
||
color="linear-gradient(to right, #005BAC, #005BAC )"
|
||
>
|
||
{{ '立即支付' }}
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 成功 -->
|
||
<u-modal
|
||
:show="showSucce"
|
||
showConfirmButton
|
||
:content="content"
|
||
confirmColor="#DE3932"
|
||
@confirm="reset"
|
||
ref="uModal"
|
||
:asyncClose="true"
|
||
></u-modal>
|
||
<!-- 二维码 -->
|
||
<u-popup :show="wxPopup" mode="center" closeable @close="closewxPopup">
|
||
<view class="t_tit">{{ '微信支付' }}</view>
|
||
<view class="pay_code">
|
||
<div ref="qrCodeUrlWx" id="qrCodeUrlWx" class="qrcode"></div>
|
||
<div style="text-align: center">
|
||
<img
|
||
:src="qrcodeimg"
|
||
alt=""
|
||
width="280"
|
||
height="280"
|
||
v-show="qrcodeimg"
|
||
/>
|
||
</div>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 支付宝二维码 -->
|
||
<u-popup
|
||
:show="aliQrCodeVisible"
|
||
mode="center"
|
||
closeable
|
||
@close="closewxPopup"
|
||
>
|
||
<view class="t_tit">{{ '支付宝支付' }}</view>
|
||
<view class="pay_code">
|
||
<div ref="qrCodeUrlWx" id="qrCodeUrlWx" class="qrcode"></div>
|
||
<div style="text-align: center">
|
||
<img
|
||
:src="qrcodeimg"
|
||
alt=""
|
||
width="280"
|
||
height="280"
|
||
v-show="qrcodeimg"
|
||
/>
|
||
</div>
|
||
</view>
|
||
</u-popup>
|
||
<successDialog @successClose="successClose" ref="successDialog" />
|
||
<u-modal
|
||
@confirm="toUnBind"
|
||
@cancel="isNoBind = false"
|
||
:show="isNoBind"
|
||
title="提示"
|
||
width="100%"
|
||
:showCancelButton="true"
|
||
content="是否确定解绑该银行卡"
|
||
></u-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as api from '@/config/pay.js'
|
||
import QRCode from 'qrcodejs2'
|
||
import successDialog from '@/components/successDialog.vue'
|
||
import * as act from '@/config/activity.js'
|
||
import QuickRechargePanel from '@/components/QuickRechargePanel.vue'
|
||
import {
|
||
PAY_TYPE,
|
||
PAY_CHANEL,
|
||
PAY_REDIRECT_URL,
|
||
PAY_AUTH,
|
||
} from '@/util/constant'
|
||
import {
|
||
REGIEST_AREA,
|
||
UPGRADE_AREA,
|
||
REPURCHASE_AREA,
|
||
REISSUE_AREA,
|
||
} from '@/util/specialAreaMap'
|
||
let payStatus
|
||
let registerFlag = null
|
||
export default {
|
||
components: {
|
||
successDialog,
|
||
QuickRechargePanel,
|
||
},
|
||
data() {
|
||
return {
|
||
payList: {},
|
||
isNoBind: false,
|
||
isLoading: false,
|
||
clockTime: '',
|
||
specialArea: '',
|
||
orderCode: '',
|
||
orderData: {
|
||
orderAmount: '',
|
||
},
|
||
countDown: '',
|
||
payDetail: {
|
||
payAccount1: 1,
|
||
},
|
||
paramsPost: '',
|
||
isShare: false, //分享用户第一次爆单
|
||
userInfo: '',
|
||
activeNames: 1,
|
||
whatPay: '',
|
||
PAY_TYPE,
|
||
PAY_CHANEL,
|
||
PAY_REDIRECT_URL,
|
||
PAY_AUTH,
|
||
hfList: [],
|
||
jdList: [],
|
||
tlList: [],
|
||
businessType: '',
|
||
isBank: '',
|
||
isPw: false,
|
||
codeValue: '',
|
||
bindCode: '',
|
||
showSucce: false, //
|
||
sucPay: 0,
|
||
content: '支付成功',
|
||
wxPopup: false,
|
||
aliQrCodeVisible: false,
|
||
luckydrawData: {},
|
||
isRecharge: false,
|
||
rechargeAmount: '',
|
||
qrcodeimg: '',
|
||
onlinePay: true,
|
||
unBindCode: '',
|
||
REGIEST_AREA,
|
||
UPGRADE_AREA,
|
||
REPURCHASE_AREA,
|
||
REISSUE_AREA,
|
||
quickAmounts: [399, 1995, 3990, 10000, 30000, 50000], // 快速充值金额选项
|
||
isQuickSelected: false, // 标记是否是快速选择触发的金额变化
|
||
}
|
||
},
|
||
computed: {
|
||
payBtnDisabled() {
|
||
if (this.isRecharge) {
|
||
return !Object.values(this.payList).some(val => val)
|
||
}
|
||
return false
|
||
},
|
||
},
|
||
watch: {
|
||
rechargeAmount(newVal, oldVal) {
|
||
// 当充值金额变化时，如果不是快速选择触发的，则清空快速选择状态
|
||
if (!this.isQuickSelected && newVal && this.$refs.quickRechargePanel) {
|
||
this.$refs.quickRechargePanel.clear()
|
||
}
|
||
// 重置标志位
|
||
this.isQuickSelected = false
|
||
},
|
||
},
|
||
onUnload() {
|
||
clearInterval(payStatus)
|
||
clearInterval(this?.clockTime)
|
||
},
|
||
async onLoad(options) {
|
||
this.paramsPost = JSON.parse(options.paramsPost)
|
||
// 获取支付配置
|
||
await this.getPayConfig()
|
||
clearInterval(this.clockTime)
|
||
this.pkCountry = uni.getStorageSync('pkCountry')
|
||
if (this.paramsPost.isRecharge) {
|
||
this.activeNames = '2'
|
||
const auth = Object.keys(this.payList).find(key => this.payList[key])
|
||
this.whatPay = Object.keys(this.PAY_AUTH).find(
|
||
key => this.PAY_AUTH[key] === auth
|
||
)
|
||
this.isRecharge = this.paramsPost.isRecharge
|
||
this.businessType = 3
|
||
uni.setNavigationBarTitle({
|
||
title: '充值',
|
||
})
|
||
} else {
|
||
uni.setNavigationBarTitle({
|
||
title: '订单支付',
|
||
})
|
||
this.isRecharge = false
|
||
if (JSON.parse(options.paramsPost).orderType == 4) {
|
||
this.orderCode = this.paramsPost.orderCode
|
||
this.luckydrawData = this.paramsPost.luckydrawData
|
||
// 抽奖支付处理（查询订单支付信息以及显示等）
|
||
this.businessType = 4 //抽奖
|
||
this.specialArea = this.paramsPost.specialArea
|
||
this.getLuckdrawDetail()
|
||
} else {
|
||
this.userInfo = uni.getStorageSync('User')
|
||
if (this.userInfo.registerFans == 0) {
|
||
this.isShare = true
|
||
}
|
||
|
||
this.specialArea =
|
||
this.paramsPost.specialArea || this.paramsPost.orderType
|
||
this.orderCode = this.paramsPost.orderCode
|
||
this.businessType = options.businessType
|
||
this.onlinePay = this.stringToBoolean(options.onlinePay || 'true')
|
||
// this.getInfo()
|
||
|
||
// 获取订单信息
|
||
this.getOrderInfo()
|
||
if (!this.isShare) {
|
||
// 获取消费信息
|
||
this.getSpendInfo()
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
onShow() {
|
||
// 获取银行卡
|
||
// this.getBankList()
|
||
},
|
||
methods: {
|
||
onAmountSelected(data) {
|
||
this.isQuickSelected = true // 标记这是快速选择触发的
|
||
this.rechargeAmount = data.amount.toString()
|
||
},
|
||
toUnBind() {
|
||
api
|
||
.unBind({
|
||
bindCode: this.unBindCode,
|
||
})
|
||
.then(res => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '解绑成功',
|
||
icon: 'none',
|
||
})
|
||
this.whatPay = ''
|
||
}
|
||
|
||
this.getBankList()
|
||
})
|
||
this.isNoBind = false
|
||
},
|
||
fixBind(item) {
|
||
this.unBindCode = item.bindCode
|
||
this.isNoBind = true
|
||
},
|
||
stringToBoolean(str) {
|
||
return str === 'true' ? true : false
|
||
},
|
||
//查询充值抽奖次数
|
||
getLuckdrawDetail() {
|
||
// 抽奖支付处理（查询订单支付信息以及显示等）
|
||
act
|
||
.getLuckdrawDetail({
|
||
pkBaseId: this.luckydrawData.pkBaseId,
|
||
payNum: this.luckydrawData.payNum,
|
||
})
|
||
.then(res => {
|
||
if (res.code == 200) {
|
||
this.orderData.orderAmount = res.data.toBePaidMoney
|
||
this.payDetail = res.data
|
||
// this.downTime()
|
||
}
|
||
})
|
||
},
|
||
closewxPopup() {
|
||
this.wxPopup = false
|
||
this.aliQrCodeVisible = false
|
||
this.$refs.qrCodeUrlWx.innerHTML = ''
|
||
clearInterval(payStatus)
|
||
},
|
||
// 绑定银行卡
|
||
bindBank(val) {
|
||
uni.navigateTo({
|
||
url: '/pages/pay/bindBank?bank=' + val,
|
||
})
|
||
},
|
||
|
||
selPayRadio(val, e) {
|
||
if (e) {
|
||
e.stopPropagation()
|
||
}
|
||
this.whatPay = val
|
||
},
|
||
closePw() {
|
||
this.isPw = false
|
||
},
|
||
successClose() {
|
||
uni.redirectTo({
|
||
url: '/pages/mine/order/index',
|
||
})
|
||
},
|
||
payPw() {
|
||
let url, obj
|
||
// 银行卡
|
||
if (this.isBank) {
|
||
if (this.isBank == PAY_TYPE.HUI_FU_BANK_CARD) {
|
||
url = api.payConfirmHf
|
||
} else if (this.isBank == PAY_TYPE.JING_DONG_BANK_CARD) {
|
||
url = api.payConfirmJd
|
||
} else if (this.isBank == PAY_TYPE.TONG_LIAN_BANK_CARD) {
|
||
url = api.payConfirmTl
|
||
}
|
||
obj = {
|
||
orderCode: this.orderCode,
|
||
bindCode: this.bindCode,
|
||
specialArea: this.specialArea,
|
||
smsCode: this.codeValue,
|
||
pkSettleCountry: this.pkCountry || 1,
|
||
pkCountry: this.pkCountry || 1,
|
||
}
|
||
} else {
|
||
// 钱包支付
|
||
console.log(
|
||
'%c [ this.specialArea ]-910',
|
||
'font-size:13px; background:#777244; color:#bbb688;',
|
||
this.specialArea
|
||
)
|
||
if (
|
||
[REGIEST_AREA.id, UPGRADE_AREA.id].includes(Number(this.specialArea))
|
||
) {
|
||
url =
|
||
this.specialArea == REGIEST_AREA.id
|
||
? api.payRegOrder
|
||
: api.upgradePay
|
||
} else {
|
||
url = api.payOthOrder
|
||
}
|
||
obj = {
|
||
orderCode: this.orderCode,
|
||
specialArea: this.specialArea,
|
||
payPwd: this.codeValue,
|
||
pkSettleCountry: this.pkCountry || 1,
|
||
pkCountry: this.pkCountry || 1,
|
||
makerSpaceMember: this.paramsPost?.makerSpaceMember || '',
|
||
}
|
||
}
|
||
if (this.paramsPost?.orderType === 4) {
|
||
//抽奖
|
||
let obj = {
|
||
payPwd: this.codeValue,
|
||
payNum: this.luckydrawData.payNum,
|
||
pkBaseId: this.luckydrawData.pkBaseId,
|
||
pkSettleCountry: this.pkCountry || 1,
|
||
pkCountry: this.pkCountry || 1,
|
||
}
|
||
api.payDrawGift(obj).then(res => {
|
||
if (res.code == 200) {
|
||
// this.$message({
|
||
// message: res.msg,
|
||
// type: 'success',
|
||
// })
|
||
uni.showToast({
|
||
title: res.msg,
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1500)
|
||
// this.successClose()
|
||
}
|
||
})
|
||
} else {
|
||
url(obj).then(res => {
|
||
if (res.code == 200) {
|
||
this.isPw = false
|
||
if ([REGIEST_AREA.id].includes(Number(this.specialArea))) {
|
||
if (this.isBank) {
|
||
this.isPw = false
|
||
} else {
|
||
this.$refs.successDialog.showSuccess(res.data || this.orderData)
|
||
}
|
||
} else {
|
||
if (this.isRecharge) {
|
||
uni.showToast({
|
||
title: '充值成功',
|
||
icon: 'none',
|
||
duration: 1500,
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1500)
|
||
} else {
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon: 'none',
|
||
duration: 1500,
|
||
})
|
||
uni.redirectTo({
|
||
url: '/pages/mine/order/index',
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
async quickPay(isRecharge) {
|
||
if (isRecharge) {
|
||
if (!this.rechargeAmount || this.rechargeAmount <= 0) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '请输入正确的充值金额',
|
||
})
|
||
return
|
||
}
|
||
if (!this.whatPay) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '请选择支付方式',
|
||
})
|
||
return
|
||
}
|
||
}
|
||
if (this.activeNames == 2) {
|
||
// 非银行卡
|
||
if (
|
||
![
|
||
PAY_TYPE.HUI_FU_BANK_CARD,
|
||
PAY_TYPE.JING_DONG_BANK_CARD,
|
||
PAY_TYPE.TONG_LIAN_BANK_CARD,
|
||
].includes(this.whatPay.slice(0, 2))
|
||
) {
|
||
if (isRecharge) {
|
||
//充值
|
||
api
|
||
.preCharge({
|
||
rechargeAmount: this.rechargeAmount,
|
||
})
|
||
.then(res => {
|
||
this.paramsPost = res.data
|
||
this.orderCode = res.orderCode
|
||
if (this.whatPay == PAY_TYPE.JING_DONG_H5) {
|
||
this.redirectPay(PAY_CHANEL[this.whatPay])
|
||
} else if (
|
||
[PAY_TYPE.BAO_FU_WECHAT, PAY_TYPE.HUI_FU_WECHAT].includes(
|
||
this.whatPay
|
||
)
|
||
) {
|
||
this.scanPayBfWx(PAY_CHANEL[this.whatPay])
|
||
} else if (this.whatPay == PAY_TYPE.TONG_LIAN_WECHAT) {
|
||
this.weChatPay(PAY_CHANEL[this.whatPay])
|
||
}
|
||
})
|
||
} else {
|
||
if ([PAY_TYPE.JING_DONG_H5].includes(this.whatPay)) {
|
||
this.redirectPay(PAY_CHANEL[this.whatPay])
|
||
} else if (
|
||
[PAY_TYPE.BAO_FU_WECHAT_SCAN, PAY_TYPE.HUI_FU_WECHAT].includes(
|
||
this.whatPay
|
||
)
|
||
) {
|
||
this.scanPayBfWx(PAY_CHANEL[this.whatPay])
|
||
} else if (this.whatPay == PAY_TYPE.WECHAT_PAY) {
|
||
this.scanPayWx(PAY_CHANEL[this.whatPay])
|
||
} else if (this.whatPay == PAY_TYPE.ALI_PAY) {
|
||
this.scanPayAl(PAY_CHANEL[this.whatPay])
|
||
}
|
||
}
|
||
} else {
|
||
const indexed = this.whatPay.slice(2, 4)
|
||
const payTypeEnum = this.whatPay.slice(0, 2)
|
||
const bankListMap = {
|
||
[PAY_TYPE.HUI_FU_BANK_CARD]: this.hfList[indexed].bindCode,
|
||
[PAY_TYPE.JING_DONG_BANK_CARD]: this.jdList[indexed].bindCode,
|
||
[PAY_TYPE.TONG_LIAN_BANK_CARD]: this.tlList[indexed].bindCode,
|
||
}
|
||
this.bindCode = bankListMap[payTypeEnum]
|
||
const params = {
|
||
businessType: isRecharge ? 3 : this.businessType, //订单类型
|
||
payChannel: PAY_CHANEL[payTypeEnum],
|
||
payType: 3, //银行卡
|
||
bindCode: bankListMap[payTypeEnum],
|
||
}
|
||
if (!isRecharge) {
|
||
Object.assign(params, {
|
||
businessCode: this.orderCode,
|
||
})
|
||
} else {
|
||
try {
|
||
const orderCode = await this.preCharge()
|
||
Object.assign(params, {
|
||
businessCode: orderCode,
|
||
})
|
||
this.orderCode = orderCode
|
||
} catch (error) {
|
||
uni.showToast({
|
||
title: error,
|
||
icon: 'none',
|
||
})
|
||
return
|
||
}
|
||
}
|
||
api.unifiedorder(params).then(response => {
|
||
this.isBank = this.whatPay.slice(0, 2)
|
||
this.isPw = true
|
||
this.checkPayStatus(params)
|
||
})
|
||
}
|
||
} else {
|
||
api.generate().then(res => {
|
||
uni.setStorageSync('mToken', res.msg)
|
||
})
|
||
this.isBank = ''
|
||
this.isPw = true
|
||
}
|
||
},
|
||
scanPayBfWx(val) {
|
||
let params
|
||
if (this.isRecharge) {
|
||
params = {
|
||
businessType: 3, //订单类型充值
|
||
businessCode: this.orderCode,
|
||
payChannel: val,
|
||
payType: 2,
|
||
}
|
||
} else {
|
||
params = {
|
||
businessType: this.businessType, //订单类型充值
|
||
businessCode: this.orderCode,
|
||
payChannel: val,
|
||
payType: 2,
|
||
}
|
||
}
|
||
api.unifiedorder(params).then(res => {
|
||
this.wxPopup = true
|
||
let that = this
|
||
this.$nextTick(() => {
|
||
new QRCode(
|
||
this.$refs.qrCodeUrlWx,
|
||
{
|
||
width: 280,
|
||
height: 280,
|
||
text: res.data,
|
||
colorDark: '#000000',
|
||
colorLight: '#ffffff',
|
||
correctLevel: QRCode.CorrectLevel.Q,
|
||
textAlign: 'center',
|
||
},
|
||
1000
|
||
)
|
||
setTimeout(() => {
|
||
let qrcodeEle = document.getElementById('qrCodeUrlWx')
|
||
let cvs = qrcodeEle.querySelector('canvas')
|
||
that.qrcodeimg = cvs.toDataURL('image/png')
|
||
}, 1000)
|
||
})
|
||
})
|
||
this.checkPayStatus(params)
|
||
},
|
||
// 微信支付
|
||
scanPayWx(val) {
|
||
let params
|
||
if (this.isRecharge) {
|
||
params = {
|
||
businessType: 3, //订单类型充值
|
||
businessCode: this.orderCode,
|
||
payChannel: val,
|
||
payType: 2,
|
||
}
|
||
} else {
|
||
params = {
|
||
businessType: this.businessType, //订单类型充值
|
||
businessCode: this.orderCode,
|
||
payChannel: val,
|
||
payType: 2,
|
||
}
|
||
}
|
||
api.unifiedorder(params).then(res => {
|
||
this.wxPopup = true
|
||
let that = this
|
||
this.$nextTick(() => {
|
||
new QRCode(
|
||
this.$refs.qrCodeUrlWx,
|
||
{
|
||
width: 280,
|
||
height: 280,
|
||
text: res.data,
|
||
colorDark: '#000000',
|
||
colorLight: '#ffffff',
|
||
correctLevel: QRCode.CorrectLevel.Q,
|
||
textAlign: 'center',
|
||
},
|
||
1000
|
||
)
|
||
setTimeout(() => {
|
||
let qrcodeEle = document.getElementById('qrCodeUrlWx')
|
||
let cvs = qrcodeEle.querySelector('canvas')
|
||
that.qrcodeimg = cvs.toDataURL('image/png')
|
||
}, 1000)
|
||
})
|
||
})
|
||
this.checkPayStatus(params)
|
||
},
|
||
getPayAuthToken(payChannel) {
|
||
return new Promise((resolve, reject) => {
|
||
const extParam = {
|
||
isRecharge: !!this.isRecharge,
|
||
orderCode: this.orderCode,
|
||
specialArea: this.specialArea,
|
||
}
|
||
// 将extParam对象转换为JSON字符串，再转换为base64编码
|
||
const extParamBase64 = btoa(JSON.stringify(extParam))
|
||
const params = {
|
||
payChannel: payChannel,
|
||
payType: 2,
|
||
appletFlag: 0,
|
||
businessType: this.isRecharge ? 3 : this.businessType,
|
||
businessCode: this.orderCode,
|
||
extParam: extParamBase64,
|
||
}
|
||
api.unifiedorder(params).then(res => {
|
||
if (res.code === 200) {
|
||
resolve(res.data)
|
||
this.checkPayStatus(params)
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
})
|
||
reject(res.msg)
|
||
}
|
||
})
|
||
})
|
||
},
|
||
redirectPay(payChannel) {
|
||
this.getPayAuthToken(payChannel).then(url => {
|
||
if (navigator.userAgent.includes('MicroMessenger')) {
|
||
window.location.href = url
|
||
} else {
|
||
window.open(url)
|
||
}
|
||
})
|
||
},
|
||
weChatPay(payChannel) {
|
||
this.getPayAuthToken(payChannel)
|
||
.then(res => {
|
||
const url = PAY_REDIRECT_URL + '&state=' + res + '&payment=0'
|
||
window.open(url)
|
||
})
|
||
.catch(_ => {
|
||
const url = PAY_REDIRECT_URL + '&state=' + 'eroor' + '&payment=0'
|
||
// window.open(url)
|
||
window.location.href = url
|
||
uni.showToast({
|
||
title: url,
|
||
icon: 'none',
|
||
})
|
||
})
|
||
},
|
||
// 支付宝支付
|
||
scanPayAl(val) {
|
||
let params
|
||
if (this.isRecharge) {
|
||
params = {
|
||
businessType: 3, //订单类型充值
|
||
businessCode: this.orderCode,
|
||
payChannel: val,
|
||
payType: 1,
|
||
}
|
||
} else {
|
||
params = {
|
||
businessType: this.businessType, //订单类型充值
|
||
businessCode: this.orderCode,
|
||
payChannel: val,
|
||
payType: 1,
|
||
}
|
||
}
|
||
api.unifiedorder(params).then(res => {
|
||
this.aliQrCodeVisible = true
|
||
let that = this
|
||
this.$nextTick(() => {
|
||
new QRCode(
|
||
this.$refs.qrCodeUrlWx,
|
||
{
|
||
width: 280,
|
||
height: 280,
|
||
text: res.data,
|
||
colorDark: '#000000',
|
||
colorLight: '#ffffff',
|
||
correctLevel: QRCode.CorrectLevel.Q,
|
||
textAlign: 'center',
|
||
},
|
||
1000
|
||
)
|
||
setTimeout(() => {
|
||
let qrcodeEle = document.getElementById('qrCodeUrlWx')
|
||
let cvs = qrcodeEle.querySelector('canvas')
|
||
that.qrcodeimg = cvs.toDataURL('image/png')
|
||
}, 1000)
|
||
})
|
||
})
|
||
this.checkPayStatus(params)
|
||
},
|
||
// 宝付微信支付
|
||
scanPayBfWxJump(val) {
|
||
let params
|
||
if (this.isRecharge) {
|
||
params = {
|
||
businessType: 3, //订单类型充值
|
||
businessCode: this.orderCode,
|
||
payChannel: val,
|
||
payType: 2,
|
||
appletFlag: 0,
|
||
}
|
||
} else {
|
||
params = {
|
||
businessType: this.businessType, //订单类型充值
|
||
businessCode: this.orderCode,
|
||
payChannel: val,
|
||
payType: 2,
|
||
appletFlag: 0,
|
||
}
|
||
}
|
||
api.unifiedorder(params).then(res => {
|
||
let url =
|
||
'https://clooud1-5g23d3je04dda65b-1326540601.tcloudbaseapp.com/jump_mp.html?sign=20f03b022bc39e837056bdbe475632c8&t=1715569339&state=' +
|
||
res.data +
|
||
'&payment=0'
|
||
// https://clooud1-5g23d3je04dda65b-1326540601.tcloudbaseapp.com/jump_mp.html?sign=812bf9ab54292b1fb7161a3a6f7fa0f6&t=1715570889&state=' +
|
||
// res.data + '&payment=0'
|
||
window.open(url)
|
||
})
|
||
this.checkPayStatus(params)
|
||
},
|
||
// 通联微信支付
|
||
scanPayTlWxJump(val) {
|
||
let params
|
||
if (this.isRecharge) {
|
||
params = {
|
||
businessType: 3, //订单类型充值
|
||
businessCode: this.orderCode,
|
||
payChannel: val,
|
||
payType: 2,
|
||
appletFlag: 0,
|
||
}
|
||
} else {
|
||
params = {
|
||
businessType: this.businessType, //订单类型充值
|
||
businessCode: this.orderCode,
|
||
payChannel: val,
|
||
payType: 2,
|
||
appletFlag: 0,
|
||
}
|
||
}
|
||
api.unifiedorder(params).then(res => {
|
||
let url =
|
||
'https://clooud1-5g23d3je04dda65b-1326540601.tcloudbaseapp.com/jump_mp.html?sign=20f03b022bc39e837056bdbe475632c8&t=1715569339&state=' +
|
||
res.data +
|
||
'&payment=1'
|
||
// https://clooud1-5g23d3je04dda65b-1326540601.tcloudbaseapp.com/jump_mp.html?sign=812bf9ab54292b1fb7161a3a6f7fa0f6&t=1715570889&state=' +
|
||
// res.data + '&payment=1'
|
||
window.open(url)
|
||
})
|
||
this.checkPayStatus(params)
|
||
},
|
||
change(e) {
|
||
this.activeNames = e
|
||
},
|
||
close(e) {
|
||
if (e == 1) {
|
||
this.activeNames = 2
|
||
} else {
|
||
if (this.isRecharge) return
|
||
this.activeNames = 1
|
||
}
|
||
},
|
||
getPayConfig() {
|
||
return new Promise((resolve, reject) => {
|
||
api.payConfig().then(res => {
|
||
this.payList = res.data
|
||
console.log(this.payList)
|
||
resolve(res.data)
|
||
})
|
||
})
|
||
},
|
||
getBankList() {
|
||
api.jdBankList().then(res => {
|
||
this.jdList = res.data
|
||
})
|
||
// api.hfBankList().then((res) => {
|
||
// this.hfList = res.data
|
||
// })
|
||
// api.tlBankList().then((res) => {
|
||
// this.tlList = res.data
|
||
// })
|
||
this.$nextTick(() => {
|
||
this.$refs.collapse.init()
|
||
})
|
||
this.$forceUpdate()
|
||
},
|
||
getOrderInfo() {
|
||
api
|
||
.orderInfo({
|
||
specialArea: this.specialArea,
|
||
orderCode: this.orderCode,
|
||
})
|
||
.then(res => {
|
||
this.orderData = res.data
|
||
this.downTime()
|
||
})
|
||
},
|
||
downTime() {
|
||
let that = this
|
||
this.clockTime = setInterval(() => {
|
||
if (that.orderData.payTime && that.orderData.payTime > 0) {
|
||
that.countDown = this.getTime(this.orderData.payTime--)
|
||
} else {
|
||
that.countDown = '00:00:00'
|
||
}
|
||
}, 1000)
|
||
},
|
||
getSpendInfo() {
|
||
api
|
||
.spendDetails({
|
||
specialArea: this.specialArea,
|
||
orderCode: this.orderCode,
|
||
})
|
||
.then(res => {
|
||
// this.payDetail = res.data
|
||
this.$set(this, 'payDetail', res.data)
|
||
this.$nextTick(() => {
|
||
this.$refs.collapse.init()
|
||
})
|
||
this.$forceUpdate()
|
||
})
|
||
},
|
||
reset() {
|
||
this.$store.dispatch('GetInfo').then(res => {
|
||
uni.reLaunch({
|
||
url: '/pages/index/index',
|
||
})
|
||
})
|
||
},
|
||
// 查询订单状态
|
||
checkPayStatus(data) {
|
||
let that = this
|
||
// 定时器
|
||
payStatus = setInterval(() => {
|
||
if (that.sucPay == 1) {
|
||
// 清除定时器
|
||
clearInterval(payStatus)
|
||
this.wxPopup = false
|
||
this.aliQrCodeVisible = false
|
||
this.showSucce = true
|
||
if ([REGIEST_AREA.id].includes(Number(this.specialArea))) {
|
||
registerFlag = setTimeout(() => {
|
||
api.registerInfo(this.orderCode).then(res => {
|
||
if (res.data) {
|
||
this?.$refs?.successDialog?.showSuccess(res.data)
|
||
}
|
||
})
|
||
}, 3000)
|
||
}
|
||
} else {
|
||
api.payStatus(data).then(res => {
|
||
that.sucPay = res.data
|
||
})
|
||
}
|
||
}, 2000)
|
||
},
|
||
getTime(time) {
|
||
// 转换为式分秒
|
||
let h = parseInt((time / 60 / 60) % 24)
|
||
h = h < 10 ? '0' + h : h
|
||
let m = parseInt((time / 60) % 60)
|
||
m = m < 10 ? '0' + m : m
|
||
let s = parseInt(time % 60)
|
||
s = s < 10 ? '0' + s : s
|
||
// 作为返回值返回
|
||
return h + ':' + m + ':' + s
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
background: #f9f9f9;
|
||
// min-height: calc(100vh-44px);
|
||
height: 100vh;
|
||
}
|
||
|
||
.index_header {
|
||
background: #f9f9f9;
|
||
height: 330rpx;
|
||
}
|
||
|
||
.contxt {
|
||
padding: 40rpx 26rpx 0;
|
||
padding-bottom: 300rpx;
|
||
}
|
||
|
||
.tit {
|
||
font-size: 24px;
|
||
font-family:
|
||
PingFang SC-Semibold,
|
||
PingFang SC;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
color: #333333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.tit1 {
|
||
font-size: 24px;
|
||
font-family:
|
||
PingFang SC-Semibold,
|
||
PingFang SC;
|
||
font-weight: 600;
|
||
color: #e02b26;
|
||
text-align: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.tit2 {
|
||
font-size: 11px;
|
||
font-family:
|
||
PingFang SC-Regular,
|
||
PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.tit3 {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #f33030;
|
||
margin: 0 5px;
|
||
}
|
||
|
||
.kuang {
|
||
margin-top: 20rpx;
|
||
// padding: 20rpx;
|
||
background: #fff;
|
||
box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
|
||
border-radius: 10px 10px 10px 10px;
|
||
}
|
||
|
||
.pf {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
font-family:
|
||
PingFang SC-Semibold,
|
||
PingFang SC;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
|
||
img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
::v-deep .u-radio-group {
|
||
flex: none;
|
||
}
|
||
|
||
.flex_ac {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||
padding: 18rpx 0;
|
||
}
|
||
|
||
.flex_ac1 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
// align-items: center;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||
padding: 18rpx 0;
|
||
}
|
||
|
||
.flex_ac_i {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
font-family:
|
||
PingFang SC-Regular,
|
||
PingFang SC;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
|
||
img {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
|
||
::v-deep .u-collapse-item__content__text {
|
||
padding: 0px 15px;
|
||
}
|
||
|
||
.pad {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.pay_flax {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 15px;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.flax_i {
|
||
flex: 1;
|
||
margin-left: 36rpx;
|
||
display: flex;
|
||
}
|
||
.fixBind {
|
||
margin-left: 20px;
|
||
color: #d61820;
|
||
font-size: 12px;
|
||
}
|
||
.flex_bet {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.img1 {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.footer_f {
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
z-index: 10;
|
||
box-shadow: 0px -2px 20px 0px rgba(204, 204, 204, 0.5);
|
||
}
|
||
|
||
.footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx 24rpx 40rpx 20rpx;
|
||
background: #fff;
|
||
|
||
.footer_l {
|
||
}
|
||
|
||
.footer_r {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 20rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
::v-deep .u-popup__content {
|
||
width: 80%;
|
||
}
|
||
|
||
.t_tit {
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.c_tit {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.box {
|
||
padding: 40px;
|
||
text-align: center;
|
||
}
|
||
|
||
.uBtn {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.pay_code {
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
padding: 20rpx;
|
||
|
||
.qrcodeWx {
|
||
}
|
||
}
|
||
|
||
.qrcode {
|
||
display: none;
|
||
|
||
img {
|
||
width: 132px;
|
||
height: 132px;
|
||
background-color: #fff; //设置白色背景色
|
||
padding: 6px; // 利用padding的特性，挤出白边
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
.lan {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #666;
|
||
font-size: 12px;
|
||
font-family:
|
||
PingFang SC-Semibold,
|
||
PingFang SC;
|
||
font-weight: 600;
|
||
color: #999;
|
||
}
|
||
|
||
.tTit {
|
||
font-size: 12px;
|
||
font-family:
|
||
PingFang SC-Semibold,
|
||
PingFang SC;
|
||
font-weight: 600;
|
||
color: #666;
|
||
}
|
||
.tit4 {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
// margin-top: 30px;
|
||
padding: 20rpx 0 0 30rpx;
|
||
}
|
||
|
||
.quan {
|
||
overflow: hidden;
|
||
border-radius: 10px;
|
||
// box-shadow: 0px 2px 20px 0px #efefef;
|
||
padding: 15px 15px 0 15px;
|
||
// margin-top: 20px;
|
||
}
|
||
.kuang_i {
|
||
color: #666;
|
||
font-size: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-bottom: 15px;
|
||
}
|
||
.recharge-input {
|
||
::v-deep .uni-input-placeholder {
|
||
font-size: 48rpx;
|
||
}
|
||
}
|
||
</style>
|