Skip to content

W
web-ci-test
提交 7c35c58e 作者: 翁进城
操作

mall改用条件过滤组件

上级 32fd672d
正在显示 包含 50 行增加 和 173 行删除
pages/mall/index.tsx
......@@ -4,193 +4,70 @@ import Layout from "~/components/layout";
import styles from "./index.module.scss";
import { useRouter } from "next/router";
import Image from 'next/image';
import Filter, { FilterResult } from "~/components/filter";
import { FilterOptionResp, mallApi } from "~/components/filter/api";
export default function Mall() {
const router = useRouter();
const [productList, setProductList] = useState(Array<{}>);
useEffect(() => {
setProductList([{}, {}, {}, {}, {}, {}]);
}, []);
const onProvinceChange = (value: string) => {
console.log("省", value);
};
// 此函数在构建时被调用
export async function getStaticProps() {
const brand = Filter.mallApi.brand();
const category = Filter.mallApi.category();
const model = Filter.mallApi.model();
const part = Filter.mallApi.part();
const quality = Filter.mallApi.quality();
const onCityChange = (value: string) => {
console.log("市", value);
};
const res = await Promise.all([brand, category, part, model, quality]);
const onMoreChange = (value: string) => {
console.log("更多", value);
// 通过返回 { props: { posts } } 对象，Blog 组件
// 在构建时将接收到 `posts` 参数
return {
props: {
brandData: res[0].result || [],
categoryData: res[1].result || [],
partData: res[2].result || [],
modelData: res[3].result || [],
qualityData: res[4].result || [],
},
};
}
const onCloseTag = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
console.log("删除", e);
};
type Props = {
brandData: Array<FilterOptionResp>;
categoryData: Array<FilterOptionResp>;
partData: Array<FilterOptionResp>;
modelData: Array<FilterOptionResp>;
qualityData: Array<FilterOptionResp>;
};
export default function Mall(props: Props) {
const router = useRouter();
const [productList, setProductList] = useState(Array<{}>);
const onFilterChange = (filterResult: FilterResult) => {
console.log('filterResult', filterResult)
}
return (
<Layout>
<div className="page" style={{ paddingTop: "29px" }}>
<div className="filter-wrap" style={{ marginBottom: "11px" }}>
<div className="filter-item">
<div className="filter-item__title">地域：</div>
<div className="filter-item-main">
<Space size={40}>
<Select
bordered={false}
dropdownMatchSelectWidth={false}
placeholder="选择省"
onChange={onProvinceChange}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
/>
<Select
bordered={false}
dropdownMatchSelectWidth={false}
placeholder="选择市"
onChange={onCityChange}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
/>
</Space>
</div>
</div>
</div>
<div className="filter-wrap">
<div className="filter-item">
<div className="filter-item__title">类目：</div>
<div className="filter-item-main">
<Space size={40}>
<Button type="link">不限</Button>
<Button type="link">无人机</Button>
<Button type="link">挂载</Button>
<Button type="link">地面站</Button>
</Space>
<Select
placeholder="更多"
onChange={onMoreChange}
bordered={false}
dropdownMatchSelectWidth={false}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
/>
</div>
</div>
<div className="filter-item">
<div className="filter-item__title">品牌：</div>
<div className="filter-item-main">
<Space size={40}>
<Button type="link">不限</Button>
<Button type="link">无人机</Button>
<Button type="link">挂载</Button>
<Button type="link">地面站</Button>
</Space>
<Select
placeholder="更多"
onChange={onMoreChange}
bordered={false}
dropdownMatchSelectWidth={false}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
/>
</div>
</div>
<div className="filter-item">
<div className="filter-item__title">部件：</div>
<div className="filter-item-main">
<Space size={40}>
<Button type="link">不限</Button>
<Button type="link">无人机</Button>
<Button type="link">挂载</Button>
<Button type="link">地面站</Button>
</Space>
<Select
placeholder="更多"
onChange={onMoreChange}
bordered={false}
dropdownMatchSelectWidth={false}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
/>
</div>
</div>
<div className="filter-item">
<div className="filter-item__title">型号：</div>
<div className="filter-item-main">
<Space size={40}>
<Button type="link">不限</Button>
<Button type="link">无人机</Button>
<Button type="link">挂载</Button>
<Button type="link">地面站</Button>
</Space>
<Select
placeholder="更多"
onChange={onMoreChange}
bordered={false}
dropdownMatchSelectWidth={false}
options={[
{ value: "jack", label: "Jack" },
{ value: "lucy", label: "Lucy" },
{ value: "Yiminghe", label: "yiminghe" },
{ value: "disabled", label: "Disabled", disabled: true },
]}
/>
</div>
</div>
<div className="filter-item">
<div className="filter-item__title">成色：</div>
<div className="filter-item-main">
<Space size={40}>
<Button type="link">不限</Button>
<Button type="link">无人机</Button>
<Button type="link">挂载</Button>
<Button type="link">地面站</Button>
</Space>
</div>
</div>
<div className="filter-item">
<div className="filter-item__title">已选：</div>
<div className="filter-item-main">
<Space size={10}>
<Tag closable onClose={onCloseTag}>
无人机
</Tag>
<Tag closable onClose={onCloseTag}>
无人机
</Tag>
</Space>
</div>
</div>
</div>
<div className="page" style={{ paddingTop: "18px" }}>
<Filter
types={["类目", "地域", "品牌", "部件", "型号", "成色"]}
showResultItem
brandData={props.brandData}
categoryData={props.categoryData}
partData={props.partData}
modelData={props.modelData}
qualityData={props.qualityData}
onChange={onFilterChange}
></Filter>
<div className={styles.productList}>
<div className={styles.title}>四旋翼无人机</div>
<div className={styles.main}>
<ul className={styles.listWrap}>
{productList.map((item) => {
return (
<li className={styles.item} onClick={() => router.push('/mall/detail/1')}>
<Image className={styles.img}></Image>
<li
className={styles.item}
onClick={() => router.push("/mall/detail/1")}
>
<Image alt="" src="" className={styles.img}></Image>
<div className={styles.title}>
入云龙ll 1550入云龙ll 1550入云龙ll 1550入云龙ll 1550
</div>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论