修改问题
This commit is contained in:
parent
988ed7d7cb
commit
56bee22165
|
@ -2,13 +2,10 @@
|
||||||
|
|
||||||
import React, { useState, useRef, useEffect, useCallback } from "react";
|
import React, { useState, useRef, useEffect, useCallback } from "react";
|
||||||
|
|
||||||
import baseRequest from "@/utils/baseRequest";
|
|
||||||
import { generateSignature } from "@/utils/crypto";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
|
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
|
||||||
import { Input, Button, Toast, Avatar, DotLoading } from "antd-mobile";
|
import { Input, Button, Toast, Avatar, DotLoading } from "antd-mobile";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
|
|
||||||
import { get } from "@/utils/storeInfo";
|
import { get } from "@/utils/storeInfo";
|
||||||
import require from "@/utils/require";
|
import require from "@/utils/require";
|
||||||
import { formatDeadline } from "@/utils/tools";
|
import { formatDeadline } from "@/utils/tools";
|
||||||
|
@ -60,7 +57,7 @@ export default function MessageDetail({}) {
|
||||||
scrollBox.current?.scrollTo(0, scrollBox.current.scrollHeight+50);
|
scrollBox.current?.scrollTo(0, scrollBox.current.scrollHeight+50);
|
||||||
toScrollBottom.current = 0;
|
toScrollBottom.current = 0;
|
||||||
}
|
}
|
||||||
}, [toScrollBottom.current]);
|
}, [messages]);
|
||||||
// useEffect(() => {
|
// useEffect(() => {
|
||||||
// if (offset == 12) {
|
// if (offset == 12) {
|
||||||
// console.log("offset--------", offset);
|
// console.log("offset--------", offset);
|
||||||
|
@ -355,7 +352,7 @@ export default function MessageDetail({}) {
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-base text-center">在线服务</p>
|
<p className="text-base text-center">在线客服</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div className="my-[57px]">
|
<div className="my-[57px]">
|
||||||
|
|
|
@ -15,7 +15,6 @@ export default function EditUserName() {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const getName = async () => {
|
const getName = async () => {
|
||||||
|
|
||||||
setName(account.name);
|
setName(account.name);
|
||||||
};
|
};
|
||||||
getName();
|
getName();
|
||||||
|
|
|
@ -10,7 +10,6 @@ import { get } from "@/utils/storeInfo";
|
||||||
import require from "@/utils/require";
|
import require from "@/utils/require";
|
||||||
const My = () => {
|
const My = () => {
|
||||||
const [userInfo, setUserInfo] = useState({});
|
const [userInfo, setUserInfo] = useState({});
|
||||||
const searchParams = useSearchParams();
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const userInfo = get("account");
|
const userInfo = get("account");
|
||||||
|
@ -60,6 +59,7 @@ const My = () => {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{userInfo?.role === 3 ? (
|
||||||
<div
|
<div
|
||||||
className="flex items-center justify-between mb-4"
|
className="flex items-center justify-between mb-4"
|
||||||
onClick={() => router.push("profile/" + userInfo.mid)}
|
onClick={() => router.push("profile/" + userInfo.mid)}
|
||||||
|
@ -67,7 +67,6 @@ const My = () => {
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<Avatar
|
<Avatar
|
||||||
rounded-full
|
rounded-full
|
||||||
mr-4
|
|
||||||
src={userInfo.avatar?.images[0].urls[0]}
|
src={userInfo.avatar?.images[0].urls[0]}
|
||||||
className="mr-4"
|
className="mr-4"
|
||||||
style={{ "--size": "76px", "--border-radius": "50%" }}
|
style={{ "--size": "76px", "--border-radius": "50%" }}
|
||||||
|
@ -96,6 +95,33 @@ const My = () => {
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className="flex items-center justify-between mb-4"
|
||||||
|
>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Avatar
|
||||||
|
rounded-full
|
||||||
|
src={userInfo.avatar?.images[0].urls[0]}
|
||||||
|
className="mr-4"
|
||||||
|
style={{ "--size": "76px", "--border-radius": "50%" }}
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p className="text-2xl font-bold">{userInfo.name}</p>
|
||||||
|
<div className="h-4 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mt-1 w-max">
|
||||||
|
<Image
|
||||||
|
src="/icons/info/ID.png"
|
||||||
|
width={14}
|
||||||
|
height={14}
|
||||||
|
className="w-4 h-full mr-1"
|
||||||
|
placeholder=""
|
||||||
|
/>
|
||||||
|
<span>{userInfo.user_id}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<ul className="grid grid-cols-4 mb-4">
|
<ul className="grid grid-cols-4 mb-4">
|
||||||
<li
|
<li
|
||||||
className="text-center"
|
className="text-center"
|
||||||
|
@ -257,7 +283,10 @@ const My = () => {
|
||||||
className="h-4 text-gray-300"
|
className="h-4 text-gray-300"
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
<li className="flex justify-between items-center p-3 py-2" onClick={()=>router.push("my/unlockedWechat")}>
|
<li
|
||||||
|
className="flex justify-between items-center p-3 py-2"
|
||||||
|
onClick={() => router.push("my/unlockedWechat")}
|
||||||
|
>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<Image
|
<Image
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
|
|
|
@ -10,6 +10,7 @@ import {
|
||||||
Toast,
|
Toast,
|
||||||
} from "antd-mobile";
|
} from "antd-mobile";
|
||||||
import { useRouter, useParams } from "next/navigation";
|
import { useRouter, useParams } from "next/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import {
|
import {
|
||||||
faAngleLeft,
|
faAngleLeft,
|
||||||
|
@ -24,6 +25,7 @@ import { handleFollow, checkRelation } from "@/api/public";
|
||||||
import { getStreamerDetailInfo } from "@/api/space";
|
import { getStreamerDetailInfo } from "@/api/space";
|
||||||
import { get } from "@/utils/storeInfo";
|
import { get } from "@/utils/storeInfo";
|
||||||
import { handleShowVideos } from "@/utils/tools/handleFuns";
|
import { handleShowVideos } from "@/utils/tools/handleFuns";
|
||||||
|
import clipboard from "copy-to-clipboard";
|
||||||
// import * as Clipboard from "expo-clipboard";
|
// import * as Clipboard from "expo-clipboard";
|
||||||
export default function PersonSpace() {
|
export default function PersonSpace() {
|
||||||
const { mid } = useParams();
|
const { mid } = useParams();
|
||||||
|
@ -99,6 +101,16 @@ export default function PersonSpace() {
|
||||||
const temIsFollowed = await checkRelation(subMid, objMid, 0);
|
const temIsFollowed = await checkRelation(subMid, objMid, 0);
|
||||||
setIsFollow(temIsFollowed);
|
setIsFollow(temIsFollowed);
|
||||||
};
|
};
|
||||||
|
//保存内容到剪贴板
|
||||||
|
const copy = (_data) => {
|
||||||
|
console.log("_data",_data)
|
||||||
|
clipboard(_data);
|
||||||
|
Toast.show({
|
||||||
|
icon: "success",
|
||||||
|
content: "已复制到剪贴板",
|
||||||
|
position: "top",
|
||||||
|
});
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<div className="h-screen overflow-x-hidden overflow-y-auto">
|
<div className="h-screen overflow-x-hidden overflow-y-auto">
|
||||||
<div className="flex justify-between items-center p-4 fixed top-0 z-10 w-full">
|
<div className="flex justify-between items-center p-4 fixed top-0 z-10 w-full">
|
||||||
|
@ -112,7 +124,7 @@ export default function PersonSpace() {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Popover
|
<Popover
|
||||||
style={{ "--background": "#1E1C29"}}
|
style={{ "--background": "#1E1C29" }}
|
||||||
content={
|
content={
|
||||||
<div
|
<div
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
@ -234,9 +246,7 @@ export default function PersonSpace() {
|
||||||
/>
|
/>
|
||||||
<span>{streamerInfo?.streamer_ext?.user_id}</span>
|
<span>{streamerInfo?.streamer_ext?.user_id}</span>
|
||||||
</li>
|
</li>
|
||||||
<li
|
<li className="h-4 flex items-center text-xs bg-[#FFFFFF1A] rounded-full px-2 py-2.5 mb-1 mr-1">
|
||||||
className="h-4 flex items-center text-xs bg-[#FFFFFF1A] rounded-full px-2 py-2.5 mb-1 mr-1"
|
|
||||||
>
|
|
||||||
<Image
|
<Image
|
||||||
src="/icons/info/fan.png"
|
src="/icons/info/fan.png"
|
||||||
width={14}
|
width={14}
|
||||||
|
@ -353,12 +363,12 @@ export default function PersonSpace() {
|
||||||
{spaceData?.previews?.images?.map((item, index) => (
|
{spaceData?.previews?.images?.map((item, index) => (
|
||||||
<div
|
<div
|
||||||
key={item.id}
|
key={item.id}
|
||||||
className="w-20 h-20 overflow-hidden rounded"
|
className="w-20 h-20 overflow-hidden rounded mr-1"
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
width="20vw"
|
width="20vw"
|
||||||
height="20vw"
|
height="20vw"
|
||||||
className={`rounded mr-2 ${!!index && "imageBlur"}`}
|
className={`rounded mr-2 ${spaceData?.visitor_role === 4 && "imageBlur"}`}
|
||||||
fit="cover"
|
fit="cover"
|
||||||
src={item.urls[0]}
|
src={item.urls[0]}
|
||||||
/>
|
/>
|
||||||
|
@ -368,7 +378,6 @@ export default function PersonSpace() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{streamerInfo?.streamer_ext?.platforms && (
|
|
||||||
<>
|
<>
|
||||||
<Divider />
|
<Divider />
|
||||||
<div>
|
<div>
|
||||||
|
@ -385,7 +394,7 @@ export default function PersonSpace() {
|
||||||
/>
|
/>
|
||||||
<div className="text-base">
|
<div className="text-base">
|
||||||
<span>微信:</span>
|
<span>微信:</span>
|
||||||
<span>点击查看</span>
|
<span className="text-sky-600" onClick={() => setVisible(true)}>点击查看</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
@ -409,9 +418,9 @@ export default function PersonSpace() {
|
||||||
<div className="flex text-sm">
|
<div className="flex text-sm">
|
||||||
<div
|
<div
|
||||||
className="flex items-center mr-6"
|
className="flex items-center mr-6"
|
||||||
// onClick={() => {
|
onClick={() => {
|
||||||
// Clipboard.setStringAsync(item.url);
|
copy(item.url);
|
||||||
// }}
|
}}
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon={faCopy}
|
icon={faCopy}
|
||||||
|
@ -426,7 +435,7 @@ export default function PersonSpace() {
|
||||||
size="xl"
|
size="xl"
|
||||||
className="h-3 mr-1"
|
className="h-3 mr-1"
|
||||||
/>
|
/>
|
||||||
<span>前往</span>
|
<Link href={item?.url}>前往</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
@ -434,7 +443,6 @@ export default function PersonSpace() {
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between items-center px-4 py-4 fixed bottom-0 bg-deepBg w-full border-t-2 border-[#FFFFFF1A]">
|
<div className="flex justify-between items-center px-4 py-4 fixed bottom-0 bg-deepBg w-full border-t-2 border-[#FFFFFF1A]">
|
||||||
<div
|
<div
|
||||||
|
@ -457,6 +465,7 @@ export default function PersonSpace() {
|
||||||
price={streamerInfo?.streamer_ext?.wechat_coin_price}
|
price={streamerInfo?.streamer_ext?.wechat_coin_price}
|
||||||
name={streamerInfo?.streamer_ext?.name}
|
name={streamerInfo?.streamer_ext?.name}
|
||||||
streamerMid={streamerInfo?.streamer_ext?.mid}
|
streamerMid={streamerInfo?.streamer_ext?.mid}
|
||||||
|
avatar={streamerInfo?.streamer_ext?.avatar?.images[0]?.urls[0]}
|
||||||
streamerData={streamerInfo}
|
streamerData={streamerInfo}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -156,7 +156,7 @@ const ZoneItem = ({ data, showMore }) => {
|
||||||
return (
|
return (
|
||||||
<List.Item
|
<List.Item
|
||||||
className="!p-0"
|
className="!p-0"
|
||||||
onClick={() => router.push(`/space/${data.mid}`)}
|
onClick={() => router.push(`space/profile/${data.mid}`)}
|
||||||
key={data.id}
|
key={data.id}
|
||||||
arrow={false}
|
arrow={false}
|
||||||
>
|
>
|
||||||
|
|
|
@ -165,6 +165,7 @@ export default function Space() {
|
||||||
<Swiper.Item>
|
<Swiper.Item>
|
||||||
{!activeIndex && (
|
{!activeIndex && (
|
||||||
<div>
|
<div>
|
||||||
|
{!loading ? (
|
||||||
<div className="px-4 pb-8">
|
<div className="px-4 pb-8">
|
||||||
{dataList.length > 0 ? (
|
{dataList.length > 0 ? (
|
||||||
<ul className="grid grid-cols-2 gap-2 overflow-y-auto">
|
<ul className="grid grid-cols-2 gap-2 overflow-y-auto">
|
||||||
|
@ -197,12 +198,12 @@ export default function Space() {
|
||||||
className="mt-4"
|
className="mt-4"
|
||||||
src="/icons/rightarrow_border.png"
|
src="/icons/rightarrow_border.png"
|
||||||
/>
|
/>
|
||||||
<Image
|
{/* <Image
|
||||||
width={32}
|
width={32}
|
||||||
height={32}
|
height={32}
|
||||||
className="absolute bottom-0 right-0"
|
className="absolute bottom-0 right-0"
|
||||||
src="/icons/magnifier.png"
|
src="/icons/magnifier.png"
|
||||||
/>
|
/> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -231,8 +232,7 @@ export default function Space() {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
) : (
|
||||||
{loading && (
|
|
||||||
<div
|
<div
|
||||||
className="w-full text-center flex items-center justify-center"
|
className="w-full text-center flex items-center justify-center"
|
||||||
style={{ height: scrollHeight - 60 + "px" }}
|
style={{ height: scrollHeight - 60 + "px" }}
|
||||||
|
@ -323,13 +323,13 @@ const VisitingCard = ({ data }) => {
|
||||||
<span className="font-bold overflow-hidden whitespace-nowrap text-ellipsis">
|
<span className="font-bold overflow-hidden whitespace-nowrap text-ellipsis">
|
||||||
{data?.streamer_ext?.name}
|
{data?.streamer_ext?.name}
|
||||||
</span>
|
</span>
|
||||||
<ul className="ml-2">
|
<ul className="flex ml-2">
|
||||||
{data?.admission_price !== 0 && (
|
{data.visitor_role === 3 && (
|
||||||
<li className="text-[10px] bg-primary rounded px-1 mr-1 whitespace-nowrap">
|
<li className="text-[10px] bg-primary rounded px-1 mr-1 whitespace-nowrap">
|
||||||
付费
|
创建者
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
{data.visitor_role === 3 && (
|
{data?.admission_price !== 0 && (
|
||||||
<li className="text-[10px] bg-primary rounded px-1 mr-1 whitespace-nowrap">
|
<li className="text-[10px] bg-primary rounded px-1 mr-1 whitespace-nowrap">
|
||||||
付费
|
付费
|
||||||
</li>
|
</li>
|
||||||
|
|
|
@ -1,10 +1,15 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import React, { useEffect, useState, useRef } from "react";
|
import React, { useEffect, useState, useRef } from "react";
|
||||||
import { Image, ImageViewer,Dialog } from "antd-mobile";
|
import { Image, ImageViewer, Dialog } from "antd-mobile";
|
||||||
import { useRouter, useParams } from "next/navigation";
|
import { useRouter, useParams } from "next/navigation";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { faAngleLeft, faAngleRight,faClose,faSave } from "@fortawesome/free-solid-svg-icons";
|
import {
|
||||||
|
faAngleLeft,
|
||||||
|
faAngleRight,
|
||||||
|
faClose,
|
||||||
|
faSave,
|
||||||
|
} from "@fortawesome/free-solid-svg-icons";
|
||||||
import AddWeChat from "@/components/AddWeChat";
|
import AddWeChat from "@/components/AddWeChat";
|
||||||
import { getStreamerInfo } from "@/api/space";
|
import { getStreamerInfo } from "@/api/space";
|
||||||
export default function PersonSpaceIntroduce() {
|
export default function PersonSpaceIntroduce() {
|
||||||
|
@ -24,7 +29,10 @@ export default function PersonSpaceIntroduce() {
|
||||||
|
|
||||||
getStreamerInfo(Number(mid)).then((res) => {
|
getStreamerInfo(Number(mid)).then((res) => {
|
||||||
setData(res);
|
setData(res);
|
||||||
console.log("mid", mid,res);
|
if (res?.visitor_role!=4) {
|
||||||
|
router.push("/space/" + mid);
|
||||||
|
}
|
||||||
|
console.log("mid", mid, res);
|
||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
const showPhotos = (photos, index) => {
|
const showPhotos = (photos, index) => {
|
||||||
|
@ -94,7 +102,7 @@ export default function PersonSpaceIntroduce() {
|
||||||
<div
|
<div
|
||||||
className="bg-no-repeat bg-cover bg-center"
|
className="bg-no-repeat bg-cover bg-center"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage:`url(${data?.streamer_ext?.cover?.images[0]?.urls[0]})`,
|
backgroundImage: `url(${data?.streamer_ext?.cover?.images[0]?.urls[0]})`,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="px-4 pt-24 pb-8 bg-[#181818a9]">
|
<div className="px-4 pt-24 pb-8 bg-[#181818a9]">
|
||||||
|
|
|
@ -17,7 +17,6 @@ export default function AddWeChat({
|
||||||
}) {
|
}) {
|
||||||
const [isMoneyEnough, setIsMoneyEnough] = useState(true);
|
const [isMoneyEnough, setIsMoneyEnough] = useState(true);
|
||||||
//是否已经解锁微信
|
//是否已经解锁微信
|
||||||
const [isWechatUnlocked, setIsWechatUnlocked] = useState(false);
|
|
||||||
const [streamerDetailData, setStreamerDetailData] = useState(null);
|
const [streamerDetailData, setStreamerDetailData] = useState(null);
|
||||||
const [wechat, setWechat] = useState(<DotLoading/>);
|
const [wechat, setWechat] = useState(<DotLoading/>);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
@ -31,13 +30,13 @@ export default function AddWeChat({
|
||||||
}, [streamerData]);
|
}, [streamerData]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log("avatar",avatar)
|
console.log("avatar",avatar)
|
||||||
if (!streamerDetailData && !streamerDetailData?.is_unlock_wechat) return;
|
if (!streamerDetailData || !streamerDetailData?.is_unlock_wechat) return;
|
||||||
require("POST", "/api/vas/query_wechat", {
|
require("POST", "/api/vas/query_wechat", {
|
||||||
body: {
|
body: {
|
||||||
uid: streamerMid,
|
uid: streamerMid,
|
||||||
},
|
},
|
||||||
}).then(res=>{
|
}).then(res=>{
|
||||||
setWechat(res.data.wechat_contact)
|
setWechat(res.data?.wechat_contact)
|
||||||
})
|
})
|
||||||
|
|
||||||
}, [streamerDetailData]);
|
}, [streamerDetailData]);
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import React, { useEffect, useRef, useState } from "react";
|
import React, { useEffect, useRef, useState } from "react";
|
||||||
import { Image, ImageViewer, Dialog } from "antd-mobile";
|
import { Image, ImageViewer, Dialog, Swiper } from "antd-mobile";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { faAngleUp, faClose, faSave } from "@fortawesome/free-solid-svg-icons";
|
import { faAngleUp, faClose, faSave } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
|
||||||
|
@ -10,27 +10,44 @@ const tabItems = [
|
||||||
{ key: "follow", title: "关注" },
|
{ key: "follow", title: "关注" },
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function Photos({ media }) {
|
export default function Photos({ isUnlocked, mediaAmount, media }) {
|
||||||
const [seeAllPhotos, setSeeAllPhotos] = useState(false);
|
const [seeAllPhotos, setSeeAllPhotos] = useState(false);
|
||||||
const [currentPhotos, setCurrentPhotos] = useState([]);
|
const [currentPhotos, setCurrentPhotos] = useState([]);
|
||||||
const [photos, setPhotos] = useState([]);
|
const [photos, setPhotos] = useState([]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (media) {
|
if (media) {
|
||||||
let imgArr = media.images.map(item=>({type:"img",url:item.urls?.[0]}))
|
let imgArr = media.images.map((item) => ({
|
||||||
let videoArr = media.videos.map(item=>({type:"video",url:item.cover_urls?.[0],mp4:item.urls?.[0]}))
|
type: "img",
|
||||||
let arr=[...imgArr,...videoArr]
|
url: item.urls?.[0],
|
||||||
|
}));
|
||||||
|
let videoArr = media.videos.map((item) => ({
|
||||||
|
type: "video",
|
||||||
|
url: item.cover_urls?.[0],
|
||||||
|
mp4: item.urls?.[0],
|
||||||
|
}));
|
||||||
|
let arr = [...imgArr, ...videoArr];
|
||||||
let newPhotos = [...arr];
|
let newPhotos = [...arr];
|
||||||
setPhotos(arr);
|
|
||||||
if (arr.length > 9) {
|
if (mediaAmount && !isUnlocked) {
|
||||||
|
newPhotos = Array(mediaAmount)
|
||||||
|
.fill(null)
|
||||||
|
.map((item, index) => {
|
||||||
|
return newPhotos[index]
|
||||||
|
? newPhotos[index]
|
||||||
|
: { url: newPhotos[0]?.url, type: "hid" };
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setPhotos(newPhotos);
|
||||||
|
if (newPhotos.length > 9) {
|
||||||
newPhotos = newPhotos.slice(0, 9);
|
newPhotos = newPhotos.slice(0, 9);
|
||||||
}
|
}
|
||||||
|
console.log("newPhotos", newPhotos);
|
||||||
setCurrentPhotos(newPhotos);
|
setCurrentPhotos(newPhotos);
|
||||||
}
|
}
|
||||||
|
|
||||||
}, [media]);
|
}, [media]);
|
||||||
const showPhotos = (photos, index) => {
|
const showPhotos = (photos, index) => {
|
||||||
ImageViewer.Multi.show({
|
ImageViewer.Multi.show({
|
||||||
images: photos.map((item) => item.url),
|
images: photos.map((item) => item?.url),
|
||||||
defaultIndex: index,
|
defaultIndex: index,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -55,12 +72,10 @@ export default function Photos({ media }) {
|
||||||
height="100%"
|
height="100%"
|
||||||
controls
|
controls
|
||||||
className="w-screen h-[70vh] rounded-lg object-contain"
|
className="w-screen h-[70vh] rounded-lg object-contain"
|
||||||
poster={video.url}
|
poster={video?.url}
|
||||||
|
autoPlay={true}
|
||||||
>
|
>
|
||||||
<source
|
<source src={video.mp4} type="video/mp4" />
|
||||||
src={video.mp4}
|
|
||||||
type="video/mp4"
|
|
||||||
/>
|
|
||||||
您的浏览器不支持 Video 标签。
|
您的浏览器不支持 Video 标签。
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
|
@ -69,7 +84,7 @@ export default function Photos({ media }) {
|
||||||
key="closeBtn"
|
key="closeBtn"
|
||||||
// onClick={handleSeeAllPhotos}
|
// onClick={handleSeeAllPhotos}
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={faSave} size="2xl"/>
|
<FontAwesomeIcon icon={faSave} size="2xl" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
|
@ -97,32 +112,42 @@ export default function Photos({ media }) {
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={`grid ${currentPhotos.length > 1?"grid-cols-3 gap-1.5":"grid-cols-1"}`}>
|
<div
|
||||||
|
className={`grid ${
|
||||||
|
currentPhotos.length > 1 ? "grid-cols-3 gap-1.5" : "grid-cols-1"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
{currentPhotos.map((item, index) => {
|
{currentPhotos.map((item, index) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="relative w-mfull"
|
className="relative w-mfull"
|
||||||
key={index}
|
key={index}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (item.type == "video") {
|
if (item?.type == "video") {
|
||||||
handleShowVideo(item);
|
handleShowVideo(item);
|
||||||
} else {
|
} else {
|
||||||
showPhotos(photos, index);
|
showPhotos(photos, index);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
{
|
||||||
|
<div className="overflow-hidden rounded">
|
||||||
<Image
|
<Image
|
||||||
// lazy={true}
|
// lazy={true}
|
||||||
placeholder={
|
placeholder={
|
||||||
<div className="w-full h-full bg-[#1d1d1d] rounded"></div>
|
<div className="w-full h-full bg-[#1d1d1d] rounded"></div>
|
||||||
}
|
}
|
||||||
width={currentPhotos.length>1 ? "24vw":"100%"}
|
width={currentPhotos.length > 1 ? "24vw" : "100%"}
|
||||||
height={currentPhotos.length>1 ? "24vw":"100%"}
|
height={currentPhotos.length > 1 ? "24vw" : "100%"}
|
||||||
className={`rounded max-w-full`}
|
className={`rounded max-w-full ${
|
||||||
|
item?.type == "hid" ? "imageBlur" : ""
|
||||||
|
}`}
|
||||||
fit="cover"
|
fit="cover"
|
||||||
src={item.url}
|
src={item?.url}
|
||||||
/>
|
/>
|
||||||
{item.type == "video" && (
|
</div>
|
||||||
|
}
|
||||||
|
{item?.type == "video" && (
|
||||||
<div className="absolute top-0 w-full h-full rounded flex justify-center items-center bg-[#33333348]">
|
<div className="absolute top-0 w-full h-full rounded flex justify-center items-center bg-[#33333348]">
|
||||||
<Image
|
<Image
|
||||||
className=""
|
className=""
|
||||||
|
@ -151,6 +176,7 @@ export default function Photos({ media }) {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
||||||
{seeAllPhotos && (
|
{seeAllPhotos && (
|
||||||
<div
|
<div
|
||||||
className="flex justify-center items-center bg-[#33333348] rounded"
|
className="flex justify-center items-center bg-[#33333348] rounded"
|
||||||
|
|
|
@ -74,7 +74,13 @@ export default function PostItem({
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="mr-8">
|
<div className="mr-8">
|
||||||
{data.media_component && <Photos media={data.media_component} />}
|
{data.media_component && (
|
||||||
|
<Photos
|
||||||
|
media={data.media_component}
|
||||||
|
isUnlocked={data.is_zone_moment_unlocked}
|
||||||
|
mediaAmount={data.media_amount}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
{type == "space" && !isCreator && !!data.c_type && (
|
{type == "space" && !isCreator && !!data.c_type && (
|
||||||
<PaySpacePost
|
<PaySpacePost
|
||||||
type={data.is_ironfan_visible ? "ironFan" : "superFan"}
|
type={data.is_ironfan_visible ? "ironFan" : "superFan"}
|
||||||
|
@ -90,7 +96,7 @@ export default function PostItem({
|
||||||
{type == "post" ? (
|
{type == "post" ? (
|
||||||
<div
|
<div
|
||||||
className="flex items-center"
|
className="flex items-center"
|
||||||
onClick={() => router.push("/profile/" + data.mid)}
|
onClick={() => router.push("/space/person_space_introduce/" + data.mid)}
|
||||||
>
|
>
|
||||||
{data.is_active_within_a_week ? (
|
{data.is_active_within_a_week ? (
|
||||||
<>
|
<>
|
||||||
|
|
|
@ -35,7 +35,7 @@ export default function SeeTiefen({
|
||||||
expenditure / 100
|
expenditure / 100
|
||||||
} / ${ironfanship_price / 100}`}</p>
|
} / ${ironfanship_price / 100}`}</p>
|
||||||
<p className="text-left my-2 text-sm text-[#FFFFFF40]">
|
<p className="text-left my-2 text-sm text-[#FFFFFF40]">
|
||||||
空间内累计消费达到¥1280即可成为
|
空间内累计消费达到¥{ironfanship_price / 100}即可成为
|
||||||
<span className="text-primary">铁粉</span>
|
<span className="text-primary">铁粉</span>
|
||||||
,可查看所有铁粉专享内容哟,快来成为我的铁粉吧~
|
,可查看所有铁粉专享内容哟,快来成为我的铁粉吧~
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -109,8 +109,8 @@ export async function uploadImage(asset) {
|
||||||
});
|
});
|
||||||
|
|
||||||
if (uploadResponse.status === 200) {
|
if (uploadResponse.status === 200) {
|
||||||
console.log(asset);
|
// console.log(asset);
|
||||||
debugger
|
// debugger
|
||||||
const info = await calculateFileMetadata(asset);
|
const info = await calculateFileMetadata(asset);
|
||||||
const item = {
|
const item = {
|
||||||
src_id: auth.directory + "/" + auth.filename,
|
src_id: auth.directory + "/" + auth.filename,
|
||||||
|
|
Loading…
Reference in New Issue