From 9e4ae356ed626e3089f31d5b40fb10a476efe7c4 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期三, 13 八月 2025 16:34:51 +0800
Subject: [PATCH] 购物车点击事件，分享视频封面问题
---
pages/cart/payment/success.vue | 137 +++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 130 insertions(+), 7 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>
--
Gitblit v1.8.0