xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🦄 refactor:搜索80%

Browse Source
This commit is contained in:
Haiyi
2022-09-02 11:09:42 +08:00
parent 34dd4722c9
commit 83d6b1c9d5
11 changed files with 380 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/searchPage/compoents/empty/index.module.scss
+22
View File
@@ -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;
}
}
src/pages/searchPage/compoents/empty/index.tsx
+22
View File
@@ -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 (
<View className={styles.mainBox}>
<Image className={styles.pic} mode='aspectFill' lazyLoad src={picUrl}></Image>
<View className={styles.fonst}>{fonst}</View>
</View>
)
})
src/pages/searchPage/compoents/goods/index.module.scss
+119
View File
@@ -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;
}
}
}
}
src/pages/searchPage/compoents/goods/index.tsx
+36
View File
@@ -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 (
<View className={styles.itemBox}>
{
!props.lab && <>
<View className={styles.picBox}>
<Image className={styles.pic} mode={'aspectFill'} src={'https://test.cdn.zzfzyc.com/mall/no_img.png'}></Image>
<View className={styles.posBox}>{props.data?.product_color_count}色</View>
</View>
</>
}
{
props.lab &&
<>
<View className={styles.leftBox}>
<View className={styles.posBox}>{props.data?.product_color_count}色</View>
</View>
</>
}
<View className={styles.rightBox}>
<View className={styles.productName}>{props.data?.code}#{props.data?.name}</View>
<View className={styles.tips}>{props.data?.component}</View>
<View className={styles.flexTag}>
<View className={styles.tagOne}>{props.data?.width}</View>
<View className={styles.tagTwo}>{props.data?.weight_density}</View>
</View>
</View>
</View>
)
})
src/pages/searchPage/index.config.ts
+3
View File
@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '搜索',
}
src/pages/searchPage/index.module.scss
+66
View File
@@ -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;
}
}
}
src/pages/searchPage/index.tsx
+93
View File
@@ -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<any[]>(['a','b'])
//搜索商品的数组
const [searchList, setSearchList] = useState<any[]>(['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 (
<View className={styles.main}>
<Search placeholder='请输入搜索布料' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
<View className={styles.cancelFont} onClick={() => back()}>取消</View>
</Search>
<View className={styles.line}></View>
{
!hasFonts && <>
<View className={styles.topBox}>
<View className={styles.histroyFonts}>历史搜索</View>
<View className={classnames('iconfont', 'icon-shaixuan', styles.icon_delect)}></View>
</View>
{!!histroyList.length &&
<View className={styles.bigBox}>
{histroyList.map((item, index) => {
return (
<View key={index} className={styles.itemBox}>{item}</View>
)
})}
</View>
}
{
!histroyList.length && <Empty fonst={'无搜索历史'}></Empty>
}
</>
}
{
hasFonts && <>
<View className={styles.topBox}>
<View className={styles.histroyFonts}>搜索结果</View>
</View>
{
!!searchList.length && searchList.map((item, index) => {
return (
<Goods key={index} data={item}></Goods>
)
})
}
{
!searchList.length && <Empty fonst={'暂无数据'}></Empty>
}
</>
}
</View>
)
})