116 lines
3.6 KiB
Vue
116 lines
3.6 KiB
Vue
<template>
|
||
<!-- 自定义收银台页面模式 -->
|
||
<view class="uni-pay">
|
||
<view class="mobile-pay-popup" v-if="insideData && insideData.currentProviders">
|
||
<view class="mobile-pay-popup-amount-box">
|
||
<view>待支付金额：</view>
|
||
<view class="mobile-pay-popup-amount">{{ (options.total_fee / 100).toFixed(2) }}</view>
|
||
</view>
|
||
<view class="mobile-pay-popup-provider-list">
|
||
<uni-list>
|
||
<!-- #ifdef MP-WEIXIN || H5 || APP -->
|
||
<uni-list-item v-if="insideData.currentProviders.indexOf('wxpay') > -1" :thumb="insideData.images.wxpay" title="微信支付" @click="createOrder({ provider: 'wxpay' })" clickable link></uni-list-item>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-ALIPAY || H5 || APP -->
|
||
<uni-list-item v-if="insideData.currentProviders.indexOf('alipay') > -1" :thumb="insideData.images.alipay" title="支付宝" @click="createOrder({ provider: 'alipay' })" clickable link></uni-list-item>
|
||
<!-- #endif -->
|
||
</uni-list>
|
||
</view>
|
||
</view>
|
||
<!-- 挂载支付组件 -->
|
||
<uni-pay ref="uniPay" :to-success-page="false" @mounted="onMounted" @success="onSuccess"></uni-pay>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
options: {
|
||
total_fee: "",
|
||
},
|
||
insideData: {}, // uni-pay组件mounted事件获得的数据
|
||
adpid: "", // 广告id
|
||
return_url: "", // 支付成功后点击查看订单跳转的订单详情页面地址
|
||
main_color: "", // 支付成功页面的主色调
|
||
}
|
||
},
|
||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||
onLoad(options = {}) {
|
||
options = JSON.parse(decodeURI(options.options));
|
||
//console.log('options: ', options)
|
||
this.options = options;
|
||
},
|
||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||
onReady(){},
|
||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||
onShow() {},
|
||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||
onHide() {},
|
||
// 函数
|
||
methods: {
|
||
// 监听 - 支付组件加载完毕事件
|
||
onMounted(insideData){
|
||
this.insideData = insideData;
|
||
},
|
||
// 发起支付
|
||
createOrder(provider){
|
||
Object.assign(this.options, provider);
|
||
this.$refs.uniPay.createOrder(this.options);
|
||
},
|
||
// 监听事件 - 支付成功
|
||
onSuccess(res){
|
||
console.log('success: ', res);
|
||
if (res.user_order_success) {
|
||
// 代表用户已付款，且你自己写的回调成功并正确执行了
|
||
uni.redirectTo({
|
||
url:`/uni_modules/uni-pay/pages/success/success?out_trade_no=${res.out_trade_no}&order_no=${res.pay_order.order_no}&pay_date=${res.pay_order.pay_date}&total_fee=${res.pay_order.total_fee}&adpid=${this.adpid}&return_url=${this.return_url}&main_color=${this.main_color}`
|
||
});
|
||
} else {
|
||
// 代表用户已付款，但你自己写的回调执行成功（通常是因为你的回调代码有问题）
|
||
|
||
}
|
||
},
|
||
},
|
||
// 监听器
|
||
watch:{
|
||
|
||
},
|
||
// 计算属性
|
||
computed:{
|
||
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.mobile-pay-popup {
|
||
min-height: calc(100vh - var(--window-bottom) - var(--window-top));
|
||
background-color: #f3f3f3;
|
||
border-radius: 30rpx 30rpx 0 0;
|
||
overflow: hidden;
|
||
|
||
.mobile-pay-popup-title {
|
||
background-color: #ffffff;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.mobile-pay-popup-amount-box {
|
||
background-color: #ffffff;
|
||
padding: 30rpx;
|
||
|
||
.mobile-pay-popup-amount {
|
||
color: #e43d33;
|
||
font-size: 60rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
|
||
.mobile-pay-popup-provider-list {
|
||
background-color: #ffffff;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
</style> |