feat(app): 新增首页轮播图和文章详情功能
- 添加首页轮播图组件和相关 API - 实现文章详情页面和相关 API - 更新底部导航栏，支持工作台、推荐和我的三个标签页 - 移除 react-native-copilot 依赖- 调整主栈路由，支持新功能
这个提交包含在：
xuqm
父节点
7d19bba4b8
当前提交
35acc240ab
@ -14,5 +14,6 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
'react-native-worklets/plugin',
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
文件差异因一行或多行过长而隐藏
@ -28,6 +28,7 @@
|
|||||||
"@react-native-async-storage/async-storage": "^2.2.0",
|
"@react-native-async-storage/async-storage": "^2.2.0",
|
||||||
"@react-native-community/hooks": "^100.1.0",
|
"@react-native-community/hooks": "^100.1.0",
|
||||||
"@react-native/new-app-screen": "0.80.1",
|
"@react-native/new-app-screen": "0.80.1",
|
||||||
|
"@react-navigation/bottom-tabs": "^7.4.7",
|
||||||
"@react-navigation/native": "^7.1.14",
|
"@react-navigation/native": "^7.1.14",
|
||||||
"@react-navigation/stack": "^7.4.2",
|
"@react-navigation/stack": "^7.4.2",
|
||||||
"@szyx-mobile/hooks": "^1.2.0",
|
"@szyx-mobile/hooks": "^1.2.0",
|
||||||
@ -36,18 +37,22 @@
|
|||||||
"patch-package": "^8.0.0",
|
"patch-package": "^8.0.0",
|
||||||
"react": "19.1.0",
|
"react": "19.1.0",
|
||||||
"react-native": "0.80.1",
|
"react-native": "0.80.1",
|
||||||
"react-native-copilot": "^3.3.3",
|
|
||||||
"react-native-device-info": "^14.0.4",
|
"react-native-device-info": "^14.0.4",
|
||||||
"react-native-exit-app": "^2.0.0",
|
"react-native-exit-app": "^2.0.0",
|
||||||
"react-native-fs": "^2.20.0",
|
"react-native-fs": "^2.20.0",
|
||||||
"react-native-gesture-handler": "^2.27.2",
|
"react-native-gesture-handler": "^2.27.2",
|
||||||
"react-native-linear-gradient": "^2.8.3",
|
"react-native-linear-gradient": "^2.8.3",
|
||||||
|
"react-native-reanimated": "^4.1.0",
|
||||||
|
"react-native-reanimated-carousel": "^4.0.3",
|
||||||
"react-native-root-siblings": "^5.0.1",
|
"react-native-root-siblings": "^5.0.1",
|
||||||
"react-native-safe-area-context": "^5.5.2",
|
"react-native-safe-area-context": "^5.5.2",
|
||||||
"react-native-spinkit": "^1.5.1",
|
"react-native-spinkit": "^1.5.1",
|
||||||
"react-native-storage": "^1.0.1",
|
"react-native-storage": "^1.0.1",
|
||||||
|
"react-native-svg": "^15.12.1",
|
||||||
"react-native-toast-message": "^2.3.3",
|
"react-native-toast-message": "^2.3.3",
|
||||||
|
"react-native-view-shot": "^4.0.3",
|
||||||
"react-native-webview": "^13.16.0",
|
"react-native-webview": "^13.16.0",
|
||||||
|
"react-native-worklets": "^0.5.0",
|
||||||
"react-native-zip-archive": "^7.0.2"
|
"react-native-zip-archive": "^7.0.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
import { COMMONINFO_KEY, TOKEN_KEY, USERINFO_KEY } from '@common/constants';
|
import { COMMONINFO_KEY, TOKEN_KEY, USERINFO_KEY } from '@common/constants';
|
||||||
import { useCopilot } from 'react-native-copilot';
|
|
||||||
import { getAllKeys, removeAllItems } from '@common/StorageHelper.ts';
|
import { getAllKeys, removeAllItems } from '@common/StorageHelper.ts';
|
||||||
import { useAuth } from '@common/contexts/useAuth.ts';
|
import { useAuth } from '@common/contexts/useAuth.ts';
|
||||||
|
|
||||||
@ -16,8 +15,6 @@ const useLogout = (): {
|
|||||||
actions: { logout },
|
actions: { logout },
|
||||||
} = useAuth();
|
} = useAuth();
|
||||||
|
|
||||||
const { stop } = useCopilot();
|
|
||||||
|
|
||||||
const actions = useMemo(
|
const actions = useMemo(
|
||||||
() => ({
|
() => ({
|
||||||
logout: async () => {
|
logout: async () => {
|
||||||
@ -41,9 +38,6 @@ const useLogout = (): {
|
|||||||
await removeAllItems(keysToDelete);
|
await removeAllItems(keysToDelete);
|
||||||
// --- 这部分内容等旧模块不再使用后就可以删除了 ---
|
// --- 这部分内容等旧模块不再使用后就可以删除了 ---
|
||||||
|
|
||||||
stop().catch(() => {
|
|
||||||
return;
|
|
||||||
});
|
|
||||||
await logout();
|
await logout();
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
|
|||||||
@ -1,3 +1,37 @@
|
|||||||
|
import { NavigatorScreenParams } from '@react-navigation/native';
|
||||||
|
|
||||||
|
export type MainTabParamList = {
|
||||||
|
Home: undefined; // 工作台
|
||||||
|
Recommend: undefined; // 推荐
|
||||||
|
Mine: undefined; // 我的
|
||||||
|
};
|
||||||
export type MainParamList = {
|
export type MainParamList = {
|
||||||
MainView: undefined;
|
MainView: undefined;
|
||||||
|
|
||||||
|
// 【工作台】
|
||||||
|
MainTab: NavigatorScreenParams<MainTabParamList>;
|
||||||
|
// 首页文章详情
|
||||||
|
ArticleDetail: {
|
||||||
|
// 文章 id
|
||||||
|
id: string;
|
||||||
|
};
|
||||||
|
// 文章图片预览
|
||||||
|
ArticleImagePreview: {
|
||||||
|
url: string;
|
||||||
|
};
|
||||||
|
// 分享页
|
||||||
|
ArticleShare: {
|
||||||
|
// 文章名称
|
||||||
|
name: string;
|
||||||
|
// 文章 url
|
||||||
|
url: string;
|
||||||
|
// 图片
|
||||||
|
thumbImage?: string;
|
||||||
|
// 摘要
|
||||||
|
summary?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 【我的】
|
||||||
|
// 咨询客服
|
||||||
|
ContactSupport: undefined;
|
||||||
};
|
};
|
||||||
|
|||||||
@ -11,12 +11,18 @@ import {
|
|||||||
} from '@common/constants';
|
} from '@common/constants';
|
||||||
import HeaderBackImage from '@common/components/HeaderBackImage.tsx';
|
import HeaderBackImage from '@common/components/HeaderBackImage.tsx';
|
||||||
import MainViewScreen from '../screens/main/MainViewScreen';
|
import MainViewScreen from '../screens/main/MainViewScreen';
|
||||||
|
import WebViewScreen from '@common/screens/webview/WebViewScreen.tsx';
|
||||||
|
import ArticleDetailScreen from '@app/screens/home/articleDetail/ArticleDetailScreen.tsx';
|
||||||
|
import ScanScreen from '@common/screens/scan/ScanScreen.tsx';
|
||||||
|
import { CommonParamList } from '@common/router/CommonParamList.ts';
|
||||||
|
import ContactSupportScreen from '@app/screens/mine/contactSupport/ContactSupportScreen.tsx';
|
||||||
|
import ArticleShareScreen from '@app/screens/home/articleShare/ArticleShareScreen.tsx';
|
||||||
|
import MainTab from '@app/routes/MainTab.tsx';
|
||||||
|
// import ArticleImagePreviewScreen from '@app/screens/home/articleDetail/ArticleImagePreviewScreen.tsx';
|
||||||
|
|
||||||
const Stack = createStackNavigator<MainParamList>();
|
const Stack = createStackNavigator<MainParamList & CommonParamList>();
|
||||||
|
|
||||||
export function MainStack() {
|
export function MainStack() {
|
||||||
// const navigation = useNavigation<NavigationProp<MainParamList>>();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack.Navigator
|
<Stack.Navigator
|
||||||
screenOptions={{
|
screenOptions={{
|
||||||
@ -29,14 +35,22 @@ export function MainStack() {
|
|||||||
},
|
},
|
||||||
headerBackImage: HeaderBackImage,
|
headerBackImage: HeaderBackImage,
|
||||||
}}
|
}}
|
||||||
initialRouteName="MainView"
|
initialRouteName="MainTab"
|
||||||
>
|
>
|
||||||
<Stack.Group
|
<Stack.Group
|
||||||
screenOptions={{
|
screenOptions={{
|
||||||
...TransitionPresets.SlideFromRightIOS,
|
...TransitionPresets.SlideFromRightIOS,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<Stack.Screen
|
||||||
|
name="MainTab"
|
||||||
|
component={MainTab}
|
||||||
|
options={{headerShown: false}}
|
||||||
|
/>
|
||||||
<Stack.Screen name="MainView" component={MainViewScreen} />
|
<Stack.Screen name="MainView" component={MainViewScreen} />
|
||||||
|
<Stack.Screen name="WebView" component={WebViewScreen} />
|
||||||
|
<Stack.Screen name="ArticleDetail" component={ArticleDetailScreen} />
|
||||||
|
<Stack.Screen name="Scan" component={ScanScreen} />
|
||||||
{/* 普通栈路由 --> 写这里 */}
|
{/* 普通栈路由 --> 写这里 */}
|
||||||
</Stack.Group>
|
</Stack.Group>
|
||||||
<Stack.Group
|
<Stack.Group
|
||||||
@ -46,6 +60,12 @@ export function MainStack() {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* 对话框形式路由 --> 写这里 */}
|
{/* 对话框形式路由 --> 写这里 */}
|
||||||
|
<Stack.Screen name="ContactSupport" component={ContactSupportScreen} />
|
||||||
|
{/*<Stack.Screen*/}
|
||||||
|
{/* name="ArticleImagePreview"*/}
|
||||||
|
{/* component={ArticleImagePreviewScreen}*/}
|
||||||
|
{/*/>*/}
|
||||||
|
<Stack.Screen name="ArticleShare" component={ArticleShareScreen} />
|
||||||
</Stack.Group>
|
</Stack.Group>
|
||||||
</Stack.Navigator>
|
</Stack.Navigator>
|
||||||
);
|
);
|
||||||
|
|||||||
175
src/app/routes/MainTab.tsx
普通文件
175
src/app/routes/MainTab.tsx
普通文件
@ -0,0 +1,175 @@
|
|||||||
|
import React, { useCallback, useEffect, useState } from 'react';
|
||||||
|
import { DeviceEventEmitter, ImageSourcePropType } from 'react-native';
|
||||||
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
||||||
|
import {
|
||||||
|
DEVICE_ENENT_UPDATE_HOME_FEATURE_LIST_KEY,
|
||||||
|
HEADER_TINT_COLOR,
|
||||||
|
HEADER_TITLE_FONT_SIZE,
|
||||||
|
HEADER_TITLE_FONT_WEIGHT,
|
||||||
|
TAB_BAR_ACTIVE_TINT_COLOR,
|
||||||
|
TAB_BAR_INACTIVE_TINT_COLOR,
|
||||||
|
} from '@common//constants';
|
||||||
|
import { useAuth } from '@common/contexts/useAuth';
|
||||||
|
import { MainTabParamList } from './MainParamList';
|
||||||
|
import HomeScreen from '@app/screens/home/home/HomeScreen';
|
||||||
|
import MineScreen from '@app/screens/mine/mine/MineScreen';
|
||||||
|
import { Feature } from '@app/screens/home/home/api';
|
||||||
|
import { useHandleClickFeatureListItem } from '@app/screens/home/home/hooks/useHandleClickFeatureListItem';
|
||||||
|
import TabBarIcon from '@common/components/TabBarIcon.tsx';
|
||||||
|
|
||||||
|
const Tab = createBottomTabNavigator<MainTabParamList>();
|
||||||
|
|
||||||
|
export default function MainTab() {
|
||||||
|
const {
|
||||||
|
state: { userInfo },
|
||||||
|
} = useAuth();
|
||||||
|
|
||||||
|
// 【状态】
|
||||||
|
|
||||||
|
const [recommendFeature, setRecommendFeature] = useState<Feature | undefined>(
|
||||||
|
undefined,
|
||||||
|
); // 当前推荐的服务
|
||||||
|
|
||||||
|
// 【通知监听】
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// 监听用户信息的更新
|
||||||
|
const listener = DeviceEventEmitter.addListener(
|
||||||
|
DEVICE_ENENT_UPDATE_HOME_FEATURE_LIST_KEY,
|
||||||
|
(feature?: Feature) => {
|
||||||
|
setRecommendFeature(feature);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
listener.remove();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 【点击事件】
|
||||||
|
const { handleClickFeatureListItem } = useHandleClickFeatureListItem();
|
||||||
|
|
||||||
|
// 【子组件】
|
||||||
|
|
||||||
|
const handleTabBarIcon = useCallback(
|
||||||
|
(props: {
|
||||||
|
focused: boolean;
|
||||||
|
size: number;
|
||||||
|
activeImage: ImageSourcePropType;
|
||||||
|
inactiveImage: ImageSourcePropType;
|
||||||
|
badge?: boolean;
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<MainTabBarIcon
|
||||||
|
focused={props.focused}
|
||||||
|
size={props.size}
|
||||||
|
activeImage={props.activeImage}
|
||||||
|
inactiveImage={props.inactiveImage}
|
||||||
|
badge={props.badge}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
|
if (userInfo === undefined) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tab.Navigator
|
||||||
|
screenOptions={{
|
||||||
|
lazy: false, // 关闭懒加载
|
||||||
|
headerTitleAlign: 'center', // 安卓标题居中
|
||||||
|
tabBarActiveTintColor: TAB_BAR_ACTIVE_TINT_COLOR,
|
||||||
|
tabBarInactiveTintColor: TAB_BAR_INACTIVE_TINT_COLOR,
|
||||||
|
headerShadowVisible: false,
|
||||||
|
headerTintColor: HEADER_TINT_COLOR,
|
||||||
|
headerTitleStyle: {
|
||||||
|
fontSize: HEADER_TITLE_FONT_SIZE,
|
||||||
|
fontWeight: HEADER_TITLE_FONT_WEIGHT,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Tab.Screen
|
||||||
|
name="Home"
|
||||||
|
component={HomeScreen}
|
||||||
|
options={{
|
||||||
|
title: '工作台',
|
||||||
|
tabBarIcon: ({ focused, size }) => {
|
||||||
|
return handleTabBarIcon({
|
||||||
|
focused: focused,
|
||||||
|
size: size,
|
||||||
|
activeImage: require('@app/assets/images/common/tab_home_s.png'),
|
||||||
|
inactiveImage: require('@app/assets/images/common/tab_home.png'),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{recommendFeature && (
|
||||||
|
<Tab.Screen
|
||||||
|
name="Recommend"
|
||||||
|
component={RecommendScreen}
|
||||||
|
options={{
|
||||||
|
title: recommendFeature.name,
|
||||||
|
tabBarIcon: ({ focused, size }) => {
|
||||||
|
return handleTabBarIcon({
|
||||||
|
focused: focused,
|
||||||
|
size: size,
|
||||||
|
activeImage: require('@app/assets/images/common/tab_recommend.png'),
|
||||||
|
inactiveImage: require('@app/assets/images/common/tab_recommend.png'),
|
||||||
|
badge: recommendFeature.badge,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
listeners={{
|
||||||
|
tabPress: e => {
|
||||||
|
e.preventDefault(); // 阻止默认行为
|
||||||
|
handleClickFeatureListItem(recommendFeature);
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<Tab.Screen
|
||||||
|
name="Mine"
|
||||||
|
component={MineScreen}
|
||||||
|
options={{
|
||||||
|
title: '我的',
|
||||||
|
tabBarIcon: ({ focused, size }) => {
|
||||||
|
return handleTabBarIcon({
|
||||||
|
focused: focused,
|
||||||
|
size: size,
|
||||||
|
activeImage: require('@app/assets/images/common/tab_mine_s.png'),
|
||||||
|
inactiveImage: require('@app/assets/images/common/tab_mine.png'),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tab.Navigator>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function RecommendScreen() {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图标
|
||||||
|
function MainTabBarIcon(props: {
|
||||||
|
focused: boolean;
|
||||||
|
size: number;
|
||||||
|
inactiveImage: ImageSourcePropType;
|
||||||
|
activeImage: ImageSourcePropType;
|
||||||
|
badge?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<TabBarIcon
|
||||||
|
focused={props.focused}
|
||||||
|
size={props.size}
|
||||||
|
activeImage={props.activeImage}
|
||||||
|
inactiveImage={props.inactiveImage}
|
||||||
|
// activeTintColor={TAB_BAR_ACTIVE_TINT_COLOR}
|
||||||
|
inactiveTintColor={TAB_BAR_INACTIVE_TINT_COLOR}
|
||||||
|
badge={props.badge}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
1
src/app/screens/api/index.ts
普通文件
1
src/app/screens/api/index.ts
普通文件
@ -0,0 +1 @@
|
|||||||
|
export * from './useBannerList';
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
import {useApi} from '@common/api/useApi';
|
||||||
|
import {z} from 'zod';
|
||||||
|
|
||||||
|
// 精品服务功能块
|
||||||
|
const featureSchema = z.object({
|
||||||
|
uniqueId: z.string(), // 功能 id
|
||||||
|
name: z.string(), // 功能名称
|
||||||
|
icon: z.string().optional(), // 图标
|
||||||
|
link: z.string(), // 链接 http/https链接、ywxApp://TeamIndexView
|
||||||
|
recommend: z.boolean().optional().default(false), // 是否是主推功能
|
||||||
|
advertisePic: z.string().optional(), // 广告图
|
||||||
|
phone: z.string().optional().default(''), // 电话
|
||||||
|
allowApply: z.boolean().optional().default(false), // 是否允许体验
|
||||||
|
subscribeType: z.number().optional(), // 订阅类型 0免费订阅 1厂商订阅 2用户订阅
|
||||||
|
|
||||||
|
badge: z.boolean().optional().default(false), // 注：当前接口没有这个字段，但是会根据 /am/v1/subServer/cornerTag 接口给该模型拼接上该字段，故这里添加一个可选字段并默认为false
|
||||||
|
});
|
||||||
|
|
||||||
|
const bannerSchema = z.object({
|
||||||
|
id: z.string().optional().default(''), // id
|
||||||
|
imgUrl: z.string().url(), // 图片
|
||||||
|
jumpType: z.enum(['noSkip', 'link', 'activity', 'miniApp', 'hotNews']), // 轮播图跳转类型 noSkip无跳转 link链接跳转 activity活动跳转 miniApp应用跳转 hotNews 热点推荐
|
||||||
|
skipUrl: z.string().optional(), // jumpType 为 'link' 时的跳转链接
|
||||||
|
activityInfo: z.unknown(), // jumpType 为 'activity' 时的活动信息 这里暂时是 z.unknown() 直接带到旧模块
|
||||||
|
miniAppInfo: featureSchema.optional(), // jumpType 为 'miniApp' 时的活动信息 这里和精品服务那里的模型是一致的
|
||||||
|
articleId: z.string().optional(), // jumpType 为 'hotNews' 时的文章id
|
||||||
|
});
|
||||||
|
|
||||||
|
type Banner = z.infer<typeof bannerSchema>;
|
||||||
|
type Feature = z.infer<typeof featureSchema>;
|
||||||
|
|
||||||
|
const bannersSchema = z.array(bannerSchema).optional().default([]);
|
||||||
|
|
||||||
|
// 首页轮播图
|
||||||
|
// {"data":[{"clientId":"","collection":"app_banner","createTime":"2024-08-21 13:45:05","id":"{\"$oid\":\"66c57ee1986acc69b1dab1ee\"}","imgUrl":"https://tms-dev.oss-cn-beijing.aliyuncs.com/banner/headimg_0687ad243ffe43498e1bac2c16f47181.png","jumpType":"noSkip","linkType":"","skipUrl":"","sortNum":1,"title":"1234"},{"activityId":"c41d2fc4743f4093b0f7a0a49f81bc8f","activityInfo":{"activityId":"c41d2fc4743f4093b0f7a0a49f81bc8f","activityName":"活动99","activityPageImgUrl":"https://tms-dev.oss-cn-beijing.aliyuncs.com/banner/headimg_5f5f5918693d45369cdc8b1bbec48698.jpg","activityPrice":0,"activityPriceWithYuan":"0","activityWindowImgUrl":"https://tms-dev.oss-cn-beijing.aliyuncs.com/banner/headimg_022c001bbc444cd58304c7ff4cf4cc2c.jpg","activityfloatImgUrl":"https://tms-dev.oss-cn-beijing.aliyuncs.com/banner/headimg_10efc2e99e93468fb50404eb74370d91.png","collection":"app_activity","commodityTime":30,"createTime":"2022-03-26 16:57:04","del":0,"endTime":"2022-06-09 00:00:00","explain":"ok","id":"{\"$oid\":\"623ed560986acc03223d186d\"}","minAppVersion":"99","nSId":"012","price":100,"priceWithYuan":"1","startTime":"2022-03-26 00:00:00","templateId":"02fceff4348541f280f06b338b6349e1","updateTime":"2022-05-31 17:17:49"},"clientId":"","collection":"app_banner","createTime":"2024-08-21 13:45:05","id":"{\"$oid\":\"66c57ee1986acc69b1dab1ef\"}","imgUrl":"https://tms-dev.oss-cn-beijing.aliyuncs.com/banner/headimg_0c39dbf709304a5ca347a9cb1b2f8894.png","jumpType":"activity","linkType":"","skipUrl":"","sortNum":2,"title":"测试1"},{"clientId":"","collection":"app_banner","createTime":"2024-08-21 13:45:05","id":"{\"$oid\":\"66c57ee1986acc69b1dab1f0\"}","imgUrl":"https://tms-dev.oss-cn-beijing.aliyuncs.com/banner/headimg_bda974c012b844d9878b05b0e134849d.png","jumpType":"link","linkType":"https://","skipUrl":"https://dev.51trust.com/ketang/index.html?appId=Y_T_A2411062250","sortNum":3,"title":"医信课堂"},{"clientId":"","collection":"app_banner","createTime":"2024-08-21 13:45:05","id":"{\"$oid\":\"66c57ee1986acc69b1dab1f1\"}","imgUrl":"https://tms-dev.oss-cn-beijing.aliyuncs.com/banner/headimg_b5fa8ec8dc8c4326b45fb04c3f5c7969.jpg","jumpType":"link","linkType":"https://","skipUrl":"https://https://blog.csdn.net/kl222/article/details/84939135?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-84939135-blog-115694803.235^v43^pc_blog_bottom_relevance_base7&spm=1001.2101.3001.4242.1&utm_relevant_index=3","sortNum":4,"title":"掌上病历介绍"},{"clientId":"","collection":"app_banner","createTime":"2024-08-21 13:45:05","id":"{\"$oid\":\"66c57ee1986acc69b1dab1f2\"}","imgUrl":"https://tms-dev.oss-cn-beijing.aliyuncs.com/banner/headimg_a18ebcce9d2446c88e12c6675f02a5f9.jpg","jumpType":"miniApp","linkType":"","miniAppInfo":{"advertisePic":"https://tms-dev.oss-cn-beijing.aliyuncs.com/doctorHelper/advertPic_Y_T_A2310053073.png","allowApply":true,"cornerTagUrl":"","createTime":"2023-08-30 10:37:06","icon":"https://tms-dev.oss-cn-beijing.aliyuncs.com/doctorHelper/docIcon_Y_T_A2310053073.png","link":"ywxApp://FollowUpCenter","name":"随访中心","note":"随访中心","phone":"18811061787","recommend":true,"serviceType":4,"sort":0,"status":1,"subscribeType":1,"uniqueId":"Y_T_A2310053073","updateTime":"2024-08-30 15:15:32"},"nsId":"Y_T_A2310053073","skipUrl":"","sortNum":5,"title":"标题"},{"articleId":"2","clientId":"","collection":"app_banner","createTime":"2024-08-21 13:45:05","id":"{\"$oid\":\"66c57ee1986acc69b1dab1f3\"}","imgUrl":"https://tms-dev.oss-cn-beijing.aliyuncs.com/banner/headimg_e26da466ca454f0592321fa7df1c18be.png","jumpType":"noSkip","linkType":"","skipUrl":"","sortNum":6,"title":"标题"}],"message":"success","status":"0"}
|
||||||
|
const useBannerList = () => {
|
||||||
|
return useApi('/am/v3/banner/list', 'GET', {}, bannersSchema, {
|
||||||
|
automatic: true,
|
||||||
|
loadingDelay: 500,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export type {Banner, Feature};
|
||||||
|
export {useBannerList};
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
import React, {useState} from 'react';
|
||||||
|
import {Image, StyleSheet, TouchableOpacity, View} from 'react-native';
|
||||||
|
import Carousel from 'react-native-reanimated-carousel';
|
||||||
|
|
||||||
|
const CAROUSEL_ASPECT_RATIO = 350 / 80; // 轮播图宽高比
|
||||||
|
const INDEX_BACKGROUND_CURRENT = '#FFFFFF';
|
||||||
|
const INDEX_BACKGROUND = 'rgba(255, 255, 255, 0.6)';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
width: number; // 轮播图宽度
|
||||||
|
data: {imgUrl: string}[]; // 数据的数组
|
||||||
|
onPress?: (index: number) => void; // 点击事件
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 首页轮播图
|
||||||
|
*/
|
||||||
|
export default function HomeCarousel(props: Props) {
|
||||||
|
const [currentIndex, setCurrentIndex] = useState(0);
|
||||||
|
return (
|
||||||
|
<View>
|
||||||
|
<Carousel
|
||||||
|
style={styles.carousel}
|
||||||
|
loop
|
||||||
|
width={props.width}
|
||||||
|
height={props.width / CAROUSEL_ASPECT_RATIO}
|
||||||
|
autoPlay={true}
|
||||||
|
data={props.data}
|
||||||
|
scrollAnimationDuration={3000}
|
||||||
|
onScrollEnd={index => {
|
||||||
|
setCurrentIndex(index);
|
||||||
|
}}
|
||||||
|
renderItem={({index}) => {
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => {
|
||||||
|
props.onPress && props.onPress(index);
|
||||||
|
}}>
|
||||||
|
<Image
|
||||||
|
style={{
|
||||||
|
width: props.width,
|
||||||
|
height: props.width / CAROUSEL_ASPECT_RATIO,
|
||||||
|
}}
|
||||||
|
source={{uri: props.data[index].imgUrl}}
|
||||||
|
/>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<View style={styles.indexView}>
|
||||||
|
<View style={styles.indexContent}>
|
||||||
|
{props.data.map((_item, index) => {
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
key={index}
|
||||||
|
style={[
|
||||||
|
styles.indexItem,
|
||||||
|
{
|
||||||
|
backgroundColor:
|
||||||
|
currentIndex === index
|
||||||
|
? INDEX_BACKGROUND_CURRENT
|
||||||
|
: INDEX_BACKGROUND,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
carousel: {
|
||||||
|
borderRadius: 10,
|
||||||
|
backgroundColor: '#FFFFFF',
|
||||||
|
},
|
||||||
|
indexView: {
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
height: 7.5,
|
||||||
|
},
|
||||||
|
indexContent: {
|
||||||
|
flex: 1,
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
indexItem: {
|
||||||
|
flexShrink: 1,
|
||||||
|
width: 7.5,
|
||||||
|
height: 2.5,
|
||||||
|
marginHorizontal: 1.5,
|
||||||
|
borderRadius: 2,
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1,326 @@
|
|||||||
|
import React, { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
|
||||||
|
import {
|
||||||
|
ActivityIndicator,
|
||||||
|
DeviceEventEmitter,
|
||||||
|
Image,
|
||||||
|
StyleSheet,
|
||||||
|
TouchableOpacity,
|
||||||
|
View,
|
||||||
|
} from 'react-native';
|
||||||
|
import { StackScreenProps } from '@react-navigation/stack';
|
||||||
|
import WebView from 'react-native-webview';
|
||||||
|
import Spinner from '@common/components/Spinner';
|
||||||
|
import DataEmpty from '@common/components/DataEmpty';
|
||||||
|
import { MainParamList } from '@app/routes/MainParamList';
|
||||||
|
import { useArticleDetail } from './api';
|
||||||
|
import { useAuth } from '@common/contexts/useAuth';
|
||||||
|
import { useSubServerCheck } from '../home/api';
|
||||||
|
import { showErrorMessage, showMessage } from '@common/ToastHelper.ts';
|
||||||
|
|
||||||
|
type Props = StackScreenProps<MainParamList, 'ArticleDetail'>;
|
||||||
|
|
||||||
|
// 服务协议/隐私声明页面
|
||||||
|
export default function ArticleDetailScreen(props: Props) {
|
||||||
|
const { navigation, route } = props;
|
||||||
|
|
||||||
|
const {
|
||||||
|
state: { userInfo },
|
||||||
|
} = useAuth();
|
||||||
|
// const { width } = useWindowDimensions();
|
||||||
|
//
|
||||||
|
// const [visible, setVisible] = useState(false); // 预览视图是否可见
|
||||||
|
// const [imgUrl, setImgUrl] = useState(undefined); // 预览视图是否可见
|
||||||
|
//
|
||||||
|
// const [adKey, setAdKey] = useState<string | undefined>(undefined);
|
||||||
|
|
||||||
|
|
||||||
|
// 获取协议内容接口
|
||||||
|
const { response, error, loading, fetch } = useArticleDetail(route.params.id);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch();
|
||||||
|
}, [fetch]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (error && error.type !== 'Cancel') {
|
||||||
|
showErrorMessage(error.message);
|
||||||
|
}
|
||||||
|
}, [error]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const listener = DeviceEventEmitter.addListener(
|
||||||
|
'WeChat_Resp',
|
||||||
|
(resp?: any) => {
|
||||||
|
if (resp.type === 'SendMessageToWX.Resp' && resp.errCode === 0) {
|
||||||
|
showMessage('分享成功');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
listener.remove();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const { loading: subServerCheckLoading, fetchAsync: subServerCheckFetch } =
|
||||||
|
useSubServerCheck();
|
||||||
|
|
||||||
|
// 导航栏右侧按钮
|
||||||
|
const HeaderRight = useCallback(() => {
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.headerRight}
|
||||||
|
onPress={() => {
|
||||||
|
if (response !== undefined) {
|
||||||
|
if (
|
||||||
|
response.shareUrl === undefined ||
|
||||||
|
response.shareUrl.length === 0
|
||||||
|
) {
|
||||||
|
showErrorMessage('文章没有分享链接');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
navigation.navigate('ArticleShare', {
|
||||||
|
name: response.title,
|
||||||
|
url: response.shareUrl,
|
||||||
|
summary: response.summary,
|
||||||
|
// thumbImage: Image.resolveAssetSource(
|
||||||
|
// // eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||||
|
// require('@app/assets/images/common/common_appicon.png'),
|
||||||
|
// ).uri,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
style={styles.headerRightImage}
|
||||||
|
source={require('@app/assets/images/home/home_share.png')}
|
||||||
|
/>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
}, [navigation, response]);
|
||||||
|
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
navigation.setOptions({
|
||||||
|
title: '热点资讯',
|
||||||
|
headerRight: HeaderRight,
|
||||||
|
});
|
||||||
|
}, [HeaderRight, navigation]);
|
||||||
|
|
||||||
|
const webViewRef = useRef<WebView>(null);
|
||||||
|
|
||||||
|
const onMessage = (event: any) => {
|
||||||
|
// 1 {\"appId\":\"101\",\"model\":\"init\",\"functionId\":\"4d349822-b5ee-48b8-8642-b1f92da7f2b1\"}
|
||||||
|
// 2 {\"model\":\"isYwxApp\",\"functionId\":\"39ad7558-b9e2-4950-b1fe-1bc6a8084f37\",\"appId\":\"101\"}
|
||||||
|
// 3 {\"model\":\"userInfo\",\"functionId\":\"329b5484-943e-4c23-85ed-9f0b497787cd\",\"appId\":\"101\"}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(event.nativeEvent.data);
|
||||||
|
if (data.type === 'imagePreview') {
|
||||||
|
// setVisible(true);
|
||||||
|
// setImgUrl(data.url);
|
||||||
|
// console.log('>>>>>>', data.url);
|
||||||
|
navigation.navigate('ArticleImagePreview', { url: data.url });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.appId || data.model === 'isYwxApp') {
|
||||||
|
if (data.model === 'init') {
|
||||||
|
// {"model":"init","functionId":"8769e533-2645-487b-9d84-80c98e384e05","value":{"appId":"101","openId":"eb4a3ec98d540c99q8834w68b8y9810068f"},"status":"0","message":"init:ok"}
|
||||||
|
const obj = {
|
||||||
|
model: data.model,
|
||||||
|
functionId: data.functionId,
|
||||||
|
value: {
|
||||||
|
appId: data.appId,
|
||||||
|
openId: getOpenIdByUserId(userInfo?.userId ?? ''),
|
||||||
|
},
|
||||||
|
status: '0',
|
||||||
|
message: `${data.model}:ok`,
|
||||||
|
};
|
||||||
|
const responseStr = JSON.stringify(obj);
|
||||||
|
const jsString = `(function() {window.SZYX_YWX_WebViewBridge && window.SZYX_YWX_WebViewBridge.onMessage(${responseStr});})()`;
|
||||||
|
webViewRef.current?.injectJavaScript(jsString);
|
||||||
|
} else if (data.model === 'isYwxApp') {
|
||||||
|
// {"model":"isYwxApp","functionId":"d54f705d-801a-42f7-ae07-64f30c616dc7","value":{"isYwxApp":true},"status":"0","message":"isYwxApp:ok"}
|
||||||
|
const obj = {
|
||||||
|
model: data.model,
|
||||||
|
functionId: data.functionId,
|
||||||
|
value: {
|
||||||
|
isYwxApp: true,
|
||||||
|
},
|
||||||
|
status: '0',
|
||||||
|
message: `${data.model}:ok`,
|
||||||
|
};
|
||||||
|
const responseStr = JSON.stringify(obj);
|
||||||
|
const jsString = `(function() {window.SZYX_YWX_WebViewBridge && window.SZYX_YWX_WebViewBridge.onMessage(${responseStr});})()`;
|
||||||
|
webViewRef.current?.injectJavaScript(jsString);
|
||||||
|
} else if (data.model === 'userInfo') {
|
||||||
|
// {"model":"userInfo","functionId":"8b41c37f-06dc-4de0-8959-0caa1dee90c9","value":{"openId":"eb4a3ec98d540c99q8834w68b8y9810068f","userName":"邓文龙","nickname":"邓文龙","clientList":[{"clientId":"2019022814080064","clientName":"医网信beta联调"}]},"status":"0","message":"userInfo:ok"}
|
||||||
|
subServerCheckFetch({
|
||||||
|
data: {
|
||||||
|
nsId: data.appId,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
const clientList = res.clientList;
|
||||||
|
const list: {
|
||||||
|
clientId: string;
|
||||||
|
clientName: string;
|
||||||
|
}[] = [];
|
||||||
|
clientList.map(value => {
|
||||||
|
if (value.subscribeStatus === 'serving') {
|
||||||
|
list.push({
|
||||||
|
clientId: value.clientId,
|
||||||
|
clientName: value.clientName,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const responseData = {
|
||||||
|
openId: getOpenIdByUserId(userInfo?.userId ?? ''),
|
||||||
|
userName: userInfo?.nickname,
|
||||||
|
nickname: userInfo?.nickname,
|
||||||
|
clientList: list,
|
||||||
|
};
|
||||||
|
const obj = {
|
||||||
|
model: data.model,
|
||||||
|
functionId: data.functionId,
|
||||||
|
value: responseData,
|
||||||
|
status: '0',
|
||||||
|
message: `${data.model}:ok`,
|
||||||
|
};
|
||||||
|
const responseStr = JSON.stringify(obj);
|
||||||
|
const jsString = `(function() {window.SZYX_YWX_WebViewBridge && window.SZYX_YWX_WebViewBridge.onMessage(${responseStr});})()`;
|
||||||
|
webViewRef.current?.injectJavaScript(jsString);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
return;
|
||||||
|
});
|
||||||
|
} else if (data.model === 'closeWindows') {
|
||||||
|
// {\"model\":\"closeWindows\",\"functionId\":\"5c9f2161-1506-42f4-b5ec-8aa4742a038c\",\"appId\":\"101\"}
|
||||||
|
navigation.pop();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <Spinner />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!response) {
|
||||||
|
return (
|
||||||
|
<DataEmpty
|
||||||
|
reload={() => {
|
||||||
|
fetch();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<WebView
|
||||||
|
ref={webViewRef}
|
||||||
|
style={styles.webview}
|
||||||
|
onMessage={onMessage}
|
||||||
|
onLoadEnd={() => {
|
||||||
|
// 移动端展示默认表格的时候，边框默认是不展示的，这里注入样式代码将表格每个单元格的边框展示出来
|
||||||
|
const injectStyles = `
|
||||||
|
var cells = document.querySelectorAll('table td, table th');
|
||||||
|
cells.forEach(function(cell) {
|
||||||
|
cell.style.border = '1px solid #000000';
|
||||||
|
cell.style.padding = '4px';
|
||||||
|
});
|
||||||
|
`;
|
||||||
|
webViewRef.current?.injectJavaScript(injectStyles);
|
||||||
|
}}
|
||||||
|
originWhitelist={['*']}
|
||||||
|
dataDetectorTypes={'none'}
|
||||||
|
// 增加了禁止缩放，图片宽度不超过屏幕宽度
|
||||||
|
source={{
|
||||||
|
html: `<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||||
|
<style>
|
||||||
|
body { font-size: 16px; line-height: 1.6; padding: 10px; overflow-x: hidden; }
|
||||||
|
img { max-width: 100%; height: auto; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h3>${response.title}</h3><p style="color:#666666;">${
|
||||||
|
response.publishTime ?? ''
|
||||||
|
}</p>${response.content}
|
||||||
|
<script>
|
||||||
|
document.querySelectorAll("img").forEach(img => {
|
||||||
|
img.addEventListener("click", () => {
|
||||||
|
console.log(">>>>>>>>>>>>>>", img.src);
|
||||||
|
window.ReactNativeWebView.postMessage(JSON.stringify({ type: "imagePreview", url: img.src }));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>`,
|
||||||
|
}}
|
||||||
|
javaScriptEnabled={true}
|
||||||
|
startInLoadingState={true}
|
||||||
|
scalesPageToFit={false}
|
||||||
|
renderLoading={() => {
|
||||||
|
return (
|
||||||
|
<ActivityIndicator
|
||||||
|
style={styles.activityIndicator}
|
||||||
|
color="#3296f6"
|
||||||
|
size="large"
|
||||||
|
animating={true}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/*<ImageView*/}
|
||||||
|
{/* navigation={navigation}*/}
|
||||||
|
{/* images={[{ uri: imgUrl }]}*/}
|
||||||
|
{/* imageIndex={0}*/}
|
||||||
|
{/* visible={visible}*/}
|
||||||
|
{/* onRequestClose={() => setVisible(false)}*/}
|
||||||
|
{/*/>*/}
|
||||||
|
{subServerCheckLoading && <Spinner />}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getOpenIdByUserId(userId: string) {
|
||||||
|
if (userId) {
|
||||||
|
const array = userId.split('');
|
||||||
|
array.splice(8, 0, ['y', 'w', 'q'][0]);
|
||||||
|
array.splice(13, 0, ['y', 'w', 'q'][1]);
|
||||||
|
array.splice(18, 0, ['y', 'w', 'q'][2]);
|
||||||
|
array.reverse();
|
||||||
|
const openId = array.join('');
|
||||||
|
return openId;
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
headerRight: {
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
headerRightImage: {
|
||||||
|
height: 15,
|
||||||
|
width: 15,
|
||||||
|
},
|
||||||
|
webview: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
activityIndicator: {
|
||||||
|
position: 'absolute',
|
||||||
|
alignSelf: 'center',
|
||||||
|
top: 100,
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export * from './useArticleDetail';
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import {useApi} from '@common/api/useApi.ts';
|
||||||
|
import {z} from 'zod';
|
||||||
|
|
||||||
|
const articleSchema = z.object({
|
||||||
|
content: z.string({
|
||||||
|
required_error: '文章内容不存在',
|
||||||
|
invalid_type_error: '文章内容类型错误',
|
||||||
|
}), // 文章内容
|
||||||
|
title: z.string(), // 文章标题
|
||||||
|
publishTime: z.string().optional(), // 发布时间
|
||||||
|
coverImgUrl: z.string().optional(), // 封面图
|
||||||
|
shareUrl: z.string().optional(), // 分享链接
|
||||||
|
summary: z.string().optional(), // 摘要
|
||||||
|
});
|
||||||
|
|
||||||
|
// 首页文章详情
|
||||||
|
const useArticleDetail = (id: string) => {
|
||||||
|
return useApi(
|
||||||
|
'/am/v3/hotnews/article/detail',
|
||||||
|
'GET',
|
||||||
|
{
|
||||||
|
id: id,
|
||||||
|
},
|
||||||
|
articleSchema,
|
||||||
|
{},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export {useArticleDetail};
|
||||||
@ -0,0 +1,154 @@
|
|||||||
|
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
|
||||||
|
import {
|
||||||
|
Animated,
|
||||||
|
Image,
|
||||||
|
Pressable,
|
||||||
|
StyleSheet,
|
||||||
|
Text,
|
||||||
|
TouchableOpacity,
|
||||||
|
View,
|
||||||
|
} from 'react-native';
|
||||||
|
import { StackScreenProps } from '@react-navigation/stack';
|
||||||
|
import { MainParamList } from '@app/routes/MainParamList';
|
||||||
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
|
import Separator from '@common/components/Separator';
|
||||||
|
|
||||||
|
const CONTENT_HEIGHT = 200; // 卡片高度
|
||||||
|
const DURATION = 300; // 弹出和收起的时间
|
||||||
|
|
||||||
|
type Props = StackScreenProps<MainParamList, 'ArticleShare'>;
|
||||||
|
|
||||||
|
// 分享弹窗页
|
||||||
|
export default function ArticleShareScreen(props: Props) {
|
||||||
|
const { navigation, route } = props;
|
||||||
|
const safeAreaInsets = useSafeAreaInsets();
|
||||||
|
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
navigation.setOptions({
|
||||||
|
title: '',
|
||||||
|
});
|
||||||
|
}, [navigation]);
|
||||||
|
|
||||||
|
const bottom = useRef(
|
||||||
|
new Animated.Value(-CONTENT_HEIGHT - safeAreaInsets.bottom),
|
||||||
|
);
|
||||||
|
|
||||||
|
const [shown, setShown] = useState<boolean>(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (shown === true) {
|
||||||
|
Animated.timing(bottom.current, {
|
||||||
|
toValue: 0,
|
||||||
|
duration: DURATION,
|
||||||
|
useNativeDriver: false,
|
||||||
|
}).start();
|
||||||
|
} else {
|
||||||
|
Animated.timing(bottom.current, {
|
||||||
|
toValue: -CONTENT_HEIGHT - safeAreaInsets.bottom,
|
||||||
|
duration: DURATION,
|
||||||
|
useNativeDriver: false,
|
||||||
|
}).start(() => {
|
||||||
|
navigation.pop();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [navigation, safeAreaInsets.bottom, shown]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<Pressable
|
||||||
|
style={[StyleSheet.absoluteFill, styles.background]}
|
||||||
|
onPress={() => {
|
||||||
|
setShown(false);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Animated.View
|
||||||
|
style={[
|
||||||
|
styles.animated,
|
||||||
|
{
|
||||||
|
height: CONTENT_HEIGHT + safeAreaInsets.bottom,
|
||||||
|
bottom: bottom.current,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<View style={styles.content}>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.contentButton}
|
||||||
|
onPress={() => {
|
||||||
|
setShown(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
style={styles.buttonImage}
|
||||||
|
source={require('@app/assets/images/common/common_share_session.png')}
|
||||||
|
/>
|
||||||
|
<Text style={styles.buttonText}>微信</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.contentButton}
|
||||||
|
onPress={() => {
|
||||||
|
setShown(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
style={styles.buttonImage}
|
||||||
|
source={require('@app/assets/images/common/common_share_timeline.png')}
|
||||||
|
/>
|
||||||
|
<Text style={styles.buttonText}>朋友圈</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
<Separator />
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.bottomButton}
|
||||||
|
onPress={() => {
|
||||||
|
setShown(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text style={styles.bottomButtonText}>取消</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</Animated.View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
},
|
||||||
|
background: {
|
||||||
|
backgroundColor: 'rgba(21, 20, 35, 0.6)',
|
||||||
|
},
|
||||||
|
animated: {
|
||||||
|
backgroundColor: '#FFFFFF',
|
||||||
|
borderTopLeftRadius: 13,
|
||||||
|
borderTopRightRadius: 13,
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
height: 120,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-evenly',
|
||||||
|
},
|
||||||
|
contentButton: {
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
buttonImage: {
|
||||||
|
width: 58,
|
||||||
|
height: 58,
|
||||||
|
},
|
||||||
|
buttonText: {
|
||||||
|
marginTop: 4,
|
||||||
|
color: '#242424',
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
bottomButton: {
|
||||||
|
flex: 1,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
bottomButtonText: {
|
||||||
|
color: '#242424',
|
||||||
|
fontWeight: '600',
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1,604 @@
|
|||||||
|
import React, {
|
||||||
|
useCallback,
|
||||||
|
useEffect,
|
||||||
|
useLayoutEffect,
|
||||||
|
useMemo,
|
||||||
|
useState,
|
||||||
|
} from 'react';
|
||||||
|
import {
|
||||||
|
DeviceEventEmitter,
|
||||||
|
FlatList,
|
||||||
|
Image,
|
||||||
|
NativeScrollPoint,
|
||||||
|
RefreshControl,
|
||||||
|
SafeAreaView,
|
||||||
|
StyleSheet,
|
||||||
|
Text,
|
||||||
|
useWindowDimensions,
|
||||||
|
View,
|
||||||
|
} from 'react-native';
|
||||||
|
import { CompositeScreenProps, useFocusEffect } from '@react-navigation/native';
|
||||||
|
import { useHeaderHeight } from '@react-navigation/elements';
|
||||||
|
import { StackScreenProps } from '@react-navigation/stack';
|
||||||
|
import { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
|
||||||
|
import { MainParamList, MainTabParamList } from '@app/routes/MainParamList';
|
||||||
|
import LinearGradient from 'react-native-linear-gradient';
|
||||||
|
import HeaderRight from './components/HeaderRight';
|
||||||
|
import HomeTopView from './components/HomeTopView';
|
||||||
|
import HomeTodoView from './components/HomeTodoView';
|
||||||
|
import HomeCarousel from '@app/screens/components/HomeCarousel';
|
||||||
|
import HomeBulletin from './components/HomeBulletin';
|
||||||
|
import { useBannerList } from '@app/screens/api';
|
||||||
|
import {
|
||||||
|
Article,
|
||||||
|
useArticleCategory,
|
||||||
|
useArticleListByCategory,
|
||||||
|
useBadgeNum,
|
||||||
|
useFeatureList,
|
||||||
|
useNoticeList,
|
||||||
|
} from './api';
|
||||||
|
import HomeFeaturesView from './components/HomeFeaturesView';
|
||||||
|
import Spinner from '@common/components/Spinner';
|
||||||
|
import HomeArticlesView from './components/HomeArticlesView';
|
||||||
|
import HomeArticleItem from './components/HomeArticleItem';
|
||||||
|
import { DEVICE_ENENT_UPDATE_HOME_FEATURE_LIST_KEY } from '@common/constants';
|
||||||
|
import { useHandleClickFeatureListItem } from './hooks/useHandleClickFeatureListItem';
|
||||||
|
import { useHandleClickBannerListItem } from './hooks/useHandleClickBannerListItem';
|
||||||
|
import { useAuth } from '@common/contexts/useAuth';
|
||||||
|
import { useHandleUnreadRemind } from './hooks/useHandleUnreadRemind';
|
||||||
|
import { debounce } from '@common/utils/commonUtils';
|
||||||
|
import { showErrorMessage } from '@common/ToastHelper.ts';
|
||||||
|
import ListEmpty from '@common/components/ListEmpty.tsx';
|
||||||
|
|
||||||
|
const OPACITY_START = 1; // 导航栏起始透明度
|
||||||
|
const OPACITY_END = 0; // 导航栏终点透明度
|
||||||
|
const PADDING_HORIZONTAL = 12;
|
||||||
|
const BACKGROUND_COLOR = '#F3F4F5'; // 背景色
|
||||||
|
const ARTICLE_PAGE_SIZE = 10; // 热门推荐每页数量
|
||||||
|
|
||||||
|
type Props = CompositeScreenProps<
|
||||||
|
BottomTabScreenProps<MainTabParamList, 'Home'>,
|
||||||
|
StackScreenProps<MainParamList, 'MainTab'>
|
||||||
|
>;
|
||||||
|
|
||||||
|
export default function HomeScreen(props: Props) {
|
||||||
|
const { navigation } = props;
|
||||||
|
const headerHeight = useHeaderHeight();
|
||||||
|
const { width } = useWindowDimensions();
|
||||||
|
|
||||||
|
const {
|
||||||
|
state: { userInfo },
|
||||||
|
} = useAuth();
|
||||||
|
|
||||||
|
|
||||||
|
// 【状态】
|
||||||
|
const [contentOffset, setContentOffset] = useState<NativeScrollPoint>({
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 【子组件】
|
||||||
|
|
||||||
|
// 创建导航栏背景
|
||||||
|
const createHeaderBackground = useCallback(() => {
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
styles.headerBackground,
|
||||||
|
{
|
||||||
|
opacity:
|
||||||
|
contentOffset.y <= 0
|
||||||
|
? OPACITY_END
|
||||||
|
: contentOffset.y >= headerHeight
|
||||||
|
? OPACITY_START
|
||||||
|
: contentOffset.y / headerHeight,
|
||||||
|
}, // 滑动 ScrollView 导航栏透明度逐渐变化
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}, [contentOffset.y, headerHeight]);
|
||||||
|
|
||||||
|
const { unread, unreadRemindLoading, handleUnreadRemindFetch } =
|
||||||
|
useHandleUnreadRemind(); // 处理未读消息相关
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
handleUnreadRemindFetch();
|
||||||
|
}, [handleUnreadRemindFetch]);
|
||||||
|
|
||||||
|
const createHeaderRight = useCallback(() => {
|
||||||
|
return (
|
||||||
|
<HeaderRight
|
||||||
|
badge={unread}
|
||||||
|
onPressLeftButton={() => {
|
||||||
|
debounce(() => {});
|
||||||
|
}}
|
||||||
|
onPressRightButton={() => {
|
||||||
|
debounce(() => {});
|
||||||
|
// navigation.navigate('Scan'); // 以后再更换新的扫一扫，工作量太大
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}, [unread]);
|
||||||
|
|
||||||
|
// 【副作用】
|
||||||
|
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
navigation.setOptions({
|
||||||
|
headerTitle: '医网信',
|
||||||
|
headerTransparent: true,
|
||||||
|
headerBackground: () => createHeaderBackground(),
|
||||||
|
headerRight: () => createHeaderRight(),
|
||||||
|
});
|
||||||
|
return () => {
|
||||||
|
};
|
||||||
|
}, [createHeaderBackground, createHeaderRight, navigation]);
|
||||||
|
|
||||||
|
const {
|
||||||
|
response: bannerList,
|
||||||
|
error: bannerListError,
|
||||||
|
loading: bannerListLoading,
|
||||||
|
fetch: bannerListFetch,
|
||||||
|
} = useBannerList(); // 轮播图
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (bannerListError && bannerListError.type !== 'Cancel') {
|
||||||
|
showErrorMessage(bannerListError.message);
|
||||||
|
}
|
||||||
|
}, [bannerListError]);
|
||||||
|
|
||||||
|
const {
|
||||||
|
response: noticeList,
|
||||||
|
error: noticeListError,
|
||||||
|
loading: noticeListLoading,
|
||||||
|
fetch: noticeListFetch,
|
||||||
|
} = useNoticeList(); // 公告
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (noticeListError && noticeListError.type !== 'Cancel') {
|
||||||
|
showErrorMessage(noticeListError.message);
|
||||||
|
}
|
||||||
|
}, [noticeListError]);
|
||||||
|
|
||||||
|
const {
|
||||||
|
response: featureList,
|
||||||
|
error: featureListError,
|
||||||
|
loading: featureListLoading,
|
||||||
|
fetch: featureListFetch,
|
||||||
|
} = useFeatureList(); // 精品服务数组
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (featureListError && featureListError.type !== 'Cancel') {
|
||||||
|
showErrorMessage(featureListError.message);
|
||||||
|
}
|
||||||
|
}, [featureListError]);
|
||||||
|
|
||||||
|
const {
|
||||||
|
response: articleCategory,
|
||||||
|
error: articleCategoryError,
|
||||||
|
loading: articleCategoryLoading,
|
||||||
|
fetch: articleCategoryFetch,
|
||||||
|
} = useArticleCategory(); // 热门推荐分类
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (articleCategoryError && articleCategoryError.type !== 'Cancel') {
|
||||||
|
showErrorMessage(articleCategoryError.message);
|
||||||
|
}
|
||||||
|
}, [articleCategoryError]);
|
||||||
|
|
||||||
|
const [selectedCategoryCode, setSelectedCategoryCode] = useState<
|
||||||
|
number | undefined
|
||||||
|
>(undefined);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (articleCategory !== undefined && articleCategory.length > 0) {
|
||||||
|
const filteredArticleCategory = articleCategory.filter(
|
||||||
|
c => c.isDefault === true,
|
||||||
|
);
|
||||||
|
if (filteredArticleCategory.length > 0) {
|
||||||
|
setSelectedCategoryCode(filteredArticleCategory[0].code);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [articleCategory]);
|
||||||
|
|
||||||
|
const {
|
||||||
|
response: articleList,
|
||||||
|
error: articleListError,
|
||||||
|
loading: articleListLoading,
|
||||||
|
fetch: articleListFetch,
|
||||||
|
} = useArticleListByCategory(selectedCategoryCode ?? 0); // 热门推荐数组
|
||||||
|
const [displayArticleList, setDisplayArticleList] = useState<Article[]>([]); // 当前展示的热门推荐数组
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (articleListError && articleListError.type !== 'Cancel') {
|
||||||
|
showErrorMessage(articleListError.message);
|
||||||
|
}
|
||||||
|
}, [articleListError]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedCategoryCode !== undefined) {
|
||||||
|
articleListFetch();
|
||||||
|
}
|
||||||
|
}, [articleListFetch, selectedCategoryCode]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (articleList) {
|
||||||
|
setDisplayArticleList(articleList.slice(0, ARTICLE_PAGE_SIZE));
|
||||||
|
}
|
||||||
|
}, [articleList]);
|
||||||
|
|
||||||
|
const {
|
||||||
|
response: badgeNum,
|
||||||
|
error: badgeNumError,
|
||||||
|
fetch: badgeNumFetch,
|
||||||
|
} = useBadgeNum(); // 今日未处理数据和精品服务角标
|
||||||
|
|
||||||
|
// 对于首页角标数据，频繁调用
|
||||||
|
useFocusEffect(
|
||||||
|
useCallback(() => {
|
||||||
|
badgeNumFetch();
|
||||||
|
}, [badgeNumFetch]),
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (badgeNumError && badgeNumError.type !== 'Cancel') {
|
||||||
|
showErrorMessage(badgeNumError.message);
|
||||||
|
}
|
||||||
|
}, [badgeNumError]);
|
||||||
|
|
||||||
|
// 下拉刷新
|
||||||
|
const handleRefresh = useCallback(() => {
|
||||||
|
bannerListFetch();
|
||||||
|
noticeListFetch();
|
||||||
|
featureListFetch();
|
||||||
|
articleCategoryFetch();
|
||||||
|
badgeNumFetch();
|
||||||
|
handleUnreadRemindFetch();
|
||||||
|
}, [
|
||||||
|
articleCategoryFetch,
|
||||||
|
badgeNumFetch,
|
||||||
|
bannerListFetch,
|
||||||
|
featureListFetch,
|
||||||
|
handleUnreadRemindFetch,
|
||||||
|
noticeListFetch,
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 【计算属性】
|
||||||
|
|
||||||
|
// 处理过的精品服务列表，增加了badge的状态
|
||||||
|
const computedFeatureList = useMemo(() => {
|
||||||
|
if (badgeNum === undefined || badgeNum.length === 0) {
|
||||||
|
return featureList;
|
||||||
|
}
|
||||||
|
return featureList?.map(feature => {
|
||||||
|
const filteredBadgeItems = badgeNum.filter(badgeItem => {
|
||||||
|
return badgeItem.nsId && badgeItem.nsId === feature.uniqueId;
|
||||||
|
});
|
||||||
|
let badge = false;
|
||||||
|
if (filteredBadgeItems.length > 0) {
|
||||||
|
badge = filteredBadgeItems[0].shouldRemind;
|
||||||
|
}
|
||||||
|
return { ...feature, badge: badge };
|
||||||
|
});
|
||||||
|
}, [badgeNum, featureList]); // 在原有精品服务功能数组的基础上增加了角标的是否展示
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const filteredFeatureList = computedFeatureList?.filter(feature => {
|
||||||
|
return feature.recommend === true;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 当这个列表更新的更新时，发通知，tab栏会接收通知更新tab标签
|
||||||
|
if (filteredFeatureList !== undefined) {
|
||||||
|
DeviceEventEmitter.emit(
|
||||||
|
DEVICE_ENENT_UPDATE_HOME_FEATURE_LIST_KEY,
|
||||||
|
filteredFeatureList.length > 0 ? filteredFeatureList[0] : undefined, // 如果没有推荐的则传空
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}, [computedFeatureList]);
|
||||||
|
|
||||||
|
// 今日未处理三个功能块未处理数
|
||||||
|
const computedBadgeNum = useMemo(() => {
|
||||||
|
if (badgeNum === undefined || badgeNum.length === 0) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
let yiwangqianNum = '0';
|
||||||
|
let suifangNum = '0';
|
||||||
|
let hospitalNum = '0';
|
||||||
|
for (let index = 0; index < badgeNum.length; index++) {
|
||||||
|
const badgeItem = badgeNum[index];
|
||||||
|
// 医网签id
|
||||||
|
if (badgeItem.nsId === '101') {
|
||||||
|
yiwangqianNum = badgeItem.num.toString();
|
||||||
|
}
|
||||||
|
// 随访id
|
||||||
|
if (badgeItem.nsId === 'Y_T_A2310053073') {
|
||||||
|
suifangNum = badgeItem.num.toString();
|
||||||
|
}
|
||||||
|
// 云诊室id
|
||||||
|
if (badgeItem.nsId === 'CLOUD_CLINIC') {
|
||||||
|
hospitalNum = badgeItem.num.toString();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
yiwangqianNum,
|
||||||
|
suifangNum,
|
||||||
|
hospitalNum,
|
||||||
|
};
|
||||||
|
}, [badgeNum]);
|
||||||
|
|
||||||
|
// 【点击事件方法】
|
||||||
|
|
||||||
|
const { subServerCheckLoading, handleClickFeatureListItem } =
|
||||||
|
useHandleClickFeatureListItem(); // 点击精品服务功能块
|
||||||
|
|
||||||
|
const handleClickBannerListItem = useHandleClickBannerListItem(
|
||||||
|
handleClickFeatureListItem,
|
||||||
|
); // 点击轮播图
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={styles.container}
|
||||||
|
onLayout={() => {
|
||||||
|
// 今日未处理视图时引导的开始位置，当这个视图渲染好之后就可以开始了
|
||||||
|
// if (info.appTourVersion !== APP_TOUR_VERSION) {
|
||||||
|
// start('今日未处理', scrollRef.current);
|
||||||
|
// }
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* 顶部背景 */}
|
||||||
|
<View style={styles.topBackground}>
|
||||||
|
<Image
|
||||||
|
style={styles.backgroundImage}
|
||||||
|
source={require('@app/assets/images/home/home_background.png')}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<FlatList
|
||||||
|
style={styles.list}
|
||||||
|
contentInsetAdjustmentBehavior="scrollableAxes"
|
||||||
|
showsVerticalScrollIndicator={false}
|
||||||
|
onScroll={event => {
|
||||||
|
setContentOffset(event.nativeEvent.contentOffset);
|
||||||
|
}}
|
||||||
|
data={displayArticleList}
|
||||||
|
renderItem={({ item, index }) => (
|
||||||
|
<View key={index}>
|
||||||
|
<HomeArticleItem
|
||||||
|
title={item.title}
|
||||||
|
summary={item.summary}
|
||||||
|
totalReadCount={item.totalReadCount}
|
||||||
|
coverImgUrl={item.coverImgUrl}
|
||||||
|
onPress={() => {
|
||||||
|
if (articleList && articleList.length > 0) {
|
||||||
|
const article = articleList[index];
|
||||||
|
if (article.id === undefined || article.id.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
navigation.navigate('ArticleDetail', {
|
||||||
|
id: article.id,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
ListEmptyComponent={ListEmpty}
|
||||||
|
ListHeaderComponent={
|
||||||
|
<SafeAreaView>
|
||||||
|
<View style={{ height: headerHeight }} />
|
||||||
|
{/* 医生信息视图 */}
|
||||||
|
<HomeTopView
|
||||||
|
isVerified={
|
||||||
|
userInfo?.realNameStatus === 'success'
|
||||||
|
? true
|
||||||
|
: userInfo?.realNameStatus === undefined
|
||||||
|
? undefined
|
||||||
|
: false
|
||||||
|
}
|
||||||
|
nickname={userInfo?.nickname}
|
||||||
|
picUrl={userInfo?.picUrl}
|
||||||
|
onPress={() => {
|
||||||
|
debounce(() => {});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/* 今日未处理视图 */}
|
||||||
|
<HomeTodoView
|
||||||
|
yiwangqianNum={computedBadgeNum.yiwangqianNum}
|
||||||
|
suifangNum={computedBadgeNum.suifangNum}
|
||||||
|
hospitalNum={computedBadgeNum.hospitalNum}
|
||||||
|
onPressYiwangqian={() => {
|
||||||
|
debounce(() => {
|
||||||
|
const filteredFeatureList = computedFeatureList?.filter(
|
||||||
|
feature => {
|
||||||
|
return feature.uniqueId === '101';
|
||||||
|
},
|
||||||
|
);
|
||||||
|
if (
|
||||||
|
filteredFeatureList !== undefined &&
|
||||||
|
filteredFeatureList.length > 0
|
||||||
|
) {
|
||||||
|
handleClickFeatureListItem(filteredFeatureList[0]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
onPressSuifang={() => {
|
||||||
|
debounce(() => {
|
||||||
|
const filteredFeatureList = computedFeatureList?.filter(
|
||||||
|
feature => {
|
||||||
|
return feature.uniqueId === 'Y_T_A2310053073';
|
||||||
|
},
|
||||||
|
);
|
||||||
|
if (
|
||||||
|
filteredFeatureList !== undefined &&
|
||||||
|
filteredFeatureList.length > 0
|
||||||
|
) {
|
||||||
|
handleClickFeatureListItem(filteredFeatureList[0]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
onPressHospital={() => {
|
||||||
|
debounce(() => {
|
||||||
|
const filteredFeatureList = computedFeatureList?.filter(
|
||||||
|
feature => {
|
||||||
|
return feature.uniqueId === 'CLOUD_CLINIC';
|
||||||
|
},
|
||||||
|
);
|
||||||
|
if (
|
||||||
|
filteredFeatureList !== undefined &&
|
||||||
|
filteredFeatureList.length > 0
|
||||||
|
) {
|
||||||
|
handleClickFeatureListItem(filteredFeatureList[0]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/* 轮播图 */}
|
||||||
|
{bannerList && bannerList.length > 0 && (
|
||||||
|
<LinearGradient
|
||||||
|
style={styles.carousel}
|
||||||
|
start={{ x: 0.5, y: 0 }}
|
||||||
|
end={{ x: 0.5, y: 1 }}
|
||||||
|
colors={['#F8FDFF', BACKGROUND_COLOR]}
|
||||||
|
>
|
||||||
|
<HomeCarousel
|
||||||
|
width={width - 2 * PADDING_HORIZONTAL}
|
||||||
|
data={bannerList}
|
||||||
|
onPress={(index: number) => {
|
||||||
|
debounce(() => {
|
||||||
|
if (bannerList && bannerList.length > 0) {
|
||||||
|
handleClickBannerListItem(bannerList[index]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</LinearGradient>
|
||||||
|
)}
|
||||||
|
{/* 公告栏 */}
|
||||||
|
{noticeList && noticeList.list.length > 0 && (
|
||||||
|
<View style={styles.bulletin}>
|
||||||
|
<HomeBulletin
|
||||||
|
width={width - 2 * PADDING_HORIZONTAL}
|
||||||
|
data={noticeList.list}
|
||||||
|
onPress={index => {
|
||||||
|
debounce(() => {});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
{/* 精品服务 */}
|
||||||
|
<HomeFeaturesView
|
||||||
|
features={computedFeatureList}
|
||||||
|
error={featureListError}
|
||||||
|
reload={() => {
|
||||||
|
featureListFetch();
|
||||||
|
}}
|
||||||
|
onPress={index => {
|
||||||
|
debounce(() => {
|
||||||
|
if (computedFeatureList && computedFeatureList.length > 0) {
|
||||||
|
handleClickFeatureListItem(computedFeatureList[index]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/* 热门推荐头部视图 */}
|
||||||
|
<HomeArticlesView
|
||||||
|
articleCategory={articleCategory}
|
||||||
|
selectedCode={selectedCategoryCode}
|
||||||
|
articleCategoryError={articleCategoryError}
|
||||||
|
onPressTag={code => {
|
||||||
|
setSelectedCategoryCode(code);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</SafeAreaView>
|
||||||
|
}
|
||||||
|
ListFooterComponent={articleList === undefined ? FooterEmpty : Footer}
|
||||||
|
refreshing={false}
|
||||||
|
refreshControl={
|
||||||
|
<RefreshControl refreshing={false} onRefresh={handleRefresh} />
|
||||||
|
}
|
||||||
|
onRefresh={() => {
|
||||||
|
handleRefresh();
|
||||||
|
}}
|
||||||
|
onEndReachedThreshold={0.2}
|
||||||
|
onEndReached={() => {
|
||||||
|
if (articleList === undefined) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const startIndex = displayArticleList.length;
|
||||||
|
const endEndex = startIndex + ARTICLE_PAGE_SIZE;
|
||||||
|
|
||||||
|
if (startIndex < articleList.length) {
|
||||||
|
setDisplayArticleList(prev => [
|
||||||
|
...prev,
|
||||||
|
...articleList.slice(startIndex, endEndex),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{(bannerListLoading ||
|
||||||
|
noticeListLoading ||
|
||||||
|
featureListLoading ||
|
||||||
|
articleCategoryLoading ||
|
||||||
|
articleListLoading ||
|
||||||
|
subServerCheckLoading ||
|
||||||
|
unreadRemindLoading) && <Spinner />}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function FooterEmpty() {
|
||||||
|
return <View style={styles.footerEmpty} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function Footer() {
|
||||||
|
return (
|
||||||
|
<View style={styles.footer}>
|
||||||
|
<Text>没有更多数据了</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
alertText: {
|
||||||
|
textAlign: 'center',
|
||||||
|
color: '#999999',
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
headerBackground: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: '#FFFFFF',
|
||||||
|
},
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: BACKGROUND_COLOR,
|
||||||
|
},
|
||||||
|
topBackground: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
height: 240,
|
||||||
|
},
|
||||||
|
backgroundImage: {
|
||||||
|
flex: 1,
|
||||||
|
width: '100%',
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
carousel: {
|
||||||
|
paddingHorizontal: PADDING_HORIZONTAL,
|
||||||
|
paddingBottom: 6,
|
||||||
|
},
|
||||||
|
bulletin: {
|
||||||
|
paddingHorizontal: PADDING_HORIZONTAL,
|
||||||
|
paddingVertical: 4,
|
||||||
|
backgroundColor: BACKGROUND_COLOR,
|
||||||
|
},
|
||||||
|
footerEmpty: {
|
||||||
|
height: 25,
|
||||||
|
},
|
||||||
|
footer: {
|
||||||
|
height: 40,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
export * from './useNoticeList';
|
||||||
|
export * from './useFeatureList';
|
||||||
|
export * from './useArticleList';
|
||||||
|
export * from './useBadgeNum';
|
||||||
|
export * from './useSubServerCheck';
|
||||||
|
export * from './useUnreadRemind';
|
||||||
|
export * from './useArticleCategory';
|
||||||
|
export * from './useArticleListByCategory';
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
import {z} from 'zod';
|
||||||
|
import { useApi } from '@common/api/useApi.ts';
|
||||||
|
|
||||||
|
// 文章分类 item
|
||||||
|
const articleCategoryItemSchema = z.object({
|
||||||
|
code: z.number(), // 分类 code
|
||||||
|
name: z.string().optional().default(''), // 分类名称
|
||||||
|
isDefault: z.boolean(), // 图标
|
||||||
|
});
|
||||||
|
|
||||||
|
const articleCategorySchema = z
|
||||||
|
.array(articleCategoryItemSchema)
|
||||||
|
.transform(arr => {
|
||||||
|
return [
|
||||||
|
...arr.filter(item => item.isDefault === true),
|
||||||
|
...arr.filter(item => item.isDefault !== true),
|
||||||
|
];
|
||||||
|
})
|
||||||
|
.optional()
|
||||||
|
.default([]);
|
||||||
|
|
||||||
|
type ArticleCategoryItem = z.infer<typeof articleCategoryItemSchema>;
|
||||||
|
|
||||||
|
// 查询文章分类
|
||||||
|
const useArticleCategory = () => {
|
||||||
|
return useApi(
|
||||||
|
'/am/v3/hotnews/article/queryCategory',
|
||||||
|
'GET',
|
||||||
|
{},
|
||||||
|
articleCategorySchema,
|
||||||
|
{
|
||||||
|
automatic: true,
|
||||||
|
loadingDelay: 500,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export type {ArticleCategoryItem};
|
||||||
|
export {useArticleCategory};
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
import {useApi} from '@common/api/useApi.ts';
|
||||||
|
import {z} from 'zod';
|
||||||
|
|
||||||
|
const articleSchema = z.object({
|
||||||
|
id: z.string().optional(), // 文章id
|
||||||
|
title: z.string().optional().default(''), // 文章标题
|
||||||
|
summary: z.string().optional().default(''), // 文章摘要
|
||||||
|
publishTime: z.string().optional(), // 发布时间
|
||||||
|
coverImgUrl: z.string().optional(), // 图片
|
||||||
|
totalReadCount: z.string().optional().default('0'), // 阅读量
|
||||||
|
});
|
||||||
|
|
||||||
|
const articlesSchema = z.array(articleSchema).optional().default([]);
|
||||||
|
|
||||||
|
// 首页热门推荐
|
||||||
|
// {"data":[{"coverImgUrl":"https://tms-dev.oss-cn-beijing.aliyuncs.com/khcrm_file/null_GNPJXNPOAC/WechatIMG1741.jpg","id":"4","publishTime":"2024-08-27 14:07:59","summary":"1","title":"点击快速反击脸上的肌肤 发了几点上课就放假了带手机客服端上来就分开了带手机来看风景的时刻了就分开的路","totalReadCount":"2"}],"message":"success","status":"0"}
|
||||||
|
const useArticleList = () => {
|
||||||
|
return useApi(
|
||||||
|
'/am/v3/hotnews/article/list',
|
||||||
|
'POSTJSON',
|
||||||
|
{
|
||||||
|
startNum: 0,
|
||||||
|
endNum: 999,
|
||||||
|
},
|
||||||
|
articlesSchema,
|
||||||
|
{
|
||||||
|
automatic: true,
|
||||||
|
loadingDelay: 500,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export {useArticleList};
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
import {useApi} from '@common/api/useApi.ts';
|
||||||
|
import {z} from 'zod';
|
||||||
|
|
||||||
|
const articleSchema = z.object({
|
||||||
|
id: z.string().optional(), // 文章id
|
||||||
|
title: z.string().optional().default(''), // 文章标题
|
||||||
|
summary: z.string().optional().default(''), // 文章摘要
|
||||||
|
publishTime: z.string().optional(), // 发布时间
|
||||||
|
coverImgUrl: z.string().optional(), // 图片
|
||||||
|
totalReadCount: z.string().optional().default('0'), // 阅读量
|
||||||
|
});
|
||||||
|
|
||||||
|
const articlesSchema = z.array(articleSchema).optional().default([]);
|
||||||
|
type Article = z.infer<typeof articleSchema>;
|
||||||
|
|
||||||
|
// 首页根据分类查询热门推荐
|
||||||
|
// {"data":[{"coverImgUrl":"https://tms-dev.oss-cn-beijing.aliyuncs.com/khcrm_file/null_GNPJXNPOAC/WechatIMG1741.jpg","id":"4","publishTime":"2024-08-27 14:07:59","summary":"1","title":"点击快速反击脸上的肌肤 发了几点上课就放假了带手机客服端上来就分开了带手机来看风景的时刻了就分开的路","totalReadCount":"2"}],"message":"success","status":"0"}
|
||||||
|
const useArticleListByCategory = (code: number) => {
|
||||||
|
return useApi(
|
||||||
|
'/am/v3/hotnews/article/queryListByCategory',
|
||||||
|
'POSTJSON',
|
||||||
|
{
|
||||||
|
categoryCode: code,
|
||||||
|
},
|
||||||
|
articlesSchema,
|
||||||
|
{
|
||||||
|
loadingDelay: 500,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export type {Article};
|
||||||
|
export {useArticleListByCategory};
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
import {useApi} from '@common/api/useApi.ts';
|
||||||
|
import {z} from 'zod';
|
||||||
|
|
||||||
|
const itemBadgeSchema = z.object({
|
||||||
|
nsId: z.string().optional(), // id // 功能 id
|
||||||
|
num: z.number().optional().default(0), // 未处理数量
|
||||||
|
shouldRemind: z.boolean().optional().default(false), // 是否红点提示
|
||||||
|
});
|
||||||
|
|
||||||
|
const itemBadgesSchema = z.array(itemBadgeSchema).optional().default([]);
|
||||||
|
|
||||||
|
// 首页今日未处理数据以及精品服务角标数据
|
||||||
|
// [{"nsId":"101","num":0,"shouldRemind":false},{"nsId":"E_CONTRACT","num":0,"shouldRemind":false},{"nsId":"CLOUD_CLINIC","num":0,"shouldRemind":false},{"$ref":"$.data[2]"}]
|
||||||
|
const useBadgeNum = () => {
|
||||||
|
return useApi(
|
||||||
|
'/am/v1/subServer/cornerTag',
|
||||||
|
'POSTJSON',
|
||||||
|
{},
|
||||||
|
itemBadgesSchema,
|
||||||
|
{},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export {useBadgeNum};
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
import {useApi} from '@common/api/useApi.ts';
|
||||||
|
import {z} from 'zod';
|
||||||
|
|
||||||
|
// 精品服务功能块
|
||||||
|
const featureSchema = z.object({
|
||||||
|
uniqueId: z.string(), // 功能 id
|
||||||
|
name: z.string(), // 功能名称
|
||||||
|
icon: z.string().optional(), // 图标
|
||||||
|
link: z.string(), // 链接 http/https链接、ywxApp://TeamIndexView
|
||||||
|
recommend: z.boolean().optional().default(false), // 是否是主推功能
|
||||||
|
advertisePic: z.string().optional(), // 广告图？
|
||||||
|
phone: z.string().optional().default(''), // 电话
|
||||||
|
allowApply: z.boolean().optional().default(false), // 是否允许体验
|
||||||
|
subscribeType: z.number().optional(), // 订阅类型 0免费订阅 1厂商订阅 2用户订阅
|
||||||
|
|
||||||
|
badge: z.boolean().optional().default(false), // 注：当前接口没有这个字段，但是会根据 /am/v1/subServer/cornerTag 接口给该模型拼接上该字段，故这里添加一个可选字段并默认为false
|
||||||
|
});
|
||||||
|
|
||||||
|
const featuresSchema = z.array(featureSchema).optional().default([]);
|
||||||
|
|
||||||
|
type Feature = z.infer<typeof featureSchema>;
|
||||||
|
|
||||||
|
// 首页精品服务位置常用功能模块列表
|
||||||
|
// {"advertisePic":"https://tms-dev.oss-cn-beijing.aliyuncs.com/doctorHelper/advertPic_E_CONTRACT.png?time=1694161704000?time=1694161744000?time=1710124742000?time=1711019040000","allowApply":false,"cornerTagUrl":"","createTime":"2021-06-28 18:30:33","icon":"https://tms-dev.oss-cn-beijing.aliyuncs.com/doctorHelper/docIcon_E_CONTRACT.png?time=1710124742000?time=1711019040000","link":"ywxApp://TeamIndexView","name":"电子合同","note":"电子合同","phone":"13122223333","recommend":false,"serviceType":2,"sort":2,"status":1,"subscribeId":"synForwardRecipe","subscribeType":0,"uniqueId":"E_CONTRACT","updateTime":"2024-03-21 19:04:00"}
|
||||||
|
const useFeatureList = () => {
|
||||||
|
return useApi('/am/v4/subServer/baseList', 'POSTJSON', {}, featuresSchema, {
|
||||||
|
automatic: true,
|
||||||
|
loadingDelay: 500,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export type {Feature};
|
||||||
|
export {useFeatureList};
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import {useApi} from '@common/api/useApi.ts';
|
||||||
|
import {z} from 'zod';
|
||||||
|
|
||||||
|
const noticeSchema = z
|
||||||
|
.object({
|
||||||
|
id: z.string().optional().default(''), // id
|
||||||
|
content: z.string().url(), // 公告内容
|
||||||
|
})
|
||||||
|
.passthrough(); // passthrough 的意思是除了 content 之外，其他的字段不做任何处理；目前这么写，将对象整体传给旧模块，后期重构可以去掉这个
|
||||||
|
|
||||||
|
const noticesSchema = z.object({
|
||||||
|
list: z.array(noticeSchema).optional().default([]),
|
||||||
|
});
|
||||||
|
|
||||||
|
// 公告列表
|
||||||
|
// {"collection":"sys_notice","content":"啊倒萨大苏打的","createTime":"2024-08-15 18:31:18","id":"{\"$oid\":\"66bdd8f6986acc13d359124f\"}","isDel":0,"readCount":0,"sendTime":"2024-08-15 18:31:20","status":1,"title":"公告新增标题","type":0,"updateTime":"2024-08-15 18:31:20"}
|
||||||
|
const useNoticeList = () => {
|
||||||
|
return useApi('/am/v3/notice/list', 'POSTJSON', {}, noticesSchema, {
|
||||||
|
automatic: true,
|
||||||
|
loadingDelay: 500,
|
||||||
|
log: false,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export {useNoticeList};
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
import {useApi} from '@common/api/useApi.ts';
|
||||||
|
import {z} from 'zod';
|
||||||
|
|
||||||
|
// 用户类型
|
||||||
|
const SubscribeType = {
|
||||||
|
Free: 0, // 免费
|
||||||
|
Vendor: 1, // 面向厂商开启
|
||||||
|
Individual: 2, // 面向个人开启
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
// 服务开通状态
|
||||||
|
const SubscribeStatus = {
|
||||||
|
Serving: 1, // 已开通
|
||||||
|
Stop: 2, // 未开通
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
const checkResultSchema = z.object({
|
||||||
|
checkResult: z.boolean(),
|
||||||
|
clientList: z
|
||||||
|
.array(
|
||||||
|
z.object({
|
||||||
|
clientId: z.string().min(1), // 厂商id
|
||||||
|
clientName: z.string().optional().default(''), // 厂商名
|
||||||
|
subscribeStatus: z.nativeEnum(SubscribeStatus).transform(val => {
|
||||||
|
switch (val) {
|
||||||
|
case SubscribeStatus.Serving:
|
||||||
|
return 'serving';
|
||||||
|
case SubscribeStatus.Stop:
|
||||||
|
return 'stop';
|
||||||
|
}
|
||||||
|
}), // 服务开通状态
|
||||||
|
cossConf: z
|
||||||
|
.object({
|
||||||
|
appId: z.string(),
|
||||||
|
servUrl: z.string(),
|
||||||
|
})
|
||||||
|
.nullish(),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
.optional()
|
||||||
|
.default([]), // 应该是厂商列表
|
||||||
|
subscribeType: z.nativeEnum(SubscribeType).transform(val => {
|
||||||
|
switch (val) {
|
||||||
|
case SubscribeType.Free:
|
||||||
|
return 'free';
|
||||||
|
case SubscribeType.Vendor:
|
||||||
|
return 'vendor';
|
||||||
|
case SubscribeType.Individual:
|
||||||
|
return 'individual';
|
||||||
|
}
|
||||||
|
}), // 订阅类型
|
||||||
|
});
|
||||||
|
|
||||||
|
// 检查精品服务功能块是否能进入
|
||||||
|
// {"checkResult": true, "clientList": [{"clientId": "2015112716143758", "clientName": "数字医信开发", "subscribeStatus": 2}, {"clientId": "2024013118101247", "clientName": "dev随访客户真", "subscribeStatus": 2}, {"clientId": "2024062618140163", "clientName": "同和互联网医院", "subscribeStatus": 2}], "subscribeType": 1}
|
||||||
|
const useSubServerCheck = () => {
|
||||||
|
return useApi(
|
||||||
|
'/am/v3/subServer/check',
|
||||||
|
'POSTJSON',
|
||||||
|
{
|
||||||
|
nsId: '', // 功能模块的id
|
||||||
|
},
|
||||||
|
checkResultSchema,
|
||||||
|
{},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export {useSubServerCheck};
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
import {useApi} from '@common/api/useApi.ts';
|
||||||
|
import {z} from 'zod';
|
||||||
|
|
||||||
|
// 检查是否存在未读的消息
|
||||||
|
// timeStamp 传一个 类似 2000-01-01 00:00:00 的字符串
|
||||||
|
const useUnreadRemind = () => {
|
||||||
|
return useApi(
|
||||||
|
'/am/v3/notice/unreadRemind',
|
||||||
|
'POSTJSON',
|
||||||
|
{
|
||||||
|
timeStamp: '',
|
||||||
|
},
|
||||||
|
z.object({
|
||||||
|
unread: z.boolean().optional().default(false),
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
loadingDelay: 500,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export {useUnreadRemind};
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {Image, StyleSheet, TouchableOpacity, View} from 'react-native';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
badge?: boolean; // 是否有已读消息
|
||||||
|
onPressLeftButton?: () => void; // 点击左侧的按钮
|
||||||
|
onPressRightButton?: () => void; // 点击右侧的按钮
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 首页导航栏右侧按钮视图
|
||||||
|
*/
|
||||||
|
export default function HeaderRight(props: Props) {
|
||||||
|
return (
|
||||||
|
<View style={styles.contanier}>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.button}
|
||||||
|
onPress={() => {
|
||||||
|
props.onPressLeftButton && props.onPressLeftButton();
|
||||||
|
}}>
|
||||||
|
<View>
|
||||||
|
<Image
|
||||||
|
style={styles.image}
|
||||||
|
source={require('@app/assets/images/home/home_notifications.png')}
|
||||||
|
/>
|
||||||
|
{props.badge === true && <View style={styles.badge} />}
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.button}
|
||||||
|
onPress={() => {
|
||||||
|
props.onPressRightButton && props.onPressRightButton();
|
||||||
|
}}>
|
||||||
|
<Image
|
||||||
|
style={styles.image}
|
||||||
|
source={require('@app/assets/images/home/home_scan.png')}
|
||||||
|
/>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
contanier: {
|
||||||
|
height: '100%',
|
||||||
|
marginRight: 15,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
height: '100%',
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
height: 24,
|
||||||
|
width: 24,
|
||||||
|
},
|
||||||
|
badge: {
|
||||||
|
position: 'absolute',
|
||||||
|
width: 6,
|
||||||
|
height: 6,
|
||||||
|
backgroundColor: '#FF6500',
|
||||||
|
borderRadius: 3,
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Image,
|
||||||
|
SafeAreaView,
|
||||||
|
StyleSheet,
|
||||||
|
Text,
|
||||||
|
TouchableOpacity,
|
||||||
|
View,
|
||||||
|
} from 'react-native';
|
||||||
|
import Separator from '@common/components/Separator';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
title: string; // 标题
|
||||||
|
summary: string; // 摘要
|
||||||
|
totalReadCount: string; // 未读数
|
||||||
|
coverImgUrl?: string; // 图片
|
||||||
|
onPress?: () => void; // 点击 item
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function HomeArticleItem(props: Props) {
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.container}>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.touch}
|
||||||
|
onPress={() => {
|
||||||
|
props.onPress && props.onPress();
|
||||||
|
}}>
|
||||||
|
<View style={styles.content}>
|
||||||
|
{props.coverImgUrl && props.coverImgUrl.length > 0 && (
|
||||||
|
<Image style={styles.image} source={{uri: props.coverImgUrl}} />
|
||||||
|
)}
|
||||||
|
<View style={styles.contentRight}>
|
||||||
|
<Text numberOfLines={1} style={styles.title}>
|
||||||
|
{props.title}
|
||||||
|
</Text>
|
||||||
|
<Text style={styles.summary} numberOfLines={3}>
|
||||||
|
{props.summary}
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
numberOfLines={1}
|
||||||
|
style={styles.bottomText}>{`${props.totalReadCount}阅读`}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<Separator />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: '#F3F4F5',
|
||||||
|
},
|
||||||
|
touch: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: '#FFFFFF',
|
||||||
|
marginHorizontal: 12,
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
padding: 12,
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
width: 110,
|
||||||
|
height: 110,
|
||||||
|
borderRadius: 10,
|
||||||
|
marginRight: 12,
|
||||||
|
},
|
||||||
|
contentRight: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
color: '#11102C',
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: '500',
|
||||||
|
},
|
||||||
|
summary: {
|
||||||
|
flex: 1,
|
||||||
|
marginVertical: 10,
|
||||||
|
color: '#999999',
|
||||||
|
},
|
||||||
|
bottomText: {
|
||||||
|
color: '#666666',
|
||||||
|
fontSize: 13,
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1,174 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Image,
|
||||||
|
ScrollView,
|
||||||
|
StyleSheet,
|
||||||
|
Text,
|
||||||
|
TouchableOpacity,
|
||||||
|
View,
|
||||||
|
} from 'react-native';
|
||||||
|
import { RequestError } from '@szyx-mobile/use-request';
|
||||||
|
import DataEmpty from '@common/components/DataEmpty';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
articleCategory?: {
|
||||||
|
code: number; // 分类 code
|
||||||
|
name: string; // 分类名称
|
||||||
|
}[];
|
||||||
|
selectedCode?: number;
|
||||||
|
articleCategoryError?: RequestError;
|
||||||
|
articleCategoryReload?: () => void;
|
||||||
|
onPressTag?: (code: number) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function HomeArticlesView(props: Props) {
|
||||||
|
if (
|
||||||
|
props.articleCategoryError === undefined &&
|
||||||
|
props.articleCategory &&
|
||||||
|
props.articleCategory.length === 0
|
||||||
|
) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.contanier}>
|
||||||
|
<View style={styles.content}>
|
||||||
|
<View style={styles.header}>
|
||||||
|
<Image
|
||||||
|
style={styles.background}
|
||||||
|
source={require('@app/assets/images/home/home_section_background.png')}
|
||||||
|
/>
|
||||||
|
<View style={styles.titleView}>
|
||||||
|
<Text style={styles.title} numberOfLines={1}>
|
||||||
|
热门推荐
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
{props.articleCategoryError &&
|
||||||
|
props.articleCategoryError.type !== 'Cancel' && (
|
||||||
|
<View style={styles.tagEmpty}>
|
||||||
|
<DataEmpty
|
||||||
|
reload={() => {
|
||||||
|
props.articleCategoryReload &&
|
||||||
|
props.articleCategoryReload();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
{props.articleCategoryError === undefined && props.articleCategory ? (
|
||||||
|
<ScrollView
|
||||||
|
style={styles.tagsView}
|
||||||
|
horizontal={true}
|
||||||
|
scrollEnabled={true}
|
||||||
|
>
|
||||||
|
{props.articleCategory.map((articleCategoryItem, index) => {
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={`${articleCategoryItem.code}-${index}`}
|
||||||
|
onPress={() => {
|
||||||
|
props.onPressTag &&
|
||||||
|
props.onPressTag(articleCategoryItem.code);
|
||||||
|
}}
|
||||||
|
style={[
|
||||||
|
styles.tagButton,
|
||||||
|
// eslint-disable-next-line react-native/no-inline-styles
|
||||||
|
{
|
||||||
|
marginRight:
|
||||||
|
props.articleCategory?.length === index - 1 ? 0 : 10,
|
||||||
|
backgroundColor:
|
||||||
|
articleCategoryItem.code === props.selectedCode
|
||||||
|
? '#DCEAFF'
|
||||||
|
: '#FFFFFF',
|
||||||
|
borderColor:
|
||||||
|
articleCategoryItem.code === props.selectedCode
|
||||||
|
? '#B4D8FA'
|
||||||
|
: '#EEEEEE',
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
style={[
|
||||||
|
styles.tagText,
|
||||||
|
// eslint-disable-next-line react-native/no-inline-styles
|
||||||
|
{
|
||||||
|
color:
|
||||||
|
articleCategoryItem.code === props.selectedCode
|
||||||
|
? '#1C90FE'
|
||||||
|
: '#1F1F1F',
|
||||||
|
fontWeight:
|
||||||
|
articleCategoryItem.code === props.selectedCode
|
||||||
|
? '600'
|
||||||
|
: '400',
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
numberOfLines={1}
|
||||||
|
>
|
||||||
|
{articleCategoryItem.name}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ScrollView>
|
||||||
|
) : null}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
contanier: {
|
||||||
|
backgroundColor: '#F3F4F5',
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
flex: 1,
|
||||||
|
marginTop: 6,
|
||||||
|
marginHorizontal: 12,
|
||||||
|
backgroundColor: '#FFFFFF',
|
||||||
|
borderTopLeftRadius: 10,
|
||||||
|
borderTopRightRadius: 10,
|
||||||
|
paddingBottom: 10,
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
borderTopLeftRadius: 10,
|
||||||
|
borderTopRightRadius: 10,
|
||||||
|
borderColor: '#FFFFFF',
|
||||||
|
borderWidth: 1,
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
},
|
||||||
|
background: {
|
||||||
|
position: 'absolute',
|
||||||
|
borderTopLeftRadius: 10,
|
||||||
|
borderTopRightRadius: 10,
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
},
|
||||||
|
titleView: {
|
||||||
|
marginTop: 8,
|
||||||
|
padding: 12,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
color: '#001846',
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: '700',
|
||||||
|
alignSelf: 'flex-start',
|
||||||
|
},
|
||||||
|
tagsView: {
|
||||||
|
width: '100%',
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
},
|
||||||
|
tagButton: {
|
||||||
|
backgroundColor: '#DCEAFF',
|
||||||
|
borderRadius: 5,
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
paddingVertical: 7,
|
||||||
|
borderColor: '#B4D8FA',
|
||||||
|
borderWidth: 0.5,
|
||||||
|
marginVertical: 4,
|
||||||
|
},
|
||||||
|
tagText: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#1C90FE',
|
||||||
|
fontWeight: '600',
|
||||||
|
},
|
||||||
|
tagEmpty: { width: '100%' },
|
||||||
|
});
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
|
||||||
|
import Carousel from 'react-native-reanimated-carousel';
|
||||||
|
|
||||||
|
const PADDING_HORIZONTAL = 0;
|
||||||
|
const LOGO_WIDTH = 23;
|
||||||
|
const ARROW_WIDTH = 6;
|
||||||
|
const CAROUSEL_MARGIN_HORIZONTAL = 6;
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
width: number; // 视图的宽度
|
||||||
|
data: {content: string}[]; // 数据的数组
|
||||||
|
onPress?: (index: number) => void; // 点击事件
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function HomeBulletin(props: Props) {
|
||||||
|
return (
|
||||||
|
<View style={styles.contanier}>
|
||||||
|
<Image
|
||||||
|
style={styles.image}
|
||||||
|
source={require('@app/assets/images/home/home_bulletin.png')}
|
||||||
|
/>
|
||||||
|
<Carousel
|
||||||
|
style={styles.carousel}
|
||||||
|
vertical={true}
|
||||||
|
loop
|
||||||
|
width={
|
||||||
|
props.width -
|
||||||
|
2 * PADDING_HORIZONTAL -
|
||||||
|
LOGO_WIDTH -
|
||||||
|
ARROW_WIDTH -
|
||||||
|
2 * CAROUSEL_MARGIN_HORIZONTAL
|
||||||
|
}
|
||||||
|
height={24}
|
||||||
|
autoPlay={true}
|
||||||
|
data={props.data}
|
||||||
|
scrollAnimationDuration={2000}
|
||||||
|
renderItem={({index}) => {
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.item}
|
||||||
|
onPress={() => {
|
||||||
|
props.onPress && props.onPress(index);
|
||||||
|
}}>
|
||||||
|
<Text numberOfLines={1} style={styles.itemText}>
|
||||||
|
{props.data[index].content}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Image
|
||||||
|
style={styles.arrow}
|
||||||
|
source={require('@app/assets/images/common/common_arrow_right_6.png')}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
contanier: {
|
||||||
|
paddingHorizontal: PADDING_HORIZONTAL,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
width: LOGO_WIDTH,
|
||||||
|
height: 12.5,
|
||||||
|
},
|
||||||
|
carousel: {
|
||||||
|
flex: 1,
|
||||||
|
marginHorizontal: CAROUSEL_MARGIN_HORIZONTAL,
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
itemText: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#666666',
|
||||||
|
},
|
||||||
|
arrow: {
|
||||||
|
width: ARROW_WIDTH,
|
||||||
|
height: 10,
|
||||||
|
tintColor: '#BCBCBC',
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1,148 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Image,
|
||||||
|
ImageSourcePropType,
|
||||||
|
StyleSheet,
|
||||||
|
Text,
|
||||||
|
TouchableOpacity,
|
||||||
|
View,
|
||||||
|
} from 'react-native';
|
||||||
|
import DataEmpty from '@common/components/DataEmpty';
|
||||||
|
import { RequestError } from '@szyx-mobile/use-request';
|
||||||
|
|
||||||
|
const ITEM_WIDTH = '33.33%'; // 图标宽度
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
features?: { name: string; icon?: string; badge?: boolean }[];
|
||||||
|
error?: RequestError;
|
||||||
|
reload?: () => void;
|
||||||
|
onPress?: (index: number) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function HomeFeaturesView(props: Props) {
|
||||||
|
return (
|
||||||
|
<View style={styles.contanier}>
|
||||||
|
<View style={styles.header}>
|
||||||
|
<Image
|
||||||
|
style={styles.background}
|
||||||
|
source={require('@app/assets/images/home/home_section_background.png')}
|
||||||
|
/>
|
||||||
|
<Text style={styles.title} numberOfLines={1}>
|
||||||
|
精品服务
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
{props.error && props.error.type !== 'Cancel' && (
|
||||||
|
<DataEmpty
|
||||||
|
reload={() => {
|
||||||
|
props.reload && props.reload();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{props.error === undefined && props.features && (
|
||||||
|
<View style={styles.items}>
|
||||||
|
{props.features.map((feature, index) => {
|
||||||
|
return (
|
||||||
|
<FeatureButtons
|
||||||
|
key={index}
|
||||||
|
title={feature.name}
|
||||||
|
image={{ uri: feature.icon }}
|
||||||
|
badge={feature.badge}
|
||||||
|
onPress={() => {
|
||||||
|
props.onPress && props.onPress(index);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function FeatureButtons(props: {
|
||||||
|
image: ImageSourcePropType;
|
||||||
|
title: string;
|
||||||
|
badge?: boolean;
|
||||||
|
onPress?: () => void;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.item}
|
||||||
|
onPress={() => {
|
||||||
|
props.onPress && props.onPress();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<View>
|
||||||
|
<Image style={styles.itemImage} source={props.image} />
|
||||||
|
{props.badge === true && <View style={styles.badge} />}
|
||||||
|
</View>
|
||||||
|
<Text style={styles.itemText} numberOfLines={1}>
|
||||||
|
{props.title}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
contanier: {
|
||||||
|
backgroundColor: '#F3F4F5',
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
flex: 1,
|
||||||
|
marginVertical: 6,
|
||||||
|
marginHorizontal: 12,
|
||||||
|
backgroundColor: '#FFFFFF',
|
||||||
|
borderRadius: 10,
|
||||||
|
paddingBottom: 14,
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
borderTopLeftRadius: 10,
|
||||||
|
borderTopRightRadius: 10,
|
||||||
|
borderColor: '#FFFFFF',
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
background: {
|
||||||
|
position: 'absolute',
|
||||||
|
borderTopLeftRadius: 10,
|
||||||
|
borderTopRightRadius: 10,
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
color: '#001846',
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: '700',
|
||||||
|
margin: 12,
|
||||||
|
marginTop: 20,
|
||||||
|
},
|
||||||
|
items: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
width: ITEM_WIDTH,
|
||||||
|
minWidth: 70,
|
||||||
|
paddingVertical: 10,
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: 4,
|
||||||
|
},
|
||||||
|
itemImage: {
|
||||||
|
width: 50,
|
||||||
|
height: 50,
|
||||||
|
marginBottom: 2,
|
||||||
|
},
|
||||||
|
badge: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
height: 9,
|
||||||
|
width: 9,
|
||||||
|
backgroundColor: '#FF6500',
|
||||||
|
borderRadius: 4.5,
|
||||||
|
},
|
||||||
|
itemText: {
|
||||||
|
color: '#11102C',
|
||||||
|
fontSize: 15,
|
||||||
|
fontWeight: '500',
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1,181 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Image,
|
||||||
|
ImageSourcePropType,
|
||||||
|
Platform,
|
||||||
|
StyleSheet,
|
||||||
|
Text,
|
||||||
|
TouchableOpacity,
|
||||||
|
View,
|
||||||
|
} from 'react-native';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
yiwangqianNum?: string; // 医网签未处理数量
|
||||||
|
suifangNum?: string; // 随访未处理数量
|
||||||
|
hospitalNum?: string; // 云诊室未处理数量
|
||||||
|
onPressYiwangqian?: () => void; // 点击医网签
|
||||||
|
onPressSuifang?: () => void; // 点击随访中心
|
||||||
|
onPressHospital?: () => void; // 点击云诊室
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 首页顶部医生代办视图
|
||||||
|
*/
|
||||||
|
export default function HomeTodoView(props: Props) {
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<Image
|
||||||
|
style={styles.arrow}
|
||||||
|
source={require('@app/assets/images/home/home_todo_arrow.png')}
|
||||||
|
/>
|
||||||
|
<View style={styles.content}>
|
||||||
|
{/* <Text style={styles.title}>今日未处理</Text> */}
|
||||||
|
|
||||||
|
<View style={styles.items}>
|
||||||
|
<TodoItem
|
||||||
|
title="医网签"
|
||||||
|
text="待签数量"
|
||||||
|
number={props.yiwangqianNum ?? '0'}
|
||||||
|
backgroundImage={require('@app/assets/images/home/home_todo_yiwangqian.png')}
|
||||||
|
onPress={() => {
|
||||||
|
props.onPressYiwangqian && props.onPressYiwangqian();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<TodoItem
|
||||||
|
title="随访中心"
|
||||||
|
text="待入组人数"
|
||||||
|
number={props.suifangNum ?? '0'}
|
||||||
|
backgroundImage={require('@app/assets/images/home/home_todo_suifang.png')}
|
||||||
|
onPress={() => {
|
||||||
|
props.onPressSuifang && props.onPressSuifang();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<TodoItem
|
||||||
|
title="云诊室"
|
||||||
|
text="待接诊人数"
|
||||||
|
number={props.hospitalNum ?? '0'}
|
||||||
|
backgroundImage={require('@app/assets/images/home/home_todo_hospital.png')}
|
||||||
|
onPress={() => {
|
||||||
|
props.onPressHospital && props.onPressHospital();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TodoItem(props: {
|
||||||
|
title: string; // 标题
|
||||||
|
text: string; // 中间文字
|
||||||
|
number: string; // 底部数字
|
||||||
|
backgroundImage: ImageSourcePropType; // 背景图片
|
||||||
|
onPress?: () => void; // 点击
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.item}
|
||||||
|
onPress={() => {
|
||||||
|
props.onPress && props.onPress();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<View style={styles.itemContent}>
|
||||||
|
<Image style={styles.itemBackground} source={props.backgroundImage} />
|
||||||
|
<View style={styles.itemTop}>
|
||||||
|
<View style={styles.itemTopBadge} />
|
||||||
|
<Text style={styles.itemTopText} numberOfLines={1}>
|
||||||
|
{props.title}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.itemNumber} numberOfLines={1}>
|
||||||
|
{props.number}
|
||||||
|
</Text>
|
||||||
|
<Text numberOfLines={1} style={styles.itemText}>
|
||||||
|
{props.text}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
marginTop: 10,
|
||||||
|
},
|
||||||
|
arrow: {
|
||||||
|
width: 69,
|
||||||
|
height: 12,
|
||||||
|
marginLeft: 12,
|
||||||
|
tintColor: '#F8FDFF',
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
padding: 6,
|
||||||
|
backgroundColor: '#F8FDFF',
|
||||||
|
borderTopLeftRadius: 12,
|
||||||
|
borderTopRightRadius: 12,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
marginHorizontal: 6,
|
||||||
|
marginTop: 12,
|
||||||
|
marginBottom: 9,
|
||||||
|
fontSize: 16,
|
||||||
|
color: '#666666',
|
||||||
|
fontWeight: '700',
|
||||||
|
},
|
||||||
|
items: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
padding: 3,
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
flex: 1,
|
||||||
|
margin: 3,
|
||||||
|
backgroundColor: '#FFFFFF',
|
||||||
|
borderRadius: 8,
|
||||||
|
},
|
||||||
|
itemContent: {
|
||||||
|
flex: 1,
|
||||||
|
borderRadius: 7,
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: 12,
|
||||||
|
},
|
||||||
|
itemBackground: {
|
||||||
|
position: 'absolute',
|
||||||
|
width: 58,
|
||||||
|
height: 58,
|
||||||
|
right: -7,
|
||||||
|
bottom: -7,
|
||||||
|
},
|
||||||
|
itemTop: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
itemTopBadge: {
|
||||||
|
backgroundColor: '#1D91FF',
|
||||||
|
height: 10,
|
||||||
|
width: 3,
|
||||||
|
borderRadius: 1.5,
|
||||||
|
marginRight: 4,
|
||||||
|
},
|
||||||
|
itemTopText: {
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#000000',
|
||||||
|
},
|
||||||
|
itemText: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#999999',
|
||||||
|
marginLeft: 7,
|
||||||
|
},
|
||||||
|
itemNumber: {
|
||||||
|
color: '#000000',
|
||||||
|
fontWeight: '700',
|
||||||
|
fontSize: 24,
|
||||||
|
fontFamily: Platform.select({
|
||||||
|
android: 'DINCondensedBold',
|
||||||
|
ios: 'DIN Condensed',
|
||||||
|
}),
|
||||||
|
marginTop: 16,
|
||||||
|
marginBottom: 3,
|
||||||
|
marginLeft: 7,
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1,155 @@
|
|||||||
|
import React, {memo} from 'react';
|
||||||
|
import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
|
||||||
|
|
||||||
|
const GREETINGSTRINGS = [
|
||||||
|
'不断进步，超越自己！',
|
||||||
|
'自信自强，砥砺前行！',
|
||||||
|
'积极向上，充满信心！',
|
||||||
|
'努力追求，终达顶峰！',
|
||||||
|
'自信满满，开启新篇！',
|
||||||
|
'挥洒汗水，拥抱成功！',
|
||||||
|
'勇敢追求，梦想必达！',
|
||||||
|
'须及春光，力追朝阳！',
|
||||||
|
'笃定自信，无畏前行！',
|
||||||
|
'积极进取，永不放弃！',
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 获取打招呼字符串
|
||||||
|
*/
|
||||||
|
function getGreeting(): string {
|
||||||
|
const currentHour = new Date().getHours();
|
||||||
|
if (currentHour >= 0 && currentHour < 5) {
|
||||||
|
return '凌晨好';
|
||||||
|
} else if (currentHour >= 5 && currentHour < 8) {
|
||||||
|
return '早上好';
|
||||||
|
} else if (currentHour >= 8 && currentHour < 12) {
|
||||||
|
return '上午好';
|
||||||
|
} else if (currentHour >= 12 && currentHour < 19) {
|
||||||
|
return '下午好';
|
||||||
|
} else {
|
||||||
|
return '晚上好';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 从字符串数组中获取随机一个字符串
|
||||||
|
*/
|
||||||
|
function getRandomStringFromArray(strings: string[]): string {
|
||||||
|
const randomIndex = Math.floor(Math.random() * strings.length);
|
||||||
|
return strings[randomIndex];
|
||||||
|
}
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
nickname?: string; // 昵称
|
||||||
|
isVerified?: boolean; // 是否已实名
|
||||||
|
picUrl?: string; // 头像
|
||||||
|
onPress?: () => void; // 点击实名那里的按钮
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 首页顶部医生信息的视图
|
||||||
|
*/
|
||||||
|
function HomeTopView(props: Props) {
|
||||||
|
return (
|
||||||
|
<View style={styles.top}>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.topLeft}
|
||||||
|
onPress={() => {
|
||||||
|
props.onPress && props.onPress();
|
||||||
|
}}>
|
||||||
|
<View style={styles.avatar}>
|
||||||
|
<Image
|
||||||
|
style={styles.avatarImage}
|
||||||
|
source={
|
||||||
|
props.picUrl && props.picUrl.length > 0
|
||||||
|
? {uri: props.picUrl}
|
||||||
|
: require('@app/assets/images/mine/mine_avatar.png')
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{props.isVerified !== undefined && (
|
||||||
|
<View style={styles.avatarBadgeTouch}>
|
||||||
|
<Image
|
||||||
|
style={styles.avatarBadge}
|
||||||
|
source={
|
||||||
|
props.isVerified
|
||||||
|
? require('@app/assets/images/common/common_name_authenticated.png')
|
||||||
|
: require('@app/assets/images/common/common_name_unauthenticated.png')
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<MemoizedHomeTopRightView nickname={props.nickname} />
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo(HomeTopView);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 右边文字视图
|
||||||
|
*/
|
||||||
|
function HomeTopRightView(props: {nickname?: string}) {
|
||||||
|
return (
|
||||||
|
<View style={styles.topRight}>
|
||||||
|
<Text style={styles.topTitleText} numberOfLines={1}>
|
||||||
|
{props.nickname ? `${props.nickname}，${getGreeting()}` : '---'}
|
||||||
|
</Text>
|
||||||
|
<Text style={styles.topRightText} numberOfLines={2}>
|
||||||
|
{props.nickname ? `${getRandomStringFromArray(GREETINGSTRINGS)}` : ''}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const MemoizedHomeTopRightView = memo(HomeTopRightView);
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
top: {
|
||||||
|
height: 90,
|
||||||
|
flexDirection: 'row',
|
||||||
|
},
|
||||||
|
topLeft: {
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
avatar: {
|
||||||
|
width: 73,
|
||||||
|
height: 73,
|
||||||
|
borderRadius: 37,
|
||||||
|
backgroundColor: '#FFFFFF',
|
||||||
|
marginHorizontal: 12,
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
avatarImage: {
|
||||||
|
width: 73,
|
||||||
|
height: 73,
|
||||||
|
borderRadius: 73,
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: '#FFF5E9',
|
||||||
|
},
|
||||||
|
avatarBadgeTouch: {
|
||||||
|
width: 63,
|
||||||
|
height: 18,
|
||||||
|
top: -8,
|
||||||
|
},
|
||||||
|
avatarBadge: {
|
||||||
|
width: 63,
|
||||||
|
height: 18,
|
||||||
|
},
|
||||||
|
topRight: {
|
||||||
|
flex: 1,
|
||||||
|
marginRight: 12,
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
topTitleText: {
|
||||||
|
fontSize: 19,
|
||||||
|
color: '#17171A',
|
||||||
|
fontWeight: '600',
|
||||||
|
},
|
||||||
|
topRightText: {
|
||||||
|
color: '#17171A',
|
||||||
|
marginTop: 14,
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
import {useCallback} from 'react';
|
||||||
|
import {Banner, Feature} from '@app/screens/api';
|
||||||
|
import {NavigationProp, useNavigation} from '@react-navigation/native';
|
||||||
|
import {MainParamList} from '@app/routes/MainParamList';
|
||||||
|
import { showErrorMessage } from '@common/ToastHelper.ts';
|
||||||
|
|
||||||
|
const useHandleClickBannerListItem = (
|
||||||
|
handleClickFeatureListItem: (feature: Feature) => void,
|
||||||
|
) => {
|
||||||
|
const navigation = useNavigation<NavigationProp<MainParamList>>();
|
||||||
|
// 点击轮播图
|
||||||
|
const handleClickBannerListItem = useCallback(
|
||||||
|
(banner: Banner) => {
|
||||||
|
// TODO: 处理 banner 版本是否低于手机app版本？
|
||||||
|
if (banner.jumpType === 'noSkip') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (banner.jumpType === 'link') {
|
||||||
|
if (banner.skipUrl === undefined) {
|
||||||
|
showErrorMessage('链接配置错误，url没有配置');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (banner.jumpType === 'activity') {
|
||||||
|
if (banner.activityInfo) {
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (banner.jumpType === 'miniApp') {
|
||||||
|
if (banner.miniAppInfo) {
|
||||||
|
handleClickFeatureListItem(banner.miniAppInfo);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (banner.jumpType === 'hotNews') {
|
||||||
|
if (banner.articleId) {
|
||||||
|
navigation.navigate('ArticleDetail', {id: banner.articleId});
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[handleClickFeatureListItem, navigation],
|
||||||
|
);
|
||||||
|
|
||||||
|
return handleClickBannerListItem;
|
||||||
|
};
|
||||||
|
|
||||||
|
export {useHandleClickBannerListItem};
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
import React, { useCallback } from 'react';
|
||||||
|
import { StyleSheet, Text } from 'react-native';
|
||||||
|
import { Feature, useSubServerCheck } from '../api';
|
||||||
|
import Toast from 'react-native-toast-message';
|
||||||
|
import Alert from '@common/components/Alert.tsx';
|
||||||
|
import { useAuth } from '@common/contexts/useAuth.ts';
|
||||||
|
|
||||||
|
// 点击精品模块
|
||||||
|
const useHandleClickFeatureListItem = () => {
|
||||||
|
const { loading: subServerCheckLoading, fetchAsync: subServerCheckFetch } =
|
||||||
|
useSubServerCheck(); // 检查精品服务功能块是否可以进
|
||||||
|
|
||||||
|
const {
|
||||||
|
state: { userInfo },
|
||||||
|
} = useAuth();
|
||||||
|
|
||||||
|
// 点击精品服务功能块
|
||||||
|
const handleClickFeatureListItem = useCallback(
|
||||||
|
(feature: Feature) => {
|
||||||
|
// 只有实名可以进入
|
||||||
|
if (userInfo?.realNameStatus !== 'success') {
|
||||||
|
// 未实名的需要实名
|
||||||
|
Alert.show(
|
||||||
|
'立即实名认证',
|
||||||
|
<Text style={styles.alertText}>
|
||||||
|
{'您还未实名认证，请认证后再操作～'}
|
||||||
|
</Text>,
|
||||||
|
{
|
||||||
|
action: () => {},
|
||||||
|
},
|
||||||
|
{},
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
subServerCheckFetch({
|
||||||
|
data: {
|
||||||
|
nsId: feature.uniqueId,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then(r => {
|
||||||
|
console.log('厂商信息', r);
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
Toast.show(e.message);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[subServerCheckFetch, userInfo],
|
||||||
|
);
|
||||||
|
return { subServerCheckLoading, handleClickFeatureListItem };
|
||||||
|
};
|
||||||
|
|
||||||
|
export { useHandleClickFeatureListItem };
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
alertText: {
|
||||||
|
textAlign: 'center',
|
||||||
|
color: '#999999',
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
|
import { useUnreadRemind } from '../api';
|
||||||
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||||
|
import { DeviceEventEmitter } from 'react-native';
|
||||||
|
import {
|
||||||
|
PERSONAL_NOTIFICATION,
|
||||||
|
PLATFORM_NOTIFICATION,
|
||||||
|
} from '@common/constants';
|
||||||
|
import { showErrorMessage } from '@common/ToastHelper.ts';
|
||||||
|
|
||||||
|
const useHandleUnreadRemind = () => {
|
||||||
|
const [unread, setUnread] = useState(false);
|
||||||
|
const { loading: unreadRemindLoading, fetchAsync: unreadRemindFetch } =
|
||||||
|
useUnreadRemind();
|
||||||
|
|
||||||
|
const handleUnreadRemindFetch = useCallback(() => {
|
||||||
|
// 注意：这里取旧模块存储的最后已读时间，后续重构可能会删除或修改此处逻辑
|
||||||
|
AsyncStorage.getItem('readNoticeLastTime')
|
||||||
|
.then(value => {
|
||||||
|
const parsedValue = JSON.parse(value ?? '{}');
|
||||||
|
let time = parsedValue?.readNoticeLastTime;
|
||||||
|
if (time === null || time === undefined) {
|
||||||
|
time = '2000-01-01 00:00:00';
|
||||||
|
}
|
||||||
|
unreadRemindFetch({
|
||||||
|
data: {
|
||||||
|
timeStamp: time,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then(r => {
|
||||||
|
setUnread(r.unread);
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
showErrorMessage(e.message);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
showErrorMessage(e.message);
|
||||||
|
});
|
||||||
|
}, [unreadRemindFetch]);
|
||||||
|
|
||||||
|
// 【监听im】
|
||||||
|
// 监听系统公告
|
||||||
|
useEffect(() => {
|
||||||
|
const listener = DeviceEventEmitter.addListener(
|
||||||
|
PLATFORM_NOTIFICATION,
|
||||||
|
() => {
|
||||||
|
// 刷新铃铛接口
|
||||||
|
handleUnreadRemindFetch();
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
listener.remove();
|
||||||
|
};
|
||||||
|
}, [handleUnreadRemindFetch]);
|
||||||
|
|
||||||
|
// 监听站内信
|
||||||
|
useEffect(() => {
|
||||||
|
const listener = DeviceEventEmitter.addListener(
|
||||||
|
PERSONAL_NOTIFICATION,
|
||||||
|
() => {
|
||||||
|
// 刷新铃铛接口
|
||||||
|
handleUnreadRemindFetch();
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
listener.remove();
|
||||||
|
};
|
||||||
|
}, [handleUnreadRemindFetch]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
unread,
|
||||||
|
unreadRemindLoading,
|
||||||
|
handleUnreadRemindFetch,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export { useHandleUnreadRemind };
|
||||||
@ -0,0 +1,147 @@
|
|||||||
|
import React, { useRef } from 'react';
|
||||||
|
import {
|
||||||
|
Image,
|
||||||
|
ImageBackground,
|
||||||
|
Pressable,
|
||||||
|
StyleSheet,
|
||||||
|
Text,
|
||||||
|
View,
|
||||||
|
} from 'react-native';
|
||||||
|
import { StackScreenProps } from '@react-navigation/stack';
|
||||||
|
import { MainParamList } from '@app/routes/MainParamList';
|
||||||
|
import SubmitButton from '@common/components/SubmitButton';
|
||||||
|
import { useCustomrConfig } from './api';
|
||||||
|
import Spinner from '@common/components/Spinner';
|
||||||
|
import DataEmpty from '@common/components/DataEmpty';
|
||||||
|
import ViewShot from 'react-native-view-shot';
|
||||||
|
|
||||||
|
type Props = StackScreenProps<MainParamList, 'ContactSupport'>;
|
||||||
|
|
||||||
|
export default function ContactSupportScreen(props: Props) {
|
||||||
|
const {navigation} = props;
|
||||||
|
|
||||||
|
const shotRef = useRef<ViewShot>(null); // 保存到本地的视图的引用
|
||||||
|
|
||||||
|
// 【接口】
|
||||||
|
const {response, error, loading, fetch} = useCustomrConfig();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<Pressable
|
||||||
|
style={[StyleSheet.absoluteFill, styles.background]}
|
||||||
|
onPress={() => {
|
||||||
|
navigation.pop();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<View style={styles.content}>
|
||||||
|
<ViewShot
|
||||||
|
ref={shotRef}
|
||||||
|
options={{
|
||||||
|
fileName: 'qrcode',
|
||||||
|
format: 'png',
|
||||||
|
quality: 1,
|
||||||
|
}}>
|
||||||
|
<ImageBackground
|
||||||
|
style={styles.imageBackground}
|
||||||
|
source={require('@app/assets/images/mine/mine_contact_support_background.png')}>
|
||||||
|
<View style={styles.header}>
|
||||||
|
<Image
|
||||||
|
style={styles.headerImage}
|
||||||
|
source={require('@app/assets/images/mine/mine_contact_support.png')}
|
||||||
|
/>
|
||||||
|
<Text style={styles.headerTitle} numberOfLines={1}>
|
||||||
|
医网信小助手
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.headerText} numberOfLines={1}>
|
||||||
|
服务时间:9:00-18:00
|
||||||
|
</Text>
|
||||||
|
<View style={styles.qrCodeView}>
|
||||||
|
{loading === true ? (
|
||||||
|
<Spinner />
|
||||||
|
) : error !== undefined ? (
|
||||||
|
<DataEmpty
|
||||||
|
reload={() => {
|
||||||
|
fetch();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : response?.imgUrl ? (
|
||||||
|
<Image
|
||||||
|
style={styles.qrCodeImage}
|
||||||
|
source={{uri: response.imgUrl}}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</View>
|
||||||
|
</ImageBackground>
|
||||||
|
</ViewShot>
|
||||||
|
<SubmitButton
|
||||||
|
title="保存到相册"
|
||||||
|
theme="dark"
|
||||||
|
style={styles.submit}
|
||||||
|
onPress={() => {
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
background: {
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
width: '70%',
|
||||||
|
},
|
||||||
|
imageBackground: {
|
||||||
|
width: '100%',
|
||||||
|
aspectRatio: 260 / 357,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginLeft: 12,
|
||||||
|
marginRight: 18, // 背景图不是中心对称，内容需要向左偏移一些
|
||||||
|
},
|
||||||
|
headerImage: {
|
||||||
|
width: 17,
|
||||||
|
height: 17,
|
||||||
|
marginRight: 6,
|
||||||
|
},
|
||||||
|
headerTitle: {
|
||||||
|
color: '#1D91FF',
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: '600',
|
||||||
|
},
|
||||||
|
headerText: {
|
||||||
|
color: '#999999',
|
||||||
|
fontSize: 12,
|
||||||
|
marginVertical: 12,
|
||||||
|
marginLeft: 12,
|
||||||
|
marginRight: 18, // 背景图不是中心对称，内容需要向左偏移一些
|
||||||
|
},
|
||||||
|
qrCodeView: {
|
||||||
|
aspectRatio: 1,
|
||||||
|
width: '80%',
|
||||||
|
borderRadius: 5,
|
||||||
|
borderColor: 'rgba(1, 137, 255, 0.14)',
|
||||||
|
borderWidth: 4.5,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginRight: 6, // 背景图不是中心对称，内容需要向左偏移一些
|
||||||
|
},
|
||||||
|
qrCodeImage: {
|
||||||
|
width: '90%',
|
||||||
|
height: '90%',
|
||||||
|
},
|
||||||
|
submit: {
|
||||||
|
marginTop: 24,
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export * from './useCustomrConfig';
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import {useApi} from '@common/api/useApi.ts';
|
||||||
|
import {z} from 'zod';
|
||||||
|
|
||||||
|
// 客服信息
|
||||||
|
// {"collection": "customer_config_info", "id": "{\"$oid\":\"66050aa9986acc61cd268da4\"}", "imgUrl": "https://tms-dev.oss-cn-beijing.aliyuncs.com/banner/headimg_40fa54e416eb439faf4dd95a2f4a9948.png", "phones": "18312341234,18012312332", "wx": "wx-123456633"}
|
||||||
|
const useCustomrConfig = () => {
|
||||||
|
return useApi(
|
||||||
|
'/am/v1/feedback/getCustomerConfig',
|
||||||
|
'GET',
|
||||||
|
undefined,
|
||||||
|
z.object({
|
||||||
|
imgUrl: z.string().url(), // 二维码图片
|
||||||
|
}),
|
||||||
|
{automatic: true, loadingDelay: 500},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export {useCustomrConfig};
|
||||||
@ -0,0 +1,400 @@
|
|||||||
|
import React, {
|
||||||
|
useCallback,
|
||||||
|
useEffect,
|
||||||
|
useLayoutEffect,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
} from 'react';
|
||||||
|
import {
|
||||||
|
Image,
|
||||||
|
NativeEventEmitter,
|
||||||
|
NativeModules,
|
||||||
|
RefreshControl,
|
||||||
|
SafeAreaView,
|
||||||
|
ScrollView,
|
||||||
|
StyleSheet,
|
||||||
|
Text,
|
||||||
|
TouchableOpacity,
|
||||||
|
View,
|
||||||
|
} from 'react-native';
|
||||||
|
import { CompositeScreenProps, useFocusEffect } from '@react-navigation/native';
|
||||||
|
import { StackScreenProps } from '@react-navigation/stack';
|
||||||
|
import { useHeaderHeight } from '@react-navigation/elements';
|
||||||
|
import { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
|
||||||
|
import { MainParamList, MainTabParamList } from '@app/routes/MainParamList';
|
||||||
|
import LinearGradient from 'react-native-linear-gradient';
|
||||||
|
import FeatureButton from './components/FeatureButton';
|
||||||
|
import { useAuth } from '@common/contexts/useAuth';
|
||||||
|
import BottomSheet from '@common/components/BottomSheet';
|
||||||
|
import useUpdateRef from '@app/hooks/useUpdateRef';
|
||||||
|
import Spinner from '@common/components/Spinner';
|
||||||
|
import { useHandleUnreadRemind } from '@app/screens/home/home/hooks/useHandleUnreadRemind';
|
||||||
|
import { debounce } from '@common/utils/commonUtils';
|
||||||
|
|
||||||
|
type Props = CompositeScreenProps<
|
||||||
|
BottomTabScreenProps<MainTabParamList, 'Mine'>,
|
||||||
|
StackScreenProps<MainParamList, 'MainTab'>
|
||||||
|
>;
|
||||||
|
|
||||||
|
export default function HomeScreen(props: Props) {
|
||||||
|
const { navigation } = props;
|
||||||
|
const headerHeight = useHeaderHeight();
|
||||||
|
|
||||||
|
const [adKey, setAdKey] = useState<string | undefined>(undefined);
|
||||||
|
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
navigation.setOptions({
|
||||||
|
title: '我的',
|
||||||
|
headerTransparent: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const pushListener = new NativeEventEmitter(
|
||||||
|
NativeModules.innerModule,
|
||||||
|
).addListener('adViewRefresh', key => {
|
||||||
|
if (key && key === 'MineScreen') {
|
||||||
|
console.log('*********************show', key);
|
||||||
|
setAdKey(new Date().getTime().toString());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return () => {
|
||||||
|
pushListener.remove();
|
||||||
|
};
|
||||||
|
}, [navigation]);
|
||||||
|
|
||||||
|
useFocusEffect(
|
||||||
|
useCallback(() => {
|
||||||
|
if (!adKey) {
|
||||||
|
setAdKey(new Date().getTime().toString());
|
||||||
|
}
|
||||||
|
}, [adKey]),
|
||||||
|
);
|
||||||
|
|
||||||
|
// 【引用】
|
||||||
|
const scrollRef = useRef<ScrollView>(null);
|
||||||
|
|
||||||
|
const {
|
||||||
|
state: { userInfo },
|
||||||
|
actions: { update },
|
||||||
|
} = useAuth();
|
||||||
|
const userInfoRef = useUpdateRef(userInfo);
|
||||||
|
|
||||||
|
const { unread, unreadRemindLoading, handleUnreadRemindFetch } =
|
||||||
|
useHandleUnreadRemind(); // 处理未读消息相关
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
handleUnreadRemindFetch();
|
||||||
|
}, [handleUnreadRemindFetch]);
|
||||||
|
|
||||||
|
// 下拉刷新
|
||||||
|
const handleRefresh = useCallback(() => {
|
||||||
|
handleUnreadRemindFetch();
|
||||||
|
}, [handleUnreadRemindFetch]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
{/* 顶部背景 */}
|
||||||
|
<View style={styles.topBackground}>
|
||||||
|
<Image
|
||||||
|
style={styles.backgroundImage}
|
||||||
|
source={require('@app/assets/images/mine/mine_background.png')}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
{/* 底部背景 */}
|
||||||
|
<View style={styles.bottomBackground}>
|
||||||
|
<Image
|
||||||
|
style={styles.bottomBackgroundImage}
|
||||||
|
source={require('@app/assets/images/mine/mine_background_logo.png')}
|
||||||
|
/>
|
||||||
|
<View style={styles.bottomBackgroundTextView}>
|
||||||
|
<LinearGradient
|
||||||
|
style={styles.bottomBackgroundLine}
|
||||||
|
start={{ x: 0, y: 0.5 }}
|
||||||
|
end={{ x: 1, y: 0.5 }}
|
||||||
|
colors={['rgba(220, 220, 220, 0.45)', 'rgba(187, 187, 187, 0.45)']}
|
||||||
|
/>
|
||||||
|
<Text style={styles.bottomBackgroundText} numberOfLines={1}>
|
||||||
|
名医首选互联网职业应用产品
|
||||||
|
</Text>
|
||||||
|
<LinearGradient
|
||||||
|
style={styles.bottomBackgroundLine}
|
||||||
|
start={{ x: 0, y: 0.5 }}
|
||||||
|
end={{ x: 1, y: 0.5 }}
|
||||||
|
colors={['rgba(187, 187, 187, 0.45)', 'rgba(220, 220, 220, 0.45)']}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
{/* 主内容 */}
|
||||||
|
<ScrollView
|
||||||
|
ref={scrollRef}
|
||||||
|
style={styles.scroll}
|
||||||
|
scrollIndicatorInsets={{ right: 1 }}
|
||||||
|
showsVerticalScrollIndicator={false}
|
||||||
|
scrollEventThrottle={16}
|
||||||
|
refreshControl={
|
||||||
|
<RefreshControl refreshing={false} onRefresh={handleRefresh} />
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{/* 顶部医生信息区域 */}
|
||||||
|
<View style={{ height: headerHeight }} />
|
||||||
|
<SafeAreaView>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.header}
|
||||||
|
onPress={() => {
|
||||||
|
debounce(() => {});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<View style={styles.headerLeft}>
|
||||||
|
<View style={styles.avatar}>
|
||||||
|
<Image
|
||||||
|
style={styles.avatarImage}
|
||||||
|
source={
|
||||||
|
userInfo?.picUrl && userInfo.picUrl.length > 0
|
||||||
|
? { uri: userInfo.picUrl }
|
||||||
|
: require('@app/assets/images/mine/mine_avatar.png')
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<View style={styles.avatarBadgeTouch}>
|
||||||
|
<Image
|
||||||
|
style={styles.avatarBadge}
|
||||||
|
source={
|
||||||
|
userInfo?.realNameStatus === 'success'
|
||||||
|
? require('@app/assets/images/common/common_name_authenticated.png')
|
||||||
|
: require('@app/assets/images/common/common_name_unauthenticated.png')
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View style={styles.headerRight}>
|
||||||
|
<View style={styles.headerTitle}>
|
||||||
|
<Text style={styles.headerTitleText} numberOfLines={1}>
|
||||||
|
{`${userInfo?.nickname ?? ''}医生`}
|
||||||
|
</Text>
|
||||||
|
<Image
|
||||||
|
style={styles.headerTitleArrow}
|
||||||
|
source={require('@app/assets/images/common/common_arrow_right_6.png')}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.headerRightText} numberOfLines={1}>
|
||||||
|
{userInfo?.phone
|
||||||
|
? `${userInfo?.phone.replace(
|
||||||
|
/(\d{3})\d{4}(\d{4})/,
|
||||||
|
'$1****$2',
|
||||||
|
)}`
|
||||||
|
: ''}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
{/* 常用功能区域 */}
|
||||||
|
<View style={styles.middle}>
|
||||||
|
<Text style={styles.middleTitle} numberOfLines={1}>
|
||||||
|
常用功能
|
||||||
|
</Text>
|
||||||
|
<View style={styles.middleContent}>
|
||||||
|
<FeatureButton
|
||||||
|
title="我的医院"
|
||||||
|
image={require('@app/assets/images/mine/mine_feature_hospitals.png')}
|
||||||
|
onPress={() => {
|
||||||
|
debounce(() => {});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<FeatureButton
|
||||||
|
title="服务权益"
|
||||||
|
image={require('@app/assets/images/mine/mine_feature_privilege.png')}
|
||||||
|
onPress={() => {
|
||||||
|
debounce(() => {});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<FeatureButton
|
||||||
|
title="密码重置"
|
||||||
|
image={require('@app/assets/images/mine/mine_feature_password.png')}
|
||||||
|
onPress={() => {
|
||||||
|
if (userInfo === undefined) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
debounce(() => {});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/* 只有用户包含冠新才有切换按钮 */}
|
||||||
|
{userInfo && userInfo.userType !== 'general' && (
|
||||||
|
<FeatureButton
|
||||||
|
title="身份切换"
|
||||||
|
image={require('@app/assets/images/mine/mine_feature_role.png')}
|
||||||
|
onPress={() => {
|
||||||
|
BottomSheet.show(
|
||||||
|
[
|
||||||
|
{ id: 0, text: '医网信（当前）' },
|
||||||
|
{ id: 1, text: '国家医疗服务数据中心用户专版' },
|
||||||
|
],
|
||||||
|
undefined,
|
||||||
|
item => {
|
||||||
|
if (userInfoRef.current === undefined) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (item.id === 1) {
|
||||||
|
// 更新当前角色
|
||||||
|
update({
|
||||||
|
...userInfoRef.current,
|
||||||
|
currentUserType: 'guanxin',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<FeatureButton
|
||||||
|
title="系统设置"
|
||||||
|
image={require('@app/assets/images/mine/mine_feature_settings.png')}
|
||||||
|
onPress={() => {
|
||||||
|
debounce(() => {});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<FeatureButton
|
||||||
|
title="咨询客服"
|
||||||
|
image={require('@app/assets/images/mine/mine_feature_service.png')}
|
||||||
|
onPress={() => {
|
||||||
|
navigation.navigate('ContactSupport');
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<FeatureButton
|
||||||
|
title="消息通知"
|
||||||
|
image={require('@app/assets/images/mine/mine_feature_notifications.png')}
|
||||||
|
badge={unread}
|
||||||
|
onPress={() => {
|
||||||
|
debounce(() => {});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</SafeAreaView>
|
||||||
|
</ScrollView>
|
||||||
|
{unreadRemindLoading && <Spinner />}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: '#F3F4F5',
|
||||||
|
},
|
||||||
|
topBackground: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
height: 260,
|
||||||
|
},
|
||||||
|
backgroundImage: {
|
||||||
|
flex: 1,
|
||||||
|
width: '100%',
|
||||||
|
},
|
||||||
|
bottomBackground: {
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 35,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
bottomBackgroundImage: {
|
||||||
|
marginVertical: 8,
|
||||||
|
},
|
||||||
|
bottomBackgroundTextView: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
bottomBackgroundLine: {
|
||||||
|
height: 1,
|
||||||
|
width: 36,
|
||||||
|
borderRadius: 0.5,
|
||||||
|
},
|
||||||
|
bottomBackgroundText: {
|
||||||
|
color: 'rgba(133, 133, 133, 0.45)',
|
||||||
|
fontSize: 12,
|
||||||
|
marginHorizontal: 5,
|
||||||
|
},
|
||||||
|
scroll: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
height: 90,
|
||||||
|
flexDirection: 'row',
|
||||||
|
},
|
||||||
|
headerLeft: {
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
avatar: {
|
||||||
|
width: 73,
|
||||||
|
height: 73,
|
||||||
|
borderRadius: 37,
|
||||||
|
backgroundColor: '#FFFFFF',
|
||||||
|
marginHorizontal: 12,
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
avatarImage: {
|
||||||
|
width: 73,
|
||||||
|
height: 73,
|
||||||
|
borderRadius: 73,
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: '#FFF5E9',
|
||||||
|
},
|
||||||
|
avatarBadgeTouch: {
|
||||||
|
width: 63,
|
||||||
|
height: 18,
|
||||||
|
top: -8,
|
||||||
|
},
|
||||||
|
avatarBadge: {
|
||||||
|
width: 63,
|
||||||
|
height: 18,
|
||||||
|
},
|
||||||
|
headerRight: {
|
||||||
|
flex: 1,
|
||||||
|
marginRight: 12,
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
headerTitle: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
headerTitleText: {
|
||||||
|
flexShrink: 1,
|
||||||
|
fontSize: 19,
|
||||||
|
color: '#17171A',
|
||||||
|
fontWeight: '600',
|
||||||
|
},
|
||||||
|
headerTitleArrow: {
|
||||||
|
width: 6,
|
||||||
|
height: 10,
|
||||||
|
tintColor: '#17171A',
|
||||||
|
marginLeft: 8,
|
||||||
|
},
|
||||||
|
headerRightText: {
|
||||||
|
color: '#17171A',
|
||||||
|
marginTop: 14,
|
||||||
|
},
|
||||||
|
middle: {
|
||||||
|
margin: 12,
|
||||||
|
padding: 12,
|
||||||
|
backgroundColor: '#FFFFFF',
|
||||||
|
borderRadius: 10,
|
||||||
|
},
|
||||||
|
middleTitle: {
|
||||||
|
alignSelf: 'flex-start',
|
||||||
|
color: '#001846',
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: '600',
|
||||||
|
marginBottom: 12,
|
||||||
|
marginTop: 4,
|
||||||
|
},
|
||||||
|
middleContent: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
marginBottom: 10,
|
||||||
|
},
|
||||||
|
carousel: {
|
||||||
|
// marginHorizontal: PADDING_HORIZONTAL,
|
||||||
|
height: 120,
|
||||||
|
borderRadius: 6,
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Image,
|
||||||
|
ImageSourcePropType,
|
||||||
|
StyleSheet,
|
||||||
|
Text,
|
||||||
|
TouchableOpacity,
|
||||||
|
View,
|
||||||
|
} from 'react-native';
|
||||||
|
|
||||||
|
const ITEM_WIDTH = '25%'; // 图标宽度
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
image: ImageSourcePropType;
|
||||||
|
title: string;
|
||||||
|
badge?: boolean;
|
||||||
|
onPress?: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function FeatureButton(props: Props) {
|
||||||
|
if (props.title === '咨询客服') {
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.container}
|
||||||
|
onPress={() => {
|
||||||
|
props.onPress && props.onPress();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<View>
|
||||||
|
<Image style={styles.image} source={props.image} />
|
||||||
|
<Text style={styles.text} numberOfLines={1}>
|
||||||
|
{props.title}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.container}
|
||||||
|
onPress={() => {
|
||||||
|
props.onPress && props.onPress();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<View>
|
||||||
|
<Image style={styles.image} source={props.image} />
|
||||||
|
{props.badge === true && <View style={styles.badge} />}
|
||||||
|
</View>
|
||||||
|
<Text style={styles.text} numberOfLines={1}>
|
||||||
|
{props.title}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
width: ITEM_WIDTH,
|
||||||
|
minWidth: 50,
|
||||||
|
paddingVertical: 12,
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: 4,
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
width: 24,
|
||||||
|
height: 24,
|
||||||
|
marginBottom: 6,
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
color: '#130700',
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
badge: {
|
||||||
|
position: 'absolute',
|
||||||
|
width: 6,
|
||||||
|
height: 6,
|
||||||
|
backgroundColor: '#FF6500',
|
||||||
|
borderRadius: 3,
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
之前 宽度: | 高度: | 大小: 9.0 KiB 之后 宽度: | 高度: | 大小: 9.0 KiB |
|
之前 宽度: | 高度: | 大小: 30 KiB 之后 宽度: | 高度: | 大小: 30 KiB |
|
之前 宽度: | 高度: | 大小: 50 KiB 之后 宽度: | 高度: | 大小: 50 KiB |
@ -12,12 +12,16 @@ import 'react-native-device-info';
|
|||||||
// 应用间路由工具
|
// 应用间路由工具
|
||||||
import '@common/NavigationHelper';
|
import '@common/NavigationHelper';
|
||||||
import '@common/UpdateHelper.ts';
|
import '@common/UpdateHelper.ts';
|
||||||
// 弹出相关
|
// 自定义组件
|
||||||
import '@common/ToastHelper.ts';
|
import '@common/ToastHelper.ts';
|
||||||
import '@common/components/Alert.tsx';
|
import '@common/components/Alert.tsx';
|
||||||
import '@common/components/BottomSheet.tsx';
|
import '@common/components/BottomSheet.tsx';
|
||||||
import '@common/components/HeaderBackImage.tsx';
|
import '@common/components/HeaderBackImage.tsx';
|
||||||
import '@common/components/Spinner.tsx';
|
import '@common/components/Spinner.tsx';
|
||||||
|
import '@common/components/Separator.tsx';
|
||||||
|
import '@common/components/DataEmpty.tsx';
|
||||||
|
import '@common/components/ListEmpty.tsx';
|
||||||
|
import '@common/components/TabBarIcon.tsx';
|
||||||
// 工具
|
// 工具
|
||||||
import '@common/utils/commonUtils.ts';
|
import '@common/utils/commonUtils.ts';
|
||||||
import '@common/utils/md5';
|
import '@common/utils/md5';
|
||||||
|
|||||||
@ -0,0 +1,58 @@
|
|||||||
|
import React, { JSX } from 'react';
|
||||||
|
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
title?: string;
|
||||||
|
info?: string;
|
||||||
|
reload: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function DataEmpty(props: Props): JSX.Element {
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<Text style={styles.title}>{props.title ?? '网络加载失败'}</Text>
|
||||||
|
{props.info && <Text style={styles.info}>{props.info}</Text>}
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.button}
|
||||||
|
onPress={() => {
|
||||||
|
props.reload();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text style={styles.buttonText}>重新加载</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
textAlign: 'center',
|
||||||
|
color: '#4E4E4E',
|
||||||
|
fontSize: 15,
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
textAlign: 'center',
|
||||||
|
color: '#6B6B6B',
|
||||||
|
fontSize: 14,
|
||||||
|
marginVertical: 8,
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
width: 100,
|
||||||
|
height: 40,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: '#A9A9A9',
|
||||||
|
borderRadius: 8,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
margin: 28,
|
||||||
|
},
|
||||||
|
buttonText: {
|
||||||
|
color: '#2B2B2B',
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
import React, { JSX } from 'react';
|
||||||
|
import { Image, StyleSheet, Text, View } from 'react-native';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
text?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function ListEmpty(props: Props): JSX.Element {
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<Image
|
||||||
|
style={styles.image}
|
||||||
|
resizeMode="contain"
|
||||||
|
source={require('@common/assets/images/common_list_empty.png')}
|
||||||
|
/>
|
||||||
|
<Text style={styles.text}>
|
||||||
|
{props.text && props.text.length > 0 ? props.text : '暂无数据'}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginTop: 50,
|
||||||
|
marginBottom: 20,
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
width: 150,
|
||||||
|
height: 102,
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
textAlign: 'center',
|
||||||
|
color: '#6B6B75',
|
||||||
|
fontSize: 14,
|
||||||
|
marginTop: 15,
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
style?: StyleProp<ViewStyle>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Separator(props: Props) {
|
||||||
|
return <View style={[styles.separator, props.style]} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
separator: {
|
||||||
|
backgroundColor: '#F6F8FB',
|
||||||
|
marginHorizontal: 12,
|
||||||
|
height: 0.5,
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {Image, ImageSourcePropType, StyleSheet, View} from 'react-native';
|
||||||
|
import {TAB_BAR_ICON_SIZE} from '@common/constants';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
focused: boolean;
|
||||||
|
size: number;
|
||||||
|
activeImage: ImageSourcePropType;
|
||||||
|
inactiveImage: ImageSourcePropType;
|
||||||
|
activeTintColor?: string;
|
||||||
|
inactiveTintColor: string;
|
||||||
|
badge?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function TabBarIcon(props: Props) {
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
styles.container,
|
||||||
|
{
|
||||||
|
width: props.size,
|
||||||
|
height: props.size,
|
||||||
|
},
|
||||||
|
]}>
|
||||||
|
<Image
|
||||||
|
source={props.focused ? props.activeImage : props.inactiveImage}
|
||||||
|
style={
|
||||||
|
props.focused
|
||||||
|
? {
|
||||||
|
height: TAB_BAR_ICON_SIZE,
|
||||||
|
width: TAB_BAR_ICON_SIZE,
|
||||||
|
tintColor: props.activeTintColor,
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
height: TAB_BAR_ICON_SIZE,
|
||||||
|
width: TAB_BAR_ICON_SIZE,
|
||||||
|
tintColor: props.inactiveTintColor,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{props.badge === true && <View style={styles.badge} />}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
},
|
||||||
|
badge: {
|
||||||
|
position: 'absolute',
|
||||||
|
width: 9,
|
||||||
|
height: 9,
|
||||||
|
right: 0,
|
||||||
|
top: 0,
|
||||||
|
borderRadius: 9,
|
||||||
|
backgroundColor: '#FF3500',
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -1,6 +1,12 @@
|
|||||||
export type CommonParamList = {
|
export type CommonParamList = {
|
||||||
|
// 通用的 webview 页面
|
||||||
WebView: {
|
WebView: {
|
||||||
url: string; // 地址
|
// 地址
|
||||||
title?: string; // 标题
|
url: string;
|
||||||
}; // 通用的 webview 页面
|
// 标题
|
||||||
|
title?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 扫一扫
|
||||||
|
Scan: undefined;
|
||||||
};
|
};
|
||||||
|
|||||||
@ -0,0 +1,28 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { StyleSheet, Text, View } from 'react-native';
|
||||||
|
import { StackScreenProps } from '@react-navigation/stack';
|
||||||
|
import { CommonParamList } from '@common/router/CommonParamList.ts';
|
||||||
|
|
||||||
|
type Props = StackScreenProps<CommonParamList, 'Scan'>;
|
||||||
|
|
||||||
|
export default function ScanScreen(props: Props) {
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<Text>扫一扫</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
webview: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
activityIndicator: {
|
||||||
|
position: 'absolute',
|
||||||
|
alignSelf: 'center',
|
||||||
|
top: 100,
|
||||||
|
},
|
||||||
|
});
|
||||||
正在加载...
在新工单中引用
屏蔽一个用户
