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://") && !url.startsWith("http://")) { Alert.alert(null, "链接必须以https://或http://开头"); 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" )} /> 确认 取消 {/* 查看微信按钮 */} ); }