import {
View,
Text,
ScrollView,
TouchableOpacity,
TextInput,
Modal,
Alert,
ActivityIndicator,
} from "react-native";
import React, { useState, useEffect } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Icon } from "@rneui/themed";
import { Image } from "expo-image";
import Picker from "../../components/Picker";
import baseRequest from "../../utils/baseRequest";
import { get } from "../../utils/storeInfo";
import Toast from "react-native-toast-message";
import { generateSignature } from "../../utils/crypto";
export default function EditPlatformOrder({ navigation, route }) {
const tailwind = useTailwind();
const insets = useSafeAreaInsets();
const [platform, setPlatform] = useState([]);
const [allPlatforms, setAllPlatforms] = useState([]);
//正在加载数据
const [isLoading, setIsloading] = useState(true);
//获取现有平台数据
useEffect(() => {
const getAllPlatforms = async () => {
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
try {
const base = await baseRequest();
const signature = await generateSignature({
...base,
});
//获取当前所有平台
const detailResponse = await fetch(
`${apiUrl}/api/platform/list?signature=${signature}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
...base,
}),
}
);
const detailData = await detailResponse.json();
if (detailData.ret === -1) {
Toast.show({
type: "error",
text1: detailData.msg,
topOffset: 60,
});
return;
}
const detailDataValues = Object.entries(detailData.data);
const temAllPlatforms = detailDataValues.map((item) => {
return {
label: item[1].name,
value: {
link_no: parseInt(item[0], 10),
link_name: item[1].name,
link_icon: item[1].icon,
},
};
});
setAllPlatforms(temAllPlatforms);
//获取主播当前所有平台
const account = await get("account");
const signature2 = await generateSignature({
mid: account?.mid,
...base,
});
const streamerPlatformResponse = await fetch(
`${apiUrl}/api/streamer_link/list_by_mid?signature=${signature2}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
mid: account?.mid,
...base,
}),
}
);
const streamerPlatformData = await streamerPlatformResponse.json();
if (streamerPlatformData.ret === -1) {
Toast.show({
type: "error",
text1: streamerPlatformData.msg,
topOffset: 60,
});
return;
}
const platformsWithIcon = streamerPlatformData.data.list.map((item) => {
return {
...item,
link_icon: detailData.data[item.link_no].icon,
};
});
setPlatform(platformsWithIcon);
setIsloading(false);
} catch (error) {
console.error(error);
}
};
getAllPlatforms();
}, []);
//点击添加/编辑按钮涉及的state
const [platformEditable, setPlatformEditable] = useState(true);
const [addModalVisible, setAddModalVisible] = useState(false);
const [selectedPlatform, setSelectedPlatform] = useState();
const [nickname, setNickname] = useState();
const [url, setUrl] = useState();
//点击关闭弹窗
const handleCloseModal = () => {
setAddModalVisible(false);
setSelectedPlatform();
setNickname();
setUrl("");
setPlatformEditable(true);
};
//点击添加按钮
const handleAdd = () => {
if (!selectedPlatform || !nickname || !url) {
Alert.alert(null, "请完整填写信息");
return;
}
if (!url.startsWith("https://")) {
Alert.alert(null, "链接必须以https://开头");
return;
}
const updatedPlatform = [...platform];
const matched = updatedPlatform.filter(
(item) => item.link_name === selectedPlatform.link_name
);
if (matched.length > 0) {
updatedPlatform[updatedPlatform.indexOf(matched[0])] = {
link_name: selectedPlatform.link_name,
link_icon: selectedPlatform.link_icon,
link_no: selectedPlatform.link_no,
nickname: nickname,
url: url,
};
} else {
updatedPlatform.push({
link_name: selectedPlatform.link_name,
link_icon: selectedPlatform.link_icon,
link_no: selectedPlatform.link_no,
nickname: nickname,
url: url,
});
}
updatedPlatform.forEach((item, index) => (item.order = index + 1));
setPlatform(updatedPlatform);
handleCloseModal();
};
//点击删除按钮
const handleDelete = (item) => {
const updatedPlatform = [...platform];
const index = updatedPlatform.findIndex(
(element) => element.link_name === item.link_name
);
updatedPlatform.splice(index, 1);
updatedPlatform.forEach((item, index) => (item.order = index + 1));
setPlatform(updatedPlatform);
};
//点击编辑按钮
const handleEdit = (item) => {
setPlatformEditable(false);
setAddModalVisible(true);
setSelectedPlatform({
link_name: item.link_name,
link_icon: item.link_icon,
link_no: item.link_no,
});
setNickname(item.nickname);
setUrl(item.url);
};
//点击上升按钮
const handleIndexChangeUp = (item) => {
if (item.order === 1) return;
const updatedPlatform = [...platform];
const index = updatedPlatform.findIndex(
(element) => element.link_name === item.link_name
);
const temp = updatedPlatform[index];
updatedPlatform[index] = updatedPlatform[index - 1];
updatedPlatform[index - 1] = temp;
updatedPlatform.forEach((item, index) => (item.order = index + 1));
setPlatform(updatedPlatform);
};
//点击下降按钮
const handleIndexChangeDown = (item) => {
if (item.order === platform.length) return;
const updatedPlatform = [...platform];
const index = updatedPlatform.findIndex(
(element) => element.link_name === item.link_name
);
const temp = updatedPlatform[index];
updatedPlatform[index] = updatedPlatform[index + 1];
updatedPlatform[index + 1] = temp;
updatedPlatform.forEach((item, index) => (item.order = index + 1));
setPlatform(updatedPlatform);
};
//正在提交状态
const [isSubmitting, setIsSubmitting] = useState(false);
//点击提交按钮
const handleSubmit = async () => {
setIsSubmitting(true);
const account = await get("account");
const newPlatforms = platform.map((item) => ({
mid: account.mid,
link_no: item.link_no,
link_name: item.link_name,
url: item.url,
order: item.order,
nickname: item.nickname,
}));
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
try {
const base = await baseRequest();
const signature = await generateSignature({
mid: account?.mid,
...base,
});
//获取主播当前所有平台
const streamerPlatformResponse = await fetch(
`${apiUrl}/api/streamer_link/list_by_mid?signature=${signature}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
mid: account?.mid,
...base,
}),
}
);
const streamerPlatformData = await streamerPlatformResponse.json();
if (streamerPlatformData.ret === -1) {
Toast.show({
type: "error",
text1: streamerPlatformData.msg,
topOffset: 60,
});
return;
}
//删除全部现有平台
const ids = streamerPlatformData.data.list.map((item) => item.id);
if (ids.length !== 0) {
const signature2 = await generateSignature({
ids: ids,
...base,
});
const deleteResponse = await fetch(
`${apiUrl}/api/streamer_link/delete_batch?signature=${signature2}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
ids: ids,
...base,
}),
}
);
const deleteData = await deleteResponse.json();
if (deleteData.ret === -1) {
Toast.show({
type: "error",
text1: deleteData.msg,
topOffset: 60,
});
return;
}
}
//批量创建新的平台
if (newPlatforms.length === 0) {
Toast.show({
type: "success",
text1: "更改成功",
topOffset: 60,
});
return;
}
const signature3 = await generateSignature({
streamer_links: newPlatforms,
...base,
});
const response = await fetch(
`${apiUrl}/api/streamer_link/create_batch?signature=${signature3}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
streamer_links: newPlatforms,
...base,
}),
}
);
const data = await response.json();
if (data.ret === -1) {
Toast.show({
type: "error",
text1: data.msg,
topOffset: 60,
});
return;
}
Toast.show({
type: "success",
text1: "更改成功",
topOffset: 60,
});
navigation.goBack();
} catch (error) {
console.error(error);
} finally {
setIsSubmitting(false);
}
};
//按index从小到大排序
const sortedPlatform = [...platform].sort((a, b) => a.order - b.order);
//loading时展示加载中
if (isLoading) {
return (
);
}
return (
setAddModalVisible(true)}
>
添加
{sortedPlatform.map((item, index) => (
平台：
{item?.link_name}
昵称：
{item?.nickname}
链接：
{item?.url}
handleDelete(item)}
containerStyle={tailwind("mr-2")}
/>
handleEdit(item)}
/>
handleIndexChangeUp(item)}
containerStyle={tailwind("mt-4")}
/>
handleIndexChangeDown(item)}
/>
))}
{/* 添加平台Modal */}
编辑/添加平台
平台：
{platformEditable ? (
setSelectedPlatform(value)}
/>
) : (
{selectedPlatform?.link_name}
)}
昵称：
setNickname(value)}
value={nickname}
style={tailwind(
"flex-1 border border-[#2c2b2f] text-white font-medium rounded-lg h-10 px-2"
)}
/>
链接：
setUrl(value)}
value={url}
style={tailwind(
"flex-1 border border-[#2c2b2f] text-white font-medium rounded-lg h-24 p-2"
)}
/>
确认
取消
{/* 查看微信按钮 */}
);
}