账单与支付

src/pages/bill-detail/index.less

@@ -4,6 +4,11 @@
   padding: 20rpx 24rpx 60rpx;
   box-sizing: border-box;
 
+  // 可付款时为底部操作栏留出空间
+  &--pay {
+    padding-bottom: 160rpx;
+  }
+
   .bill-card {
     background: #fff;
     border-radius: 16rpx;
@@ -67,6 +72,11 @@
       font-size: 26rpx;
       color: #323233;
       flex-shrink: 0;
+
+      // 回筐抵扣（负附加金额）
+      &--return {
+        color: #07c160;
+      }
     }
 
     &__total {
@@ -104,6 +114,15 @@
       border-bottom: none;
     }
 
+    &__img {
+      width: 72rpx;
+      height: 72rpx;
+      border-radius: 8rpx;
+      background: #f2f3f5;
+      flex-shrink: 0;
+      margin-right: 16rpx;
+    }
+
     &__main {
       flex: 1;
       min-width: 0;
@@ -261,4 +280,46 @@
       font-weight: 600;
     }
   }
+
+  // ===== 去付款操作栏 =====
+  .bill-pay-bar {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
+    background: #fff;
+    box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
+
+    &__info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      align-items: baseline;
+    }
+
+    &__label {
+      font-size: 26rpx;
+      color: #646566;
+    }
+
+    &__amount {
+      margin-left: 16rpx;
+      font-size: 36rpx;
+      color: #ee0a24;
+      font-weight: 600;
+    }
+
+    &__btn {
+      padding: 14rpx 48rpx;
+      border-radius: 999rpx;
+      background: #ee0a24;
+      color: #fff;
+      font-size: 28rpx;
+      font-weight: 500;
+    }
+  }
 }