1213 lines
39 KiB
JavaScript
1213 lines
39 KiB
JavaScript
"use client";
|
|
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import {
|
|
Input,
|
|
List,
|
|
DotLoading,
|
|
Toast,
|
|
Image,
|
|
Popup,
|
|
Radio,
|
|
Picker,
|
|
Space,
|
|
} from "antd-mobile";
|
|
import { useRouter } from "next/navigation";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faAngleLeft, faClose } from "@fortawesome/free-solid-svg-icons";
|
|
import requireAPI from "@/utils/requireAPI";
|
|
import { debounce } from "@/utils/tools";
|
|
import Empty from "@/components/Empty";
|
|
import MySlider from "@/components/MySlider";
|
|
import baseRequest from "@/utils/baseRequest";
|
|
|
|
const filterComprehensiveItems = {
|
|
age: { lower_bound: 18, upper_bound: 60 },
|
|
fans: { lower_bound: 1, upper_bound: 1000 },
|
|
weight: { lower_bound: 35, upper_bound: 100 },
|
|
height: { lower_bound: 140, upper_bound: 200 },
|
|
city: "不限",
|
|
constellation: "不限",
|
|
is_active_within_a_week: 0,
|
|
comprehensiveUsed: { show: false, used: false },
|
|
};
|
|
const filterPriceItems = {
|
|
zone_admission_price: { lower_bound: 0, upper_bound: 4000 },
|
|
wechat_coin_price: { lower_bound: 0, upper_bound: 100000 },
|
|
priceUsed: { show: false, used: false },
|
|
};
|
|
const newDebounce = debounce(function (fn) {
|
|
fn && fn();
|
|
}, 500);
|
|
export default function Search() {
|
|
const base = baseRequest();
|
|
const router = useRouter();
|
|
const inputRef = useRef();
|
|
// 获取屏幕高度
|
|
// const scrollHeight = 600;
|
|
const [searchValue, setSearchValue] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
const [streamers, setStreamers] = useState([]);
|
|
const [recommList, setRecommList] = useState([]);
|
|
const [dontScroll, setDontScroll] = useState(true);
|
|
const [isMember, setIsMember] = useState(0);
|
|
const [isFilterVisible, setIsFilterVisible] = useState({
|
|
comprehensive: false,
|
|
zone_admission_price: false,
|
|
});
|
|
const [filtersValue, setFiltersValue] = useState({
|
|
...filterComprehensiveItems,
|
|
...filterPriceItems,
|
|
});
|
|
const [currentFiltersChangeValue, setCurrentFiltersChangeValue] = useState({
|
|
...filterComprehensiveItems,
|
|
...filterPriceItems,
|
|
});
|
|
const filters = [
|
|
{
|
|
name: "年龄",
|
|
upper_bound: 60,
|
|
lower_bound: 18,
|
|
default: 19,
|
|
step: 1,
|
|
type: "slider",
|
|
unit: "岁",
|
|
key: "age",
|
|
stepValues: Array(61)
|
|
.fill(null)
|
|
.map((_, index) => index),
|
|
},
|
|
{
|
|
name: "全网粉丝",
|
|
upper_bound: 200,
|
|
lower_bound: 1,
|
|
default: 24,
|
|
step: 200 / 9,
|
|
type: "slider",
|
|
unit: "万",
|
|
key: "fans",
|
|
stepValues: [1, 5, 10, 20, 50, 75, 100, 150, 200, 1000],
|
|
},
|
|
{
|
|
name: "身高",
|
|
upper_bound: 200,
|
|
lower_bound: 140,
|
|
default: 160,
|
|
step: 1,
|
|
type: "slider",
|
|
unit: "cm",
|
|
key: "height",
|
|
stepValues: Array(201)
|
|
.fill(null)
|
|
.map((_, index) => index),
|
|
},
|
|
{
|
|
name: "体重",
|
|
upper_bound: 100,
|
|
lower_bound: 35,
|
|
default: 50,
|
|
step: 1,
|
|
type: "slider",
|
|
unit: "kg",
|
|
key: "weight",
|
|
stepValues: Array(101)
|
|
.fill(null)
|
|
.map((_, index) => index),
|
|
},
|
|
{
|
|
name: "所在地",
|
|
upper_bound: 1000,
|
|
lower_bound: 10,
|
|
default: 0,
|
|
step: 1,
|
|
type: "select",
|
|
items: [
|
|
"不限",
|
|
"北京市",
|
|
"天津市",
|
|
"河北省",
|
|
"山西省",
|
|
"内蒙古自治区",
|
|
"辽宁省",
|
|
"吉林省",
|
|
"黑龙江省",
|
|
"上海市",
|
|
"江苏省",
|
|
"浙江省",
|
|
"安徽省",
|
|
"福建省",
|
|
"江西省",
|
|
"山东省",
|
|
"河南省",
|
|
"湖北省",
|
|
"湖南省",
|
|
"广东省",
|
|
"广西壮族自治区",
|
|
"海南省",
|
|
"重庆市",
|
|
"四川省",
|
|
"贵州省",
|
|
"云南省",
|
|
"西藏自治区",
|
|
"陕西省",
|
|
"甘肃省",
|
|
"青海省",
|
|
"宁夏回族自治区",
|
|
"新疆维吾尔自治区",
|
|
"台湾省",
|
|
"香港特别行政区",
|
|
"澳门特别行政区",
|
|
],
|
|
key: "city",
|
|
},
|
|
{
|
|
name: "星座",
|
|
upper_bound: 1000,
|
|
lower_bound: 10,
|
|
default: 0,
|
|
step: 1,
|
|
type: "select",
|
|
key: "constellation",
|
|
items: [
|
|
"不限",
|
|
"白羊座",
|
|
"金牛座",
|
|
"双子座",
|
|
"巨蟹座",
|
|
"狮子座",
|
|
"处女座",
|
|
"天秤座",
|
|
"天蝎座",
|
|
"射手座",
|
|
"摩羯座",
|
|
"水瓶座",
|
|
"双鱼座",
|
|
],
|
|
},
|
|
{
|
|
name: "最近7日内空间有更新",
|
|
upper_bound: 1000,
|
|
lower_bound: 10,
|
|
default: 24,
|
|
step: 1,
|
|
type: "checkbox",
|
|
key: "is_active_within_a_week",
|
|
},
|
|
];
|
|
const priceFilters = [
|
|
{
|
|
name: "空间价格",
|
|
upper_bound: 300,
|
|
lower_bound: 0,
|
|
default: 24,
|
|
step: 300 / 7,
|
|
type: "slider",
|
|
unit: "¥",
|
|
key: "zone",
|
|
stepValues: [0, 10, 50, 100, 150, 200, 300, 4000],
|
|
},
|
|
{
|
|
name: "微信价格",
|
|
desc: "10金币=1元",
|
|
upper_bound: 30000,
|
|
lower_bound: 0,
|
|
default: 24,
|
|
step: 30000 / 9,
|
|
type: "slider",
|
|
unit: "金币",
|
|
key: "wechat",
|
|
stepValues: [0, 100, 300, 500, 1000, 5000, 10000, 20000, 30000, 100000],
|
|
},
|
|
];
|
|
useEffect(() => {
|
|
inputRef.current?.focus();
|
|
getIsMember();
|
|
}, []);
|
|
|
|
const isNumeric = (str) => {
|
|
return /^\d+$/.test(str);
|
|
};
|
|
const getResult = async (value) => {
|
|
// console.log("searchValue", value);
|
|
if (filtersValue.comprehensiveUsed.used || filtersValue.priceUsed.used) {
|
|
handleResetFiltersValue();
|
|
handleResetFiltersSearchValue();
|
|
}
|
|
const isSearchInt = isNumeric(value);
|
|
let api = "";
|
|
let querryParams = "";
|
|
if (isSearchInt) {
|
|
api = "/api/streamer/list_ext_fuzzily_by_user_id";
|
|
querryParams = { user_id: parseInt(value, 10) };
|
|
} else {
|
|
api = "/api/streamer/list_ext_fuzzily_by_name";
|
|
querryParams = { name: value };
|
|
}
|
|
try {
|
|
setLoading(true);
|
|
const data = await requireAPI("POST", api, {
|
|
body: {
|
|
...querryParams,
|
|
offset: 0,
|
|
limit: 20,
|
|
},
|
|
});
|
|
if (data.ret === -1) {
|
|
Toast.show({
|
|
icon: "fail",
|
|
content: data.msg,
|
|
position: "top",
|
|
});
|
|
return;
|
|
}
|
|
// if (!ignore) {
|
|
// const zonesData = data.data.list.filter((item) => item.zones.length > 0);
|
|
setStreamers(data.data.list);
|
|
setRecommList([]);
|
|
// }
|
|
setLoading(false);
|
|
} catch (error) {
|
|
// console.error(error);
|
|
}
|
|
};
|
|
const getIsMember = async () => {
|
|
try {
|
|
const data = await requireAPI(
|
|
"POST",
|
|
"/api/account/list_by_mid",
|
|
{},
|
|
true
|
|
);
|
|
setIsMember(data.data.account.is_a_member);
|
|
} catch (error) {
|
|
// console.error(error);
|
|
}
|
|
};
|
|
//重置筛选值
|
|
const handleResetFiltersValue = async (type) => {
|
|
let obj = filtersValue;
|
|
if (type == "comprehensive") {
|
|
obj = {
|
|
...filtersValue,
|
|
...filterComprehensiveItems,
|
|
};
|
|
} else if (type == "zone_admission_price") {
|
|
obj = {
|
|
...filtersValue,
|
|
...filterPriceItems,
|
|
};
|
|
} else {
|
|
obj = {
|
|
...filterComprehensiveItems,
|
|
...filterPriceItems,
|
|
};
|
|
}
|
|
setCurrentFiltersChangeValue((old) => {
|
|
const newObj = {
|
|
...old,
|
|
...obj,
|
|
};
|
|
return newObj;
|
|
});
|
|
};
|
|
//重置筛选查询值
|
|
const handleResetFiltersSearchValue = (type) => {
|
|
let obj = filtersValue;
|
|
if (type == "comprehensive") {
|
|
obj = {
|
|
...filtersValue,
|
|
...filterComprehensiveItems,
|
|
};
|
|
} else if (type == "zone_admission_price") {
|
|
obj = {
|
|
...filtersValue,
|
|
...filterPriceItems,
|
|
};
|
|
} else {
|
|
obj = {
|
|
...filterComprehensiveItems,
|
|
...filterPriceItems,
|
|
};
|
|
}
|
|
setFiltersValue((old) => {
|
|
const newObj = {
|
|
...old,
|
|
...obj,
|
|
};
|
|
if (!obj.comprehensiveUsed.used && !obj.priceUsed.used) {
|
|
setRecommList([]);
|
|
setStreamers([]);
|
|
} else {
|
|
getFiltersResult(newObj);
|
|
}
|
|
return newObj;
|
|
});
|
|
};
|
|
const getFiltersResult = async (obj) => {
|
|
if (searchValue != "") {
|
|
setSearchValue("");
|
|
}
|
|
setFiltersValue((old) => {
|
|
return {
|
|
...old,
|
|
...obj,
|
|
};
|
|
});
|
|
// setFiltersValue({ ...filtersValue, ...currentFiltersChangeValue });
|
|
const newObj = obj || { ...filtersValue, ...currentFiltersChangeValue };
|
|
|
|
let querryParams;
|
|
let currentFilterValue = {
|
|
...newObj,
|
|
city: newObj.city == "不限" ? "" : newObj.city,
|
|
constellation: newObj.constellation == "不限" ? "" : newObj.constellation,
|
|
zone_admission_price: {
|
|
lower_bound: newObj.zone_admission_price.lower_bound * 100,
|
|
upper_bound: newObj.zone_admission_price.upper_bound * 100,
|
|
},
|
|
};
|
|
delete currentFilterValue.comprehensiveUsed;
|
|
delete currentFilterValue.priceUsed;
|
|
querryParams = currentFilterValue;
|
|
try {
|
|
const data = await requireAPI("POST", "/api/streamer/filter", {
|
|
body: { ...querryParams },
|
|
});
|
|
if (data.ret === -1) {
|
|
Toast.show({
|
|
icon: "fail",
|
|
content: data.msg,
|
|
position: "top",
|
|
});
|
|
return;
|
|
}
|
|
setStreamers(data.data.streamer_list);
|
|
setRecommList(data.data.recomm_list);
|
|
setLoading(false);
|
|
} catch (error) {
|
|
// console.error(error);
|
|
}
|
|
};
|
|
return (
|
|
<div className="">
|
|
<div className="flex items-center p-4 sticky top-0 bg-deepBg z-10">
|
|
<FontAwesomeIcon
|
|
icon={faAngleLeft}
|
|
style={{ maxWidth: "12px" }}
|
|
size="xl"
|
|
className="mr-3"
|
|
onClick={() => {
|
|
router.back();
|
|
}}
|
|
/>
|
|
<div className="flex items-center w-full">
|
|
<div className="relative bg-[#FFFFFF1A] rounded-lg px-4 py-1 w-full">
|
|
<Input
|
|
placeholder="搜索Ta的昵称或id"
|
|
autoFocus={true}
|
|
value={searchValue}
|
|
ref={inputRef}
|
|
style={{
|
|
"--font-size": "16px",
|
|
}}
|
|
onChange={(val) => {
|
|
setSearchValue((old) => {
|
|
let test = (e) => {
|
|
if (val == "") {
|
|
setStreamers([]);
|
|
return;
|
|
}
|
|
getResult(val);
|
|
};
|
|
newDebounce(test);
|
|
return val;
|
|
});
|
|
}}
|
|
/>
|
|
<div className="absolute top-1/2 -translate-y-1/2 right-2">
|
|
{loading && <DotLoading />}
|
|
</div>
|
|
</div>
|
|
{searchValue && (
|
|
<p
|
|
className="text-base whitespace-no-wrap ml-2 text-primary font-bold"
|
|
onClick={() => {
|
|
setSearchValue("");
|
|
setStreamers([]);
|
|
}}
|
|
>
|
|
清空
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2 justify-evenly pt-4 px-4">
|
|
<div
|
|
className="px-2 py-1 rounded-xl flex items-center justify-around flex-nowrap border-[#ff75c8]"
|
|
style={{
|
|
borderWidth: filtersValue.comprehensiveUsed.used ? 1 : 0,
|
|
boxSizing: "border-box",
|
|
}}
|
|
>
|
|
<span
|
|
className="text-lg font-medium"
|
|
style={{
|
|
marginVertical: "6px",
|
|
color: filtersValue.comprehensiveUsed.used
|
|
? "#ff75c8"
|
|
: "#ffffff80",
|
|
}}
|
|
onClick={() => {
|
|
setIsFilterVisible({
|
|
...isFilterVisible,
|
|
comprehensive: !isFilterVisible.comprehensive,
|
|
});
|
|
}}
|
|
>
|
|
综合筛选
|
|
</span>
|
|
{filtersValue.comprehensiveUsed.used && (
|
|
<div
|
|
onClick={() => {
|
|
handleResetFiltersValue("comprehensive");
|
|
handleResetFiltersSearchValue("comprehensive");
|
|
}}
|
|
style={{
|
|
width: "48px",
|
|
backgroundColor: "#301024",
|
|
height: 32,
|
|
borderRadius: 12,
|
|
lineHeight: "32px",
|
|
marginRight: -12,
|
|
}}
|
|
className="text-center"
|
|
>
|
|
<FontAwesomeIcon
|
|
icon={faClose}
|
|
style={{ maxWidth: "12px" }}
|
|
size="xl"
|
|
className="text-[#ff75c8]"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="px-2 py-1 rounded-xl flex items-center justify-around flex-nowrap"
|
|
style={{
|
|
borderColor: "#ff75c8",
|
|
borderWidth: filtersValue.priceUsed.used ? "1px" : 0,
|
|
boxSizing: "border-box",
|
|
}}
|
|
>
|
|
<span
|
|
className="text-lg font-medium"
|
|
style={{
|
|
marginVertical: "6px",
|
|
color: filtersValue.priceUsed.used ? "#ff75c8" : "#ffffff80",
|
|
}}
|
|
onClick={() => {
|
|
setIsFilterVisible({
|
|
...isFilterVisible,
|
|
zone_admission_price: !isFilterVisible.zone_admission_price,
|
|
});
|
|
}}
|
|
>
|
|
价格筛选
|
|
</span>
|
|
{filtersValue.priceUsed.used && (
|
|
<div
|
|
onClick={() => {
|
|
handleResetFiltersValue("zone_admission_price");
|
|
handleResetFiltersSearchValue("zone_admission_price");
|
|
}}
|
|
style={{
|
|
width: "48px",
|
|
backgroundColor: "#301024",
|
|
height: 32,
|
|
borderRadius: 12,
|
|
lineHeight: "32px",
|
|
marginRight: -12,
|
|
}}
|
|
className="text-center"
|
|
>
|
|
<FontAwesomeIcon
|
|
icon={faClose}
|
|
style={{ maxWidth: "12px" }}
|
|
size="xl"
|
|
className="text-[#ff75c8]"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flex: 1,
|
|
}}
|
|
>
|
|
<Popup
|
|
destroyOnClose={true}
|
|
closeOnMaskClick={true}
|
|
// stopPropagation={["touchstart"]}
|
|
maskStyle={{ backgroundColor: "#0000004d" }}
|
|
visible={isFilterVisible.comprehensive}
|
|
bodyStyle={{
|
|
height: "calc(100vh - 110px)",
|
|
backgroundColor: "black",
|
|
}}
|
|
onMaskClick={() =>
|
|
setIsFilterVisible({
|
|
zone_admission_price: false,
|
|
comprehensive: false,
|
|
})
|
|
}
|
|
>
|
|
<Space className="p-4" justify="between" align="center" block={true}>
|
|
<p className="text-xl font-bold">综合筛选</p>
|
|
<div
|
|
className="p-2 rounded-xl flex justify-center items-center mr-2 bg-[#ffffff1a]"
|
|
style={{
|
|
width: 32,
|
|
height: 32,
|
|
}}
|
|
>
|
|
<FontAwesomeIcon
|
|
icon={faClose}
|
|
size="xl"
|
|
className="text-whitex"
|
|
onClick={() => {
|
|
setIsFilterVisible({
|
|
zone_admission_price: false,
|
|
comprehensive: false,
|
|
});
|
|
setCurrentFiltersChangeValue(filtersValue);
|
|
}}
|
|
/>
|
|
</div>
|
|
</Space>
|
|
<div
|
|
className="overflow-y-auto"
|
|
style={{ height: "calc(100vh - 170px)" }}
|
|
>
|
|
{filters.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex justify-between items-center p-4 rounded-xl bg-[#13121f] relative"
|
|
style={{
|
|
height: item.type == "slider" ? 120 : "auto",
|
|
margin: 18,
|
|
marginBottom: 3,
|
|
flexDirection: item.type !== "slider" ? "row" : "col",
|
|
alignItems: item.type == "slider" ? "flex-start" : "center",
|
|
// paddingBottom: 50,
|
|
}}
|
|
>
|
|
<span className="font-medium">{item.name}</span>
|
|
{item.type == "slider" ? (
|
|
<div
|
|
className="absolute top-[40px]"
|
|
style={{ paddingVertical: 6 }}
|
|
>
|
|
<MySlider
|
|
height={40}
|
|
width={
|
|
typeof window !== "undefined"
|
|
? window.innerWidth - 44
|
|
: 0
|
|
}
|
|
lower_bound={item.lower_bound}
|
|
upper_bound={item.upper_bound}
|
|
itemKey={item.key}
|
|
handleFunc={() => {
|
|
setDontScroll((old) => !old);
|
|
}}
|
|
leftValue={
|
|
item.key == "age"
|
|
? currentFiltersChangeValue?.age?.lower_bound
|
|
: item.key == "height"
|
|
? currentFiltersChangeValue?.height?.lower_bound
|
|
: item.key == "weight"
|
|
? currentFiltersChangeValue?.weight?.lower_bound
|
|
: currentFiltersChangeValue?.fans?.lower_bound
|
|
}
|
|
rightValue={
|
|
item.key == "age"
|
|
? currentFiltersChangeValue?.age?.upper_bound
|
|
: item.key == "height"
|
|
? currentFiltersChangeValue?.height?.upper_bound
|
|
: item.key == "weight"
|
|
? currentFiltersChangeValue?.weight?.upper_bound
|
|
: currentFiltersChangeValue?.fans?.upper_bound
|
|
}
|
|
step={item.step}
|
|
hasInfinity={item.key == "fans"}
|
|
stepValues={item.stepValues}
|
|
onChange={(value) => {
|
|
if (item.key == "age") {
|
|
setCurrentFiltersChangeValue((old) => ({
|
|
...old,
|
|
age: value,
|
|
}));
|
|
// setFiltersValue((old) => ({ ...old, age: value }));
|
|
} else if (item.key == "fans") {
|
|
setCurrentFiltersChangeValue((old) => ({
|
|
...old,
|
|
fans: value,
|
|
}));
|
|
// setFiltersValue((old) => ({ ...old, fans: value }));
|
|
} else if (item.key == "height") {
|
|
setCurrentFiltersChangeValue((old) => ({
|
|
...old,
|
|
height: value,
|
|
}));
|
|
// setFiltersValue((old) => ({
|
|
// ...old,
|
|
// height: value,
|
|
// }));
|
|
} else if (item.key == "weight") {
|
|
setCurrentFiltersChangeValue((old) => ({
|
|
...old,
|
|
weight: value,
|
|
}));
|
|
// setFiltersValue((old) => ({
|
|
// ...old,
|
|
// weight: value,
|
|
// }));
|
|
}
|
|
}}
|
|
maximumTrackTintColor="#382435"
|
|
minimumTrackTintColor="#ff75c8"
|
|
processHeight={5}
|
|
unit={item.unit}
|
|
unitSite={item.key == "zone" ? "left" : "right"}
|
|
thumbImage={require("../../public/icons/32DP/edit.png")}
|
|
/>
|
|
</div>
|
|
) : item.type == "checkbox" ? (
|
|
<Radio
|
|
checked={
|
|
currentFiltersChangeValue?.is_active_within_a_week == 1
|
|
}
|
|
onClick={() =>
|
|
setCurrentFiltersChangeValue((old) => ({
|
|
...old,
|
|
is_active_within_a_week: old.is_active_within_a_week
|
|
? 0
|
|
: 1,
|
|
}))
|
|
}
|
|
style={{ "--icon-size": "24px" }}
|
|
className="p-0 m-0 bg-transparent text-[#FF669E]"
|
|
/>
|
|
) : (
|
|
<Picker
|
|
columns={[
|
|
item.items?.map((it, index) => ({
|
|
label: it,
|
|
value: it,
|
|
})),
|
|
]}
|
|
// value={
|
|
// item.key == "constellation"
|
|
// ? filtersValue.constellation
|
|
// : filtersValue.city
|
|
// }
|
|
// onConfirm={setValue}
|
|
// onSelect={(val, extend) => {
|
|
// console.log("onSelect", val, extend.items);
|
|
// }}
|
|
onSelect={(value) =>
|
|
setCurrentFiltersChangeValue((old) => {
|
|
let newValue = { ...old };
|
|
if (item.key == "constellation") {
|
|
newValue.constellation = value[0];
|
|
} else {
|
|
newValue.city = value[0];
|
|
}
|
|
return newValue;
|
|
})
|
|
}
|
|
>
|
|
{(items, { open }) => {
|
|
return (
|
|
<div onClick={open}>
|
|
{item.key == "constellation"
|
|
? currentFiltersChangeValue.constellation
|
|
: currentFiltersChangeValue.city}
|
|
</div>
|
|
);
|
|
}}
|
|
</Picker>
|
|
)}
|
|
</div>
|
|
))}
|
|
<div className="flex flex-row justify-around items-center mb-4 p-4">
|
|
<div
|
|
className="p-2 rounded-xl flex justify-center items-center mr-2 bg-[#ffffff1a]"
|
|
style={{
|
|
width: 46,
|
|
height: 46,
|
|
}}
|
|
>
|
|
<FontAwesomeIcon
|
|
icon={faClose}
|
|
size="xl"
|
|
className="text-whitex"
|
|
onClick={() => {
|
|
setIsFilterVisible({
|
|
zone_admission_price: false,
|
|
comprehensive: false,
|
|
});
|
|
setCurrentFiltersChangeValue(filtersValue);
|
|
}}
|
|
/>
|
|
</div>
|
|
{isMember == 1 && (
|
|
<div
|
|
className="px-4 py-2 rounded-xl mr-2 bg-[#ffffff1a] flex justify-center items-center"
|
|
style={{
|
|
marginVertical: 6,
|
|
width: 120,
|
|
}}
|
|
onClick={() => handleResetFiltersValue("comprehensive")}
|
|
>
|
|
<span className="text-lg font-medium">重置</span>
|
|
</div>
|
|
)}
|
|
<div
|
|
onClick={() => {
|
|
setIsFilterVisible({
|
|
zone_admission_price: false,
|
|
comprehensive: false,
|
|
});
|
|
if (!isMember) {
|
|
router.push(
|
|
`/webView/${encodeURIComponent(
|
|
`/vip?base=${encodeURIComponent(JSON.stringify(base))}`
|
|
)}`
|
|
);
|
|
return;
|
|
}
|
|
getFiltersResult({
|
|
...currentFiltersChangeValue,
|
|
priceUsed: filtersValue.priceUsed,
|
|
});
|
|
setFiltersValue((old) => ({
|
|
...old,
|
|
comprehensiveUsed: { show: false, used: true },
|
|
}));
|
|
}}
|
|
className="px-4 py-2 rounded-xl"
|
|
style={{
|
|
marginVertical: 6,
|
|
backgroundColor: "#ff75c8",
|
|
minWidth: 120,
|
|
flex: 1,
|
|
}}
|
|
>
|
|
<p className="text-lg font-medium text-center">
|
|
{!isMember ? "开通VIP后即可筛选" : "确定"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Popup>
|
|
<Popup
|
|
stopPropagation={["touchstart"]}
|
|
closeOnMaskClick={true}
|
|
maskStyle={{ backgroundColor: "#0000004d" }}
|
|
bodyStyle={{
|
|
height: "calc(100vh - 110px)",
|
|
backgroundColor: "black",
|
|
}}
|
|
onMaskClick={() =>
|
|
setIsFilterVisible({
|
|
zone_admission_price: false,
|
|
comprehensive: false,
|
|
})
|
|
}
|
|
visible={isFilterVisible.zone_admission_price}
|
|
>
|
|
<Space className="p-4" justify="between" align="center" block={true}>
|
|
<p className="text-xl font-bold">价格筛选</p>
|
|
<div
|
|
className="p-2 rounded-xl flex justify-center items-center mr-2 bg-[#ffffff1a]"
|
|
style={{
|
|
width: 32,
|
|
height: 32,
|
|
}}
|
|
>
|
|
<FontAwesomeIcon
|
|
icon={faClose}
|
|
size="xl"
|
|
className="text-whitex"
|
|
onClick={() => {
|
|
setIsFilterVisible({
|
|
zone_admission_price: false,
|
|
comprehensive: false,
|
|
});
|
|
setCurrentFiltersChangeValue(filtersValue);
|
|
}}
|
|
/>
|
|
</div>
|
|
</Space>
|
|
<div
|
|
className="overflow-y-auto"
|
|
style={{ height: "calc(100vh - 170px)" }}
|
|
>
|
|
{priceFilters.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className="p-4 rounded-xl bg-[#13121f]"
|
|
style={{
|
|
margin: 18,
|
|
marginBottom: 6,
|
|
flexDirection: item.type !== "slider" ? "row" : "col",
|
|
justifyContent: "space-between",
|
|
// alignItems: "center",
|
|
// paddingBottom: 50,
|
|
}}
|
|
>
|
|
<span
|
|
className="font-medium"
|
|
style={{
|
|
marginVertical: 6,
|
|
}}
|
|
>
|
|
{item.name}
|
|
</span>
|
|
<MySlider
|
|
height={40}
|
|
width={
|
|
typeof window !== "undefined" ? window.innerWidth - 44 : 0
|
|
}
|
|
lower_bound={item.lower_bound}
|
|
upper_bound={item.upper_bound}
|
|
leftValue={
|
|
item.key == "zone"
|
|
? currentFiltersChangeValue?.zone_admission_price
|
|
?.lower_bound
|
|
: currentFiltersChangeValue?.wechat_coin_price
|
|
?.lower_bound
|
|
}
|
|
rightValue={
|
|
item.key == "zone"
|
|
? currentFiltersChangeValue?.zone_admission_price
|
|
?.upper_bound
|
|
: currentFiltersChangeValue?.wechat_coin_price
|
|
?.upper_bound
|
|
}
|
|
stepValues={item.stepValues}
|
|
step={item.step}
|
|
handleFunc={() => {
|
|
setDontScroll((old) => !old);
|
|
}}
|
|
hasInfinity={true}
|
|
itemKey={item.key}
|
|
onChange={(value) => {
|
|
if (item.key == "zone") {
|
|
setCurrentFiltersChangeValue((old) => ({
|
|
...old,
|
|
zone_admission_price: value,
|
|
}));
|
|
// setFiltersValue((old) => ({
|
|
// ...old,
|
|
// zone_admission_price: value,
|
|
// }));
|
|
} else if (item.key == "wechat") {
|
|
setCurrentFiltersChangeValue((old) => ({
|
|
...old,
|
|
wechat_coin_price: value,
|
|
}));
|
|
// setFiltersValue((old) => ({
|
|
// ...old,
|
|
// wechat_coin_price: value,
|
|
// }));
|
|
}
|
|
}}
|
|
maximumTrackTintColor="#382435"
|
|
minimumTrackTintColor="#ff75c8"
|
|
processHeight={5}
|
|
unit={item.unit}
|
|
unitSite={item.key == "zone" ? "left" : "right"}
|
|
thumbImage={require("../../public/icons/32DP/edit.png")}
|
|
/>
|
|
</div>
|
|
))}
|
|
<p className="text-sm font-medium mt-1 px-4 text-[#ffffff80]">
|
|
*{priceFilters[1]?.desc}
|
|
</p>
|
|
<div className="flex flex-row justify-around items-center mb-4 p-4 absolute bottom-0 w-full">
|
|
<div
|
|
className="p-2 rounded-xl flex justify-center items-center mr-2"
|
|
style={{
|
|
backgroundColor: "#ffffff1a",
|
|
width: 46,
|
|
height: 46,
|
|
}}
|
|
>
|
|
<FontAwesomeIcon
|
|
icon={faClose}
|
|
style={{ maxWidth: "12px" }}
|
|
size="xl"
|
|
className="text-white"
|
|
onClick={() => {
|
|
setIsFilterVisible({
|
|
zone_admission_price: false,
|
|
comprehensive: false,
|
|
});
|
|
setCurrentFiltersChangeValue(filtersValue);
|
|
}}
|
|
/>
|
|
</div>
|
|
{isMember == 1 && (
|
|
<div
|
|
className="px-4 py-2 rounded-xl mr-2 bg-[#ffffff1a] flex justify-center items-center"
|
|
style={{
|
|
marginVertical: 6,
|
|
width: 120,
|
|
}}
|
|
onClick={() =>
|
|
handleResetFiltersValue("zone_admission_price")
|
|
}
|
|
>
|
|
<span className="text-lg font-medium">重置</span>
|
|
</div>
|
|
)}
|
|
<div
|
|
onClick={() => {
|
|
setIsFilterVisible({
|
|
zone_admission_price: false,
|
|
comprehensive: false,
|
|
});
|
|
if (!isMember) {
|
|
router.push(
|
|
`/webView/${encodeURIComponent(
|
|
`/vip?base=${encodeURIComponent(JSON.stringify(base))}`
|
|
)}`
|
|
);
|
|
return;
|
|
}
|
|
getFiltersResult({
|
|
...currentFiltersChangeValue,
|
|
comprehensiveUsed: filtersValue.comprehensiveUsed,
|
|
});
|
|
setFiltersValue((old) => ({
|
|
...old,
|
|
priceUsed: { show: false, used: true },
|
|
}));
|
|
}}
|
|
className="px-4 py-2 rounded-xl"
|
|
style={{
|
|
marginVertical: 6,
|
|
backgroundColor: "#ff75c8",
|
|
minWidth: 120,
|
|
flex: 1,
|
|
}}
|
|
>
|
|
<p className="text-lg font-medium text-center">
|
|
{!isMember ? "开通VIP后即可筛选" : "确定"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Popup>
|
|
</div>
|
|
<List className="px-4">
|
|
{!streamers.length && !recommList.length && (
|
|
<div
|
|
className={`h-screen -mt-[57px] flex flex-col items-center justify-center`}
|
|
>
|
|
<Empty type="nodata" />
|
|
</div>
|
|
)}
|
|
<div>
|
|
{streamers?.filter((streamer) => streamer.zones.length > 0).length >
|
|
0 && (
|
|
<div>
|
|
<p className="mt-2 mb-1 text-white text-xl font-medium">空间</p>
|
|
{(() => {
|
|
let arr = streamers?.filter(
|
|
(streamer) => streamer.zones.length > 0
|
|
);
|
|
return arr?.map((item) => (
|
|
<ZoneItem
|
|
data={item}
|
|
key={item.id}
|
|
showMore={arr.length === 1}
|
|
link={`space/person_space_introduce/${item.mid}`}
|
|
search={searchValue}
|
|
/>
|
|
));
|
|
})()}
|
|
</div>
|
|
)}
|
|
{streamers.length > 0 && (
|
|
<div>
|
|
<p className="mt-2 mb-1 text-white text-xl font-medium">用户</p>
|
|
{streamers.map((item) => (
|
|
<ZoneItem
|
|
data={item}
|
|
key={item.id}
|
|
link={`/profile/${item.mid}`}
|
|
search={searchValue}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
{/* {recommList.length > 0 && <MyDivider style={tailwind("my-2")} />} */}
|
|
{recommList.length > 0 && (
|
|
<p className="mt-2 mb-1 text-white text-xl font-medium">猜你喜欢</p>
|
|
)}
|
|
{recommList
|
|
.filter((it) => it.zones.length > 0)
|
|
?.map((item, index) => (
|
|
<ZoneItem
|
|
data={item}
|
|
key={item.id}
|
|
link={`space/person_space_introduce/${item.mid}`}
|
|
onlyOne={false}
|
|
/>
|
|
))}
|
|
</div>
|
|
</List>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const ZoneItem = ({ data, showMore, link, search }) => {
|
|
const router = useRouter();
|
|
return (
|
|
<List.Item
|
|
className="!p-0"
|
|
onClick={() => {
|
|
router.push(link);
|
|
}}
|
|
key={data?.id}
|
|
arrow={false}
|
|
>
|
|
{
|
|
<div>
|
|
<div
|
|
className="grid grid-cols-[2.5rem_100%] gap-2 items-center"
|
|
style={{ maxWidth: "calc(100vw - 2rem)" }}
|
|
>
|
|
<Image
|
|
className="flex-none w-10 h-10 rounded-full mr-2"
|
|
src={data?.avatar?.images[0]?.urls[0]}
|
|
width="2.5rem"
|
|
height="2.5rem"
|
|
alt=""
|
|
fit="cover"
|
|
/>
|
|
<div className="flex-1">
|
|
<div className="flex items-center">
|
|
<span className="text-md mr-2 text-base text-white font-medium">
|
|
{data?.name}
|
|
</span>
|
|
<span className="py-0.5 px-2 ml-1 bg-[#FFFFFF1A] rounded-full text-white text-xs font-medium">
|
|
ID {data?.user_id}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-[#FFFFFF80] pr-16 overflow-hidden whitespace-nowrap text-ellipsis">
|
|
{data?.bio}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{showMore && (
|
|
<div className="bg-[#FFFFFF1A] rounded-xl mt-2 p-2">
|
|
<p className="text-[#FFFFFF80] text-sm py-4">
|
|
Ta的动态·
|
|
{data?.zones[0].zone_moment_count > 99
|
|
? "99+"
|
|
: data?.zones[0].zone_moment_count}
|
|
{data?.zones[0].image_count > 0 &&
|
|
` | 图片·${
|
|
data?.zones[0].image_count > 99
|
|
? "99+"
|
|
: data?.zones[0].image_count
|
|
}`}
|
|
{data?.zones[0].video_count > 0 &&
|
|
` | 视频·${
|
|
data?.zones[0].video_count > 99
|
|
? "99+"
|
|
: data?.zones[0].video_count
|
|
}`}
|
|
</p>
|
|
<div className="grid grid-cols-[auto_120px] gap-2 grid-rows-1 w-full">
|
|
<div
|
|
className="relative w-mfull h-full"
|
|
// onClick={() => {
|
|
// if (item.type == "video") {
|
|
// handleShowVideo(item);
|
|
// } else {
|
|
// showPhotos(photos, index);
|
|
// }
|
|
// }}
|
|
>
|
|
<Image
|
|
// lazy={true}
|
|
placeholder={
|
|
<div className="w-full h-full bg-[#1d1d1d] rounded"></div>
|
|
}
|
|
width="100%"
|
|
height="100%"
|
|
className={`rounded-xl max-w-full`}
|
|
fit="cover"
|
|
src={data?.shorts?.videos[0]?.cover_urls[0]}
|
|
/>
|
|
{
|
|
<div className="absolute top-0 w-full h-full rounded-xl flex justify-center items-center bg-[#33333348]">
|
|
<Image
|
|
className=""
|
|
width={98}
|
|
height={98}
|
|
src={
|
|
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
|
|
"/icons/play.png"
|
|
}
|
|
placeholder=""
|
|
/>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div className="h-full grid grid-rows-3 gap-2">
|
|
<Image
|
|
// lazy={true}
|
|
placeholder={
|
|
<div className="w-full h-full bg-[#1d1d1d] rounded"></div>
|
|
}
|
|
width={120}
|
|
height={120}
|
|
className={`rounded-xl max-w-full`}
|
|
fit="cover"
|
|
src={data?.cover?.images[0]?.urls[0]}
|
|
/>
|
|
{data.album.images.map((_item, index) => {
|
|
if (index > 1) return;
|
|
return (
|
|
<Image
|
|
key={index}
|
|
// lazy={true}
|
|
placeholder={
|
|
<div className="w-full h-full bg-[#1d1d1d] rounded"></div>
|
|
}
|
|
width={120}
|
|
height={120}
|
|
className={`rounded-xl max-w-full`}
|
|
fit="cover"
|
|
src={_item?.urls[0]}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
}
|
|
</List.Item>
|
|
);
|
|
};
|