💪 optimize: 优化红包模板代码

src/components/redPackets/mobileComponent.jsx

@@ -1,14 +1,8 @@
 import "./index.less"
 import { Placeholder } from "zent"
-import { useState, useEffect } from "react"
+import TimeComponent from "./timeComponent"
-import { sortWeeks } from "@/tools/utils.js"
 const widths = [24, 100, 100, 100, 80, 100, 100, 100, 80, 100, 100, 100, 80, 100, 100, 100, 100]
 export default ({ data }) => {
-  const [newWeek, setNewWeek] = useState([])
-  useEffect(() => {
-    setNewWeek(sortWeeks(data.receive_rule.week))
-  }, [data.receive_rule.week, data.receive_irregular])
-
   /* 动态font */
   function fonts() {
     const { cash_amount_type, min_denomination, max_denomination } = data
@@ -31,63 +25,6 @@ export default ({ data }) => {
     }
   }
 
-  function createElement() {
-    switch (data.receive_type) {
-      case 1:
-        return (
-          <div className="available_time">
-            <h3>领取时间</h3>
-            <ul className="timeList">
-              {newWeek?.map((item) => (
-                <li key={item}>
-                  {item}
-                  {data.receive_rule.time.map((item1, index) => {
-                    if (item1[1])
-                      return (
-                        <p key={index} style={{ textAlign: "center", marginTop: "5px" }}>
-                          {item1[0]}~{item1[1]}
-                        </p>
-                      )
-                  })}
-                </li>
-              ))}
-            </ul>
-          </div>
-        )
-      case 2:
-        return (
-          <div className="available_time">
-            <h3>领取时间</h3>
-            <ul className="timeList">
-              {data.receive_irregular?.map((item) => (
-                <li key={item.data}>
-                  {item.date}
-                  {item.time.map((item1) => {
-                    if (item1[1])
-                      return (
-                        <p style={{ marginTop: "5px" }} key={item1[1]}>
-                          {item1[0]}~{item1[1]}
-                        </p>
-                      )
-                  })}
-                </li>
-              ))}
-            </ul>
-          </div>
-        )
-      case 3:
-        return (
-          <div className="available_time">
-            <h3>领取时间</h3>
-            <ul className="timeList">
-              {data.receive_day?.map((item) => (
-                <li key={item.item}>{item.join(" ~ ")}</li>
-              ))}
-            </ul>
-          </div>
-        )
-    }
-  }
   return (
     <div id="redPacketsViews" className="mobile">
       <div className="box">
@@ -132,7 +69,7 @@ export default ({ data }) => {
 
               {data.instruction || [1, 2, 3].includes(data.receive_type) ? (
                 <>
-                  {createElement()}
+                  <TimeComponent data={data} />
                   <h3 className="instruction-text">使用规则</h3>
                   <p
                     className="scroll"

src/components/redPackets/timeComponent.jsx

@@ -0,0 +1,66 @@
+import { useState, useEffect } from "react"
+import { sortWeeks } from "@/tools/utils.js"
+export default function ({ data }) {
+  const [newWeek, setNewWeek] = useState([])
+  useEffect(() => {
+    setNewWeek(sortWeeks(data.receive_rule.week))
+  }, [data.receive_rule.week, data.receive_irregular])
+
+  function createElement() {
+    if (data.receive_type === 1) {
+      return (
+        <div className="available_time">
+          <p className="available_time_text">领取时间</p>
+          <ul className="timeList">
+            {newWeek?.map((item) => (
+              <li key={item}>
+                {item}
+                {data.receive_rule.time.map((item1, index) => {
+                  if (item1[1])
+                    return (
+                      <p key={index} style={{ textAlign: "center", marginTop: "5px" }}>
+                        {item1[0]}~{item1[1]}
+                      </p>
+                    )
+                })}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )
+    } else if (data.receive_type === 2) {
+      return (
+        <div className="available_time">
+          <p className="available_time_text">领取时间</p>
+          <ul className="timeList">
+            {data.receive_irregular?.map((item) => (
+              <li key={item.data}>
+                {item.date}
+                {item.time.map((item1) => {
+                  if (item1[1])
+                    return (
+                      <p style={{ marginTop: "5px" }} key={item1[1]}>
+                        {item1[0]}~{item1[1]}
+                      </p>
+                    )
+                })}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )
+    } else if (data.receive_type === 3) {
+      return (
+        <div className="available_time">
+          <p className="available_time_text">领取时间</p>
+          <ul className="timeList">
+            {data.receive_day?.map((item) => (
+              <li key={item.item}>{item.join(" ~ ")}</li>
+            ))}
+          </ul>
+        </div>
+      )
+    }
+  }
+  return createElement()
+}

src/components/redPackets/ysf-mobileComponent.jsx

@@ -1,70 +1,8 @@
 import "./index.less"
 import { Placeholder } from "zent"
-import { useState, useEffect } from "react"
+import TimeComponent from "./timeComponent"
-import { sortWeeks } from "@/tools/utils.js"
 const widths = [24, 100, 100, 100, 80, 100, 100, 100, 80, 100, 100, 100, 80, 100, 100, 100, 100]
 export default ({ data }) => {
-  const [newWeek, setNewWeek] = useState([])
-  useEffect(() => {
-    setNewWeek(sortWeeks(data.receive_rule.week))
-  }, [data.receive_rule.week, data.receive_irregular])
-
-  function createElement() {
-    if (data.receive_type === 1) {
-      return (
-        <div className="available_time">
-          <p className="available_time_text">领取时间</p>
-          <ul className="timeList">
-            {newWeek?.map((item) => (
-              <li key={item}>
-                {item}
-                {data.receive_rule.time.map((item1, index) => {
-                  if (item1[1])
-                    return (
-                      <p key={index} style={{ textAlign: "center", marginTop: "5px" }}>
-                        {item1[0]}~{item1[1]}
-                      </p>
-                    )
-                })}
-              </li>
-            ))}
-          </ul>
-        </div>
-      )
-    } else if (data.receive_type === 2) {
-      return (
-        <div className="available_time">
-          <p className="available_time_text">领取时间</p>
-          <ul className="timeList">
-            {data.receive_irregular?.map((item) => (
-              <li key={item.data}>
-                {item.date}
-                {item.time.map((item1) => {
-                  if (item1[1])
-                    return (
-                      <p style={{ marginTop: "5px" }} key={item1[1]}>
-                        {item1[0]}~{item1[1]}
-                      </p>
-                    )
-                })}
-              </li>
-            ))}
-          </ul>
-        </div>
-      )
-    } else if (data.receive_type === 3) {
-      return (
-        <div className="available_time">
-          <p className="available_time_text">领取时间</p>
-          <ul className="timeList">
-            {data.receive_day?.map((item) => (
-              <li key={item.item}>{item.join(" ~ ")}</li>
-            ))}
-          </ul>
-        </div>
-      )
-    }
-  }
   return (
     <div id="ysf-redPacketsViews" className="mobile">
       <img
@@ -109,7 +47,7 @@ export default ({ data }) => {
         <div className="illustrate">
           {data.instruction || [1, 2, 3].includes(data.receive_type) ? (
             <>
-              {createElement()}
+              <TimeComponent data={data} />
               <p className="illustrate-title">活动说明</p>
               <p
                 className="illustrate-text"