<template>
<!-- 自定义收银台页面模式 -->
<view class="uni-pay">
<view class="mobile-pay-popup">
<view class="mobile-pay-popup-amount-box">
<view><text class="text">待支付金额：</text></view>
<view class="mobile-pay-popup-amount"><text class="text">{{ amountFormat(myOptions.getNumber('total_fee')) }}</text></view>
</view>
<view class="mobile-pay-popup-provider-list">
<view class="uni-list">
<!-- #ifdef MP-WEIXIN || H5 || APP -->
<view class="uni-list-item" v-if="checkProvider('wxpay')" @click="createOrderByProvider('wxpay')">
<view class="uni-list-item__container container--right">
<view class="uni-list-item__header">
<image :src="insideData.getJSON('images')!['wxpay']" class="image"></image>
</view>
<view class="uni-list-item__content uni-list-item__content--center">
<text class="text">微信支付</text>
</view>
</view>
<view class="arrowright"></view>
</view>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY || H5 || APP -->
<view class="uni-list-item" v-if="checkProvider('alipay')" @click="createOrderByProvider('alipay')">
<view class="uni-list-item__container container--right">
<view class="uni-list-item__header">
<image :src="insideData.getJSON('images')!['alipay']" class="image"></image>
</view>
<view class="uni-list-item__content uni-list-item__content--center">
<text class="text">支付宝</text>
</view>
</view>
<view class="arrowright"></view>
</view>
<!-- #endif -->
</view>
</view>
</view>
<!-- 挂载支付组件 -->
<uni-pay ref="payRef" height="450px" :to-success-page="false" @mounted="onMounted" @success="onSuccess" @fail="onFail" @cancel="onCancel"></uni-pay>
</view>
</template>
<script>
import { objectAssign } from "../../js_sdk/js_sdk"
export default {
data() {
return {
myOptions: {
total_fee: "",
} as UTSJSONObject,
insideData: {
currentProviders: [] as Array<string>,
images: {
alipay: "",
wxpay: ""
} as UTSJSONObject
} as UTSJSONObject, // uni-pay组件mounted事件获得的数据
adpid: "", // 广告id
return_url: "", // 支付成功后点击查看订单跳转的订单详情页面地址
main_color: "", // 支付成功页面的主色调
}
},
// 监听 - 页面每次【加载时】执行(如：前进)
onLoad(options) {
let optionsStr = options['options'] as string | null;
if (optionsStr != null && optionsStr != "") {
let newOptions = JSON.parse(decodeURI(optionsStr)!) as UTSJSONObject;
this.myOptions = newOptions as UTSJSONObject;
}
console.log('myOptions: ', this.myOptions)
},
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
onReady() { },
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
onShow() { },
// 监听 - 页面每次【隐藏时】执行(如：返回)
onHide() { },
// 函数
methods: {
// 监听 - 支付组件加载完毕事件
onMounted(insideData : UTSJSONObject) {
this.insideData['currentProviders'] = insideData.getArray('currentProviders') as Array<string>;
this.insideData['images'] = insideData.getJSON('images') as UTSJSONObject;
},
// 发起支付
createOrder(data : UTSJSONObject) {
this.myOptions = objectAssign(this.myOptions, data);
const payInstance = this.$refs["payRef"] as UniPayComponentPublicInstance;
payInstance.createOrder(this.myOptions);
},
// 根据provider发起支付
createOrderByProvider(provider : string) {
this.createOrder({
provider
})
},
// 监听事件 - 支付成功
onSuccess(res : UTSJSONObject) {
let out_trade_no = res['out_trade_no'] as string;
let pay_order = res.getJSON('pay_order') as UTSJSONObject;
let order_no = pay_order['order_no'] as string;
//let pay_date = pay_order['pay_date'] as string;
let total_fee = pay_order.getNumber('total_fee');
if (total_fee == null) {
total_fee = 0;
}
let return_url = this.return_url as string;
let adpid = this.adpid as string;
let main_color = this.main_color as string;
console.log('success: ', res);
let user_order_success = res.getBoolean('user_order_success');
if (user_order_success != null && user_order_success != true) {
// 代表用户已付款，且你自己写的回调成功并正确执行了
uni.redirectTo({
url: `/uni_modules/uni-pay-x/pages/success/success?out_trade_no=${out_trade_no}&order_no=${order_no}&total_fee=${total_fee}&adpid=${adpid}&return_url=${return_url}&main_color=${main_color}`
});
} else {
// 代表用户已付款，但你自己写的回调执行失败（通常是因为你的回调代码有问题）
}
},
// 监听事件 - 支付失败
onFail(err : RequestPaymentFail) {
console.log('fail: ', err)
},
// 监听事件 - 取消支付
onCancel(err : RequestPaymentFail) {
console.log('cancel: ', err)
},
amountFormat(totalFee : number | null) :string{
if (totalFee == null) {
return "0";
} else {
return (totalFee / 100).toFixed(2)
}
},
// 检测provider
checkProvider(provider : string) : boolean {
let currentProviders = this.insideData.getArray<string>('currentProviders');
return currentProviders != null && currentProviders.indexOf(provider) > -1 ? true : false;
}
},
// 监听器
watch: {
},
// 计算属性
computed: {
}
}
</script>
<style lang="scss" scoped>
.uni-pay{
flex: 1;
display: flex;
flex-direction: column;
background-color: #f3f3f3;
}
.mobile-pay-popup {
flex: 1;
.mobile-pay-popup-amount-box {
background-color: #ffffff;
padding: 15px;
.mobile-pay-popup-amount {
margin-top: 10px;
.text {
color: #e43d33;
font-size: 30px;
}
}
}
.mobile-pay-popup-provider-list {
background-color: #ffffff;
margin-top: 10px;
.uni-list {
display: flex;
background-color: #fff;
position: relative;
flex-direction: column;
.uni-list-item {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #fff;
flex-direction: row;
border-bottom: 1px solid #f8f8f8;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
&:hover {
background-color: #f1f1f1;
}
.uni-list-item__container {
position: relative;
display: flex;
flex-direction: row;
padding: 12px 15px;
padding-left: 15px;
flex: 1;
overflow: hidden;
.uni-list-item__header {
display: flex;
flex-direction: row;
align-items: center;
.image {
width: 26px;
height: 26px;
margin-right: 9px;
}
}
}
.container--right {
padding-right: 0;
}
.uni-list-item__content {
display: flex;
padding-right: 8px;
flex: 1;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
.text {
color: #3b4144;
font-size: 14px;
}
}
.uni-list-item__content--center {
justify-content: center;
}
.arrowright {
border-top: 1px solid #bbbbbb;
border-right: 1px solid #bbbbbb;
width: 8px;
height: 8px;
margin-right: 15px;
transform: rotate(45deg);
}
}
}
}
}
</style>
