做相亲网站,免费一键生成原创短视频app,电子商务公司简介怎么写,手机版crm免费的1.需求 有时候在开发的时候#xff0c;需要实现一个签到获取积分的功能#xff0c;使用react怎么实现呢#xff1f; 需求如下#xff1a; 1.当点击“签到”按钮时#xff0c;弹出签到框 2.展示签到信息#xff1a; 签到天数#xff0c; 对应天数签到能够获取的积分…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); }//判断最后一次签到的indexlet activeIndex -1;res[0].check_in_data.check_days.map((item, index) { //循环设置最后一次签到的indexif (item.checked) {activeIndex index;}});//设置显示的log indexsetVisible(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 (Dialogcloseable{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 //divdiv 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/divdiv 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)}/divdiv class{style.tian}Day {index 1}/div/divdiv{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 /)}/divdiv class{${style.p_log} ${pLogVisible index ? style.p_log_active : }}{ }Coins {item.award / 100}/div/div);}): null}/div/divdiv class{style.firstSignBtn} onClick{onSignClick}div class{style.firstSignDialogBtnText}{!userInfo ? (span注册/span) : !signData.today_checkable ? (span已签到/span) : (span签到/span)}/div/divdiv class{style.signBottom}div class{style.signBottom_title}签到说明/divdiv class{style.signBottom_content}span.说明1/spanbr /span.说明2/spanbr /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
