tiefen_space_app/screeens/NoticeDetail/NoticeNav/index.jsx

296 lines
9.2 KiB
JavaScript

import {
View,
TouchableOpacity,
Image as NativeImage,
Text,
} from "react-native";
import React, { useState, useEffect, useCallback } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Badge } from "@rneui/themed";
import baseRequest from "../../../utils/baseRequest";
import { generateSignature } from "../../../utils/crypto";
export default function Message({ navigation }) {
const [data, setData] = useState([]);
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,
}),
}
);
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 }));
const notice_data = await notice_response.json();
// 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);
}
};
return (
<View
style={{
paddingTop: insets.top,
paddingLeft: insets.left,
paddingRight: insets.right,
...tailwind("flex flex-1 p-4 mt-4"),
}}
>
{/* 广告轮播 */}
<View></View>
{/* 官方消息 */}
<View
style={{
...tailwind("flex flex-col rounded-2xl mt-3.5 border-2"),
// backgroundColor: "#ffffff6d",
}}
>
<TouchableOpacity
onPress={() => navigation.navigate("SystemNotice")}
style={{
...tailwind("flex flex-row items-center py-4 mb-2 rounded-xl"),
backgroundColor: "#ffffff1a",
}}
>
<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,
}}
>
<Text style={{ ...tailwind("text-xs mb-2"), color: "#ffffff6d" }}>
11:00
</Text>
<Badge
value="1"
status="error"
badgeStyle={{ borderWidth: 0, backgroundColor: "#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")}
/>
</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,
}}
>
<Text style={{ ...tailwind("text-xs mb-2"), color: "#ffffff6d" }}>
11:00
</Text>
{/* <View
style={{
...tailwind("rounded-full bg-[#FF669E]"),
width: 20,
height: 20,
}}
>
<Text
style={{
...tailwind("text-white font-medium"),
flexWrap: "nowrap",
lineHeight: 20,
textAlign: "center",
}}
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,
})
}
style={{
...tailwind("flex flex-row items-center py-4 mb-2 rounded-xl"),
backgroundColor: "#333333",
}}
>
<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,
}}
>
<Text style={{ ...tailwind("text-xs mb-2"), color: "#ffffff6d" }}>
11:00
</Text>
<Badge
value="1"
status="error"
badgeStyle={{ borderWidth: 0, backgroundColor: "#FF669E" }}
/>
</View>
</View>
</TouchableOpacity>
</View>
</View>
);
}