3
0
Fork 0
web-store-retail-h5/pages/pay/index.vue

1803 lines
53 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
* @Descripttion:
* @version:
* @Author: kBank
* @Date: 2022-11-21 15:11:22
-->
<template>
<view class="content">
<view class="index_header">
</view>
<view class="contxt">
<!-- 充值 -->
<template v-if="ifcz">
<div class="tit4">{{'充值金额'}}</div>
<u-input class="czinputbox"
v-model="czJe"></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="!ifcz&&!isShare&userInfo.memberCode!='CN68880628'">
<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 && false">
<view slot="title"
class="pf"> <img src="@/static/images/under_pay.png"
alt="" />
<view>{{'在线支付'}}</view>
</view>
<view class="flex_ac"
v-show="this.payList.pay11">
<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="11">
</u-radio>
</u-radio-group>
</view>
<view class="flex_ac"
v-show="this.payList.pay12">
<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="12">
</u-radio>
</u-radio-group>
</view>
<view class="flex_ac"
v-show="this.payList.pay13">
<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="13">
</u-radio>
</u-radio-group>
</view>
<!-- 微信支付 -->
<view class="flex_ac"
v-show="this.payList.pay73">
<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="73">
</u-radio>
</u-radio-group>
</view>
<!-- 支付宝支付 -->
<view class="flex_ac"
v-show="this.payList.pay74">
<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="74">
</u-radio>
</u-radio-group>
</view>
<view class="flex_ac1"
v-show="this.payList.pay15">
<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="'hf' + 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="this.payList.pay32">
<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="32">
</u-radio>
</u-radio-group>
</view>
<view class="flex_ac1"
v-show="this.payList.pay4">
<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="'jd' + 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_ac1"
v-show="this.payList.pay33">
<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="'tl' + 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="!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>
</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, #fb3024, #fb3024 )">{{'立即支付'}} </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="支付中"
@tap="quickPay(ifcz)"
color="linear-gradient(to right, #fb3024, #fb3024 )">{{'立即支付'}}
</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="wxPopup1"
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"></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'
var payStatus
export default {
components: {
successDialog,
},
data() {
return {
payList: {},
isNoBind: false,
isLoading: false,
clockTime: '',
specialArea: '',
orderCode: '',
orderData: {
orderAmount: '',
},
countDown: '',
payDetail: {
payAccount1: 1,
},
paramsPost: '',
isShare: false, //分享用户第一次爆单
userInfo: '',
activeNames: 1,
whatPay: '',
hfList: [],
jdList: [],
tlList: [],
businessType: '',
isBank: '',
isPw: false,
codeValue: '',
bindCode: '',
showSucce: false, //
sucPay: 0,
content: '支付成功',
wxPopup: false,
wxPopup1: false,
luckydrawData: {},
ifcz: false,
czJe: '',
qrcodeimg: '',
onlinePay: true,
unBindCode: '',
}
},
onLoad(options) {
this.paramsPost = JSON.parse(options.paramsPost)
console.log(
'%c [ this.paramsPost ]-734',
'font-size:13px; background:#777244; color:#bbb688;',
this.paramsPost
)
this.pkCountry = uni.getStorageSync('pkCountry')
if (this.paramsPost.ifcz) {
this.ifcz = this.paramsPost.ifcz
this.businessType = 3
uni.setNavigationBarTitle({
title: '充值',
})
} else {
uni.setNavigationBarTitle({
title: '订单支付',
})
this.ifcz = 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()
}
}
}
// 获取支付配置
this.getPayConfig()
clearInterval(this.clockTime)
},
onShow() {
// 获取银行卡
// this.getBankList()
},
methods: {
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.wxPopup1 = 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 == 'hf') {
url = api.payConfirmHf
} else if (this.isBank == 'jd') {
url = api.payConfirmJd
} else if (this.isBank == 'tl') {
url = api.payConfirmTl
}
obj = {
orderCode: this.orderCode,
bindCode: this.bindCode,
specialArea: this.specialArea,
smsCode: this.codeValue,
pkSettleCountry: this.pkCountry,
}
} else {
// 钱包支付
if (
this.specialArea == 1 ||
this.specialArea == 7 ||
this.specialArea == 24
) {
url = api.payRegOrder
} else {
url = api.payOthOrder
}
obj = {
orderCode: this.orderCode,
specialArea: this.specialArea,
payPwd: this.codeValue,
pkSettleCountry: this.pkCountry,
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,
}
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 (
this.specialArea == 1 ||
this.specialArea == 7 ||
this.specialArea == 24
) {
if (this.isBank) {
this.isPw = false
} else {
this.$refs.successDialog.showSuccess(res.data)
}
// api.registerInfo(this.orderCode).then(res=>{
// this.$refs.successDialog.showSuccess(res.data)
// })
} else {
if (this.ifcz) {
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',
})
}
}
}
})
}
},
quickPay(cz) {
if (cz) {
if (!this.czJe || this.czJe <= 0) {
uni.showToast({
title: '请输入正确的充值金额',
})
return
}
}
if (this.activeNames == 2) {
// 非银行卡
if (typeof this.whatPay == 'number') {
if (cz) {
//充值
api
.preCharge({
rechargeAmount: this.czJe,
})
.then((res) => {
this.paramsPost = res.data
this.orderCode = res.orderCode
if (this.whatPay == 11) {
this.scanPayBfWxJump(5)
} else if (this.whatPay == 12) {
this.scanPayBfWx(5)
} else if (this.whatPay == 13) {
this.scanPayBfWx(6)
} else if (this.whatPay == 32) {
this.scanPayTlWxJump(3)
} else if (this.whatPay == 73) {
this.scanPayWx(7)
} else if (this.whatPay == 74) {
this.scanPayAl(7)
}
})
} else {
if (this.whatPay == 11) {
this.scanPayBfWxJump(5)
} else if (this.whatPay == 12) {
this.scanPayBfWx(5)
} else if (this.whatPay == 13) {
this.scanPayBfWx(6)
} else if (this.whatPay == 32) {
this.scanPayTlWxJump(3)
} else if (this.whatPay == 73) {
this.scanPayWx(7)
} else if (this.whatPay == 74) {
this.scanPayAl(7)
}
}
} 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.bindCode = this.hfList[indexed].bindCode
this.isPw = true
})
this.checkPayStatus(params)
} else {
api
.preCharge({
rechargeAmount: this.czJe,
})
.then((res) => {
let params = {
businessType: 3, //订单类型充值
businessCode: res.orderCode,
payChannel: 6, //汇付
payType: 3, //银行卡
bindCode: this.hfList[indexed].bindCode,
}
api.unifiedorder(params).then((response) => {
this.isBank = 'hf'
this.bindCode = this.hfList[indexed].bindCode
this.orderCode = res.orderCode
this.isPw = true
})
})
this.checkPayStatus(params)
}
} 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.bindCode = this.jdList[indexed].bindCode
this.isPw = true
})
this.checkPayStatus(params)
} else {
api
.preCharge({
rechargeAmount: this.czJe,
})
.then((res) => {
let params = {
businessType: 3, //订单类型充值
businessCode: res.orderCode,
payChannel: 4, //京东
payType: 3, //银行卡
bindCode: this.jdList[indexed].bindCode,
}
api.unifiedorder(params).then((response) => {
this.isBank = 'jd'
this.bindCode = this.jdList[indexed].bindCode
this.orderCode = res.orderCode
this.isPw = true
})
})
this.checkPayStatus(params)
}
} 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.bindCode = this.tlList[indexed].bindCode
this.isPw = true
})
this.checkPayStatus(params)
} else {
api
.preCharge({
rechargeAmount: this.czJe,
})
.then((res) => {
let params = {
businessType: 3, //订单类型充值
businessCode: res.orderCode,
payChannel: 3, //通联
payType: 3, //银行卡
bindCode: this.tlList[indexed].bindCode,
}
api.unifiedorder(params).then((response) => {
this.isBank = 'tl'
this.bindCode = this.tlList[indexed].bindCode
this.orderCode = res.orderCode
this.isPw = true
})
})
this.checkPayStatus(params)
}
}
}
} else {
if (cz) {
//充值
api
.preCharge({
rechargeAmount: this.czJe,
})
.then((res) => {
this.paramsPost = res.data
this.orderCode = res.orderCode
if (this.whatPay == 12) {
this.scanPayBfWx(5)
} else if (this.whatPay == 13) {
this.scanPayBfWx(6)
}
})
this.isBank = ''
this.isPw = true
} else {
api.generate().then((res) => {
uni.setStorageSync('mToken', res.msg)
})
this.isBank = ''
this.isPw = true
}
}
},
scanPayBfWx(val) {
let params
if (this.ifcz) {
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.ifcz) {
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)
},
// 支付宝支付
scanPayAl(val) {
let params
if (this.ifcz) {
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.wxPopup1 = 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.ifcz) {
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.ifcz) {
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 {
this.activeNames = 1
}
},
getPayConfig() {
api.payConfig().then((res) => {
this.payList = 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,
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
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)
if (
this.specialArea == 1 ||
this.specialArea == 7 ||
this.specialArea == 24
) {
api.registerInfo(this.orderCode).then((res) => {
this.$refs.successDialog.showSuccess(res.data)
})
} else {
this.wxPopup = false
this.wxPopup1 = false
this.showSucce = true
}
} 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 {
margin-top: -220rpx;
padding: 0 26rpx;
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;
}
</style>