277 lines
7.9 KiB
TypeScript
277 lines
7.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 } 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";
|
||
|
||
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 onChange = (e) => {};
|
||
const images = [
|
||
"cloud://cloud1-5g5xrgza12a0dd6d.636c-cloud1-5g5xrgza12a0dd6d-1253665791/download.jpg",
|
||
"cloud://cloud1-5g5xrgza12a0dd6d.636c-cloud1-5g5xrgza12a0dd6d-1253665791/images.jpg",
|
||
];
|
||
|
||
useEffect(() => {
|
||
// 设置标题
|
||
definePageConfig({
|
||
navigationBarTitleText: "首页",
|
||
});
|
||
// 设置允许分享
|
||
Taro.showShareMenu({
|
||
withShareTicket: true,
|
||
});
|
||
// 其他分享
|
||
Taro.updateShareMenu({
|
||
withShareTicket: true,
|
||
success() {},
|
||
});
|
||
// let objParams = {
|
||
// tableName: "test",
|
||
// id: "80516fb66370bcf300b8f43c5f4dd52b",
|
||
// okFun: (res) => {
|
||
// console.log("res", res);
|
||
// },
|
||
// };
|
||
|
||
// getTableid(objParams);
|
||
}, []);
|
||
|
||
return (
|
||
<View className="homeContent">
|
||
<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>
|
||
</Dialog>
|
||
</View>
|
||
|
||
{/* 通知条 */}
|
||
<NoticeBar leftIcon="volume-o" 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 placeholder="请输入搜索关键词" style={{ width: "320px" }} />
|
||
</View>
|
||
</View>
|
||
|
||
{/* 轮播图 */}
|
||
<View className="demo-box">
|
||
<Swiper
|
||
height={180}
|
||
paginationColor="#426543"
|
||
autoPlay="3000"
|
||
initPage={initPage1}
|
||
paginationVisible
|
||
onChange={onChange}
|
||
>
|
||
{images.map((item, index) => (
|
||
<SwiperItem key={`swiper#demo1${index}`}>
|
||
<Image src={item} fit="cover" width="100%" height="200px" />
|
||
</SwiperItem>
|
||
))}
|
||
</Swiper>
|
||
</View>
|
||
|
||
{/* 模块 */}
|
||
<Grid>
|
||
<GridItem
|
||
icon="star"
|
||
text="打卡"
|
||
className="iconStyle"
|
||
onClick={() => {
|
||
// 相机拍照
|
||
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.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);
|
||
},
|
||
});
|
||
},
|
||
});
|
||
}}
|
||
/>
|
||
<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",
|
||
});
|
||
}}
|
||
/>
|
||
</Grid>
|
||
|
||
{/* 分割线 */}
|
||
{/* <View>
|
||
<Divider />
|
||
</View> */}
|
||
|
||
{/* 截取数组2个活动 */}
|
||
{[1, 2, 3, 4].splice(0, 2).map((item: any) => {
|
||
return (
|
||
<View
|
||
onClick={() => {
|
||
console.log("Card");
|
||
Taro.navigateTo({
|
||
url: "/pages/activityList/components/details/index",
|
||
});
|
||
}}
|
||
>
|
||
{/* 活动卡片 */}
|
||
<ActiveCard />
|
||
|
||
{/* <Card
|
||
num=""
|
||
price=""
|
||
desc="报名中"
|
||
title="周末爬山"
|
||
thumb="cloud://cloud1-5g5xrgza12a0dd6d.636c-cloud1-5g5xrgza12a0dd6d-1253665791/images.jpg"
|
||
/> */}
|
||
</View>
|
||
);
|
||
})}
|
||
|
||
{/* <Tabbar
|
||
active={active}
|
||
safeAreaInsetBottom={false}
|
||
|
||
|
||
>
|
||
<TabbarItem icon="home-o">首页</TabbarItem>
|
||
<TabbarItem icon="friends-o">活动</TabbarItem>
|
||
<TabbarItem icon="setting-o">我的</TabbarItem>
|
||
</Tabbar> */}
|
||
|
||
<Toast id="vanToast-demo2" />
|
||
|
||
<TabbarCom active={0} />
|
||
</View>
|
||
);
|
||
};
|
||
|
||
export default Home;
|