feat(orderConfirm): 优化订单确认页面功能和样式

- 添加优惠券选择功能
- 增加商品数量选择
- 完善订单信息展示
- 优化支付流程
- 添加错误状态和加载状态处理
- 新增 OrderConfirmSkeleton 组件用于加载骨架屏

src/components/CouponCard.scss

@@ -0,0 +1,253 @@
+.coupon-card {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100px;
+  margin-bottom: 12px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  background: #fff;
+
+  &--disabled {
+    opacity: 0.6;
+  }
+
+  // 主题颜色
+  &--red {
+    .coupon-card__left {
+      background: linear-gradient(135deg, #ff6b6b, #ff5252);
+    }
+    .coupon-card__btn--receive,
+    .coupon-card__btn--use {
+      background: linear-gradient(135deg, #ff6b6b, #ff5252);
+      color: #fff;
+    }
+  }
+
+  &--orange {
+    .coupon-card__left {
+      background: linear-gradient(135deg, #ffa726, #ff9800);
+    }
+    .coupon-card__btn--receive,
+    .coupon-card__btn--use {
+      background: linear-gradient(135deg, #ffa726, #ff9800);
+      color: #fff;
+    }
+  }
+
+  &--blue {
+    .coupon-card__left {
+      background: linear-gradient(135deg, #42a5f5, #2196f3);
+    }
+    .coupon-card__btn--receive,
+    .coupon-card__btn--use {
+      background: linear-gradient(135deg, #42a5f5, #2196f3);
+      color: #fff;
+    }
+  }
+
+  &--purple {
+    .coupon-card__left {
+      background: linear-gradient(135deg, #ab47bc, #9c27b0);
+    }
+    .coupon-card__btn--receive,
+    .coupon-card__btn--use {
+      background: linear-gradient(135deg, #ab47bc, #9c27b0);
+      color: #fff;
+    }
+  }
+
+  &--green {
+    .coupon-card__left {
+      background: linear-gradient(135deg, #66bb6a, #4caf50);
+    }
+    .coupon-card__btn--receive,
+    .coupon-card__btn--use {
+      background: linear-gradient(135deg, #66bb6a, #4caf50);
+      color: #fff;
+    }
+  }
+
+  // 左侧金额区域
+  &__left {
+    flex: 0 0 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    position: relative;
+  }
+
+  &__amount {
+    display: flex;
+    align-items: baseline;
+    margin-bottom: 4px;
+  }
+
+  &__currency {
+    font-size: 14px;
+    font-weight: 500;
+    margin-right: 1px;
+  }
+
+  &__value {
+    font-size: 28px;
+    font-weight: bold;
+    line-height: 1;
+  }
+
+  &__condition {
+    font-size: 11px;
+    opacity: 0.9;
+    margin-top: 2px;
+  }
+
+  // 分割线区域
+  &__divider {
+    flex: 0 0 2px;
+    position: relative;
+    background: #f0f0f0;
+  }
+
+  &__divider-line {
+    width: 100%;
+    height: 100%;
+    background: repeating-linear-gradient(
+      to bottom,
+      transparent 0px,
+      transparent 4px,
+      #ddd 4px,
+      #ddd 8px
+    );
+  }
+
+  &__circle {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    background: #f5f5f5;
+    border-radius: 50%;
+    left: 50%;
+    transform: translateX(-50%);
+
+    &--top {
+      top: -8px;
+    }
+
+    &--bottom {
+      bottom: -8px;
+    }
+  }
+
+  // 右侧信息区域
+  &__right {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 12px;
+  }
+
+  &__info {
+    flex: 1;
+  }
+
+  &__title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 4px;
+  }
+
+  &__validity {
+    font-size: 11px;
+    color: #999;
+  }
+
+  &__action {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  &__btn {
+    min-width: 50px;
+    height: 24px;
+    border-radius: 12px;
+    font-size: 11px;
+    border: none;
+
+    &--receive,
+    &--use {
+      color: #fff;
+    }
+  }
+
+  &__status {
+    font-size: 12px;
+    color: #999;
+    padding: 4px 8px;
+  }
+
+  // 状态遮罩
+  &__mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+  }
+
+  &__mask-text {
+    background: rgba(0, 0, 0, 0.6);
+    color: #fff;
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+
+// 优惠券列表容器
+.coupon-list {
+  padding: 16px;
+
+  &__title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 16px;
+  }
+
+  &__empty {
+    text-align: center;
+    padding: 40px 20px;
+    color: #999;
+    font-size: 14px;
+  }
+}
+
+// 优惠券横向滚动容器
+.coupon-scroll {
+  display: flex;
+  padding: 16px;
+  gap: 8px;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .coupon-card {
+    flex: 0 0 240px;
+    margin-bottom: 0;
+  }
+}