From 2e01f32a73313a548a17dc1a9beae260fff966ac Mon Sep 17 00:00:00 2001 From: hackrobot Date: Sat, 21 Sep 2024 00:22:03 +0800 Subject: [PATCH] update --- src/pages/index/index.jsx | 760 ++----------------------------------- src/pages/index/index.scss | 248 ++---------- 2 files changed, 51 insertions(+), 957 deletions(-) diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx index 21fec0a..b89d888 100644 --- a/src/pages/index/index.jsx +++ b/src/pages/index/index.jsx @@ -43,746 +43,34 @@ import AIGC from "../../images/AIGC.png"; // export default class Index extends Component { const Index = () => { const [current, setcurrent] = useState(0); - const [openId, setopenId] = useState(null); - const [wxid, setwxid] = useState(null); - const [userInfo, setuserInfo] = useState({}); - - const [open, setopen] = useState(false); - const [referer, setreferer] = useState(window.document.referrer); - - const [isOpened, setisOpened] = useState(false); - const [meetupQR, setmeetupQR] = useState(false); - - const [bookToast, setbookToast] = useState(false); - const [meetupToast, setmeetupToast] = useState(false); - - const [joinMeetup, setjoinMeetup] = useState(false); - const [bookpay, setbookpay] = useState(0); - - const [isWeChat, setisWeChat] = useState(false); - - const getOpenidFromUrl = (url) => { - const pattern = /[?&]openid=([^&#]+)/; - const match = url.match(pattern); - if (match) { - return match[1]; - } - return null; - }; - - // 是否在微信客户端 - const isWeChatFun = () => { - var ua = navigator.userAgent.toLowerCase(); - if (ua.indexOf("micromessenger") != -1) { - setisWeChat(true); - return true; - } else { - setisWeChat(false); - return false; - } - }; - - // 获取openid - const getOpenid = () => { - // let newparams = Taro.getCurrentInstance().router.params; - // let urlopenid = newparams.openid; - - // hash模式 - // http://192.168.31.245:10086/?openid=o7LFAwR32hWGq9XOpd7ZxK1wZxq8#/pages/index/index - let hashopenid = null; - if (window.location.href.includes("openid")) { - hashopenid = getOpenidFromUrl(window.location.href); - } else { - // hashopenid = window.localStorage.getItem("openid"); - } - if (!!hashopenid && hashopenid != "undefined" && hashopenid != "null") { - // 获取到openid - window.localStorage.setItem("openid", hashopenid); - setopenId(hashopenid); - - // window.alert(hashopenid); - // 查询数据库是否存在openid - Taro.request({ - method: "GET", - url: `/api/user/${hashopenid}`, //仅为示例，并非真实的接口地址 - // url: `/api/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址 - success: function (res) { - if (res?.data?.userInfo) { - // 有完整的用户信息userInfo - setuserInfo(res?.data?.userInfo); - window.localStorage.setItem("userInfo", userInfo); - } - }, - complete: function (finy) { - // 获取wxid参数 - getWxidFromUrl(); - }, - }); - } else { - let nowUrl = window.location.href; - window.localStorage.removeItem("openid"); - let payUrl = `https://payjs.cn/api/openid?mchid=1561724891&callback_url=${nowUrl}`; - window.location.href = payUrl; - } - }; - - // 获取更新用户信息 - const getUserinfo = (wxid) => { - Taro.request({ - method: "GET", - url: `/api/user/${wxid}`, //仅为示例，并非真实的接口地址 - // url: `/api/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址 - success: function (res) { - if (res?.data?.userInfo) { - //判断wxid是否存在 - if (res?.data?.userInfo?.openid) { - // 有完整的用户信息userInfo - setuserInfo(res?.data?.userInfo); - window.localStorage.setItem("userInfo", userInfo); - } - } - }, - complete: function (finy) {}, - }); - }; - - // 获取url中的wxid - const getWxidFromUrl = () => { - const urlParams = new URLSearchParams(window.location.search); - const urlwxid = urlParams.get("wxid"); - if (!!urlwxid) { - setwxid(urlwxid); - window.localStorage.setItem("wxid", wxid); - // 优先查询openid是否存在数据库 - Taro.request({ - method: "GET", - url: `/api/user/${urlwxid}`, //仅为示例，并非真实的接口地址 - // url: `/api/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址 - success: function (res) { - if (res?.data?.userInfo) { - //判断wxid是否存在 - if (res?.data?.userInfo?.openid) { - // window.alert(res?.data?.userInfo?.openid); - // window.alert(window.localStorage.getItem("openid")); - - if ( - res?.data?.userInfo?.openid !== - window.localStorage.getItem("openid") - ) { - // 删除其他用户的wxid - window.localStorage.removeItem("userInfo"); - window.localStorage.removeItem("openid"); - window.localStorage.removeItem("wxid"); - window.location.href = "http://nomad.hackrobot.cn"; - } else { - // 有完整的用户信息userInfo - setuserInfo(res?.data?.userInfo); - window.localStorage.setItem("userInfo", userInfo); - } - } else { - // 绑定wxid与openid到数据库 - wxidTapopenid(urlwxid); - } - } else { - // 新增wxid用户 - } - }, - complete: function (finy) { - // tg消息通知 - tgMessage(); - }, - }); - } else { - // tg消息通知 - tgMessage(); - } - return wxid; - }; - - // 绑定wxid与openid - const wxidTapopenid = (newWxid) => { - const userUpdateData = { - openid: window.localStorage.getItem("openid"), // 只更新 openid 字段 - }; - Taro.request({ - method: "PUT", - // url: `/api/user/${urlwxid}`, //仅为示例，并非真实的接口地址 - url: `/api/user/${newWxid}`, //仅为示例，并非真实的接口地址 - data: userUpdateData, - header: { - "Content-Type": "application/json", - }, - success: function (res) {}, - fail: function (err) {}, - complete: function (finy) {}, - }); - }; - - // 新增openid用户 - const addopenidUser = () => { - const userUpdateData = { - openid: window.localStorage.getItem("openid"), // 只更新 openid 字段 - }; - Taro.request({ - method: "GET", - // url: `/api/user/${urlwxid}`, //仅为示例，并非真实的接口地址 - url: `/api/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址 - data: userUpdateData, - header: { - "Content-Type": "application/json", - }, - success: function (res) {}, - fail: function (err) {}, - complete: function (finy) {}, - }); - }; - - // 网页查看通知 - const tgMessage = () => { - Taro.request({ - method: "GET", - url: `/api/tgMessage?openid=${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址 - // url: "https://pay.hackrobot.cn/api/payh5", //仅为示例，并非真实的接口地址 - success: function (res) { - console.log("访问提醒发送成功"); - }, - }); - }; - - // 入群申请 - - useEffect(() => { - let inwechat = isWeChatFun(); - if (inwechat) { - // 获取openId - getOpenid(); - } else { - // window.alert('不在微信') - } - }, []); - - useEffect(() => { - // alert(window.localStorage.getItem("bookpay")) - setbookpay(window.localStorage.getItem("bookpay")); - }, []); - - const goBack = () => { - Taro.navigateBack({}); - }; - - const handleClick = (value) => { - // window.alert(value) - setopen(value); - }; - - const payh5 = (type, total_fee = 1000) => { - // console.log("111"); - Taro.request({ - method: "POST", - url: "/api/payh5", //仅为示例，并非真实的接口地址 - // url: "https://pay.hackrobot.cn/api/payh5", //仅为示例，并非真实的接口地址 - - data: { - callback_url: window.location.href, - openid: window.localStorage.getItem("openid"), - total_fee: total_fee, // 金额,单位:分 - type: type, //订单类型 book/meetup/video/vip - }, - header: { - "content-type": "application/json", // 默认值 - }, - success: function (res) { - console.log(res.data); - // window.alert(res.data.jsapi); - WeixinJSBridge.invoke( - "getBrandWCPayRequest", - { - // 以下6个支付参数通过payjs的jsapi接口获取 - // appId: "wxc5205a653b0259bf", - // timeStamp: "1701401644", - // nonceStr: "KhOYB0wFV6j9qyQK", - // package: "prepay_id=wx01113404850024729b35f4d69b73500000", - // signType: "MD5", - // paySign: "2A823C8D47CCF871C6C65A56DC228CF8", - ...(res?.data?.jsapi ?? {}), - }, - function (res) { - // 支付成功 - if (res.err_msg == "get_brand_wcpay_request:ok") { - window.localStorage.setItem(type, 1); //订单类型 book/meetup/video/vip - WeixinJSBridge.call("closeWindow"); - } - } - ); - }, - }); - }; return ( - - {/* */} + + + {/* 数组尽量是4的倍数 */} + {[ + { a: 1, b: 2 }, + { a: 1, b: 2 }, + { a: 1, b: 2 }, + { a: 1, b: 2 }, + { a: 1, b: 2 }, + { a: 1, b: 2 }, + { a: 1, b: 2 }, + { a: 1, b: 2 }, + { a: 1, b: 2 }, + { a: 1, b: 2 }, + { a: 1, b: 2 }, + { a: 1, b: 2 }, + { a: 1, b: 2 }, + { a: 1, b: 2 }, + { a: 1, b: 2 }, + { a: 1, b: 2 }, - {/* 公众号 */} - { - // window.location.href="" - }} - > - - 异度世界 + ].map((item, index) => { + return ; + })} - - {/* 标签 */} - - - 独立开发者 - - - 跨境电商 - - - 树莓派 - - - - - {/* className="at-article__p" */} - - 普通的独立开发者,平时喜欢折腾树莓派 -
- 副业是做跨境电商 -
- 做一个数字游民ing😎 - - - - {/* 付费合集 */} - - - { - window.location.href = - // "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3403853254399082501#wechat_redirect"; - "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3555705062712901639#wechat_redirect"; - }} - /> - { - window.location.href = - // "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3545545030499270661#wechat_redirect"; - "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3629790245010128902#wechat_redirect"; - }} - /> - { - window.location.href = - // "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3545545030499270661#wechat_redirect"; - "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3635342254190739460#wechat_redirect"; - }} - /> - {/* { - window.location.href = - "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3545541605766168582#wechat_redirect"; - }} - /> */} - - - - {/* 在线图书 */} - {/* 参考资料https://readmake.com/ */} - - - - - - - - - 一人公司方法论 - - 多元自动化收入 - - {/* 两个核心主题:
*/} - 1. 云手机+微信机器人+AIGC -
- 2. youtube获利
- 3. 跨境电商 -
- 4. 独立开发者 -
- 5. 旅行与远程办公 -
- - { - // 19元解锁书籍 - // payh5("bookpay", 10); - Taro.navigateTo({ - url: "/pages/book/index", - }); - - return false; - if (!!userInfo?.ebook) { - // 已预约 - Taro.atMessage({ - message: "已预约成功", - type: "warning", - }); - } else { - if (!!wxid) { - // 发起预约 - const userUpdateData = { - ebook: 1, // 只更新 openid 字段 - }; - Taro.request({ - method: "PUT", - // url: `/api/user/${urlwxid}`, //仅为示例，并非真实的接口地址 - url: `/api/user/${wxid}`, //仅为示例，并非真实的接口地址 - data: userUpdateData, - header: { - "Content-Type": "application/json", - }, - success: function (res) { - // 预约成功 - // Taro.atMessage({ - // message: "预约成功", - // type: "success", - // }); - - if (res.data.code == "200") { - setbookToast(true); - } - }, - fail: function (err) {}, - complete: function (finy) { - // setTimeout(() => { - // window.location.reload(); - // }, 2000); - // getUserinfo() - }, - }); - } else { - setmeetupQR(true); - } - } - }} - > - - {/* {!!userInfo?.ebook ? "已预约" : "预约"} */} - {/* {!!userInfo?.ebook ? "未完结" : "未完结"} */} - {bookpay == 1 ? "查看" : "阅读"} - - - - - - {/* 已付费的用户才展示活动 */} - - - - {/* 左边 */} - - - - - {/* 右边 */} - - 技术交流:云手机/机器人/AI - - - 异度世界 - - - {/* - - 19:00--21:00 - */} - - {[touxiang, girl, cat].map((item, index) => { - return ( - - - - ); - })} - - { - Taro.navigateTo({ - url: "/pages/salon/index", - }); - return false; - if (userInfo?.activity_status == "1") { - // 已预约 - Taro.atMessage({ - message: "已预约成功", - type: "warning", - }); - } else if (userInfo?.activity_status == "2") { - // 已预约 - Taro.atMessage({ - message: "审核中", - type: "warning", - }); - } else { - if (!!wxid) { - // 发起预约 - const userUpdateData = { - activity_status: "2", // 审核中 - }; - Taro.request({ - method: "PUT", - // url: `/api/user/${urlwxid}`, //仅为示例，并非真实的接口地址 - url: `/api/user/${wxid}`, //仅为示例，并非真实的接口地址 - data: userUpdateData, - header: { - "Content-Type": "application/json", - }, - success: function (res) { - // 预约成功 - // Taro.atMessage({ - // message: "预约成功", - // type: "success", - // }); - if (res.data.code == "200") { - setmeetupToast(true); - } - }, - fail: function (err) {}, - complete: function (finy) { - window.location.reload(); - }, - }); - } else { - setmeetupQR(true); - } - } - }} - > - {/* {userInfo?.activity_status == "2" - ? "审核中" - : userInfo?.activity_status == "1" - ? "已报名" - : // : "立即报名"} - "已满"} */} - {`查看`} - - - - - - - - {/* 软件下载 */} - - - | 我写的软件工具 - - - - {" "} - markdown转emoji编辑器 - - { - setisOpened(true); - }} - > - - - {/* - - */} - - - {/* 付费入群 */} - {/* 付费入群 */} - - {/* 联系我 */} - {/* {!wxid && !Object.keys(userInfo)?.length > 0 ? ( - - 微信号: hackrobot - - - ) : null} */} - - {/* - 立即购买 -- 29.8元 - */} - - - {/* 软件下载模态窗 */} - - emoji编辑器 - - - emoji编辑器是将markdown转换成标准的emoji格式 -
- 适用于各种图文场景 -
- - 平台:小红书/微博/微信"小绿书"朋友圈 -
- 评论区 - - {/* 软件图片展示 */} - - - - {/* - 百度网盘链接：https://pan.baidu.com/s/1XXVnMimjUD8qVdmaVhb6rg?pwd=hqyo -
- 提取码：hqyo - */} - - - - - - - - - - {/* 软件下载模态窗 */} - - 咨询沙龙 - - {/* - 1.加微信好友 -
- 2.发送关键词: 数字游民 - */} - {/* 软件图片展示 */} - - - - - - - - - - - {/* 腾讯云推广: https://curl.qcloud.com/8bJ1d9U0 */} - {/* */} - - - { - window.location.reload(); - }} - > - { - window.location.reload(); - }} - > + {/* 22 */} ); }; diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss index 18047bd..33489df 100644 --- a/src/pages/index/index.scss +++ b/src/pages/index/index.scss @@ -1,231 +1,37 @@ -.index { - // background-color: #002329; - // width: 100vw; - // height: 100vh; - padding: 40px; - - .index-title { - display: flex; - flex-direction: row; - font-weight: 700; - align-items: center; - .yidooplanet { - margin-left: 20px; - } - } - - .index-tags { - margin-top: 20px; - .index-AtTag { - background-color: rgb(99 102 241); - color: white; - } - } - - .index-article { - margin-top: 60px; +.Index { + font-size: 16px; + padding: 20px; + display: flex; + flex-direction: row; + .items { + // width: 80%; + // height: 200px; // background-color: yellow; - font-size: 30px; - .spanText { - font-weight: 700; - } - } - - .index-list { - margin-top: 60px; - } - - .index-book { - margin-top: 60px; - // width: 100%; - height: 300px; - padding: 20px; display: flex; flex-direction: row; align-items: center; - // justify-content: center; - // background-color: #f0f0f0; - background-color: #f0f5ff; - .bookImg { - width: 40%; - height: 100%; - // background-color: #1bb14e; - } - - .book-middle { - width: 20px; - height: 100%; - } - .nomad-right { - // margin-left: 20px; - display: flex; - flex-direction: column; - // align-items: center; - justify-content: space-between; - // background-color: yellow; - // width: 100%; - flex: 1; - height: 100%; - - .nomad-title { - font-size: 35px; - display: flex; - flex-direction: row; - align-items: center; - // justify-content: space-between; - // background-color: red; - .bookNmae { - margin-left: 10px; - } - } - .subtitle { - font-size: 20px; - color: red; - } - .bookText { - font-size: 20px; - } - .bookPrice { - font-size: 30px; - display: flex; - flex-direction: row-reverse; - .join { - font-size: 20px; - width: 100px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - background-color: #1bb14e; - color: #fff; - border-radius: 15%; - position: relative; - bottom: 10px; - right: 10px; - } - } + // justify-content: space-between; + flex-wrap: wrap; + gap: 20px; /* 设置元素之间的间隔 */ + background-color: aqua; + .item { + // min-width: 300px; + max-width: 350px; + width: 270px; + height: 300px; + flex-grow: 1; + background-color: yellow; + // margin-right: 20px; + margin-bottom: 40px; } } - .software { - margin-top: 60px; - font-size: 30px; - padding: 30px; - .emojiTitle { - color: rgb(99 102 241); - } - .emojitext { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - font-size: 28px; - } - .software-emoji { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - } - } - - .index-meetup { - margin-top: 60px; - - .meetup-card { - display: flex; - flex-direction: row; - // background-color: yellow; - - .meetup-left { - width: 50%; - height: 100%; - display: flex; - flex-direction: column; - // background-color: red; - } - .meetup-right { - font-size: 20px; - margin-left: 10px; - display: flex; - flex-direction: column; - // align-items: center; - justify-content: space-between; - // background-color: green; - flex: 1; - .title { - } - .address { - // margin-top: 30px; - } - .meetBtn { - display: flex; - // flex-direction: row-reverse; - flex-direction: row; - align-items: center; - justify-content: space-between; - - .meetupSrcItem{ - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - // background-color: red; - - .meetupSrc { - // width: 20px; - // height:20px; - border-radius: 15%; - // background-color: yellow; - margin-left: 10px; - } - } - - .join { - width: 100px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - background-color: #1bb14e; - color: #fff; - border-radius: 15%; - position: relative; - // bottom: 10px; - right: -10px; - } - } - } - } - } - - .contack { - margin-top: 60px; + .right { + width: 400px; display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - .wechatNum { - font-size: 34px; - color: #1bb14e; - } - } - - .emojiModel { - .modelText { - font-size: 22px; - } - .model-emoji { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - } - } - - .payBtn { - position: fixed; - bottom: 0; - width: 100%; + // flex: 1; + // width: 20%; + height: 100%; + background-color: red; } }