更改消息页面
This commit is contained in:
al
parent
578ea64237
commit
37b03a317f
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -2,8 +2,8 @@ import React, { useState, useEffect, useCallback } from "react";
|
|||
import { Image, TouchableOpacity, View } from "react-native";
|
||||
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
|
||||
import Stream from "../Stream";
|
||||
// import { Badge } from "@rneui/themed";
|
||||
// import NoticeDetail from "../NoticeDetail";
|
||||
import { Badge } from "@rneui/themed";
|
||||
import NoticeDetail from "../NoticeDetail";
|
||||
import My from "../My";
|
||||
import Posts from "../Posts";
|
||||
import Space from "../Space";
|
||||
|
|
|
|||
|
|
@ -3,15 +3,18 @@ import {
|
|||
TouchableOpacity,
|
||||
Image as NativeImage,
|
||||
Text,
|
||||
Animated,
|
||||
} from "react-native";
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
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(() => {
|
||||
|
|
@ -36,22 +39,23 @@ export default function Message({ navigation }) {
|
|||
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,
|
||||
}),
|
||||
}
|
||||
);
|
||||
const detailData = await detailResponse.json();
|
||||
console.log(detailData);
|
||||
const session_id = detailData.data.session.id;
|
||||
// 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}`,
|
||||
// {
|
||||
|
|
@ -63,7 +67,9 @@ export default function Message({ navigation }) {
|
|||
// }
|
||||
// );
|
||||
// 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) {
|
||||
|
|
@ -80,216 +86,359 @@ export default function Message({ navigation }) {
|
|||
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-4 mt-4"),
|
||||
...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 mt-3.5 border-2"),
|
||||
...tailwind("flex flex-col rounded-2xl relative"),
|
||||
// backgroundColor: "#ffffff6d",
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity
|
||||
onPress={() => navigation.navigate("SystemNotice")}
|
||||
<Animated.View
|
||||
style={{
|
||||
...tailwind("flex flex-row items-center py-4 mb-2 rounded-xl"),
|
||||
backgroundColor: "#ffffff1a",
|
||||
transform: [{ scale: fadeAnimUpBtn }],
|
||||
opacity: fadeAnimUpBtn,
|
||||
zIndex: openNotices ? 999 : 0,
|
||||
}}
|
||||
>
|
||||
<View style={tailwind("px-4")}>
|
||||
<NativeImage
|
||||
source={require("../../../assets/icon/32DP/contact.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-full"),
|
||||
backgroundColor: "#ffffff6d",
|
||||
}}
|
||||
>
|
||||
<Text style={tailwind("text-xs text-white")}>官方</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text style={{ ...tailwind("text-xs"), color: "#ffffff6d" }}>
|
||||
官方消息通知
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
<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("w-12 flex flex-col items-start"),
|
||||
width: 60,
|
||||
...tailwind("flex justify-center py-1 px-4 rounded-full mb-2"),
|
||||
backgroundColor: "#FF669E1a",
|
||||
}}
|
||||
>
|
||||
<Text style={{ ...tailwind("text-xs mb-2"), color: "#ffffff6d" }}>
|
||||
11:00
|
||||
</Text>
|
||||
<Badge
|
||||
value="1"
|
||||
status="error"
|
||||
badgeStyle={{ borderWidth: 0, backgroundColor: "#FF669E" }}
|
||||
<Icon
|
||||
style={{ ...tailwind("px-2") }}
|
||||
type="ionicon"
|
||||
name="chevron-up"
|
||||
size={28}
|
||||
color="#FF669E"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={() => navigation.navigate("ActiveNotice")}
|
||||
style={{
|
||||
...tailwind("flex flex-row items-center py-4 rounded-xl"),
|
||||
backgroundColor: "#ffffff1a",
|
||||
}}
|
||||
>
|
||||
<View style={tailwind("px-4")}>
|
||||
<NativeImage
|
||||
source={require("../../../assets/icon/32DP/contact.png")}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</Animated.View>
|
||||
|
||||
<View>
|
||||
<View
|
||||
style={tailwind(
|
||||
"flex flex-row justify-between items-center flex-1"
|
||||
)}
|
||||
style={{
|
||||
width: "100%",
|
||||
position: "absolute",
|
||||
}}
|
||||
>
|
||||
<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
|
||||
<View>
|
||||
<Animated.View
|
||||
style={{ transform: [{ translateY: fadeAnimOne }] }}
|
||||
>
|
||||
<TouchableOpacity
|
||||
onPress={() => navigation.navigate("SystemNotice")}
|
||||
style={{
|
||||
...tailwind("font-medium mr-2 px-1 rounded-full"),
|
||||
backgroundColor: "#ffffff6d",
|
||||
...tailwind("relative"),
|
||||
}}
|
||||
>
|
||||
<Text style={tailwind("text-xs text-white")}>官方</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text style={{ ...tailwind("text-xs"), color: "#ffffff6d" }}>
|
||||
展示相关活动推送信息
|
||||
</Text>
|
||||
<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
|
||||
style={{
|
||||
...tailwind("w-12 flex flex-col items-start"),
|
||||
width: 60,
|
||||
}}
|
||||
</View>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
width: "100%",
|
||||
position: "absolute",
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<Animated.View style={{ transform: [{ translateY: fadeAnimTwo }] }}>
|
||||
<TouchableOpacity
|
||||
onPress={() => navigation.navigate("SystemNotice")}
|
||||
>
|
||||
<Text style={{ ...tailwind("text-xs mb-2"), color: "#ffffff6d" }}>
|
||||
11:00
|
||||
</Text>
|
||||
{/* <View
|
||||
<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("rounded-full bg-[#FF669E]"),
|
||||
width: 20,
|
||||
height: 20,
|
||||
...tailwind("h-full w-full absolute"),
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
<Animated.View
|
||||
style={{
|
||||
...tailwind("text-white font-medium"),
|
||||
flexWrap: "nowrap",
|
||||
lineHeight: 20,
|
||||
textAlign: "center",
|
||||
opacity: fadeAnimShadowTwo,
|
||||
}}
|
||||
numberOfLines={1}
|
||||
>
|
||||
99
|
||||
</Text>
|
||||
</View> */}
|
||||
<Badge
|
||||
value="99+"
|
||||
status="error"
|
||||
badgeStyle={{ borderWidth: 0, backgroundColor: "#FF669E" }}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{/* 私聊消息 */}
|
||||
<View
|
||||
style={{
|
||||
...tailwind("flex flex-col rounded-2xl mt-3.5 border-2"),
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity
|
||||
onPress={() =>
|
||||
navigation.navigate("MessageDetail", {
|
||||
mid: 1,
|
||||
})
|
||||
}
|
||||
<View
|
||||
style={{
|
||||
...tailwind("rounded-xl h-full w-full"),
|
||||
backgroundColor: "#000000",
|
||||
}}
|
||||
></View>
|
||||
</Animated.View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
...tailwind("flex flex-row items-center py-4 mb-2 rounded-xl"),
|
||||
backgroundColor: "#333333",
|
||||
width: "100%",
|
||||
position: "absolute",
|
||||
zIndex: 20,
|
||||
// position: !openNotices ? "absolute" : "static",
|
||||
}}
|
||||
>
|
||||
<View style={tailwind("px-4")}>
|
||||
<NativeImage
|
||||
source={require("../../../assets/icon/32DP/contact.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-full"),
|
||||
backgroundColor: "#ffffff6d",
|
||||
}}
|
||||
>
|
||||
<Text style={tailwind("text-xs text-white")}>官方客服</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text style={{ ...tailwind("text-xs"), color: "#ffffff6d" }}>
|
||||
请回复您的相关消息
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
...tailwind("w-12 flex flex-col items-start"),
|
||||
width: 60,
|
||||
<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");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Text style={{ ...tailwind("text-xs mb-2"), color: "#ffffff6d" }}>
|
||||
11:00
|
||||
</Text>
|
||||
<Badge
|
||||
value="1"
|
||||
status="error"
|
||||
badgeStyle={{ borderWidth: 0, backgroundColor: "#FF669E" }}
|
||||
<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")}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue