445 lines
14 KiB
JavaScript
445 lines
14 KiB
JavaScript
import {
|
|
View,
|
|
TouchableOpacity,
|
|
Image as NativeImage,
|
|
Text,
|
|
Animated,
|
|
} from "react-native";
|
|
import React, { useState, useEffect, useRef } from "react";
|
|
import { useTailwind } from "tailwind-rn";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import { Badge } from "@rneui/themed";
|
|
import { Icon } from "@rneui/themed";
|
|
import baseRequest from "../../../utils/baseRequest";
|
|
import { generateSignature } from "../../../utils/crypto";
|
|
export default function Message({ navigation }) {
|
|
const [data, setData] = useState([]);
|
|
const [openNotices, setOpenNotices] = useState(false);
|
|
const tailwind = useTailwind();
|
|
const insets = useSafeAreaInsets();
|
|
useEffect(() => {
|
|
getData();
|
|
}, []);
|
|
const getData = async (searchValue) => {
|
|
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
|
|
try {
|
|
const base = await baseRequest();
|
|
const body = {
|
|
mid: base.b_mid,
|
|
...base,
|
|
};
|
|
const signature = await generateSignature(body);
|
|
const notice_response = await fetch(
|
|
`${apiUrl}/api/notification/get_unread_count_by_mid?signature=${signature}`,
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(body),
|
|
}
|
|
);
|
|
// const detailResponse = await fetch(
|
|
// `${apiUrl}/api/contact_customer_service_session/list_by_mid?signature=${signature}`,
|
|
// {
|
|
// method: "POST",
|
|
// headers: {
|
|
// "Content-Type": "application/json",
|
|
// },
|
|
// body: JSON.stringify({
|
|
// ...base,
|
|
// mid: base.b_mid,
|
|
// }),
|
|
// }
|
|
// );
|
|
// console.log("xxxx", detailResponse);
|
|
// const detailData = await detailResponse.json();
|
|
// console.log(detailData);
|
|
// const session_id = detailData.data.session.id;
|
|
// const message_response = await fetch(
|
|
// `${apiUrl}/api/contact_customer_service/query_unread_num?signature=${signature}`,
|
|
// {
|
|
// method: "POST",
|
|
// headers: {
|
|
// "Content-Type": "application/json",
|
|
// },
|
|
// body: JSON.stringify({ ...base, session_id }),
|
|
// }
|
|
// );
|
|
// console.log(JSON.stringify({ ...base, session_id }));
|
|
console.log("cccc", notice_response);
|
|
const notice_data = await notice_response.json();
|
|
console.log("xxxx", notice_data);
|
|
// const message_data = await message_response.json();
|
|
// const _data = await _response.json();
|
|
// if (_data.ret === -1) {
|
|
// Toast.show({
|
|
// type: "error",
|
|
// text1: _data.msg,
|
|
// topOffset: 60,
|
|
// });
|
|
// return;
|
|
// }
|
|
// setData(_data.data.list);
|
|
// console.log(message_data);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
const fadeAnimOne = useRef(new Animated.Value(-44)).current;
|
|
const fadeAnimTwo = useRef(new Animated.Value(8)).current;
|
|
const fadeAnimThree = useRef(new Animated.Value(20)).current;
|
|
const fadeAnimFour = useRef(new Animated.Value(50)).current;
|
|
const fadeAnimUpBtn = useRef(new Animated.Value(0)).current;
|
|
const fadeAnimShadow = useRef(new Animated.Value(0.8)).current;
|
|
const fadeAnimShadowTwo = useRef(new Animated.Value(0.5)).current;
|
|
|
|
const fadeIn = (object, toValue) => {
|
|
// Will change fadeAnim value to 1 in 5 seconds
|
|
Animated.timing(object, {
|
|
toValue,
|
|
duration: 400,
|
|
useNativeDriver: true,
|
|
}).start();
|
|
};
|
|
const fadeInBack = (object, toValue) => {
|
|
// Will change fadeAnim value to 1 in 5 seconds
|
|
Animated.timing(object, {
|
|
toValue,
|
|
duration: 400,
|
|
useNativeDriver: true,
|
|
}).start();
|
|
};
|
|
return (
|
|
<View
|
|
style={{
|
|
paddingTop: insets.top,
|
|
paddingLeft: insets.left,
|
|
paddingRight: insets.right,
|
|
...tailwind("flex flex-1 p-2 py-4 mt-4"),
|
|
}}
|
|
>
|
|
{/* 广告轮播 */}
|
|
<View></View>
|
|
{/* 搜索清楚 */}
|
|
<View
|
|
style={{
|
|
...tailwind("flex flex-row justify-between items-center py-4"),
|
|
}}
|
|
>
|
|
<TouchableOpacity
|
|
style={{
|
|
...tailwind(
|
|
"flex-1 bg-[#FFFFFF1A] rounded-lg px-4 py-2 text-white"
|
|
),
|
|
}}
|
|
onPress={() => navigation.navigate("Search")}
|
|
>
|
|
<Text
|
|
style={{
|
|
...tailwind("text-[#FFFFFF40] text-base"),
|
|
}}
|
|
>
|
|
搜索Ta的昵称或id
|
|
</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity>
|
|
<Icon
|
|
style={tailwind("px-2")}
|
|
type="ionicon"
|
|
name="trash"
|
|
size={28}
|
|
color="#FF669E"
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
{/* 官方消息 */}
|
|
<View
|
|
style={{
|
|
...tailwind("flex flex-col rounded-2xl relative"),
|
|
// backgroundColor: "#ffffff6d",
|
|
}}
|
|
>
|
|
<Animated.View
|
|
style={{
|
|
transform: [{ scale: fadeAnimUpBtn }],
|
|
opacity: fadeAnimUpBtn,
|
|
zIndex: openNotices ? 999 : 0,
|
|
}}
|
|
>
|
|
<View style={tailwind("flex-row justify-between items-center")}>
|
|
<Text style={{ ...tailwind("text-lg "), color: "#ffffff80" }}>
|
|
官方消息
|
|
</Text>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
fadeInBack(fadeAnimFour, 50);
|
|
fadeInBack(fadeAnimThree, 20);
|
|
fadeInBack(fadeAnimTwo, 8);
|
|
fadeInBack(fadeAnimOne, -44);
|
|
fadeInBack(fadeAnimUpBtn, 0);
|
|
fadeInBack(fadeAnimShadow, 0.8);
|
|
fadeInBack(fadeAnimShadowTwo, 0.5);
|
|
setOpenNotices(false);
|
|
}}
|
|
style={{
|
|
...tailwind("flex justify-center py-1 px-4 rounded-full mb-2"),
|
|
backgroundColor: "#FF669E1a",
|
|
}}
|
|
>
|
|
<Icon
|
|
style={{ ...tailwind("px-2") }}
|
|
type="ionicon"
|
|
name="chevron-up"
|
|
size={28}
|
|
color="#FF669E"
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</Animated.View>
|
|
|
|
<View>
|
|
<View
|
|
style={{
|
|
width: "100%",
|
|
position: "absolute",
|
|
}}
|
|
>
|
|
<View>
|
|
<Animated.View
|
|
style={{ transform: [{ translateY: fadeAnimOne }] }}
|
|
>
|
|
<TouchableOpacity
|
|
onPress={() => navigation.navigate("SystemNotice")}
|
|
style={{
|
|
...tailwind("relative"),
|
|
}}
|
|
>
|
|
<MessageItem
|
|
backgroundColor="#983e5e"
|
|
paddingVertical={8}
|
|
title="系统通知"
|
|
newestContent="官方消息通知"
|
|
time="11:00"
|
|
count="1"
|
|
navigation={navigation}
|
|
badge="官方"
|
|
icon={require("../../../assets/images/logo.png")}
|
|
click={() => navigation.navigate("SystemNotice")}
|
|
/>
|
|
<View
|
|
style={{
|
|
...tailwind("h-full w-full absolute"),
|
|
}}
|
|
>
|
|
<Animated.View
|
|
style={{
|
|
opacity: fadeAnimShadow,
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
...tailwind("rounded-xl h-full w-full"),
|
|
backgroundColor: "#000000",
|
|
}}
|
|
></View>
|
|
</Animated.View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</Animated.View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View
|
|
style={{
|
|
width: "100%",
|
|
position: "absolute",
|
|
zIndex: 10,
|
|
}}
|
|
>
|
|
<Animated.View style={{ transform: [{ translateY: fadeAnimTwo }] }}>
|
|
<TouchableOpacity
|
|
onPress={() => navigation.navigate("SystemNotice")}
|
|
>
|
|
<MessageItem
|
|
backgroundColor="#983e5e"
|
|
paddingVertical={8}
|
|
title="活动消息"
|
|
newestContent="展示相关活动推送信息"
|
|
time="11:00"
|
|
count="99+"
|
|
navigation={navigation}
|
|
badge="官方"
|
|
icon={require("../../../assets/images/star.png")}
|
|
click={() => navigation.navigate("SystemNotice")}
|
|
/>
|
|
<View
|
|
style={{
|
|
...tailwind("h-full w-full absolute"),
|
|
}}
|
|
>
|
|
<Animated.View
|
|
style={{
|
|
opacity: fadeAnimShadowTwo,
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
...tailwind("rounded-xl h-full w-full"),
|
|
backgroundColor: "#000000",
|
|
}}
|
|
></View>
|
|
</Animated.View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</Animated.View>
|
|
</View>
|
|
<View
|
|
style={{
|
|
width: "100%",
|
|
position: "absolute",
|
|
zIndex: 20,
|
|
// position: !openNotices ? "absolute" : "static",
|
|
}}
|
|
>
|
|
<Animated.View style={{ transform: [{ translateY: fadeAnimThree }] }}>
|
|
<TouchableOpacity
|
|
// style={{ display: !openNotices ? "none" : "flex" }}
|
|
activeOpacity={1}
|
|
onPress={() => {
|
|
if (!openNotices) {
|
|
fadeIn(fadeAnimFour, 214);
|
|
fadeIn(fadeAnimThree, 184);
|
|
fadeIn(fadeAnimTwo, 114);
|
|
fadeIn(fadeAnimOne, 0);
|
|
fadeIn(fadeAnimUpBtn, 1);
|
|
fadeIn(fadeAnimShadow, 0);
|
|
fadeIn(fadeAnimShadowTwo, 0);
|
|
setOpenNotices(true);
|
|
} else {
|
|
navigation.navigate("SystemNotice");
|
|
}
|
|
}}
|
|
>
|
|
<MessageItem
|
|
backgroundColor="#983e5e"
|
|
paddingVertical={8}
|
|
title="审核通知"
|
|
newestContent="审核相关信息通知"
|
|
time="11:00"
|
|
count="99+"
|
|
navigation={navigation}
|
|
badge="官方"
|
|
icon={require("../../../assets/images/exam.png")}
|
|
click={() => navigation.navigate("SystemNotice")}
|
|
/>
|
|
</TouchableOpacity>
|
|
</Animated.View>
|
|
</View>
|
|
</View>
|
|
{/* 私聊消息 */}
|
|
<Animated.View style={{ transform: [{ translateY: fadeAnimFour }] }}>
|
|
<View
|
|
style={{
|
|
...tailwind("flex flex-col rounded-2xl"),
|
|
}}
|
|
>
|
|
<MessageItem
|
|
backgroundColor="#333333"
|
|
paddingVertical={14}
|
|
title="铁粉空间官网"
|
|
newestContent="请回复您的相关消息"
|
|
time="11:00"
|
|
count="1"
|
|
navigation={navigation}
|
|
badge="官方"
|
|
icon={require("../../../assets/images/logo.png")}
|
|
click={() => navigation.navigate("SystemNotice")}
|
|
/>
|
|
</View>
|
|
</Animated.View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const MessageItem = ({
|
|
title,
|
|
newestContent,
|
|
time,
|
|
count,
|
|
backgroundColor,
|
|
paddingVertical,
|
|
navigation,
|
|
badge,
|
|
icon,
|
|
}) => {
|
|
const tailwind = useTailwind();
|
|
return (
|
|
<View
|
|
style={{
|
|
...tailwind("flex flex-row items-center mb-2 rounded-xl"),
|
|
backgroundColor,
|
|
paddingVertical,
|
|
}}
|
|
>
|
|
<View style={tailwind("px-4")}>
|
|
<NativeImage style={{ width: 28, height: 29 }} source={icon} />
|
|
</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"),
|
|
maxWidth: 190,
|
|
}}
|
|
numberOfLines={1}
|
|
>
|
|
{title}
|
|
</Text>
|
|
{badge && (
|
|
<View
|
|
style={{
|
|
...tailwind("font-medium mr-2 px-1 rounded-full"),
|
|
backgroundColor: "#ffffff6d",
|
|
}}
|
|
>
|
|
<Text style={tailwind("text-xs text-white")}>{badge}</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
<Text
|
|
style={{
|
|
...tailwind("text-xs"),
|
|
color: "#ffffff6d",
|
|
maxWidth: 220,
|
|
// overflow: "hidden",
|
|
}}
|
|
numberOfLines={1}
|
|
>
|
|
{newestContent}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
style={{
|
|
...tailwind("w-12 flex flex-col items-start"),
|
|
width: 60,
|
|
}}
|
|
>
|
|
<Text style={{ ...tailwind("text-xs mb-2"), color: "#ffffff6d" }}>
|
|
{time}
|
|
</Text>
|
|
<Badge
|
|
value={count}
|
|
status="error"
|
|
badgeStyle={{ borderWidth: 0, backgroundColor: "#FF669E" }}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|