1.需求
有时候在开发的时候，需要实现一个签到获取积分的功能，使用react怎么实现呢？
需求如下：
1.当点击“签到”按钮时，弹出签到框
2.展示签到信息：
签到天数，
对应天数签到能够获取的积分，
对应天数是否签到效果展示，
签到按钮，
签到说明，
3.点击“签到”按钮，实现签到功能
(1).如果当天没有签到,按钮文案“请签到”，点击后，执行签到功能，签到成功后，提示签到获取，然后提示慢慢隐藏
(2).如果已经签到，按钮文案“已签到”，不能触发点击事件
图示如下：
2.实现
要实现上面的功能，需要使用vant的Dialog弹出框组件，代码如下：
主页代码：
点击“签到按钮”，设置Dialog签到弹出框visible属性：显示弹出框
import GetSign from "../components/GetSign";
const Index = () => {
//签到弹出框显示设置
const [signDiaLogVisible, setSignDiaLogVisible] = useState(false);
return (
//点击签到按钮，设置弹出框显示
<div onClick={() => setVisible(true)}>签到按钮</div>
//签到弹框组件引用
<GetSign signDiaLogVisible={signDiaLogVisible} setSignDiaLogVisible={setSignDiaLogVisible} />
);
}
export default Index;签到弹框组件js：
import React, { useEffect } from "react";
import { useHistory } from "react-router-dom";
import { Dialog } from "react-vant";
import { PersistContext } from "../../data/PersistProvider";
import { RootStateContext } from "../../data/RootStateProvider";
import { SendCMD } from "../../utils/HTTPRequest";
import style from "./style.less";
//todo： 签到数据(可根据自己项目需求自行构建结构)：
//checked:是否已经签到，award：积分，
//数组的key就是天数，key从0开始，所以需要加1才是真正的天数
const data = { //前端构建的签到结构，这里一般是从服务端获取数据,具体字段名称根据需求情况自行确定
check_days: [ //天数
{ // key: 0, 第一天
checked: true, //是否已经签到
award: 2000, //积分数
},
{ // key: 1, 第二天,下面依次类推
checked: true,
award: 3000,
},
{
checked: true,
award: 3000,
},
{
checked: false,
award: 4000,
},
{
checked: false,
award: 5000,
},
{
checked: false,
award: 5000,
},
{
checked: false,
award: 8000,
},
],
today_checkable: true, //今天是否可以签到
};
const GetSign = (props) => {
let history = useHistory();
//persist：保存到浏览器的临时缓存数据
const { getPersist} = React.useContext(PersistContext);
//用户信息
const userInfo = getPersist("user_info");
//是否展示签到所得
const [visible, setVisible] = React.useState(-1);
//弹框数据初始化
const [signData, setSignData] = React.useState(data);
//获取签到数据
const sign_data = () => { //从服务端api获取签到数据
SendCMD("getCheckIn", { token: userInfo.token }).then((res) => {
if (res.check_in_data) {
setSignData(res.check_in_data); //数据应该和上面data中的保持一致
}
});
};
//签到请求
const sign_cmd = () => {
SendCMD("doCheckIn", { token: userInfo.token }).then((res) => {
if (res[0].check_success && res[0].check_in_data) { //判断是否签到成功，并更新签到信息
setSignData(res[0].check_in_data);
}
//判断最后一次签到的index
let activeIndex = -1;
res[0].check_in_data.check_days.map((item, index) => { //循环，设置最后一次签到的index
if (item.checked) {
activeIndex = index;
}
});
//设置显示的log index
setVisible(activeIndex);
});
};
//初始化签到数据
useEffect(() => {
if (userInfo) {
sign_data();
}
}, [userInfo]);
//点击签到按钮事件
const onSignClick = () => {
//判断是否登录
if (!userInfo) {
//跳转到注册页面
history.push("./login");
return;
}
//todo 判断是否可以点击
if (!signData["today_checkable"]) {
//已经签到，弹框提示
alert("今天已签到");
return;
}
//请求接口签到，并根据返回结果响应改变展示效果
sign_cmd();
};
return (
<Dialog
closeable={true}
closeOnClickOverlay={true}
width={"85%"}
// closeIcon={<Close />}
visible={props.visible != 0}
showCancelButton={false}
className={style.signDialog}
showConfirmButton={false}
onClose={() => {
props.setVisible(false);
}}
>
<div class={style.firstSignDialog}>
<div style={{ width: "100%", height: "4rem" }}>
<img style={{ width: "43%", marginTop: "1.2rem" }} src="../images/sign_title.png" />
</div>
<div class={style.firstSignSteps}>
<div class={style.btntop}>
{signData.check_days
? signData.check_days.map((item, index) => {
return (
<div key={index} class={style.checkactivebox} id={"index" + index}>
<div class={style.c_l}>
<div class={style.c_l_text}>
<span>+{item.award / 100}</span>
</div>
<div class={item.checked ? style.yuanbox_yes : style.yuanbox}>
{item.checked ? (
<sapn className={style.yuanbox_num}>
<img src={"../images/sign_yes.png"} style={{ width: "1rem" }} />
</sapn>
) : (
<sapn className={style.yuanbox_num}>{index + 1}</sapn>
)}
</div>
<div class={style.tian}>Day {index + 1}</div>
</div>
<div>
{index === 3 || index === 6 ? (
<img alt="" />
) : signData.check_days[index + 1].checked ? (
<img className={style.img_2} src="../images/sign_line2.png" alt="" />
) : (
<img className={style.img_2} src="../images/sign_line.png" alt="" />
)}
</div>
<div class={`${style.p_log} ${pLogVisible == index ? style.p_log_active : ""}`}>
{" "}
Coins +{item.award / 100}
</div>
</div>
);
})
: null}
</div>
</div>
<div class={style.firstSignBtn} onClick={onSignClick}>
<div class={style.firstSignDialogBtnText}>
{!userInfo ? (
<span>注册</span>
) : !signData.today_checkable ? (
<span>已签到</span>
) : (
<span>签到</span>
)}
</div>
</div>
<div class={style.signBottom}>
<div class={style.signBottom_title}>签到说明</div>
<div class={style.signBottom_content}>
<span>.说明1</span>
<br />
<span>.说明2</span>
<br />
<span>.说明3</span>
</div>
</div>
</div>
</Dialog>
);
};
export default GetSign;
签到弹出框css:
.signDialog {
--rv-dialog-background-color: rgba(0, 0, 0, 0);
}
.firstSignDialog {
text-align: center;
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url("../assets/images/sign.png");
}
.btntop {
margin: 0 0.53333rem;
display: flex;
flex-wrap: wrap;
font-weight: 700;
}
.c_l_text {
color: #CAE7DC;
font-weight: bold;
}
.img_1 {
width: 0.66667rem;
}
.tian {
color: #CAE7DC;
text-align: center;
font-weight: bold;
}
.checkactivebox {
width: 25%;
position: relative;
}
.img_1 {
width: 0.66667rem;
}
.yuanbox_yes {
width: 2rem;
height: 2rem;
z-index: 2;
border-radius: 99rem;
background-color: #00FFCC;
}
.yuanbox {
width: 2rem;
height: 2rem;
z-index: 2;
border-radius: 99rem;
background-color:#CAE7DC;
}
.yuanbox_num {
color: #035d3f;
font-weight: 700;
font-size: 1.2rem;
line-height: 2rem;
text-align: center;
}
.sign_toast {
margin-top: -7rem;
background-color: #f00 !important;
color: #006a2d !important;
}
.c_l {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
font-size: 1rem;
}
.img_2 {
position: absolute;
top: 1.9rem;
z-index: 1;
width: 100%;
}
.p_log {
position: absolute;
top: -0.53333rem;
left: 0.47333rem;
line-height: 1.43333rem;
text-align: center;
background-color: #035d3f;
font-size: 0.5rem;
color: #ffffff;
border-radius: 0.5rem;
padding-left: 0.15rem;
padding-right: 0.15rem;
z-index: 100;
opacity: 0;
}
@keyframes fadenum{
0%{opacity: 1;}
100%{opacity: 0;}
}
.p_log_active {
animation:fadenum 5s 1;
}
.firstCoinsSteps {
margin-top: 3%;
}
.firstSignBtn {
display: inline-block;
margin-bottom: 1.5rem;
background: url("../assets/home/sign_btn.png") no-repeat 100%;
background-size: 100%;
width: 80%;
border-radius: 2rem;
height: 3rem;
}
.firstSignDialogBtnText {
margin-top: 1rem;
transform: scale(1, 1.5);
}
.firstSignDialogBtnText span {
text-align: center;
font-weight: 700;
font-size: 1rem;
background-color: #000000;
color: #035d3f;
text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.925);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
.signBottom {
margin-top: 2%;
color: #969696;
font-weight: 700;
}
.signBottom_title {
font-size: 1.2rem;
}
.signBottom_content {
margin-top: 0.3rem;
}
.signBottom_content span {
text-align: left;
margin-left: 0.5rem;
width: 96%;
font-size: 0.8rem;
font-weight: 700;
display: inline-block;
}
上面要引入的setPersist组件：
import { createContext, useState, useEffect } from "react";
import { SendCMD } from "../utils/HTTPRequest";
import { DeepEqual, GetOS, GetBrowser } from "../utils/JSTool";
// 创建一个 Context
export const PersistContext = createContext(defaultPersist);
let untrackedData = defaultPersist;
// 创建一个 DataProvider 组件
export const PersistProvider = ({ children }) => {
const [data, setData] = useState(untrackedData);
const [expires, setExpires] = useState({});
useEffect(() => {
loadPersistDataOnce();
}, []);
const loadPersistDataOnce = () => {
if (untrackedData.dataLoaded) {
return;
}
let persistStr = localStorage.getItem("persist");
if (persistStr) {
try {
let persistData = JSON.parse(persistStr);
for (let key in persistData) {
if (typeof persistData[key] == "undefined" || persistData[key] == null) {
delete persistData[key];
}
}
untrackedData = Object.assign({}, untrackedData, persistData);
} catch (e) {
console.error(e);
}
}
let expiresStr = localStorage.getItem("expires");
if (expiresStr) {
try {
let expires = JSON.parse(expiresStr);
setExpires(expires);
} catch (e) {
console.error(e);
}
}
untrackedData.dataLoaded = true;
setData(Object.assign({}, untrackedData));
};
const setPersist = (key, value, expireSeconds) => {
loadPersistDataOnce();
if (DeepEqual(untrackedData[key], value)) return;
untrackedData[key] = value;
if (expireSeconds && expireSeconds > 0) {
let expireData = { ...expires };
expireData[key] = Date.now() + expireSeconds * 1000;
setExpires(expireData);
localStorage.setItem("expires", JSON.stringify(expireData));
}
setData(() => Object.assign({}, untrackedData));
localStorage.setItem("persist", JSON.stringify(untrackedData));
};
const getPersist = (key) => {
loadPersistDataOnce();
let value = data[key];
if (typeof value == "undefined") return null;
let keyExpire = expires[key];
if (keyExpire && keyExpire < Date.now()) {
let dataTmp = { ...data };
delete dataTmp[key];
delete untrackedData[key];
let expiresTmp = { ...expires };
delete expiresTmp[key];
localStorage.setItem("persist", JSON.stringify(dataTmp));
localStorage.setItem("expires", JSON.stringify(expiresTmp));
return null;
}
return value;
};
return (
<PersistContext.Provider value={{ getPersist, setPersist, reloadUserInfo }}>{children}</PersistContext.Provider>
);
};
好了，签到获取积分操作ok
