228 行
8.6 KiB
Plaintext
228 行
8.6 KiB
Plaintext
<template>
|
|
<view class="app">
|
|
<view class="header">
|
|
<image :src="successImages" class="header-success-image"></image>
|
|
<view><text class="header-success-title-text">支付成功</text></view>
|
|
<view class="header-hr"></view>
|
|
</view>
|
|
<view class="info-box">
|
|
<view class="info-box-amount"><text class="info-box-amount-text">¥ {{ amountFormat(myOptions.getNumber('total_fee')) }}</text></view>
|
|
<view class="info-box-left-circle"></view>
|
|
<view class="info-box-right-circle"></view>
|
|
<view class="info-box-main">
|
|
<view class="info-box-cell">
|
|
<view class="info-box-cell-left"><text class="info-box-cell-left-text">订单编号</text></view>
|
|
<view class="info-box-cell-right"><text class="info-box-cell-right-text">{{ myOptions['order_no'] }}</text></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 广告位开始 -->
|
|
<view class="uni-ad">
|
|
<!-- 红包广告，uniappx暂不支持-->
|
|
<!-- <ad-interactive v-if="myOptions['adpid']" :adpid="myOptions['adpid']" v-slot:default="{data, loading, error}"
|
|
open-page-path="/uni_modules/uni-pay-x/pages/ad-interactive-webview/ad-interactive-webview" @error="onaderror">
|
|
<view v-if="data" class="ad-interactive">
|
|
<image :src="data.imgUrl" mode="widthFix"></image>
|
|
</view>
|
|
</ad-interactive> -->
|
|
</view>
|
|
<!-- 广告位结束 -->
|
|
<view v-if="myOptions['return_url']" class="button-query" @click="queryOrder"><text class="button-query-text">查看订单</text></view>
|
|
<view class="footer-hr"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
/**
|
|
* @description: 展示支付成功后的结果页，包含金额、订单编号以及返回订单详情入口。
|
|
* @logic: 页面加载时读取支付结果参数，格式化展示订单金额和编号；当存在 `return_url` 时，点击“查看订单”会拼接订单参数并跳转详情页。
|
|
* @optimization: 将支付结果参数统一存入 `myOptions`，并通过 `amountFormat` 与 `queryOrder` 收敛展示和跳转逻辑，减少模板层的处理负担。
|
|
*/
|
|
const myOptions = ref({
|
|
adpid: "",
|
|
order_no: "",
|
|
out_trade_no: "",
|
|
total_fee: 0,
|
|
pay_date: "",
|
|
return_url: ""
|
|
} as UTSJSONObject)
|
|
|
|
const successImages = ref("data:image/png;base64,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")
|
|
|
|
const color = ref({
|
|
wxpay: "#01be6e",
|
|
alipay: "#108ee9"
|
|
})
|
|
|
|
function queryOrder() {
|
|
let return_url = myOptions.value['return_url'] as string;
|
|
let out_trade_no = myOptions.value['out_trade_no'] as string;
|
|
let order_no = myOptions.value['order_no'] as string;
|
|
let url = return_url + `?out_trade_no=${out_trade_no}&order_no=${order_no}`;
|
|
if (url.indexOf("/") != 0) url = `/${url}`;
|
|
uni.navigateTo({
|
|
url,
|
|
});
|
|
}
|
|
|
|
function onaderror(e : any) {
|
|
console.log("ad-error", e);
|
|
}
|
|
|
|
function amountFormat(totalFee : number | null) : string {
|
|
if (totalFee == null || totalFee == 0) {
|
|
return "0";
|
|
} else {
|
|
return (totalFee / 100).toFixed(2)
|
|
}
|
|
}
|
|
|
|
onLoad((options) => {
|
|
myOptions.value['adpid'] = options['adpid'];
|
|
myOptions.value['order_no'] = options['order_no'] != null ? options['order_no'] : "-";
|
|
myOptions.value['out_trade_no'] = options['out_trade_no'];
|
|
if (options['total_fee'] != null) {
|
|
myOptions.value['total_fee'] = parseFloat(options['total_fee'] as string);
|
|
}
|
|
myOptions.value['pay_date'] = options['pay_date'];
|
|
myOptions.value['return_url'] = options['return_url'];
|
|
})
|
|
</script>
|
|
<style>
|
|
|
|
.app {
|
|
background-color: #f3f3f3;
|
|
flex: 1;
|
|
}
|
|
|
|
.header {
|
|
background-color: #007aff;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 40px 15px 25px 15px;
|
|
}
|
|
|
|
.header-success-image {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.header-success-title-text {
|
|
color: #ffffff;
|
|
font-size: 17px;
|
|
margin-top: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.header-hr {
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
height: 15px;
|
|
border-radius: 10px;
|
|
opacity: 0.1;
|
|
background-color: #000000;
|
|
}
|
|
|
|
.info-box {
|
|
margin: 0 25px;
|
|
position: relative;
|
|
margin-top: -32px;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.info-box-amount {
|
|
height: 75px;
|
|
border-bottom: 2px dashed #f3f3f3;
|
|
}
|
|
|
|
.info-box-amount-text {
|
|
line-height: 75px;
|
|
color: #007aff;
|
|
font-weight: bold;
|
|
font-size: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.info-box-left-circle {
|
|
background-color: #f3f3f3;
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 10px;
|
|
top: 65px;
|
|
left: -10px;
|
|
}
|
|
|
|
.info-box-right-circle {
|
|
background-color: #f3f3f3;
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 10px;
|
|
top: 65px;
|
|
right: -10px;
|
|
}
|
|
|
|
.info-box-main {
|
|
padding: 15px;
|
|
}
|
|
|
|
.info-box-cell {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.info-box-cell-left {
|
|
width: 100px;
|
|
}
|
|
|
|
.info-box-cell-left-text {
|
|
text-align: left;
|
|
font-size: 13px;
|
|
color: #333333;
|
|
}
|
|
|
|
.info-box-cell-right {
|
|
flex: 1;
|
|
}
|
|
|
|
.info-box-cell-right-text {
|
|
text-align: right;
|
|
font-size: 13px;
|
|
color: #333333;
|
|
}
|
|
|
|
.uni-ad {
|
|
margin-top: 25px;
|
|
min-height: 50px;
|
|
}
|
|
|
|
.ad-interactive {
|
|
text-align: center;
|
|
}
|
|
|
|
.button-query {
|
|
background-color: #007aff;
|
|
margin: 25px 30px 0 30px;
|
|
padding: 10px 15px;
|
|
border-radius: 25px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.button-query-text {
|
|
color: #ffffff;
|
|
text-align: center;
|
|
}
|
|
|
|
/* #ifndef VUE3-VAPOR */
|
|
.button-query:active {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* #endif */
|
|
|
|
.footer-hr {
|
|
height: 50px;
|
|
}
|
|
</style>
|