修改支付成功页面
This commit is contained in:
parent
a2ab06de2b
commit
1b65430bd2
2
main.js
2
main.js
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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 |
Loading…
Reference in New Issue