285 lines
7.9 KiB
TypeScript
285 lines
7.9 KiB
TypeScript
import Header from './Header'
|
||
// import BestSellers from "./BestSellers";
|
||
import './index.scss'
|
||
import Taro from '@tarojs/taro';
|
||
import {Map} from '@tarojs/components'
|
||
import {Search} from '@nutui/icons-react-taro'
|
||
import {Button, Input} from '@nutui/nutui-react-taro'
|
||
// import {InfiniteLoading} from '@nutui/nutui-react-taro'
|
||
import {useShareAppMessage, useShareTimeline} from "@tarojs/taro"
|
||
import {useEffect, useState} from "react";
|
||
import ExpirationTime from "./ExpirationTime";
|
||
import {User} from "@/api/system/user/model";
|
||
import {getSiteInfo, getUserInfo, getWxOpenId} from "@/api/layout";
|
||
import Login from "./Login";
|
||
import {CmsWebsite} from "@/api/cms/cmsWebsite/model";
|
||
import {pageByQQMap, pageHjmCar} from "@/api/hjm/hjmCar";
|
||
import {HjmCar} from "@/api/hjm/hjmCar/model";
|
||
|
||
export interface Market {
|
||
// 自增ID
|
||
id?: number;
|
||
latitude?: number;
|
||
longitude?: number;
|
||
name?: string;
|
||
title?: string;
|
||
}
|
||
|
||
function Home() {
|
||
const [website, setWebsite] = useState<CmsWebsite>()
|
||
const [IsLogin, setIsLogin] = useState<boolean>(true)
|
||
const [userInfo, setUserInfo] = useState<User>()
|
||
const [longitude, setLongitude] = useState<any>(108.374959)
|
||
const [latitude, setLatitude] = useState<any>(22.767024)
|
||
const [markers, setMarkers] = useState<Market[]>([])
|
||
const [scale, setScale] = useState<any>(16)
|
||
const [keywords, setKeywords] = useState<string>('')
|
||
const [list, setList] = useState<HjmCar[]>([])
|
||
console.log(userInfo?.nickname)
|
||
console.log(website?.websiteName)
|
||
console.log(list.length)
|
||
// const [hasMore, setHasMore] = useState(true)
|
||
// const [list, setList] = useState<BszxPay[]>([])
|
||
// const [page, setPage] = useState(1)
|
||
|
||
useShareTimeline(() => {
|
||
return {
|
||
title: '注册即可开通 - webSoft云应用',
|
||
path: `/pages/index/index`
|
||
};
|
||
});
|
||
|
||
useShareAppMessage(() => {
|
||
return {
|
||
title: '注册即可开通 - webSoft云应用',
|
||
path: `/pages/index/index`,
|
||
success: function (res) {
|
||
console.log('分享成功', res);
|
||
},
|
||
fail: function (res) {
|
||
console.log('分享失败', res);
|
||
}
|
||
};
|
||
});
|
||
|
||
// const reloadMore = async () => {
|
||
// setPage(page + 1)
|
||
// }
|
||
|
||
const showAuthModal = () => {
|
||
Taro.showModal({
|
||
title: '授权提示',
|
||
content: '需要获取您的用户信息',
|
||
confirmText: '去授权',
|
||
cancelText: '取消',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 用户点击确认，打开授权设置页面
|
||
openSetting();
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
const openSetting = () => {
|
||
// Taro.openSetting：调起客户端小程序设置界面，返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限。
|
||
Taro.openSetting({
|
||
success: (res) => {
|
||
if (res.authSetting['scope.userInfo']) {
|
||
// 用户授权成功，可以获取用户信息
|
||
reload();
|
||
} else {
|
||
// 用户拒绝授权，提示授权失败
|
||
Taro.showToast({
|
||
title: '授权失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
const onKeywords = (keywords: string) => {
|
||
setKeywords(keywords)
|
||
}
|
||
|
||
// 登录成功后回调
|
||
const handleLogin = (data: User) => {
|
||
setIsLogin(true)
|
||
setUserInfo(data)
|
||
Taro.showTabBar()
|
||
reload();
|
||
}
|
||
|
||
// 获取当前位置
|
||
const getLocation = async () => {
|
||
try {
|
||
const res = await Taro.getLocation({
|
||
type: 'gcj02' //返回可以用于wx.openLocation的经纬度
|
||
})
|
||
pageByQQMap({
|
||
latitude: res.latitude,
|
||
longitude: res.longitude,
|
||
}).then(res => {
|
||
if (res?.list && res?.list.length > 0) {
|
||
const data = res?.list;
|
||
const arr = []
|
||
data?.map((item: HjmCar) => {
|
||
// @ts-ignore
|
||
arr.push({
|
||
id: item.id,
|
||
latitude: item.latitude,
|
||
longitude: item.longitude,
|
||
title: `${item.organization}`,
|
||
name: item.organization
|
||
})
|
||
})
|
||
setMarkers(arr)
|
||
}
|
||
})
|
||
if (res.latitude) {
|
||
setLatitude(res.latitude)
|
||
}
|
||
if (res.longitude) {
|
||
setLongitude(res.longitude)
|
||
}
|
||
console.log(res)
|
||
console.log('当前位置：', res.latitude, res.longitude);
|
||
return res;
|
||
} catch (err) {
|
||
console.error('获取位置失败：', err);
|
||
}
|
||
}
|
||
|
||
const reload = () => {
|
||
setMarkers([])
|
||
pageHjmCar({keywords}).then(res => {
|
||
setList(res?.list || [])
|
||
if (res?.list && res?.list.length > 0) {
|
||
setScale(16)
|
||
const data = res?.list[0];
|
||
setLongitude(data?.longitude)
|
||
setLatitude(data?.latitude)
|
||
setMarkers([{
|
||
id: data.id,
|
||
latitude: data.latitude,
|
||
longitude: data.longitude,
|
||
title: `${data.organization}`,
|
||
name: `${data.organization}`
|
||
}])
|
||
}
|
||
})
|
||
};
|
||
|
||
useEffect(() => {
|
||
// Taro.hideTabBar()
|
||
setScale(14)
|
||
getLocation().then()
|
||
// 获取站点信息
|
||
getSiteInfo().then((data) => {
|
||
console.log(data, 'siteInfo')
|
||
setWebsite(data)
|
||
})
|
||
// Taro.getSetting：获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
|
||
Taro.getSetting({
|
||
success: (res) => {
|
||
if (res.authSetting['scope.userInfo']) {
|
||
// 用户已经授权过，可以直接获取用户信息
|
||
console.log('用户已经授权过，可以直接获取用户信息')
|
||
reload();
|
||
} else {
|
||
// 用户未授权，需要弹出授权窗口
|
||
console.log('用户未授权，需要弹出授权窗口')
|
||
showAuthModal();
|
||
}
|
||
}
|
||
});
|
||
// 获取用户信息
|
||
Taro.getUserInfo({
|
||
success: (res) => {
|
||
const avatar = res.userInfo.avatarUrl;
|
||
setUserInfo({
|
||
avatar,
|
||
nickname: res.userInfo.nickName,
|
||
sexName: res.userInfo.gender == 1 ? '男' : '女'
|
||
})
|
||
getUserInfo().then((data) => {
|
||
if (data) {
|
||
setUserInfo(data)
|
||
setIsLogin(true);
|
||
Taro.setStorageSync('UserId', data.userId)
|
||
// 获取openId
|
||
if (!data.openid) {
|
||
Taro.login({
|
||
success: (res) => {
|
||
getWxOpenId({code: res.code}).then(() => {
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}).catch(() => {
|
||
setIsLogin(false);
|
||
console.log('未登录')
|
||
});
|
||
}
|
||
});
|
||
}, []);
|
||
|
||
return (
|
||
<>
|
||
{!IsLogin ? (<Login done={handleLogin}/>) : (<>
|
||
<Header user={userInfo}/>
|
||
<ExpirationTime/>
|
||
<div className={'fixed z-20 top-24 left-0 w-full'}>
|
||
<div className={'px-4'}>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
background: '#fff',
|
||
padding: '0 10px',
|
||
borderRadius: '20px'
|
||
}}
|
||
>
|
||
<Search/>
|
||
<Input
|
||
placeholder="车辆编号"
|
||
value={keywords}
|
||
onChange={onKeywords}
|
||
onConfirm={reload}
|
||
/>
|
||
<div
|
||
className={'flex items-center'}
|
||
>
|
||
<Button type="warning" onClick={reload}>
|
||
查询
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Map
|
||
id="map"
|
||
longitude={longitude}
|
||
latitude={latitude}
|
||
scale={scale}
|
||
// @ts-ignore
|
||
markers={markers}
|
||
onTap={(map) => {
|
||
console.log('map tap',map)
|
||
}}
|
||
style={{width: '100%', height: '100vh'}}
|
||
/>
|
||
{/*<InfiniteLoading*/}
|
||
{/* className={'w-full fixed left-0 top-40'}*/}
|
||
{/*>*/}
|
||
{/* <BestSellers data={list}/>*/}
|
||
{/*</InfiniteLoading>*/}
|
||
</>)}
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default Home
|