wishpal_ironfan
/
tiefen_space_app
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复帐号切换，滚动消息等问题 (#31) 

Co-authored-by: al <al@cdhncy.com>
Reviewed-on: https://git.wishpal.cn/wishpal_ironfan/tiefen_space_app/pulls/31
This commit is contained in:
yezian 2025-01-23 17:32:48 +08:00
parent b42f908049
commit 7eda5e4fd6
4 changed files with 163 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

235
screeens/NoticeDetail/components/MessageList/index.jsx
View File

@ -3,6 +3,9 @@ import {
TouchableOpacity, TouchableOpacity,
Image as NativeImage, Image as NativeImage,
Text, Text,
Platform,
ScrollView,
KeyboardAvoidingView,
} from "react-native"; } from "react-native";
import React, { import React, {
useState, useState,
@ -20,14 +23,17 @@ import requireAPI from "../../../../utils/requireAPI";
import { Image } from "expo-image"; import { Image } from "expo-image";
import { connect } from "react-redux"; import { connect } from "react-redux";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { useFocusEffect } from "@react-navigation/native";
import ScrollNotice from "../ScrollNotice"; import ScrollNotice from "../ScrollNotice";
import { goToPage } from "../../../../utils/tools"; import { goToPage } from "../../../../utils/tools";
import { get } from "../../../../utils/storeInfo";
const MessageList = ({ navigation, noticeCount, refInstance }) => { const MessageList = ({ navigation, noticeCount, refInstance }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [data, setData] = useState([]); const [data, setData] = useState([]);
const [scollNotice, setScollNotice] = useState({}); const [scollNotice, setScollNotice] = useState({});
const tailwind = useTailwind(); const tailwind = useTailwind();
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const [account, setAccount] = useState(null);
const [infoItems, setInfoItems] = useState([ const [infoItems, setInfoItems] = useState([
{ {
title: "系统通知", title: "系统通知",
@ -100,10 +106,17 @@ const MessageList = ({ navigation, noticeCount, refInstance }) => {
} }
}, },
})); }));
useFocusEffect(() => {
const getAccount = async () => {
const account = await get("account");
setAccount(account?.mid);
};
getAccount();
});
useEffect(() => { useEffect(() => {
getData(); getData();
getActiveNotice(); getActiveNotice();
}, [noticeCount]); }, [noticeCount, account]);
const getData = async () => { const getData = async () => {
try { try {
const base = await baseRequest(); const base = await baseRequest();
@ -129,6 +142,7 @@ const MessageList = ({ navigation, noticeCount, refInstance }) => {
return; return;
} }
const noticeObj = _data.data.result; const noticeObj = _data.data.result;
const noticeCount = Object.values(noticeObj).reduce( const noticeCount = Object.values(noticeObj).reduce(
(acc, cur) => acc + cur.unread_cnt, (acc, cur) => acc + cur.unread_cnt,
0 0
@ -146,6 +160,9 @@ const MessageList = ({ navigation, noticeCount, refInstance }) => {
); );
newInfoItems[parseInt(it)]["subtitle"] = newInfoItems[parseInt(it)]["subtitle"] =
noticeObj[it].most_recent_notif.title; noticeObj[it].most_recent_notif.title;
} else {
newInfoItems[parseInt(it)]["time"] = "";
newInfoItems[parseInt(it)]["subtitle"] = "暂无新消息";
} }
}); });
return newInfoItems; return newInfoItems;
@ -262,120 +279,130 @@ const MessageList = ({ navigation, noticeCount, refInstance }) => {
// }), // }),
// }); // });
return ( return (
<View <KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
keyboardVerticalOffset={insets.bottom + 60}
style={{ style={{
paddingTop: insets.top,
paddingLeft: insets.left, paddingLeft: insets.left,
paddingRight: insets.right, paddingRight: insets.right,
...tailwind("flex flex-1 p-4"), ...tailwind("flex-1"),
}} }}
> >
{/* 广告轮播 */} <ScrollView style={tailwind("px-4")}>
{!!scollNotice?.content && ( <View style={tailwind("my-2")}>
<ScrollNotice {/* 广告轮播 */}
navigation={navigation} {!!scollNotice?.content && (
content={scollNotice?.content} <ScrollNotice
length={scollNotice?.content.length} navigation={navigation}
url={(() => { content={scollNotice?.content}
const links = scollNotice?.hyperlinks; length={4}
let link = null; url={(() => {
if (links.length > 1) { const links = scollNotice?.hyperlinks;
link = links.filter((it) => it.action === "inward")[0]?.url; let link = null;
} else { if (links.length > 1) {
link = links[0]?.url; link = links.filter((it) => it.action === "inward")[0]?.url;
} } else {
const linkAndParams = goToPage({ link = links[0]?.url;
action: links[0]?.action, }
url: link, const linkAndParams = goToPage({
}); action: links[0]?.action,
return linkAndParams; url: link,
})()} });
action={scollNotice?.hyperlinks[0]?.action} return linkAndParams;
/> })()}
)} action={scollNotice?.hyperlinks[0]?.action}
{/* 官方消息 */}
<View
style={{
...tailwind("flex flex-col rounded-2xl mt-3.5"),
// backgroundColor: "#ffffff6d",
}}
>
{infoItems.map((it, index) => renderSystemItem(it, index, navigation))}
</View>
{/* 私聊消息 */}
<View
style={{
...tailwind("flex flex-col rounded-2xl mt-2 border-2"),
}}
>
<TouchableOpacity
onPress={() =>
navigation.navigate("MessageDetail", {
mid: 1,
})
}
style={{
...tailwind("flex flex-row items-center py-4 mb-2 rounded-xl"),
}}
>
<View style={tailwind("px-4")}>
<Image
width={54}
height={54}
source={require("../../../../assets/images/icon_border.png")}
/> />
</View> )}
{/* 官方消息 */}
<View <View
style={tailwind( style={{
"flex flex-row justify-between items-center flex-1" ...tailwind("flex flex-col rounded-2xl mt-3.5"),
)} // backgroundColor: "#ffffff6d",
}}
> >
<View style={tailwind("flex flex-col")}> {infoItems.map((it, index) =>
<View style={tailwind("flex flex-row items-center mb-2")}> renderSystemItem(it, index, navigation)
<Text )}
style={tailwind("text-base text-white font-medium mr-2")} </View>
> {/* 私聊消息 */}
铁粉空间官网 <View
</Text> style={{
<View ...tailwind("flex flex-col rounded-2xl mt-2 border-2"),
style={{ }}
...tailwind("font-medium mr-2 px-1 rounded"), >
backgroundColor: "#FF669E", <TouchableOpacity
}} onPress={() =>
> navigation.navigate("MessageDetail", {
<Text style={tailwind("text-xs text-white")}>官方</Text> mid: 1,
})
}
style={{
...tailwind("flex flex-row items-center py-4 mb-2 rounded-xl"),
}}
>
<View style={tailwind("px-4")}>
<Image
width={54}
height={54}
source={require("../../../../assets/images/icon_border.png")}
/>
</View>
<View
style={tailwind(
"flex flex-row justify-between items-center flex-1"
)}
>
<View style={tailwind("flex flex-col")}>
<View style={tailwind("flex flex-row items-center mb-2")}>
<Text
style={tailwind("text-base text-white font-medium mr-2")}
>
铁粉空间官网
</Text>
<View
style={{
...tailwind("font-medium mr-2 px-1 rounded"),
backgroundColor: "#FF669E",
}}
>
<Text style={tailwind("text-xs text-white")}>官方</Text>
</View>
</View>
<Text style={{ ...tailwind("text-xs"), color: "#FFFFFFB2" }}>
{data?.recent_contact_cs_msg || "暂无新消息"}
</Text>
</View>
<View style={{ ...tailwind("w-12"), width: 60 }}>
<Text
style={{ ...tailwind("text-xs mb-2"), color: "#FFFFFF80" }}
></Text>
{!!data.contact_cs_urc && (
<View
style={{
...tailwind("relative rounded-full"),
}}
>
<Badge
status="error"
value={
data.contact_cs_urc > 99 ? "99+" : data.contact_cs_urc
}
// containerStyle={{ position: "absolute", top: 0, right: 40 }}
badgeStyle={{
borderWidth: 0,
backgroundColor: "#FF669E",
}}
/>
</View>
)}
</View> </View>
</View> </View>
<Text style={{ ...tailwind("text-xs"), color: "#FFFFFFB2" }}> </TouchableOpacity>
{data?.recent_contact_cs_msg || "暂无新消息"}
</Text>
</View>
<View style={{ ...tailwind("w-12"), width: 60 }}>
<Text
style={{ ...tailwind("text-xs mb-2"), color: "#FFFFFF80" }}
></Text>
{!!data.contact_cs_urc && (
<View
style={{
...tailwind("relative rounded-full"),
}}
>
<Badge
status="error"
value={
data.contact_cs_urc > 99 ? "99+" : data.contact_cs_urc
}
// containerStyle={{ position: "absolute", top: 0, right: 40 }}
badgeStyle={{ borderWidth: 0, backgroundColor: "#FF669E" }}
/>
</View>
)}
</View>
</View> </View>
</TouchableOpacity> </View>
</View> </ScrollView>
</View> </KeyboardAvoidingView>
); );
}; };

63
screeens/NoticeDetail/components/ScrollNotice/index.js
View File

@ -19,13 +19,13 @@ export default function ScrollNotice({
action, action,
}) { }) {
const tailwind = useTailwind(); const tailwind = useTailwind();
const [fadeAnim] = useState(new Animated.Value(300)); // 透明度初始值为0 const [fadeAnim] = useState(new Animated.Value(length * 75 + 4));
let animation = Animated.timing(fadeAnim, { let animation = Animated.timing(fadeAnim, {
toValue: -(length * 60), toValue: -(length * 75),
duration: 4000, duration: 15000,
delay: 500, delay: 0,
easing: Easing.linear, easing: Easing.linear,
useNativeDriver: false, useNativeDriver: true,
useNativeDriverForTransform: true, // 如果动画涉及transform属性，则需要此设置 useNativeDriverForTransform: true, // 如果动画涉及transform属性，则需要此设置
}); });
useEffect(() => { useEffect(() => {
@ -39,13 +39,13 @@ export default function ScrollNotice({
animation && animation &&
animation.start(() => { animation.start(() => {
// 动画完成时的回调，重置动画值并再次运行动画以实现循环 // 动画完成时的回调，重置动画值并再次运行动画以实现循环
fadeAnim.setValue(length * 80); // 重置动画值（如果需要） fadeAnim.setValue(length * 75); // 重置动画值（如果需要）
runAnimation(); // 再次运行动画 runAnimation(); // 再次运行动画
}); });
}; };
useEffect(() => { useEffect(() => {
runAnimation(); // 组件挂载时开始动画 content.length > 10 && runAnimation(); // 组件挂载时开始动画
// 注意：这里没有清理函数，因为动画是无限循环的。 // 注意：这里没有清理函数，因为动画是无限循环的。
// 如果你需要在组件卸载时停止动画，你需要实现一个机制来跟踪组件的状态，并在适当时调用`stopAnimation`。 // 如果你需要在组件卸载时停止动画，你需要实现一个机制来跟踪组件的状态，并在适当时调用`stopAnimation`。
}, [fadeAnim]); }, [fadeAnim]);
@ -58,7 +58,7 @@ export default function ScrollNotice({
> >
<View <View
style={{ style={{
...tailwind("mr-2"), ...tailwind("mr-2 "),
}} }}
> >
<NativeImage <NativeImage
@ -68,32 +68,19 @@ export default function ScrollNotice({
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
if (typeof url === "string") { if (typeof url === "string") {
try { if (
// 尝试启动微信客户端 action === "webViewHeaderInward" ||
Linking.openURL(url).catch(() => { action === "webViewHeaderOutward"
// 启动微信客户端失败，弹出提示安装对话框 ) {
Alert.alert(
"错误提醒",
"打开链接失败，请返回重试或者联系在线客服",
[{ text: "确认", style: "cancel" }],
{ cancelable: false }
);
});
} catch (error) {
// 启动微信客户端失败，继续加载URL
console.error(error);
}
} else {
navigation.navigate(...url);
}
if (typeof url === "string") {
if (action === "webViewHeader") {
navigation.navigate("WebWithHeader", { navigation.navigate("WebWithHeader", {
title: "", title: "",
uri: url, uri: url,
}); });
return; return;
} else if (action === "webViewWithOutHeader") { } else if (
action === "webViewWithOutHeaderInward" ||
action === "webViewWithOutHeaderOutward"
) {
navigation.navigate("WebWithoutHeader", { navigation.navigate("WebWithoutHeader", {
title: "", title: "",
uri: url, uri: url,
@ -126,17 +113,27 @@ export default function ScrollNotice({
> >
<Animated.View <Animated.View
style={{ style={{
width: `${100}%`, width: length * 75,
// opacity: fadeAnim, // opacity: fadeAnim,
transform: [ transform: [
{ {
translateX: fadeAnim, translateX: content.length > 10 ? fadeAnim : 0,
}, },
], ],
paddingBottom: 5, // transform: [
// {
// translateX: -(length * 75),
// },
// ],
// paddingBottom: 5,
}} }}
> >
<Text style={{ ...tailwind("text-white ml-2 text-[#FF669E]") }}> <Text
numberOfLines={1}
style={{
...tailwind("text-white text-[#FF669E]"),
}}
>
{content} {content}
</Text> </Text>
</Animated.View> </Animated.View>

3
screeens/Refund/RefundDetail/index.jsx
View File

@ -20,7 +20,6 @@ export default function RefundDetail({ navigation, route }) {
const tailwind = useTailwind(); const tailwind = useTailwind();
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const [data, setData] = useState(null); const [data, setData] = useState(null);
const [dragging, setDragging] = useState(true);
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [selectedIndex, setIndex] = useState(2); const [selectedIndex, setIndex] = useState(2);
const [checkAble, setCheckAble] = useState(true); const [checkAble, setCheckAble] = useState(true);
@ -119,7 +118,7 @@ export default function RefundDetail({ navigation, route }) {
...tailwind("flex-1"), ...tailwind("flex-1"),
}} }}
> >
<ScrollView scrollEnabled={!dragging} style={tailwind("px-4")}> <ScrollView style={tailwind("px-4")}>
<View style={tailwind("my-2")}> <View style={tailwind("my-2")}>
<View style={tailwind("bg-[#FFFFFF1A] px-4 py-2 my-2 rounded-2xl")}> <View style={tailwind("bg-[#FFFFFF1A] px-4 py-2 my-2 rounded-2xl")}>
<View <View

3
screeens/Refund/RefundList/Reviewed/index.jsx
View File

@ -92,7 +92,6 @@ export default function Reviewed({ navigation, zid }) {
<Text <Text
style={tailwind("mr-2 text-base text-white font-medium")} style={tailwind("mr-2 text-base text-white font-medium")}
numberOfLines={1} numberOfLines={1}
ellipsizeMode="tail"
> >
{item.account.name} {item.account.name}
</Text> </Text>
@ -149,7 +148,7 @@ export default function Reviewed({ navigation, zid }) {
</View> </View>
{item?.refunds_status === 3 && ( {item?.refunds_status === 3 && (
<Text <Text
style={tailwind("mt-2 text-white text-xs text-[#F53030]")} style={tailwind("mt-2 text-white text-xs text-[#FFFFFF80]")}
> >
2小时无条件 2小时无条件
</Text> </Text>