feat: 新增字体图标

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>