u
This commit is contained in:
1 parent
8f3f6982db
commit
5a79414319
10 files changed
+355
-293
No files matched your search
@@ -1,11 +1,80 @@
|
||||
import { TabSlot } from 'expo-router/ui'
|
||||
import { Text, View } from 'react-native'
|
||||
import type { icons } from 'lucide-react-native'
|
||||
import type { SortableGridRenderItem } from 'react-native-sortables'
|
||||
import { Slot, usePathname, useRouter } from 'expo-router'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { Pressable, Text, TouchableOpacity, Vibration, View } from 'react-native'
|
||||
import Animated, { useAnimatedRef } from 'react-native-reanimated'
|
||||
import Sortable from 'react-native-sortables'
|
||||
import { ADrawer, LucideIcon } from '@/components/common/ao'
|
||||
|
||||
interface NavItem {
|
||||
label: string
|
||||
path: string
|
||||
icon: keyof typeof icons
|
||||
}
|
||||
|
||||
const NAV_MENUS: NavItem[] = [
|
||||
{ label: '记账', path: '/money', icon: 'CircleDollarSign' },
|
||||
{ label: '恋爱记', path: '/love', icon: 'Heart' },
|
||||
{ label: '聊天', path: '/chat', icon: 'MessageCircle' },
|
||||
{ label: '个人中心', path: '/user', icon: 'CircleUserRound' },
|
||||
]
|
||||
|
||||
export default function TabsLayout() {
|
||||
const scrollableRef = useAnimatedRef<Animated.ScrollView>()
|
||||
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const [showNavDrawer, setShowNavDrawer] = useState(false)
|
||||
const [draggingId, setDraggingId] = useState<string>('')
|
||||
const [currentNav, setCurrentNav] = useState<NavItem>({
|
||||
label: '',
|
||||
path: '',
|
||||
icon: 'AArrowDown',
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
const current = NAV_MENUS.find(item => item.path === pathname)
|
||||
if (current) {
|
||||
setCurrentNav(current)
|
||||
}
|
||||
}, [pathname])
|
||||
|
||||
const refreshPage = () => {
|
||||
router.replace(pathname)
|
||||
}
|
||||
|
||||
const renderNavItem = useCallback<SortableGridRenderItem<NavItem>>(
|
||||
({ item }) => (
|
||||
<Pressable
|
||||
className="
|
||||
flex
|
||||
flex-col
|
||||
items-center
|
||||
justify-center
|
||||
bg-[white]
|
||||
rounded-md
|
||||
shadow-md
|
||||
p-3
|
||||
"
|
||||
onPress={() => {
|
||||
setShowNavDrawer(false)
|
||||
router.push(item.path)
|
||||
}}
|
||||
>
|
||||
<LucideIcon icon={item.icon} size={24} strokeWidth={2} clickable={false} />
|
||||
<Text className="text-sm mt-2">
|
||||
{item.label}
|
||||
</Text>
|
||||
</Pressable>
|
||||
),
|
||||
[],
|
||||
)
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-gray-100">
|
||||
<View className="flex-1 px-4 pt-4 pb-24">
|
||||
<TabSlot />
|
||||
<View className="flex-1 bg-white">
|
||||
<Slot />
|
||||
</View>
|
||||
|
||||
<View
|
||||
@@ -18,10 +87,55 @@ export default function TabsLayout() {
|
||||
gap-4
|
||||
"
|
||||
>
|
||||
<View className="bg-white rounded-md shadow-lg h-12 w-12"></View>
|
||||
<View className="flex-1 bg-white rounded-md shadow-lg h-12"></View>
|
||||
<View className="bg-white rounded-md shadow-lg h-12 w-12"></View>
|
||||
<View className="bg-white rounded-md shadow-lg h-12 w-12">
|
||||
<TouchableOpacity className="w-full h-full items-center justify-center">
|
||||
<LucideIcon icon="Bot" size={26} clickable={false} strokeWidth={2} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View className="flex-1 bg-white rounded-md shadow-lg h-12">
|
||||
<TouchableOpacity
|
||||
className="w-full h-full items-center justify-center flex flex-row"
|
||||
onPress={() => {
|
||||
setShowNavDrawer(true)
|
||||
}}
|
||||
>
|
||||
<LucideIcon icon={currentNav.icon} size={20} strokeWidth={2} />
|
||||
<Text className="font-semibold text-lg ml-2">{currentNav.label}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View className="bg-white rounded-md shadow-lg h-12 w-12">
|
||||
<TouchableOpacity className="w-full h-full items-center justify-center" onPress={refreshPage}>
|
||||
<LucideIcon icon="RefreshCcw" size={26} clickable={false} strokeWidth={2} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<ADrawer
|
||||
visible={showNavDrawer}
|
||||
height="60%"
|
||||
title="菜单导航"
|
||||
isCircle
|
||||
hideModal={() => {
|
||||
setShowNavDrawer(false)
|
||||
}}
|
||||
>
|
||||
<Animated.ScrollView
|
||||
ref={scrollableRef}
|
||||
className="px-4 py-2 flex-1"
|
||||
>
|
||||
<Sortable.Grid
|
||||
columnGap={16}
|
||||
rowGap={16}
|
||||
columns={3}
|
||||
data={NAV_MENUS}
|
||||
keyExtractor={item => item.path}
|
||||
renderItem={renderNavItem}
|
||||
scrollableRef={scrollableRef}
|
||||
autoScrollActivationOffset={200}
|
||||
/>
|
||||
</Animated.ScrollView>
|
||||
</ADrawer>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -1,11 +1,22 @@
|
||||
import { useRouter } from 'expo-router'
|
||||
import { Text, View } from 'react-native'
|
||||
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { AButton } from '@/components/common/ao'
|
||||
// 这个页面的作用是作为占位页,避免进入 (tabs) layout 时出现 404 页面。
|
||||
// 如果想指定默认页面,可以通过 router.replace 或 TabTrigger 指向具体子页面。
|
||||
export default function Index() {
|
||||
const router = useRouter()
|
||||
|
||||
return (
|
||||
<View>
|
||||
<Text>Index</Text>
|
||||
</View>
|
||||
<SafeAreaView>
|
||||
<View>
|
||||
<AButton onPress={() => {
|
||||
router.push('/money')
|
||||
}}
|
||||
>
|
||||
测试
|
||||
</AButton>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
@@ -11,7 +11,7 @@ export default function NotFound() {
|
||||
title="(´・ω・`) 页面走丢了~"
|
||||
description="回首页看看吧!"
|
||||
footer={(
|
||||
<AButton onPress={() => router.replace('/')} leftIcon={{ icon: 'ArrowLeft', size: 18, color: '#fff' }}>
|
||||
<AButton onPress={() => router.replace('/')}>
|
||||
返回应用首页
|
||||
</AButton>
|
||||
)}
|
||||
|
||||
@@ -31,7 +31,7 @@ export function ErrorBoundary({ error, retry }: ErrorBoundaryProps) {
|
||||
title="(´・ω・`) 出错啦~"
|
||||
description={`发生了一点小问题:\n${error?.message || '请稍后再试'}`}
|
||||
footer={(
|
||||
<AButton onPress={retry} leftIcon={{ icon: 'RotateCcw', size: 18, color: '#fff' }}>
|
||||
<AButton onPress={retry}>
|
||||
再试一下
|
||||
</AButton>
|
||||
)}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useEvent } from 'expo'
|
||||
import ExpoQQ from 'expo-qq'
|
||||
// import ExpoQQ from 'expo-qq'
|
||||
import { useRouter } from 'expo-router'
|
||||
import ExpoWeChat from 'expo-wechat'
|
||||
// import ExpoWeChat from 'expo-wechat'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Image, Text, View } from 'react-native'
|
||||
import { AButton, ACheckbox } from '@/components/common/ao'
|
||||
@@ -11,7 +11,7 @@ import { loginQqApi, loginWxApi } from '@/request/api/auth'
|
||||
import { useUserStore } from '@/store/user'
|
||||
import { toast } from '@/utils/toast'
|
||||
|
||||
export default function LoginScreen() {
|
||||
export default function Auth() {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [isAgree, setIsAgree] = useState(true)
|
||||
const [form, setForm] = useState({
|
||||
@@ -23,160 +23,160 @@ export default function LoginScreen() {
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const onLoginFinished = useEvent(ExpoQQ, 'onLoginFinished')
|
||||
const onGetUserInfo = useEvent(ExpoQQ, 'onGetUserInfo')
|
||||
const authResult = useEvent(ExpoWeChat, 'onAuthResult')
|
||||
// const onLoginFinished = useEvent(ExpoQQ, 'onLoginFinished')
|
||||
// const onGetUserInfo = useEvent(ExpoQQ, 'onGetUserInfo')
|
||||
// const authResult = useEvent(ExpoWeChat, 'onAuthResult')
|
||||
|
||||
async function onQQLogin() {
|
||||
setLoading(true)
|
||||
setForm(val => ({
|
||||
...val,
|
||||
type: 1,
|
||||
}))
|
||||
await ExpoQQ.login(['get_user_info'])
|
||||
}
|
||||
// async function onQQLogin() {
|
||||
// setLoading(true)
|
||||
// setForm(val => ({
|
||||
// ...val,
|
||||
// type: 1,
|
||||
// }))
|
||||
// await ExpoQQ.login(['get_user_info'])
|
||||
// }
|
||||
|
||||
async function onWeChatLogin() {
|
||||
setLoading(true)
|
||||
// async function onWeChatLogin() {
|
||||
// setLoading(true)
|
||||
|
||||
// 检查微信是否安装
|
||||
const isInstalled = await ExpoWeChat.isWXAppInstalled()
|
||||
if (!isInstalled) {
|
||||
toast.show({
|
||||
title: onLoginFinished?.errorMessage || '请先安装微信',
|
||||
})
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
// // 检查微信是否安装
|
||||
// const isInstalled = await ExpoWeChat.isWXAppInstalled()
|
||||
// if (!isInstalled) {
|
||||
// toast.show({
|
||||
// title: onLoginFinished?.errorMessage || '请先安装微信',
|
||||
// })
|
||||
// setLoading(false)
|
||||
// return
|
||||
// }
|
||||
|
||||
setForm(val => ({
|
||||
...val,
|
||||
type: 0,
|
||||
}))
|
||||
// setForm(val => ({
|
||||
// ...val,
|
||||
// type: 0,
|
||||
// }))
|
||||
|
||||
ExpoWeChat.sendAuthRequest('snsapi_userinfo', 'state123')
|
||||
}
|
||||
// ExpoWeChat.sendAuthRequest('snsapi_userinfo', 'state123')
|
||||
// }
|
||||
|
||||
useEffect(() => {
|
||||
ExpoQQ.init('102826474', '')
|
||||
ExpoWeChat.registerApp('wxdab3e21a1f7e392f', '')
|
||||
}, [])
|
||||
// useEffect(() => {
|
||||
// ExpoQQ.init('102826474', '')
|
||||
// ExpoWeChat.registerApp('wxdab3e21a1f7e392f', '')
|
||||
// }, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!onLoginFinished) {
|
||||
return
|
||||
}
|
||||
// useEffect(() => {
|
||||
// if (!onLoginFinished) {
|
||||
// return
|
||||
// }
|
||||
|
||||
if (!onLoginFinished.success) {
|
||||
toast.show({
|
||||
title: onLoginFinished?.errorMessage || '授权失败,请检查手机是否安装 QQ 或确认授权',
|
||||
})
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
// if (!onLoginFinished.success) {
|
||||
// toast.show({
|
||||
// title: onLoginFinished?.errorMessage || '授权失败,请检查手机是否安装 QQ 或确认授权',
|
||||
// })
|
||||
// setLoading(false)
|
||||
// return
|
||||
// }
|
||||
|
||||
const fetchUserInfo = async () => {
|
||||
try {
|
||||
const tokenInfo = await ExpoQQ.getLoginTokenInfo()
|
||||
if (!tokenInfo.openId) {
|
||||
toast.show({
|
||||
title: tokenInfo?.errorMessage || '授权失败,请检查手机是否安装 QQ 或确认授权',
|
||||
})
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
// const fetchUserInfo = async () => {
|
||||
// try {
|
||||
// const tokenInfo = await ExpoQQ.getLoginTokenInfo()
|
||||
// if (!tokenInfo.openId) {
|
||||
// toast.show({
|
||||
// title: tokenInfo?.errorMessage || '授权失败,请检查手机是否安装 QQ 或确认授权',
|
||||
// })
|
||||
// setLoading(false)
|
||||
// return
|
||||
// }
|
||||
|
||||
setForm(val => ({
|
||||
...val,
|
||||
openid: String(tokenInfo.openId),
|
||||
}))
|
||||
// setForm(val => ({
|
||||
// ...val,
|
||||
// openid: String(tokenInfo.openId),
|
||||
// }))
|
||||
|
||||
await ExpoQQ.sendGetUserInfoReq()
|
||||
}
|
||||
catch (e) {
|
||||
console.error('QQ 登录未完成', e)
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
// await ExpoQQ.sendGetUserInfoReq()
|
||||
// }
|
||||
// catch (e) {
|
||||
// console.error('QQ 登录未完成', e)
|
||||
// setLoading(false)
|
||||
// }
|
||||
// }
|
||||
|
||||
fetchUserInfo()
|
||||
}, [onLoginFinished])
|
||||
// fetchUserInfo()
|
||||
// }, [onLoginFinished])
|
||||
|
||||
// QQ登录
|
||||
useEffect(() => {
|
||||
const handleLogin = async () => {
|
||||
if (!onGetUserInfo)
|
||||
return
|
||||
// // QQ登录
|
||||
// useEffect(() => {
|
||||
// const handleLogin = async () => {
|
||||
// if (!onGetUserInfo)
|
||||
// return
|
||||
|
||||
try {
|
||||
const loginRes = await loginQqApi({
|
||||
openid: form.openid,
|
||||
username: onGetUserInfo.nickname || '',
|
||||
avatar: onGetUserInfo.figureurlQq_2 || onGetUserInfo.figureurl_2,
|
||||
})
|
||||
// try {
|
||||
// const loginRes = await loginQqApi({
|
||||
// openid: form.openid,
|
||||
// username: onGetUserInfo.nickname || '',
|
||||
// avatar: onGetUserInfo.figureurlQq_2 || onGetUserInfo.figureurl_2,
|
||||
// })
|
||||
|
||||
if (loginRes.isSuccess) {
|
||||
userStore.setUserInfo({
|
||||
token: loginRes.data.token,
|
||||
id: loginRes.data.userId,
|
||||
username: loginRes.data.username,
|
||||
avatar: loginRes.data.avatar,
|
||||
})
|
||||
// if (loginRes.isSuccess) {
|
||||
// userStore.setUserInfo({
|
||||
// token: loginRes.data.token,
|
||||
// id: loginRes.data.userId,
|
||||
// username: loginRes.data.username,
|
||||
// avatar: loginRes.data.avatar,
|
||||
// })
|
||||
|
||||
console.log(loginRes.data.token)
|
||||
// console.log(loginRes.data.token)
|
||||
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
catch (err) {
|
||||
console.error('登录接口出错', err)
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
// router.push('/')
|
||||
// }
|
||||
// }
|
||||
// catch (err) {
|
||||
// console.error('登录接口出错', err)
|
||||
// }
|
||||
// finally {
|
||||
// setLoading(false)
|
||||
// }
|
||||
// }
|
||||
|
||||
handleLogin()
|
||||
}, [onGetUserInfo])
|
||||
// handleLogin()
|
||||
// }, [onGetUserInfo])
|
||||
|
||||
// 微信登录
|
||||
useEffect(() => {
|
||||
if (!authResult)
|
||||
return
|
||||
// // 微信登录
|
||||
// useEffect(() => {
|
||||
// if (!authResult)
|
||||
// return
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (authResult.errorCode === 0) {
|
||||
try {
|
||||
const loginRes = await loginWxApi({
|
||||
code: authResult.code,
|
||||
})
|
||||
// const handleLogin = async () => {
|
||||
// if (authResult.errorCode === 0) {
|
||||
// try {
|
||||
// const loginRes = await loginWxApi({
|
||||
// code: authResult.code,
|
||||
// })
|
||||
|
||||
if (loginRes.isSuccess) {
|
||||
userStore.setUserInfo({
|
||||
token: loginRes.data.token,
|
||||
id: loginRes.data.userId,
|
||||
username: loginRes.data.username,
|
||||
avatar: loginRes.data.avatar,
|
||||
})
|
||||
// if (loginRes.isSuccess) {
|
||||
// userStore.setUserInfo({
|
||||
// token: loginRes.data.token,
|
||||
// id: loginRes.data.userId,
|
||||
// username: loginRes.data.username,
|
||||
// avatar: loginRes.data.avatar,
|
||||
// })
|
||||
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
catch (err) {
|
||||
console.error('登录接口出错', err)
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
else {
|
||||
console.log('授权失败:', authResult.errorMessage)
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
// router.push('/')
|
||||
// }
|
||||
// }
|
||||
// catch (err) {
|
||||
// console.error('登录接口出错', err)
|
||||
// }
|
||||
// finally {
|
||||
// setLoading(false)
|
||||
// }
|
||||
// }
|
||||
// else {
|
||||
// console.log('授权失败:', authResult.errorMessage)
|
||||
// setLoading(false)
|
||||
// }
|
||||
// }
|
||||
|
||||
handleLogin()
|
||||
}, [authResult])
|
||||
// handleLogin()
|
||||
// }, [authResult])
|
||||
|
||||
function testLogin() {
|
||||
// eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo3NjY3ODU5ODIxNjUwNjEsImlhdCI6MTc2OTM0ODI0Nn0.17ZNaHD3HSLM8dVn_JQK-gvsG9MKj47IRYV9D4xZkzs
|
||||
@@ -208,7 +208,7 @@ export default function LoginScreen() {
|
||||
</View>
|
||||
|
||||
<View className="flex flex-col gap-4">
|
||||
<AButton
|
||||
{/* <AButton
|
||||
leftIcon={
|
||||
<IconWeixin color="#fff" />
|
||||
}
|
||||
@@ -227,7 +227,7 @@ export default function LoginScreen() {
|
||||
onPress={onQQLogin}
|
||||
>
|
||||
QQ
|
||||
</AButton>
|
||||
</AButton> */}
|
||||
|
||||
<AButton
|
||||
variant="outline"
|
||||
|
||||
@@ -149,11 +149,6 @@ export default function MoneyCategorySetting() {
|
||||
<AButton
|
||||
className="rounded-full"
|
||||
size="sm"
|
||||
leftIcon={{
|
||||
icon: 'Plus',
|
||||
color: '#fff',
|
||||
clickable: false,
|
||||
}}
|
||||
onPress={(() =>
|
||||
setshowEditCategory(true)
|
||||
)}
|
||||
|
||||
@@ -37,7 +37,7 @@ export default function Drawer({
|
||||
isCircle,
|
||||
menuPosition = 'bottom',
|
||||
children,
|
||||
CircleNum,
|
||||
CircleNum = 8,
|
||||
isShadowHideModal = true,
|
||||
header,
|
||||
title,
|
||||
@@ -48,7 +48,6 @@ export default function Drawer({
|
||||
|
||||
const anim = useRef(new Animated.Value(0)).current
|
||||
|
||||
/* ================== 同步外部 visible ================== */
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
setInnerVisible(true)
|
||||
@@ -59,7 +58,6 @@ export default function Drawer({
|
||||
}
|
||||
}, [visible])
|
||||
|
||||
/* ================== 布局样式 ================== */
|
||||
useEffect(() => {
|
||||
switch (menuPosition) {
|
||||
case 'left':
|
||||
@@ -207,8 +205,9 @@ export default function Drawer({
|
||||
</TouchableWithoutFeedback>
|
||||
|
||||
{/* Drawer */}
|
||||
<View style={drawerMenuBox}>
|
||||
<View style={drawerMenuBox} pointerEvents="box-none">
|
||||
<Animated.View
|
||||
pointerEvents="box-none"
|
||||
style={[
|
||||
styles.container,
|
||||
{
|
||||
|
||||
@@ -33,7 +33,6 @@ export default function LucideIcon({
|
||||
return <IconComponent size={size} color={color} strokeWidth={strokeWidth} style={style} className={className} />
|
||||
}
|
||||
|
||||
// clickable 为 true,包 Pressable
|
||||
return (
|
||||
<Pressable onPress={onPress} style={style} className={className}>
|
||||
<IconComponent size={size} color={color} strokeWidth={strokeWidth} />
|
||||
|
||||
@@ -30,8 +30,8 @@ function isWhiteListed(url: string) {
|
||||
}
|
||||
|
||||
const alovaInstance = createAlova({
|
||||
baseURL: 'http://192.168.5.6:8086/app',
|
||||
// baseURL: 'http://192.168.1.137:8086/app',
|
||||
// baseURL: 'http://192.168.5.6:8086/app',
|
||||
baseURL: 'http://192.168.1.137:8086/app',
|
||||
requestAdapter: axiosRequestAdapter(),
|
||||
timeout: 5000,
|
||||
cacheFor: null,
|
||||
|
||||
Reference in new issue
Block a user