✨ feat: 新增支付宝H5移动端模板

2023-11-22 10:29:19 +08:00 · 2023-11-22 10:29:19 +08:00 · d5a8223a00
parent 7937760b15
commit d5a8223a00
6 changed files with 500 additions and 36 deletions
--- 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 <ZFBMobileComponent data={this.state.model} />
+    }
+    if (this.state.model.channel == 3) {
+      return <YSFMobileComponent data={this.state.model} />
+    }
+    return <MobileComponent data={this.state.model} />
+  }
+
  render() {
    return (
      <div id="addKnockGold">
@ -787,18 +798,26 @@ export default class addKnockGold extends Component {
                <RadioButton value={"voucher_wechat_fjxw"}>福建兴旺</RadioButton>
              </RadioGroup>
            </FormItem>
-            <FormItem labelname="领取方式" prop="receive_mode" id="receive_mode" key="receive_mode">
-              <RadioGroup
-                disabled={this.state.model.channel != 1 ? true : false}
-                onChange={({ target }) => {
-                  this.onHandleChange(target.value, "receive_mode")
-                }}
-                value={this.state.model.receive_mode}
+            {this.state.model.channel == 1 ? (
+              <FormItem
+                labelname="领取方式"
+                prop="receive_mode"
+                id="receive_mode"
+                key="receive_mode"
              >
-                <RadioButton value={1}>支付宝</RadioButton>
-                <RadioButton value={2}>H5页面</RadioButton>
-              </RadioGroup>
-            </FormItem>
+                <RadioGroup
+                  onChange={({ target }) => {
+                    this.onHandleChange(target.value, "receive_mode")
+                  }}
+                  value={this.state.model.receive_mode}
+                >
+                  <RadioButton value={1}>官方领取</RadioButton>
+                  <RadioButton value={2}>账号领取</RadioButton>
+                </RadioGroup>
+              </FormItem>
+            ) : (
+              <></>
+            )}
            <FormItem labelname="立减金平台批次号" prop="channel_activity_id" id="batch_number">
              <Ipt
                onChange={(value) => {
@ -1500,12 +1519,7 @@ export default class addKnockGold extends Component {
            </FormItem>
          </Form>
        </Card>
-
-        {this.state.model.channel != 3 ? (
-          <MobileComponent data={this.state.model} />
-        ) : (
-          <YSFMobileComponent data={this.state.model} />
-        )}
+        {this.switchComponents()}
      </div>
    )
  }
--- 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;
--- a/src/components/knockGold/zfb-mobileComponent.jsx
+++ 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 (
+    <div id="ysf-knockGoldViews" className="mobile zfb-knockGoldViews">
+      <img
+        className="bubble"
+        src="https://lsxd-zfb-reduction.oss-cn-hangzhou.aliyuncs.com/img/logo.png"
+        alt=""
+      />
+      <div className="content">
+        <p className="title">{data.batch_goods_name || "支付宝立减金"}</p>
+        <div className="information">
+          <p className="money" style={{ fontSize: fonts().a }}>
+            满{data.denomination ? parseFloat(data.denomination) : 100.1}元减
+            {data.reduce_amount ? parseFloat(data.reduce_amount) : 99.99}元
+          </p>
+          <p className="information-p2">
+            请在&nbsp;
+            {data.entry_time[0] || "2023-12-30 59:59:59"} ~{" "}
+            {data.entry_time[1] || "2023-12-30 59:59:59"}
+            &nbsp;内领取
+          </p>
+          <p className="type">
+            <span>
+              {data?.card_type.length > 0
+                ? data.card_type.map((item) => (item === "1" ? "借记卡" : "信用卡") + " ")
+                : "xxx"}
+            </span>
+          </p>
+        </div>
+        <div className="form">
+          <p className="form-label">支付宝账号</p>
+          <input className="form-input" disabled type="text" placeholder="请输入支付宝账号" />
+          <input
+            className="form-input mt0"
+            disabled
+            type="text"
+            placeholder="请再次输入支付宝账号"
+          />
+          <p className="form-note">您可在支付宝的个人信息中查看【支付宝账号】</p>
+          <button className="form-button">立即领取</button>
+        </div>
+        <div className="segmentation">
+          <i className="left"></i>
+          <i className="middle"></i>
+          <i className="right"></i>
+        </div>
+        <div className="illustrate">
+          {data.instruction || data.usable_time ? (
+            <>
+              <TimeComponent data={data} />
+              <h3 className="illustrate-title">活动说明</h3>
+              <p
+                className="illustrate-text"
+                dangerouslySetInnerHTML={{
+                  __html: data.instruction
+                }}
+              ></p>
+            </>
+          ) : (
+            <Placeholder.TextBlock
+              className="TextBlock"
+              animate
+              widths={widths}
+              rows={12}
+              dashed={false}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
--- 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 <ZFBMobileComponent data={this.state.model} />
+    }
+    if (this.state.model.channel == 3) {
+      return <YSFMobileComponent data={this.state.model} />
+    }
+    return <MobileComponent data={this.state.model} />
+  }
+
  render() {
    return (
      <div id="redPackets">
@ -551,18 +562,26 @@ export default class addKnockGold extends Component {
                <RadioButton value={"2"}>随机</RadioButton>
              </RadioGroup>
            </FormItem>
-            <FormItem labelname="领取方式" prop="receive_mode" id="receive_mode" key="receive_mode">
-              <RadioGroup
-                disabled={this.state.model.channel != 1 ? true : false}
-                onChange={({ target }) => {
-                  this.onHandleChange(target.value, "receive_mode")
-                }}
-                value={this.state.model.receive_mode}
+            {this.state.model.channel === 1 ? (
+              <FormItem
+                labelname="领取方式"
+                prop="receive_mode"
+                id="receive_mode"
+                key="receive_mode"
              >
-                <RadioButton value={1}>支付宝</RadioButton>
-                <RadioButton value={2}>H5页面</RadioButton>
-              </RadioGroup>
-            </FormItem>
+                <RadioGroup
+                  onChange={({ target }) => {
+                    this.onHandleChange(target.value, "receive_mode")
+                  }}
+                  value={this.state.model.receive_mode}
+                >
+                  <RadioButton value={1}>官方领取</RadioButton>
+                  <RadioButton value={2}>账号领取</RadioButton>
+                </RadioGroup>
+              </FormItem>
+            ) : (
+              <></>
+            )}
            <FormItem labelname="红包批次号" prop="channel_activity_id" id="batch_number">
              <Ipt
                disabled={true}
@ -1116,12 +1135,7 @@ export default class addKnockGold extends Component {
            </FormItem>
          </Form>
        </Card>
-
-        {this.state.model.channel !== 3 ? (
-          <MobileComponent data={this.state.model} />
-        ) : (
-          <YSFMobileComponent data={this.state.model} />
-        )}
+        {this.switchComponents()}
      </div>
    )
  }
--- 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;
+	}
 }
--- a/src/components/redPackets/zfb-mobileComponent.jsx
+++ 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 (
+    <div id="zfb-mobileComponent" className="mobile">
+      <div className="box">
+        <div className="top">
+          <p className="title">{data.batch_goods_name || <span>福利来袭 &nbsp;红包兑换</span>}</p>
+          <p className="effect_date">
+            <span>
+              红包有限期截止:
+              {data.effect_date[1] || "2023-12-30 23:59:59"}
+            </span>
+          </p>
+          <p className="money" style={{ fontSize: fonts().a }}>
+            <span className="tag" style={{ fontSize: fonts().b }}>
+              ￥
+            </span>
+            {data.cash_amount_type === "1"
+              ? parseFloat(data.denomination || 0.01)
+              : `${parseFloat(data.min_denomination || 0.01)}~${parseFloat(
+                  data.max_denomination || 88.88
+                )}`}
+          </p>
+          <p className="type">
+            <span>{data.cash_amount_type === "1" ? "固额红包" : "随机红包"}</span>
+          </p>
+        </div>
+        <div className="form">
+          <p className="form-label">支付宝账号</p>
+          <input className="form-input" disabled type="text" placeholder="请输入支付宝账号" />
+          <input
+            className="form-input mt0"
+            disabled
+            type="text"
+            placeholder="请再次输入支付宝账号"
+          />
+          <p className="form-note">您可在支付宝的个人信息中查看【支付宝账号】</p>
+          <img
+            src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/zfb-red-but.png"
+            class="but"
+            alt=""
+          />
+        </div>
+        <div className="instruction-box">
+          <div className="instruction-header"></div>
+          <div className="instruction">
+            <div className="instruction-1">
+              <p className="center">
+                <img
+                  className="notice"
+                  src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/common_title_notice.png"
+                  alt=""
+                />
+              </p>
+
+              {data.instruction || [1, 2, 3].includes(data.receive_type) ? (
+                <>
+                  <TimeComponent data={data} />
+                  <h3 className="instruction-text">使用规则</h3>
+                  <p
+                    className="scroll"
+                    dangerouslySetInnerHTML={{
+                      __html: data.instruction
+                    }}
+                  ></p>
+                </>
+              ) : (
+                <Placeholder.TextBlock
+                  className="TextBlock"
+                  animate
+                  widths={widths}
+                  rows={20}
+                  dashed={false}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}