1904 lines
56 KiB
Vue
1904 lines
56 KiB
Vue
<template>
|
||
<div class="contain">
|
||
<el-dialog :title="paytitle" :visible.sync="toShow" width="30%" center :close-on-click-modal="false"
|
||
:before-close="handleClose" class="thepayDialog">
|
||
<div class="diaBox">
|
||
<!-- 充值 -->
|
||
<template v-if="ifcz">
|
||
<div style="display: flex">
|
||
<div class="tit4" style="margin-right: 10px;width:100px;">{{ '会员编号' }}</div>
|
||
<el-input class="czinputbox" v-model="cjCode"></el-input>
|
||
</div>
|
||
<div style="display: flex">
|
||
<div class="tit4" style="margin-right: 10px;width:100px;">{{ '充值金额' }}</div>
|
||
<el-input class="czinputbox" v-model="czJe"></el-input>
|
||
</div>
|
||
</template>
|
||
|
||
<template v-if="!ifcz">
|
||
<div class="tit1">
|
||
{{ userInfo.currencyIcon }}{{ orderData.orderAmount |toThousandthAndKeepDecimal }}
|
||
</div>
|
||
<div class="tit2">
|
||
{{ '请在' }}
|
||
<div class="tit3">{{ countDown }}</div>
|
||
{{ '内完成支付，否则订单将会被自动取消' }}
|
||
</div>
|
||
</template>
|
||
<div class="tit4">{{ '支付方式' }}</div>
|
||
<div class="quan">
|
||
<el-collapse v-model="activeNames">
|
||
<el-collapse-item name="1" v-if="!ifcz & isShare&userInfo.memberCode!='CN68880628'">
|
||
<template slot="title">
|
||
<div class="pf">
|
||
<div class="pf_l">
|
||
<img src="@/assets/images/yhkzf.jpg" alt="" />
|
||
<div>{{ '钱包支付' }}</div>
|
||
</div>
|
||
<el-radio v-model="whatPay" @click.prevent="selPayRadio(0, $event)"
|
||
:label="0">{{ " " }}
|
||
</el-radio>
|
||
</div>
|
||
</template>
|
||
<div class="quan_i" v-show="payDetail.payAccount1 > 0">
|
||
<div class="tTit">{{ '消费账户' }}</div>
|
||
<div class="lan">
|
||
<div>
|
||
{{ userInfo.currencyIcon
|
||
}}{{ payDetail.account1 | numberToCurrency }}
|
||
</div>
|
||
<div>
|
||
-{{ userInfo.currencyIcon
|
||
}}{{ payDetail.payAccount1 | numberToCurrency }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="quan_i" v-show="payDetail.payAccount2 > 0">
|
||
<div class="tTit">{{ '现金账户' }}</div>
|
||
<div class="lan">
|
||
<div>
|
||
{{ userInfo.currencyIcon
|
||
}}{{ payDetail.account2 | numberToCurrency }}
|
||
</div>
|
||
<div>
|
||
-{{ userInfo.currencyIcon
|
||
}}{{ payDetail.payAccount2 | numberToCurrency }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="quan_i" v-show="payDetail.payAccount3 > 0">
|
||
<div class="tTit">{{ '政策账户' }}</div>
|
||
<div class="lan">
|
||
<div>
|
||
{{ userInfo.currencyIcon
|
||
}}{{ payDetail.account3 | numberToCurrency }}
|
||
</div>
|
||
<div>
|
||
-{{ userInfo.currencyIcon
|
||
}}{{ payDetail.payAccount3 | numberToCurrency }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="quan_i" v-show="payDetail.payAccount4 > 0">
|
||
<div class="tTit">{{ '奖金账户' }}</div>
|
||
<div class="lan">
|
||
<div>
|
||
{{ userInfo.currencyIcon
|
||
}}{{ payDetail.account4 | numberToCurrency }}
|
||
</div>
|
||
<div>
|
||
-{{ userInfo.currencyIcon
|
||
}}{{ payDetail.payAccount4 | numberToCurrency }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="quan_i" v-show="payDetail.payAccount5 > 0">
|
||
<div class="tTit">{{ '重消账户' }}</div>
|
||
<div class="lan">
|
||
<div>
|
||
{{ userInfo.currencyIcon
|
||
}}{{ payDetail.account5 | numberToCurrency }}
|
||
</div>
|
||
<div>
|
||
-{{ userInfo.currencyIcon
|
||
}}{{ payDetail.payAccount5 | numberToCurrency }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="quan_i" v-show="payDetail.payAccount6 > 0">
|
||
<div class="tTit">{{ '积分账户' }}</div>
|
||
<div class="lan">
|
||
<div>
|
||
{{ userInfo.currencyIcon
|
||
}}{{ payDetail.account6 | numberToCurrency }}
|
||
</div>
|
||
<div>
|
||
-{{ userInfo.currencyIcon
|
||
}}{{ payDetail.payAccount6 | numberToCurrency }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="quan_i" v-show="payDetail.payAccount7 > 0">
|
||
<div class="tTit">{{ '鼓励账户' }}</div>
|
||
<div class="lan">
|
||
<div>
|
||
{{ userInfo.currencyIcon
|
||
}}{{ payDetail.account7 | numberToCurrency }}
|
||
</div>
|
||
<div>
|
||
-{{ userInfo.currencyIcon
|
||
}}{{ payDetail.payAccount7 | numberToCurrency }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="quan_i" v-show="payDetail.payAccount8 > 0">
|
||
<div class="tTit">{{ '复购券账户' }}</div>
|
||
<div class="lan">
|
||
<div>
|
||
{{ userInfo.currencyIcon
|
||
}}{{ payDetail.account8 | numberToCurrency }}
|
||
</div>
|
||
<div>
|
||
-{{ userInfo.currencyIcon
|
||
}}{{ payDetail.payAccount8 | numberToCurrency }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- </div> -->
|
||
<div class="quan_i" v-show="payDetail.payAccount9 > 0">
|
||
<div class="tTit">{{ '全球积分' }}</div>
|
||
<div class="lan">
|
||
<div>
|
||
{{ userInfo.currencyIcon
|
||
}}{{ payDetail.account9 | numberToCurrency }}
|
||
</div>
|
||
<div>
|
||
-{{ userInfo.currencyIcon
|
||
}}{{ payDetail.payAccount9 | numberToCurrency }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="quan_i" v-show="payDetail.payAccount10 > 0">
|
||
<div class="tTit">{{ '车奖积分' }}</div>
|
||
<div class="lan">
|
||
<div>
|
||
{{ userInfo.currencyIcon
|
||
}}{{ payDetail.account10 | numberToCurrency }}
|
||
</div>
|
||
<div>
|
||
-{{ userInfo.currencyIcon
|
||
}}{{ payDetail.payAccount10 | numberToCurrency }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="quan_i" v-show="payDetail.payAccount12 > 0">
|
||
<div class="tTit">{{ '代金券' }}</div>
|
||
<div class="lan">
|
||
<div>
|
||
|
||
</div>
|
||
<div>
|
||
-{{ userInfo.currencyIcon
|
||
}}{{ payDetail.payAccount12 | numberToCurrency }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="quan_i" v-show="payDetail.payAccount13 > 0">
|
||
<div class="tTit">{{ '海豆账户' }}</div>
|
||
<div class="lan">
|
||
<div>
|
||
{{ userInfo.currencyIcon
|
||
}}{{ payDetail.account13 | numberToCurrency }}
|
||
</div>
|
||
<div>
|
||
-{{ userInfo.currencyIcon
|
||
}}{{ payDetail.payAccount13 | numberToCurrency }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- </div> -->
|
||
</el-collapse-item>
|
||
<el-collapse-item name="2" v-if="!ifcz&&isWalate&&onlinePay">
|
||
<template slot="title">
|
||
<div class="pf">
|
||
<div class="pf_l">
|
||
<img src="@/assets/images/under_pay.png" alt="" />
|
||
<div>{{'在线支付'}}</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<div class="quan_r">
|
||
<li class="flex_ac" v-show="this.payList.pay9" @click.prevent="selPayRadio(1)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i2.png" alt="" />
|
||
<span>{{ '微信支付' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="1">{{ "" }}</el-radio>
|
||
</li>
|
||
<li class="flex_ac" v-show="this.payList.pay8" @click.prevent="selPayRadio(2)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i3.png" alt="" />
|
||
<span>{{ '支付宝' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="2">{{ "" }}</el-radio>
|
||
</li>
|
||
<li class="flex_ac" v-show="this.payList.pay10" @click.prevent="selPayRadio(3)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i2.png" alt="" />
|
||
<span>{{ '杉德微信' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="3">{{ "" }}</el-radio>
|
||
</li>
|
||
<!-- <li-->
|
||
<!-- class="flex_ac"-->
|
||
<!-- v-show="this.payList.pay11"-->
|
||
<!-- @click.prevent="selPayRadio(4)"-->
|
||
<!-- >-->
|
||
<!-- <div class="flex_ac_i">-->
|
||
<!-- <img src="@/assets/images/pay_i3.png" alt="" />-->
|
||
<!-- <span>{{ '杉德支付宝' }}</span>-->
|
||
<!-- </div>-->
|
||
<!-- <el-radio v-model="whatPay" :label="4">{{ "" }}</el-radio>-->
|
||
<!-- </li>-->
|
||
<li class="flex_ac" v-show="this.payList.pay12" @click.prevent="selPayRadio(12)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i2.png" alt="" />
|
||
<span>{{ '宝付微信支付' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="12"><span></span></el-radio>
|
||
</li>
|
||
<!-- 汇付微信 -->
|
||
<li class="flex_ac" v-show="this.payList.pay13" @click.prevent="selPayRadio(13)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i2.png" alt="" />
|
||
<span>{{ '汇付微信支付' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="13">{{ "" }}</el-radio>
|
||
</li>
|
||
<!-- {{ '汇付银行卡' }} -->
|
||
<!-- <li class="flex_ac"
|
||
v-show="this.payList.pay15"
|
||
@click="beforeScanPay('hfYhk')">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/jdBank.jpg"
|
||
alt="" />
|
||
<span>汇付银行卡支付</span>
|
||
</div>
|
||
<el-radio v-model="whatPay"
|
||
:label="15">{{ }}</el-radio>
|
||
</li> -->
|
||
<el-collapse accordion v-show="this.payList.pay15">
|
||
<el-collapse-item>
|
||
<template slot="title">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/jdBank.jpg" alt="" />
|
||
<span>{{ '汇付银行卡' }}</span>
|
||
</div>
|
||
</template>
|
||
<div class="pad">
|
||
<div v-for="(item, index) in hfList" :key="index" class="pay_flax flex_bet"
|
||
@click.prevent="selPayRadio('hf' + index)">
|
||
<div class="flax_i">
|
||
<div>
|
||
{{ item.bankName }} ({{ item.bankNo }})
|
||
</div>
|
||
<div class="fixBind" @click="fixBind(item)">解绑</div>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="'hf' + index">{{ }}</el-radio>
|
||
</div>
|
||
<div class="pay_flax flax_i" @click="bindBank('hf')">
|
||
<img class="img1" src="@/assets/images/addto.png" alt="" />
|
||
<div>{{ '绑定银行卡' }}</div>
|
||
</div>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
<li class="flex_ac" v-show="this.payList.pay0" @click.prevent="selPayRadio(5)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i2.png" alt="" />
|
||
<span>{{ '京东微信' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="5">{{ "" }}</el-radio>
|
||
</li>
|
||
<li class="flex_ac" v-show="this.payList.pay1" @click.prevent="selPayRadio(6)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i3.png" alt="" />
|
||
<span>{{ '京东支付宝' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="6">{{ "" }}</el-radio>
|
||
</li>
|
||
<el-collapse accordion v-show="this.payList.pay4">
|
||
<el-collapse-item>
|
||
<template slot="title">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/jdBank.jpg" alt="" />
|
||
<span>{{ '京东银行卡' }} </span>
|
||
</div>
|
||
</template>
|
||
<div class="pad">
|
||
<div v-for="(item, index) in jdList" :key="index" class="pay_flax flex_bet"
|
||
@click.prevent="selPayRadio('jd' + index)">
|
||
<div class="flax_i">
|
||
{{ item.bankName }} ({{ item.bankNo }})
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="'jd' + index">{{ }}</el-radio>
|
||
</div>
|
||
<div class="pay_flax flax_i" @click="bindBank('jd')">
|
||
<img class="img1" src="@/assets/images/addto.png" alt="" />
|
||
<div>{{ '绑定银行卡' }}</div>
|
||
</div>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
<!-- <li class="flex_ac flex_bc"
|
||
v-show="this.payList.pay4">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/jdBank.jpg"
|
||
alt="" />
|
||
<span>{{ '京东银行卡' }}</span>
|
||
</div>
|
||
<div class="pad">
|
||
<div v-for="(item, index) in jdList"
|
||
:key="index"
|
||
class="pay_flax flex_bet"
|
||
@click.prevent="selPayRadio('jd' + index)">
|
||
<div class="flax_i">
|
||
{{ item.bankName }} ({{ item.bankNo }})
|
||
</div>
|
||
<el-radio v-model="whatPay"
|
||
:label="'jd' + index">{{
|
||
}}</el-radio>
|
||
</div>
|
||
<div class="pay_flax flax_i"
|
||
@click="bindBank(false)">
|
||
<img class="img1"
|
||
src="@/assets/images/addto.png"
|
||
alt="" />
|
||
<div>{{ '绑定银行卡' }}</div>
|
||
</div>
|
||
</div>
|
||
</li> -->
|
||
<li class="flex_ac" v-show="this.payList.pay5" @click.prevent="selPayRadio(7)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i2.png" alt="" />
|
||
<span>{{ '通联微信' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="7"><span></span></el-radio>
|
||
</li>
|
||
<li class="flex_ac" v-show="this.payList.pay6" @click.prevent="selPayRadio(8)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i3.png" alt="" />
|
||
<span>{{ '通联支付宝' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="8"><span></span></el-radio>
|
||
</li>
|
||
<!-- <li class="flex_ac flex_bc" v-show="this.payList.pay33">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/jdBank.jpg" alt="" />
|
||
<span>{{ '通联银行卡' }}</span>
|
||
</div>
|
||
<div class="pad">
|
||
<div
|
||
v-for="(item, index) in tlList"
|
||
:key="index"
|
||
class="pay_flax flex_bet"
|
||
@click.prevent="selPayRadio('tl' + index)"
|
||
>
|
||
<div class="flax_i">
|
||
{{ item.bankName }} ({{ item.bankNo }})
|
||
</div>
|
||
<el-radio
|
||
v-model="whatPay"
|
||
:label="'tl' + index"
|
||
>{{
|
||
}}</el-radio>
|
||
</div>
|
||
<div class="pay_flax flax_i" @click="bindBank('tl')">
|
||
<img
|
||
class="img1"
|
||
src="@/assets/images/addto.png"
|
||
alt=""
|
||
/>
|
||
<div>{{ '绑定银行卡' }}</div>
|
||
</div>
|
||
</div>
|
||
</li> -->
|
||
<el-collapse accordion v-show="this.payList.pay33">
|
||
<el-collapse-item>
|
||
<template slot="title">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/jdBank.jpg" alt="" />
|
||
<span>{{ '通联银行卡' }}</span>
|
||
</div>
|
||
</template>
|
||
<div class="pad">
|
||
<div v-for="(item, index) in tlList" :key="index" class="pay_flax flex_bet"
|
||
@click.prevent="selPayRadio('tl' + index)">
|
||
<div class="flax_i">
|
||
{{ item.bankName }} ({{ item.bankNo }})
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="'tl' + index">{{ }}</el-radio>
|
||
</div>
|
||
<div class="pay_flax flax_i" @click="bindBank('tl')">
|
||
<img class="img1" src="@/assets/images/addto.png" alt="" />
|
||
<div>{{ '绑定银行卡' }}</div>
|
||
</div>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
<li class="flex_ac" v-show="this.payList.pay73" @click.prevent="selPayRadio(73)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i2.png" alt="" />
|
||
<span>{{ '微信支付' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="73"><span></span></el-radio>
|
||
</li>
|
||
<li class="flex_ac" v-show="this.payList.pay74" @click.prevent="selPayRadio(74)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i3.png" alt="" />
|
||
<span>{{ '支付宝支付' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="74"><span></span></el-radio>
|
||
</li>
|
||
</div>
|
||
</el-collapse-item>
|
||
<div class="quan_r" v-if="ifcz">
|
||
<li class="flex_ac" v-show="this.payList.pay9" @click.prevent="selPayRadio(1)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i2.png" alt="" />
|
||
<span>{{ '微信支付' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="1"><span></span></el-radio>
|
||
</li>
|
||
<li class="flex_ac" v-show="this.payList.pay8" @click.prevent="selPayRadio(2)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i3.png" alt="" />
|
||
<span>{{ '支付宝' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="2"><span></span></el-radio>
|
||
</li>
|
||
<li class="flex_ac" v-show="this.payList.pay10" @click.prevent="selPayRadio(3)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i2.png" alt="" />
|
||
<span>{{ '杉德微信' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="3"><span></span></el-radio>
|
||
</li>
|
||
<!-- <li-->
|
||
<!-- class="flex_ac"-->
|
||
<!-- v-show="this.payList.pay11"-->
|
||
<!-- @click.prevent="selPayRadio(4)"-->
|
||
<!-- >-->
|
||
<!-- <div class="flex_ac_i">-->
|
||
<!-- <img src="@/assets/images/pay_i3.png" alt="" />-->
|
||
<!-- <span>{{ '杉德支付宝' }}</span>-->
|
||
<!-- </div>-->
|
||
<!-- <el-radio v-model="whatPay" :label="4"><span></span></el-radio>-->
|
||
<!-- </li>-->
|
||
<li class="flex_ac" v-show="this.payList.pay12" @click.prevent="selPayRadio(12)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i2.png" alt="" />
|
||
<span>{{ '宝付微信支付' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="12"><span></span></el-radio>
|
||
</li>
|
||
<!-- 汇付微信 -->
|
||
<li class="flex_ac" v-show="this.payList.pay13" @click.prevent="selPayRadio(13)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i2.png" alt="" />
|
||
<span>{{ '汇付微信支付' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="13"><span></span></el-radio>
|
||
</li>
|
||
<!-- {{ '汇付银行卡' }} -->
|
||
<!-- <li class="flex_ac"
|
||
v-show="this.payList.pay15"
|
||
@click="beforeScanPay('hfYhk')">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/jdBank.jpg"
|
||
alt="" />
|
||
<span>汇付银行卡支付</span>
|
||
</div>
|
||
<el-radio v-model="whatPay"
|
||
:label="15">{{ }}</el-radio>
|
||
</li> -->
|
||
<el-collapse accordion v-show="this.payList.pay15">
|
||
<el-collapse-item>
|
||
<template slot="title">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/jdBank.jpg" alt="" />
|
||
<span>{{ '汇付银行卡' }}</span>
|
||
</div>
|
||
</template>
|
||
<div class="pad">
|
||
<div v-for="(item, index) in hfList" :key="index" class="pay_flax flex_bet"
|
||
@click.prevent="selPayRadio('hf' + index)">
|
||
<div class="flax_i">
|
||
<div>
|
||
{{ item.bankName }} ({{ item.bankNo }})
|
||
</div>
|
||
<div class="fixBind" @click="fixBind(item)">解绑</div>
|
||
</div>
|
||
|
||
<el-radio v-model="whatPay" :label="'hf' + index">{{ }}</el-radio>
|
||
</div>
|
||
<div class="pay_flax flax_i" @click="bindBank('hf')">
|
||
<img class="img1" src="@/assets/images/addto.png" alt="" />
|
||
<div>{{ '绑定银行卡' }}</div>
|
||
</div>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
<li class="flex_ac" v-show="this.payList.pay0" @click.prevent="selPayRadio(5)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i2.png" alt="" />
|
||
<span>{{ '京东微信' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="5"><span></span></el-radio>
|
||
</li>
|
||
<li class="flex_ac" v-show="this.payList.pay1" @click.prevent="selPayRadio(6)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i3.png" alt="" />
|
||
<span>{{ '京东支付宝' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="6"><span></span></el-radio>
|
||
</li>
|
||
<el-collapse accordion v-show="this.payList.pay4">
|
||
<el-collapse-item>
|
||
<template slot="title">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/jdBank.jpg" alt="" />
|
||
<span>{{ '京东银行卡' }} </span>
|
||
</div>
|
||
</template>
|
||
<div class="pad">
|
||
<div v-for="(item, index) in jdList" :key="index" class="pay_flax flex_bet"
|
||
@click.prevent="selPayRadio('jd' + index)">
|
||
<div class="flax_i">
|
||
{{ item.bankName }} ({{ item.bankNo }})
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="'jd' + index">{{ }}</el-radio>
|
||
</div>
|
||
<div class="pay_flax flax_i" @click="bindBank('jd')">
|
||
<img class="img1" src="@/assets/images/addto.png" alt="" />
|
||
<div>{{ '绑定银行卡' }}</div>
|
||
</div>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
<!-- <li class="flex_ac flex_bc"
|
||
v-show="this.payList.pay4">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/jdBank.jpg"
|
||
alt="" />
|
||
<span>{{ '京东银行卡' }}</span>
|
||
</div>
|
||
<div class="pad">
|
||
<div v-for="(item, index) in jdList"
|
||
:key="index"
|
||
class="pay_flax flex_bet"
|
||
@click.prevent="selPayRadio('jd' + index)">
|
||
<div class="flax_i">
|
||
{{ item.bankName }} ({{ item.bankNo }})
|
||
</div>
|
||
<el-radio v-model="whatPay"
|
||
:label="'jd' + index">{{
|
||
}}</el-radio>
|
||
</div>
|
||
<div class="pay_flax flax_i"
|
||
@click="bindBank(false)">
|
||
<img class="img1"
|
||
src="@/assets/images/addto.png"
|
||
alt="" />
|
||
<div>{{ '绑定银行卡' }}</div>
|
||
</div>
|
||
</div>
|
||
</li> -->
|
||
<li class="flex_ac" v-show="this.payList.pay5" @click.prevent="selPayRadio(7)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i2.png" alt="" />
|
||
<span>{{ '通联微信' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="7"><span></span></el-radio>
|
||
</li>
|
||
<li class="flex_ac" v-show="this.payList.pay6" @click.prevent="selPayRadio(8)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i3.png" alt="" />
|
||
<span>{{ '通联支付宝' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="8"><span></span></el-radio>
|
||
</li>
|
||
<!-- <li class="flex_ac flex_bc" v-show="this.payList.pay33">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/qb.png" alt="" />
|
||
<span>{{ '通联银行卡' }}</span>
|
||
</div>
|
||
<div class="pad">
|
||
<div
|
||
v-for="(item, index) in tlList"
|
||
:key="index"
|
||
class="pay_flax flex_bet"
|
||
@click.prevent="selPayRadio('tl' + index)"
|
||
>
|
||
<div class="flax_i">
|
||
{{ item.bankName }} ({{ item.bankNo }})
|
||
</div>
|
||
<el-radio
|
||
v-model="whatPay"
|
||
:label="'tl' + index"
|
||
>{{
|
||
}}</el-radio>
|
||
</div>
|
||
<div class="pay_flax flax_i" @click="bindBank('tl')">
|
||
<img class="img1" src="@/assets/images/addto.png" alt="" />
|
||
<div>{{ '绑定银行卡' }}</div>
|
||
</div>
|
||
</div>
|
||
</li> -->
|
||
<el-collapse accordion v-show="this.payList.pay33">
|
||
<el-collapse-item>
|
||
<template slot="title">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/jdBank.jpg" alt="" />
|
||
<span>{{ '通联银行卡' }} </span>
|
||
</div>
|
||
</template>
|
||
<div class="pad">
|
||
<div v-for="(item, index) in tlList" :key="index" class="pay_flax flex_bet"
|
||
@click.prevent="selPayRadio('tl' + index)">
|
||
<div class="flax_i">
|
||
{{ item.bankName }} ({{ item.bankNo }})
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="'tl' + index">{{ }}</el-radio>
|
||
</div>
|
||
<div class="pay_flax flax_i" @click="bindBank('tl')">
|
||
<img class="img1" src="@/assets/images/addto.png" alt="" />
|
||
<div>{{ '绑定银行卡' }}</div>
|
||
</div>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
<li class="flex_ac" v-show="this.payList.pay73" @click.prevent="selPayRadio(73)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i2.png" alt="" />
|
||
<span>{{ '微信支付' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="73"><span></span></el-radio>
|
||
</li>
|
||
<li class="flex_ac" v-show="this.payList.pay74" @click.prevent="selPayRadio(74)">
|
||
<div class="flex_ac_i">
|
||
<img src="@/assets/images/pay_i3.png" alt="" />
|
||
<span>{{ '支付宝支付' }}</span>
|
||
</div>
|
||
<el-radio v-model="whatPay" :label="74"><span></span></el-radio>
|
||
</li>
|
||
</div>
|
||
</el-collapse>
|
||
</div>
|
||
<template v-if="!ifcz">
|
||
<div v-show="specialArea == 1 || specialArea == 24">
|
||
<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.placeParent }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '安置姓名' }}</div>
|
||
<div>{{ orderData.placeParentName }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '安置位置' }}</div>
|
||
<div>{{ orderData.placeDeptVal }}</div>
|
||
</div>
|
||
<div class="kuang_i" v-if="orderData.makerSpaceMemberCode">
|
||
<div>体验中心编号</div>
|
||
<div>{{ orderData.makerSpaceMemberCode }}</div>
|
||
</div>
|
||
<div class="kuang_i" v-if="orderData.makerSpaceMemberName">
|
||
<div>体验中心姓名</div>
|
||
<div>{{ orderData.makerSpaceMemberName }}</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.recAddress }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-show="specialArea == 2 || specialArea == 25|| specialArea == 27">
|
||
<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.recAddress }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-show="specialArea == 3 || specialArea == 26 || specialArea == 28">
|
||
<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.recAddress }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-show="specialArea == 7">
|
||
<div class="tit4">{{ '海粉会员信息' }}</div>
|
||
<!-- <div class="quan">
|
||
<div class="kuang_i">
|
||
<div>{{ '申请级别' }}</div>
|
||
<div>{{ orderData.pkGradeVal }}</div>
|
||
</div>
|
||
</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.placeParent }}</div>
|
||
</div>
|
||
<div class="kuang_i">
|
||
<div>{{ '安置姓名' }}</div>
|
||
<div>{{ orderData.placeParentName }}</div>
|
||
</div> -->
|
||
<!-- <div class="kuang_i">
|
||
<div>{{ '安置位置' }}</div>
|
||
<div>{{ orderData.placeDeptVal }}</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.recAddress }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-show="specialArea == 13">
|
||
<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.recAddress }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<div class="btn" @click="quickPay(ifcz)">{{ '立即支付' }}</div>
|
||
</div>
|
||
</el-dialog>
|
||
<PayAassword :isPw="isPw" :pwData="pwData" :isBank="isBank" :businessType="businessType"
|
||
@closePwPay="closePwPay"></PayAassword>
|
||
<BindBank :isAdd="isAdd" :jdTl="jdTl" @closeBind="closeBind"></BindBank>
|
||
<el-dialog :title="'微信支付'" :visible.sync="wxPopup" width="30%" :before-close="closewxPopup" center>
|
||
<div class="pay_code">
|
||
<div ref="qrCodeUrlWx" class="qrcode"></div>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog :title="'支付宝支付'" :visible.sync="wxPopup1" width="30%" :before-close="closewxPopup" center>
|
||
<div class="pay_code">
|
||
<div ref="qrCodeUrlWx" class="qrcode"></div>
|
||
</div>
|
||
</el-dialog>
|
||
<successDialog @successClose="successClose" ref="successDialog"></successDialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapGetters
|
||
} from 'vuex'
|
||
import * as api from '@/api/pay.js'
|
||
import * as act from '@/api/bonus.js'
|
||
import {
|
||
generate
|
||
} from '@/api/register.js'
|
||
import PayAassword from '@/components/PayAassword.vue'
|
||
import BindBank from '@/components/BindBank.vue'
|
||
import {
|
||
setTokenMi
|
||
} from '@/util/auth'
|
||
import QRCode from 'qrcodejs2'
|
||
import successDialog from '@/components/successDialog.vue'
|
||
|
||
var payStatus
|
||
export default {
|
||
components: {
|
||
PayAassword,
|
||
BindBank,
|
||
successDialog,
|
||
},
|
||
data() {
|
||
return {
|
||
zfhtml: '',
|
||
// 微信支付弹窗
|
||
wxPopup: false,
|
||
// 支付弹框
|
||
toShow: this.isPay,
|
||
// 支付密码弹框
|
||
isPw: false,
|
||
// 绑定银行卡弹框
|
||
isAdd: false,
|
||
// 京东or通联
|
||
jdTl: '',
|
||
isBank: '',
|
||
orderCode: '',
|
||
businessType: '',
|
||
specialArea: '',
|
||
whatPay: '',
|
||
activeNames: ['1'],
|
||
orderData: {},
|
||
payDetail: {},
|
||
// 钱包支付数据传递
|
||
pwData: {},
|
||
countDown: '',
|
||
clockTime: '',
|
||
jdList: [],
|
||
tlList: [],
|
||
hfList: [],
|
||
paytitle: '',
|
||
czJe: '',
|
||
cjCode: '',
|
||
payList: {},
|
||
sucPay: 0,
|
||
luckydrawData: {},
|
||
isShare: true,
|
||
pkCountry: '',
|
||
isWalate: false,
|
||
wxPopup1: false,
|
||
}
|
||
},
|
||
props: {
|
||
isPay: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
onlinePay: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
paramsPost: {},
|
||
ifbaodan: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
ifcz: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
},
|
||
computed: {
|
||
...mapGetters(['userInfo']),
|
||
},
|
||
watch: {
|
||
isPay(val) {
|
||
this.toShow = val
|
||
},
|
||
onlinePay(val) {
|
||
console.log(
|
||
'%c [ val ]-1162',
|
||
'font-size:13px; background:#28916f; color:#6cd5b3;',
|
||
val
|
||
)
|
||
},
|
||
paramsPost: {
|
||
handler(val) {
|
||
console.log(
|
||
'%c [ val ]-1166',
|
||
'font-size:13px; background:#6765ec; color:#aba9ff;',
|
||
val
|
||
)
|
||
this.pkCountry = parseInt(localStorage.getItem('pkCountry'))
|
||
if (val.orderType == 4) {
|
||
// console.log("🌈抽奖aaaaa", val);
|
||
this.orderCode = val.orderCode
|
||
this.luckydrawData = val.luckydrawData
|
||
// 抽奖支付处理（查询订单支付信息以及显示等）
|
||
this.businessType = 4 //抽奖
|
||
val.specialArea = this.specialArea = 4
|
||
this.getLuckdrawDetail()
|
||
this.pwData = val
|
||
} else {
|
||
this.orderCode = val.orderCode
|
||
this.pkCountry =
|
||
val.pkCountry || parseInt(localStorage.getItem('pkCountry'))
|
||
this.specialArea = val.specialArea
|
||
this.businessType = 1 //直销
|
||
// 获取订单信息
|
||
this.getOrderInfo()
|
||
// &&this.userInfo.registerShare != 0
|
||
if (this.userInfo.registerFans != 0) {
|
||
// 获取消费信息
|
||
this.getSpendInfo()
|
||
} else {
|
||
this.isShare = false
|
||
}
|
||
|
||
this.pwData = val
|
||
clearInterval(this.clockTime)
|
||
}
|
||
},
|
||
deep: true,
|
||
},
|
||
},
|
||
mounted() {
|
||
if (this.ifcz) {
|
||
this.paytitle = '充值'
|
||
} else {
|
||
this.paytitle = '待支付金额'
|
||
}
|
||
if (!this.ifcz & this.isShare & this.userInfo.memberCode != 'CN68880628') {
|
||
this.whatPay = 0;
|
||
}
|
||
// // 获取订单信息
|
||
// this.getOrderInfo()
|
||
// // 获取消费信息
|
||
// this.getSpendInfo()
|
||
// 获取银行卡
|
||
this.getBankList()
|
||
// 获取支付配置
|
||
this.getPayConfig()
|
||
},
|
||
methods: {
|
||
fixBind(item) {
|
||
// api.unBind({
|
||
// bindCode:item.bindCode
|
||
// })
|
||
this.$confirm('是否确定解绑该银行卡', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
})
|
||
.then(() => {
|
||
api
|
||
.unBind({
|
||
bindCode: item.bindCode,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '解绑成功!',
|
||
})
|
||
}
|
||
this.getBankList()
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '解绑失败',
|
||
})
|
||
})
|
||
})
|
||
.catch(() => {})
|
||
},
|
||
//查询充值抽奖次数
|
||
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
|
||
// const data = res.data;
|
||
// this.price = data.price;
|
||
// if (this.getUser.pkCountry == 1) {
|
||
// this.payDetail = {
|
||
// xjb: data.xjb,
|
||
// ykxjb: data.ykxjb,
|
||
// };
|
||
// } else {
|
||
// this.payDetail = {
|
||
// xfb: data.xfb,
|
||
// ykxfb: data.ykxfb,
|
||
// jjb: data.jjb,
|
||
// ykjjb: data.ykjjb,
|
||
// };
|
||
// }
|
||
this.downTime()
|
||
}
|
||
})
|
||
},
|
||
closewxPopup() {
|
||
this.wxPopup = false
|
||
this.wxPopup1 = false
|
||
this.$refs.qrCodeUrlWx.innerHTML = ''
|
||
// this.isPay = false
|
||
clearInterval(payStatus)
|
||
},
|
||
getPayConfig() {
|
||
api.payConfig().then((res) => {
|
||
this.payList = res.data
|
||
let str = false
|
||
for (let key in this.payList) {
|
||
if (this.payList[key] == true) {
|
||
str = true
|
||
}
|
||
}
|
||
this.isWalate = str
|
||
})
|
||
},
|
||
selPayRadio(val, e) {
|
||
if (e) {
|
||
e.stopPropagation()
|
||
}
|
||
this.whatPay = val
|
||
},
|
||
bindBank(val) {
|
||
this.isAdd = true
|
||
this.jdTl = val
|
||
},
|
||
getBankList() {
|
||
api.jdBankList().then((res) => {
|
||
this.jdList = res.data
|
||
})
|
||
api.tlBankList().then((res) => {
|
||
this.tlList = res.data
|
||
})
|
||
api.hfBankList().then((res) => {
|
||
this.hfList = res.data
|
||
})
|
||
},
|
||
quickPay(cz) {
|
||
if (this.whatPay == '' && this.whatPay !== 0) {
|
||
this.$message({
|
||
message: '请选择支付方式',
|
||
type: 'warning',
|
||
})
|
||
return
|
||
}
|
||
// 非银行卡
|
||
if (typeof this.whatPay == 'number') {
|
||
// 钱包支付
|
||
if (this.whatPay == 0) {
|
||
// 充值
|
||
if (!cz) {
|
||
//支付
|
||
// 幂等性
|
||
generate().then((res) => {
|
||
setTokenMi(res.msg)
|
||
})
|
||
this.isPw = true
|
||
} else {
|
||
if (!this.czJe || this.czJe < 0) {
|
||
this.$message({
|
||
message: '请输入正确的充值金额',
|
||
type: 'warning',
|
||
})
|
||
} else {
|
||
//充值
|
||
api
|
||
.preCharge({
|
||
rechargeAmount: this.czJe,
|
||
memberCode: this.cjCode,
|
||
})
|
||
.then((res) => {
|
||
this.paramsPost = res.data
|
||
this.isPw = true
|
||
})
|
||
}
|
||
}
|
||
// 宝付微信
|
||
} else if (this.whatPay == 12) {
|
||
if (!cz) {
|
||
this.scanPayBf()
|
||
} else {
|
||
api
|
||
.preCharge({
|
||
rechargeAmount: this.czJe,
|
||
memberCode: this.cjCode
|
||
})
|
||
.then((res) => {
|
||
this.orderCode = res.orderCode
|
||
this.businessType = 3
|
||
this.scanPayBf()
|
||
})
|
||
}
|
||
// 汇付微信
|
||
} else if (this.whatPay == 13) {
|
||
if (!cz) {
|
||
this.scanPayHf()
|
||
} else {
|
||
api
|
||
.preCharge({
|
||
rechargeAmount: this.czJe,
|
||
memberCode: this.cjCode
|
||
})
|
||
.then((res) => {
|
||
this.orderCode = res.orderCode
|
||
this.businessType = 3
|
||
this.scanPayHf()
|
||
})
|
||
}
|
||
} else if (this.whatPay == 73) {
|
||
if (!cz) {
|
||
this.scanPayWx()
|
||
} else {
|
||
api
|
||
.preCharge({
|
||
rechargeAmount: this.czJe,
|
||
memberCode: this.cjCode
|
||
})
|
||
.then((res) => {
|
||
this.orderCode = res.orderCode
|
||
this.businessType = 3
|
||
this.scanPayWx()
|
||
})
|
||
}
|
||
} else if (this.whatPay == 74) {
|
||
if (!cz) {
|
||
this.scanPayAl()
|
||
} else {
|
||
api
|
||
.preCharge({
|
||
rechargeAmount: this.czJe,
|
||
memberCode: this.cjCode
|
||
})
|
||
.then((res) => {
|
||
this.orderCode = res.orderCode
|
||
this.businessType = 3
|
||
this.scanPayAl()
|
||
})
|
||
}
|
||
}
|
||
} else {
|
||
// 京东银行卡支付
|
||
if (this.whatPay.slice(0, 2) == 'jd') {
|
||
let indexed = this.whatPay.slice(2, 4)
|
||
// 充值
|
||
if (!cz) {
|
||
let params = {
|
||
businessType: this.businessType, //订单类型
|
||
businessCode: this.orderCode,
|
||
payChannel: 4, //京东
|
||
payType: 3, //银行卡
|
||
bindCode: this.jdList[indexed].bindCode,
|
||
}
|
||
api.unifiedorder(params).then((response) => {
|
||
this.isBank = 'jd'
|
||
this.pwData = Object.assign({}, this.pwData, {
|
||
bindCode: this.jdList[indexed].bindCode,
|
||
orderCode: this.orderCode,
|
||
})
|
||
this.isPw = true
|
||
})
|
||
this.checkPayStatus(params)
|
||
} else {
|
||
api
|
||
.preCharge({
|
||
rechargeAmount: this.czJe,
|
||
memberCode: this.cjCode
|
||
})
|
||
.then((res) => {
|
||
let params = {
|
||
businessType: 3, //订单类型充值
|
||
businessCode: res.orderCode,
|
||
payChannel: 4, //京东
|
||
payType: 3, //银行卡
|
||
bindCode: this.jdList[indexed].bindCode,
|
||
memberCode: this.cjCode,
|
||
}
|
||
api.unifiedorder(params).then((response) => {
|
||
this.isBank = 'jd'
|
||
this.pwData = Object.assign({}, this.pwData, {
|
||
bindCode: this.jdList[indexed].bindCode,
|
||
orderCode: res.orderCode,
|
||
})
|
||
this.isPw = true
|
||
})
|
||
})
|
||
}
|
||
// 汇付银行卡支付
|
||
} else if (this.whatPay.slice(0, 2) == 'hf') {
|
||
let indexed = this.whatPay.slice(2, 4)
|
||
// 充值
|
||
if (!cz) {
|
||
let params = {
|
||
businessType: this.businessType, //订单类型
|
||
businessCode: this.orderCode,
|
||
payChannel: 6, //汇付
|
||
payType: 3, //银行卡
|
||
bindCode: this.hfList[indexed].bindCode,
|
||
}
|
||
api.unifiedorder(params).then((response) => {
|
||
this.isBank = 'hf'
|
||
this.pwData = Object.assign({}, this.pwData, {
|
||
bindCode: this.hfList[indexed].bindCode,
|
||
orderCode: this.orderCode,
|
||
})
|
||
this.isPw = true
|
||
})
|
||
this.checkPayStatus(params)
|
||
} else {
|
||
api
|
||
.preCharge({
|
||
rechargeAmount: this.czJe,
|
||
memberCode: this.cjCode
|
||
})
|
||
.then((res) => {
|
||
let params = {
|
||
businessType: 3, //订单类型充值
|
||
businessCode: res.orderCode,
|
||
payChannel: 6, //汇付
|
||
payType: 3, //银行卡
|
||
bindCode: this.hfList[indexed].bindCode,
|
||
memberCode: this.cjCode,
|
||
}
|
||
api.unifiedorder(params).then((response) => {
|
||
this.isBank = 'hf'
|
||
this.pwData = Object.assign({}, this.pwData, {
|
||
bindCode: this.hfList[indexed].bindCode,
|
||
orderCode: res.orderCode,
|
||
})
|
||
this.isPw = true
|
||
})
|
||
})
|
||
}
|
||
// 通联银行卡
|
||
} else if (this.whatPay.slice(0, 2) == 'tl') {
|
||
let indexed = this.whatPay.slice(2, 4)
|
||
// 充值
|
||
if (!cz) {
|
||
let params = {
|
||
businessType: this.businessType, //订单类型
|
||
businessCode: this.orderCode,
|
||
payChannel: 3, //汇付
|
||
payType: 3, //银行卡
|
||
bindCode: this.tlList[indexed].bindCode,
|
||
}
|
||
api.unifiedorder(params).then((response) => {
|
||
this.isBank = 'tl'
|
||
this.pwData = Object.assign({}, this.pwData, {
|
||
bindCode: this.tlList[indexed].bindCode,
|
||
orderCode: this.orderCode,
|
||
})
|
||
this.isPw = true
|
||
})
|
||
this.checkPayStatus(params)
|
||
} else {
|
||
api
|
||
.preCharge({
|
||
rechargeAmount: this.czJe,
|
||
memberCode: this.cjCode
|
||
})
|
||
.then((res) => {
|
||
let params = {
|
||
businessType: 3, //订单类型充值
|
||
businessCode: res.orderCode,
|
||
payChannel: 3, //汇付
|
||
payType: 3, //银行卡
|
||
bindCode: this.tlList[indexed].bindCode,
|
||
memberCode: this.cjCode,
|
||
}
|
||
api.unifiedorder(params).then((response) => {
|
||
this.isBank = 'tl'
|
||
this.pwData = Object.assign({}, this.pwData, {
|
||
bindCode: this.tlList[indexed].bindCode,
|
||
orderCode: res.orderCode,
|
||
})
|
||
this.isPw = true
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
},
|
||
// 宝付微信
|
||
// 支付渠道 payChannel（0=杉德，1=支付宝，2=微信，3=通联，4=京东，5=宝付，6=汇付）
|
||
scanPayBf() {
|
||
let params = {
|
||
businessType: this.businessType, //订单类型充值
|
||
businessCode: this.orderCode,
|
||
payChannel: 5, //宝付
|
||
payType: 2,
|
||
memberCode: this.cjCode,
|
||
}
|
||
api.unifiedorder(params).then((res) => {
|
||
this.wxPopup = true
|
||
this.$nextTick(() => {
|
||
new QRCode(
|
||
this.$refs.qrCodeUrlWx, {
|
||
width: 300,
|
||
height: 300,
|
||
text: res.data,
|
||
colorDark: '#000000',
|
||
colorLight: '#ffffff',
|
||
correctLevel: QRCode.CorrectLevel.Q,
|
||
textAlign: 'center',
|
||
},
|
||
1000
|
||
)
|
||
})
|
||
})
|
||
this.checkPayStatus(params)
|
||
},
|
||
// 微信支付
|
||
scanPayWx() {
|
||
let params = {
|
||
businessType: this.businessType, //订单类型充值
|
||
businessCode: this.orderCode,
|
||
payChannel: 7,
|
||
payType: 2,
|
||
memberCode: this.cjCode,
|
||
}
|
||
api.unifiedorder(params).then((res) => {
|
||
this.wxPopup = true
|
||
this.$nextTick(() => {
|
||
new QRCode(
|
||
this.$refs.qrCodeUrlWx, {
|
||
width: 300,
|
||
height: 300,
|
||
text: res.data,
|
||
colorDark: '#000000',
|
||
colorLight: '#ffffff',
|
||
correctLevel: QRCode.CorrectLevel.Q,
|
||
textAlign: 'center',
|
||
},
|
||
1000
|
||
)
|
||
})
|
||
})
|
||
this.checkPayStatus(params)
|
||
},
|
||
// 支付宝支付
|
||
scanPayAl() {
|
||
let params = {
|
||
businessType: this.businessType, //订单类型充值
|
||
businessCode: this.orderCode,
|
||
payChannel: 7,
|
||
payType: 1,
|
||
memberCode: this.cjCode,
|
||
}
|
||
api.unifiedorder(params).then((res) => {
|
||
this.wxPopup1 = true
|
||
this.$nextTick(() => {
|
||
new QRCode(
|
||
this.$refs.qrCodeUrlWx, {
|
||
width: 300,
|
||
height: 300,
|
||
text: res.data,
|
||
colorDark: '#000000',
|
||
colorLight: '#ffffff',
|
||
correctLevel: QRCode.CorrectLevel.Q,
|
||
textAlign: 'center',
|
||
},
|
||
1000
|
||
)
|
||
})
|
||
})
|
||
this.checkPayStatus(params)
|
||
},
|
||
// 汇付微信
|
||
scanPayHf() {
|
||
let params = {
|
||
businessType: this.businessType, //订单类型充值
|
||
businessCode: this.orderCode,
|
||
payChannel: 6, //汇付
|
||
payType: 2, //银行卡
|
||
memberCode: this.cjCode,
|
||
}
|
||
api.unifiedorder(params).then((res) => {
|
||
this.wxPopup = true
|
||
this.$nextTick(() => {
|
||
new QRCode(
|
||
this.$refs.qrCodeUrlWx, {
|
||
width: 300,
|
||
height: 300,
|
||
text: res.data,
|
||
colorDark: '#000000',
|
||
colorLight: '#ffffff',
|
||
correctLevel: QRCode.CorrectLevel.Q,
|
||
textAlign: 'center',
|
||
},
|
||
1000
|
||
)
|
||
})
|
||
})
|
||
this.checkPayStatus(params)
|
||
},
|
||
// 支付全关
|
||
successClose() {
|
||
this.closePwPay(1)
|
||
},
|
||
// 查询订单状态
|
||
checkPayStatus(data) {
|
||
// let payStatus
|
||
let that = this
|
||
// 定时器
|
||
payStatus = setInterval(() => {
|
||
if (that.sucPay == 1) {
|
||
// 清除定时器
|
||
clearInterval(payStatus)
|
||
if (
|
||
this.specialArea == 1 ||
|
||
this.specialArea == 7 ||
|
||
this.specialArea == 24
|
||
) {
|
||
api.registerInfo(this.orderCode).then((res) => {
|
||
this.$refs.successDialog.showSuccess(res.data)
|
||
})
|
||
} else {
|
||
this.$alert('', '支付成功', {
|
||
confirmButtonText: '确定',
|
||
callback: (action) => {
|
||
that.sucPay = 0
|
||
this.closewxPopup()
|
||
this.$emit('closePay', 1)
|
||
},
|
||
})
|
||
}
|
||
} else {
|
||
api.payStatus(data).then((res) => {
|
||
that.sucPay = res.data
|
||
})
|
||
}
|
||
}, 2000)
|
||
},
|
||
handleClose() {
|
||
this.$emit('closePay', 0)
|
||
},
|
||
closePwPay(index) {
|
||
if (index == 1) {
|
||
this.isPw = false
|
||
this.$emit('closePay', 1)
|
||
} else {
|
||
this.isPw = false
|
||
}
|
||
},
|
||
closeBind() {
|
||
this.isAdd = false
|
||
this.getBankList()
|
||
},
|
||
getOrderInfo() {
|
||
api
|
||
.orderInfo({
|
||
specialArea: this.specialArea,
|
||
orderCode: this.orderCode,
|
||
pkSettleCountry: this.pkCountry,
|
||
})
|
||
.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,
|
||
pkSettleCountry: this.pkCountry,
|
||
})
|
||
.then((res) => {
|
||
this.payDetail = res.data
|
||
})
|
||
},
|
||
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
|
||
},
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(payStatus)
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.thepayDialog ::v-deep .el-dialog__body {
|
||
padding: 0;
|
||
}
|
||
|
||
.contain {
|
||
::v-deep .el-collapse-item__header {
|
||
// border-bottom: 1px solid rgba(24,144,255,0.3020);
|
||
// border-radius: 8px;
|
||
border: 0;
|
||
}
|
||
|
||
::v-deep .el-collapse {
|
||
// border: 1px solid rgba(24,144,255,0.3020);
|
||
border: 0; // border-radius: 8px;
|
||
}
|
||
|
||
::v-deep .el-collapse-item__wrap {
|
||
border: 0;
|
||
}
|
||
}
|
||
|
||
::v-deep .czinputbox .el-input__inner {
|
||
height: 65px !important;
|
||
margin-top: 10px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.diaBox {
|
||
// height: 70vh;
|
||
overflow-y: auto;
|
||
padding: 0 20px;
|
||
max-height: 700px;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 0;
|
||
}
|
||
}
|
||
|
||
.tit1 {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #e02b26;
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.tit2 {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.tit3 {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #e02b26;
|
||
margin: 0 5px;
|
||
}
|
||
|
||
.tit4 {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.quan {
|
||
overflow: hidden;
|
||
border-radius: 10px;
|
||
box-shadow: 0px 2px 20px 0px #efefef;
|
||
padding: 15px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.pf {
|
||
display: flex;
|
||
width: 100%;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.pf_l {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
}
|
||
|
||
img {
|
||
width: 24px;
|
||
height: 21px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
.quan_i {
|
||
padding: 0 5px;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.quan_r {
|
||
padding: 0 5px;
|
||
}
|
||
|
||
.kuang_i {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-bottom: 15px;
|
||
}
|
||
|
||
.lan {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-radius: 8px;
|
||
font-size: 18px;
|
||
color: #666;
|
||
}
|
||
|
||
.tTit {
|
||
font-size: 18px;
|
||
color: #333;
|
||
}
|
||
|
||
.btn {
|
||
position: sticky;
|
||
bottom: 0px;
|
||
width: 209px;
|
||
height: 48px;
|
||
line-height: 48px;
|
||
background: #d61820;
|
||
border-radius: 40px 40px 40px 40px;
|
||
text-align: center;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
margin: 25px auto;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.flex_ac {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||
padding: 15px 0;
|
||
}
|
||
|
||
.flex_ac_i {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #333;
|
||
font-weight: 400;
|
||
|
||
img {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 20px;
|
||
}
|
||
}
|
||
|
||
.flex_bc {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.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: 36px;
|
||
display: flex;
|
||
}
|
||
|
||
.flex_bet {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.img1 {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.pay_code {
|
||
text-align: center;
|
||
|
||
.qrcodeWx {
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
|
||
.qrcode {
|
||
display: inline-block;
|
||
|
||
img {
|
||
width: 132px;
|
||
height: 132px;
|
||
background-color: #fff; //设置白色背景色
|
||
padding: 6px; // 利用padding的特性，挤出白边
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
.fixBind {
|
||
margin-left: 20px;
|
||
color: #d61820;
|
||
font-size: 12px;
|
||
}
|
||
</style> |