56 changed files with 93 additions and 2801 deletions
@ -1,138 +0,0 @@ |
|||
import React, { useEffect, useState } from "react"; |
|||
import "./Activities.scss"; |
|||
import back from "./back.svg"; |
|||
import clock from "./clock.svg"; |
|||
import detail from "./detail.png"; |
|||
import { post } from "../../js/helpers/data-helper"; |
|||
|
|||
const Activities = ({ |
|||
initActivity, |
|||
setInitActivity, |
|||
onGo, |
|||
mall: { activities, pois }, |
|||
facilities, |
|||
memberID, |
|||
}) => { |
|||
const [activity, setActivity] = useState(null); |
|||
const [receiving, setReceiving] = useState(false); |
|||
const poiMap = pois.reduce((acc, nxt) => ({ ...acc, [nxt.code]: nxt }), {}); |
|||
const getFacByAct = (activity) => { |
|||
if (!activity) return null; |
|||
const poiCode = activity.poiList.find((code) => poiMap[code]); |
|||
const poi = poiCode ? poiMap[poiCode] : null; |
|||
if (!poi) return null; |
|||
const actFacs = facilities ? facilities["活动"] : []; |
|||
if (!actFacs) return null; |
|||
const actFac = actFacs.find(({ title }) => title === poi.name); |
|||
return actFac; |
|||
}; |
|||
|
|||
const reject = () => { |
|||
window.weui.toast("该活动即将上线，敬请期待！", { |
|||
className: "toast", |
|||
}); |
|||
}; |
|||
const receive = async (activity) => { |
|||
setReceiving(true); |
|||
try { |
|||
const { code, data, msg } = await post("/Api/Coupon/CouponReceive", { |
|||
activityCode: activity.code, |
|||
memberID, |
|||
}); |
|||
window.weui.toast(msg, { |
|||
className: "toast", |
|||
}); |
|||
if (code === "200") { |
|||
activity.isReceived = true; |
|||
} |
|||
} catch (error) { |
|||
console.warn(error); |
|||
} finally { |
|||
setReceiving(false); |
|||
} |
|||
}; |
|||
useEffect(() => { |
|||
if (initActivity) { |
|||
setActivity(initActivity); |
|||
setInitActivity(null); |
|||
} |
|||
}, [initActivity]); |
|||
|
|||
return ( |
|||
<div className="activities"> |
|||
<div className="header">活动</div> |
|||
<div className="list-container"> |
|||
{activities && |
|||
activities.map((act) => ( |
|||
<div key={act.code} className="card"> |
|||
<img className="card-header" src={act.fileUrl}></img> |
|||
<div className="card-content"> |
|||
<div className="detail" onClick={() => setActivity(act)}> |
|||
<img src={detail}></img>查看详情 |
|||
</div> |
|||
<div |
|||
className="btn" |
|||
onClick={() => { |
|||
const fac = getFacByAct(act); |
|||
if (!fac) return reject(); |
|||
return onGo && onGo(fac); |
|||
}} |
|||
> |
|||
GO |
|||
</div> |
|||
</div> |
|||
</div> |
|||
))} |
|||
</div> |
|||
{activity && ( |
|||
<div className="activity"> |
|||
<img |
|||
className="back" |
|||
onClick={() => setActivity(null)} |
|||
src={back} |
|||
></img> |
|||
<img className="r1" src={activity.fileUrl}></img> |
|||
<div className="r2"> |
|||
<div className="rr1">{activity.name}</div> |
|||
<div className="rr2"> |
|||
<img src={clock}></img> |
|||
{activity.beginTime.split(" ")[0]}至 |
|||
{activity.endTime.split(" ")[0]} |
|||
</div> |
|||
<div className="r3"> |
|||
<div className="title">活动介绍</div> |
|||
{activity.intro} |
|||
<div |
|||
className="r4" |
|||
onClick={() => { |
|||
const fac = getFacByAct(activity); |
|||
if (!fac) return reject(); |
|||
return onGo && onGo(fac); |
|||
}} |
|||
> |
|||
开始导航 |
|||
</div> |
|||
{activity.defaultAwardTitle && ( |
|||
<div className="r5"> |
|||
<div className="t1">{activity.defaultAwardTitle}</div> |
|||
<div className="meta">活动奖励</div> |
|||
<div |
|||
onClick={() => |
|||
!activity.isReceived && !receiving && receive(activity) |
|||
} |
|||
className={`btn ${ |
|||
activity.isReceived || receiving ? "disabled" : "" |
|||
}`}
|
|||
> |
|||
领取奖励 |
|||
</div> |
|||
</div> |
|||
)} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
)} |
|||
</div> |
|||
); |
|||
}; |
|||
export default Activities; |
|||
@ -1,264 +0,0 @@ |
|||
.activities { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background: #f0f0f0; |
|||
|
|||
pointer-events: auto; |
|||
.header { |
|||
position: absolute; |
|||
height: 25px; |
|||
left: 24px; |
|||
top: 24px; |
|||
font-family: "PingFang SC"; |
|||
font-style: normal; |
|||
font-weight: 600; |
|||
font-size: 18px; |
|||
line-height: 25px; |
|||
display: flex; |
|||
align-items: center; |
|||
color: #353230; |
|||
} |
|||
.list-container { |
|||
position: absolute; |
|||
top: 64px; |
|||
left: 17px; |
|||
right: 17px; |
|||
bottom: 0; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
.card { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
background: #ffffff; |
|||
border-radius: 10px; |
|||
overflow: hidden; |
|||
.card-header { |
|||
width: calc(100vw - 34px); |
|||
height: calc((100vw - 34px) / 321 * 180); |
|||
border-radius: 10px; |
|||
object-fit: cover; |
|||
} |
|||
.card-content { |
|||
display: flex; |
|||
height: 72px; |
|||
padding-left: 24px; |
|||
padding-right: 16px; |
|||
font-family: "PingFang SC"; |
|||
font-style: normal; |
|||
font-weight: 600; |
|||
font-size: 16px; |
|||
line-height: 22px; |
|||
color: #353230; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.detail { |
|||
display: inline-flex; |
|||
align-items: center; |
|||
img { |
|||
width: 20px; |
|||
height: 20px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
.btn { |
|||
display: flex; |
|||
width: 80px; |
|||
height: 40px; |
|||
background: linear-gradient(180deg, #508af7 0%, #5ea5f9 100%); |
|||
box-shadow: 0px 6px 12px rgba(93, 172, 249, 0.2); |
|||
border-radius: 8px; |
|||
font-family: "HarmonyOS Sans SC"; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
font-size: 16px; |
|||
line-height: 19px; |
|||
text-align: right; |
|||
color: #ffffff; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
} |
|||
} |
|||
.card + .card { |
|||
margin-top: 16px; |
|||
} |
|||
} |
|||
.activity { |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: -98px; |
|||
left: 0; |
|||
right: 0; |
|||
background: #f0f0f0; |
|||
z-index: 1; |
|||
border-radius: 18px; |
|||
.back { |
|||
position: absolute; |
|||
width: 40px; |
|||
height: 40px; |
|||
left: 16px; |
|||
top: 8px; |
|||
z-index: 2; |
|||
} |
|||
.r1 { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
height: 56vw; |
|||
width: 100vw; |
|||
z-index: 1; |
|||
border-radius: 10px 10px 0 0; |
|||
object-fit: cover; |
|||
} |
|||
.r2 { |
|||
position: absolute; |
|||
top: 192px; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 2; |
|||
background: linear-gradient( |
|||
180.18deg, |
|||
#ffffff 17.3%, |
|||
rgba(255, 255, 255, 0) 99.84% |
|||
); |
|||
border-radius: 16px 16px 0 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.rr1 { |
|||
font-family: "PingFang SC"; |
|||
font-style: normal; |
|||
font-weight: 600; |
|||
font-size: 16px; |
|||
line-height: 22px; |
|||
margin-top: 16px; |
|||
margin-bottom: 8px; |
|||
color: #353230; |
|||
padding-left: 24px; |
|||
} |
|||
.rr2 { |
|||
display: inline-flex; |
|||
font-family: "PingFang SC"; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
font-size: 12px; |
|||
line-height: 17px; |
|||
color: #68655e; |
|||
align-items: center; |
|||
padding-left: 24px; |
|||
img { |
|||
width: 16px; |
|||
height: 16px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
.r3 { |
|||
position: absolute; |
|||
top: 97px; |
|||
left: 10px; |
|||
right: 10px; |
|||
bottom: 0; |
|||
font-family: "PingFang SC"; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
line-height: 22px; |
|||
color: #9d988f; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
background: #f9f9fb; |
|||
border-radius: 16px 16px 0px 0px; |
|||
padding: 16px 14px; |
|||
.title { |
|||
font-family: "PingFang SC"; |
|||
font-style: normal; |
|||
font-weight: 600; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
color: #353230; |
|||
margin-bottom: 4px; |
|||
} |
|||
} |
|||
.r4 { |
|||
display: flex; |
|||
position: absolute; |
|||
height: 56px; |
|||
left: 18px; |
|||
right: 18px; |
|||
bottom: 56px; |
|||
margin: auto; |
|||
background: linear-gradient(180deg, #508af7 0%, #5ea5f9 100%); |
|||
box-shadow: 0px 6px 12px rgba(93, 172, 249, 0.2); |
|||
border-radius: 16px; |
|||
font-family: "HarmonyOS Sans SC"; |
|||
font-style: normal; |
|||
font-weight: 600; |
|||
font-size: 16px; |
|||
line-height: 22px; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #ffffff; |
|||
} |
|||
.r5 { |
|||
position: absolute; |
|||
bottom: 139px; |
|||
left: 14px; |
|||
right: 14px; |
|||
height: 80px; |
|||
background: rgba(255, 255, 255, 0.7); |
|||
box-shadow: 0px 12px 16px rgba(104, 110, 127, 0.08); |
|||
border-radius: 10px; |
|||
.t1 { |
|||
position: absolute; |
|||
top: 19px; |
|||
left: 20px; |
|||
font-weight: 600; |
|||
font-size: 17px; |
|||
line-height: 22px; |
|||
color: #437af7; |
|||
width: 174px; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
.meta { |
|||
position: absolute; |
|||
top: 45px; |
|||
left: 20px; |
|||
font-weight: 600; |
|||
font-size: 12px; |
|||
line-height: 16px; |
|||
color: #a1a5b3; |
|||
} |
|||
.btn { |
|||
position: absolute; |
|||
display: flex; |
|||
width: 80px; |
|||
height: 40px; |
|||
top: 19px; |
|||
right: 12px; |
|||
background: #ffffff; |
|||
box-shadow: 0px 12px 16px rgba(104, 110, 127, 0.08); |
|||
border-radius: 10px; |
|||
font-weight: 600; |
|||
font-size: 15px; |
|||
line-height: 20px; |
|||
color: #437af7; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border: 1px solid rgba(80, 138, 247, 0.6); |
|||
&.disabled { |
|||
color: #a1a5b3; |
|||
border: 1px solid #a1a5b3; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
Before Width: | Height: | Size: 559 B |
|
Before Width: | Height: | Size: 848 B |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.6 KiB |
@ -1,102 +0,0 @@ |
|||
import "./ApplyModal.scss"; |
|||
import Modal from "react-modal"; |
|||
import { useState } from "react"; |
|||
import { post } from "../../../js/helpers/data-helper"; |
|||
|
|||
const ApplyModal = ({ onBack, memberID }) => { |
|||
const [title, setTitle] = useState(""); |
|||
const [totalCount, setTotalCount] = useState(""); |
|||
const [beginTime, setBeginTime] = useState(""); |
|||
const [endTime, setEndTime] = useState(""); |
|||
const [couponRules, setCouponRules] = useState(""); |
|||
const toast = (text) => |
|||
window.weui.toast(text, { |
|||
className: "toast", |
|||
}); |
|||
const submit = async () => { |
|||
if (!title) return toast("请输入礼券标题"); |
|||
if (!totalCount) return toast("请输入发放数量"); |
|||
if (!beginTime) return toast("请选择开始时间"); |
|||
if (!endTime) return toast("请选择结束时间"); |
|||
try { |
|||
const { code, msg } = await post("/api/coupon/ApplyCoupon", { |
|||
title, |
|||
totalCount, |
|||
beginTime, |
|||
endTime, |
|||
memberID, |
|||
couponRules, |
|||
}); |
|||
if (code === "200") { |
|||
toast("已提交申请，审核中！"); |
|||
onBack && onBack(); |
|||
} else { |
|||
toast(msg); |
|||
} |
|||
} catch (error) {} |
|||
}; |
|||
return ( |
|||
<Modal isOpen ariaHideApp={false} className="ApplyModal"> |
|||
<div className="back" onClick={() => onBack && onBack()}></div> |
|||
<div className="title">申请发券</div> |
|||
<div className="content"> |
|||
<div className="item"> |
|||
<div className="label">礼券标题</div> |
|||
<input |
|||
type="text" |
|||
className="inputText" |
|||
placeholder="请输入礼券标题" |
|||
maxLength={30} |
|||
value={title} |
|||
onChange={(e) => setTitle(e.target.value)} |
|||
></input> |
|||
</div> |
|||
<div className="item"> |
|||
<div className="label">发放数量</div> |
|||
<input |
|||
type="number" |
|||
className="inputText" |
|||
placeholder="请输入发放数量" |
|||
value={totalCount} |
|||
min={1} |
|||
max={9999} |
|||
onChange={(e) => setTotalCount(e.target.value)} |
|||
></input> |
|||
</div> |
|||
<div className="item"> |
|||
<div className="label">使用期限</div> |
|||
<div className="dates"> |
|||
<input |
|||
type="date" |
|||
value={beginTime} |
|||
onChange={(e) => setBeginTime(e.target.value)} |
|||
placeholder="请选择开始时间" |
|||
></input> |
|||
<div style={{ margin: "0 15px" }}>至</div> |
|||
<input |
|||
type="date" |
|||
value={endTime} |
|||
onChange={(e) => setEndTime(e.target.value)} |
|||
placeholder="请选择结束时间" |
|||
></input> |
|||
</div> |
|||
</div> |
|||
<div className="item"> |
|||
<div className="label">礼券规则</div> |
|||
<textarea |
|||
type="text" |
|||
className="inputTextArea" |
|||
placeholder="请输入礼券规则" |
|||
value={couponRules} |
|||
maxLength={100} |
|||
onChange={(e) => setCouponRules(e.target.value)} |
|||
></textarea> |
|||
</div> |
|||
<div className="btn" onClick={submit}> |
|||
免费申请 |
|||
</div> |
|||
</div> |
|||
</Modal> |
|||
); |
|||
}; |
|||
export default ApplyModal; |
|||
@ -1,118 +0,0 @@ |
|||
.ApplyModal { |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background: #f6f6f6; |
|||
overflow: hidden; |
|||
.back { |
|||
position: absolute; |
|||
top: 10px; |
|||
left: 10px; |
|||
width: 60px; |
|||
height: 60px; |
|||
background: center / cover no-repeat url(./back.svg); |
|||
} |
|||
.title { |
|||
position: absolute; |
|||
top: 28px; |
|||
right: 16px; |
|||
font-style: normal; |
|||
font-weight: 600; |
|||
font-size: 20px; |
|||
line-height: 25px; |
|||
color: #000000; |
|||
} |
|||
.content { |
|||
position: absolute; |
|||
top: 92px; |
|||
left: 10px; |
|||
right: 10px; |
|||
bottom: 34px; |
|||
background: #ffffff; |
|||
border-radius: 18px; |
|||
padding: 32px 24px; |
|||
.item { |
|||
height: 58px; |
|||
border-bottom: 1px solid rgba(218, 215, 209, 0.4); |
|||
.label { |
|||
font-weight: 600; |
|||
font-size: 17px; |
|||
line-height: 22px; |
|||
color: #353230; |
|||
margin-bottom: 8px; |
|||
} |
|||
.inputText { |
|||
font-weight: 400; |
|||
font-size: 15px; |
|||
line-height: 20px; |
|||
color: #68655e; |
|||
border: none; |
|||
outline: none; |
|||
opacity: 0.8; |
|||
&::placeholder { |
|||
color: #dad7d1; |
|||
} |
|||
} |
|||
.inputTextArea { |
|||
width: 100%; |
|||
background: #f9f9fb; |
|||
border-radius: 8px; |
|||
height: 152px; |
|||
padding: 16px; |
|||
border: none; |
|||
font-weight: 400; |
|||
font-size: 15px; |
|||
line-height: 20px; |
|||
outline: none; |
|||
color: #68655e; |
|||
&::placeholder { |
|||
color: #dad7d1; |
|||
} |
|||
} |
|||
.dates { |
|||
display: flex; |
|||
font-weight: 400; |
|||
font-size: 15px; |
|||
line-height: 20px; |
|||
color: #353230; |
|||
|
|||
input { |
|||
flex: 1; |
|||
font-weight: 400; |
|||
font-size: 15px; |
|||
line-height: 20px; |
|||
color: #68655e; |
|||
border: none; |
|||
outline: none; |
|||
opacity: 0.8; |
|||
overflow: hidden; |
|||
&::placeholder { |
|||
color: #dad7d1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.item + .item { |
|||
margin-top: 24px; |
|||
} |
|||
.btn { |
|||
position: absolute; |
|||
left: 18px; |
|||
right: 18px; |
|||
bottom: 18px; |
|||
height: 56px; |
|||
background: linear-gradient(180deg, #508af7 0%, #5ea5f9 100%); |
|||
box-shadow: 0px 6px 12px rgba(93, 172, 249, 0.2); |
|||
border-radius: 10px; |
|||
font-weight: 600; |
|||
font-size: 16px; |
|||
line-height: 22px; |
|||
color: #ffffff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
} |
|||
|
Before Width: | Height: | Size: 544 B |
@ -1,163 +0,0 @@ |
|||
import "./CouponList.scss"; |
|||
import { useState, useRef, useEffect, useCallback } from "react"; |
|||
import ListEnd from "../ListEnd/ListEnd"; |
|||
import noData from "./noData.png"; |
|||
import Qrcode from "../Qrcode/Qrcode"; |
|||
import Modal from "react-modal"; |
|||
import { post } from "../../../js/helpers/data-helper"; |
|||
import InfiniteScroll from "react-infinite-scroller"; |
|||
|
|||
const stateMap = { |
|||
0: "未使用", |
|||
1: "已使用", |
|||
2: "已失效", |
|||
}; |
|||
const stateList = [0, 1, 2]; |
|||
const CouponList = ({ memberID }) => { |
|||
const [state, setState] = useState(stateList[0]); |
|||
const [list, setList] = useState([]); |
|||
const [nextPageIndex, setNextPageIndex] = useState(1); |
|||
const [loading, setLoading] = useState(false); |
|||
const hasMore = nextPageIndex !== null; |
|||
|
|||
const [modalCoupon, setModalCoupon] = useState(null); |
|||
const listRef = useRef(); |
|||
const showNoData = list !== null && list.length === 0; |
|||
const showListEnd = list !== null && list.length > 0; |
|||
const showCouponModal = !!modalCoupon; |
|||
|
|||
const loadMore = useCallback(async () => { |
|||
if (loading || nextPageIndex === null || !memberID) return; |
|||
setLoading(true); |
|||
try { |
|||
const { code, data, msg } = await post("/api/coupon/UserCouponList", { |
|||
paging: 1, |
|||
state, |
|||
pageIndex: nextPageIndex, |
|||
pageSize: 10, |
|||
memberID, |
|||
}); |
|||
if (code === "200") { |
|||
setList([...list, ...data.list]); |
|||
setNextPageIndex( |
|||
nextPageIndex + 1 > data.allPage ? null : nextPageIndex + 1 |
|||
); |
|||
} else { |
|||
setNextPageIndex(null); |
|||
window.weui.toast(msg, { |
|||
className: "toast", |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
setNextPageIndex(null); |
|||
} finally { |
|||
setLoading(false); |
|||
} |
|||
}, [list, loading, nextPageIndex]); |
|||
|
|||
useEffect(() => { |
|||
if (listRef.current) listRef.current.scrollTop = 0; |
|||
setNextPageIndex(1); |
|||
setList([]); |
|||
}, [state]); |
|||
|
|||
return ( |
|||
<div className="CouponList"> |
|||
<div className="CouponTabs"> |
|||
{stateList.map((item) => ( |
|||
<div |
|||
key={item} |
|||
className={`tab ${state === item ? "active" : ""}`} |
|||
onClick={() => setState(item)} |
|||
> |
|||
{stateMap[item]} |
|||
</div> |
|||
))} |
|||
</div> |
|||
<div className="list-container" ref={listRef}> |
|||
<InfiniteScroll |
|||
pageStart={0} |
|||
loadMore={loadMore} |
|||
hasMore={hasMore} |
|||
useWindow={false} |
|||
getScrollParent={() => listRef && listRef.current} |
|||
> |
|||
{showNoData && ( |
|||
<div className="noData"> |
|||
<img className="bg" src={noData}></img> |
|||
<div className="meta"> |
|||
<div className="btn" onClick={() => {}}> |
|||
参加AR |
|||
</div> |
|||
活动，可领取优惠券！ |
|||
</div> |
|||
</div> |
|||
)} |
|||
{list !== null && |
|||
list.map((coupon) => ( |
|||
<div |
|||
key={coupon.orderNo} |
|||
className={`coupon bg${state}`} |
|||
onClick={() => setModalCoupon(coupon)} |
|||
> |
|||
{coupon.logoUrl ? ( |
|||
<img |
|||
className="logo" |
|||
src={coupon.logoUrl} |
|||
style={{ |
|||
width: (window.innerWidth / 375) * 64, |
|||
height: (window.innerWidth / 375) * 64, |
|||
}} |
|||
></img> |
|||
) : ( |
|||
<Qrcode |
|||
className="qrcode" |
|||
size={(window.innerWidth / 375) * 64} |
|||
text={coupon.orderNo} |
|||
></Qrcode> |
|||
)} |
|||
<div className="title">{coupon.title}</div> |
|||
<div className="meta">{coupon.showNo}</div> |
|||
<div className="duration"> |
|||
使用期限<div className="sep"></div> |
|||
{coupon.beginTime}至{coupon.endTime} |
|||
</div> |
|||
</div> |
|||
))} |
|||
|
|||
{showListEnd && <ListEnd></ListEnd>} |
|||
</InfiniteScroll> |
|||
</div> |
|||
{showCouponModal && ( |
|||
<Modal |
|||
isOpen |
|||
ariaHideApp={false} |
|||
style={{ overlay: { background: "rgba(0, 0, 0, 0.6)" } }} |
|||
className="CouponModal" |
|||
> |
|||
<div className="close" onClick={() => setModalCoupon(null)}></div> |
|||
<Qrcode |
|||
className="qrcode" |
|||
size={120} |
|||
text={modalCoupon.orderNo} |
|||
></Qrcode> |
|||
<div className="content"> |
|||
<div className="title">{modalCoupon.title}</div> |
|||
<div className="coupon-code">{modalCoupon.showNo}</div> |
|||
<div className="meta">使用期限</div> |
|||
<div className="value"> |
|||
{modalCoupon.beginTime}至{modalCoupon.endTime} |
|||
</div> |
|||
{modalCoupon.couponRules && ( |
|||
<> |
|||
<div className="meta">礼券规则</div> |
|||
<div className="value">{modalCoupon.couponRules}</div> |
|||
</> |
|||
)} |
|||
</div> |
|||
</Modal> |
|||
)} |
|||
</div> |
|||
); |
|||
}; |
|||
export default CouponList; |
|||
@ -1,268 +0,0 @@ |
|||
.CouponList { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background: linear-gradient( |
|||
180deg, |
|||
#f2f2f2 0%, |
|||
rgba(249, 249, 249, 0) 20.18% |
|||
); |
|||
border-radius: 18px 18px 0 0; |
|||
padding-top: 10px; |
|||
width: 100vw; |
|||
align-items: center; |
|||
overflow: hidden; |
|||
.CouponTabs { |
|||
display: flex; |
|||
flex: 0 0 56px; |
|||
width: calc(100vw - 20px); |
|||
background: #ffffff; |
|||
border-radius: 10px; |
|||
|
|||
.tab { |
|||
position: relative; |
|||
display: flex; |
|||
flex: 1; |
|||
font-weight: 400; |
|||
font-size: 15px; |
|||
line-height: 20px; |
|||
color: #9d988f; |
|||
justify-content: center; |
|||
align-items: center; |
|||
&.active { |
|||
color: #508af7; |
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
bottom: 10px; |
|||
left: 0; |
|||
right: 0; |
|||
margin: auto; |
|||
width: 4px; |
|||
height: 4px; |
|||
background: #508af7; |
|||
border-radius: 50%; |
|||
} |
|||
&::after { |
|||
content: ""; |
|||
position: absolute; |
|||
width: 30px; |
|||
height: 6px; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
margin: auto; |
|||
background: center / cover no-repeat url(./tri.svg); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.list-container { |
|||
flex: 1; |
|||
overflow-x: hidden; |
|||
overflow-y: scroll; |
|||
padding-top: 16px; |
|||
text-align: center; |
|||
scroll-behavior: smooth; |
|||
|
|||
&::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
.coupon { |
|||
position: relative; |
|||
width: calc(100vw - 20px); |
|||
height: calc((100vw - 20px) / 355 * 134); |
|||
&.bg0 { |
|||
background: center / cover no-repeat url(./bg0.svg); |
|||
} |
|||
&.bg1 { |
|||
background: center / cover no-repeat url(./bg1.svg); |
|||
} |
|||
&.bg2 { |
|||
background: center / cover no-repeat url(./bg2.svg); |
|||
} |
|||
.logo { |
|||
position: absolute; |
|||
top: 5.333vw; |
|||
left: 5.333vw; |
|||
border-radius: 4px; |
|||
object-fit: cover; |
|||
} |
|||
.title { |
|||
position: absolute; |
|||
top: 8vw; |
|||
left: 27.733vw; |
|||
right: 2.667vw; |
|||
font-weight: 600; |
|||
font-size: 4.533vw; |
|||
line-height: 5.867vw; |
|||
color: #353230; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
text-align: left; |
|||
} |
|||
.meta { |
|||
position: absolute; |
|||
top: 14.933vw; |
|||
left: 27.733vw; |
|||
font-weight: 600; |
|||
font-size: 3.467vw; |
|||
line-height: 4.8vw; |
|||
color: #68655e; |
|||
opacity: 0.8; |
|||
} |
|||
.duration { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
height: 9.067vw; |
|||
font-weight: 400; |
|||
font-size: 3.2vw; |
|||
line-height: 4.267vw; |
|||
text-align: center; |
|||
color: #9d988f; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.sep { |
|||
width: 0.267vw; |
|||
height: 2.667vw; |
|||
opacity: 0.3; |
|||
border-left: 0.267vw solid #68655e; |
|||
margin-left: 3.2vw; |
|||
margin-right: 3.2vw; |
|||
} |
|||
} |
|||
.time-left { |
|||
position: absolute; |
|||
height: 3.467vw; |
|||
top: 2.133vw; |
|||
right: 1.067vw; |
|||
font-weight: 600; |
|||
font-size: 2.933vw; |
|||
line-height: 3.467vw; |
|||
color: #c1a672; |
|||
opacity: 0.8; |
|||
} |
|||
.qrcode { |
|||
position: absolute; |
|||
top: 5.333vw; |
|||
left: 5.333vw; |
|||
} |
|||
} |
|||
.coupon + .coupon { |
|||
margin-top: 8px; |
|||
} |
|||
.noData { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: calc(100vw - 20px); |
|||
height: 396px; |
|||
border-radius: 18px; |
|||
background: #ffffff; |
|||
align-items: center; |
|||
.bg { |
|||
margin: auto; |
|||
width: 250px; |
|||
height: 250px; |
|||
margin-top: 16px; |
|||
} |
|||
.meta { |
|||
width: calc(100vw - 46px); |
|||
flex: 0 0 90px; |
|||
border-top: 1px solid #f5f5f5; |
|||
display: flex; |
|||
font-weight: 400; |
|||
font-size: 17px; |
|||
line-height: 22px; |
|||
color: #9d988f; |
|||
height: 90px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.btn { |
|||
color: #508af7; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.CouponModal { |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
width: 326px; |
|||
height: 416px; |
|||
margin: auto; |
|||
background: #f9f9fb; |
|||
border-radius: 16px; |
|||
.close { |
|||
position: absolute; |
|||
top: 16px; |
|||
right: 16px; |
|||
width: 24px; |
|||
height: 24px; |
|||
background: center / cover no-repeat url(./close.svg); |
|||
} |
|||
.qrcode { |
|||
position: absolute; |
|||
top: 52px; |
|||
left: 0; |
|||
right: 0; |
|||
margin: auto; |
|||
} |
|||
.content { |
|||
position: absolute; |
|||
bottom: 8px; |
|||
left: 8px; |
|||
right: 8px; |
|||
background: #f3f4f8; |
|||
border-radius: 10px; |
|||
height: 192px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: flex-start; |
|||
flex-direction: column; |
|||
padding: 24px 16px 0 16px; |
|||
.title { |
|||
font-weight: 600; |
|||
font-size: 17px; |
|||
line-height: 22px; |
|||
color: #323337; |
|||
} |
|||
.coupon-code { |
|||
font-weight: 600; |
|||
font-size: 13px; |
|||
line-height: 18px; |
|||
color: #437af7; |
|||
opacity: 0.8; |
|||
margin-top: 4px; |
|||
padding-bottom: 8px; |
|||
border-bottom: 1px dashed #c9cbd1; |
|||
margin-bottom: 17px; |
|||
width: 100%; |
|||
} |
|||
.meta { |
|||
font-weight: 400; |
|||
font-size: 12px; |
|||
line-height: 16px; |
|||
color: #7a7e8d; |
|||
opacity: 0.8; |
|||
margin-bottom: 2px; |
|||
} |
|||
.value { |
|||
font-weight: 600; |
|||
font-size: 12px; |
|||
line-height: 16px; |
|||
color: #474a56; |
|||
opacity: 0.8; |
|||
margin-bottom: 8px; |
|||
min-height: 16px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
} |
|||
} |
|||
|
Before Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 313 B |
@ -1,55 +0,0 @@ |
|||
import "./Coupons.scss"; |
|||
import notMember from "./notMember.png"; |
|||
import Modal from "react-modal"; |
|||
import { useState } from "react"; |
|||
import ShopTabs from "./ShopTabs/ShopTabs"; |
|||
import CouponList from "./CouponList/CouponList"; |
|||
import ShopManager from "./ShopManager/ShopManager"; |
|||
|
|||
const Coupons = ({ show, memberID, isShop = false }) => { |
|||
const isNotMember = !memberID; |
|||
const [showCoupons, setShowCoupons] = useState(true); |
|||
return ( |
|||
<Modal |
|||
isOpen={show} |
|||
ariaHideApp={false} |
|||
style={{ overlay: { background: "transparent", pointerEvents: "none" } }} |
|||
className="Coupons" |
|||
> |
|||
{isNotMember ? ( |
|||
<div className="notMember"> |
|||
<img className="bg" src={notMember}></img> |
|||
<div className="meta"> |
|||
<div |
|||
className="btn" |
|||
onClick={() => { |
|||
window.wx.miniProgram.redirectTo({ |
|||
url: `/pages/login/index`, |
|||
}); |
|||
}} |
|||
> |
|||
注册/登录 |
|||
</div> |
|||
后，可查看优惠卷 |
|||
</div> |
|||
</div> |
|||
) : ( |
|||
<> |
|||
{isShop && ( |
|||
<ShopTabs |
|||
showCoupons={showCoupons} |
|||
setShowCoupons={setShowCoupons} |
|||
></ShopTabs> |
|||
)} |
|||
{(!isShop || (isShop && showCoupons)) && ( |
|||
<CouponList memberID={memberID}></CouponList> |
|||
)} |
|||
{isShop && !showCoupons && ( |
|||
<ShopManager memberID={memberID}></ShopManager> |
|||
)} |
|||
</> |
|||
)} |
|||
</Modal> |
|||
); |
|||
}; |
|||
export default Coupons; |
|||
@ -1,69 +0,0 @@ |
|||
.Coupons { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 98px; |
|||
z-index: 100000; |
|||
background: #f6f6f6; |
|||
pointer-events: auto; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
.notMember { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: calc(100vw - 20px); |
|||
height: 396px; |
|||
border-radius: 18px; |
|||
background: #ffffff; |
|||
align-items: center; |
|||
.bg { |
|||
margin: auto; |
|||
width: 250px; |
|||
height: 250px; |
|||
margin-top: 16px; |
|||
} |
|||
.meta { |
|||
width: calc(100vw - 46px); |
|||
flex: 0 0 90px; |
|||
border-top: 1px solid #f5f5f5; |
|||
display: flex; |
|||
font-weight: 400; |
|||
font-size: 17px; |
|||
line-height: 22px; |
|||
color: #9d988f; |
|||
height: 90px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.btn { |
|||
color: #437af7; |
|||
} |
|||
} |
|||
} |
|||
.shopTabs { |
|||
display: flex; |
|||
width: calc(100vw - 20px); |
|||
height: 56px; |
|||
background: #ffffff; |
|||
border-radius: 12px; |
|||
padding: 4px; |
|||
.tab { |
|||
display: flex; |
|||
flex: 1; |
|||
height: 48px; |
|||
font-weight: 500; |
|||
font-size: 16px; |
|||
line-height: 22px; |
|||
color: #68655e; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-radius: 8px; |
|||
&.active { |
|||
color: #ffffff; |
|||
background: #daba7f; |
|||
box-shadow: 0px 6px 12px rgba(214, 154, 66, 0.3); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,4 +0,0 @@ |
|||
import bg from "./bg.svg"; |
|||
import "./ListEnd.scss"; |
|||
const ListEnd = () => <img className="ListEnd" src={bg}></img>; |
|||
export default ListEnd; |
|||
@ -1,5 +0,0 @@ |
|||
.ListEnd { |
|||
margin-top: 24px; |
|||
width: 62px; |
|||
height: 40px; |
|||
} |
|||
|
Before Width: | Height: | Size: 4.4 KiB |
@ -1,25 +0,0 @@ |
|||
import QRCode from "qrcodejs2"; |
|||
import { useRef, useEffect } from "react"; |
|||
const Qrcode = ({ size, text, className }) => { |
|||
const ref = useRef(); |
|||
|
|||
useEffect(() => { |
|||
const domEl = ref.current; |
|||
domEl.innerHTML = ""; |
|||
new QRCode(domEl, { |
|||
width: size, |
|||
height: size, |
|||
text, |
|||
colorDark: "#000", |
|||
colorLight: "#fff", |
|||
}); |
|||
}, [ref]); |
|||
return ( |
|||
<div |
|||
className={className} |
|||
ref={ref} |
|||
style={{ width: size + "px", height: size + "px" }} |
|||
></div> |
|||
); |
|||
}; |
|||
export default Qrcode; |
|||
@ -1,59 +0,0 @@ |
|||
import "./ScanModal.scss"; |
|||
import Modal from "react-modal"; |
|||
import { useState, useEffect } from "react"; |
|||
import { Html5Qrcode } from "html5-qrcode"; |
|||
|
|||
const ScanModal = ({ onBack, onCode }) => { |
|||
const [loaded, setLoaded] = useState(false); |
|||
|
|||
const toast = (text) => |
|||
window.weui.toast(text, { |
|||
className: "toast", |
|||
}); |
|||
|
|||
useEffect(() => { |
|||
if (loaded) { |
|||
const dom = document.getElementById("qrcode-scaner"); |
|||
const html5QrCode = new Html5Qrcode("qrcode-scaner"); |
|||
html5QrCode |
|||
.start( |
|||
{ facingMode: "environment" }, |
|||
{ fps: 10, qrbox: { width: 280, height: 280 } }, |
|||
(code) => { |
|||
html5QrCode.stop(); |
|||
onCode && onCode(code); |
|||
} |
|||
) |
|||
.catch(() => { |
|||
toast("启动二维码扫描失败"); |
|||
onBack && onBack(); |
|||
}); |
|||
return () => { |
|||
html5QrCode.stop(); |
|||
}; |
|||
} |
|||
}, [loaded]); |
|||
return ( |
|||
<Modal |
|||
onAfterOpen={() => setLoaded(true)} |
|||
isOpen |
|||
ariaHideApp={false} |
|||
className="ScanModal" |
|||
> |
|||
<div className="border"> |
|||
<div className="scaner"></div> |
|||
<div |
|||
className="container" |
|||
id="qrcode-scaner" |
|||
width="280px" |
|||
height="280px" |
|||
></div> |
|||
</div> |
|||
<div className="btn" onClick={() => onBack && onBack()}> |
|||
手动输入券码 |
|||
</div> |
|||
<div className="back" onClick={() => onBack && onBack()}></div> |
|||
</Modal> |
|||
); |
|||
}; |
|||
export default ScanModal; |
|||
@ -1,72 +0,0 @@ |
|||
.ScanModal { |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background: #353230; |
|||
overflow: hidden; |
|||
.back { |
|||
position: absolute; |
|||
bottom: 48px; |
|||
left: 0; |
|||
right: 0; |
|||
margin: auto; |
|||
width: 48px; |
|||
height: 48px; |
|||
background: center / cover no-repeat url(./close.svg); |
|||
} |
|||
.btn { |
|||
position: absolute; |
|||
height: 56px; |
|||
left: 29px; |
|||
right: 28px; |
|||
bottom: 130px; |
|||
background: #ffffff; |
|||
border-radius: 10px; |
|||
font-weight: 600; |
|||
font-size: 16px; |
|||
line-height: 22px; |
|||
color: #437af7; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.border { |
|||
position: absolute; |
|||
top: 94px; |
|||
left: 0; |
|||
right: 0; |
|||
margin: auto; |
|||
width: 320px; |
|||
height: 320px; |
|||
background: center / cover no-repeat url(./border.svg); |
|||
overflow: hidden; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
@keyframes scaner { |
|||
0% { |
|||
top: -74px; |
|||
} |
|||
100% { |
|||
top: 320px; |
|||
} |
|||
} |
|||
.scaner { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
width: 320px; |
|||
height: 74px; |
|||
background: center / cover no-repeat url(./scaner.svg); |
|||
animation: 1s scaner infinite ease-in-out; |
|||
z-index: 2; |
|||
} |
|||
.container { |
|||
width: 280px; |
|||
height: 280px; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
} |
|||
|
Before Width: | Height: | Size: 544 B |
|
Before Width: | Height: | Size: 303 B |
|
Before Width: | Height: | Size: 758 B |
|
Before Width: | Height: | Size: 424 B |
@ -1,130 +0,0 @@ |
|||
import "./ShopManager.scss"; |
|||
import noDataPic from "./noDataPic.png"; |
|||
import { post } from "../../../js/helpers/data-helper"; |
|||
import InfiniteScroll from "react-infinite-scroller"; |
|||
import { useState, useRef, useCallback } from "react"; |
|||
import ListEnd from "../ListEnd/ListEnd"; |
|||
import ApplyModal from "../ApplyModal/ApplyModal"; |
|||
import WriteOffModal from "../WriteOffModal/WriteOffModal"; |
|||
|
|||
const stateMap = { |
|||
0: "待审核", |
|||
1: "已发布", |
|||
2: "已拒绝", |
|||
}; |
|||
|
|||
const ShopManager = ({ memberID }) => { |
|||
const [list, setList] = useState([]); |
|||
const [nextPageIndex, setNextPageIndex] = useState(1); |
|||
const [loading, setLoading] = useState(false); |
|||
|
|||
const [showApplyModal, setShowApplyModal] = useState(false); |
|||
const [showWriteOffModal, setShowWriteOffModal] = useState(false); |
|||
const listRef = useRef(); |
|||
const showNoData = !loading && list.length === 0; |
|||
const showListEnd = !loading && list.length > 0; |
|||
|
|||
const hasMore = nextPageIndex !== null; |
|||
|
|||
const loadMore = useCallback(async () => { |
|||
if (loading || nextPageIndex === null) return; |
|||
setLoading(true); |
|||
try { |
|||
const { code, data, msg } = await post("/api/coupon/ApplyedList", { |
|||
paging: 1, |
|||
pageIndex: nextPageIndex, |
|||
pageSize: 10, |
|||
memberID, |
|||
}); |
|||
if (code === "200") { |
|||
setList([...list, ...data.list]); |
|||
setNextPageIndex( |
|||
nextPageIndex + 1 > data.allPage ? null : nextPageIndex + 1 |
|||
); |
|||
} else { |
|||
setNextPageIndex(null); |
|||
window.weui.toast(msg, { |
|||
className: "toast", |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
setNextPageIndex(null); |
|||
} finally { |
|||
setLoading(false); |
|||
} |
|||
}, [list, loading, nextPageIndex]); |
|||
return ( |
|||
<div className="ShopManager"> |
|||
<div className="btns"> |
|||
<div className="btn" onClick={() => setShowApplyModal(true)}> |
|||
申请 |
|||
</div> |
|||
<div className="btn" onClick={() => setShowWriteOffModal(true)}> |
|||
核销 |
|||
</div> |
|||
</div> |
|||
|
|||
<div className="list-container" ref={listRef}> |
|||
<InfiniteScroll |
|||
loadMore={loadMore} |
|||
hasMore={hasMore} |
|||
useWindow={false} |
|||
getScrollParent={() => listRef && listRef.current} |
|||
> |
|||
{showNoData && ( |
|||
<> |
|||
<img className="noDataPic" src={noDataPic}></img> |
|||
<div className="noDataText"> |
|||
当前您还未发布礼券，请先申请，等待后台申请通过后，刷新页面显示 |
|||
</div> |
|||
</> |
|||
)} |
|||
{list !== null && |
|||
list.map((coupon) => ( |
|||
<div key={coupon.code} className={`coupon status${coupon.state}`}> |
|||
<div className="row"> |
|||
<div className="r1">礼券标题</div> |
|||
<div className="r2">{coupon.title}</div> |
|||
</div> |
|||
<div className="row"> |
|||
<div className="r1">发放数量</div> |
|||
<div className="r2">{coupon.totalCount}</div> |
|||
</div> |
|||
{coupon.state === 1 && ( |
|||
<div className="row"> |
|||
<div className="r1">已领取数</div> |
|||
<div className="r2">{coupon.received}</div> |
|||
</div> |
|||
)} |
|||
<div className="row"> |
|||
<div className="r1">使用期限</div> |
|||
<div className="r2"> |
|||
{coupon.beginTime}至{coupon.endTime} |
|||
</div> |
|||
</div> |
|||
<div className="status">{stateMap[coupon.state]}</div> |
|||
</div> |
|||
))} |
|||
{showListEnd && <ListEnd></ListEnd>} |
|||
</InfiniteScroll> |
|||
</div> |
|||
{showApplyModal && ( |
|||
<ApplyModal |
|||
onBack={() => { |
|||
setShowApplyModal(false); |
|||
setList([]); |
|||
setNextPageIndex(1); |
|||
}} |
|||
memberID={memberID} |
|||
></ApplyModal> |
|||
)} |
|||
{showWriteOffModal && ( |
|||
<WriteOffModal |
|||
onBack={() => setShowWriteOffModal(false)} |
|||
memberID={memberID} |
|||
></WriteOffModal> |
|||
)} |
|||
</div> |
|||
); |
|||
}; |
|||
export default ShopManager; |
|||
@ -1,132 +0,0 @@ |
|||
.ShopManager { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background: linear-gradient( |
|||
180deg, |
|||
#f2f2f2 0%, |
|||
rgba(249, 249, 249, 0) 20.18% |
|||
); |
|||
border-radius: 18px 18px 0 0; |
|||
padding-top: 10px; |
|||
width: 100vw; |
|||
align-items: center; |
|||
overflow: hidden; |
|||
.btns { |
|||
display: flex; |
|||
margin-bottom: 10px; |
|||
width: calc(100vw - 20px); |
|||
.btn { |
|||
display: flex; |
|||
flex: 1; |
|||
font-weight: 400; |
|||
font-size: 17px; |
|||
color: #353230; |
|||
height: 48px; |
|||
background: #ffffff; |
|||
border-radius: 10px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.btn + .btn { |
|||
margin-left: 9px; |
|||
} |
|||
} |
|||
.noDataPic { |
|||
margin-top: 64px; |
|||
width: 250px; |
|||
height: 250px; |
|||
} |
|||
.noDataText { |
|||
margin: 0 43px; |
|||
font-weight: 400; |
|||
font-size: 17px; |
|||
line-height: 22px; |
|||
text-align: center; |
|||
color: #68655e; |
|||
} |
|||
.list-container { |
|||
flex: 1; |
|||
overflow-x: hidden; |
|||
overflow-y: scroll; |
|||
padding-top: 16px; |
|||
text-align: center; |
|||
scroll-behavior: smooth; |
|||
|
|||
&::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
.coupon { |
|||
position: relative; |
|||
width: calc(100vw - 20px); |
|||
border-radius: 16px; |
|||
overflow: hidden; |
|||
padding: 24px; |
|||
.row { |
|||
height: 50px; |
|||
border-bottom: 1px solid rgba(240, 240, 240, 0.4); |
|||
|
|||
.r1 { |
|||
font-weight: 400; |
|||
font-size: 15px; |
|||
line-height: 20px; |
|||
color: #9d988f; |
|||
text-align: left; |
|||
} |
|||
.r2 { |
|||
font-weight: 600; |
|||
font-size: 17px; |
|||
line-height: 22px; |
|||
color: #353230; |
|||
margin-top: 6px; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
text-align: left; |
|||
} |
|||
} |
|||
.row + .row { |
|||
margin-top: 10px; |
|||
} |
|||
.status { |
|||
position: absolute; |
|||
width: 72px; |
|||
height: 32px; |
|||
top: 0; |
|||
right: 0; |
|||
display: flex; |
|||
font-weight: 600; |
|||
font-size: 13px; |
|||
line-height: 18px; |
|||
color: #ffffff; |
|||
border-radius: 0px 0px 0px 14px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
&.status0 { |
|||
background: linear-gradient(241.87deg, #ffffff 2.89%, #fffbf8 97.29%); |
|||
.status { |
|||
background: linear-gradient(90deg, #ecd3a6 5.56%, #dbb979 100%); |
|||
box-shadow: 4px 6px 18px rgba(214, 162, 101, 0.3); |
|||
} |
|||
} |
|||
&.status1 { |
|||
background: linear-gradient(241.87deg, #ffffff 2.89%, #fefff8 97.29%); |
|||
.status { |
|||
background: linear-gradient(270.4deg, #71c956 0.27%, #7add83 87.87%); |
|||
box-shadow: 4px 6px 18px rgba(151, 214, 101, 0.3); |
|||
} |
|||
} |
|||
&.status2 { |
|||
background: linear-gradient(241.87deg, #ffffff 2.89%, #fffafa 97.29%); |
|||
.status { |
|||
background: linear-gradient(270deg, #e76464 3.47%, #ffa0a0 90.28%); |
|||
box-shadow: 4px 6px 18px rgba(214, 101, 122, 0.3); |
|||
} |
|||
} |
|||
} |
|||
.coupon + .coupon { |
|||
margin-top: 8px; |
|||
} |
|||
} |
|||
} |
|||
|
Before Width: | Height: | Size: 42 KiB |
@ -1,26 +0,0 @@ |
|||
import "./ShopTabs.scss"; |
|||
import card from "./card.svg"; |
|||
import cardActive from "./cardActive.svg"; |
|||
import ticket from "./ticket.svg"; |
|||
import ticketActive from "./ticketActive.svg"; |
|||
const ShopTabs = ({ showCoupons, setShowCoupons }) => { |
|||
return ( |
|||
<div className="ShopTabs"> |
|||
<div |
|||
className={`tab ${showCoupons ? "active" : ""}`} |
|||
onClick={() => setShowCoupons(true)} |
|||
> |
|||
<img src={showCoupons ? cardActive : card}></img> |
|||
我的礼包 |
|||
</div> |
|||
<div |
|||
className={`tab ${!showCoupons ? "active" : ""}`} |
|||
onClick={() => setShowCoupons(false)} |
|||
> |
|||
<img src={!showCoupons ? ticketActive : ticket}></img> |
|||
券管家 |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
export default ShopTabs; |
|||
@ -1,32 +0,0 @@ |
|||
.ShopTabs { |
|||
display: flex; |
|||
width: calc(100vw - 20px); |
|||
height: 56px; |
|||
background: #ffffff; |
|||
border-radius: 12px; |
|||
padding: 4px; |
|||
margin-bottom: 16px; |
|||
margin-top: 10px; |
|||
.tab { |
|||
display: flex; |
|||
flex: 1; |
|||
height: 48px; |
|||
font-weight: 500; |
|||
font-size: 16px; |
|||
line-height: 22px; |
|||
color: #68655e; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-radius: 8px; |
|||
img { |
|||
width: 20px; |
|||
height: 20px; |
|||
margin-right: 8px; |
|||
} |
|||
&.active { |
|||
color: #ffffff; |
|||
background: linear-gradient(180deg, #508af7 0%, #5ea5f9 100%); |
|||
box-shadow: 0px 6px 12px rgba(93, 172, 249, 0.2); |
|||
} |
|||
} |
|||
} |
|||
|
Before Width: | Height: | Size: 667 B |
|
Before Width: | Height: | Size: 665 B |
|
Before Width: | Height: | Size: 617 B |
|
Before Width: | Height: | Size: 615 B |
@ -1,148 +0,0 @@ |
|||
import "./WriteOffModal.scss"; |
|||
import Modal from "react-modal"; |
|||
import { useState, useRef, useEffect, useCallback } from "react"; |
|||
import { post } from "../../../js/helpers/data-helper"; |
|||
import ScanModal from "../ScanModal/ScanModal"; |
|||
import InfiniteScroll from "react-infinite-scroller"; |
|||
import ListEnd from "../ListEnd/ListEnd"; |
|||
|
|||
const WriteOffModal = ({ onBack, memberID }) => { |
|||
const [orderNo, setOrderNo] = useState(""); |
|||
const [showScanModal, setShowScanModal] = useState(false); |
|||
const [list, setList] = useState([]); |
|||
const [nextPageIndex, setNextPageIndex] = useState(1); |
|||
const [loading, setLoading] = useState(false); |
|||
const hasMore = nextPageIndex !== null; |
|||
const [allCount, setAllCount] = useState(0); |
|||
const [month, setMonth] = useState(new Date().toJSON().slice(0, 7)); |
|||
const showListEnd = list !== null && list.length > 0; |
|||
const listRef = useRef(); |
|||
|
|||
const loadMore = useCallback(async () => { |
|||
if (loading || nextPageIndex === null) return; |
|||
setLoading(true); |
|||
try { |
|||
const { code, data, msg } = await post("/api/Coupon/WriteOffHis", { |
|||
paging: 1, |
|||
pageIndex: nextPageIndex, |
|||
pageSize: 10, |
|||
memberID, |
|||
month, |
|||
}); |
|||
if (code === "200") { |
|||
setList([...list, ...data.list]); |
|||
setNextPageIndex( |
|||
nextPageIndex + 1 > data.allPage ? null : nextPageIndex + 1 |
|||
); |
|||
setAllCount(data.allCount); |
|||
} else { |
|||
setNextPageIndex(null); |
|||
window.weui.toast(msg, { |
|||
className: "toast", |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
setNextPageIndex(null); |
|||
} finally { |
|||
setLoading(false); |
|||
} |
|||
}, [list, loading, nextPageIndex]); |
|||
|
|||
useEffect(() => { |
|||
if (listRef.current) listRef.current.scrollTop = 0; |
|||
setNextPageIndex(1); |
|||
setAllCount(0); |
|||
setList([]); |
|||
}, [month]); |
|||
|
|||
const toast = (text) => |
|||
window.weui.toast(text, { |
|||
className: "toast", |
|||
}); |
|||
const writeOff = async (orderNo) => { |
|||
try { |
|||
const { code, msg } = await post("/api/coupon/writeoffcoupon", { |
|||
orderNo, |
|||
memberID, |
|||
}); |
|||
if (code === "200") { |
|||
toast("核销成功"); |
|||
return true; |
|||
} else { |
|||
toast(msg); |
|||
return false; |
|||
} |
|||
} catch (error) { |
|||
return false; |
|||
} |
|||
}; |
|||
const submitFromBtn = async (orderNo) => { |
|||
const result = await writeOff(orderNo); |
|||
if (result) { |
|||
setOrderNo(""); |
|||
} |
|||
}; |
|||
const handleCode = async (orderNo) => { |
|||
await writeOff(orderNo); |
|||
setShowScanModal(false); |
|||
}; |
|||
return ( |
|||
<Modal isOpen ariaHideApp={false} className="WriteOffModal"> |
|||
<div className="back" onClick={() => onBack && onBack()}></div> |
|||
<div className="title">核销</div> |
|||
<div className="search"> |
|||
<div className="icon"></div> |
|||
<input |
|||
type="number" |
|||
value={orderNo} |
|||
onChange={(e) => setOrderNo(e.target.value)} |
|||
></input> |
|||
</div> |
|||
<div className="scan" onClick={() => setShowScanModal(true)}></div> |
|||
{!!orderNo && ( |
|||
<div className="btn" onClick={() => submitFromBtn(orderNo)}> |
|||
确认核销 |
|||
</div> |
|||
)} |
|||
<div className="bar"> |
|||
<div>已核销（{allCount}张）</div> |
|||
<input |
|||
type="month" |
|||
value={month} |
|||
onChange={(e) => setMonth(e.target.value)} |
|||
></input> |
|||
</div> |
|||
<div className="list-container" ref={listRef}> |
|||
<InfiniteScroll |
|||
pageStart={0} |
|||
loadMore={loadMore} |
|||
hasMore={hasMore} |
|||
useWindow={false} |
|||
getScrollParent={() => listRef && listRef.current} |
|||
> |
|||
{list !== null && |
|||
list.map((coupon) => ( |
|||
<div key={coupon.orderNo} className="coupon"> |
|||
<div className="block"> |
|||
<div className="r1">礼券标题</div> |
|||
<div className="r2">{coupon.title}</div> |
|||
</div> |
|||
<div className="block"> |
|||
<div className="r1">核销时间</div> |
|||
<div className="r2">{coupon.writeOffTime}</div> |
|||
</div> |
|||
</div> |
|||
))} |
|||
{showListEnd && <ListEnd></ListEnd>} |
|||
</InfiniteScroll> |
|||
</div> |
|||
{showScanModal && ( |
|||
<ScanModal |
|||
onBack={() => setShowScanModal(false)} |
|||
onCode={handleCode} |
|||
></ScanModal> |
|||
)} |
|||
</Modal> |
|||
); |
|||
}; |
|||
export default WriteOffModal; |
|||
@ -1,162 +0,0 @@ |
|||
.WriteOffModal { |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background: #f6f6f6; |
|||
overflow: hidden; |
|||
.back { |
|||
position: absolute; |
|||
top: 10px; |
|||
left: 10px; |
|||
width: 60px; |
|||
height: 60px; |
|||
background: center / cover no-repeat url(./back.svg); |
|||
} |
|||
.title { |
|||
position: absolute; |
|||
top: 28px; |
|||
right: 16px; |
|||
font-style: normal; |
|||
font-weight: 600; |
|||
font-size: 20px; |
|||
line-height: 25px; |
|||
color: #000000; |
|||
} |
|||
.search { |
|||
position: absolute; |
|||
top: 94px; |
|||
left: 10px; |
|||
right: 108px; |
|||
background: #ffffff; |
|||
border-radius: 10px; |
|||
height: 60px; |
|||
overflow: hidden; |
|||
.icon { |
|||
position: absolute; |
|||
top: 14px; |
|||
left: 14px; |
|||
width: 47px; |
|||
height: 32px; |
|||
background: center / cover no-repeat url(./search.svg); |
|||
} |
|||
input { |
|||
position: absolute; |
|||
left: 75px; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
font-weight: 600; |
|||
font-size: 16px; |
|||
line-height: 22px; |
|||
border: none; |
|||
outline: none; |
|||
color: #353230; |
|||
&::placeholder { |
|||
color: #dad7d1; |
|||
} |
|||
} |
|||
} |
|||
.scan { |
|||
position: absolute; |
|||
top: 94px; |
|||
right: 16px; |
|||
width: 80px; |
|||
height: 60px; |
|||
background: center / cover no-repeat url(./scan.svg); |
|||
} |
|||
.btn { |
|||
position: absolute; |
|||
height: 56px; |
|||
left: 29px; |
|||
right: 28px; |
|||
bottom: 126px; |
|||
font-weight: 600; |
|||
font-size: 16px; |
|||
line-height: 22px; |
|||
text-align: center; |
|||
color: #ffffff; |
|||
background: linear-gradient(180deg, #508af7 0%, #5ea5f9 100%); |
|||
box-shadow: 0px 6px 12px rgba(93, 172, 249, 0.2); |
|||
border-radius: 10px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 1; |
|||
} |
|||
.bar { |
|||
position: absolute; |
|||
top: 178px; |
|||
left: 24px; |
|||
right: 24px; |
|||
height: 20px; |
|||
font-weight: 600; |
|||
font-size: 15px; |
|||
line-height: 20px; |
|||
color: #353230; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
input { |
|||
outline: none; |
|||
border: none; |
|||
background: none; |
|||
} |
|||
&::after { |
|||
content: ""; |
|||
position: absolute; |
|||
left: -8px; |
|||
bottom: -8px; |
|||
right: -5px; |
|||
height: 1px; |
|||
background: #dad7d1; |
|||
opacity: 0.6; |
|||
} |
|||
} |
|||
.list-container { |
|||
position: absolute; |
|||
top: 206px; |
|||
bottom: 0px; |
|||
left: 10px; |
|||
right: 10px; |
|||
overflow-x: hidden; |
|||
overflow-y: scroll; |
|||
text-align: center; |
|||
&::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
.coupon { |
|||
height: 170px; |
|||
background: #ffffff; |
|||
border-radius: 16px; |
|||
padding: 24px; |
|||
margin-top: 10px; |
|||
.block { |
|||
height: 54px; |
|||
border-bottom: 1px solid rgba(240, 240, 240, 0.4); |
|||
text-align: left; |
|||
.r1 { |
|||
font-weight: 400; |
|||
font-size: 15px; |
|||
line-height: 20px; |
|||
color: #9d988f; |
|||
} |
|||
.r2 { |
|||
font-style: normal; |
|||
font-weight: 600; |
|||
font-size: 17px; |
|||
line-height: 22px; |
|||
color: #353230; |
|||
margin-top: 6px; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
} |
|||
.block + .block { |
|||
margin-top: 16px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
Before Width: | Height: | Size: 544 B |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 653 B |
|
Before Width: | Height: | Size: 62 KiB |
@ -1,121 +0,0 @@ |
|||
import "./ShopCoupons.scss"; |
|||
import { useState, useEffect } from "react"; |
|||
import { post } from "../../js/helpers/data-helper"; |
|||
|
|||
const ShopCoupons = ({ onBack, shop, memberID }) => { |
|||
const [coupons, setCoupons] = useState([]); |
|||
const [receiving, setReceiving] = useState(false); |
|||
const getList = async () => { |
|||
try { |
|||
const { code, data, msg } = await post( |
|||
"/Api/Coupon/ShopDetailCouponList", |
|||
{ |
|||
paging: 0, |
|||
memberID, |
|||
shopCode: shop.code, |
|||
} |
|||
); |
|||
if (code !== "200") |
|||
window.weui.toast(msg, { |
|||
className: "toast", |
|||
}); |
|||
else setCoupons(data); |
|||
} catch (error) { |
|||
console.warn(error); |
|||
} |
|||
}; |
|||
useEffect(() => { |
|||
getList(); |
|||
}, []); |
|||
const receive = async (coupon) => { |
|||
setReceiving(true); |
|||
try { |
|||
const { code, data, msg } = await post("/Api/Coupon/ShopCouponReceive", { |
|||
couponCode: coupon.code, |
|||
memberID, |
|||
}); |
|||
window.weui.toast(msg, { |
|||
className: "toast", |
|||
}); |
|||
if (code === "200") { |
|||
getList(); |
|||
} |
|||
} catch (error) { |
|||
console.warn(error); |
|||
} finally { |
|||
setReceiving(false); |
|||
} |
|||
}; |
|||
return ( |
|||
<div className="ShopCoupons"> |
|||
<div className="header"> |
|||
<div |
|||
className="back" |
|||
onClick={() => { |
|||
onBack && onBack(); |
|||
}} |
|||
></div> |
|||
{shop.name} |
|||
</div> |
|||
<div className="list"> |
|||
{coupons.map((coupon, i) => ( |
|||
<div className="item" key={coupon.code}> |
|||
<div className="left"> |
|||
<img className="avatar" src={shop.logoPath}></img> |
|||
</div> |
|||
<div className="right"> |
|||
<div className="r1"> |
|||
<div className="content">{coupon.title}</div> |
|||
<div |
|||
className={ |
|||
"btn " + |
|||
(coupon.detailReceived >= coupon.detailReceiveCount |
|||
? "disabled" |
|||
: "") |
|||
} |
|||
onClick={() => { |
|||
if ( |
|||
coupon.detailReceived >= coupon.detailReceiveCount || |
|||
receiving |
|||
) |
|||
return; |
|||
receive(coupon); |
|||
}} |
|||
> |
|||
{coupon.detailReceived >= coupon.detailReceiveCount |
|||
? "已领取" |
|||
: "领券"} |
|||
</div> |
|||
</div> |
|||
<div className="r2"> |
|||
<div>使用期限</div> |
|||
<div> |
|||
{coupon.beginTime}至{coupon.endTime} |
|||
</div> |
|||
<div |
|||
className="desc" |
|||
onClick={() => { |
|||
coupon.isOpen = !coupon.isOpen; |
|||
setCoupons([...coupons]); |
|||
}} |
|||
> |
|||
查看详情 |
|||
<div |
|||
className={"icon " + (coupon.isOpen ? "open" : "")} |
|||
></div> |
|||
</div> |
|||
</div> |
|||
{!!coupon.isOpen && ( |
|||
<div className="r3"> |
|||
<div className="title">使用规则</div> |
|||
<div className="content">{coupon.couponRules}</div> |
|||
</div> |
|||
)} |
|||
</div> |
|||
</div> |
|||
))} |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
export default ShopCoupons; |
|||
@ -1,144 +0,0 @@ |
|||
.ShopCoupons { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background: #f3f4f8; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.header { |
|||
flex: 0 0 43px; |
|||
display: flex; |
|||
padding: 9px 16px 10px 18px; |
|||
justify-content: space-between; |
|||
font-weight: 600; |
|||
font-size: 20px; |
|||
line-height: 25px; |
|||
color: #323337; |
|||
white-space: nowrap; |
|||
align-items: center; |
|||
.back { |
|||
width: 24px; |
|||
height: 24px; |
|||
background: center / cover no-repeat url(./back.svg); |
|||
} |
|||
} |
|||
.list { |
|||
flex: 1; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
padding: 0 10px; |
|||
* { |
|||
display: flex; |
|||
} |
|||
.item { |
|||
background: #ffffff; |
|||
border: 1px solid #edeff3; |
|||
box-shadow: 2px 6px 8px rgba(104, 110, 127, 0.08); |
|||
border-radius: 18px; |
|||
padding: 16px; |
|||
.left { |
|||
flex: 0 0 40px; |
|||
.avatar { |
|||
width: 40px; |
|||
height: 40px; |
|||
padding: 5px; |
|||
border: 1px solid #edeff3; |
|||
box-shadow: 2px 6px 8px rgba(104, 110, 127, 0.08); |
|||
border-radius: 38px; |
|||
object-fit: cover; |
|||
} |
|||
} |
|||
.right { |
|||
flex: 1; |
|||
flex-direction: column; |
|||
.r1 { |
|||
padding-left: 10px; |
|||
height: 40px; |
|||
justify-content: space-between; |
|||
flex: 1; |
|||
align-items: center; |
|||
.content { |
|||
display: block; |
|||
width: calc(100vw - 192px); |
|||
font-size: 20px; |
|||
color: #323337; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
.btn { |
|||
flex: 0 0 90px; |
|||
width: 90px; |
|||
height: 38px; |
|||
background: linear-gradient(180deg, #508af7 0%, #5ea5f9 100%); |
|||
box-shadow: 0px 6px 12px rgba(93, 172, 249, 0.2); |
|||
border-radius: 10px; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 14px; |
|||
color: #ffffff; |
|||
&.disabled { |
|||
background: #f3f4f8; |
|||
box-shadow: none; |
|||
color: #a1a5b3; |
|||
} |
|||
&:active { |
|||
opacity: 0.7; |
|||
} |
|||
} |
|||
} |
|||
.r2 { |
|||
margin-left: 10px; |
|||
margin-top: 18px; |
|||
border-top: 1px solid #edeff3; |
|||
padding-top: 6px; |
|||
font-size: 12px; |
|||
line-height: 18px; |
|||
color: #474a56; |
|||
flex-direction: column; |
|||
.desc { |
|||
margin-top: 10px; |
|||
font-size: 13px; |
|||
height: 18px; |
|||
color: #437af7; |
|||
align-items: center; |
|||
.icon { |
|||
margin-left: 2px; |
|||
width: 16px; |
|||
height: 16px; |
|||
background: center / cover no-repeat url(./arrow.svg); |
|||
transition: all 0.25s ease-in-out; |
|||
margin-left: 2px; |
|||
&.open { |
|||
transform: rotate(90deg); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.r3 { |
|||
flex-direction: column; |
|||
background: #f9f9fb; |
|||
border-radius: 8px; |
|||
padding: 10px; |
|||
.title { |
|||
font-size: 13px; |
|||
line-height: 18px; |
|||
color: #7a7e8d; |
|||
margin-bottom: 4px; |
|||
} |
|||
.content { |
|||
font-size: 12px; |
|||
line-height: 16px; |
|||
color: #a1a5b3; |
|||
opacity: 0.8; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.item + .item { |
|||
margin-top: 8px; |
|||
} |
|||
} |
|||
} |
|||
|
Before Width: | Height: | Size: 743 B |
|
Before Width: | Height: | Size: 481 B |
Loading…
Reference in new issue