123

src/packages/user/pages/buy.vue

@@ -4,7 +4,6 @@
       <text class="loading-text">加载中...</text>
     </view>
     <template v-else>
-      <image class="card-image" :src="mainPic" mode="widthFix" />
       <view class="intro-section">
         <rich-text :nodes="introduction" />
       </view>
@@ -18,9 +17,9 @@
         <text class="price-value">{{ buyPrice }}</text>
         <text class="price-original">¥3800+</text>
       </view>
-      <button class="btn-buy" :disabled="paying" @tap="handleBuy">
+      <view class="btn-buy" :class="{ 'btn-buy--disabled': paying }" @tap="handleBuy">
         <text class="btn-buy__text">{{ paying ? '支付中...' : '立即购买' }}</text>
-      </button>
+      </view>
     </view>
   </view>
 </template>
@@ -95,6 +94,8 @@ async function handleBuy() {
       mobile,
       couponId: '',
     })
+    const orderId = orderRes.orderId
+    const outTradeNo = orderRes.outTradeNo
 
     const openId = getToken()
     if (!openId) {
@@ -130,12 +131,12 @@ async function handleBuy() {
 
     uni.showToast({ title: '支付成功', icon: 'success' })
     setTimeout(() => {
-      uni.switchTab({ url: '/pages/index/index' })
+      uni.redirectTo({ url: `/packages/user/pages/order/detail?orderId=${outTradeNo}` })
     }, 1500)
   } catch (err: any) {
     uni.showToast({ title: err?.errMsg?.includes('cancel') ? '已取消支付' : '支付失败，请重试', icon: 'none' })
     setTimeout(() => {
-      uni.redirectTo({ url: '/packages/user/pages/order/list' })
+      uni.redirectTo({ url: `/packages/user/pages/order/list?outTradeNo=${outTradeNo}` })
     }, 1500)
   } finally {
     paying.value = false
@@ -149,6 +150,7 @@ $bar-height: 120rpx;
 .page {
   min-height: 100vh;
   background: $color-card;
+  padding-top: 20rpx;
   padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom));
   font-family: $font-family-body;
 }
@@ -165,14 +167,6 @@ $bar-height: 120rpx;
   color: $uv-tips-color;
 }
 
-/* ===== 图片 ===== */
-.card-image {
-  width: 100%;
-  display: block;
-  margin: 0;
-  padding: 0;
-}
-
 /* ===== 富文本介绍 ===== */
 .intro-section {
   width: 100%;
@@ -185,15 +179,13 @@ $bar-height: 120rpx;
   left: 0;
   right: 0;
   bottom: 0;
-  width: 100%;
   box-sizing: border-box;
   min-height: $bar-height;
   background: $color-card;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 0 0rpx 0 178rpx;
-  padding-bottom: env(safe-area-inset-bottom);
+  padding: 20rpx 32rpx;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
   box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
   z-index: 100;
 }
@@ -207,6 +199,8 @@ $bar-height: 120rpx;
 .price-row {
   display: flex;
   align-items: baseline;
+  flex: 1;
+  min-width: 0;
 }
 
 .price-symbol {
@@ -246,15 +240,12 @@ $bar-height: 120rpx;
   box-shadow: 0 4rpx 16rpx rgba(60, 156, 255, 0.3);
   transition: all 0.2s ease;
 
-  &::after {
-    display: none;
-  }
-
-  &:active:not([disabled]) {
+  &:active {
     transform: scale(0.97);
+    background: $uv-primary;
   }
 
-  &[disabled] {
+  &--disabled {
     opacity: 0.6;
   }
 }
@@ -265,5 +256,9 @@ $bar-height: 120rpx;
   font-weight: 700;
   color: #ffffff;
   letter-spacing: 2rpx;
+
+  &:active {
+    color: #ffffff;
+  }
 }
 </style>