fix: 移除弧顶返回键(与页面返回重复) + 优化文字排版

haha-mp/src/pages/orderComplete/orderComplete.vue

@@ -12,11 +12,7 @@
       <view class="arc-header">
         <view class="arc-bg" />
         <view class="arc-nav">
-          <view class="back-btn" @click="goBack">
-            <text class="back-arrow">‹</text>
-          </view>
           <text class="arc-title">支付完成</text>
-          <view class="back-btn placeholder" />
         </view>
       </view>
 
@@ -28,86 +24,93 @@
             <view class="check-stem" />
           </view>
         </view>
-
-        <text class="success-title">支付成功</text>
-        <text class="success-amount">¥{{ (order.paidAmount || order.totalAmount || 0).toFixed(2) }}</text>
-
-        <!-- 微信支付分标识 -->
-        <view class="payscore-tag">
-          <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" class="payscore-tag-icon">
-            <circle cx="24" cy="24" r="22" fill="#07C160" />
-            <path d="M14 24 L20 30 L34 18" stroke="#fff" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round" />
-          </svg>
-          <text class="payscore-tag-text">微信支付分 · 计入按时支付记录</text>
+        <text class="success-title">已完成</text>
+        <text class="success-subtitle">计入按时支付记录</text>
+        <!-- 商户信息 -->
+        <view class="card merchant-card">
+          <view class="merchant-header">
+            <view class="merchant-icon-wrapper">
+              <view class="merchant-icon">
+                <text class="merchant-icon-text">柜</text>
+              </view>
+            </view>
+            <text class="merchant-name">AI零售柜</text>
+          </view>
+          <view class="merchant-info-row">
+            <text class="info-label">先享服务</text>
+            <text class="info-value">自助先购后付</text>
+          </view>
+          <view class="merchant-info-row">
+            <text class="info-label">服务信息</text>
+            <text class="info-value">智慧零售</text>
+          </view>
         </view>
 
         <!-- 商品清单 -->
         <view class="card products-card">
           <view class="card-header">
-            <text class="card-title">商品清单</text>
-            <text class="card-count">共 {{ order.products?.length || 0 }} 件</text>
+            <text class="card-title">商品信息</text>
           </view>
           <view class="product-list">
             <view v-for="(product, index) in order.products" :key="index" class="product-item">
-              <view class="product-thumb">
-                <text class="product-thumb-text">{{ (product.name || '商')[0] }}</text>
-              </view>
-              <view class="product-body">
-                <text class="product-name">{{ product.name }}</text>
-                <text class="product-unit-price">¥{{ product.price.toFixed(2) }}</text>
-              </view>
+              <text class="product-name">{{ product.name }}</text>
               <view class="product-right">
-                <text class="product-qty">×{{ product.quantity }}</text>
+                <text class="product-qty">X{{ product.quantity }}</text>
                 <text class="product-subtotal">¥{{ (product.price * product.quantity).toFixed(2) }}</text>
               </view>
             </view>
           </view>
-
-          <view v-if="order.discountAmount && order.discountAmount > 0" class="discount-row">
-            <text class="discount-label">优惠金额</text>
-            <text class="discount-value">-¥{{ order.discountAmount.toFixed(2) }}</text>
-          </view>
         </view>
 
-        <!-- 支付方式 -->
+        <!-- 总计支付 -->
         <view class="card total-card">
-          <view class="total-row">
-            <text class="total-label">支付方式</text>
-            <text class="total-value">{{ payMethodText }}</text>
+          <text class="total-label">总计支付</text>
+          <view class="total-amount-wrapper">
+            <text class="total-symbol">¥</text>
+            <text class="total-amount">{{ (order.paidAmount || order.totalAmount || 0).toFixed(2) }}</text>
           </view>
         </view>
 
         <!-- 订单详情 -->
         <view class="card detail-card">
-          <view class="card-header">
-            <text class="card-title">订单详情</text>
+          <view class="detail-item">
+            <text class="detail-label">付款方式</text>
+            <text class="detail-value">{{ payMethodText }}</text>
           </view>
-          <view class="detail-list">
-            <view class="detail-item">
-              <text class="detail-label">开始时间</text>
-              <text class="detail-value">{{ formatTime(order.createTime) }}</text>
-            </view>
-            <view class="detail-item" v-if="order.payTime">
-              <text class="detail-label">结束时间</text>
-              <text class="detail-value">{{ formatTime(order.payTime) }}</text>
-            </view>
-            <view class="detail-item" v-if="order.storeName">
-              <text class="detail-label">服务地点</text>
-              <text class="detail-value">{{ order.storeName }}</text>
-            </view>
-            <view class="detail-item">
-              <text class="detail-label">服务单号</text>
-              <text class="detail-value detail-code">{{ order.outTradeNo || order.orderNo }}</text>
-            </view>
-            <view class="detail-item detail-link-item" @click="goToOrderDetail">
-              <text class="detail-label">交易账单</text>
-              <view class="detail-link">
-                <text class="link-text">查看详情</text>
-                <text class="link-arrow">›</text>
-              </view>
+          <view class="detail-item" v-if="order.storeName">
+            <text class="detail-label">服务地点</text>
+            <text class="detail-value">{{ order.storeName }}</text>
+          </view>
+          <view class="detail-item">
+            <text class="detail-label">开始时间</text>
+            <text class="detail-value">{{ formatTime(order.createTime) }}</text>
+          </view>
+          <view class="detail-item" v-if="order.payTime">
+            <text class="detail-label">结束时间</text>
+            <text class="detail-value">{{ formatTime(order.payTime) }}</text>
+          </view>
+          <view class="detail-item">
+            <text class="detail-label">服务单号</text>
+            <text class="detail-value detail-code">{{ order.outTradeNo || order.orderNo }}</text>
+          </view>
+          <view class="detail-item">
+            <text class="detail-label">商户单号</text>
+            <text class="detail-value detail-code">{{ order.orderNo }}</text>
+          </view>
+          <view class="detail-item detail-link-item" @click="goToOrderDetail">
+            <text class="detail-label">交易账单</text>
+            <view class="detail-link">
+              <text class="link-text">详情</text>
+              <text class="link-arrow">›</text>
             </view>
           </view>
         </view>
+
+        <!-- 按时支付记录 -->
+        <view class="card payment-record-card" @click="goToOrderDetail">
+          <text class="payment-record-text">按时支付记录</text>
+          <text class="payment-record-arrow">›</text>
+        </view>
       </view>
     </view>
   </view>
@@ -148,10 +151,6 @@ const formatTime = (time: string | undefined) => {
   }
 };
 
-const goBack = () => {
-  uni.navigateBack();
-};
-
 const loadOrderDetail = async (orderId: string) => {
   loading.value = true;
   try {
@@ -247,19 +246,20 @@ $wechat-green: #07C160;
 /* ========== 绿色弧顶 ========== */
 .arc-header {
   position: relative;
-  height: 340rpx;
+  height: 180rpx;
   overflow: hidden;
+  background: $wechat-green;
 }
 
 .arc-bg {
   position: absolute;
-  top: 0;
+  bottom: -100rpx;
   left: 50%;
   transform: translateX(-50%);
-  width: 120%;
-  height: 340rpx;
-  border-radius: 0 0 50% 50%;
-  background: linear-gradient(180deg, #06AD56 0%, #07C160 100%);
+  width: 160%;
+  height: 200rpx;
+  border-radius: 50%;
+  background: #f5f5f5;
 }
 
 .arc-nav {
@@ -267,32 +267,11 @@ $wechat-green: #07C160;
   z-index: 1;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 0 24rpx;
+  justify-content: center;
   height: 88rpx;
   padding-top: env(safe-area-inset-top);
 }
 
-.back-btn {
-  width: 64rpx;
-  height: 64rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &.placeholder {
-    visibility: hidden;
-  }
-}
-
-.back-arrow {
-  font-size: 56rpx;
-  color: #fff;
-  font-weight: 300;
-  line-height: 1;
-  margin-top: -4rpx;
-}
-
 .arc-title {
   font-size: 34rpx;
   font-weight: 600;
@@ -301,7 +280,6 @@ $wechat-green: #07C160;
 
 /* ========== 弧线下内容 ========== */
 .body-content {
-  margin-top: -120rpx;
   position: relative;
   z-index: 1;
   padding: 0 24rpx;
@@ -311,28 +289,28 @@ $wechat-green: #07C160;
 .success-icon-wrapper {
   display: flex;
   justify-content: center;
-  margin-bottom: 24rpx;
+  margin-top: 40rpx;
+  margin-bottom: 16rpx;
   animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .success-icon {
-  width: 120rpx;
-  height: 120rpx;
+  width: 100rpx;
+  height: 100rpx;
   border-radius: 50%;
-  background: #fff;
+  background: $wechat-green;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
 }
 
 .check-stem {
-  width: 26rpx;
-  height: 54rpx;
-  border-right: 7rpx solid $wechat-green;
-  border-bottom: 7rpx solid $wechat-green;
+  width: 24rpx;
+  height: 48rpx;
+  border-right: 6rpx solid #fff;
+  border-bottom: 6rpx solid #fff;
   transform: rotate(45deg);
-  margin-top: -8rpx;
+  margin-top: -6rpx;
 }
 
 @keyframes successPop {
@@ -342,48 +320,80 @@ $wechat-green: #07C160;
 }
 
 .success-title {
-  font-size: 36rpx;
+  font-size: 40rpx;
   font-weight: 700;
   color: #1a1a1a;
   text-align: center;
-  margin-bottom: 8rpx;
+  margin-bottom: 12rpx;
+  letter-spacing: 2rpx;
 }
 
-.success-amount {
-  font-size: 56rpx;
-  font-weight: 800;
-  color: #1a1a1a;
+.success-subtitle {
+  font-size: 24rpx;
+  color: #aaa;
   text-align: center;
+  margin-bottom: 36rpx;
+  letter-spacing: 1rpx;
+}
+
+/* ========== 通用卡片 ========== */
+.card {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 28rpx;
+  margin-bottom: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+}
+
+/* ========== 商户卡片 ========== */
+.merchant-header {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
   margin-bottom: 20rpx;
-  letter-spacing: -1rpx;
 }
 
-/* 微信支付分标签 */
-.payscore-tag {
+.merchant-icon-wrapper {
+  margin-right: 16rpx;
+}
+
+.merchant-icon {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  background: #FF9800;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 10rpx;
-  margin-bottom: 28rpx;
 }
 
-.payscore-tag-icon {
-  width: 36rpx;
-  height: 36rpx;
+.merchant-icon-text {
+  font-size: 24rpx;
+  color: #fff;
+  font-weight: 600;
+}
+
+.merchant-name {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #1a1a1a;
 }
 
-.payscore-tag-text {
-  font-size: 24rpx;
+.merchant-info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12rpx 0;
+}
+
+.info-label {
+  font-size: 26rpx;
   color: #999;
 }
 
-/* ========== 通用卡片 ========== */
-.card {
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 28rpx;
-  margin-bottom: 16rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+.info-value {
+  font-size: 26rpx;
+  color: #333;
 }
 
 /* ========== 商品卡片 ========== */
@@ -408,108 +418,67 @@ $wechat-green: #07C160;
 .product-item {
   display: flex;
   align-items: center;
-  gap: 16rpx;
-  padding: 16rpx 0;
-  border-bottom: 1rpx solid #f8f8f8;
-
-  &:last-child {
-    border-bottom: none;
-    padding-bottom: 0;
-  }
-}
-
-.product-thumb {
-  width: 72rpx;
-  height: 72rpx;
-  border-radius: 12rpx;
-  background: #f5f5f5;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.product-thumb-text {
-  font-size: 28rpx;
-  color: #bbb;
-  font-weight: 600;
-}
-
-.product-body {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 4rpx;
-  min-width: 0;
+  padding: 12rpx 0;
 }
 
 .product-name {
+  flex: 1;
   font-size: 28rpx;
   color: #333;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
-
-.product-unit-price {
-  font-size: 22rpx;
-  color: #999;
+  margin-right: 16rpx;
 }
 
 .product-right {
   display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 4rpx;
+  align-items: center;
   flex-shrink: 0;
 }
 
 .product-qty {
-  font-size: 24rpx;
+  font-size: 26rpx;
   color: #999;
+  margin-right: 24rpx;
 }
 
 .product-subtotal {
   font-size: 28rpx;
   color: #333;
   font-weight: 500;
+  min-width: 120rpx;
+  text-align: right;
 }
 
-.discount-row {
+/* ========== 总计支付卡片 ========== */
+.total-card {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  margin-top: 16rpx;
-  padding-top: 16rpx;
-  border-top: 1rpx solid #f0f0f0;
+  align-items: baseline;
 }
 
-.discount-label {
-  font-size: 26rpx;
-  color: #999;
-}
-
-.discount-value {
-  font-size: 26rpx;
-  color: $wechat-green;
-  font-weight: 500;
+.total-label {
+  font-size: 30rpx;
+  color: #666;
 }
 
-/* ========== 支付方式卡片 ========== */
-.total-row {
+.total-amount-wrapper {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  align-items: baseline;
 }
 
-.total-label {
-  font-size: 28rpx;
-  color: #666;
+.total-symbol {
+  font-size: 32rpx;
+  color: #1a1a1a;
+  font-weight: 700;
+  margin-right: 4rpx;
 }
 
-.total-value {
-  font-size: 26rpx;
-  color: #333;
+.total-amount {
+  font-size: 56rpx;
+  color: #1a1a1a;
+  font-weight: 800;
 }
 
 /* ========== 详情卡片 ========== */
@@ -528,6 +497,7 @@ $wechat-green: #07C160;
   font-size: 26rpx;
   color: #999;
   flex-shrink: 0;
+  margin-right: 24rpx;
 }
 
 .detail-value {
@@ -566,4 +536,26 @@ $wechat-green: #07C160;
   color: $wechat-green;
   font-weight: 300;
 }
+
+/* ========== 按时支付记录卡片 ========== */
+.payment-record-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &:active {
+    opacity: 0.7;
+  }
+}
+
+.payment-record-text {
+  font-size: 28rpx;
+  color: #333;
+}
+
+.payment-record-arrow {
+  font-size: 32rpx;
+  color: #ccc;
+  font-weight: 300;
+}
 </style>