623 lines
21 KiB
JavaScript
623 lines
21 KiB
JavaScript
import { Component } from "react";
|
||
import Taro from "@tarojs/taro";
|
||
import { View, Text, Image, Button } from "@tarojs/components";
|
||
import "./index.scss";
|
||
import { AtTabBar } from "taro-ui";
|
||
import React, { useCallback, useEffect, useState, useRef } from "react";
|
||
import { AtGrid } from "taro-ui";
|
||
import { Swiper, SwiperItem } from "@tarojs/components";
|
||
import { AtCard } from "taro-ui";
|
||
import { AtImagePicker } from "taro-ui";
|
||
import { AtButton } from "taro-ui";
|
||
import { AtSearchBar } from "taro-ui";
|
||
import { Picker } from "@tarojs/components";
|
||
import { AtList, AtListItem, AtNavBar, AtTag, AtMessage } from "taro-ui";
|
||
import { marked } from "marked";
|
||
import infoText from "../book/info.md";
|
||
import bookText from "../book/book.md";
|
||
import index from "./index.md";
|
||
|
||
import {
|
||
AtModal,
|
||
AtModalHeader,
|
||
AtModalContent,
|
||
AtModalAction,
|
||
AtAvatar,
|
||
AtAccordion,
|
||
} 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 hackrobot from "../../images/hackrobot.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 youtube from "../../images/youtube.svg";
|
||
import ssh from "../../images/ssh.svg";
|
||
import robot from "../../images/robot.svg";
|
||
import host from "../../images/host.svg";
|
||
import ytGpt from "../../images/ytGpt.png";
|
||
|
||
import demo from "../../images/demo.svg";
|
||
import AI from "../../images/AI.png";
|
||
import nomadro from "../../images/nomadro.png";
|
||
import phone2 from "../../images/phone2.png";
|
||
|
||
import code from "../../images/code.svg";
|
||
import laptop from "../../images/laptop.svg";
|
||
import travel from "../../images/travel.svg";
|
||
import group from "../../images/group.svg";
|
||
import book from "../../images/book.svg";
|
||
import youtubesvg from "../../images/youtube.svg";
|
||
// export default class Index extends Component {
|
||
const Index = () => {
|
||
const [vip, setvip] = useState(window.localStorage.getItem("vip"));
|
||
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 [markText, setmarkText] = useState(vip == 1 ? index : index);
|
||
const [headers, setHeaders] = useState([]); // 存储所有 <h1> 的内容
|
||
const contentRef = useRef(null); // 用于获取渲染后的 DOM
|
||
|
||
marked.setOptions({
|
||
breaks: true, // 是否回车换行
|
||
gfm: true, //使用经批准的 GitHub Flavored Markdown (GFM) 规范
|
||
// pedantic: true, //严格模式
|
||
// highlight(code:any, lang:any) {
|
||
// // 语法高亮
|
||
// let val = code;
|
||
// if (lang) {
|
||
// val = hljs.highlight(lang, code).value;
|
||
// } else {
|
||
// val = hljs.highlightAuto(code).value;
|
||
// }
|
||
// return val;
|
||
// },
|
||
});
|
||
useEffect(() => {
|
||
// window.localStorage.removeItem('vip')
|
||
// window.alert(window.localStorage.getItem("username"));
|
||
if (contentRef.current) {
|
||
const h1Elements = contentRef.current.querySelectorAll("h1");
|
||
const h2Elements = contentRef.current.querySelectorAll("h2");
|
||
|
||
const h1Texts = Array.from(h1Elements).map((el) => el.textContent);
|
||
const h2Texts = Array.from(h2Elements).map((el) => el.textContent);
|
||
|
||
setHeaders(h1Texts);
|
||
// console.log("获取到的 H1 标题:"); // 控制台查看
|
||
console.log("获取到的 H1 标题:", h1Texts); // 控制台查看
|
||
console.log("获取到的 H2 标题:", h2Texts); // 控制台查看
|
||
}
|
||
}, [markText]); // 监听 HTML 内容变化
|
||
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: `${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 = "https://vipgroup.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("访问提醒发送成功");
|
||
},
|
||
});
|
||
};
|
||
|
||
// 入群申请
|
||
|
||
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 createUser = (username, password) => {
|
||
Taro.request({
|
||
method: "POST",
|
||
url: `${process.env.TARO_API_API}/create_user`,
|
||
data: {
|
||
username: username,
|
||
password: password || "123456", // 如果没有传入密码，则使用默认密码
|
||
},
|
||
header: {
|
||
"content-type": "application/json",
|
||
},
|
||
success: function (res) {
|
||
console.log("用户创建结果:", res.data);
|
||
window.localStorage.setItem("username", res?.data?.username);
|
||
window.localStorage.setItem("password", res?.data?.password);
|
||
},
|
||
fail: function (err) {
|
||
console.error("创建用户失败:", err);
|
||
Taro.showToast({
|
||
title: "请求失败",
|
||
icon: "error",
|
||
});
|
||
},
|
||
});
|
||
};
|
||
|
||
const payh5 = (type, total_fee = 1000) => {
|
||
Taro.request({
|
||
method: "POST",
|
||
url: `${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) {
|
||
// payjs数据返回
|
||
console.log(res.data);
|
||
// window.alert(res.data.username);
|
||
// window.alert(JSON.stringify(res?.data, null, 2));
|
||
WeixinJSBridge.invoke(
|
||
"getBrandWCPayRequest",
|
||
{
|
||
// 以下6个支付参数通过payjs的jsapi接口获取
|
||
// appId: "wxc5205a653b0259bf",
|
||
// timeStamp: "1701401644",
|
||
// nonceStr: "KhOYB0wFV6j9qyQK",
|
||
// package: "prepay_id=wx01113404850024729b35f4d69b73500000",
|
||
// signType: "MD5",
|
||
// paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
|
||
...(res?.data?.jsapi ?? {}),
|
||
},
|
||
function (reslut) {
|
||
// 支付成功
|
||
if (reslut.err_msg == "get_brand_wcpay_request:ok") {
|
||
// 新增memos用户
|
||
// 动态生成用户名，若 username 没传入则使用默认值 "user" + 当前时间戳
|
||
const finalUsername = `user${Date.now()}`;
|
||
createUser(finalUsername, "123456");
|
||
window.localStorage.setItem(type, 1); //订单类型 book/meetup/video/vip
|
||
window.localStorage.setItem("username", finalUsername);
|
||
window.localStorage.setItem("password", "123456");
|
||
|
||
// WeixinJSBridge.call("closeWindow");
|
||
} else {
|
||
window.alert("支付取消/失败");
|
||
// createUser();
|
||
}
|
||
}
|
||
);
|
||
},
|
||
});
|
||
};
|
||
|
||
const goRead = () => {
|
||
Taro.navigateTo({
|
||
url: "/pages/book/index",
|
||
});
|
||
};
|
||
|
||
const handleCopyUsername = () => {
|
||
Taro.setClipboardData({
|
||
data: window.localStorage.getItem("username"), // 复制账号
|
||
success: () => {
|
||
Taro.showToast({
|
||
title: "账号已复制",
|
||
icon: "success",
|
||
});
|
||
},
|
||
fail: () => {
|
||
Taro.showToast({
|
||
title: "复制失败",
|
||
icon: "none",
|
||
});
|
||
},
|
||
});
|
||
};
|
||
|
||
const handleCopyPassword = () => {
|
||
Taro.setClipboardData({
|
||
data: '123456', // 复制密码
|
||
success: () => {
|
||
Taro.showToast({
|
||
title: "密码已复制",
|
||
icon: "success",
|
||
});
|
||
},
|
||
fail: () => {
|
||
Taro.showToast({
|
||
title: "复制失败",
|
||
icon: "none",
|
||
});
|
||
},
|
||
});
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<View className="index">
|
||
{/* 在线图书 */}
|
||
|
||
{/* 参考资料https://readmake.com/ */}
|
||
<View className="index-book animate__animated animate__pulse">
|
||
<View className="index_book_left">
|
||
<View className="left_title"> 异度世界</View>
|
||
{/* <View className="left_text">手册3</View> */}
|
||
{/* <View className="left_mobile">
|
||
<Text>🚀 边旅行转赚钱</Text>
|
||
<Text>1️⃣ 杠杆:媒体与代码</Text>
|
||
<Text>2️⃣ 出海:地理套利</Text>
|
||
<Text>3️⃣ 即时业务:一夜之间上线网站</Text>
|
||
<Text>4️⃣ homelab:你的全球总部</Text>
|
||
<Text>5️⃣ 远程团队:分布式协作</Text>
|
||
<Text>5️⃣ -----------------</Text>
|
||
|
||
<Text>🔥 一起实践,交流</Text>
|
||
</View> */}
|
||
|
||
{/* 卡片 */}
|
||
<View className="card">
|
||
{/* <View className="cardItem">
|
||
<View className="cardItem_left">
|
||
<Image
|
||
className="cardItem_left_img youtubeSvg"
|
||
src={travel}
|
||
></Image>
|
||
</View>
|
||
<View className="cardItem_right">
|
||
<View className="cardItem_rightUp">无人直播</View>
|
||
<View className="cardItem_rightDown">录播素材/数字人</View>
|
||
</View>
|
||
</View>
|
||
<View className="cardItem">
|
||
<View className="cardItem_left">
|
||
<Image className="cardItem_left_img" src={laptop}></Image>
|
||
</View>
|
||
<View className="cardItem_right">
|
||
<View className="cardItem_rightUp">RPA自动化</View>
|
||
<View className="cardItem_rightDown">自动私信/数据分析</View>
|
||
</View>
|
||
</View> */}
|
||
<View className="cardItem">
|
||
<View className="cardItem_left">
|
||
<Image className="cardItem_left_img" src={group}></Image>
|
||
</View>
|
||
<View className="cardItem_right">
|
||
<View className="cardItem_rightUp">不只云手机</View>
|
||
<View className="cardItem_rightDown">折腾技术</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<View
|
||
ref={contentRef}
|
||
className="markdown-body markVip" // 添加 GitHub Markdown 主题类
|
||
dangerouslySetInnerHTML={{
|
||
// __html: marked(markText),
|
||
__html: marked(vip == 1 ? index : index),
|
||
}}
|
||
></View>
|
||
|
||
<View className="left_btn">
|
||
{vip != 1 ? (
|
||
<AtButton
|
||
onClick={() => {
|
||
// md页面
|
||
// goRead();
|
||
if (vip == 1) {
|
||
return false;
|
||
} else {
|
||
if (!!isWeChat) {
|
||
//58元
|
||
payh5("vip", 100);
|
||
} else {
|
||
window.location.href = `https://mp.weixin.qq.com/s/16xcMIgxEEGBPY7fanNq0g`;
|
||
}
|
||
}
|
||
}}
|
||
className="startRead"
|
||
type="primary"
|
||
size="small"
|
||
circle
|
||
>
|
||
{`${"加 入 交 流"}`}
|
||
</AtButton>
|
||
) : (
|
||
<View className="vipcode">
|
||
<View
|
||
onClick={() => {
|
||
window.location.href = `https://memos.hackrobot.org`;
|
||
}}
|
||
>
|
||
👉星球地址:{" "}
|
||
<span style={{ color: "blue" }}>memos.hackrobot.org</span>
|
||
</View>
|
||
<View>账号:{window.localStorage.getItem("username")}</View>
|
||
<Button onClick={handleCopyUsername}>复制账号</Button>
|
||
<View>密码:{"123456"}</View>{" "}
|
||
<Button onClick={handleCopyPassword}>复制密码</Button>
|
||
<View>
|
||
添加
|
||
<span style={{ color: "green" }}>微信好友: hackrobot</span>
|
||
</View>
|
||
{/* <View>获取 账号</View> */}
|
||
<Image className="vipcodeImg" src={hackrobot}></Image>
|
||
</View>
|
||
)}
|
||
</View>
|
||
</View>
|
||
<View className="index_book_img">
|
||
<Image
|
||
className="book_img"
|
||
// style="width: 40%px;height:100%;background: #fff;"
|
||
src={touxiang}
|
||
// src={phone2}
|
||
/>
|
||
</View>
|
||
</View>
|
||
|
||
<View className="svgItems">
|
||
<View className="svgItem">
|
||
<View className="bookImg">
|
||
<Image
|
||
// style="width: 40%px;height:100%;background: #fff;"
|
||
// src={book}
|
||
src={laptop}
|
||
// src={phone2}
|
||
/>
|
||
<View className="bookImg_text">无人直播</View>
|
||
</View>
|
||
|
||
<View className="bookImg">
|
||
<Image
|
||
// style="width: 40%px;height:100%;background: #fff;"
|
||
// src={book}
|
||
src={travel}
|
||
/>
|
||
<View className="bookImg_text">RPA自动化</View>
|
||
</View>
|
||
<View className="bookImg">
|
||
<Image
|
||
// style="width: 40%px;height:100%;background: #fff;"
|
||
// src={book}
|
||
src={code}
|
||
/>
|
||
<View className="bookImg_text">聊天机器人</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
{/* <View className="footer">
|
||
<View>Copyright © 2025 </View>
|
||
</View> */}
|
||
</View>
|
||
{/* <View className="footer_div"></View> */}
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default Index;
|