修改支付成功页面

This commit is contained in:
tangxinyue 2026-07-07 09:14:19 +08:00
parent a2ab06de2b
commit 1b65430bd2
4 changed files with 490 additions and 480 deletions

View File

@ -29,7 +29,7 @@ export function createApp() {
app.config.globalProperties.$system = plus.os.name;
// #endif
app.config.globalProperties.$systemInfo = systemInfo
uni.setStorageSync('version', '1.0.6.sp17')
uni.setStorageSync('version', '1.0.6.sp20')
app.config.globalProperties.$version = uni.getStorageSync('version')
app.use(globalMethods);
return {

View File

@ -1,8 +1,8 @@
<template>
<!-- 水印 -->
<view v-if="$isVip()">
<watermark dark="light" source="uni_alipay_transfer" />
<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_transfer')">
<watermark dark="light" source="uni_alipay_pay-successful" />
<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_pay-successful')">
<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
</liu-drag-button>
</view>
@ -10,7 +10,7 @@
<!-- 蓝色背景区域 -->
<view class="header-section">
<nav-bar ref="navBarRef" bgColor="transparent" :isBack="false" :buttonGroup="buttonGroup"
@button-click="handleButtonClick">
tipLayerType="pay-successful-tip" isTipLayer tipLayerText="修改支付数据" @button-click="handleButtonClick">
<template v-slot:right>
<view class="nav-link w100"
style="display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; padding: 0;">
@ -27,7 +27,7 @@
<!-- 转账状态信息 -->
<view class="success-info">
<view class="amount-box">
<view class="amount-box" @click="goEdit">
<text class="symbol">¥</text>
<text class="amount alipay-font">{{ Number(payData.money).toFixed(2) }}</text>
</view>
@ -75,7 +75,9 @@
<view class="banner-info">
<view class="text-content">
<text class="b-title">
<text v-if="payData.style1.couponlist[0].price && payData.style1.couponlist[0].price > 0" style="color: #EA4833;">{{ payData.style1.couponlist[0].price }}</text>
<text
v-if="payData.style1.couponlist[0].price && payData.style1.couponlist[0].price > 0"
style="color: #EA4833;">{{ payData.style1.couponlist[0].price }}</text>
{{ payData.style1.couponlist[0].title }}
</text>
<text class="b-desc">
@ -224,79 +226,86 @@
</template>
<script setup>
import {
import {
ref,
onMounted,
reactive,
getCurrentInstance
} from 'vue';
import {
} from 'vue';
import {
onShow,
onLoad
} from '@dcloudio/uni-app';
import {
} from '@dcloudio/uni-app';
import {
util
} from '@/utils/common.js';
import { defaultData } from './data.json';
const {
} from '@/utils/common.js';
import {
defaultData
} from './data.json';
const {
appContext,
proxy
} = getCurrentInstance();
} = getCurrentInstance();
const statusBarHeight = ref(0);
const PAY_STORAGE_KEY = 'alipay_pay_successful_data';
const payData = ref(defaultData);
const statusBarHeight = ref(0);
const PAY_STORAGE_KEY = 'alipay_pay_successful_data';
const payData = ref(defaultData);
const bannerImages = [
const bannerImages = [
'/static/image/balance/transfer/bottom-banner-1.png',
'/static/image/balance/transfer/bottom-banner-2.png'
];
];
//
const loadStorageData = () => {
//
const loadStorageData = () => {
const savedData = uni.getStorageSync(PAY_STORAGE_KEY);
if (savedData) {
payData.value = savedData;
}
};
loadStorageData();
};
loadStorageData();
const navBarRef = ref(null);
const buttonGroup = ref([
{ name: '编辑支付数据', action: 'edit' }
]);
const handleButtonClick = (button) => {
const navBarRef = ref(null);
const buttonGroup = ref([{
name: '编辑支付数据',
action: 'edit'
}]);
const handleButtonClick = (button) => {
if (button.action === 'edit') {
goEdit()
}
};
const goEdit = () => {
uni.navigateTo({
url: '/pages/balance/pay-successful/edit'
});
}
};
const toggleBanner = () => {
const toggleBanner = () => {
const currentIndex = bannerImages.indexOf(payData.value.style1.bannerUrl);
const nextIndex = (currentIndex + 1) % bannerImages.length;
payData.value.style1.bannerUrl = bannerImages[nextIndex];
uni.setStorageSync(PAY_STORAGE_KEY, payData.value);
};
};
onLoad(() => {
//
onLoad(() => {
//
proxy.$apiUserEvent('all', {
type: 'click',
key: 'transfer',
value: "转账"
key: 'pay-successful',
value: "支付成功"
})
})
})
onMounted(() => {
onMounted(() => {
const systemInfo = uni.getSystemInfoSync();
if (systemInfo.statusBarHeight) {
statusBarHeight.value = systemInfo.statusBarHeight;
}
});
});
onShow(() => {
onShow(() => {
loadStorageData();
// #ifdef APP-PLUS
util.setAndroidSystemBarColor('#F5F5F5')
@ -310,22 +319,22 @@ onShow(() => {
plus.navigator.setStatusBarStyle("light");
}, 500);
// #endif
})
})
const goBack = () => {
const goBack = () => {
uni.navigateBack();
};
};
</script>
<style lang="less" scoped>
@import "@/common/main.css";
@import "@/common/main.css";
.container {
.container {
min-height: 100vh;
background-color: #F5F5F5;
}
}
.header-section {
.header-section {
height: 860rpx;
background: linear-gradient(181deg, #3884FD 60%, rgba(30, 128, 253, 0.5) 81.75%, rgba(30, 128, 253, 0) 100%);
@ -341,31 +350,31 @@ const goBack = () => {
::v-deep .tipLayer {
position: absolute;
}
}
}
.status-bar {
.status-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40rpx;
}
}
.nav-link {
.nav-link {
padding: 0 30rpx;
text-align: right;
font-size: 28rpx;
line-height: 28rpx;
color: #fff;
}
}
.success-info {
.success-info {
display: flex;
flex-direction: column;
align-items: center;
}
}
.pay-success-card {
.pay-success-card {
margin: 24rpx;
margin-top: 16rpx;
background-color: #FFFFFF;
@ -403,9 +412,9 @@ const goBack = () => {
line-height: 20rpx;
}
}
}
}
.status-box {
.status-box {
display: flex;
align-items: center;
margin-top: 10rpx;
@ -423,9 +432,9 @@ const goBack = () => {
font-weight: 500;
line-height: 34rpx;
}
}
}
.amount-box {
.amount-box {
display: flex;
align-items: baseline;
color: #fff;
@ -442,9 +451,9 @@ const goBack = () => {
line-height: 92rpx;
font-weight: 500;
}
}
}
.details-box {
.details-box {
width: 100%;
padding: 0 46rpx;
@ -463,23 +472,23 @@ const goBack = () => {
}
}
}
}
.content-section {
.content-section {
padding: 24rpx;
padding-bottom: 16rpx;
// background-color: #F5F5F5;
border-radius: 30rpx 30rpx 0 0;
}
}
.card {
.card {
background-color: #fff;
border-radius: 20rpx;
margin-bottom: 24rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
}
}
.fliggy-card {
.fliggy-card {
overflow: hidden;
position: relative;
@ -523,9 +532,9 @@ const goBack = () => {
}
}
}
}
.banner-footer {
.banner-footer {
padding: 24rpx;
position: relative;
display: flex;
@ -606,9 +615,9 @@ const goBack = () => {
background-size: contain;
background-repeat: no-repeat;
}
}
}
.footer-section {
.footer-section {
padding: 0px 40rpx 0;
margin-top: 50rpx;
position: absolute;
@ -632,16 +641,16 @@ const goBack = () => {
font-size: 32rpx;
background-color: transparent;
}
}
}
.main-content {
.main-content {
position: absolute;
left: 0;
top: 190px;
width: 100%;
}
}
.promo-card {
.promo-card {
// padding: 30rpx;
margin: 16rpx;
margin-bottom: 10rpx;
@ -749,5 +758,5 @@ const goBack = () => {
border-radius: 26rpx;
}
}
}
}
</style>

View File

@ -1018,7 +1018,7 @@ onUnload(() => {
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-bottom: 32rpx;
margin-bottom: 10rpx;
}
.menu-item {
@ -1055,6 +1055,7 @@ onUnload(() => {
.activity-box {
margin: 0 32rpx;
margin-top: 20rpx;
}
.footer-box {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB