<template>
|
<view>
|
<view class="block">
|
<view class="content">
|
<view class="orderinfo">
|
<view class="row">
|
<view class="nominal">订单名称:</view>
|
<view class="text">{{order.title}}</view>
|
</view>
|
<view class="row">
|
<view class="nominal">订单金额:</view>
|
<view class="text">{{order.total_fee/100.0}}元</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="block">
|
<view class="title">
|
选择支付方式
|
</view>
|
<view class="content">
|
<view class="pay-list">
|
<view v-for="(item,index) in payment" class="row" @tap="paytype=item.sign">
|
<view class="left">
|
<image :src="item.logo"></image>
|
</view>
|
<view class="center">
|
{{item.name}}
|
</view>
|
<view class="right">
|
<radio :checked="paytype==item.sign" color="#025BFF" />
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- vk万能支付组件 -->
|
<vk-uni-pay ref="vkPay" :query-payment-action="vkPay.queryPaymentAction" :status.sync="vkPay.status"
|
:code-url.sync="vkPay.codeUrl" :page-show="vkPay.pageShow" :polling="vkPay.polling"></vk-uni-pay>
|
</view>
|
<view class="pay">
|
<view class="btn" @tap="doDeposit">立即支付</view>
|
<view class="tis">
|
点击立即支付，即代表您同意<view class="terms">
|
《条款协议》
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import vkUniPay from "@/uni_modules/vk-uni-pay/components/vk-uni-pay/vk-uni-pay"
|
let time = null;
|
export default {
|
components: { vkUniPay },
|
data() {
|
return {
|
orderId: 0,
|
order: {
|
title: '',
|
total_fee: 0
|
},
|
goods: {},
|
paytype: '', //支付类型,
|
payment: {},
|
vkPay: {
|
/**
|
* 查询支付状态的云函数配置
|
* 如果是非路由框架，则action为字符串，值为云函数名称
|
* 如果是路由框架，则按下方配置填写
|
*/
|
queryPaymentAction: {
|
name: "router", // 云函数名称
|
action: "client/pay/pub/queryPayment", // 路由模式下云函数地址
|
actionKey: "$url", // 路由模式下云函数地址的识别key
|
dataKey: "data" // 路由模式下云函数请求参数的识别key
|
},
|
// PC支付的付款二维码地址
|
codeUrl: "",
|
// 当前支付状态 0:等待发起支付 1:支付中 2:已支付
|
status: 0,
|
// 当前页面是否显示
|
pageShow: true,
|
// 启用轮询检测订单支付状态（仅h5支付有效）
|
polling: true,
|
},
|
};
|
},
|
onLoad(option) {
|
this.orderId = option.order_id
|
this.getOrder()
|
},
|
onUnload() {
|
if (time != null) {
|
clearInterval(time);
|
}
|
},
|
methods: {
|
//根据订单号查询出订单详情
|
getOrder() {
|
let that = this
|
uni.vk.callFunction({
|
url: 'client/order/kh/detail',
|
data: {
|
"_id": this.orderId
|
},
|
success(res) {
|
that.order = res.data.order;
|
that.goods = res.data.goods;
|
that.payment = res.data.payment
|
|
//如果是免费订单 直接支付成功
|
if (that.order.total_fee == 0) {
|
uni.redirectTo({
|
url: './success?amount=' + (that.order.total_fee / 100.0)
|
});
|
}
|
|
//如果已经成功支付 则关闭 返回上一页
|
if (that.order.status == 2) {
|
if (time != null) {
|
clearInterval(time);
|
uni.hideLoading()
|
}
|
uni.redirectTo({
|
url: './success?amount=' + (that.order.total_fee / 100.0)
|
});
|
}
|
}
|
});
|
},
|
doDeposit() {
|
if (this.paytype == '') {
|
uni.showToast({
|
icon: "none",
|
title: '请选择支付方式'
|
});
|
return
|
}
|
let that = this
|
|
//官方支付
|
if (this.paytype == 'wxpay' || this.paytype == 'alipay') {
|
this.$refs.vkPay.createPayment({
|
// 如果是非路由框架，则action为字符串，值为云函数名称
|
// 如果是路由框架，则按下方配置填写
|
action: {
|
name: "router", // 云函数名称
|
action: "client/payment/kh/create", // 路由模式下云函数地址
|
actionKey: "$url", // 路由模式下云函数地址的识别key(注意VK路由框架下,此值为$url)
|
dataKey: "data" // 路由模式下云函数请求参数的识别key
|
},
|
// 请求数据
|
data: {
|
provider: this.paytype,
|
oid: this.orderId,
|
},
|
// 成功回调
|
success: res => {
|
// this.toast("支付成功", "success");
|
// setTimeout(() => {
|
// uni.navigateBack({
|
// delta: 1
|
// })
|
// }, 200);
|
uni.redirectTo({
|
url: './success?amount=' + (that.order.total_fee / 100.0)
|
});
|
},
|
// 失败回调
|
fail: res => {
|
if (res.failType === "create") {
|
// 创建支付失败时提示
|
this.alert(res.msg);
|
} else if (res.failType === "request") {
|
// 请求支付失败时提示
|
this.toast("请求支付失败");
|
} else if (res.failType === "result") {
|
// 支付结果失败时提示
|
this.toast("支付失败");
|
}
|
},
|
// 取消回调
|
cancel: res => {
|
this.toast("用户取消支付");
|
}
|
});
|
}
|
|
//YunGouOS支付
|
if (this.paytype == 'YunGouOS_wxpay' || this.paytype == 'YunGouOS_alipay') {
|
uni.vk.callFunction({
|
url: 'client/payment/kh/create',
|
title: "支付中...",
|
data: {
|
provider: this.paytype,
|
oid: this.orderId,
|
},
|
success(res) {
|
//拉起支付
|
if (res.platform == 'MP-WEIXIN' && res.paytype == 'YunGouOS_wxPay') {
|
that.YunGouOS_wxPay_minapp(res.params)
|
} else {
|
that.YunGouOS_h5Pay(res.params)
|
}
|
}
|
});
|
}
|
},
|
YunGouOS_h5Pay(data) {
|
uni.showToast({
|
icon: "loading",
|
title: "准备支付ing..."
|
})
|
// #ifdef H5
|
window.location.href = data
|
// #endif
|
|
// #ifndef H5
|
let wv = plus.webview.create("", "pay-webview", {
|
plusrequire: "none",
|
'uni-app': 'none',
|
});
|
wv.loadURL(data, { Referer: 'http://www.yungouos.com' });
|
var currentWebview = this.$scope.$getAppWebview();
|
currentWebview.append(wv);
|
wv.hide();
|
//轮询查询自己系统的订单状态
|
uni.showLoading({
|
title: "支付中..."
|
})
|
time = setInterval(() => {
|
//调用查询订单
|
this.getOrder();
|
}, 1000)
|
// #endif
|
},
|
YunGouOS_wxPay_minapp(data) {
|
let that = this
|
wx.navigateToMiniProgram({
|
appId: 'wxd9634afb01b983c0', //支付收银小程序的appid 固定值 不可修改
|
path: '/pages/pay/pay', //支付页面 固定值 不可修改
|
extraData: data, //携带的参数 参考API文档
|
success(res) {
|
//支付成功
|
uni.redirectTo({
|
url: './success?amount=' + (that.order.total_fee / 100.0)
|
});
|
},
|
fail(res) {
|
//打开失败业务
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.block {
|
width: 94%;
|
padding: 0 3% 40upx 3%;
|
|
.title {
|
width: 100%;
|
font-size: 34upx;
|
}
|
|
.content {
|
.orderinfo {
|
width: 100%;
|
border-bottom: solid 1upx #eee;
|
|
.row {
|
width: 100%;
|
min-height: 90upx;
|
display: flex;
|
align-items: center;
|
|
.nominal {
|
flex-shrink: 0;
|
font-size: 32upx;
|
color: #7d7d7d;
|
}
|
|
.text {
|
width: 70%;
|
margin-left: 10upx;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
font-size: 32upx;
|
}
|
}
|
}
|
|
.pay-list {
|
width: 100%;
|
border-bottom: solid 1upx #eee;
|
|
.row {
|
width: 100%;
|
height: 120upx;
|
display: flex;
|
align-items: center;
|
|
.left {
|
width: 100upx;
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
|
image {
|
width: 80upx;
|
height: 80upx;
|
}
|
}
|
|
.center {
|
width: 100%;
|
font-size: 30upx;
|
}
|
|
.right {
|
width: 100upx;
|
flex-shrink: 0;
|
display: flex;
|
justify-content: flex-end;
|
}
|
}
|
}
|
}
|
}
|
|
.pay {
|
margin-top: 20upx;
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
flex-wrap: wrap;
|
|
.btn {
|
width: 70%;
|
height: 80upx;
|
border-radius: 80upx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #fff;
|
background-color: #025BFF;
|
box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.2);
|
}
|
|
.tis {
|
margin-top: 10upx;
|
width: 100%;
|
font-size: 24upx;
|
display: flex;
|
justify-content: center;
|
align-items: baseline;
|
color: #999;
|
|
.terms {
|
color: #5a9ef7;
|
}
|
}
|
}
|
</style>
|
