427 lines
11 KiB
Vue
427 lines
11 KiB
Vue
<template>
|
||
<view class="pay-type-list">
|
||
|
||
<view class="type-item" v-for="item in payments" :key="item.code" @click="toPayHandler(item.code)"
|
||
v-if="!(type == 2 && item.code == 'balancepay')">
|
||
<text v-if=" item.code == 'wechatpay'" class="icon iconfont" style="color: #1fb922;"></text>
|
||
<text v-if=" item.code == 'alipay'" class="icon iconfont" style="color: #1aa1e6; font-size: 60rpx;"></text>
|
||
<text v-if=" item.code == 'offline'" class="icon iconfont" style="color: #1fb922;"></text>
|
||
<text v-if=" item.code == 'balancepay'" class="icon iconfont" style="color: #de421b; font-size: 60rpx;"></text>
|
||
<text v-if=" item.code == 'balanceintegration'" class="icon iconfont" style="color: #21ac82; font-size: 54rpx;"></text>
|
||
<text v-if=" item.code == 'balancejingping'" class="icon iconfont" style="color: #de421b; font-size: 54rpx;"></text>
|
||
<text v-if=" item.code == 'applepay'" class="icon iconfont" style="color: #000000;"></text>
|
||
<view class="con">
|
||
<text class="tit">{{ item.name }}</text>
|
||
<text>{{ item.memo }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!--<view class='cell-group payment-method'>
|
||
<view class='cell-item add-title-item' v-for="item in payments" :key="item.code" @click="toPayHandler(item.code)"
|
||
v-if="!(type == 2 && item.code == 'balancepay')">
|
||
<view class='cell-item-hd'>
|
||
<image class='cell-hd-icon' :src='item.icon'></image>
|
||
</view>
|
||
<view class='cell-item-bd'>
|
||
<view class="cell-bd-view">
|
||
<text class="cell-bd-text">{{ item.name }}</text>
|
||
</view>
|
||
<view class="cell-bd-view">
|
||
<text class="cell-bd-text address">{{ item.memo }}</text>
|
||
</view>
|
||
</view>
|
||
<view class='cell-item-ft'>
|
||
<image class='cell-ft-next icon' src='../../../static/image/right.png'></image>
|
||
</view>
|
||
</view>
|
||
</view>-->
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
isWeiXinBrowser
|
||
} from '@/common/utils/index.js'
|
||
import url from '@/common/http/url.js';
|
||
export default {
|
||
props: {
|
||
// 如果是商品订单此参数必须
|
||
orderId: {
|
||
type: String,
|
||
default () {
|
||
return ''
|
||
}
|
||
},
|
||
// 如果是充值订单此参数必须
|
||
recharge: {
|
||
type: Number,
|
||
default () {
|
||
return 0
|
||
}
|
||
},
|
||
// 用户id
|
||
uid: {
|
||
type: Number,
|
||
default () {
|
||
return 0
|
||
}
|
||
},
|
||
// 订单类型
|
||
type: {
|
||
type: Number,
|
||
default () {
|
||
return 1
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
payments: [],
|
||
openid: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getPayments()
|
||
},
|
||
methods: {
|
||
// 获取可用支付方式列表
|
||
async getPayments() {
|
||
let params = {};
|
||
let res = await this.$http('get',url.order.paymentlist,params);
|
||
this.orderInfo = res.data
|
||
this.payments = this.formatPayments(this.orderInfo)
|
||
},
|
||
// 支付方式处理
|
||
formatPayments(payments) {
|
||
// h5支付并且是在微信浏览器内 过滤支付宝支付
|
||
if (isWeiXinBrowser()) {
|
||
payments = payments.filter(item => item.code !== 'alipay')
|
||
}
|
||
|
||
// 如果是充值订单 过滤余额支付 过滤非线上支付方式
|
||
if (this.type === 2) {
|
||
payments = payments.filter(
|
||
item => item.code !== 'balancepay' || item.is_online === 1
|
||
)
|
||
}
|
||
|
||
// 设置logo图片
|
||
payments.forEach(item => {
|
||
this.$set(item, 'icon', '/static/image/' + item.code + '.png')
|
||
})
|
||
console.log(payments)
|
||
return payments
|
||
},
|
||
checkWXJSBridge(data) {
|
||
let that = this
|
||
let interval = setInterval(() => {
|
||
if (typeof window.WeixinJSBridge != 'undefined') {
|
||
clearTimeout(interval)
|
||
that.onBridgeReady(data)
|
||
}
|
||
}, 200)
|
||
},
|
||
onBridgeReady(data) {
|
||
var _this = this
|
||
window.WeixinJSBridge.invoke(
|
||
'getBrandWCPayRequest', {
|
||
appId: data.appid, // 公众号名称，由商户传入
|
||
timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数
|
||
nonceStr: data.nonceStr, // 随机串
|
||
package: data.package,
|
||
signType: data.signType, // 微信签名方式：
|
||
paySign: data.paySign // 微信签名
|
||
},
|
||
function(res) {
|
||
if (res.err_msg === 'get_brand_wcpay_request:ok') {
|
||
_this.$msg('支付成功')
|
||
} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
|
||
_this.$msg('取消支付')
|
||
} else {
|
||
_this.$msg('支付失败')
|
||
}
|
||
setTimeout(() => {
|
||
uni.redirectTo({
|
||
url: '/pages/order/result?id=' + data.payment_id
|
||
})
|
||
}, 1000)
|
||
}
|
||
)
|
||
},
|
||
// 用户点击支付方式处理
|
||
async toPayHandler(code) {
|
||
let params = {'orderId':this.orderId};
|
||
let data = {
|
||
payment_code: code,
|
||
payment_type: this.type
|
||
}
|
||
data['orderId'] = (this.type == 1 || this.type == 5 || this.type == 6) ? this.orderId : this.uid
|
||
switch (code) {
|
||
case 'alipay':
|
||
/**
|
||
* 支付宝支付需要模拟GET提交数据
|
||
*/
|
||
if (this.type == 1 && this.orderId) {
|
||
data['params'] = {
|
||
trade_type: 'WAP',
|
||
return_url: baseUrl +
|
||
'wap/#/pages/order/result'
|
||
}
|
||
} else if (this.type == 2 && this.recharge) {
|
||
data['params'] = {
|
||
money: this.recharge,
|
||
return_url: baseUrl + 'wap/#/pages/order/result'
|
||
}
|
||
} else if ((this.type == 5 || this.type == 6) && this.recharge) {
|
||
data['params'] = {
|
||
orderId: this.orderId
|
||
}
|
||
}
|
||
|
||
let res = await this.$http('get',url.order.aliWapPay,params);
|
||
console.log('============================')
|
||
console.log(res);
|
||
console.log('success:' + JSON.stringify(res));
|
||
if (res) {
|
||
|
||
document.body.appendChild(JSON.stringify(res.data))
|
||
let testForm = document.getElementsByName('punchout_form')
|
||
// 模拟GET提交
|
||
/*
|
||
const url = res.data.url
|
||
const data = res.data.data
|
||
let tempForm = document.createElement('form')
|
||
tempForm.id = 'aliPay'
|
||
tempForm.methods = 'post'
|
||
tempForm.action = url
|
||
tempForm.target = '_self'
|
||
let input = []
|
||
for (let k in data) {
|
||
input[k] = document.createElement('input')
|
||
input[k].type = 'hidden'
|
||
input[k].name = k
|
||
input[k].value = data[k]
|
||
tempForm.appendChild(input[k])
|
||
}
|
||
tempForm.addEventListener('submit', function() {}, false)
|
||
document.body.appendChild(tempForm)*/
|
||
testForm.dispatchEvent(new Event('submit'))
|
||
console.log(tempForm);
|
||
testForm.submit()
|
||
document.body.removeChild(testForm)
|
||
|
||
}
|
||
break
|
||
case 'wechatpay':
|
||
|
||
/**
|
||
* 微信支付有两种
|
||
* 判断是否在微信浏览器
|
||
* 微信jsapi支付
|
||
*/
|
||
let isWeiXin = isWeiXinBrowser()
|
||
|
||
if (isWeiXin) {
|
||
var transitUrl =
|
||
baseUrl +
|
||
'wap/#/pages/order/paymet/auth?order_id=' +
|
||
this.orderId +
|
||
'&type=' +
|
||
this.type;
|
||
|
||
if (this.type == 1 && this.orderId) {
|
||
// 微信jsapi支付
|
||
// if (this.openid) {
|
||
// data['params'] = {
|
||
// trade_type: 'JSAPI_OFFICIAL',
|
||
// openid: this.openid
|
||
// }
|
||
// } else {
|
||
// data['params'] = {
|
||
// trade_type: 'JSAPI_OFFICIAL',
|
||
// url: window.location.href
|
||
// }
|
||
// }
|
||
data['params'] = {
|
||
trade_type: 'JSAPI_OFFICIAL',
|
||
url: transitUrl
|
||
}
|
||
} else if (this.type == 2 && this.recharge) {
|
||
data['params'] = {
|
||
trade_type: 'JSAPI_OFFICIAL',
|
||
money: this.recharge,
|
||
url: transitUrl + '&uid=' + this.uid + '&money=' + this.recharge
|
||
}
|
||
// if (this.openid) {
|
||
// data['params'] = {
|
||
// money: this.recharge,
|
||
// openid: this.openid
|
||
// }
|
||
// } else {
|
||
// data['params'] = {
|
||
// money: this.recharge,
|
||
// url: window.location.href
|
||
// }
|
||
// }
|
||
} else if ((this.type == 5 || this.type == 6) && this.recharge) {
|
||
data['params'] = {
|
||
orderId: this.orderId
|
||
}
|
||
}
|
||
let res = await this.$http('get',url.order.webPay,params);
|
||
console.log(res);
|
||
if (res) {
|
||
const data = res.data.data
|
||
this.checkWXJSBridge(data)
|
||
}else{
|
||
window.location.href = res.data.msg
|
||
return;
|
||
}
|
||
} else {
|
||
// 微信 H5支付
|
||
if (this.type == 1 && this.orderId) {
|
||
data['params'] = {
|
||
trade_type: 'MWEB',
|
||
return_url: baseUrl +
|
||
'wap/#/pages/order/payment/result'
|
||
}
|
||
} else if (this.type == 2 && this.recharge) {
|
||
data['params'] = {
|
||
trade_type: 'MWEB',
|
||
money: this.recharge,
|
||
return_url: baseUrl + 'wap/#/pages/order/payment/result'
|
||
}
|
||
} else if ((this.type == 5 || this.type == 6) && this.recharge) {
|
||
data['params'] = {
|
||
orderId: this.orderId
|
||
}
|
||
}
|
||
console.log(data);
|
||
// 微信h5支付
|
||
let res = await this.$http('get',url.order.wapPay,params);
|
||
console.log(res);
|
||
if (res) {
|
||
location.href = res.data
|
||
} else {
|
||
this.$msg(res.data)
|
||
}
|
||
}
|
||
break
|
||
case 'balancepay':
|
||
/**
|
||
* 用户余额支付
|
||
*
|
||
*/
|
||
if ((this.type == 5 || this.type == 6) && this.recharge) {
|
||
data['params'] = {
|
||
orderId: this.orderId
|
||
}
|
||
}
|
||
let params1 = {'orderId':this.orderId};
|
||
let res1 = await this.$http('post',url.order.balancePay,params1);
|
||
let data1 = res1.data
|
||
console.log(data1)
|
||
if (data1) {
|
||
uni.redirectTo({
|
||
url: '/pages/order/payment/result?order=' + JSON.stringify(data1)
|
||
})
|
||
}else {
|
||
this.$msg('余额支付失败');
|
||
}
|
||
|
||
break
|
||
case 'offline':
|
||
/**
|
||
* 线下支付
|
||
*/
|
||
this.$showModal('请联系客服进行','线下支付说明')
|
||
break
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang='scss'>
|
||
.app {
|
||
width: 100%;
|
||
}
|
||
|
||
.price-box {
|
||
background-color: #fff;
|
||
height: 265upx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 28upx;
|
||
color: #909399;
|
||
|
||
.price{
|
||
font-size: 50upx;
|
||
color: #303133;
|
||
margin-top: 12upx;
|
||
&:before{
|
||
content: '￥';
|
||
font-size: 40upx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pay-type-list {
|
||
margin-top: 20upx;
|
||
background-color: #fff;
|
||
padding-left: 60upx;
|
||
|
||
.type-item{
|
||
height: 120upx;
|
||
padding: 20upx 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-right: 60upx;
|
||
font-size: 30upx;
|
||
position:relative;
|
||
}
|
||
|
||
.icon{
|
||
width: 100upx;
|
||
font-size: 52upx;
|
||
}
|
||
.icon-erjiye-yucunkuan {
|
||
color: #fe8e2e;
|
||
}
|
||
.icon-weixinzhifu {
|
||
color: #36cb59;
|
||
}
|
||
.icon-alipay {
|
||
color: #01aaef;
|
||
}
|
||
.tit{
|
||
font-size: 32rpx;
|
||
color: #303133;
|
||
margin-bottom: 4upx;
|
||
}
|
||
.con{
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
.mix-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 630upx;
|
||
height: 80upx;
|
||
margin: 80upx auto 30upx;
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
background-color: #F8D247;
|
||
border-radius: 10upx;
|
||
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
|
||
}
|
||
|
||
</style>
|