tiefen_space_app/screeens/WechatWaitingToAdd/HaveNotAddWechat/index.jsx

376 lines
12 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import {
View,
Text,
FlatList,
RefreshControl,
Modal,
TouchableOpacity,
Image as NativeImage,
} from "react-native";
import { Image } from "expo-image";
import React, { useState, useEffect } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Empty from "../../../components/Empty";
import { ListItem, Button } from "@rneui/themed";
import baseRequest from "../../../utils/baseRequest";
import Toast from "react-native-toast-message";
import * as Clipboard from "expo-clipboard";
import { generateSignature } from "../../../utils/crypto";
//todo:等待接口上线,完善样式,测试
export default function HaveNotAddWechat({}) {
const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
const tailwind = useTailwind();
const insets = useSafeAreaInsets();
const data = [
{
name: "路人乙",
avatar: "https://s2.loli.net/2023/09/14/7AoD2kQlrnNUPFS.jpg",
pay_time: "2022-12-12 10:00",
status: "待添加",
},
{
name: "路人乙2",
avatar: "https://s2.loli.net/2023/09/14/7AoD2kQlrnNUPFS.jpg",
pay_time: "2022-12-12 10:10",
status: "待添加",
},
];
const data2 = [
{
name: "路人甲",
avatar: "https://s2.loli.net/2023/09/14/7AoD2kQlrnNUPFS.jpg",
pay_time: "2022-12-12 10:00",
status: "待添加",
},
{
name: "路人甲2",
avatar: "https://s2.loli.net/2023/09/14/7AoD2kQlrnNUPFS.jpg",
pay_time: "2022-12-12 10:10",
status: "待添加",
},
];
//保存获取的订单列表
const [orderList, setOrderList] = useState([]);
const [offset, setOffset] = useState(0);
const [more, setMore] = useState(1);
//获取订单数据
const getOrderList = async (top = false) => {
if (!more && top === false) return;
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
try {
const base = await baseRequest();
const signature = await generateSignature({
tab: 1,
offset: top ? 0 : offset,
limit: 20,
...base,
});
const response = await fetch(
`${apiUrl}/api/vas/get_add_wechat_list?signature=${signature}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
tab: 1,
offset: top ? 0 : offset, //如果是下拉刷新则更新最新数据
limit: 20,
...base,
}),
}
);
const data = await response.json();
console.log(data);
if (data.ret === -1) {
Toast.show({
type: "error",
text1: data.msg,
topOffset: 60,
});
return;
}
setOffset(data.data.offset);
setMore(data.data.more);
//如果是下拉刷新则更新最新数据
if (top) {
setOrderList(data.data.list);
return;
}
setOrderList([...orderList, ...data.data.list]);
} catch (error) {
console.error(error);
}
};
useEffect(() => {
getOrderList();
}, []);
//下拉刷新
const [refreshing, setRefreshing] = useState(false);
const handleRefresh = async () => {
setRefreshing(true);
await getOrderList(true);
setRefreshing(false);
};
//二次确认组件
const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
const [currentOrder, setCurrentOrder] = useState({});
const ConfirmModal = () => {
//保存内容到剪贴板
const copy = async (data) => {
await Clipboard.setStringAsync(data);
Toast.show({
type: "success",
text1: "已复制到剪贴板",
topOffset: 60,
});
};
//点击我已完成添加按钮
const handleConfirm = async () => {
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
try {
const base = await baseRequest();
const signature = await generateSignature({
order_id: currentOrder.order_id,
...base,
});
const response = await fetch(
`${apiUrl}/api/vas/confirm_add_wechat?signature=${signature}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
order_id: currentOrder.order_id,
...base,
}),
}
);
const data = await response.json();
if (data.ret === -1) {
Toast.show({
type: "error",
text1: data.msg,
topOffset: 60,
});
return;
}
setIsConfirmModalVisible(false);
getOrderList(true);
} catch (error) {
console.error(error);
}
};
return (
<Modal
visible={isConfirmModalVisible}
transparent={true}
statusBarTranslucent
animationType="fade"
>
<TouchableOpacity
activeOpacity={1}
onPress={() => setIsConfirmModalVisible(false)}
style={{
backgroundColor: "#00000080",
...tailwind("flex-1 justify-center items-center"),
}}
>
<TouchableOpacity
activeOpacity={1}
style={tailwind("p-4 rounded-2xl bg-[#1E1C29] items-center w-3/4")}
>
{currentOrder.consumer_wechat ? (
<View style={tailwind("flex flex-col")}>
<View style={tailwind("flex flex-row")}>
<Image
style={tailwind("w-12 h-12 rounded-full")}
source={currentOrder.account?.avatar?.images[0]?.urls[0]}
placeholder={blurhash}
contentFit="cover"
transition={1000}
cachePolicy="disk"
/>
<Text style={tailwind("text-white text-lg font-medium")}>
{currentOrder.account?.name}
</Text>
</View>
<Text style={tailwind("text-white text-base font-medium")}>
Ta的微信号
</Text>
<View style={tailwind("flex flex-row")}>
<Text style={tailwind("text-white text-base font-medium")}>
{currentOrder.consumer_wechat}
</Text>
<TouchableOpacity
onPress={() => copy(currentOrder.consumer_wechat)}
style={tailwind("flex flex-row")}
>
<NativeImage
source={require("../../../assets/icon/24DP/copy.png")}
/>
<Text style={tailwind("text-white text-base font-medium")}>
复制
</Text>
</TouchableOpacity>
</View>
<Text style={tailwind("text-white text-base font-medium")}>
添加时请备注
</Text>
<View style={tailwind("flex flex-row")}>
<Text style={tailwind("text-white text-base font-medium")}>
{currentOrder.consumer_note}
</Text>
<TouchableOpacity
onPress={() => copy(currentOrder.consumer_note)}
style={tailwind("flex flex-row")}
>
<NativeImage
source={require("../../../assets/icon/24DP/copy.png")}
/>
<Text style={tailwind("text-white text-base font-medium")}>
复制
</Text>
</TouchableOpacity>
</View>
</View>
) : (
<View style={tailwind("flex flex-col")}>
<View style={tailwind("flex flex-row")}>
<Image
style={tailwind("w-12 h-12 rounded-full")}
source={currentOrder.account?.avatar?.images[0]?.urls[0]}
placeholder={blurhash}
contentFit="cover"
transition={1000}
cachePolicy="disk"
/>
<Text style={tailwind("text-white text-lg font-medium")}>
{currentOrder.account?.name}
</Text>
</View>
<Text style={tailwind("text-white text-base font-medium")}>
请确认对方已主动添加您的微信并您已经通过好友申请
</Text>
</View>
)}
<Button
onPress={handleConfirm}
titleStyle={tailwind("text-sm font-medium px-2")}
color="#FF669E"
radius="999"
size="md"
>
我已完成添加
</Button>
</TouchableOpacity>
</TouchableOpacity>
</Modal>
);
};
//订单项组件
const renderItem = ({ item }) => {
return (
<ListItem bottomDivider containerStyle={tailwind("p-0 bg-[#07050A]")}>
<View style={tailwind("flex-1")}>
<View style={tailwind("flex-row py-3")}>
<Image
style={tailwind("w-12 h-12 rounded-full")}
source={item?.avatar}
placeholder={blurhash}
contentFit="cover"
transition={1000}
cachePolicy="disk"
/>
<View style={tailwind("ml-2 justify-around flex-1")}>
<Text
style={tailwind("text-base text-white font-medium")}
numberOfLines={1}
ellipsizeMode="tail"
>
{item?.name}
</Text>
<Text
style={tailwind("text-xs text-[#FFFFFF80]")}
numberOfLines={1}
ellipsizeMode="tail"
>
付款时间:{item?.pay_time}
</Text>
<Text
style={tailwind("text-xs text-[#FFFFFF80]")}
numberOfLines={1}
ellipsizeMode="tail"
>
请于72小时内添加对方微信
</Text>
</View>
<View style={tailwind("ml-2 justify-around items-center")}>
{item.order_status === 2 ? (
<Text
style={tailwind("text-xs text-[#FFFFFF80]")}
numberOfLines={1}
ellipsizeMode="tail"
>
等待用户填写微信
</Text>
) : (
<Button
onPress={() => setCurrentOrder(item)}
titleStyle={tailwind("text-sm font-medium px-2")}
color="#FF669E"
radius="999"
size="md"
>
添加微信
</Button>
)}
</View>
</View>
</View>
</ListItem>
);
};
return (
<View
style={{
paddingBottom: insets.bottom,
paddingLeft: insets.left,
paddingRight: insets.right,
...tailwind("flex-1"),
}}
>
<View style={tailwind("px-4 flex-1")}>
<ConfirmModal />
<FlatList
data={orderList}
renderItem={renderItem}
initialNumToRender={20}
refreshControl={
<RefreshControl
colors={["#FF669E"]}
tintColor="white"
refreshing={refreshing}
onRefresh={() => handleRefresh()}
/>
}
onEndReached={() => getOrderList()}
ListEmptyComponent={<Empty type="nodata" />}
/>
</View>
</View>
);
}