1) 增加优惠券立减金模版
This commit is contained in:
zhangds
parent
6782d76dfe
commit
6d0bc162f4
|
|
@ -1,122 +1,160 @@
|
|||
import { Placeholder } from 'zent'
|
||||
import { useEffect, useState } from 'react'
|
||||
import './index.less'
|
||||
import { sortWeeks } from '@/utils'
|
||||
const widths = [24, 100, 100, 100, 80, 24, 100, 100, 100, 80, 100, 100, 100, 80]
|
||||
import { Placeholder } from "zent";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSetState } from "ahooks";
|
||||
import "./index.less";
|
||||
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))
|
||||
}, [data.ruleWeek])
|
||||
setNewWeek(sortWeeks(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 className='couponShow'>
|
||||
<div className='coupon-left'>
|
||||
<p className='coupon_money'>
|
||||
<div id="reduceKnockGold" className="mobile">
|
||||
<div className="couponShow">
|
||||
<div className="coupon-left">
|
||||
<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'>
|
||||
满{data.denomination ? data.denomination : '0.00'}可用
|
||||
<p className="full_money">
|
||||
满{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'}>
|
||||
{data.batch_goods_name ? data.batch_goods_name : 'xxx'}
|
||||
className={data.batch_goods_name.length < 20 ? "title" : "isTitle"}
|
||||
>
|
||||
{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[1] : '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"}
|
||||
</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
|
||||
}}></div>
|
||||
__html: data.instruction,
|
||||
}}
|
||||
></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>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue