diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx index a3acace..6da9ecb 100644 --- a/src/pages/index/index.jsx +++ b/src/pages/index/index.jsx @@ -22,485 +22,13 @@ import { } from "taro-ui"; import { AtToast } from "taro-ui"; import { AtIcon } from "taro-ui"; -import { VIEW } from "@tarojs/runtime"; -import "animate.css"; -import touxiang from "../../images/touxiang.png"; -import cat from "../../images/cat.jpg"; -import girl from "../../images/girl.jpg"; -import emoji from "../../images/emoji.png"; -import phone from "../../images/phone.png"; -import robot from "../../images/robot.png"; -import nomad from "../../images/nomad.png"; -// import book from "../../images/book.png"; -import qrcode from "../../images/qrcode.png"; - -import meetup from "../../images/meetup.jpg"; -import bookqr from "../../images/bookqr.jpg"; -import loft from "../../images/loft.png"; -import AIGC from "../../images/AIGC.png"; -import robot192 from "../../images/robot192.png"; -import youtubesvg from "../../images/youtube.svg"; -import youtube2 from "../../images/yt2.svg"; -import youtube3 from "../../images/yt3.svg"; -import youtube4 from "../../images/yt4.svg"; -import ytGpt from "../../images/ytGpt.png"; - -import demo from "../../images/demo.svg"; -import group from "../../images/group.svg"; -import book from "../../images/book.svg"; - -import youtubeIco from "../../images/youtube.ico"; -import youtube from "../../images/youtube.png"; -import youtube192 from "../../images/youtube192.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; - } - }; - - // pwa安装弹窗 - // useEffect(() => { - // window.addEventListener("beforeinstallprompt", (event) => { - // event.preventDefault(); - // let installPrompt = event; - // // 显示安装按钮 - // document.getElementById("install-btn").addEventListener("click", () => { - // installPrompt.prompt(); - // }); - // }); - // }, []); - - // 获取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: `${process.env.TARO_API_API}/user/${hashopenid}`, //仅为示例，并非真实的接口地址 - // url: `${process.env.TARO_API_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: `${process.env.TARO_API_API}/user/${wxid}`, //仅为示例，并非真实的接口地址 - // url: `${process.env.TARO_API_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: `${process.env.TARO_API_API}/user/${urlwxid}`, //仅为示例，并非真实的接口地址 - // url: `${process.env.TARO_API_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: `${process.env.TARO_API_API}/user/${urlwxid}`, //仅为示例，并非真实的接口地址 - url: `${process.env.TARO_API_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: `${process.env.TARO_API_API}/user/${urlwxid}`, //仅为示例，并非真实的接口地址 - url: `${process.env.TARO_API_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: `${ - process.env.TARO_API_API - }/tgMessage?openid=${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址 - // url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址 - success: function (res) { - // console.log("访问提醒发送成功"); - }, - }); - }; - - const sendNtfy = () => { - // fetch("https://ntfy.nomadcna.com/awE5vPZI1LoRvsN1", { - // method: "POST", // PUT works too - // body: "Backup successful 😀", - // }); - - Taro.request({ - method: "POST", - url: `${`https://ntfy.nomadcna.com/awE5vPZI1LoRvsN1`}`, - 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: `${process.env.TARO_API_API}/payh5`, - // url: "${process.env.TARO_API_API}/payh5", - - // url: "https://pay.hackrobot.cn${process.env.TARO_API_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"); - } - } - ); - }, - }); - }; - - const goRead = () => { - Taro.navigateTo({ - url: "/pages/book/index", - }); - }; + useEffect(() => {}, []); return ( <> - - {/* 在线图书 */} - - {/* 参考资料https://readmake.com/ */} - - - 《Youtube运营笔记》 - 数字游民-手册1 - - {/* 卡片 */} - - - - - - - 出海赚美金 - - 开通YPP合作伙伴计划 - - - - - - - - - 持续更新 - 在线电子书-免费 - - - - - - - - 群聊交流 - - 一个人走得快,一群人走的远 - - - - {/* - - 🚀 油管踩坑笔记 - 1️⃣ YPP: 如何加入合作伙伴计划 - 2️⃣ 基础:系统环境与静态住宅ip - 3️⃣ 收款:PIN码验证与外汇结算 - 4️⃣ AI:辅助剪辑/生成视频 - 5️⃣ ----------------- - - 🔥 一起实践,交流 - - */} - - - - { - try { - sendNtfy(); - } catch (err) { - console.error("Error sending notification:", err); - } - goRead(); - }} - className="startRead" - type="primary" - size="small" - circle - > - 开始阅读 - - - - - - - - - {/* - - - - - - - - - */} - - - - {" "} - - - YPP(合作伙伴计划) - - - - 💰赚美金 - - - - 📷自媒体 - - - - {/* */} - {/* - Copyright © 2025 - */} - + 111 ); }; diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss index 9bf600b..d4c8ec8 100644 --- a/src/pages/index/index.scss +++ b/src/pages/index/index.scss @@ -1,184 +1,3 @@ -.index { - // background-color: #002329; - // width: 100vw; - // height: 100vh; - // padding-left: 100px; - // padding-right: 100px; - display: flex; - flex-direction: column; - // align-items: center; - // justify-content: center; - - .index_book { - margin-top: 80px; - // width: 100%; - min-height: 300px; - // padding: 20px; - display: flex; - flex-direction: column-reverse; - align-items: center; - justify-content: space-between; - // background-color: #f0f0f0; - // background-color: #f0f5ff; - // background-color: yellow; - .index_book_left { - width: 600px; - min-height: 300px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; - // background-color: rgb(208, 255, 0); - .left_title { - font-size: 50px; - font-weight: 700; - color: #69b1ff; - } - .left_text { - font-size: 30px; - } - - .card { - margin-top: 20px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - .cardItem { - padding: 20px; - // padding-top: 20px; - width: 500px; - // height: 300px; - - margin-bottom: 20px; - display: flex; - flex-direction: row; - background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity, 1)); - // background-color: yellow; - background-color: #f0f5ff; - border-radius: 20px; - - // align-items: center; - // justify-content: center; - .cardItem_left { - // width: 100px; - // height: 100%; - // background-color: #69b1ff; - display: flex; - flex-direction: column; - // align-items: center; - // justify-content: center; - margin-right: 40px; - .cardItem_left_img { - width: 80px; - height:80px; - } - .youtubeSvg{ - position: relative; - top: -5px; - } - } - .cardItem_right { - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - // background-color: red; - .cardItem_rightUp { - width: 100%; - height: 80px; - // background-color: aquamarine; - display: flex; - flex-direction: row; - font-weight: 700; - font-size: 35px; - // align-items: center; - // justify-content: center; - } - .cardItem_rightDown { - width: 100%; - // height: 200px; - flex: 1; - // background-color: red; - display: flex; - flex-direction: row; - // align-items: center; - // justify-content: center; - font-size: 30px; - flex-wrap:wrap ; - color: #262626; - - } - } - .left_mobile { - margin-top: 20px; - // width: 100%; - font-size: 30px; - display: flex; - flex-direction: column; - // background-color: aqua; - // align-items: center; - // justify-content: space-around; - // background-color: yellow; - } - } - } - - .left_btn { - margin-top: 40px; - // background-color: aqua; - // display: none; - .startRead { - width: 500px; - } - } - } - .index_book_img { - width: 400px; - height: 400px; - } - } - - .group { - padding: 20px; - // width: 400px; - // height: 400px; - background-color: yellow; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - .groupItem { - width: 80px; - height: 80px; - background-color: aqua; - border-radius: 50%; - margin-right: -20px; - // left: 10px; - // position: relative; - } - } - - .svgItems { - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; - // background-color: yellow; - margin-top: 20px; - // padding: 20px; - .bookImg { - display: none; - } - } - .index_btn { - // background-color: yellow; - .startRead { - width: 200px; - } - } -} @media (min-width: 1536px) { .index { @@ -187,9 +6,10 @@ position: relative; display: flex; flex-direction: column; - align-items: center; - justify-content: center; + // align-items: center; + // justify-content: center; // background-color: aqua; + transform: rotate(-90deg); .index_book { width: 100%;