1) 增加优惠券立减金模版

src/components/knockGold/mobileComponent.jsx

@@ -1,122 +1,160 @@
-import { Placeholder } from 'zent'
+import { Placeholder } from "zent";
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
-import './index.less'
+import { useSetState } from "ahooks";
-import { sortWeeks } from '@/utils'
+import "./index.less";
-const widths = [24, 100, 100, 100, 80, 24, 100, 100, 100, 80, 100, 100, 100, 80]
+import { sortWeeks } from "@/utils";
+const widths = [
+  24, 100, 100, 100, 80, 24, 100, 100, 100, 80, 100, 100, 100, 80,
+];
 export default ({ data }) => {
-  const [newWeek, setNewWeek] = useState([])
+  const [newWeek, setNewWeek] = useState([]);
+  const [state, setState] = useSetState({
+    keyType: sessionStorage.getItem("keyType")
+      ? Number(sessionStorage.getItem("keyType"))
+      : 1,
+  });
+
   useEffect(() => {
-    setNewWeek(sortWeeks(data.ruleWeek))
+    setNewWeek(sortWeeks(data.ruleWeek));
-  }, [data.ruleWeek])
+  }, [data.ruleWeek]);
+
+  function couponH5() {
+    return (
+      <div>
+        <div
+          className="foot-mobile-box"
+          style={{ borderTop: "1px solid #f0f0f0", padding: "10px 0" }}
+        >
+          <div className="mobile-center">
+            <div>
+              <p className="mobile-money foot-money">
+                <span style={{ fontSize: "14px" }}>¥</span> {data.denomination}
+              </p>
+              <p className="foot-mobile-infos">共省¥ {data.reduce_amount}</p>
+            </div>
+          </div>
+          <div className="mobile-pay-btn">立即支付</div>
+        </div>
+      </div>
+    );
+  }
 
   function createElement() {
-    if (data.usable_time === 'week') {
+    if (data.usable_time === "week") {
       return (
-        <div className='available_time'>
+        <div className="available_time">
           <h3>可用时间</h3>
-          <ul className='timeList'>
+          <ul className="timeList">
             {newWeek?.map((item) => (
               <li>
                 {item}
                 {data.ruleDate.map((item1) => {
                   if (item1[1])
                     return (
-                      <p style={{ textAlign: 'center', marginTop: '5px' }}>
+                      <p style={{ textAlign: "center", marginTop: "5px" }}>
                         {item1[0]}~{item1[1]}
                       </p>
-                    )
+                    );
                 })}
               </li>
             ))}
           </ul>
         </div>
-      )
+      );
-    } else if (data.usable_time === 'irregular') {
+    } else if (data.usable_time === "irregular") {
       return (
-        <div className='available_time'>
+        <div className="available_time">
           <h3>可用时间</h3>
-          <ul className='timeList flex'>
+          <ul className="timeList flex">
             {data.irregularDate?.map((item) => (
               <li>
-                {item.join(' 至 ')}
+                {item.join(" 至 ")}
                 {data.irregularTime.map((item1) => {
                   if (item1[1])
                     return (
-                      <p style={{ marginTop: '5px' }}>
+                      <p style={{ marginTop: "5px" }}>
                         {item1[0]}~{item1[1]}
                       </p>
-                    )
+                    );
                 })}
               </li>
             ))}
           </ul>
         </div>
-      )
+      );
     }
   }
 
   return (
-    <div id='reduceKnockGold' className='mobile'>
+    <div id="reduceKnockGold" className="mobile">
-      <div className='couponShow'>
+      <div className="couponShow">
-        <div className='coupon-left'>
+        <div className="coupon-left">
-          <p className='coupon_money'>
+          <p className="coupon_money">
             <span>￥</span>
-            {data.reduce_amount ? data.reduce_amount : '0.00'}
+            {data.reduce_amount ? data.reduce_amount : "0.00"}
           </p>
-          <p className='full_money'>
+          <p className="full_money">
-            满{data.denomination ? data.denomination : '0.00'}可用
+            满{data.denomination ? data.denomination : "0.00"}可用
           </p>
         </div>
-        <div className='coupon-right'>
+        <div className="coupon-right">
           <p
-            className={data.batch_goods_name.length < 20 ? 'title' : 'isTitle'}>
+            className={data.batch_goods_name.length < 20 ? "title" : "isTitle"}
-            {data.batch_goods_name ? data.batch_goods_name : 'xxx'}
+          >
+            {data.batch_goods_name ? data.batch_goods_name : "xxx"}
           </p>
           <p>
             {data?.card_type.length > 0
               ? data.card_type.map(
-                  (item) => (item === '1' ? '借记卡' : '信用卡') + ' '
+                  (item) => (item === "1" ? "借记卡" : "信用卡") + " "
                 )
-              : 'xxx xxx xxx'}{' '}
+              : "xxx xxx xxx"}{" "}
             可用
           </p>
-          <p className='validity'>
+          <p className="validity">
             有效期:
-            {data?.entry_time ? data.entry_time[0] : 'xxxx-xx-xx xx:xx:xx'}至
+            {data?.entry_time ? data.entry_time[0] : "xxxx-xx-xx xx:xx:xx"}至
-            {data?.entry_time ? data.entry_time[1] : 'xxxx-xx-xx xx:xx:xx'}
+            {data?.entry_time ? data.entry_time[1] : "xxxx-xx-xx xx:xx:xx"}
           </p>
         </div>
       </div>
-      <div className='receiveBtn'>立即领取</div>
+
-      <div className='coupon_explain'>
+      {state.keyType == 1 ? (
+        <div className="receiveBtn">立即领取</div>
+      ) : (
+        <div style={{ height: "20px" }}></div>
+      )}
+
+      <div className="coupon_explain">
         <h1>
-          - {data.batch_goods_name ? data.batch_goods_name : 'xxx'}兑换说明 -
+          - {data.batch_goods_name ? data.batch_goods_name : "xxx"}兑换说明 -
         </h1>
         {createElement()}
         {data.instruction ? (
           <>
-            <div className='content'>
+            <div className="content">
               <h3>使用须知</h3>
               <p>
-                1、在{data.channel === '1' ? '支付宝' : '微信'}
+                1、在{data.channel === "1" ? "支付宝" : "微信"}
                 APP内打开链接，点击【一键领取】完成领取
-                {data.channel === '1' ? '支付宝' : '微信'}立减金
+                {data.channel === "1" ? "支付宝" : "微信"}立减金
                 <br />
-                2、{data.channel === '1' ? '支付宝' : '微信'}
+                2、{data.channel === "1" ? "支付宝" : "微信"}
                 里立减金一旦领取不可撤销、不可转让。注意不要将兑换券泄露给他人
               </p>
             </div>
-            <div className='content'>
+            <div className="content">
               <h3>使用规则</h3>
               <div
                 dangerouslySetInnerHTML={{
-                  __html: data.instruction
+                  __html: data.instruction,
-                }}></div>
+                }}
+              ></div>
             </div>
           </>
         ) : (
           <Placeholder.TextBlock
-            className='TextBlock'
+            className="TextBlock"
             animate
             widths={widths}
             rows={14}
@@ -124,6 +162,8 @@ export default ({ data }) => {
           />
         )}
       </div>
+
+      {state.keyType === 2 ? couponH5() : null}
     </div>
-  )
+  );
-}
+};