425 lines
13 KiB
JavaScript
425 lines
13 KiB
JavaScript
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 "animate.css";
|
||
import _ from "lodash";
|
||
|
||
import beijing from "../../images/beijing.jpg";
|
||
import shanghai from "../../images/shanghai.jpg";
|
||
import shenzhen from "../../images/shenzhen.jpg";
|
||
import guangzhou from "../../images/guangzhou.jpg";
|
||
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";
|
||
import nanjing from "../../images/nanjing.jpg";
|
||
import xian from "../../images/xian.jpg";
|
||
import kunming from "../../images/kunming.jpg";
|
||
import fuzhou from "../../images/fuzhou.jpg";
|
||
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 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 avatar from "../../images/Avatar/avatar.jpg";
|
||
import cat from "../../images/Avatar/cat.jpg";
|
||
import girl from "../../images/Avatar/girl.jpg";
|
||
import touxiang from "../../images/Avatar/touxiang.png";
|
||
import girla from "../../images/Avatar/girla.jpg";
|
||
import girlb from "../../images/Avatar/girlb.jpg";
|
||
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 wechatGroup from "../../images/wechatGroup.jpg";
|
||
import nomad from "../../images/nomad.mp4";
|
||
|
||
import IndexDetail from "./componments/IndexDetail/index";
|
||
|
||
import { LazyLoadImage } from "react-lazy-load-image-component";
|
||
import "react-lazy-load-image-component/src/effects/blur.css";
|
||
|
||
// export default class Index extends Component {
|
||
const Index = () => {
|
||
const [current, setcurrent] = useState(0);
|
||
const [qrOpen, setqrOpen] = useState(false);
|
||
|
||
// 自定义组件模版
|
||
const custDom = () => {
|
||
return <View className="custDom">custDom</View>;
|
||
};
|
||
|
||
// 微信群
|
||
const weGroup = () => {
|
||
return (
|
||
<View className="weGroup">
|
||
{/* <Image
|
||
style="width: 100%;height: 100%;"
|
||
// mode="heightFix"
|
||
src={wechatGroup}
|
||
/> */}
|
||
<LazyLoadImage
|
||
alt="Sample"
|
||
src={wechatGroup}
|
||
effect="blur"
|
||
width="100%"
|
||
height="100%"
|
||
style={{ borderRadius: "15px" }} // 设置圆角
|
||
/>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
// 微信读书
|
||
const weBook = () => {
|
||
return (
|
||
<View className="weBook">
|
||
{/* <Image
|
||
style="width: 100%;height: 100%;"
|
||
// mode="heightFix"
|
||
src={nomadBook}
|
||
/> */}
|
||
<LazyLoadImage
|
||
alt="Sample"
|
||
src={nomadBook}
|
||
effect="blur"
|
||
width="100%"
|
||
height="100%"
|
||
style={{ borderRadius: "15px" }} // 设置圆角
|
||
/>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
// 定义初始数据数组
|
||
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: "custDom",
|
||
img: shenzhen,
|
||
type: "custom",
|
||
dom: weBook(),
|
||
},
|
||
{ cityName: "广州", img: guangzhou, type: "item", dom: "" },
|
||
{ cityName: "武汉", img: wuhan, type: "item", dom: "" },
|
||
{ cityName: "杭州", img: hangzhou, type: "item", dom: "" },
|
||
|
||
{ 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());
|
||
}, []);
|
||
|
||
// 定义屏幕宽度
|
||
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
||
// 监听屏幕宽度变化
|
||
useEffect(() => {
|
||
const handleResize = () => {
|
||
setWindowWidth(window.innerWidth);
|
||
};
|
||
window.addEventListener("resize", handleResize);
|
||
|
||
// 清除监听器
|
||
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 移动到数组开头
|
||
}
|
||
setCityList(newCityList);
|
||
} else {
|
||
// 屏幕宽度大于 768 时，恢复默认顺序
|
||
setCityList(oldcityList);
|
||
}
|
||
}, [windowWidth]);
|
||
|
||
const closeModal = () => {
|
||
setqrOpen(false); // 关闭模态框
|
||
};
|
||
|
||
return (
|
||
<View className="Index">
|
||
{/* <View className="header">
|
||
<View className="headerTag">
|
||
{["首页","导航", "图书", "好物", "活动", "工具箱", "关于我们"].map(
|
||
(item, index) => {
|
||
return (
|
||
<AtTag
|
||
className="AtTag"
|
||
name={item}
|
||
type="primary"
|
||
circle
|
||
size="small"
|
||
active={true}
|
||
onClick={() => {}}
|
||
>
|
||
{item}
|
||
</AtTag>
|
||
);
|
||
}
|
||
)}
|
||
</View>
|
||
</View> */}
|
||
|
||
{/* {!mobile ? ( */}
|
||
<View className="up">
|
||
<View className="upText">
|
||
<span className="title">📣成为数字游民,并旅居在任何地方</span>
|
||
<br />
|
||
<span className="nomadcna">nomadcna.com</span>
|
||
，代表着目前中国各地远程生活和工作的数字游民，不局限于某一处
|
||
<View className="AvatarView">
|
||
{[
|
||
{ image: girla },
|
||
{ image: avatar },
|
||
{ image: girlb },
|
||
{ image: cat },
|
||
{ image: girl },
|
||
{ image: boya },
|
||
{ image: touxiang },
|
||
{ image: girlc },
|
||
{ image: boyb },
|
||
].map((item, index) => {
|
||
return (
|
||
// <AtAvatar
|
||
// className="Avatar"
|
||
// circle
|
||
// image={item?.image}
|
||
// ></AtAvatar>
|
||
<Image className="Avatar" mode="heightFix" src={item?.image} />
|
||
);
|
||
})}
|
||
</View>
|
||
🍹每年在 30 多个城市 参加聚会
|
||
<br />
|
||
❤️结识新朋友，约会
|
||
<br />
|
||
🧪研究目的地并找到最适合居住和工作的地方
|
||
<br />
|
||
🌎追踪你的旅行，记录你去过的地方
|
||
<br />
|
||
💬加入微信群，在旅途中找到你的社区
|
||
{!!mobile ? (
|
||
<View className="upjonNomad">
|
||
<AtButton
|
||
className="upjonNomadBtn"
|
||
type="primary"
|
||
size="small"
|
||
onClick={() => {
|
||
setqrOpen(true);
|
||
}}
|
||
>{`加入微信群💬`}</AtButton>
|
||
</View>
|
||
) : null}
|
||
</View>
|
||
|
||
<View className="nomadvideo">
|
||
<Video
|
||
className="videoDom"
|
||
id="video"
|
||
src={nomad}
|
||
poster={nomadPoster}
|
||
initialTime={0}
|
||
controls={true}
|
||
autoplay={false}
|
||
loop={false}
|
||
muted={false}
|
||
floatingMode={"page"}
|
||
objectFit={"contain"}
|
||
/>
|
||
<View className="jonNomad">
|
||
<AtButton
|
||
className="jonNomadBtn"
|
||
type="primary"
|
||
size="small"
|
||
onClick={() => {
|
||
setqrOpen(true);
|
||
}}
|
||
>{`加入微信群💬`}</AtButton>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
{/* ) : null} */}
|
||
|
||
<View className="items">
|
||
{/* 数组尽量是4的倍数 */}
|
||
{/* 随着屏幕变化,改变自定义数组的索引/顺序 */}
|
||
{cityList.map((item, index) => {
|
||
if (item.type === "custom") {
|
||
// 根据屏幕变化,添加自定义组件
|
||
// return <View className="item"> {item.dom}</View>;
|
||
} else {
|
||
return (
|
||
<View className="item">
|
||
<View className="itemUp">
|
||
{/* 序列号 */}
|
||
<View className="itemUpleft">
|
||
<View>{index + 1}</View>
|
||
{/* <View>_</View> */}
|
||
</View>
|
||
{/* 网速 */}
|
||
{/* <View className="itemUpright">
|
||
<Image
|
||
style="width: 20px;height: 20px;"
|
||
mode="heightFix"
|
||
src={wifi}
|
||
/>
|
||
<View className="itemUprightWifi">70mps</View>
|
||
</View> */}
|
||
</View>
|
||
{/* 城市名 */}
|
||
<View className="itemiddle"> {item.cityName}</View>
|
||
<View className="itemDown">
|
||
{/* 温度 */}
|
||
{/* <View className="itemDownleft">
|
||
<Image
|
||
style="width: 30px;height: 30px;"
|
||
mode="heightFix"
|
||
src={taiyang}
|
||
/>
|
||
<span> 29度</span>
|
||
</View> */}
|
||
{/* 消费 */}
|
||
{/* <View className="itemDownright">¥1545/月</View> */}
|
||
</View>
|
||
{/* 0;opacity: 0.93; */}
|
||
{/* <Image
|
||
style="width: 100%;height: 100%;background: #fff;border-radius: 5%;z-index:0;filter: contrast(0.9);"
|
||
// mode="heightFix"
|
||
src={item.img}
|
||
/> */}
|
||
<LazyLoadImage
|
||
alt="Sample"
|
||
src={item.img}
|
||
effect="blur"
|
||
width="100%"
|
||
height="100%"
|
||
style={{ borderRadius: "15px" }} // 设置圆角
|
||
/>
|
||
</View>
|
||
);
|
||
}
|
||
})}
|
||
</View>
|
||
|
||
<AtModal
|
||
isOpened={qrOpen}
|
||
closeOnClickOverlay={true}
|
||
onClose={closeModal}
|
||
>
|
||
{/* <AtModalHeader>标题</AtModalHeader> */}
|
||
<AtModalContent>
|
||
<View className="qrcode">
|
||
{/* ,加入💬微信群 */}
|
||
<View>扫码关注公众号</View>
|
||
<Image
|
||
style="width: 200px;height: 200px;"
|
||
mode="heightFix"
|
||
src={qrcodeoffice}
|
||
/>
|
||
</View>
|
||
</AtModalContent>
|
||
{/* <AtModalAction>
|
||
<Button>取消</Button> <Button>确定</Button>{" "}
|
||
</AtModalAction> */}
|
||
</AtModal>
|
||
|
||
<IndexDetail></IndexDetail>
|
||
{/* <View className="right">22</View> */}
|
||
</View>
|
||
);
|
||
};
|
||
|
||
export default Index;
|