368 lines
9.9 KiB
TypeScript
368 lines
9.9 KiB
TypeScript
import {
|
||
Button,
|
||
Card,
|
||
Col,
|
||
Divider,
|
||
Grid,
|
||
GridItem,
|
||
Row,
|
||
Tag,
|
||
Toast,
|
||
} from "@antmjs/vantui";
|
||
import { Input, View } from "@tarojs/components";
|
||
import React, { useCallback, useEffect, useState } from "react";
|
||
import { Swiper, SwiperItem, Image } from "@antmjs/vantui";
|
||
import react from "react";
|
||
import { NoticeBar } from "@antmjs/vantui";
|
||
import Taro from "@tarojs/taro";
|
||
import { Tabbar, TabbarItem } from "@antmjs/vantui";
|
||
import TabbarCom from "../components/TabbarCom";
|
||
import { getTable, getTableid } from "../../utils/index";
|
||
import { Icon } from "@antmjs/vantui";
|
||
import "./index.scss";
|
||
import { Search } from "@antmjs/vantui";
|
||
import ActiveCard from "../components/ActiveCard";
|
||
import { Dialog } from "@antmjs/vantui";
|
||
import { Loading } from "@antmjs/vantui";
|
||
|
||
const Home = () => {
|
||
// const { images } = COMMON
|
||
const [initPage1, setInitPage1] = react.useState(0);
|
||
const [active, setActive] = react.useState(0);
|
||
|
||
const [show, setShow] = react.useState(false);
|
||
const [value, setValue] = react.useState("");
|
||
|
||
const [SearchValue, setSearchValue] = useState<any>("");
|
||
|
||
const [details, setdetails] = useState<any>([]); //活动详情
|
||
// 系统配置
|
||
const [systemConfig, setsystemConfig] = useState<any>({});
|
||
|
||
const onChange = (e) => {};
|
||
|
||
useEffect(() => {
|
||
// 设置标题
|
||
definePageConfig({
|
||
navigationBarTitleText: "首页",
|
||
});
|
||
// 设置允许分享
|
||
Taro.showShareMenu({
|
||
withShareTicket: true,
|
||
});
|
||
// 其他分享
|
||
Taro.updateShareMenu({
|
||
withShareTicket: true,
|
||
success() {},
|
||
});
|
||
|
||
getdetails(); //获取活动详情
|
||
getsystemConfig(); //获取系统配置
|
||
}, []);
|
||
|
||
const getdetails = () => {
|
||
let objParams = {
|
||
tableName: "details",
|
||
// id: "80516fb66370bcf300b8f43c5f4dd52b",
|
||
okFun: (res: any) => {
|
||
console.log("details--", res);
|
||
setdetails(res?.data ?? []);
|
||
},
|
||
};
|
||
getTable(objParams);
|
||
};
|
||
|
||
const getsystemConfig = () => {
|
||
let objParams = {
|
||
tableName: "systemConfig",
|
||
// id: "80516fb66370bcf300b8f43c5f4dd52b",
|
||
okFun: (res: any) => {
|
||
console.log("systemConfig--", res);
|
||
setsystemConfig(res?.data ?? []);
|
||
},
|
||
};
|
||
getTable(objParams);
|
||
};
|
||
|
||
const uploadTaro = (tempFilePaths: any) => {
|
||
// 云开发存储文件 [/自动创建文件路径]
|
||
Taro.cloud.uploadFile({
|
||
cloudPath: `images/dev/${new Date()?.getTime()}.png`,
|
||
filePath: tempFilePaths?.[0], // 文件路径
|
||
success: (res: any) => {
|
||
// get resource ID
|
||
console.log("res", res.fileID);
|
||
|
||
// 跳转到目的页面，打开新页面
|
||
// Taro.navigateTo({
|
||
// url: `/pages/home/components/CheckIn/index?fileID=${res?.fileID}`,
|
||
// });
|
||
|
||
// Toast.success({
|
||
// message: "打卡成功",
|
||
// selector: "#vanToast-demo2",
|
||
// });
|
||
},
|
||
fail: (err: any) => {
|
||
// handle error
|
||
console.log("err", err);
|
||
},
|
||
});
|
||
};
|
||
const onSearch = (e: any) => {
|
||
console.log("e---", e);
|
||
// Toast.show(`search: ${e.detail}`);
|
||
// setSearchValue(e?.detail);
|
||
setSearchValue("");
|
||
|
||
// 跳转到目的页面，打开新页面
|
||
Taro.navigateTo({
|
||
url: "/pages/activityList/index",
|
||
});
|
||
};
|
||
const onCancel = (e: any) => {
|
||
// Toast.show(`onCancel`);
|
||
};
|
||
|
||
// 获取地理位置
|
||
const getLocation = async () => {
|
||
// 获取地理位置
|
||
Taro.getLocation({
|
||
type: "wgs84",
|
||
success: function (res: any) {
|
||
// 地理位置信息-经纬度
|
||
console.log("lbsres---", res);
|
||
const latitude = res.latitude;
|
||
const longitude = res.longitude;
|
||
const speed = res.speed;
|
||
const accuracy = res.accuracy;
|
||
},
|
||
});
|
||
};
|
||
|
||
const chooseImage = () => {
|
||
// 相机拍照
|
||
Taro.chooseImage({
|
||
count: 1, // 默认9
|
||
// , 'compressed'
|
||
sizeType: ["original"], // 可以指定是原图还是压缩图，默认二者都有
|
||
// 'album',
|
||
sourceType: ["camera"], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
|
||
success: function (res: any) {
|
||
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
|
||
let tempFilePaths = res.tempFilePaths;
|
||
console.log("tempFilePaths===", tempFilePaths);
|
||
Taro.navigateTo({
|
||
url: `/pages/home/components/CheckIn/index?fileID=${tempFilePaths?.[0]}`,
|
||
});
|
||
// uploadTaro(tempFilePaths)
|
||
},
|
||
});
|
||
};
|
||
|
||
return (
|
||
<View className="homeContent">
|
||
{/* <Loading type="spinner" /> */}
|
||
<View>
|
||
<Dialog
|
||
id="vanDialog3"
|
||
// title="标题"
|
||
// showCancelButton
|
||
// confirmButtonOpenType="getUserInfo"
|
||
showConfirmButton={false}
|
||
showCancelButton={false}
|
||
show={show}
|
||
onClose={() => setShow(false)}
|
||
>
|
||
<View className="tagArr">
|
||
{[
|
||
{ city: "深圳", color: "" },
|
||
{ city: "北京", color: "#8c8c8c" },
|
||
{ city: "上海", color: "#8c8c8c" },
|
||
{ city: "广州", color: "#8c8c8c" },
|
||
{ city: "武汉", color: "#8c8c8c" },
|
||
{ city: "杭州", color: "#8c8c8c" },
|
||
{ city: "成都", color: "#8c8c8c" },
|
||
// { city: "武汉" },
|
||
].map((item: any) => {
|
||
return (
|
||
<Tag
|
||
plain={true}
|
||
type="primary"
|
||
color={item?.color}
|
||
size="large"
|
||
style={{ marginRight: `30px`, marginBottom: "10px" }}
|
||
>
|
||
{item?.city}
|
||
</Tag>
|
||
);
|
||
})}
|
||
{/* <View> 其他城市,陆续开放中 ~~ </View> */}
|
||
</View>
|
||
</Dialog>
|
||
</View>
|
||
|
||
{/* 通知条 */}
|
||
{!systemConfig?.[0]?.notice?.isHidden && (
|
||
<NoticeBar
|
||
leftIcon="volume-o"
|
||
// text="疫情期间,请留意各个景区的开放状态以及时间"
|
||
text={systemConfig?.[0]?.notice?.text}
|
||
/>
|
||
)}
|
||
{/* 顶部 */}
|
||
{/* <View>
|
||
<Row>
|
||
<Col span="4" className="dark">
|
||
深圳
|
||
</Col>
|
||
</Row>
|
||
</View> */}
|
||
<View className="topHome">
|
||
{/* <Tag type="primary">深圳</Tag> */}
|
||
<View onClick={() => setShow(true)}>
|
||
<Tag plain={true} type="primary" size="large">
|
||
深圳
|
||
</Tag>
|
||
</View>
|
||
|
||
{/* 搜索框 */}
|
||
<View>
|
||
<Search
|
||
value={SearchValue}
|
||
onChange={(e) => setSearchValue(e.detail)}
|
||
placeholder="请输入搜索关键词"
|
||
style={{ width: "320px" }}
|
||
onSearch={onSearch}
|
||
// onCancel={onCancel}
|
||
/>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 轮播图 */}
|
||
<View className="demo-box">
|
||
<Swiper
|
||
height={180}
|
||
paginationColor="#426543"
|
||
autoPlay="3000"
|
||
initPage={initPage1}
|
||
paginationVisible
|
||
onChange={onChange}
|
||
>
|
||
{(systemConfig?.[0]?.imagesArr ?? []).map((item: any, index: any) => (
|
||
<SwiperItem key={`swiper#demo1${index}`}>
|
||
<Image src={item?.url} fit="cover" width="100%" height="200px" />
|
||
</SwiperItem>
|
||
))}
|
||
</Swiper>
|
||
</View>
|
||
|
||
{/* 模块 */}
|
||
<Grid>
|
||
<GridItem
|
||
icon="star"
|
||
text="打卡"
|
||
className="iconStyle"
|
||
onClick={() => {
|
||
// getLocation();
|
||
chooseImage();
|
||
}}
|
||
/>
|
||
<GridItem
|
||
icon="like"
|
||
className="iconStyle"
|
||
text="深圳十峰"
|
||
onClick={() => {
|
||
// 跳转到目的页面，打开新页面
|
||
Taro.navigateTo({
|
||
url: "/pages/mountainPeak/index",
|
||
});
|
||
}}
|
||
/>
|
||
<GridItem
|
||
icon="eye"
|
||
className="iconStyle"
|
||
text="活动"
|
||
onClick={() => {
|
||
// 跳转到目的页面，打开新页面
|
||
Taro.navigateTo({
|
||
url: "/pages/activityList/index",
|
||
});
|
||
}}
|
||
/>
|
||
|
||
{/* <GridItem
|
||
icon="manager"
|
||
className="iconStyle"
|
||
text="组队"
|
||
onClick={() => {
|
||
// 跳转到目的页面，打开新页面
|
||
Taro.navigateTo({
|
||
url: "/pages/formSubmit/index",
|
||
});
|
||
}}
|
||
/> */}
|
||
|
||
<GridItem
|
||
icon="manager"
|
||
className="iconStyle"
|
||
text="认证"
|
||
onClick={() => {
|
||
// 跳转到目的页面，打开新页面
|
||
Taro.navigateTo({
|
||
url: "/pages/home/components/Certified/index",
|
||
});
|
||
}}
|
||
/>
|
||
</Grid>
|
||
|
||
{/* 分割线 */}
|
||
{/* <View>
|
||
<Divider />
|
||
</View> */}
|
||
|
||
{/* 离我最近/天气/动态展示 */}
|
||
<View>
|
||
<Tag plain={true} type="success">
|
||
离你最近 (5km)
|
||
</Tag>
|
||
<View>
|
||
<View>{`天气晴雨[动画效果]`}</View>
|
||
<View>温度</View>
|
||
<View>是否开放</View>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 截取数组2个活动 */}
|
||
{details.splice(0, 2).map((item: any, index: any) => {
|
||
return (
|
||
<View
|
||
onClick={() => {
|
||
console.log("Card");
|
||
Taro.navigateTo({
|
||
url: `/pages/activityList/components/details/index?id=${item?._id}`,
|
||
});
|
||
}}
|
||
>
|
||
{/* 活动卡片 */}
|
||
<ActiveCard dataSource={item} />
|
||
</View>
|
||
);
|
||
})}
|
||
|
||
|
||
{/* 直播live专区 */}
|
||
{/* <View>视频号直播</View> */}
|
||
|
||
{/* 小红书图文/视频信息流 */}
|
||
{/* <View> 打开信息流</View> */}
|
||
|
||
<Toast id="vanToast-demo2" />
|
||
|
||
<TabbarCom active={0} />
|
||
</View>
|
||
);
|
||
};
|
||
|
||
export default Home;
|