This commit is contained in:
hackrobot
2025-04-13 18:48:24 -05:00
parent 16a77fedc4
commit 2f057923a4
2 changed files with 5 additions and 657 deletions

View File

@@ -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 (
<>
<View className="index">
{/* 在线图书 */}
{/* 参考资料https://readmake.com/ */}
<View className="index_book animate__animated animate__pulse">
<View className="index_book_left">
<View className="left_title">Youtube运营笔记</View>
<View className="left_text">数字游民-手册1</View>
{/* 卡片 */}
<View className="card">
<View className="cardItem">
<View className="cardItem_left">
<Image
className="cardItem_left_img youtubeSvg"
src={youtubesvg}
></Image>
</View>
<View className="cardItem_right">
<View className="cardItem_rightUp">出海赚美金</View>
<View className="cardItem_rightDown">
开通YPP合作伙伴计划
</View>
</View>
</View>
<View className="cardItem">
<View className="cardItem_left">
<Image className="cardItem_left_img" src={book}></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={group}></Image>
</View>
<View className="cardItem_right">
<View className="cardItem_rightUp">群聊交流</View>
<View className="cardItem_rightDown">
一个人走得快,一群人走的远
</View>
</View>
</View>
{/* <View className="cardItem">
<View className="left_mobile">
<Text>🚀 油管踩坑笔记</Text>
<Text>1⃣ YPP: 如何加入合作伙伴计划</Text>
<Text>2⃣ 基础:系统环境与静态住宅ip</Text>
<Text>3⃣ 收款:PIN码验证与外汇结算</Text>
<Text>4⃣ AI:辅助剪辑/生成视频</Text>
<Text>5⃣ -----------------</Text>
<Text>🔥 一起实践,交流</Text>
</View>
</View> */}
</View>
<View className="left_btn ">
<AtButton
onClick={() => {
try {
sendNtfy();
} catch (err) {
console.error("Error sending notification:", err);
}
goRead();
}}
className="startRead"
type="primary"
size="small"
circle
>
开始阅读
</AtButton>
</View>
</View>
<View className="index_book_img">
<Image
// style="width: 40%px;height:100%;background: #fff;"
src={ytGpt}
/>
</View>
</View>
{/* <View className="group">
<View className="groupItem"></View>
<View className="groupItem"></View>
<View className="groupItem"></View>
<View className="groupItem"></View>
<View className="groupItem"></View>
<View className="groupItem"></View>
<View className="groupItem"></View>
<View className="groupItem"></View>
</View> */}
<View className="svgItems">
<View className="svgItem">
{" "}
<View className="bookImg">
<Image
// style="width: 40%px;height:100%;background: #fff;"
// src={book}
src={youtube2}
/>
<View className="bookImg_text">YPP(合作伙伴计划)</View>
</View>
<View className="bookImg">
<Image
// style="width: 40%px;height:100%;background: #fff;"
// src={book}
src={youtube3}
/>
<View className="bookImg_text">💰赚美金</View>
</View>
<View className="bookImg">
<Image
// style="width: 40%px;height:100%;background: #fff;"
// src={book}
src={youtube4}
/>
<View className="bookImg_text">📷自媒体</View>
</View>
</View>
</View>
{/* <View className="footer_div"></View> */}
{/* <View className="footer">
<View>Copyright © 2025 </View>
</View> */}
</View>
<View className="index">111</View>
</>
);
};

View File

@@ -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%;