290 lines
7.8 KiB
Vue
290 lines
7.8 KiB
Vue
<template>
|
||
<view>
|
||
<view class="payment" :class="pay_close ? 'on' : ''">
|
||
<view class="title acea-row row-center-wrapper">
|
||
选择付款方式<text class="iconfont icon-guanbi" @click='close'></text>
|
||
</view>
|
||
<view class="item acea-row row-between-wrapper" @click='goPay(item.value)' v-for="(item,index) in payMode"
|
||
:key="index">
|
||
<view class="left acea-row row-between-wrapper">
|
||
<view class="iconfont" :class="item.icon"></view>
|
||
<view class="text">
|
||
<view class="name">{{item.name}}</view>
|
||
<view class="info" v-if="item.number">
|
||
{{item.title}} <span class="money">￥{{ item.number }}</span>
|
||
</view>
|
||
<view class="info" v-else>{{item.title}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="iconfont icon-xiangyou"></view>
|
||
</view>
|
||
</view>
|
||
<view class="mask" @click='close' v-if="pay_close"></view>
|
||
<!-- 支付宝支付界面 -->
|
||
<u-modal :show="alipayShow" title="支付宝支付" @confirm="handleConfirm">
|
||
<button style="display:none;" class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"></button>
|
||
<view class="slot-content">
|
||
<rich-text :nodes="alipayForm"></rich-text>
|
||
</view>
|
||
</u-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
orderPay,
|
||
wechatOrderPay,
|
||
wechatQueryPayResult
|
||
} from '@/api/order.js';
|
||
import {
|
||
memberTopUp
|
||
} from '@/api/member.js';
|
||
import {
|
||
mapGetters
|
||
} from "vuex";
|
||
export default {
|
||
props: {
|
||
payMode: {
|
||
type: Array,
|
||
default: function() {
|
||
return [];
|
||
}
|
||
},
|
||
pay_close: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
payInfo: {
|
||
type: Object,
|
||
deafult: () => {
|
||
return {
|
||
orderInfos: []
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
alipayShow: false,
|
||
alipayForm: `链接已复制，请到外部浏览器完成支付`
|
||
};
|
||
},
|
||
computed: mapGetters(['systemPlatform', 'openId']),
|
||
methods: {
|
||
handleConfirm() {
|
||
this.alipayShow = false
|
||
window.location.reload()
|
||
},
|
||
// 复制操作
|
||
_copy(context) {
|
||
// 创建输入框元素
|
||
let oInput = document.createElement('input');
|
||
// 将想要复制的值
|
||
oInput.value = context;
|
||
// 页面底部追加输入框
|
||
document.body.appendChild(oInput);
|
||
// 选中输入框
|
||
oInput.select();
|
||
// 执行浏览器复制命令
|
||
document.execCommand('Copy');
|
||
// 弹出复制成功信息
|
||
this.$util.Tips({
|
||
title: '复制链接成功'
|
||
})
|
||
this.alipayShow = true
|
||
// 复制后移除输入框
|
||
oInput.remove();
|
||
},
|
||
close: function() {
|
||
this.$emit('onChangeFun', {
|
||
action: 'payClose'
|
||
});
|
||
},
|
||
// 微信支付JSAPI调起
|
||
wxPayJSAPI(payData) {
|
||
function onBridgeReady() {
|
||
WeixinJSBridge.invoke('getBrandWCPayRequest', {
|
||
"appId": payData.appId, //公众号ID，由商户传入
|
||
"timeStamp": payData.timeStamp, //时间戳，自1970年以来的秒数
|
||
"nonceStr": payData.nonceStr, //随机串
|
||
"package": payData.packageValue,
|
||
"signType": payData.signType, //微信签名方式：
|
||
"paySign": payData.paySign //微信签名
|
||
},
|
||
function(res) {
|
||
if (res.err_msg == "get_brand_wcpay_request:ok") {
|
||
window.location.reload()
|
||
// uni.switchTab({
|
||
// url: '/pages/member_application/index'
|
||
// })
|
||
}
|
||
})
|
||
}
|
||
if (typeof WeixinJSBridge == "undefined") {
|
||
if (document.addEventListener) {
|
||
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
|
||
} else if (document.attachEvent) {
|
||
document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
|
||
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
|
||
}
|
||
} else {
|
||
onBridgeReady()
|
||
}
|
||
},
|
||
goPay: function(paytype) {
|
||
let that = this;
|
||
if (that.payInfo.orderInfos.length === 0) return that.$util.Tips({
|
||
title: '请选择要支付的订单'
|
||
});
|
||
uni.showLoading({
|
||
title: '支付中',
|
||
mask: true
|
||
});
|
||
if (paytype === 'WXPAY' && !that.openId) {
|
||
return that.$util.Tips({
|
||
title: '请在微信客户端进行支付操作'
|
||
});
|
||
} else {
|
||
that.payInfo.openid = that.openId
|
||
}
|
||
memberTopUp({
|
||
...that.payInfo,
|
||
payType: paytype
|
||
}).then(res => {
|
||
let jsConfig = res.data
|
||
switch (paytype) {
|
||
case 'WXPAY':
|
||
uni.hideLoading();
|
||
that.wxPayJSAPI(jsConfig.jsapiResult)
|
||
break;
|
||
case 'ALIPAY':
|
||
uni.hideLoading();
|
||
this._copy(jsConfig.body)
|
||
this.alipayShow = true
|
||
// const div = document.createElement('div')
|
||
// /* 下面的data.content就是后台返回接收到的数据 */
|
||
// div.innerHTML = jsConfig.body
|
||
// document.body.appendChild(div)
|
||
// document.forms[0].submit()
|
||
break;
|
||
case 'weixinh5':
|
||
uni.hideLoading();
|
||
location.replace(jsConfig.mwebUrl + '&redirect_url=' + window.location.protocol +
|
||
'//' + window.location.host + goPages + '&status=1');
|
||
return that.$util.Tips({
|
||
title: "支付中",
|
||
icon: 'success'
|
||
}, () => {
|
||
that.$emit('onChangeFun', {
|
||
action: 'pay_complete'
|
||
});
|
||
});
|
||
break;
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading();
|
||
return that.$util.Tips({
|
||
title: err
|
||
}, () => {
|
||
that.$emit('onChangeFun', {
|
||
action: 'pay_fail'
|
||
});
|
||
});
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.payment {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
border-radius: 16rpx 16rpx 0 0;
|
||
background-color: #fff;
|
||
padding-bottom: 4%;
|
||
z-index: 99;
|
||
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
|
||
transform: translate3d(0, 100%, 0);
|
||
}
|
||
|
||
.payment.on {
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
|
||
.payment .title {
|
||
text-align: center;
|
||
height: 123rpx;
|
||
font-size: 32rpx;
|
||
color: #282828;
|
||
font-weight: bold;
|
||
padding-right: 30rpx;
|
||
margin-left: 30rpx;
|
||
position: relative;
|
||
border-bottom: 1rpx solid #eee;
|
||
}
|
||
|
||
.payment .title .iconfont {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 43rpx;
|
||
color: #8a8a8a;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.payment .item {
|
||
border-bottom: 1rpx solid #eee;
|
||
height: 130rpx;
|
||
margin-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
}
|
||
|
||
.payment .item .left {
|
||
width: 610rpx;
|
||
}
|
||
|
||
.payment .item .left .text {
|
||
width: 540rpx;
|
||
}
|
||
|
||
.payment .item .left .text .name {
|
||
font-size: 32rpx;
|
||
color: #282828;
|
||
}
|
||
|
||
.payment .item .left .text .info {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.payment .item .left .text .info .money {
|
||
color: #ff9900;
|
||
}
|
||
|
||
.payment .item .left .iconfont {
|
||
font-size: 45rpx;
|
||
color: #09bb07;
|
||
}
|
||
|
||
.payment .item .left .iconfont.icon-zhifubao {
|
||
color: #00aaea;
|
||
}
|
||
|
||
.payment .item .left .iconfont.icon-yuezhifu {
|
||
color: #ff9900;
|
||
}
|
||
|
||
.payment .item .left .iconfont.icon-yuezhifu1 {
|
||
color: #eb6623;
|
||
}
|
||
|
||
.payment .item .iconfont {
|
||
font-size: 0.3rpx;
|
||
color: #999;
|
||
}
|
||
</style>
|