Commit 7d7a0824 authored by 俞嘉婷's avatar 俞嘉婷

del

parent a5a3266f
@import "../../res.less";
.MyPrize {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
.MyPrizeBg {
position: absolute;
left: 0;
top: 0;
width: 750px;
height: 1624px;
.webpBg("MyPrize/bg.png");
}
.MyPrizeTitle {
position: absolute;
left: 231px;
top: 98px;
width: 289px;
height: 70px;
.webpBg("MyPrize/我的奖品.png");
}
.MyPrizeBack {
position: absolute;
left: 20px;
top: 110px;
width: 28px;
height: 43px;
.webpBg("MyPrize/返回.png");
transform-origin: center left !important;
}
.ditu {
width: 684px;
height: 150px;
left: 33px;
// top: 1450px;
bottom: 30px;
position: fixed;
.sparkBg("choice_challenge/ditu.png");
}
.prizeList {
position: fixed;
left: 38px;
top: 260px;
width: 675px;
// height: 1180px;
bottom: 200px;
overflow-y: auto;
overflow-x: hidden;
.prizeItem {
position: relative;
width: 675px;
height: 149px;
margin-top: 20px;
.webpBg("MyPrize/itemBg.png");
.use {
position: absolute;
width: 141px;
height: 44px;
left: 520px;
top: 53px;
.webpBg("MyPrize/use.png");
}
.yifafang {
position: absolute;
width: 141px;
height: 44px;
left: 520px;
top: 53px;
text-align: center;
line-height: 44px;
font-size: 23px;
color: white;
.webpBg("MyPrize/grayBg.png");
}
.fafangzhong {
position: absolute;
width: 141px;
height: 44px;
left: 520px;
top: 53px;
text-align: center;
line-height: 44px;
.webpBg("MyPrize/redBg.png");
color: white;
font-size: 23px;
}
.shibai {
position: absolute;
width: 141px;
height: 44px;
left: 520px;
top: 53px;
text-align: center;
line-height: 44px;
font-size: 23px;
color: white;
.webpBg("MyPrize/grayBg.png");
}
.meidaoshijian {
position: absolute;
width: 141px;
height: 44px;
left: 520px;
top: 53px;
text-align: center;
line-height: 44px;
font-size: 23px;
color: white;
.webpBg("MyPrize/redBg.png");
}
.shijianguole {
position: absolute;
width: 141px;
height: 44px;
left: 520px;
top: 53px;
text-align: center;
line-height: 44px;
font-size: 23px;
color: white;
.webpBg("MyPrize/grayBg.png");
}
.keyibufa {
position: absolute;
width: 141px;
height: 44px;
left: 520px;
top: 53px;
text-align: center;
line-height: 44px;
font-size: 23px;
color: white;
.webpBg("MyPrize/redBg.png");
}
.remian {
position: absolute;
width: 200px;
height: 44px;
left: 454px;
top: 100px;
text-align: right;
line-height: 30px;
font-size: 23px;
.lineClamp1();
}
.prizeImg {
position: absolute;
left: 30px;
top: 20px;
width: 110px;
height: 110px;
border-width: 1px;
border-color: rgb(105, 40, 11);
border-style: solid;
border-radius: 11px;
background-color: rgb(255, 255, 255);
}
.prizeName {
font-size: 28px;
color: rgb(105, 40, 11);
text-align: left;
position: absolute;
left: 168px;
top: 40px;
width: 330px;
// font-weight: bold;
.lineClamp1();
}
.getTime {
font-size: 24.414px;
color: rgb(105, 40, 11);
text-align: left;
position: absolute;
left: 168px;
top: 82px;
color: rgb(158, 158, 158);
}
}
}
.nothing {
position: absolute;
left: 220px;
top: 200px;
width: 194px;
height: 326px;
.sparkBg("MyPrize/nothing.png")
}
}
\ No newline at end of file
import React from 'react';
import { observer } from 'mobx-react';
import './MyPrize.less';
import { Button, Toast } from "@grace/ui";
import { _asyncThrottle, dateFormatter, miniGoUrl } from "@/utils/utils.ts";
import API from "@/api";
import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
@observer
class MyPrize extends React.Component<any, any> {
state = {
list: [],
time: 0
}
componentDidMount() {
this.initList();
}
async initList() {
const { success, data, timeStamp } = await API.records({
ignoreSp: true,
});
if (!success) return;
this.setState({
list: data,
time: timeStamp
});
}
clickBack = () => {
PageCtrl.backPage();
}
clickItem = async (item) => {
const { id, url } = item
if (url) {
location.href = url
} else {
if (item.extra.refType === 'virtual') {
// 商家自冲奖品类型配置 {"prizeId":"奖品ID","type":"类型(1-专项特惠2-积分商城奖品3-积分奖品)"}
// 注意:旧的奖品没有type字段 需兼容
if (item?.type == 1) {
return miniGoUrl(CFG.isNewMiniVersion ? "/packages/user/exclusiveOffer?source=duiba" : "/pagesNews/user/userRed")
} else if (item?.type == 3) {
return miniGoUrl('/packages/user/points?source=duiba')
}
const res = await API.queryOrder({
recordId: item.id,
projectId: CFG.projectId
});
if (res?.data?.orderNo) {
// 线上正式用这个
wx.miniProgram.reLaunch({
url:
(CFG.isNewMiniVersion ? "/pages/index?source=duiba&orderNo=" : "/pages/index/index?orderNo=")
+ id
+ "&activityId=" + (res?.data?.activityId) + "&uid=" + (res?.data?.uid) + "&activityUrl=" + encodeURIComponent(location.origin + "/projectx/" + CFG.projectId + '/index.html?jumpFlag=1') + '&uid=' + res?.data?.uid
})
} else {
Toast.show('请稍后再试~')
}
} else {
location.href = `/aaw/projectx/takePrize?projectOrderNo=${id}`
}
}
}
handleMeidaoshijian = _asyncThrottle(() => {
Toast.show("未到补发时间")
})
handleShijianguole = _asyncThrottle(() => {
Toast.show("补发已过时效")
})
handleKeyibufa = _asyncThrottle(async (item) => {
await API.redpacket({
prizeRecordId: item.id,
});
this.initList();
}
);
render() {
const { list } = this.state;
const { time } = this.state;
return <div className="MyPrize">
<div className="MyPrizeBg" />
<div className="MyPrizeTitle" />
<div className="prizeList">
{
list.length > 0 ? list.map((item, index) => {
const remainingTime = item.moneyCanReissueEndTimestamp - time;
const days = Math.floor(remainingTime / (24 * 60 * 60 * 1000));
const hours = Math.floor((remainingTime % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
let ProgressText;
if (days === 0 && hours === 0) {
ProgressText = '剩余1小时';
} else {
ProgressText = `剩余${days}天${hours}小时`;
}
return (
<div className="prizeItem" key={index}>
<img className="prizeImg" src={item.extra.icon} />
<div className="prizeName">{item.extra.name}</div>
<div className="getTime">{item?.gmtCreate ? dateFormatter(item.gmtCreate, "yyyy.MM.dd") : ""}</div>
{item.type == 4 ? (
<>
{item.moneyStatus === 1 && <Button className="yifafang">已发放</Button>}
{item.moneyStatus === 2 && <Button className="shibai">发放失败</Button>}
{item.moneyStatus === 11 && <Button className="fafangzhong">发放中</Button>}
{item.moneyStatus === 10 && (
<>
{/* 1. 未到可补发时 */}
{item.moneyCanReissueStartTimestamp > time && (
<Button className="meidaoshijian" onClick={this.handleMeidaoshijian}>
补发红包
</Button>
)}
{/* 2. 已过可补发时间 */}
{time > item.moneyCanReissueEndTimestamp && (
<Button className="shijianguole" onClick={this.handleShijianguole}>
补发失败
</Button>
)}
{/* 3. 可补发 */}
{time < item.moneyCanReissueEndTimestamp &&
time > item.moneyCanReissueStartTimestamp && (
<>
<Button className="keyibufa" onClick={() => this.handleKeyibufa(item)}>
补发红包
</Button>
<span className="remian">{ProgressText}</span>
</>
)}
</>
)}
</>
) : (
<Button className="use" onClick={() => this.clickItem(item)} />
)}
</div>
)
// }) : <div className="nothing"/>
}) : null
}
</div>
<Button className="MyPrizeBack" onClick={this.clickBack} />
<div className="ditu"></div>
</div>;
}
}
export default MyPrize;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment