feat: 新增字体图标

pages/order/components/NoticeInfo/index.vue

@@ -1,40 +1,30 @@
 <template>
   <view class="notice-info mb12">
-    <view class="notice-section">
-      <view class="notice-title">
-        <image class="notice-icon" src="./images/icon_clock.png"></image>
-        取景点
-      </view>
-      <view class="notice-content">文本内容文本内容文本内容文本内容</view>
-    </view>
+    <view class="notice-title"> 购买须知 </view>
 
-    <view class="notice-section">
-      <view class="notice-title">
-        <image class="notice-icon" src="./images/icon_card.png"></image>
-        使用处
-      </view>
-      <view class="notice-content">
-        <text class="notice-item">· 文本内容文本内容文本内容</text>
-        <text class="notice-item">· 文本内容文本内容文本内容文本内容</text>
-        <text class="notice-item">· 文本内容文本内容文本内容文本内容文本内容</text>
-        <text class="notice-item">· 文本内容文本内容文本内容</text>
-      </view>
-    </view>
-
-    <view class="notice-section">
-      <view class="notice-title">
-        <image class="notice-icon" src="./images/icon_arrow.png"></image>
-        退改说明
-      </view>
-      <view class="notice-content">符合条件可退款</view>
-    </view>
+    <zero-markdown-view :markdown="orderData.commodityTip" :fontSize="14" />
   </view>
 </template>
 
 <script setup>
-// No dynamic data required for this static example
+import { defineProps } from "vue";
+
+const props = defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({
+      commodityTip: "",
+      paySerialNumber: "",
+      payWay: "", // 支付方式 0-微信 1-支付宝 2-云闪付
+      payAmt: "",
+      orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已关闭 6-已完成
+      orderType: "0", // 0-酒店订单, 1-门票订单, 2-餐饮
+    }),
+  },
+});
 </script>
 
 <style scoped lang="scss">
-@import './styles/index.scss';
+@import "./styles/index.scss";
 </style>

pages/order/components/NoticeInfo/styles/index.scss

@@ -4,36 +4,10 @@
   padding: 16px 18px;
 }
 
-.notice-section {
-  margin-bottom: 20px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
 .notice-title {
   display: flex;
   align-items: center;
-  margin-bottom: 8px;
-  font-size: 14px;
-  font-weight: 600;
+  font-size: 16px;
+  font-weight: 500;
   color: #333;
 }
-
-.notice-icon {
-  width: 18px;
-  height: 18px;
-  margin-right: 10px;
-}
-
-.notice-content {
-  font-size: 12px;
-  color: #666;
-  padding-left: 28px;
-}
-
-.notice-item {
-  display: block;
-  margin-bottom: 5px;
-}

pages/order/components/OrderInfo/index.vue

@@ -12,11 +12,20 @@
       <text class="label">支付方式</text>
       <text class="value">{{ payWayText }}</text>
     </view>
+    <!-- 在已退款状态显示 -->
+    <view class="order-item">
+      <text class="label">退款单号</text>
+      <text class="value">{{ payWayText }}</text>
+    </view>
+    <view class="line"></view>
     <view class="order-item amount">
       <text class="label">实际支付金额</text>
       <text class="value">{{ formattedAmount }}</text>
     </view>
-    <button class="reserve-button">再次预定</button>
+    <!-- 根据订单状态动态显示按钮 -->
+    <button v-if="shouldShowButton" :class="buttonClass">
+      {{ buttonText }}
+    </button>
     <text class="feedback">投诉反馈</text>
   </view>
 </template>
@@ -54,10 +63,41 @@ const payWayText = computed(() => {
 // 格式化金额显示
 const formattedAmount = computed(() => {
   const amount = props.orderData.payAmt;
-  return amount ? `¥${parseFloat(amount).toFixed(2)}` : "¥0.00";
+  return amount ? `${parseFloat(amount).toFixed(2)}` : "0.00";
+});
+
+// 按钮文案逻辑
+const buttonText = computed(() => {
+  const status = props.orderData.orderStatus;
+  switch (status) {
+    case "0": // 待支付状态
+      return "立即支付";
+    case "2": // 待使用状态
+      return "申请退款";
+    default: // 其他状态
+      return "再次预定";
+  }
+});
+
+// 是否显示按钮（退款中状态不显示）
+const shouldShowButton = computed(() => {
+  return props.orderData.orderStatus !== "4"; // 4-退款中
+});
+
+// 按钮样式类逻辑
+const buttonClass = computed(() => {
+  const status = props.orderData.orderStatus;
+  const baseClass = "reserve-button";
+
+  // 申请退款状态（待使用状态）保持原样式，其他状态添加pre-btn类
+  if (status === "2") {
+    return baseClass; // 申请退款状态，背景色不变
+  } else {
+    return `${baseClass} pre-btn`; // 其他状态，添加pre-btn样式
+  }
 });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 @import "./styles/index.scss";
 </style>

pages/order/components/OrderInfo/styles/index.scss

@@ -1,49 +1,267 @@
+// SASS变量定义，提高可维护性和编译性能
+
+// 颜色系统
+$order-bg-color: #fff;
+$text-color-primary: #333;
+$text-color-secondary: #666;
+$text-color-accent: #ff5722;
+$button-color: #ffa500;
+$button-hover-color: darken($button-color, 8%);
+$button-disabled-color: #ccc;
+$border-color: #ececec;
+$shadow-color: rgba(0, 0, 0, 0.08);
+
+// 尺寸和间距
+$order-border-radius: 10px;
+$order-padding: 16px 18px;
+$spacing-small: 8px;
+$spacing-medium: 10px;
+$spacing-large: 20px;
+$button-height: 42px;
+
+// 字体系统
+$font-size-small: 12px;
+$font-size-medium: 14px;
+$font-size-large: 18px;
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+
+// 过渡动画
+$transition-fast: 0.2s ease;
+$transition-normal: 0.3s ease;
+
+// 响应式断点
+$breakpoint-mobile: 480px;
+
 .order-info {
-  background-color: #fff;
-  border-radius: 10px;
-  padding: 16px 18px;
-}
+  background-color: $order-bg-color;
+  border-radius: $order-border-radius;
+  padding: $order-padding;
+  box-shadow: 0 2px 8px $shadow-color;
+  transition: box-shadow $transition-normal;
 
-.order-item {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
+  &:hover {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  }
 
-.label {
-  font-size: 12px;
-  color: #666;
-}
+  // 订单项样式，优化布局和视觉层次
+  .order-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: $spacing-small;
+    padding: 4px 0;
+    transition: background-color $transition-fast;
 
-.value {
-  font-size: 12px;
-  color: #333;
-}
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.02);
+      border-radius: 4px;
+      margin: 0 -4px 8px;
+      padding: 4px;
+    }
 
-.amount .label {
-  color: #333;
-}
+    .label {
+      font-size: $font-size-small;
+      color: $text-color-secondary;
+      font-weight: $font-weight-normal;
+      flex-shrink: 0;
+      line-height: 1.4;
+    }
 
-.amount .value {
-  color: #ff5722;
-  font-size: 18px;
-}
+    .value {
+      font-size: $font-size-small;
+      color: $text-color-primary;
+      font-weight: $font-weight-normal;
+      text-align: right;
+      word-break: break-word;
+      overflow-wrap: break-word;
+      line-height: 1.4;
+      max-width: 60%;
+    }
 
-.reserve-button {
-  width: 100%;
-  background-color: #ffa500;
-  color: #fff;
-  border: none;
-  border-radius: 50px;
-  height: 42px;
-  font-size: 14px;
-  margin-top: 20px;
-}
+    // 金额特殊样式，增强视觉重点
+    &.amount {
+      .label {
+        color: $text-color-primary;
+        font-weight: $font-weight-medium;
+        font-size: $font-size-medium;
+      }
 
-.feedback {
-  display: block;
-  text-align: center;
-  font-size: 14px;
-  color: #333;
-  margin-top: 10px;
-}
+      .value {
+        color: $text-color-accent;
+        font-size: $font-size-large;
+        font-weight: $font-weight-semibold;
+        max-width: none;
+
+        // 货币符号样式
+        &::before {
+          content: "¥";
+          margin-right: 2px;
+          font-size: 11px;
+        }
+      }
+    }
+
+    // 移动端适配
+    @media (max-width: $breakpoint-mobile) {
+      .value {
+        max-width: 50%;
+        font-size: $font-size-small - 1px;
+      }
+
+      &.amount .value {
+        font-size: $font-size-medium + 2px;
+      }
+    }
+  }
+
+  .line {
+    border-bottom: 1px solid $border-color;
+    margin: $spacing-medium 0;
+    height: 0;
+    opacity: 0.6;
+    transition: opacity $transition-fast;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .reserve-button {
+    width: 100%;
+    background: linear-gradient(
+      135deg,
+      $button-color 0%,
+      darken($button-color, 5%) 100%
+    );
+    color: #fff;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50px;
+    height: $button-height;
+    font-size: $font-size-medium;
+    font-weight: $font-weight-medium;
+    margin-top: $spacing-large;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba($button-color, 0.3);
+    transition: all $transition-normal;
+    letter-spacing: 0.5px;
+
+    // 再次预定按钮背景样式
+    &.pre-btn {
+      background: linear-gradient(179deg, #00a6ff 0%, #0256ff 100%);
+      border: 2px solid #00a6ff;
+    }
+
+    // 按钮波纹效果
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 0;
+      height: 0;
+      background: rgba(255, 255, 255, 0.3);
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+      transition: width 0.6s, height 0.6s;
+    }
+
+    &:hover {
+      background: linear-gradient(
+        135deg,
+        $button-hover-color 0%,
+        darken($button-hover-color, 5%) 100%
+      );
+      transform: translateY(-2px);
+      box-shadow: 0 4px 16px rgba($button-color, 0.4);
+
+      &::before {
+        width: 300px;
+        height: 300px;
+      }
+    }
+
+    &:active {
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba($button-color, 0.3);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 3px rgba($button-color, 0.3);
+    }
+
+    &:disabled {
+      background: $button-disabled-color;
+      cursor: not-allowed;
+      transform: none;
+      box-shadow: none;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    // 移动端触摸优化
+    @media (max-width: $breakpoint-mobile) {
+      height: $button-height + 4px;
+      font-size: $font-size-medium + 1px;
+
+      &:hover {
+        transform: none; // 移动端禁用悬浮效果
+      }
+    }
+  }
+
+  .feedback {
+    display: block;
+    text-align: center;
+    font-size: $font-size-medium;
+    color: $text-color-primary;
+    font-weight: $font-weight-normal;
+    margin-top: $spacing-medium;
+    cursor: pointer;
+    text-decoration: none;
+    position: relative;
+    transition: all $transition-fast;
+    padding: $spacing-small;
+    border-radius: 4px;
+
+    // 下划线动画效果
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 4px;
+      left: 50%;
+      width: 0;
+      height: 1px;
+      background-color: $text-color-accent;
+      transition: all $transition-normal;
+      transform: translateX(-50%);
+    }
+
+    &:hover {
+      color: $text-color-accent;
+      background-color: rgba($text-color-accent, 0.05);
+
+      &::after {
+        width: 60%;
+      }
+    }
+
+    &:active {
+      transform: scale(0.98);
+    }
+
+    // 移动端适配
+    @media (max-width: $breakpoint-mobile) {
+      font-size: $font-size-medium - 1px;
+      padding: $spacing-medium $spacing-small;
+    }
+  }
+}

pages/order/components/OrderStatusInfo/index.vue

@@ -1,19 +1,37 @@
 <template>
   <view class="order-status">
     <view class="status-header">
-      <image class="status-icon" src="/static/icons/clock.png"></image>
+      <uni-icons
+        class="status-icon"
+        fontFamily="ZhiNian"
+        type="iconshizhong"
+        size="30"
+      ></uni-icons>
       <text class="status-text">已取消</text>
     </view>
-    <view class="status-description">
-      您已取消待支付的订单
-    </view>
+    <view class="status-description"> 您已取消待支付的订单 </view>
   </view>
 </template>
 
 <script setup>
-// No dynamic data required for this static example
+import { defineProps } from "vue";
+
+const props = defineProps({
+  orderData: {
+    type: Object,
+    required: true,
+    default: () => ({
+      orderId: "",
+      paySerialNumber: "",
+      payWay: "", // 支付方式 0-微信 1-支付宝 2-云闪付
+      payAmt: "",
+      orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已关闭 6-已完成
+      orderType: "0", // 0-酒店订单, 1-门票订单, 2-餐饮
+    }),
+  },
+});
 </script>
 
 <style scoped>
-@import './styles/index.scss';
+@import "./styles/index.scss";
 </style>