From f0f4bc8dcbd2e2c9815a6246cb660af6363f3e87 Mon Sep 17 00:00:00 2001
From: wangsongsole <wangsongsole@126.com>
Date: Tue, 11 Jul 2023 17:10:48 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=AA=20optimize:=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=BA=A2=E5=8C=85=E6=A8=A1=E6=9D=BF=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/redPackets/mobileComponent.jsx | 67 +------------------
 src/components/redPackets/timeComponent.jsx   | 66 ++++++++++++++++++
 .../redPackets/ysf-mobileComponent.jsx        | 66 +-----------------
 3 files changed, 70 insertions(+), 129 deletions(-)
 create mode 100644 src/components/redPackets/timeComponent.jsx

diff --git a/src/components/redPackets/mobileComponent.jsx b/src/components/redPackets/mobileComponent.jsx
index 42da719c..a1618a99 100644
--- a/src/components/redPackets/mobileComponent.jsx
+++ b/src/components/redPackets/mobileComponent.jsx
@@ -1,14 +1,8 @@
 import "./index.less"
 import { Placeholder } from "zent"
-import { useState, useEffect } from "react"
-import { sortWeeks } from "@/tools/utils.js"
+import TimeComponent from "./timeComponent"
 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"
diff --git a/src/components/redPackets/timeComponent.jsx b/src/components/redPackets/timeComponent.jsx
new file mode 100644
index 00000000..27ed9dfa
--- /dev/null
+++ b/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()
+}
diff --git a/src/components/redPackets/ysf-mobileComponent.jsx b/src/components/redPackets/ysf-mobileComponent.jsx
index f3a46174..b0e73408 100644
--- a/src/components/redPackets/ysf-mobileComponent.jsx
+++ b/src/components/redPackets/ysf-mobileComponent.jsx
@@ -1,70 +1,8 @@
 import "./index.less"
 import { Placeholder } from "zent"
-import { useState, useEffect } from "react"
-import { sortWeeks } from "@/tools/utils.js"
+import TimeComponent from "./timeComponent"
 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"