From 83d6b1c9d529ec1abd2a8bded718c0c3cea687b2 Mon Sep 17 00:00:00 2001 From: Haiyi <1021441632@qq.com> Date: Fri, 2 Sep 2022 11:09:42 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=A6=84=20refactor:=E6=90=9C=E7=B4=A280%?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- project.private.config.json | 7 ++ src/api/search.ts | 8 ++ src/app.config.ts | 2 +- src/pages/index/index.tsx | 5 +- .../compoents/empty/index.module.scss | 22 ++++ .../searchPage/compoents/empty/index.tsx | 22 ++++ .../compoents/goods/index.module.scss | 119 ++++++++++++++++++ .../searchPage/compoents/goods/index.tsx | 36 ++++++ src/pages/searchPage/index.config.ts | 3 + src/pages/searchPage/index.module.scss | 66 ++++++++++ src/pages/searchPage/index.tsx | 93 ++++++++++++++ 11 files changed, 380 insertions(+), 3 deletions(-) create mode 100644 src/api/search.ts create mode 100644 src/pages/searchPage/compoents/empty/index.module.scss create mode 100644 src/pages/searchPage/compoents/empty/index.tsx create mode 100644 src/pages/searchPage/compoents/goods/index.module.scss create mode 100644 src/pages/searchPage/compoents/goods/index.tsx create mode 100644 src/pages/searchPage/index.config.ts create mode 100644 src/pages/searchPage/index.module.scss create mode 100644 src/pages/searchPage/index.tsx diff --git a/project.private.config.json b/project.private.config.json index 64df24a..dce67ec 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -21,6 +21,13 @@ "query": "", "launchMode": "default", "scene": null + }, + { + "name": "", + "pathName": "pages/searchPage/index", + "query": "", + "launchMode": "default", + "scene": null } ] } diff --git a/src/api/search.ts b/src/api/search.ts new file mode 100644 index 0000000..6f6b1c4 --- /dev/null +++ b/src/api/search.ts @@ -0,0 +1,8 @@ +import { useRequest } from "@/use/useHttp" +//搜索商品 +export const mpproductlist = () => { + return useRequest({ + url: `/v1/mp/product/list`, + method: "get", + }) +} \ No newline at end of file diff --git a/src/app.config.ts b/src/app.config.ts index 6d5cc26..8ef811e 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -1,5 +1,5 @@ export default defineAppConfig({ - pages: ['pages/user/index', 'pages/index/index', 'pages/order/index', 'pages/shopping/index'], + pages: ['pages/user/index', 'pages/index/index', 'pages/order/index', 'pages/shopping/index', 'pages/searchPage/index'], window: { backgroundTextStyle: 'light', navigationBarBackgroundColor: '#fff', diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 5f9ccf4..f14d122 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -10,6 +10,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { kindListApi, ProductListApi } from '@/api/index' // import useLogin from '@/use/useLogin' import { dataLoadingStatus } from '@/common/util' +import Taro from '@tarojs/taro' export default () => { useEffect(() => { @@ -85,8 +86,8 @@ export default () => { {/* goLink('/pages/collection/index')}> 我的收藏 */} - goLink('/pages/searchList/search')}> - + goLink('/pages/searchPage/index')}> + diff --git a/src/pages/searchPage/compoents/empty/index.module.scss b/src/pages/searchPage/compoents/empty/index.module.scss new file mode 100644 index 0000000..d7898be --- /dev/null +++ b/src/pages/searchPage/compoents/empty/index.module.scss @@ -0,0 +1,22 @@ +.mainBox { + height: calc(100vh - 200px); + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + .pic { + width: 322px; + height: 322px; + background: #D8D8D8; + opacity: 0.3; + margin-bottom: 24px; + } + + .fonst { + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #000000; + } +} \ No newline at end of file diff --git a/src/pages/searchPage/compoents/empty/index.tsx b/src/pages/searchPage/compoents/empty/index.tsx new file mode 100644 index 0000000..f5da248 --- /dev/null +++ b/src/pages/searchPage/compoents/empty/index.tsx @@ -0,0 +1,22 @@ +import { View, Image } from '@tarojs/components' +import React, { useCallback, memo, useEffect, useMemo, useRef, useState } from 'react' +import styles from "../empty/index.module.scss" + +interface PropsObj { + picUrl?: string, + fonst?: string +} + +export default memo((pros: PropsObj) => { + const { + picUrl = '', + fonst = '无搜索历史' + } = pros + console.log(pros,8888) + return ( + + + {fonst} + + ) +}) \ No newline at end of file diff --git a/src/pages/searchPage/compoents/goods/index.module.scss b/src/pages/searchPage/compoents/goods/index.module.scss new file mode 100644 index 0000000..fa336da --- /dev/null +++ b/src/pages/searchPage/compoents/goods/index.module.scss @@ -0,0 +1,119 @@ +.itemBox { + width: 686px; + padding-bottom: 18px; + border-bottom: 1px solid #e7e7e7; + display: flex; + margin-left: 32px; + margin-bottom: 24px; + + .picBox { + margin-right: 24px; + width: 144px; + height: 144px; + border-radius: 8px; + position: relative; + + .pic { + width: 144px; + height: 144px; + border-radius: 8px; + } + + .posBox { + position: absolute; + bottom: 0px; + right: 0px; + width: 69px; + height: 29px; + background: #000000; + border-radius: 15px 0px 8px 0px; + font-size: 18px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #FFFFFF; + text-align: center; + line-height: 29px; + + opacity: 0.55; + } + } + + + .leftBox { + width: 144px; + height: 144px; + border-radius: 8px; + position: relative; + margin-right: 24px; + + .posBox { + position: absolute; + bottom: 0px; + right: 0px; + width: 69px; + height: 29px; + background: #000000; + border-radius: 15px 0px 8px 0px; + font-size: 18px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #FFFFFF; + text-align: center; + line-height: 29px; + + opacity: 0.55; + } + } + + .rightBox { + .productName { + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #000000; + margin-bottom: 6px; + } + + .tips { + font-size: 24px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #a6a6a6; + margin-bottom: 17px; + } + + .flexTag { + display: flex; + + .tagOne { + padding-left: 8px; + padding-right: 8px; + padding-top: 3px; + padding-bottom: 3px; + background: #e3ecff; + border-radius: 8px; + font-size: 22px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #4581FF; + text-align: center; + margin-right: 16px; + } + + .tagTwo { + padding-left: 8px; + padding-right: 8px; + padding-top: 3px; + padding-bottom: 3px; + background: #ffeedb; + border-radius: 8px; + font-size: 22px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #FE8E0F; + text-align: center; + } + } + } + +} \ No newline at end of file diff --git a/src/pages/searchPage/compoents/goods/index.tsx b/src/pages/searchPage/compoents/goods/index.tsx new file mode 100644 index 0000000..a0a328b --- /dev/null +++ b/src/pages/searchPage/compoents/goods/index.tsx @@ -0,0 +1,36 @@ +import { View, Image } from '@tarojs/components' +import React, { useCallback, memo, useEffect, useMemo, useRef, useState } from 'react' +import styles from "../goods/index.module.scss" + + +export default memo((props: any) => { + return ( + + { + !props.lab && <> + + + + {props.data?.product_color_count}色 + + + } + { + props.lab && + <> + + {props.data?.product_color_count}色 + + + } + + {props.data?.code}#{props.data?.name} + {props.data?.component} + + {props.data?.width} + {props.data?.weight_density} + + + + ) +}) \ No newline at end of file diff --git a/src/pages/searchPage/index.config.ts b/src/pages/searchPage/index.config.ts new file mode 100644 index 0000000..942d2c4 --- /dev/null +++ b/src/pages/searchPage/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: '搜索', +} diff --git a/src/pages/searchPage/index.module.scss b/src/pages/searchPage/index.module.scss new file mode 100644 index 0000000..e1d5389 --- /dev/null +++ b/src/pages/searchPage/index.module.scss @@ -0,0 +1,66 @@ +.main { + background: #ffff; + + .cancelFont { + width: 76px; + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #000000; + margin-left: 32px; + margin-right: 32px; + } + + .line { + width: 750px; + height: 1px; + background: #000000; + opacity: 0.05; + margin-top: 16px; + margin-bottom: 32px; + } + + .topBox { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 32px; + + .histroyFonts { + margin-left: 32px; + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #000000; + } + + .icon_delect { + margin-right: 45px; + color: #f7f7f7; + } + } + + + .bigBox { + display: flex; + flex-wrap: wrap; + padding-left: 32px; + + .itemBox { + background: #F7F7F7; + border-radius: 8px; + text-align: center; + padding-top: 12px; + padding-bottom: 12px; + padding-left: 17px; + padding-right: 17px; + font-size: 24px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #000000; + margin-right: 16px; + margin-bottom: 16px; + } + } + +} \ No newline at end of file diff --git a/src/pages/searchPage/index.tsx b/src/pages/searchPage/index.tsx new file mode 100644 index 0000000..c988ac4 --- /dev/null +++ b/src/pages/searchPage/index.tsx @@ -0,0 +1,93 @@ +import { View } from '@tarojs/components' +import React, { useCallback, memo, useEffect, useMemo, useRef, useState } from 'react' +import Search from '@/components/search' +import styles from "./index.module.scss" +import classnames from "classnames"; +import Empty from './compoents/empty' +import Taro from '@tarojs/taro'; +import Goods from './compoents/goods' +import { mpproductlist } from "@/api/search" + +export default memo(() => { + //获取数据 + const [histroyList, setHistroyList] = useState(['a','b']) + //搜索商品的数组 + const [searchList, setSearchList] = useState(['a']) + //是否有值输入框 + const [hasFonts, setHasFonts] = useState(false) + + //输入了搜索关键字 + const getSearchData = useCallback((e) => { + if (e) { + setHasFonts(true) + getProduct(e) + } else { + setHasFonts(false) + setSearchList([]) + } + // pageNum.current.page = 1 + // setOrderData(() => ({ list: [], total: 0 })) + // setSearchField((val) => ({ ...val, name: e, size: 10 })) + }, []) + //搜索获取商品数据 + const { fetchData: productFetch } = mpproductlist() + const getProduct = async (e) => { + const res = await productFetch({ code_or_name: e }) + setSearchList([...res.data.list]) + } + //返回 + const back = () => { + Taro.navigateBack({ + delta: 1 + }) + } + + return ( + + + back()}>取消 + + + { + !hasFonts && <> + + 历史搜索 + + + {!!histroyList.length && + + {histroyList.map((item, index) => { + return ( + {item} + ) + })} + + } + { + !histroyList.length && + } + + } + { + hasFonts && <> + + 搜索结果 + + { + !!searchList.length && searchList.map((item, index) => { + return ( + + ) + }) + } + { + !searchList.length && + } + + } + + + + + ) +}) \ No newline at end of file