feat: 申请加入、退款政策、支付倒计时、详情页发布者信息展示

src/components/refundPopup/index.module.scss

@@ -20,9 +20,9 @@
 
   .specTips {
     padding-bottom: 20px;
-    color: rgba(60, 60, 67, 0.60);
+    color: rgba(60, 60, 67, 0.6);
     text-align: center;
-    font-feature-settings: 'liga' off, 'clig' off;
+    font-feature-settings: "liga" off, "clig" off;
     font-family: "PingFang SC";
     font-size: 16px;
     font-style: normal;
@@ -42,22 +42,55 @@
       align-items: center;
       color: #000;
       text-align: center;
-      font-feature-settings:
-        "liga" off,
-        "clig" off;
+      font-feature-settings: "liga" off, "clig" off;
       font-family: "PingFang SC";
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
       line-height: 20px;
       border-top: 1px solid rgba(0, 0, 0, 0.06);
+      &.pastItem {
+        color: #3c3c43;
+      }
+
+      &.currentItem {
+        position: relative;
+        &::before {
+          content: "";
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 3px;
+          height: 100%;
+          background: #007aff;
+          z-index: 0;
+        }
+        &::after {
+          content: "";
+          position: absolute;
+          left: 3px;
+          top: 15px;
+          width: 0;
+          height: 0;
+          border-style: solid;
+          border-width: 3px 0 3px 6px;
+          border-color: transparent transparent transparent #007bff;
+          z-index: 0;
+        }
+        .currentTag {
+          color: #007aff;
+          font-size: 12px;
+          font-weight: 600;
+          line-height: 20px;
+          font-family: "pingfang SC";
+          text-align: left;
+        }
+      }
 
       &:nth-child(1) {
         color: #000;
         text-align: center;
-        font-feature-settings:
-          "liga" off,
-          "clig" off;
+        font-feature-settings: "liga" off, "clig" off;
         font-family: "PingFang SC";
         font-size: 14px;
         font-style: normal;
@@ -72,6 +105,11 @@
         padding: 10px 12px;
       }
 
+      .time {
+        text-align: left;
+        padding-left: 30px;
+      }
+
       .rule {
         border-left: 1px solid rgba(0, 0, 0, 0.06);
       }
@@ -92,7 +130,7 @@
     .title {
       color: #000;
       text-align: center;
-      font-feature-settings: 'liga' off, 'clig' off;
+      font-feature-settings: "liga" off, "clig" off;
       font-family: "PingFang SC";
       font-size: 16px;
       font-style: normal;
@@ -117,11 +155,11 @@
     height: 52px;
     border-radius: 16px;
     border: 1px solid rgba(0, 0, 0, 0.06);
-    box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.10);
+    box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(16px);
     color: #fff;
     background-color: #000;
-    font-feature-settings: 'liga' off, 'clig' off;
+    font-feature-settings: "liga" off, "clig" off;
     font-family: "PingFang SC";
     font-size: 16px;
     font-style: normal;
@@ -129,4 +167,4 @@
     line-height: 20px;
     letter-spacing: -0.23px;
   }
-}
+}

src/components/refundPopup/index.tsx

@@ -6,6 +6,7 @@ import React, {
 } from "react";
 import { View, Text, Button, Image } from "@tarojs/components";
 import Taro from "@tarojs/taro";
+import classnames from "classnames";
 import dayjs from "dayjs";
 import { CommonPopup } from "@/components";
 import orderService from "@/services/orderService";
@@ -47,18 +48,25 @@ function genRefundNotice(refund_policy) {
 
 function renderCancelContent(checkOrderInfo) {
   const { refund_policy = [] } = checkOrderInfo;
+  const current = dayjs();
   const policyList = [
     {
       time: "申请退款时间",
       rule: "退款规则",
     },
-    ...refund_policy.map((item) => {
+    ...refund_policy.map((item, index) => {
+      const isLast = index === refund_policy.length - 1;
       return {
         time: item.application_time,
         rule: item.refund_rule,
+        beforeCurrent: isLast
+          ? true
+          : current.isBefore(dayjs(item.deadline_formatted)),
       };
     }),
   ];
+  console.log("policyList", policyList);
+  const targetIndex = policyList.findIndex((item) => item.beforeCurrent);
   const { notice } = genRefundNotice(refund_policy);
   return (
     <View className={styles.refundPolicy}>
@@ -69,8 +77,22 @@ function renderCancelContent(checkOrderInfo) {
       {/* 订单信息摘要 */}
       <View className={styles.policyList}>
         {policyList.map((item, index) => (
-          <View key={index} className={styles.policyItem}>
-            <View className={styles.time}>{item.time}</View>
+          <View
+            key={index}
+            className={classnames(
+              styles.policyItem,
+              targetIndex > index && index !== 0 ? styles.pastItem : "",
+              targetIndex === index ? styles.currentItem : ""
+            )}
+          >
+            <View className={styles.time}>
+              {targetIndex === index && (
+                <View className={styles.currentTag}>
+                  <Text>当前时间段</Text>
+                </View>
+              )}
+              <Text>{item.time}</Text>
+            </View>
             <View className={styles.rule}>{item.rule}</View>
           </View>
         ))}