From d5a8223a00c2ec20fb86f404b8a81d4b49dfc8aa Mon Sep 17 00:00:00 2001 From: wangsongsole Date: Wed, 22 Nov 2023 10:29:19 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=96=B0=E5=A2=9E=E6=94=AF?= =?UTF-8?q?=E4=BB=98=E5=AE=9DH5=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=A8=A1?= =?UTF-8?q?=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/knockGold/index.jsx | 48 ++-- src/components/knockGold/index.less | 10 + .../knockGold/zfb-mobileComponent.jsx | 91 +++++++ src/components/redPackets/index.jsx | 48 ++-- src/components/redPackets/index.less | 232 +++++++++++++++++- .../redPackets/zfb-mobileComponent.jsx | 107 ++++++++ 6 files changed, 500 insertions(+), 36 deletions(-) create mode 100644 src/components/knockGold/zfb-mobileComponent.jsx create mode 100644 src/components/redPackets/zfb-mobileComponent.jsx diff --git a/src/components/knockGold/index.jsx b/src/components/knockGold/index.jsx index bd6e83a8..edfd0dac 100644 --- a/src/components/knockGold/index.jsx +++ b/src/components/knockGold/index.jsx @@ -30,6 +30,7 @@ import MobileComponent from "./mobileComponent" import rules from "./rules" import WangEditor from "./wangEditor" import YSFMobileComponent from "./ysf-mobileComponent" +import ZFBMobileComponent from "./zfb-mobileComponent" const cardTypeList = [ { key: "1", text: "借记卡" }, { key: "2", text: "信用卡" } @@ -743,6 +744,16 @@ export default class addKnockGold extends Component { if (newData.length < 1) this.setState({ warningInput: "" }) } + switchComponents() { + if (this.state.model.channel == 1 && this.state.model.receive_mode === 2) { + return + } + if (this.state.model.channel == 3) { + return + } + return + } + render() { return (
@@ -787,18 +798,26 @@ export default class addKnockGold extends Component { 福建兴旺 - - { - this.onHandleChange(target.value, "receive_mode") - }} - value={this.state.model.receive_mode} + {this.state.model.channel == 1 ? ( + - 支付宝 - H5页面 - - + { + this.onHandleChange(target.value, "receive_mode") + }} + value={this.state.model.receive_mode} + > + 官方领取 + 账号领取 + + + ) : ( + <> + )} { @@ -1500,12 +1519,7 @@ export default class addKnockGold extends Component { - - {this.state.model.channel != 3 ? ( - - ) : ( - - )} + {this.switchComponents()}
) } diff --git a/src/components/knockGold/index.less b/src/components/knockGold/index.less index 314092f0..69ce6a5f 100644 --- a/src/components/knockGold/index.less +++ b/src/components/knockGold/index.less @@ -638,6 +638,16 @@ } } +.zfb-knockGoldViews { + background-color: #418be0 !important; + + .left, + .right, + .form-button { + background: #418be0 !important; + } +} + .r-f { margin: 5px 0; font-size: 11px; diff --git a/src/components/knockGold/zfb-mobileComponent.jsx b/src/components/knockGold/zfb-mobileComponent.jsx new file mode 100644 index 00000000..af897ce7 --- /dev/null +++ b/src/components/knockGold/zfb-mobileComponent.jsx @@ -0,0 +1,91 @@ +import { Placeholder } from "zent" +import "./index.less" +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 }) => { + /* 动态font */ + function fonts() { + const { denomination, reduce_amount } = data + const defaultCss = { a: "30px" } + const count = + String(parseFloat(denomination)).length + String(parseFloat(reduce_amount)).length + 1 + if (count > 12) { + return { + a: 30 - (count - 12) * 1.8 + "px" + } + } else { + return defaultCss + } + } + + return ( +
+ +
+

{data.batch_goods_name || "支付宝立减金"}

+
+

+ 满{data.denomination ? parseFloat(data.denomination) : 100.1}元减 + {data.reduce_amount ? parseFloat(data.reduce_amount) : 99.99}元 +

+

+ 请在  + {data.entry_time[0] || "2023-12-30 59:59:59"} ~{" "} + {data.entry_time[1] || "2023-12-30 59:59:59"} +  内领取 +

+

+ + {data?.card_type.length > 0 + ? data.card_type.map((item) => (item === "1" ? "借记卡" : "信用卡") + " ") + : "xxx"} + +

+
+
+

支付宝账号

+ + +

您可在支付宝的个人信息中查看【支付宝账号】

+ +
+
+ + + +
+
+ {data.instruction || data.usable_time ? ( + <> + +

活动说明

+

+ + ) : ( + + )} +
+
+
+ ) +} diff --git a/src/components/redPackets/index.jsx b/src/components/redPackets/index.jsx index d248d4ce..2670cf8e 100644 --- a/src/components/redPackets/index.jsx +++ b/src/components/redPackets/index.jsx @@ -30,6 +30,7 @@ import rules, { additionalRules } from "./rules" import { earlyPerList, model, receiveTypeList, week, ysf } from "./static" import WangEditor from "./wangEditor" import YSFMobileComponent from "./ysf-mobileComponent" +import ZFBMobileComponent from "./zfb-mobileComponent" const initArray = (targetNum) => { return Array.from({ length: targetNum }, (_, index) => index) } @@ -507,6 +508,16 @@ export default class addKnockGold extends Component { return "请输入" } + switchComponents() { + if (this.state.model.channel == 1 && this.state.model.receive_mode === 2) { + return + } + if (this.state.model.channel == 3) { + return + } + return + } + render() { return (
@@ -551,18 +562,26 @@ export default class addKnockGold extends Component { 随机 - - { - this.onHandleChange(target.value, "receive_mode") - }} - value={this.state.model.receive_mode} + {this.state.model.channel === 1 ? ( + - 支付宝 - H5页面 - - + { + this.onHandleChange(target.value, "receive_mode") + }} + value={this.state.model.receive_mode} + > + 官方领取 + 账号领取 + + + ) : ( + <> + )} - - {this.state.model.channel !== 3 ? ( - - ) : ( - - )} + {this.switchComponents()}
) } diff --git a/src/components/redPackets/index.less b/src/components/redPackets/index.less index 773256bf..73bcf748 100644 --- a/src/components/redPackets/index.less +++ b/src/components/redPackets/index.less @@ -388,8 +388,6 @@ } } - - #redPackets { & { border: 0; @@ -635,4 +633,234 @@ } } +} + +#zfb-mobileComponent { + position: fixed !important; + top: 130px !important; + right: 90px !important; + border: 1px solid #e4e4e4; + border-radius: 5px; + font-size: 16px; + width: 375px !important; + box-sizing: border-box; + padding: 0 !important; + z-index: 1003; + overflow: auto; + scrollbar-width: none; + background-color: rgb(250, 67, 59); + + &::-webkit-scrollbar { + display: none + } + + .form { + margin: -20px 0 30px; + color: #fff; + + .but { + max-width: 100%; + } + } + + .mt0 { + margin-top: 0 !important; + } + + .form-label { + font-size: 18px; + margin-left: 5px; + } + + .form-input { + width: 100%; + height: 40px; + border-radius: 50px; + outline: 0; + border: .16px solid rgb(217, 216, 218); + background: #fffefe; + padding: 0 10px; + box-sizing: border-box; + margin: 10px 0; + font-size: 12px; + } + + .form-input::placeholder { + color: rgb(204, 205, 209); + font-size: 14px; + } + + .form-note { + font-size: 12px; + margin-left: 5px; + margin-bottom: 20px; + } + + .top { + height: 500px; + position: relative; + } + + .box { + padding: 15px 8px 20px; + box-sizing: border-box; + min-height: 667px; + width: 100%; + background: url('https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/zfb-red-banner.png') no-repeat top center; + background-size: 100%; + } + + .effect_date { + font-size: 11px; + color: #FFC49C; + position: absolute; + top: 16%; + width: 100%; + text-align: center; + } + + .effect_date>span { + background: linear-gradient(to left top, #ff6049, #fd322a); + border: 1px solid #ffc3a5; + border-radius: 20px; + padding: 4px 12px; + } + + .bt { + top: 62%; + left: 22.5%; + position: absolute; + width: 200px; + } + + .title { + font-size: 28px; + font-weight: bold; + color: #fff; + width: 100%; + text-align: center; + position: absolute; + top: 5%; + } + + .type { + color: #FD3B2D; + font-size: 10px; + top: 40.2%; + width: 100%; + text-align: center; + position: absolute; + } + + .type>span { + padding: 4px 12px; + background-color: #fdc9a2; + border-radius: 20px; + } + + .money { + font-weight: bold; + color: #FE0F0B; + font-size: 40px; + top: 29.5%; + position: absolute; + width: 100%; + height: 42px; + display: flex; + align-items: flex-end; + justify-content: center; + } + + .tag { + font-size: 16px; + display: inline-block; + margin-bottom: 4px; + } + + .available_time { + text-align: left; + margin-bottom: 8px; + + h3 { + font-size: 14px; + color: #171717; + padding-bottom: 5px; + margin-top: 5px; + box-sizing: border-box; + + } + + .timeList { + display: grid; + grid-template-columns: repeat(3, 33.33%); + text-align: center; + + li { + margin: 3px 0; + font-size: 12px; + color: #a8a8a8; + } + + } + } + + .instruction-text { + font-size: 14px; + color: #171717; + padding-bottom: 5px; + margin-top: 5px; + box-sizing: border-box; + } + + .instruction-box { + width: 100%; + display: flex; + flex-direction: column; + } + + .instruction { + width: 100%; + background: url('https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_img_text.png') no-repeat top center; + background-size: 100% 100%; + font-size: 12px; + color: #959595; + padding: 0 10px 10px; + box-sizing: border-box; + line-height: 20px; + } + + + .instruction-header { + width: 100%; + height: 43px; + background: url('https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_img_header.png') no-repeat; + background-size: 100%; + } + + .TextBlock { + margin-top: 20px; + } + + .notice { + width: 170px; + margin-bottom: 2px; + } + + .instruction-2 { + margin-top: 10px; + } + + .scroll { + height: 380px; + overflow: auto; + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none + } + } + + .center { + text-align: center; + } } \ No newline at end of file diff --git a/src/components/redPackets/zfb-mobileComponent.jsx b/src/components/redPackets/zfb-mobileComponent.jsx new file mode 100644 index 00000000..1a144d19 --- /dev/null +++ b/src/components/redPackets/zfb-mobileComponent.jsx @@ -0,0 +1,107 @@ +import { Placeholder } from "zent" +import "./index.less" +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 }) => { + /* 动态font */ + function fonts() { + const { cash_amount_type, min_denomination, max_denomination } = data + const defaultCss = { b: "20px", a: "40px" } + if (cash_amount_type === "2") { + const count = + String(parseFloat(min_denomination)).length + + String(parseFloat(max_denomination)).length + + 1 + if (count > 6) { + return { + a: 32 - (count - 6) * 1.1 + "px", + b: 20 - (count - 6) + "px" + } + } else { + return defaultCss + } + } else { + return defaultCss + } + } + + return ( +
+
+
+

{data.batch_goods_name || 福利来袭  红包兑换}

+

+ + 红包有限期截止: + {data.effect_date[1] || "2023-12-30 23:59:59"} + +

+

+ + ￥ + + {data.cash_amount_type === "1" + ? parseFloat(data.denomination || 0.01) + : `${parseFloat(data.min_denomination || 0.01)}~${parseFloat( + data.max_denomination || 88.88 + )}`} +

+

+ {data.cash_amount_type === "1" ? "固额红包" : "随机红包"} +

+
+
+

支付宝账号

+ + +

您可在支付宝的个人信息中查看【支付宝账号】

+ +
+
+
+
+
+

+ +

+ + {data.instruction || [1, 2, 3].includes(data.receive_type) ? ( + <> + +

使用规则

+

+ + ) : ( + + )} +
+
+
+
+
+ ) +}