diff --git a/src/pages/book/index.tsx b/src/pages/book/index.tsx index 8fee8d2..ba6a94a 100644 --- a/src/pages/book/index.tsx +++ b/src/pages/book/index.tsx @@ -1,121 +1,54 @@ // @ts-nocheck -import { Component } from "react"; -import { View, Text, Image } from "@tarojs/components"; +import { View, Image } from "@tarojs/components"; +import React from "react"; import "./index.scss"; -import { AtButton, AtInput, AtTabBar } from "taro-ui"; -import React, { useCallback, useEffect, useState } from "react"; -import { AtGrid } from "taro-ui"; -import { Swiper, SwiperItem } from "@tarojs/components"; -import { AtCard } from "taro-ui"; -import { AtImagePicker } from "taro-ui"; -import Taro from "@tarojs/taro"; -import { AtAvatar } from "taro-ui"; -import { AtTag } from "taro-ui"; -import { AtList, AtListItem } from "taro-ui"; -import { AtForm, AtMessage } from "taro-ui"; -import { marked } from "marked"; -import markdownText from "./text.md"; -// import Nav from "@/pages/components/Nav/index.tsx"; -// import Nav from "../componments/Nav/index"; -// import Nav from "@/pages/componments/Nav/index"; -// import elevenImage from "@/images/book/11.jpg"; -// import elevenImage2 from "@/images/book/22.jpg"; -// import vps from "@/images/book/vpsbook.png"; -// import ro from "@/images/book/robook.png"; -// import yt from "@/images/book/ytbook.png"; -// import company from "@/images/book/company.png"; -// import ytGpt from "@/images/book/ytGpt.png"; -// import nomadro from "@/images/book/nomadro.png"; + +const BOOK_LIST = [ + { + text: "数字游民", + title: "从零开始,做数字游民", + content: "如何成为数字游民，远程工作与生活的完整指南", + url: "https://nomadro.com", + }, + { + text: "youtube运营笔记", + title: "youtube运营笔记", + content: "YouTube频道运营从入门到精通的实战笔记", + url: "https://nomadyt.com", + }, + { + text: "一人公司", + title: "一人公司", + content: "一个人也能创业，打造可持续的个人商业模式", + url: "https://nomadvps.com", + }, +]; const Book = () => { - const [markText, setmarkText] = useState(); - - useEffect(() => {}, []); - - const handleClick = (value) => { - // 跳转到目的页面，在当前页面打开 - Taro.navigateTo({ - url: "/pages/index/index", - }); - }; - return ( - {/* 导航 */} - - {[ - { - imagePath: nomadro, - text: "数字游民", - title: "从零开始,做数字游民", - content: - "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行", - url: "https://nomadro.com", - }, - { - imagePath: ytGpt, - text: "youtube运营笔记", - title: "youtube运营笔记", - content: - "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行", - url: "https://nomadyt.com", - }, - { - imagePath: company, - text: "一人公司", - title: "一人公司", - content: - "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行", - url: "https://nomadvps.com", - }, - { - imagePath: elevenImage, - text: "作者", - title: "认知跃迁", - content: - "认知跃迁认知跃迁认知跃迁认知跃迁认知认知跃迁认知跃迁认知跃知跃迁认知认知跃迁知跃迁认知认知跃迁知跃迁认知认知跃迁知跃迁认知认知跃迁迁认知跃迁认知跃迁跃迁认知跃迁认知跃迁认知跃迁", - url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598", - }, - { - imagePath: elevenImage2, - text: "创业行", - title: "创业行", - content: - "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行", - url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598", - }, - ].map((item, index) => { - return ( - { - // window.open(item?.url, '_blank'); - setTimeout(() => { - window.location.href = item?.url; - }, 0); // ⏱️ 解耦浏览器的调试器 - }} - > - - - - - {item.title} - - {item.content.length > 5 - ? `${item.content.slice(0, 50)}...` - : item.content} - - {/* {item?.text} */} - + {BOOK_LIST.map((item, index) => ( + { + setTimeout(() => { + window.location.href = item.url; + }, 0); + }} + > + + {item.title} + + {item.content.length > 50 + ? `${item.content.slice(0, 50)}...` + : item.content} + - ); - })} + + ))} ); diff --git a/src/pages/group/index.tsx b/src/pages/group/index.tsx index e04aa09..28eca34 100644 --- a/src/pages/group/index.tsx +++ b/src/pages/group/index.tsx @@ -1,75 +1,44 @@ // @ts-nocheck -import { Component } from "react"; -import { View, Text, Image } from "@tarojs/components"; -import "./index.scss"; -import { AtButton, AtInput, AtTabBar } from "taro-ui"; -import React, { useCallback, useEffect, useState } from "react"; -import { AtGrid } from "taro-ui"; -import { Swiper, SwiperItem } from "@tarojs/components"; -import { AtCard } from "taro-ui"; -import { AtImagePicker } from "taro-ui"; +import { View } from "@tarojs/components"; +import { AtButton, AtInput, AtForm, AtMessage } from "taro-ui"; +import React, { useState } from "react"; import Taro from "@tarojs/taro"; -import { AtAvatar } from "taro-ui"; -import { AtTag } from "taro-ui"; -import { AtList, AtListItem } from "taro-ui"; -import { AtForm, AtMessage } from "taro-ui"; +import "./index.scss"; + +const PHONE_REGEX = /^[0-9]{11}$/; -// export default class Index extends Component { const Group = () => { - const [current, setcurrent] = useState(2); - const [wxid, setwxid] = useState(null); const [phoneNum, setphoneNum] = useState(null); const [vCode, setvCode] = useState(null); - const [waitTime, setWaitTime] = useState(0); // 等待秒数 - const [isButtonDisabled, setIsButtonDisabled] = useState(false); // 按钮是否禁用 - - useEffect(() => {}, []); - - const handleClick = (value) => { - // 跳转到目的页面，在当前页面打开 - Taro.navigateTo({ - url: "/pages/index/index", - }); - }; + const [waitTime, setWaitTime] = useState(0); + const [isButtonDisabled, setIsButtonDisabled] = useState(false); const startTimer = () => { setIsButtonDisabled(true); - let localWaitTime = 60; // 使用局部变量 + let remaining = 60; - // 更新状态的函数 - const updateTime = () => { - if (localWaitTime <= 0) { + const timer = setInterval(() => { + if (remaining <= 0) { clearInterval(timer); setIsButtonDisabled(false); setWaitTime(0); } else { - setWaitTime(localWaitTime); - localWaitTime -= 1; + setWaitTime(remaining); + remaining -= 1; } - }; + }, 1000); - // 设定计时器 - const timer = setInterval(updateTime, 1000); - // 初始调用 - updateTime(); + setWaitTime(remaining); + remaining -= 1; }; - const validatePhoneNumber=(phoneNum) =>{ - // 检查是否为11位数字 - const phoneRegex = /^[0-9]{11}$/; - return phoneRegex.test(phoneNum); - } - - return ( { console.log("onSubmit-event--", event[0]?.detail?.value); }} - onReset={(event) => { - // 重置数据 - }} + onReset={() => {}} > { placeholder="请输入" value={phoneNum} disabled={isButtonDisabled} - onChange={(value) => { - console.log("value", value); - setphoneNum(value); - }} + onChange={(value) => setphoneNum(value)} /> { title="验证码" type="number" placeholder="请输入4位数字" - value={vCode} - onChange={(value) => { - setvCode(value); - }} + onChange={(value) => setvCode(value)} /> { - if (!!phoneNum & !!validatePhoneNumber(phoneNum)) { - // 提交手机数据 + if (phoneNum && PHONE_REGEX.test(phoneNum)) { setIsButtonDisabled(true); - startTimer(); // 开始防抖计时 + startTimer(); } else { Taro.atMessage({ message: "请检查手机号", - type: `warning`, + type: "warning", }); } }} - // type="primary" disabled={isButtonDisabled} > {isButtonDisabled ? `${waitTime} 秒` : "获取"} @@ -118,7 +79,7 @@ const Group = () => { - {"提交"} + 提交 diff --git a/src/pages/index/componments/IndexDetail/index.tsx b/src/pages/index/componments/IndexDetail/index.tsx index 6e8f137..30104ff 100644 --- a/src/pages/index/componments/IndexDetail/index.tsx +++ b/src/pages/index/componments/IndexDetail/index.tsx @@ -1,40 +1,16 @@ // @ts-nocheck -import { Component } from "react"; -import { View, Text, Image } from "@tarojs/components"; +import { View } from "@tarojs/components"; +import { AtModal, AtModalContent } from "taro-ui"; +import React from "react"; import "./index.scss"; -import { AtButton, AtInput, AtTabBar } from "taro-ui"; -import React, { useCallback, useEffect, useState } from "react"; -import { AtGrid } from "taro-ui"; -import { Swiper, SwiperItem } from "@tarojs/components"; -import { AtCard } from "taro-ui"; -import { AtImagePicker } from "taro-ui"; -import Taro from "@tarojs/taro"; -import { AtAvatar } from "taro-ui"; -import { AtTag } from "taro-ui"; -import { AtList, AtListItem } from "taro-ui"; -import { AtForm, AtMessage } from "taro-ui"; -import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui"; -// export default class Index extends Component { const IndexDetail = () => { - useEffect(() => {}, []); - - const handleClick = (value) => { - // 跳转到目的页面，在当前页面打开 - Taro.navigateTo({ - url: "/pages/index/index", - }); - }; - - const cusomContent = () => { - return 111; - }; return ( - {/* 标题 */} - {cusomContent()} - {/* */} + + 111 + ); diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx index bd158ed..78fcd6e 100644 --- a/src/pages/index/index.jsx +++ b/src/pages/index/index.jsx @@ -1,30 +1,13 @@ -import { Component } from "react"; import Taro from "@tarojs/taro"; -import { View, Text, Image, Button, Video } from "@tarojs/components"; -import "./index.scss"; -import { AtTabBar } from "taro-ui"; -import React, { useCallback, useEffect, useState } 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 { - 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 { View, Image, Video } from "@tarojs/components"; +import { AtButton, AtModal, AtModalContent } from "taro-ui"; +import React, { useEffect, useState, useMemo } from "react"; +import { LazyLoadImage } from "react-lazy-load-image-component"; +import "react-lazy-load-image-component/src/effects/blur.css"; import "animate.css"; -import _ from "lodash"; + +import "./index.scss"; +import IndexDetail from "./componments/IndexDetail/index"; import beijing from "../../images/beijing.jpg"; import shanghai from "../../images/shanghai.jpg"; @@ -34,7 +17,6 @@ import wuhan from "../../images/wuhan.jpg"; import hangzhou from "../../images/hangzhou.jpg"; import dali from "../../images/dali.jpg"; import chongqing from "../../images/chongqing.jpg"; - import changsha from "../../images/changsha.jpg"; import jingzhou from "../../images/jingzhou.jpg"; import chengdu from "../../images/chengdu.jpg"; @@ -46,19 +28,10 @@ import zhengzhou from "../../images/zhengzhou.jpg"; import haikou from "../../images/haikou.jpg"; import hegang from "../../images/hegang.jpg"; -// 视频封面图 import nomadPoster from "../../images/nomadPoster.jpg"; -// 公众号二维码 -import qrcodeoffice from "../../images/qrcodeoffice.jpg"; -import qrcode_planet from "../../images/qrcode_planet.jpg"; - -import yintian from "../../images/cloud/yintian.png"; -import taiyang from "../../images/cloud/taiyang.png"; -import xiayu from "../../images/cloud/xiayu.png"; -import wifi from "../../images/cloud/wifi.png"; -// import nomadcna from "../../images/cloud/nomadcna.jpg"; -import nomadcna from "../../images/cloud/nomadcna.png"; -import nomadcna192 from "../../images/cloud/nomadcna192.png"; +import meetupsalon from "../../images/meetupsalon.png"; +import wechat from "../../images/wechat.png"; +import nomad from "../../images/nomad.mp4"; import avatar from "../../images/Avatar/avatar.jpg"; import cat from "../../images/Avatar/cat.jpg"; @@ -70,237 +43,86 @@ import girlc from "../../images/Avatar/girlc.jpg"; import boya from "../../images/Avatar/boya.jpg"; import boyb from "../../images/Avatar/boyb.jpg"; -import nomadBook from "../../images/nomadBook.jpg"; -import qrsalon from "../../images/qrsalon.png"; -import meetupsalon from "../../images/meetupsalon.png"; -import wechat from "../../images/wechat.png"; +const AVATAR_LIST = [ + { image: girla, key: "girla" }, + { image: avatar, key: "avatar" }, + { image: girlb, key: "girlb" }, + { image: cat, key: "cat" }, + { image: girl, key: "girl" }, + { image: boya, key: "boya" }, + { image: touxiang, key: "touxiang" }, + { image: girlc, key: "girlc" }, + { image: boyb, key: "boyb" }, +]; -import wechatGroup from "../../images/wechatGroup.jpg"; -import nomad from "../../images/nomad.mp4"; +const CITY_LIST = [ + { cityName: "大理", img: dali }, + { cityName: "鹤岗", img: hegang }, + { cityName: "北京", img: beijing }, + { cityName: "上海", img: shanghai }, + { cityName: "深圳", img: shenzhen }, + { cityName: "广州", img: guangzhou }, + { cityName: "武汉", img: wuhan }, + { cityName: "杭州", img: hangzhou }, + { cityName: "成都", img: chengdu }, + { cityName: "南京", img: nanjing }, + { cityName: "西安", img: xian }, + { cityName: "重庆", img: chongqing }, + { cityName: "长沙", img: changsha }, + { cityName: "昆明", img: kunming }, + { cityName: "福州", img: fuzhou }, + { cityName: "郑州", img: zhengzhou }, + { cityName: "海口", img: haikou }, + { cityName: "荆州", img: jingzhou }, +]; -import IndexDetail from "./componments/IndexDetail/index"; +const MEETUP_AVATAR_LIST = AVATAR_LIST.slice(0, 7); -import { LazyLoadImage } from "react-lazy-load-image-component"; -import "react-lazy-load-image-component/src/effects/blur.css"; -// import Nav from './componments/Nav/index' -// import Nav from '@/pages/componments/Nav/index' +const isWeChatBrowser = () => { + return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1; +}; + +const isMobileDevice = () => { + const ua = navigator.userAgent || navigator.vendor || window.opera; + return /android/i.test(ua) || (/iPad|iPhone|iPod/.test(ua) && !window.MSStream); +}; -// export default class Index extends Component { const Index = () => { - const [current, setcurrent] = useState(0); const [qrOpen, setqrOpen] = useState(false); const [isWeChat, setisWeChat] = useState(false); - - // 是否在微信客户端 - const isWeChatFun = () => { - var ua = navigator.userAgent.toLowerCase(); - if (ua.indexOf("micromessenger") != -1) { - setisWeChat(true); - return true; - } else { - setisWeChat(false); - return false; - } - }; + const [mobile, setMobile] = useState(false); useEffect(() => { - isWeChatFun(); - }, []); - // 自定义组件模版 - const custDom = () => { - return custDom; - }; - - // 微信群 - const weGroup = () => { - return ( - - {/* */} - - - ); - }; - - // 微信读书 - const weBook = () => { - return ( - - {/* */} - - - ); - }; - - // 定义初始数据数组 - const [cityList, setCityList] = useState([ - { cityName: "大理", img: dali, type: "item", dom: "" }, - { cityName: "鹤岗", img: hegang, type: "item", dom: "" }, - { cityName: "北京", img: beijing, type: "item", dom: "" }, - { cityName: "上海", img: shanghai, type: "item", dom: "" }, - // { - // cityName: "custDom", - // img: shenzhen, - // type: "custom", - // dom: weGroup(), - // }, - - { cityName: "深圳", img: shenzhen, type: "item", dom: "" }, - - { cityName: "广州", img: guangzhou, type: "item", dom: "" }, - { cityName: "武汉", img: wuhan, type: "item", dom: "" }, - { cityName: "杭州", img: hangzhou, type: "item", dom: "" }, - // { - // cityName: "custDom", - // img: shenzhen, - // type: "custom", - // dom: weBook(), - // }, - { cityName: "成都", img: chengdu, type: "item", dom: "" }, - { cityName: "南京", img: nanjing, type: "item", dom: "" }, - { cityName: "西安", img: xian, type: "item", dom: "" }, - - { cityName: "重庆", img: chongqing, type: "item", dom: "" }, - { cityName: "长沙", img: changsha, type: "item", dom: "" }, - - { cityName: "昆明", img: kunming, type: "item", dom: "" }, - { cityName: "福州", img: fuzhou, type: "item", dom: "" }, - { cityName: "郑州", img: zhengzhou, type: "item", dom: "" }, - { cityName: "海口", img: haikou, type: "item", dom: "" }, - - { cityName: "荆州", img: jingzhou, type: "item", dom: "" }, - ]); - const isMobile = () => { - const userAgent = navigator.userAgent || navigator.vendor || window.opera; - - // 检查常见移动设备的 userAgent - if (/android/i.test(userAgent)) { - return true; - } - if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { - return true; - } - return false; - }; - - const [oldcityList, setoldCityList] = useState(cityList); - const [mobile, setMobile] = useState(false); //是否移动端 - useEffect(() => { - setMobile(isMobile()); + setisWeChat(isWeChatBrowser()); + setMobile(isMobileDevice()); }, []); - // 定义屏幕宽度 - const [windowWidth, setWindowWidth] = useState(window.innerWidth); - // 监听屏幕宽度变化 - useEffect(() => { - const handleResize = () => { - setWindowWidth(window.innerWidth); - }; - window.addEventListener("resize", handleResize); - - // 清除监听器 + const handleJoinClick = useMemo(() => { return () => { - window.removeEventListener("resize", handleResize); - }; - }, []); - - // 当屏幕宽度小于某个值时，改变 custDom 的位置 - useEffect(() => { - if (windowWidth < 768) { - // 比如，宽度小于768时，将 custDom 移到第一位 - // const newCityList = [...cityList]; - const newCityList = _.cloneDeep(cityList); - - const custDomIndex = newCityList.findIndex( - (item) => item.cityName === "custDom", - ); - - if (custDomIndex !== -1) { - const [custDomItem] = newCityList.splice(custDomIndex, 1); - newCityList.unshift(custDomItem); // 将 custDomItem 移动到数组开头 + if (isWeChat) { + Taro.navigateTo({ url: "/pages/salon/index" }); + } else { + setqrOpen(true); } - setCityList(newCityList); - } else { - // 屏幕宽度大于 768 时，恢复默认顺序 - setCityList(oldcityList); - } - }, [windowWidth]); - - const closeModal = () => { - setqrOpen(false); // 关闭模态框 - }; + }; + }, [isWeChat]); return ( - {/* */} - - {/* - - {["首页","导航", "图书", "好物", "活动", "工具箱", "关于我们"].map( - (item, index) => { - return ( - {}} - > - {item} - - ); - } - )} - - */} - - {/* {!mobile ? ( */} 📣成为数字游民,并旅居在任何地方
- {/* nomadcna.com */} - {/* ，代表着目前 */} 中国各地远程生活和工作的数字游民，不局限于某一处 - {[ - { image: girla }, - { image: avatar }, - { image: girlb }, - { image: cat }, - { image: girl }, - { image: boya }, - { image: touxiang }, - { image: girlc }, - { image: boyb }, - ].map((item, index) => { - return ( - - ); - })} + {AVATAR_LIST.map((item) => ( + + ))} 🍹每年在 30 多个城市 参加聚会
@@ -311,24 +133,16 @@ const Index = () => { 🌎追踪你的旅行，记录你去过的地方
💬加入社群，在旅途中找到你的归属 - {!!mobile ? ( + {mobile && ( { - // setqrOpen(true); - // 在手机/微信 - isWeChat - ? Taro.navigateTo({ - url: "/pages/salon/index", - }) - : setqrOpen(true); - }} + onClick={handleJoinClick} >{`加入社群💬`} - ) : null} + )} @@ -338,48 +152,26 @@ const Index = () => { src={nomad} poster={nomadPoster} initialTime={0} - controls={true} + controls autoplay={false} loop={false} muted={false} - floatingMode={"page"} - objectFit={"contain"} + floatingMode="page" + objectFit="contain" /> { - // 如果在PC浏览器 - setqrOpen(true); - // 在手机/微信 - // Taro.navigateTo({ - // url: "/pages/salon/index", - // }); - }} + onClick={() => setqrOpen(true)} >{`加入社群💬`} - {/* ) : null} */} - {/* */} - {/* */} - {/* 右侧固定内容，放前面 */} - - { - // 在手机/微信 - isWeChat - ? Taro.navigateTo({ - url: "/pages/salon/index", - }) - : setqrOpen(true); - }} - > + 加入聊天 @@ -392,131 +184,78 @@ const Index = () => { 新成员 - {[ - { image: girla }, - { image: avatar }, - { image: girlb }, - { image: cat }, - { image: girl }, - { image: boya }, - { image: touxiang }, - { image: girlc }, - { image: boyb }, - ].map((item, index) => { - return ( - - ); - })} + {AVATAR_LIST.map((item) => ( + + ))} - { - // 在手机/微信 - isWeChat - ? Taro.navigateTo({ - url: "/pages/salon/index", - }) - : setqrOpen(true); - }} - > + 最新活动 活动时间: 2026年3月1日 - 活动地点: 深圳市{" "} - 活动人数: 8人{" "} - {/* 活动时间: 2026年3月1日 */} + 活动地点: 深圳市 + 活动人数: 8人 - {[ - { image: girla }, - { image: avatar }, - { image: girlb }, - { image: cat }, - { image: girl }, - { image: boya }, - { image: touxiang }, - ].map((item, index) => { - return ( - - ); - })} + {MEETUP_AVATAR_LIST.map((item) => ( + + ))} - {/* 22 */} - {/* 33 */} - {/* 数组尽量是4的倍数 */} - {/* 随着屏幕变化,改变自定义数组的索引/顺序 */} - {cityList.map((item, index) => { - if (item.type === "custom") { - // 根据屏幕变化,添加自定义组件 - // return {item.dom}; - } else { - return ( - - - {/* 序列号 */} - - {index + 1} - - - {/* 城市名 */} - {item.cityName} - - + {CITY_LIST.map((item, index) => ( + + + + {index + 1} - ); - } - })} + + {item.cityName} + + + + ))} - {/* 112233 */} - {/* */} + setqrOpen(false)} > - {/* 标题 */} - {/* ,加入💬微信群 */} 立即报名 - {/* - {" "} - */} - - {/* 22 */} + ); }; diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss index c1bf5ce..703ac0a 100644 --- a/src/pages/index/index.scss +++ b/src/pages/index/index.scss @@ -360,12 +360,7 @@ } } - .custDom { - width: 100%; - height: 40px; - background-color: red; - color: aqua; - } + // custDom 已移除 .qrcode { font-size: 24px; diff --git a/src/pages/meetup/Detail/index.jsx b/src/pages/meetup/Detail/index.jsx index ad82728..2b868a6 100644 --- a/src/pages/meetup/Detail/index.jsx +++ b/src/pages/meetup/Detail/index.jsx @@ -1,151 +1,73 @@ -import { Component } from "react"; -import { View, Text, Image } from "@tarojs/components"; -import "./index.scss"; -import { AtTabBar } from "taro-ui"; -import React, { useCallback, useEffect, useState } from "react"; -import { AtGrid } from "taro-ui"; -import { Swiper, SwiperItem } from "@tarojs/components"; -import { AtCard } from "taro-ui"; -import { AtImagePicker } from "taro-ui"; +import { View, Image } from "@tarojs/components"; +import { AtButton, AtList, AtListItem } from "taro-ui"; +import React, { useEffect, useState } from "react"; import Taro from "@tarojs/taro"; -import { AtAvatar } from "taro-ui"; -import { AtButton } from "taro-ui"; -// import Taro from "@tarojs/taro"; +import "./index.scss"; -import { AtList, AtListItem } from "taro-ui"; - -// export default class Index extends Component { const Detail = () => { - const [current, setcurrent] = useState(2); - const [id, setid] = useState(null); - const [openid, setopenid] = useState(null); const [joinMeetup, setjoinMeetup] = useState(false); useEffect(() => { - let newparams = Taro.getCurrentInstance().router.params; - let newId = newparams.id; - if (newId) { - setid(newId); - } - let newjoinMeetup = window.localStorage.getItem('joinMeetup') - setjoinMeetup(newjoinMeetup) - }, []); + const params = Taro.getCurrentInstance().router.params; + console.log(params); - // const handleClick = (value) => { - // console.log("value", value); - // setcurrent(value); - // if (value == 2) { - // // 跳转到目的页面，在当前页面打开 - // Taro.navigateTo({ - // url: "/pages/my/index", - // }); - // } else if (value == 0) { - // Taro.navigateTo({ - // url: "/pages/index/index", - // }); - // } else { - // Taro.navigateTo({ - // url: "/pages/meetup/index", - // }); - // } - // }; - - const onBridgeReady = () => { - WeixinJSBridge.call("hideOptionMenu"); - }; - - useEffect(() => { - let $instance = Taro.getCurrentInstance(); - // console.log("11"); - console.log($instance.router.params); - // if (typeof WeixinJSBridge == "undefined") { - // if (document.addEventListener) { - // document.addEventListener("WeixinJSBridgeReady", onBridgeReady, false); - // } else if (document.attachEvent) { - // document.attachEvent("WeixinJSBridgeReady", onBridgeReady); - // document.attachEvent("onWeixinJSBridgeReady", onBridgeReady); - // } - // } + const saved = window.localStorage.getItem("joinMeetup"); + setjoinMeetup(saved); }, []); const joinmeet = () => { - // console.log("111"); Taro.request({ - method: 'POST', - url: "/api/payh5", //仅为示例，并非真实的接口地址 - // url: "https://pay.hackrobot.cn/api/payh5", //仅为示例，并非真实的接口地址 - + method: "POST", + url: "/api/payh5", data: { callback_url: window.location.href, - openid: window.localStorage.getItem('openid') + openid: window.localStorage.getItem("openid"), }, - header: { - "content-type": "application/json", // 默认值 - }, - success: function (res) { - console.log(res.data); - // window.alert(res.data.jsapi); + header: { "content-type": "application/json" }, + success: (res) => { 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") { - setjoinMeetup(true) - window.localStorage.setItem('joinMeetup', true) + { ...(res?.data?.jsapi ?? {}) }, + (payRes) => { + if (payRes.err_msg === "get_brand_wcpay_request:ok") { + setjoinMeetup(true); + window.localStorage.setItem("joinMeetup", true); WeixinJSBridge.call("closeWindow"); } - } + }, ); }, }); }; + return ( - {/* Hello world! */} - {/* */} - { }} /> - - + + + - {/* */} - - joinmeet()} + onClick={joinmeet} disabled={joinMeetup} > - {!!joinMeetup ? '已报名' : '立即报名'} + {joinMeetup ? "已报名" : "立即报名"} - - ); }; diff --git a/src/pages/meetup/index.jsx b/src/pages/meetup/index.jsx index d2ee270..1d24438 100644 --- a/src/pages/meetup/index.jsx +++ b/src/pages/meetup/index.jsx @@ -1,101 +1,31 @@ -import { Component } from "react"; -import { View, Text, Image } from "@tarojs/components"; -import "./index.scss"; -import { AtTabBar } from "taro-ui"; -import React, { useCallback, useEffect, useState } from "react"; -import { AtGrid } from "taro-ui"; -import { Swiper, SwiperItem } from "@tarojs/components"; -import { AtCard } from "taro-ui"; -import { AtImagePicker } from "taro-ui"; +import { View, Image } from "@tarojs/components"; +import { AtTabBar, AtCard, AtButton } from "taro-ui"; +import React, { useEffect, useState } from "react"; import Taro from "@tarojs/taro"; -import { AtButton } from "taro-ui"; +import "./index.scss"; -import { Picker } from "@tarojs/components"; -import { AtList, AtListItem } from "taro-ui"; -import { AtNavBar } from "taro-ui"; - -// export default class Index extends Component { const Meetup = () => { const [current, setcurrent] = useState(1); const [joinMeetup, setjoinMeetup] = useState(false); - const [pickData, setpickData] = useState({ - selector: ["美国", "中国", "巴西", "日本"], - selectorChecked: "美国", - timeSel: "12:01", - dateSel: "2018-04-22", - }); const handleClick = (value) => { - console.log("value", value); setcurrent(value); - if (value == 2) { - // 跳转到目的页面，在当前页面打开 - Taro.navigateTo({ - url: "/pages/my/index", - }); - } else if (value == 0) { - Taro.navigateTo({ - url: "/pages/index/index", - }); + if (value === 2) { + Taro.navigateTo({ url: "/pages/my/index" }); + } else if (value === 0) { + Taro.navigateTo({ url: "/pages/index/index" }); } else { - Taro.navigateTo({ - url: "/pages/meetup/index", - }); + Taro.navigateTo({ url: "/pages/meetup/index" }); } }; - const goBack = () => { - // window.history.back(); - Taro.navigateBack({ - // delta: 2 - }); - }; useEffect(() => { - let newjoinMeetup = window.localStorage.getItem("joinMeetup"); - setjoinMeetup(newjoinMeetup); - - // window.localStorage.removeItem("joinMeetup"); - // setjoinMeetup(false) + const saved = window.localStorage.getItem("joinMeetup"); + setjoinMeetup(saved); }, []); return ( - {/* */} - {/* Hello world! */} - - {/* - - {}}> - - - - - - - {}}> - - - - - - */} - { thumb="http://www.logoquan.com/upload/list/20180421/logoquan15259400209.PNG" > - {" "} - {" "} @@ -125,12 +51,10 @@ const Meetup = () => { className="submitBtn" disabled={joinMeetup} onClick={() => { - Taro.navigateTo({ - url: "/pages/meetup/Detail/index", - }); + Taro.navigateTo({ url: "/pages/meetup/Detail/index" }); }} > - {!!joinMeetup ? "已报名" : "立即报名"} + {joinMeetup ? "已报名" : "立即报名"} @@ -144,7 +68,7 @@ const Meetup = () => { { title: "活动" }, { title: "我的" }, ]} - onClick={(value) => handleClick(value)} + onClick={handleClick} current={current} /> diff --git a/src/pages/model/index.tsx b/src/pages/model/index.tsx index 8c2503f..f6e9143 100644 --- a/src/pages/model/index.tsx +++ b/src/pages/model/index.tsx @@ -1,30 +1,9 @@ // @ts-nocheck -import { Component } from "react"; -import { View, Text, Image } from "@tarojs/components"; +import { View } from "@tarojs/components"; +import React from "react"; import "./index.scss"; -import { AtButton, AtInput, AtTabBar } from "taro-ui"; -import React, { useCallback, useEffect, useState } from "react"; -import { AtGrid } from "taro-ui"; -import { Swiper, SwiperItem } from "@tarojs/components"; -import { AtCard } from "taro-ui"; -import { AtImagePicker } from "taro-ui"; -import Taro from "@tarojs/taro"; -import { AtAvatar } from "taro-ui"; -import { AtTag } from "taro-ui"; -import { AtList, AtListItem } from "taro-ui"; -import { AtForm, AtMessage } from "taro-ui"; -// export default class Index extends Component { const Model = () => { - useEffect(() => {}, []); - - const handleClick = (value) => { - // 跳转到目的页面，在当前页面打开 - Taro.navigateTo({ - url: "/pages/index/index", - }); - }; - return 模版; }; diff --git a/src/pages/my/index.jsx b/src/pages/my/index.jsx index 72797b0..b330d5e 100644 --- a/src/pages/my/index.jsx +++ b/src/pages/my/index.jsx @@ -1,58 +1,29 @@ -import { Component } from "react"; -import { View, Text, Image } from "@tarojs/components"; -import "./index.scss"; -import { AtTabBar } from "taro-ui"; -import React, { useCallback, useEffect, useState } from "react"; -import { AtGrid } from "taro-ui"; -import { Swiper, SwiperItem } from "@tarojs/components"; -import { AtCard } from "taro-ui"; -import { AtImagePicker } from "taro-ui"; +import { View } from "@tarojs/components"; +import { AtTabBar, AtAvatar, AtTag, AtList, AtListItem } from "taro-ui"; +import React, { useEffect, useState } from "react"; import Taro from "@tarojs/taro"; -import { AtAvatar } from "taro-ui"; -import { AtTag } from "taro-ui"; -import { AtList, AtListItem } from "taro-ui"; -import avatar from "../../images/avatar.jpg"; +import "./index.scss"; + +import avatar from "../../images/Avatar/avatar.jpg"; -// export default class Index extends Component { const My = () => { const [current, setcurrent] = useState(2); - const [wxid, setwxid] = useState(null); - - useEffect(()=>{ - getWxid() - },[]) - - const getWxid = () => { - let newWxid = window.localStorage.getItem("wxid"); - if (!!newWxid) { - setwxid(newWxid); - } - }; const handleClick = (value) => { - console.log("value", value); setcurrent(value); - if (value == 2) { - // 跳转到目的页面，在当前页面打开 - Taro.navigateTo({ - url: "/pages/my/index", - }); - } else if (value == 0) { - Taro.navigateTo({ - url: "/pages/index/index", - }); + if (value === 2) { + Taro.navigateTo({ url: "/pages/my/index" }); + } else if (value === 0) { + Taro.navigateTo({ url: "/pages/index/index" }); } else { - Taro.navigateTo({ - url: "/pages/meetup/index", - }); + Taro.navigateTo({ url: "/pages/meetup/index" }); } }; + return ( - {/* Hello world! */} - - + 新注册用户 @@ -61,14 +32,11 @@ const My = () => { @@ -81,7 +49,7 @@ const My = () => { { title: "活动" }, { title: "我的" }, ]} - onClick={(value) => handleClick(value)} + onClick={handleClick} current={current} /> diff --git a/src/pages/salon/index.tsx b/src/pages/salon/index.tsx index 209c19f..5feaa68 100644 --- a/src/pages/salon/index.tsx +++ b/src/pages/salon/index.tsx @@ -22,14 +22,63 @@ const PAY_API_URL = "https://api.hackrobot.cn/payh5"; const SUBMIT_APPLICATION_URL = "https://api.hackrobot.cn/submit_meetup_application"; +const GENDER_OPTIONS = ["男", "女"]; +const EDUCATION_OPTIONS = ["高中及以下", "大专", "本科", "硕士"]; + +const GRAD_AGE_MAP = { + "高中及以下": 18, + "大专": 21, + "本科": 22, + "硕士": 25, +}; + +const PHONE_REGEX = /^1[3-9]\d{9}$/; + +const currentYear = new Date().getFullYear(); +const YEAR_OPTIONS = Array.from({ length: 61 }, (_, i) => + (currentYear - i).toString(), +); + +const isWeChatBrowser = () => { + return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1; +}; + +const getOrCreateUserId = () => { + let userId = Taro.getStorageSync("userId"); + if (!userId) { + userId = `user${Date.now()}`; + Taro.setStorageSync("userId", userId); + } + return userId; +}; + +const checkIfFullyPaid = (userId) => { + return new Promise((resolve) => { + Taro.request({ + url: `${PB_URL}/api/collections/${COLLECTION}/records`, + method: "GET", + data: { + filter: `(user_id="${userId}" && amount > 0 && type="meetup")`, + perPage: 1, + }, + success: (res) => resolve(res.data?.items?.length > 0), + fail: () => resolve(false), + }); + }); +}; + const Salon = () => { const [meetupQR, setmeetupQR] = useState(false); const [isWeChat, setisWeChat] = useState(false); useEffect(() => { const init = async () => { - isWeChatFun(); - checkIfJoined(); + setisWeChat(isWeChatBrowser()); + + if (Taro.getStorageSync("salonJoined")) { + setmeetupQR(true); + return; + } const userId = getOrCreateUserId(); const fullyPaid = await checkIfFullyPaid(userId); @@ -42,90 +91,6 @@ const Salon = () => { init(); }, []); - const checkIfJoined = () => { - if (Taro.getStorageSync("salonJoined")) { - setmeetupQR(true); - } - }; - - const isWeChatFun = () => { - const ua = navigator.userAgent.toLowerCase(); - if (ua.indexOf("micromessenger") !== -1) { - setisWeChat(true); - return true; - } else { - setisWeChat(false); - return false; - } - }; - - const getOrCreateUserId = () => { - let userId = Taro.getStorageSync("userId"); - if (!userId) { - userId = `user${Date.now()}`; - Taro.setStorageSync("userId", userId); - } - return userId; - }; - - const checkIfFullyPaid = (userId) => { - return new Promise((resolve) => { - Taro.request({ - url: `${PB_URL}/api/collections/${COLLECTION}/records`, - method: "GET", - data: { - filter: `(user_id="${userId}" && amount > 0 && type="meetup")`, - perPage: 1, - }, - success: (res) => { - resolve(res.data?.items?.length > 0); - }, - fail: () => resolve(false), - }); - }); - }; - - const payh5 = (type, total_fee = 8800) => { - const userId = getOrCreateUserId(); - Taro.request({ - url: PAY_API_URL, - method: "POST", - data: { - total_fee, - type, - user_id: userId, - }, - header: { - "content-type": "application/json", - }, - success: (res) => { - if (res.data?.status === "ok" && res.data?.xorpay_params) { - const params = res.data.xorpay_params; - const form = document.createElement("form"); - form.method = "POST"; - form.action = res.data.xorpay_url; - form.style.display = "none"; - - for (const key in params) { - const input = document.createElement("input"); - input.type = "hidden"; - input.name = key; - input.value = params[key]; - form.appendChild(input); - } - - document.body.appendChild(form); - form.submit(); - } else { - Taro.showToast({ title: "支付发起失败", icon: "none" }); - } - }, - fail: () => { - Taro.showToast({ title: "网络错误", icon: "none" }); - }, - }); - }; - const [form, setForm] = useState({ nickname: "", occupation: "", @@ -137,17 +102,8 @@ const Salon = () => { phone: "", }); - const genderOptions = ["男", "女"]; const [genderIndex, setGenderIndex] = useState(null); - - const educationOptions = ["高中及以下", "大专", "本科", "硕士"]; const [educationIndex, setEducationIndex] = useState(null); - - const currentYear = new Date().getFullYear(); - const yearOptions = []; - for (let i = 0; i <= 60; i++) { - yearOptions.push((currentYear - i).toString()); - } const [gradYearIndex, setGradYearIndex] = useState(null); const updateField = (field) => (value) => { @@ -157,22 +113,57 @@ const Salon = () => { const handleGenderChange = (e) => { const idx = e.detail.value; setGenderIndex(idx); - updateField("gender")(genderOptions[idx]); + updateField("gender")(GENDER_OPTIONS[idx]); }; const handleEducationChange = (e) => { const idx = e.detail.value; setEducationIndex(idx); - updateField("education")(educationOptions[idx]); + updateField("education")(EDUCATION_OPTIONS[idx]); }; const handleGradYearChange = (e) => { const idx = e.detail.value; setGradYearIndex(idx); - updateField("gradYear")(yearOptions[idx]); + updateField("gradYear")(YEAR_OPTIONS[idx]); }; - const submitApplicationFirst = (submitData) => { + const payh5 = (type, total_fee = 8800) => { + const userId = getOrCreateUserId(); + Taro.request({ + url: PAY_API_URL, + method: "POST", + data: { total_fee, type, user_id: userId }, + header: { "content-type": "application/json" }, + success: (res) => { + if (res.data?.status === "ok" && res.data?.xorpay_params) { + const params = res.data.xorpay_params; + const formEl = document.createElement("form"); + formEl.method = "POST"; + formEl.action = res.data.xorpay_url; + formEl.style.display = "none"; + + for (const key in params) { + const input = document.createElement("input"); + input.type = "hidden"; + input.name = key; + input.value = params[key]; + formEl.appendChild(input); + } + + document.body.appendChild(formEl); + formEl.submit(); + } else { + Taro.showToast({ title: "支付发起失败", icon: "none" }); + } + }, + fail: () => { + Taro.showToast({ title: "网络错误", icon: "none" }); + }, + }); + }; + + const submitApplication = (submitData) => { return new Promise((resolve, reject) => { Taro.request({ url: SUBMIT_APPLICATION_URL, @@ -196,16 +187,20 @@ const Salon = () => { }; const handleSubmit = async () => { - let missing = []; + const requiredFields = [ + ["nickname", "昵称"], + ["occupation", "职业/专业"], + ["reason", "自我介绍"], + ["wechatId", "微信号"], + ["gender", "性别"], + ["education", "学历"], + ["gradYear", "毕业时间"], + ["phone", "手机号"], + ]; - if (!form.nickname) missing.push("昵称"); - if (!form.occupation) missing.push("职业/专业"); - if (!form.reason) missing.push("自我介绍"); - if (!form.wechatId) missing.push("微信号"); - if (!form.gender) missing.push("性别"); - if (!form.education) missing.push("学历"); - if (!form.gradYear) missing.push("毕业时间"); - if (!form.phone) missing.push("手机号"); // 手机号必填 + const missing = requiredFields + .filter(([key]) => !form[key]) + .map(([, label]) => label); if (missing.length > 0) { Taro.atMessage({ @@ -215,8 +210,7 @@ const Salon = () => { return; } - // 手机号正则校验（必填，必须11位有效手机号） - if (!/^1[3-9]\d{9}$/.test(form.phone)) { + if (!PHONE_REGEX.test(form.phone)) { Taro.atMessage({ message: "手机号格式错误，请填写11位有效手机号", type: "warning", @@ -224,42 +218,23 @@ const Salon = () => { return; } - const gradAgeMap = { - 高中及以下: 18, - 大专: 21, - 本科: 22, - 硕士: 25, - }; - const baseAge = gradAgeMap[form.education] || 22; + const baseAge = GRAD_AGE_MAP[form.education] || 22; const gradYearNum = parseInt(form.gradYear, 10); if (isNaN(gradYearNum)) { - Taro.atMessage({ - message: "毕业年份格式错误", - type: "warning", - }); + Taro.atMessage({ message: "毕业年份格式错误", type: "warning" }); return; } const calculatedAge = currentYear - gradYearNum + baseAge; - const userId = getOrCreateUserId(); - const submitData = { - ...form, - calculated_age: calculatedAge, - user_id: userId, - }; - try { - await submitApplicationFirst(submitData); - - // Taro.showToast({ - // title: "申请已提交，正在跳转支付（88元场地管理费）", - // icon: "loading", - // duration: 3000, - // }); - + await submitApplication({ + ...form, + calculated_age: calculatedAge, + user_id: userId, + }); payh5("meetup", 28800); } catch { // 提交失败已提示 @@ -371,7 +346,7 @@ const Salon = () => { @@ -424,7 +399,7 @@ const Salon = () => { @@ -439,7 +414,7 @@ const Salon = () => {