HandOver-liuwu
/
frontend
mirror of https://codeup.aliyun.com/lsxd/marketing/frontend.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

💪 optimize: 优化红包模板代码

This commit is contained in:
wangsongsole 2023-07-11 17:10:48 +08:00
parent dbd5d20640
commit f0f4bc8dcb
3 changed files with 70 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/redPackets/mobileComponent.jsx
View File

@ -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"

66
src/components/redPackets/timeComponent.jsx Normal file
View File

@ -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()
}

66
src/components/redPackets/ysf-mobileComponent.jsx
View File

@ -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"