feat: 订单详情页退款政策和报名须知修改文案和页面结构

src/order_pages/orderDetail/config.ts

@@ -22,3 +22,135 @@ export const DECLAIMER = `
   发起人临时失联/爽约；发起人恶意删除队员，GO！支持全额退款
   参与者爽约不通知，不可退款但鼓励用户评分机制中反馈，平台将限制其部分功能使用（如发起权限、报名权限等）。
 `;
+
+interface RegInsChildTipType {
+  text: string
+  strong?: boolean
+}
+
+interface RegInsChildTableType {
+  refundApplicationTime: string
+  participantRefundableAmount: string
+  liquidatedDamages: string
+}
+
+interface RegInsChildType {
+  title: string
+  desc: string
+  table?: RegInsChildTableType[]
+  tips: RegInsChildTipType[]
+}
+
+interface RegInsType {
+  title: string,
+  desc: string,
+  children: RegInsChildType[]
+}
+
+export const RegistrationInstructions: RegInsType = {
+  title: '报名须知',
+  desc: '请在确认支付前仔细阅读以下内容，完成支付即视为您已同意本须知全部内容。',
+  children: [
+    {
+      title: '一、退款规则',
+      desc: '',
+      table: [
+        {
+          refundApplicationTime: '申请退款时间',
+          participantRefundableAmount: '参与者可退',
+          liquidatedDamages: '违约金',
+        },
+        {
+          refundApplicationTime: '活动开始前24小时',
+          participantRefundableAmount: '报名费 100%',
+          liquidatedDamages: '无',
+        },
+        {
+          refundApplicationTime: '活动开始前12～24小时',
+          participantRefundableAmount: '报名费 50%',
+          liquidatedDamages: '报名费 50%',
+        },
+        {
+          refundApplicationTime: '活动开始前12小时内',
+          participantRefundableAmount: '报名费 20%',
+          liquidatedDamages: '报名费 80%',
+        },
+        {
+          refundApplicationTime: '未申请 / 直接缺席',
+          participantRefundableAmount: '0%',
+          liquidatedDamages: '视为放弃，全归组织者',
+        },
+      ],
+      tips: [
+        {
+          text: '以上时间节点以提交申请时间为准，非活动开始时间；',
+          strong: false,
+        },
+        {
+          text: '退款申请入口：活动详情页 > 退出活动',
+        },
+        {
+          text: '退款原路退回至微信支付账户，到账时间 1～5 个工作日；',
+        },
+        {
+          text: '违约金由组织者（95%）与平台（5%）按比例分配。其中组织者所得部分用于补偿其因人数临时变动产生的场地费损失，平台所得部分用于覆盖违约事务的处理成本；',
+        },
+        {
+          text: '未申请退款直接缺席的，报名费于活动结束后自动结算给组织者，平台不参与分配',
+        },
+      ],
+    },
+    {
+      title: '二、特殊情形退款',
+      desc: '以下特殊情形可申请全额退款，需联系客服并提供相关证明材料：',
+      tips: [
+        {
+          text: '活动当天遭遇极端恶劣天气（台风、暴雨红色预警等）；',
+        },
+        {
+          text: '球场临时关闭或其他不可抗力导致活动无法进行；',
+        },
+        {
+          text: '参与者本人突发疾病或意外（需提供医院证明）。',
+        },
+      ],
+    },
+    {
+      title: '三、活动取消规则',
+      desc: '',
+      tips: [
+        {
+          text: '到达活动开始时间时，报名人数仍未达到最低成局人数，活动自动取消，已付款参与者全额退款；',
+        },
+        {
+          text: '组织者主动取消活动，所有已付款参与者全额退款；',
+        },
+        {
+          text: '以上退款均由系统自动处理，无需申请。',
+        },
+      ],
+    },
+    {
+      title: '四、免责声明',
+      desc: '',
+      tips: [
+        {
+          text: '本平台仅为网球约球信息撮合平台，不直接提供场地或运动服务，不对活动中的人身安全及财物损失承担责任；',
+        },
+        {
+          text: '网球运动存在固有运动风险，请在参与前评估自身身体状况，患有心脏病、高血压等基础疾病者请在医生许可下参与；',
+        },
+        {
+          text: '平台强烈建议参与者购买运动意外保险；',
+          strong: true,
+        },
+        {
+          text: '因组织者或场地方原因导致活动变更或取消，平台将协助处理但不承担连带责任；',
+        },
+        {
+          text: '本平台不对因网络故障、系统维护或不可抗力导致的服务中断承担责任。',
+        },
+      ],
+    },
+  ],
+}

src/order_pages/orderDetail/index.module.scss

@@ -544,21 +544,160 @@
       .time {
         text-align: left;
         padding-left: 30px;
+        border-right: 1px solid rgba(0, 0, 0, 0.06);
       }
 
-      .rule {
+      // .rule {
-        border-left: 1px solid rgba(0, 0, 0, 0.06);
+      //   border-left: 1px solid rgba(0, 0, 0, 0.06);
+      // }
     }
   }
+  .refundTip {
+    margin-top: 16px;
+    color: rgba(60, 60, 67, 0.6);
+    text-align: center;
+    font-feature-settings:
+      "liga" off,
+      "clig" off;
+    font-family: "PingFang SC";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
   }
 }
 
-.declaimer {
+.disclaimer {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 16px;
+
+  .disclaimerTitle {
+    font-size: 14px;
+    font-weight: bold;
+    color: #000;
+    line-height: 20px;
+  }
+
+  .disclaimerDesc {
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.65);
+    line-height: 18px;
+  }
+
+  .disclaimerSection {
     display: flex;
     flex-direction: column;
-  align-items: flex-start;
     gap: 8px;
-  padding-bottom: 100px;
+
+    .sectionTitle {
+      font-size: 14px;
+      font-weight: bold;
+      color: #000;
+      line-height: 20px;
+    }
+
+    .sectionDesc {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.65);
+      line-height: 18px;
+    }
+
+    .tableContainer {
+      display: flex;
+      flex-direction: column;
+      // gap: 8px;
+      margin: 8px 0;
+      border-radius: 12px;
+      border: 1px solid rgba(0, 0, 0, 0.06);
+      background: #fff;
+      box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.06);
+      overflow: hidden;
+
+      .tableRow {
+        display: flex;
+        min-height: 44px;
+
+        &:first-child {
+          .tableCell {
+            color: #000;
+            font-weight: 600;
+          }
+        }
+
+        &:not(:last-child) {
+          border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+        }
+
+        .tableCell {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 12px;
+          color: rgba(0, 0, 0, 0.65);
+          line-height: 18px;
+          word-break: break-word;
+          padding: 4px 0;
+
+          &:not(:last-child) {
+            border-right: 1px solid rgba(0, 0, 0, 0.06);
+          }
+
+          &:nth-child(1) {
+            flex: 1;
+          }
+
+          &:nth-child(2) {
+            flex: 0.6;
+          }
+
+          &:nth-child(3) {
+            flex: 1;
+          }
+
+          .tipText {
+            text-align: center;
+          }
+        }
+      }
+    }
+
+    .tipsList {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      margin: 8px 0;
+
+      .tipItem {
+        display: flex;
+        align-items: flex-start;
+
+        &::before {
+          content: "•";
+          margin-right: 6px;
+          margin-top: -2px;
+          font-size: 12px;
+          color: rgba(0, 0, 0, 0.65);
+          flex-shrink: 0;
+          line-height: 18px;
+        }
+
+        .tipText {
+          font-size: 12px;
+          color: rgba(0, 0, 0, 0.65);
+          line-height: 18px;
+        }
+
+        .tipTextStrong {
+          font-size: 12px;
+          color: #000;
+          font-weight: bold;
+          line-height: 18px;
+        }
+      }
+    }
+  }
+
   .title {
     display: flex;
     padding: 15px 0 0;

src/order_pages/orderDetail/index.tsx

@@ -32,7 +32,7 @@ import img from "@/config/images";
 import CustomerIcon from "@/static/order/customer.svg";
 import { handleCustomerService } from "@/services/userService";
 import { requireLoginWithPhone } from "@/utils/helper";
-import { DECLAIMER } from "./config";
+import { RegistrationInstructions } from "./config";
 import styles from "./index.module.scss";
 
 dayjs.locale("zh-cn");
@@ -550,15 +550,66 @@ function RefundPolicy(props) {
           </View>
         ))}
       </View>
+      <Text className={styles.refundTip}>
+        以上时间节点以提交申请时间为准。违约金由组织者（95%）与平台（5%）分配，用于补偿场地损失及处理成本。活动结束48小时后，1个工作日内系统自动结算至组织者账户。未申请退款直接缺席，报名费全额归组织者。
+      </Text>
     </View>
   );
 }
 
 function Disclaimer() {
   return (
-    <View className={styles.declaimer}>
+    <View className={styles.disclaimer}>
-      <Text className={styles.title}>免责声明</Text>
+      <View className={styles.disclaimerTitle}>
-      <Text className={styles.content}>{DECLAIMER}</Text>
+        <Text>{RegistrationInstructions.title}</Text>
+      </View>
+      <View className={styles.disclaimerDesc}>
+        <Text>{RegistrationInstructions.desc}</Text>
+      </View>
+      {RegistrationInstructions.children.map((section, sectionIndex) => (
+        <View key={sectionIndex} className={styles.disclaimerSection}>
+          <View className={styles.sectionTitle}>
+            <Text>{section.title}</Text>
+          </View>
+          {section.desc && (
+            <View className={styles.sectionDesc}>
+              <Text>{section.desc}</Text>
+            </View>
+          )}
+          {section.table && (
+            <View className={styles.tableContainer}>
+              {section.table.map((row, rowIndex) => (
+                <View key={rowIndex} className={styles.tableRow}>
+                  <View className={styles.tableCell}>
+                    <Text>{row.refundApplicationTime}</Text>
+                  </View>
+                  <View className={styles.tableCell}>
+                    <Text>{row.participantRefundableAmount}</Text>
+                  </View>
+                  <View className={styles.tableCell}>
+                    <Text>{row.liquidatedDamages}</Text>
+                  </View>
+                </View>
+              ))}
+            </View>
+          )}
+          {section.tips && (
+            <View className={styles.tipsList}>
+              {section.tips.map((tip, tipIndex) => (
+                <View key={tipIndex} className={styles.tipItem}>
+                  <Text
+                    className={
+                      tip.strong ? styles.tipTextStrong : styles.tipText
+                    }
+                  >
+                    {tip.text}
+                  </Text>
+                </View>
+              ))}
+            </View>
+          )}
+        </View>
+      ))}
     </View>
   );
 }