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

对接确认订单

Browse Source
This commit is contained in:
cheng
2022-05-16 19:14:09 +08:00
parent 91934d0905
commit 754b3330a9
17 changed files with 761 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index/index.tsx
+5 -6
View File
@@ -17,7 +17,6 @@ import useLogin from '@/use/useLogin'
export default () => {
const {checkLogin} = useLogin()
useDidShow(async () => {
await checkLogin()
})
@@ -42,7 +41,7 @@ export default () => {
const [productData, setProductData] = useState({list:[], total:0})
const [hasMore, setHasMore] = useState(true)
const [filtrate, setFiltrate] = useState({product_kind_id:0, size: 5,page: 1})
const pageNum = useRef(1)
const pageNum = useRef({size:filtrate.size, page:filtrate.page})
const {fetchData: productFetchData, state: productState} = GetProductListApi()
//获取数据方法
const getProductList = async () => {
@@ -58,7 +57,7 @@ export default () => {
//点击面料类型
const getProductKindId = async (e) => {
pageNum.current = 1
pageNum.current.page = 1
setFiltrate({...filtrate, size:5, product_kind_id:e.id})
setHasMore(true)
}
@@ -68,8 +67,8 @@ export default () => {
if(productData.list.length >= productData.total) {
setHasMore(false)
} else {
pageNum.current++
const newSize = filtrate.size * pageNum.current
pageNum.current.page++
const newSize = pageNum.current.size * pageNum.current.page
setFiltrate({...filtrate, size:newSize})
}
}
@@ -80,7 +79,7 @@ export default () => {
//列表下拉刷新
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
const getRefresherRefresh = async () => {
pageNum.current = 1
pageNum.current.size = 1
setFiltrate({...filtrate, size:5})
setHasMore(true)
setRefresherTriggeredStatus(true)
src/pages/searchList/hightSearchList.module.scss
+2
View File
@@ -190,6 +190,7 @@
.title{
font-size: $font_size;
color: $color_font_three;
@include common_ellipsis()
}
.tag_list{
display: flex;
@@ -209,6 +210,7 @@
font-size: $font_size_medium;
color: $color_font_two;
margin-top: 16px;
@include common_ellipsis()
}
}
}
src/pages/searchList/hightSearchList.tsx
+81 -19
View File
@@ -10,11 +10,22 @@ import {useBluetooth} from "@/use/contextBlueTooth"
import {toRgb} from '@/common/bluetooth/color/colorSpace'
import Tabs from "@/components/tabs";
import styles from './hightSearchList.module.scss'
import { useCallback, useEffect, useState } from "react";
import Taro, { useReady } from "@tarojs/taro";
import { useCallback, useEffect, useRef, useState } from "react";
import Taro, { useDidShow, usePullDownRefresh, useReady } from "@tarojs/taro";
import useManualPullDownRefresh from "@/use/useManualPullDownRefresh";
import {GetLabProductApi} from "@/api/material"
import { getFilterData } from "@/common/util";
import { formatHashTag, formatImgUrl } from "@/common/fotmat";
import LoadingCard from "@/components/loadingCard";
import useLogin from "@/use/useLogin";
import { goLink } from "@/common/common";
export default () => {
const {checkLogin} = useLogin()
useDidShow(async () => {
await checkLogin()
})
const [showFilter, setShowFilter] = useState(false)
const [selectList, setSelectList] = useState([
{title: '系列', value:1},
@@ -27,6 +38,47 @@ export default () => {
{title: '系列', value:5},
{title: '系列', value:5},
])
//搜索参数
const [searchField, setSearchField] = useState({
l: '',
a: '',
b: '',
page : 1,
size : 10
})
//获取面料列表
const [materialList, setMaterialList] = useState<{list:any[], total:number}>({list:[], total:0})
const {fetchData: materialFetchData, state: materialState} = GetLabProductApi()
const getProductList = async () => {
let {data} = await materialFetchData(getFilterData(searchField))
setMaterialList({list:data.list, total:data.total})
Taro.stopPullDownRefresh()
}
//监听筛选条件变化
useEffect(() => {
getProductList()
}, [searchField])
//上拉加载数据
const pageNum = useRef({size: searchField.size, page: searchField.page})
const [hasMore, setHasMore] = useState(true)
const getScrolltolower = () => {
if(materialList.list.length < materialList.total) {
pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page
setSearchField({...searchField, size })
}
}
//监听获得的数据变化
useEffect(() => {
(materialList.list.length < materialList.total)?setHasMore(true):setHasMore(false)
}, [materialList])
const [scrollStatus, setScrollStatus] = useState(false)
const onscroll = useCallback((e) => {
if(e.detail.scrollTop > 20) {
@@ -36,9 +88,9 @@ export default () => {
}
},[])
const {state, measureAndGetLab} = useBluetooth()
const {state: colorState, measureAndGetLab} = useBluetooth()
const getLab = () => {
if(state.connected) {
if(colorState.connected) {
measureAndGetLab()
} else {
Taro.showToast({
@@ -50,15 +102,22 @@ export default () => {
const [blueToothColor, setBlueToothColor] = useState('')
useEffect(() => {
if(state.deviceLab) {
console.log('颜色：',state.deviceLab)
const rgb = toRgb([state.deviceLab.L, state.deviceLab.a, state.deviceLab.b])
if(colorState.deviceLab) {
console.log('颜色：',colorState.deviceLab)
const rgb = toRgb([colorState.deviceLab.L, colorState.deviceLab.a, colorState.deviceLab.b])
setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
setSearchField({...searchField, l:rgb[0], a:rgb[1], b:rgb[2], size:10})
}
}, [state.deviceLab])
}, [colorState.deviceLab])
const goLinkPage = (item) => {
goLink('/pages/details/index',{id:item.id})
}
//页面下拉刷新
const res = useManualPullDownRefresh()
usePullDownRefresh(() => {
setSearchField({...searchField ,size : 10})
})
return (
<View className={styles.main}>
<View className={styles.search}>
@@ -103,27 +162,30 @@ export default () => {
</View>
</View>
<View className={styles.list}>
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 (2条记录)</View>
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View>
<View className={styles.scroll}>
<InfiniteScroll
selfonScrollToLower={() => console.log('123123')}
{(materialList.list.length == 0&&materialState.loading)&&<LoadingCard/>}
{(materialList.list.length == 0 && !materialState.loading)&&<LoadingCard title="暂无数据" loadingIcon={false}/>}
{(materialList.list.length > 0)&&<InfiniteScroll
selfonScrollToLower={() => getScrolltolower()}
selfOnScroll={(e) => onscroll(e)}
hasMore={hasMore}
>
<View className={styles.product_list}>
{new Array(9).fill(' ').map(item => {
return <View className={styles.product_item}>
{materialList.list.map(item => {
return <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
<View className={styles.product_img}>
<Image mode="aspectFill" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d"></Image>
<View className={styles.color_num}>25色</View>
<Image mode="aspectFill" src={formatImgUrl(item.texture_url)}></Image>
<View className={styles.color_num}>{(item.product_color_code)}#</View>
</View>
<View className={styles.product_info}>
<View className={styles.title}>0770#21S精棉平纹</View>
<View className={styles.introduce}>平纹系列</View>
<View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
<View className={styles.introduce}>{item.product_kind_name}</View>
</View>
</View>
})}
</View>
</InfiniteScroll>
</InfiniteScroll>}
</View>
</View>
<Filter show={showFilter} onClose={() => setShowFilter(false)}/>
src/pages/searchList/search.tsx
+64 -14
View File
@@ -1,15 +1,73 @@
import { View } from '@tarojs/components'
import Search from '@/components/search'
import { goLink } from '@/common/common';
import { alert, goLink } from '@/common/common';
import classnames from "classnames";
import styles from './search.module.scss'
import { useEffect, useRef, useState } from 'react';
import {GetHotSearchApi, GetSearchHistoryApi, AddSearchHistoryApi} from "@/api/search"
import { SCENE } from '@/common/constant';
import useLogin from '@/use/useLogin';
import Taro, { useDidShow } from '@tarojs/taro';
type searchDataParam = {'search_key':''}
export default () => {
const {checkLogin} = useLogin()
useDidShow(async () => {
await checkLogin()
})
const [searchData, setSearchData] = useState<{hotField: searchDataParam[], historyField: searchDataParam[]}>({
hotField: [],
historyField: []
})
//获取热门搜索数据
const {fetchData:hotFetchData} = GetHotSearchApi()
const getHotSearch = async () => {
let {data} = await hotFetchData()
setSearchData((val) => ({...val, hotField: data.list}))
}
//获取历史搜索数据
const {fetchData:HistoryFetchData} = GetSearchHistoryApi()
const getSearchHistory = async () => {
let {data} = await HistoryFetchData()
setSearchData((val) => ({...val, historyField: data.list}))
}
useEffect(() => {
getHotSearch(),
getSearchHistory()
}, [])
//添加搜索关键字
const addSearchField = useRef({key: '', screen: SCENE.SearchScene})
const {fetchData:addFetchData} = AddSearchHistoryApi()
const addSearchHistory = async () => {
await addFetchData(addSearchField.current)
// goLink('/pages/searchList/searchList', {key: addSearchField.current.key})
}
//搜索事件, status = true 添加搜索， status = false 直接跳转
const searchEvent = (e, status = true) => {
if(e == "") {
alert.error('请输入关键词')
return false
}
addSearchField.current.key = e
status&&addSearchHistory()
Taro.navigateTo({
url: `/pages/searchList/searchList?key=${addSearchField.current.key}`
})
}
return (
<View className={styles.main}>
<View className={styles.search}>
<Search style={{width: '100%'}} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} clickOnSearch={() => {}}/>
<Search style={{width: '100%'}} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} clickOnSearch={(e) => searchEvent(e)}/>
</View>
<View className={styles.hot}>
<View className={styles.hot_header}>
@@ -17,12 +75,9 @@ export default () => {
<View className={styles.hot_header_up} onClick={() => goLink('/pages/searchList/searchList')}>高级搜索</View>
</View>
<View className={styles.list}>
<View className={styles.item}>9265</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>26s</View>
{searchData?.hotField?.map((item, index) => {
return <View key={index} className={styles.item} onClick={() => searchEvent(item.search_key, false)}>{item.search_key}</View>
})}
</View>
</View>
<View className={styles.history}>
@@ -31,12 +86,7 @@ export default () => {
<View className={classnames('iconfont icon-lajixiang', styles.miconfont)}></View>
</View>
<View className={styles.list}>
<View className={styles.item}>9265</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>26s</View>
{searchData?.historyField?.map((item, index) => <View key={index} className={styles.item} onClick={() => searchEvent(item.search_key, false)}>{item.search_key}</View>)}
</View>
</View>
</View>
src/pages/searchList/searchList.module.scss
+3
View File
@@ -174,6 +174,7 @@
.title{
font-size: $font_size;
color: $color_font_three;
@include common_ellipsis();
}
.tag_list{
display: flex;
@@ -184,6 +185,7 @@
font-size: $font_size_min;
border-radius: 5px;
color: $color_main;
@include common_ellipsis();
&:nth-child(2) {
margin-left: 10px;
}
@@ -193,6 +195,7 @@
font-size: $font_size_medium;
color: $color_font_two;
margin-top: 16px;
@include common_ellipsis();
}
}
}
src/pages/searchList/searchList.tsx
+102 -29
View File
@@ -7,22 +7,83 @@ import SortBtn from "@/components/sortBtn";
import SelectData from "./components/selectData";
import { goLink } from "@/common/common";
import styles from './searchList.module.scss'
import { useCallback, useState } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import useManualPullDownRefresh from "@/use/useManualPullDownRefresh";
import {GetProductListApi} from "@/api/material"
import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
import { formatHashTag, formatImgUrl } from "@/common/fotmat";
import { getFilterData } from "@/common/util";
import LoadingCard from "@/components/loadingCard";
import useLogin from "@/use/useLogin";
export default () => {
const {checkLogin} = useLogin()
useDidShow(async () => {
await checkLogin()
})
const [showFilter, setShowFilter] = useState(false)
const [selectList, setSelectList] = useState([
{title: '系列', value:1},
{title: '系列', value:2},
{title: '系列', value:3},
{title: '系列', value:4},
{title: '系列', value:6},
{title: '系列', value:7},
{title: '系列', value:8},
{title: '系列', value:9},
{title: '系列', value:10},
])
const router = useRouter()
const [selectList, setSelectList] = useState<any>([])
//搜索参数
const [searchField, setSearchField] = useState({
code_or_name: router.params.key,
page : 1,
size : 10,
width: '',
weight_density: '',
product_kind_id: '',
component: ''
})
//获取面料列表
const [materialList, setMaterialList] = useState<{list:any[], total:number}>({list:[], total:0})
const {fetchData: materialFetchData, state: materialState} = GetProductListApi()
const getProductList = async () => {
let {data} = await materialFetchData(getFilterData(searchField))
setMaterialList({list:data.list, total:data.total})
Taro.stopPullDownRefresh()
}
//监听筛选条件变化
useEffect(() => {
getProductList()
}, [searchField])
//上拉加载数据
const pageNum = useRef({size: searchField.size, page: searchField.page})
const [hasMore, setHasMore] = useState(true)
const getScrolltolower = () => {
if(materialList.list.length < materialList.total) {
pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page
setSearchField({...searchField, size })
}
}
//监听获得的数据变化
useEffect(() => {
(materialList.list.length < materialList.total)?setHasMore(true):setHasMore(false)
}, [materialList])
//输入了搜索关键字
const getSearchData = (e) => {
setMaterialList(() => ({list:[], total:0}))
setSearchField({...searchField, code_or_name:e, size:10})
}
const goLinkPage = (item) => {
goLink('/pages/details/index',{id:item.id})
}
//页面下拉刷新
usePullDownRefresh(() => {
setSearchField({...searchField ,size : 10})
})
//监听滚动
const [scrollStatus, setScrollStatus] = useState(false)
const onscroll = useCallback((e) => {
if(e.detail.scrollTop > 20) {
@@ -32,12 +93,21 @@ export default () => {
}
},[])
//页面下拉刷新
const res = useManualPullDownRefresh()
//获取筛选条件
const getFiltr = (e) => {
setSearchField({
...searchField,
width: e?.width,
weight_density: e?.weight,
size: 10,
component: e.element
})
}
return (
<View className={styles.main}>
<View className={styles.search}>
<Search placeIcon="out" btnStyle={{color: '#007AFF'}}/>
<Search placeIcon="out" placeholder="请输入面料关键词" btnStyle={{color: '#007AFF'}} defaultValue={router.params.key} changeOnSearch={(e) => getSearchData(e)} debounceTime={300}/>
</View>
<View className={styles.filter}>
<View className={styles.filter_all}>
@@ -45,7 +115,7 @@ export default () => {
<Text>综合</Text>
<SortBtn status="top"/>
</View>
<View className={styles.text_sc} >
<View className={styles.text_sc}>
<Text>收藏</Text>
<SortBtn status="top"/>
</View>
@@ -66,34 +136,37 @@ export default () => {
</View>
</View>
<View className={styles.list}>
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 (2条记录)</View>
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View>
<View className={styles.scroll}>
<InfiniteScroll
selfonScrollToLower={() => console.log('123123')}
{(materialList.list.length == 0&&materialState.loading)&&<LoadingCard/>}
{(materialList.list.length == 0 && !materialState.loading)&&<LoadingCard title="暂无数据" loadingIcon={false}/>}
{(materialList.list.length > 0)&&<InfiniteScroll
selfonScrollToLower={() => getScrolltolower()}
hasMore={hasMore}
selfOnScroll={(e) => onscroll(e)}
>
<View className={styles.product_list}>
{new Array(9).fill(' ').map(item => {
return <View className={styles.product_item}>
{materialList.list.map(item => {
return <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
<View className={styles.product_img}>
<Image mode="aspectFill" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d"></Image>
<View className={styles.color_num}>25色</View>
<Image mode="aspectFill" src={formatImgUrl(item.texture_url)}></Image>
<View className={styles.color_num}>{(item.product_color_count)}色</View>
</View>
<View className={styles.product_info}>
<View className={styles.title}>0770#21S精棉平纹</View>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.tag_list}>
<View className={styles.tag}>160cm</View>
<View className={styles.tag}>110g</View>
<View className={styles.tag}>{item.width}</View>
<View className={styles.tag}>{item.weight_density}</View>
</View>
<View className={styles.introduce}>67.6%棉24%涤纶6.4%氨纶</View>
<View className={styles.introduce}>{item.component}</View>
</View>
</View>
})}
</View>
</InfiniteScroll>
</InfiniteScroll>}
</View>
</View>
<Filter show={showFilter} onClose={() => setShowFilter(false)}/>
<Filter show={showFilter} onClose={() => setShowFilter(false)} onFiltr={(e) => getFiltr(e)} />
</View>
)
}