From 71c6e77da14362e907bdaab50393d593cd64fbc8 Mon Sep 17 00:00:00 2001 From: yezian Date: Tue, 9 Jan 2024 23:47:29 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E4=BF=AE=E6=94=B9=E7=BD=91?= =?UTF-8?q?=E7=BA=A2=E8=B5=84=E6=96=99=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Op/index.jsx | 5 +- .../index.jsx | 720 +++++++++--------- src/routes/index.js | 6 +- 3 files changed, 361 insertions(+), 370 deletions(-) rename src/pages/{StreamerManagement => StreamerInformation}/index.jsx (55%) diff --git a/src/pages/Op/index.jsx b/src/pages/Op/index.jsx index a0e4a75..824e548 100644 --- a/src/pages/Op/index.jsx +++ b/src/pages/Op/index.jsx @@ -52,7 +52,10 @@ export default function Op() { getItem("图片机审回查", "imageMachineReview"), getItem("文本机审回查", "textMachineReview"), ]), - // getItem("网红管理", "streamerManagement", ), + getItem("网红管理", "streamerManagement", , [ + getItem("网红资料", "streamerInformation"), + // getItem("网红平台", "streamerPlatform"), + ]), // getItem("用户管理", "userManagement", ), // getItem("订单管理", "orderManagement", , [ // getItem("订单查询", "ordersQuerry"), diff --git a/src/pages/StreamerManagement/index.jsx b/src/pages/StreamerInformation/index.jsx similarity index 55% rename from src/pages/StreamerManagement/index.jsx rename to src/pages/StreamerInformation/index.jsx index 59a13bb..a43751e 100644 --- a/src/pages/StreamerManagement/index.jsx +++ b/src/pages/StreamerInformation/index.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState } from "react"; import { Form, Input, @@ -9,24 +9,21 @@ import { InputNumber, Image, } from "antd"; -import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"; import Modal from "../../components/Modal"; import VideoUploader from "../../components/VideoUploader"; +import ImageUploader from "../../components/ImageUploader"; import baseRequest from "../../utils/baseRequest"; //tab内容 -const GoodsContent = () => { +const StreamerInformationContent = () => { const { TextArea } = Input; //展示的表头 const [showColumns, setShowColumns] = useState([ "baseInfo", "displayInfo", - "shareRatio", - "platform", "displayPoster", "displayVideo", "displayGallery", - "remark", ]); //动态的表头 const dynamicColumns = showColumns.map((item) => { @@ -40,14 +37,11 @@ const GoodsContent = () => {

- mid：{data.mid} + ID：{data.id}

昵称：{data.name}

-

- 联系方式：{data.contact} -

入驻时间：{data.joinTime}

@@ -61,15 +55,40 @@ const GoodsContent = () => { key: "displayInfo", render: (data) => (
+

+ 性别： + + {data.gender === 1 ? "女" : "男"} + +

全网粉丝：{data.fans}万

- 微信：{data.wechat} + 微信添加方式： + + {data.wechat_lock_type === 1 ? "主动添加" : "直接展示"} + +

+

+ 微信： + + {data.wechat ? data.wechat : "空"} + +

+

+ 微信价格： + ¥{data.wechat_price / 10}

个性签名：{data.signature}

+

+ 私信自动回复： + + {data.auto_response_message} + +

年龄：{data.age}

@@ -88,45 +107,21 @@ const GoodsContent = () => {
), }; - case "shareRatio": - return { - title: "分成比例", - dataIndex: "shareRatio", - key: "shareRatio", - render: (data) =>

{data}%

, - }; - case "platform": - return { - title: "平台", - dataIndex: "platform", - key: "platform", - render: (data) => ( -
-
    - {data.map((item) => ( -
  1. - - {item.name}：{item.id} - -
    2. - ))} -
-
- ), - }; case "displayPoster": return { title: "封面图片", dataIndex: "displayPoster", key: "displayPoster", - render: (data) => , + render: (data) => , }; case "displayVideo": return { title: "封面视频", dataIndex: "displayVideo", key: "displayVideo", - render: (data) =>
), }); - //全部数据 - const data = [ - { - key: "1", - baseInfo: { - mid: "654321", - name: "马牛逼", - avatar: "https://s2.loli.net/2023/07/25/fjouqVLAlTn2s58.png", - contact: "wx:woshimaniubi", - joinTime: "2023-09-22 20:00", - }, - displayInfo: { - fans: 1000, - wechat: "maniubi", - signature: "马牛逼的个性签名", - age: "21", - height: "175", - weight: "75", - constellation: "天蝎座", - location: "四川", - }, - shareRatio: 20, - platform: [ - { - index: 1, - name: "抖音", - id: "马牛逼", - url: "https://www.douyin.com/discover", - }, - { - index: 2, - name: "哔哩哔哩", - id: "马牛逼", - url: "https://www.bilibili.com", - }, - ], - displayPoster: "https://s2.loli.net/2023/07/25/fjouqVLAlTn2s58.png", - displayVideo: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4", - displayGallery: [ - "https://s2.loli.net/2023/07/25/fjouqVLAlTn2s58.png", - "https://s2.loli.net/2023/07/25/1daCqmZGQNUzoJ8.png", - ], - remark: "马牛逼的备注", - }, - { - key: "2", - baseInfo: { - mid: "10086", - name: "迪迦", - avatar: "https://s2.loli.net/2023/07/25/1daCqmZGQNUzoJ8.png", - contact: "wx:woshidijia", - joinTime: "2023-09-21 20:00", - }, - displayInfo: { - fans: 2000, - wechat: "dijia", - signature: "迪迦的个性签名", - age: "88", - height: "170", - weight: "70", - constellation: "处女座", - location: "上海", - }, - shareRatio: 20, - platform: [ - { - name: "抖音", - id: "迪迦", - url: "https://www.douyin.com/discover", - }, - { - name: "哔哩哔哩", - id: "迪迦", - url: "https://www.bilibili.com", - }, - ], - displayPoster: "https://s2.loli.net/2023/07/25/1daCqmZGQNUzoJ8.png", - displayVideo: "https://media.w3.org/2010/05/sintel/trailer.mp4", - displayGallery: [ - "https://s2.loli.net/2023/07/25/1daCqmZGQNUzoJ8.png", - "https://s2.loli.net/2023/07/25/fjouqVLAlTn2s58.png", - ], - remark: "迪迦的备注", - }, - ]; - - //获取页面数据 - // const [pageData, setPageData] = useState([]); - // useEffect(() => { - // const getData = async () => { - // try { - // const base = baseRequest(); - // const response = await fetch("/op/streamer/list", { - // method: "POST", - // headers: { - // "Content-Type": "application/json", - // }, - // body: JSON.stringify({ - // mid: 12, - // ...base, - // }), - // }); - // const temData = await response.json(); - // console.log(temData); - // if (temData.ret === -1) { - // alert(temData.msg); - // return; - // } - // } catch (error) { - // console.error(error); - // } - // }; - // getData(); - // }, []); //modal中select选项 const constellations = [ @@ -346,14 +221,6 @@ const GoodsContent = () => { label: "个人展示信息", value: "displayInfo", }, - { - label: "分成比例", - value: "shareRatio", - }, - { - label: "平台", - value: "platform", - }, { label: "封面图片", value: "displayPoster", @@ -366,24 +233,62 @@ const GoodsContent = () => { label: "相册", value: "displayGallery", }, - { - label: "备注", - value: "remark", - }, ]; //展示的数据 - const [showData, setShowData] = useState(data); + const [showData, setShowData] = useState([]); //搜索名人 - const search = (value) => { - value.name || value.mid - ? setShowData( - data.filter( - (item) => - item.baseInfo.name === value.name || - item.baseInfo.mid === value.mid - ) - ) - : setShowData(data); + const search = async (value) => { + try { + const base = baseRequest(); + const detailResponse = await fetch(`/op/streamer/list_ext_by_user_id`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + user_id: parseInt(value.id, 10), + ...base, + }), + }); + const detailData = await detailResponse.json(); + if (detailData.ret === -1) { + alert(detailData.msg); + return; + } + setShowData([ + { + key: detailData.data.streamer_ext.mid, + baseInfo: { + id: detailData.data.streamer_ext.user_id, + name: detailData.data.streamer_ext.name, + avatar: detailData.data.streamer_ext.avatar.images[0].urls[0], + joinTime: new Date( + detailData.data.streamer_ext.ct * 1000 + ).toLocaleString(), + }, + displayInfo: { + gender: detailData.data.streamer_ext.gender, + fans: detailData.data.streamer_ext.fans, + wechat_lock_type: detailData.data.streamer_ext.wechat_lock_type, + wechat: detailData.data.streamer_ext.wechat_contact, + wechat_price: detailData.data.streamer_ext.wechat_coin_price, + signature: detailData.data.streamer_ext.bio, + age: detailData.data.streamer_ext.age, + height: detailData.data.streamer_ext.height, + weight: detailData.data.streamer_ext.weight, + constellation: detailData.data.streamer_ext.constellation, + location: detailData.data.streamer_ext.city, + auto_response_message: + detailData.data.streamer_ext.auto_response_message, + }, + displayPoster: detailData.data.streamer_ext.cover.images, + displayVideo: detailData.data.streamer_ext.shorts.videos, + displayGallery: detailData.data.streamer_ext.album.images, + }, + ]); + } catch (error) { + console.error(error); + } }; //表单提交失败 const onFinishFailed = (errorInfo) => { @@ -397,18 +302,89 @@ const GoodsContent = () => { }; //modal打开时的默认值 const [defaultValues, setDefaultValues] = useState({}); + const [defaultMedia, setDefaultMedia] = useState({}); //点击修改按钮 const handleModal = (record) => { setDefaultValues(record); - const streamerPlatforms = record.platform.map((item) => item.name); + setDefaultMedia({ + displayPoster: record.displayPoster, + displayVideo: record.displayVideo, + displayGallery: record.displayGallery, + }); setIsModalOpen(true); }; //表单提交成功 - const onModalFormFinish = (value) => { - //处理表单格式 + const onModalFormFinish = async (value) => { //上传表单操作... - console.log("Success:", value); + const oldPosterId = defaultMedia.displayPoster.map((item) => item.id); + const oldVideoId = defaultMedia.displayVideo.map((item) => item.id); + const oldGalleryId = defaultMedia.displayGallery.map((item) => item.id); + const newPosterId = [...oldPosterId, ...displayPosterId]; + const newVideoId = [...oldVideoId, ...displayVideoId]; + const newGalleryId = [...oldGalleryId, ...displayGalleryId]; + try { + const base = baseRequest(); + const detailResponse = await fetch(`/op/streamer/update`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + mid: defaultValues.key, + gender: parseInt(value.gender, 10), + wechat_contact: value.wechat, + bio: value.signature, + cover: { image_ids: newPosterId }, + shorts: { video_ids: newVideoId }, + album: { image_ids: newGalleryId }, + age: parseInt(value.age, 10), + height: parseInt(value.height, 10), + weight: parseInt(value.weight, 10), + constellation: value.constellation, + city: value.location, + wechat_lock_type: parseInt(value.wechat_lock_type, 10), + fans: parseInt(value.fans, 10), + wechat_coin_price: parseInt(value.wechat_price, 10) * 10, + auto_response_message: value.auto_response_message, + ...base, + }), + }); + console.log(value); + console.log({ + mid: defaultValues.key, + gender: parseInt(value.gender, 10), + wechat_contact: value.wechat, + bio: value.signature, + cover: { image_ids: newPosterId }, + shorts: { video_ids: newVideoId }, + album: { image_ids: newGalleryId }, + age: parseInt(value.age, 10), + height: parseInt(value.height, 10), + weight: parseInt(value.weight, 10), + constellation: value.constellation, + city: value.location, + wechat_lock_type: parseInt(value.wechat_lock_type, 10), + fans: parseInt(value.fans, 10), + wechat_coin_price: parseInt(value.wechat_price, 10) * 10, + auto_response_message: value.auto_response_message, + ...base, + }); + const detailData = await detailResponse.json(); + console.log(detailData); + if (detailData.ret === -1) { + alert(detailData.msg); + return; + } + } catch (error) { + console.error(error); + } //关闭模态 + setShowData([]); + setDefaultValues({}); + setDefaultMedia({}); + setDisplayVideoId([]); + setDisplayPosterId([]); + setDisplayGalleryId([]); setIsModalOpen(false); }; //表单提交失败 @@ -417,7 +393,36 @@ const GoodsContent = () => { }; //保存上传的封面id - const [ids, setIds] = useState([]); + const [displayVideoId, setDisplayVideoId] = useState([]); + const [displayPosterId, setDisplayPosterId] = useState([]); + const [displayGalleryId, setDisplayGalleryId] = useState([]); + + //删除默认的媒体 + const handleDeleteMedia = (type, id) => { + if (type === "displayPoster") { + setDefaultMedia({ + ...defaultMedia, + displayPoster: [], + }); + return; + } + if (type === "displayVideo") { + setDefaultMedia({ + ...defaultMedia, + displayVideo: [], + }); + return; + } + if (type === "displayGallery") { + setDefaultMedia({ + ...defaultMedia, + displayGallery: defaultMedia.displayGallery.filter( + (item) => item.id !== id + ), + }); + return; + } + }; return (
@@ -431,10 +436,7 @@ const GoodsContent = () => {
- - - - +