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"; ...@@ -4,193 +4,70 @@ import Layout from "~/components/layout";
import styles from "./index.module.scss"; import styles from "./index.module.scss";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Image from 'next/image'; 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(); export async function getStaticProps() {
const [productList, setProductList] = useState(Array<{}>); const brand = Filter.mallApi.brand();
const category = Filter.mallApi.category();
useEffect(() => { const model = Filter.mallApi.model();
setProductList([{}, {}, {}, {}, {}, {}]); const part = Filter.mallApi.part();
}, []); const quality = Filter.mallApi.quality();
const onProvinceChange = (value: string) => {
console.log("省", value);
};
const onCityChange = (value: string) => { const res = await Promise.all([brand, category, part, model, quality]);
console.log("市", value);
};
const onMoreChange = (value: string) => { // 通过返回 { props: { posts } } 对象，Blog 组件
console.log("更多", value); // 在构建时将接收到 `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>) => { type Props = {
console.log("删除", e); 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 ( return (
<Layout> <Layout>
<div className="page" style={{ paddingTop: "29px" }}> <div className="page" style={{ paddingTop: "18px" }}>
<div className="filter-wrap" style={{ marginBottom: "11px" }}> <Filter
<div className="filter-item"> types={["类目", "地域", "品牌", "部件", "型号", "成色"]}
<div className="filter-item__title">地域：</div> showResultItem
<div className="filter-item-main"> brandData={props.brandData}
<Space size={40}> categoryData={props.categoryData}
<Select partData={props.partData}
bordered={false} modelData={props.modelData}
dropdownMatchSelectWidth={false} qualityData={props.qualityData}
placeholder="选择省" onChange={onFilterChange}
onChange={onProvinceChange} ></Filter>
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={styles.productList}> <div className={styles.productList}>
<div className={styles.title}>四旋翼无人机</div> <div className={styles.title}>四旋翼无人机</div>
<div className={styles.main}> <div className={styles.main}>
<ul className={styles.listWrap}> <ul className={styles.listWrap}>
{productList.map((item) => { {productList.map((item) => {
return ( return (
<li className={styles.item} onClick={() => router.push('/mall/detail/1')}> <li
<Image className={styles.img}></Image> className={styles.item}
onClick={() => router.push("/mall/detail/1")}
>
<Image alt="" src="" className={styles.img}></Image>
<div className={styles.title}> <div className={styles.title}>
入云龙ll 1550入云龙ll 1550入云龙ll 1550入云龙ll 1550 入云龙ll 1550入云龙ll 1550入云龙ll 1550入云龙ll 1550
</div> </div>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论