From 85f3a086a37a09f3bff8aa1ddc63f1a6d11c9dc1 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期一, 11 八月 2025 17:19:22 +0800
Subject: [PATCH] 支付成功页面
---
pages/tabbar/user/my.vue | 12 +++
pages/cart/payment/success.vue | 137 +++++++++++++++++++++++++++++++++++++++++++--
pages/cart/static/paySuccess.png | 0
pages/order/fillorder.vue | 2
4 files changed, 142 insertions(+), 9 deletions(-)
diff --git a/pages/cart/payment/success.vue b/pages/cart/payment/success.vue
index afcdae9..9c38e4d 100644
--- a/pages/cart/payment/success.vue
+++ b/pages/cart/payment/success.vue
@@ -1,6 +1,6 @@
<template>
<div class="wrapper">
- <div class="pay-wrapper">
+<!-- <div class="pay-wrapper">
<div class="pay-money">
锟{ Number(payPrice) | unitPrice }}
</div>
@@ -19,13 +19,41 @@
<div>{{ paymentMethod | paymentTypeFilter }}</div>
</div>
</div>
- </div>
- <goodsRecommend />
+ </div> -->
+
+ <div class="pay-success-wrapper">
+ <div class="pay-success-content">
+ <image class="success-icon" src="@/pages/cart/static/paySuccess.png"></image>
+ <div class="success-title">鏀粯鎴愬姛</div>
+ <div class="amount">锟{ Number(payPrice) | unitPrice }}</div>
+
+ <div class="payment-method" v-if="paymentMethod">
+ 鏀粯鏂瑰紡锛歿{ paymentMethod | paymentTypeFilter }}
+ </div>
+
+ <div class="action-buttons">
+ <div
+ class="btn view-order"
+ v-show="!from"
+ @click="checkOrder"
+ >
+ 鏌ョ湅{{ this.orderType == "RECHARGE" ? '浣欓' : '璁㈠崟' }}
+ </div>
+ <div
+ class="btn back-home"
+ @click="navigateTo('/pages/tabbar/home/index', 'switch')"
+ >
+ 鍥炲埌棣栭〉
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- <goodsRecommend /> -->
</div>
</template>
<script>
-import goodsRecommend from "@/pages/cart/m-goods-recommend/index.vue";
+// import goodsRecommend from "@/pages/cart/m-goods-recommend/index.vue";
export default {
data() {
return {
@@ -38,9 +66,9 @@
activeColor: this.$mainColor,
};
},
- components: {
- goodsRecommend,
- },
+ // components: {
+ // goodsRecommend,
+ // },
filters: {
paymentTypeFilter(val) {
switch (val) {
@@ -165,4 +193,99 @@
background: #fff;
border-top-right-radius: 100rpx;
}
+.pay-success-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ background-color: #f7f7f7;
+ padding: 40rpx;
+}
+
+.pay-success-content {
+ width: 100%;
+ max-width: 600rpx;
+ background: #fff;
+ border-radius: 24rpx;
+ padding: 60rpx 40rpx;
+ box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
+ text-align: center;
+}
+
+.success-icon {
+ width: 120rpx;
+ height: 120rpx;
+ margin-bottom: 30rpx;
+}
+
+.success-title {
+ font-size: 40rpx;
+ font-weight: bold;
+ color: #333;
+ margin-bottom: 20rpx;
+}
+
+.amount {
+ font-size: 48rpx;
+ font-weight: bold;
+ color: $main-color;
+ margin-bottom: 40rpx;
+}
+
+.payment-method {
+ font-size: 28rpx;
+ color: #666;
+ margin-bottom: 60rpx;
+ padding: 20rpx 0;
+ border-top: 1rpx solid #eee;
+ border-bottom: 1rpx solid #eee;
+}
+
+.action-buttons {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 40rpx;
+
+ .btn {
+ flex: 1;
+ height: 80rpx;
+ line-height: 80rpx;
+ border-radius: 40rpx;
+ font-size: 30rpx;
+ font-weight: 500;
+ margin: 0 15rpx;
+ transition: all 0.3s;
+ }
+
+ .view-order {
+ background-color: #fff;
+ color: $main-color;
+ border: 1rpx solid $main-color;
+
+ &:active {
+ background-color: rgba($color: $main-color, $alpha: 0.1);
+ }
+ }
+
+ .back-home {
+ background-color: $main-color;
+ color: #fff;
+
+ &:active {
+ opacity: 0.9;
+ }
+ }
+}
+
+/* 鍝嶅簲寮忚皟鏁� */
+@media (max-width: 500px) {
+ .action-buttons {
+ flex-direction: column;
+
+ .btn {
+ margin: 10rpx 0;
+ }
+ }
+}
</style>
diff --git a/pages/cart/static/paySuccess.png b/pages/cart/static/paySuccess.png
new file mode 100644
index 0000000..bc8cafa
--- /dev/null
+++ b/pages/cart/static/paySuccess.png
Binary files differ
diff --git a/pages/order/fillorder.vue b/pages/order/fillorder.vue
index 7661f62..667add2 100644
--- a/pages/order/fillorder.vue
+++ b/pages/order/fillorder.vue
@@ -387,6 +387,7 @@
<div class="tabbar-right">绔嬪嵆鏀粯</div>
<!-- #endif -->
</div>
+
</div>
</div>
</template>
@@ -540,6 +541,7 @@
mounted() {},
methods: {
+
//鍙戠エ鍥炶皟 閫夋嫨鍙戠エ涔嬪悗鍒锋柊璐墿杞�
async callbackInvoice(val) {
this.invoiceFlag = false;
diff --git a/pages/tabbar/user/my.vue b/pages/tabbar/user/my.vue
index dc9f101..d86d2e2 100644
--- a/pages/tabbar/user/my.vue
+++ b/pages/tabbar/user/my.vue
@@ -17,7 +17,7 @@
</view>
<u-icon style="display: flex;align-items: flex-start;" name="arrow-right"></u-icon>
</view>
-
+ <!-- <button type="default" @click="goTOSuccess">绔嬪嵆鏌ョ湅</button> -->
<view class="member-gradient-bg">
<view class="member-content">
<view class="vip-icon">
@@ -130,8 +130,10 @@
</view>
<!-- 鎾戣捣涓嬫柟 -->
<view style="height:64px;">
+
</view>
<custom-tabbar bgColor="#ffffff" selected="my"></custom-tabbar>
+
</view>
</template>
<script>
@@ -188,6 +190,13 @@
mounted() { },
methods: {
+ // goTOSuccess(){
+ // uni.redirectTo({
+ // url:"/pages/cart/payment/success?paymentMethod=WECHAT" +
+ // "&payPrice=" +
+ // 10,
+ // });
+ // },
// 鍒濆鍖栬吘璁簯cos瀹㈡埛绔�
initCOS() {
// 璋冪敤鍚庣鑾峰彇sts涓存椂璁块棶鍑瘉
@@ -433,7 +442,6 @@
background: #fff;
border-radius: 20rpx;
box-shadow: 0 4rpx 24rpx 0 #f6f6f6;
- transform: translateY(-30rpx);
}
.user-name {
--
Gitblit v1.8.0