<template>
|
<view class="flex-col group_1">
|
<view class="flex-col">
|
<view class="flex-col section_1">
|
<text class="text_1">请选择充值金额</text>
|
<view class="grid">
|
<view class="flex-col grid-item" v-for="(item,index) in amounts" :key="index"
|
:class="{select:index == nowSelectA}" @click="nowSelectA = index">
|
<view class="justify-center top-group">
|
<image src="/static/local/16403089589061038977.png" class="image_2" />
|
<text class="text_4">{{item.coin_num}}</text>
|
</view>
|
<text class="text_6">￥{{item.recharge_amount}}</text>
|
</view>
|
</view>
|
</view>
|
<view class="flex-col section_10">
|
<text>选择支付方式</text>
|
<view class="center-group justify-between view_8" v-for="item in payMents" :key="item.sign"
|
@click="choose(item.sign)">
|
<view class="flex-row">
|
<image :src="item.logo" class="image_12" />
|
<text class="text_23">{{item.name}}</text>
|
</view>
|
<image src="/static/local/5d02b47de7d570a6fcfcbb4d3e9ca5b4.png" class="image_14 image_15"
|
v-if="item.sign == nowPayMents" />
|
<image src="/static/local/bd0de805aca0fec835ae680a644b85e2.png" class="image_14 image_17" v-else />
|
</view>
|
</view>
|
</view>
|
<view class="flex-col items-center button" @click="startRecharge">
|
<text>充值</text>
|
</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>
|
<u-toast ref="uToast" />
|
</view>
|
</template>
|
|
<script>
|
import vkUniPay from "@/uni_modules/vk-uni-pay/components/vk-uni-pay/vk-uni-pay"
|
var that; // 当前页面对象
|
var vk; // vk依赖
|
export default {
|
components: { vkUniPay },
|
data() {
|
// 页面数据变量
|
return {
|
// 充值金额
|
amounts: [],
|
nowSelectA: 0,
|
// 支付方式
|
payMents: [{
|
"name": "微信支付",
|
"logo": "/static/wxpay.png",
|
"sign": "wxpay",
|
"enabled": 1
|
}, {
|
"name": "支付宝支付",
|
"logo": "/static/alipay.png",
|
"sign": "alipay",
|
"enabled": 1
|
}],
|
nowPayMents: 'wxpay',
|
vkPay: {
|
queryPaymentAction: {
|
name: "router", // 云函数名称
|
action: "client/payment/kh/query", // 路由模式下云函数地址
|
actionKey: "$url", // 路由模式下云函数地址的识别key
|
dataKey: "data" // 路由模式下云函数请求参数的识别key
|
},
|
// PC支付的付款二维码地址
|
codeUrl: "",
|
// 当前支付状态 0:等待发起支付 1:支付中 2:已支付
|
status: 0,
|
// 当前页面是否显示
|
pageShow: true,
|
// 启用轮询检测订单支付状态（仅h5支付有效）
|
polling: true,
|
}
|
}
|
},
|
// 监听 - 页面每次【加载时】执行(如：前进)
|
onLoad(options = {}) {
|
that = this;
|
vk = that.vk;
|
that.init(options)
|
},
|
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
onReady() {},
|
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
onShow() {},
|
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
onHide() {},
|
// 函数
|
methods: {
|
// 页面数据初始化函数
|
init(options) {
|
// 获取充值金额列表
|
uni.vk.callFunction({
|
url: 'client/accout/kh/getCoinList',
|
title: "请求中...",
|
success(data) {
|
that.amounts = data.rows
|
}
|
})
|
},
|
// 选择付款方式
|
choose(e) {
|
this.nowPayMents = e
|
},
|
// 开始充值
|
startRecharge() {
|
if (this.nowSelectA < 0) {
|
this.showToast('请选择充值金额', 'warning')
|
return
|
}
|
if (this.nowPayMents == '') {
|
this.showToast('请选择支付方式', 'warning')
|
return
|
}
|
// 在本次方法中固定选中项，防止请求时切换选择导致出错
|
const nowS = that.amounts[that.nowSelectA]
|
//先创建订单
|
uni.vk.callFunction({
|
url: 'client/order/kh/create/coin',
|
title: "创建订单中...",
|
data: { amount: nowS.recharge_amount * 100 }, // 付款金额，单位为分，这里要乘以100
|
success(data) {
|
// 开始支付
|
that.$refs.vkPay.createPayment({
|
action: {
|
name: "router",
|
action: "client/payment/kh/create",
|
actionKey: "$url",
|
dataKey: "data"
|
},
|
data: { provider: that.nowPayMents, oid: data.order_id },
|
success: res => {
|
vk.callFunction({
|
url: 'client/accout/kh/updataInfo',
|
title: '请求中...',
|
data: {
|
amount: nowS.coin_num, // 学习币增加数
|
useOrRecharge: 'recharge',
|
need_user_info: true
|
},
|
success: function(data) {
|
uni.redirectTo({
|
url: `/pages/payment/success?amount=${nowS.recharge_amount}&type=2`
|
});
|
}
|
})
|
},
|
// 失败回调
|
fail: res => {
|
if (res.failType === "create") {
|
// 创建支付失败时提示
|
console.log(res.msg);
|
} else if (res.failType === "request") {
|
// 请求支付失败时提示
|
that.toast("请求支付失败");
|
} else if (res.failType === "result") {
|
// 支付结果失败时提示
|
that.toast("支付失败");
|
}
|
},
|
// 取消回调
|
cancel: res => {
|
that.toast("用户取消支付");
|
}
|
})
|
}
|
})
|
},
|
showToast(title, type) {
|
this.$refs.uToast.show({
|
title: title,
|
type: type,
|
duration: 1500
|
})
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.group_1 {
|
flex: 1 1 auto;
|
overflow-y: auto;
|
background: #F5F5F5;
|
|
.button {
|
margin: 138rpx 30rpx 0;
|
padding: 26rpx 0 24rpx;
|
color: rgb(255, 255, 255);
|
font-size: 32rpx;
|
line-height: 38rpx;
|
white-space: nowrap;
|
background-color: rgb(51, 51, 51);
|
border-radius: 44rpx;
|
}
|
|
.section_1 {
|
padding: 28rpx 28rpx 44rpx;
|
background-color: rgb(255, 255, 255);
|
|
.text_1 {
|
color: rgb(51, 51, 51);
|
font-size: 32rpx;
|
line-height: 38rpx;
|
white-space: nowrap;
|
}
|
|
.grid {
|
margin-top: 39rpx;
|
height: 472rpx;
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
grid-row-gap: 22rpx;
|
grid-column-gap: 22rpx;
|
|
.grid-item {
|
padding: 33rpx 0 28rpx;
|
background-color: rgb(244, 246, 249);
|
border-radius: 4rpx;
|
height: 144rpx;
|
|
.top-group {
|
color: rgb(51, 51, 51);
|
font-size: 32rpx;
|
line-height: 38rpx;
|
white-space: nowrap;
|
|
.text_4 {
|
margin-left: 9rpx;
|
}
|
}
|
|
.text_6 {
|
margin-top: 19rpx;
|
align-self: center;
|
color: rgb(153, 153, 153);
|
font-size: 22rpx;
|
line-height: 26rpx;
|
white-space: nowrap;
|
}
|
}
|
|
.select {
|
background-image: url('/static/local/99e3a5dcf0a08caa6af5fd110210459f.png');
|
background-position: 0px 0px;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
}
|
|
.image_2 {
|
margin: 5rpx 0;
|
width: 30rpx;
|
height: 29rpx;
|
}
|
}
|
}
|
|
.section_10 {
|
margin-top: 22rpx;
|
padding: 40rpx 40rpx 45rpx;
|
color: rgb(51, 51, 51);
|
font-size: 32rpx;
|
line-height: 38rpx;
|
white-space: nowrap;
|
background-color: rgb(255, 255, 255);
|
|
.center-group {
|
padding-left: 24rpx;
|
padding-right: 18rpx;
|
|
.image_14 {
|
width: 40rpx;
|
height: 40rpx;
|
}
|
|
.image_15 {
|
margin: 4rpx 0 6rpx;
|
}
|
|
.image_17 {
|
margin: 6rpx 0 4rpx;
|
}
|
|
.image_12 {
|
width: 50rpx;
|
height: 50rpx;
|
}
|
|
.text_23 {
|
margin: 8rpx 0 4rpx 18rpx;
|
}
|
}
|
|
.view_8 {
|
margin-top: 49rpx;
|
}
|
}
|
}
|
</style>
|
