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

订单列表页面完成

Browse Source
This commit is contained in:
cheng
2022-05-19 20:31:53 +08:00
parent 7e5481a7e1
commit f30e174e3e
35 changed files with 1008 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/subjectList/components/filter/index.module.scss
+126
View File
@@ -0,0 +1,126 @@
.popup_main{
width: 608px;
height: 100vh;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
.popup_title{
font-size: $font_size;
font-weight: 700;
text-align: center;
padding: 20px 0;
}
.scroll{
flex:1;
height: 0;
}
.popup_filter{
padding-bottom: 100px;
}
.popup_filter_item{
margin-bottom: 20px;
.title{
font-size: $font_size;
color: $color_font_one;
font-weight: 700;
padding: 20px 0;
}
.btn_list{
display: grid;
grid-template-columns: repeat(3, 165.75px);
justify-content: space-between;
.btn_item{
width: 165.75px;
height: 69.2px;
background: #f0f0f0;
border-radius: 34px;
text-align: center;
line-height: 69.2px;
font-size: $font_size_medium;
color: $color_font_one;
margin-bottom: 20px;
}
.select_btn_item{
color: $color_main;
background: #ecf5ff;
border: 2px solid #007aff;
width: 161.75px;
height: 65.2px;
}
}
.btn_list_input{
display: flex;
// justify-content: space-between;
align-items: center;
.btn_width {
width: 220px;
height: 70px;
background: #f0f0f0;
border-radius: 50px;
padding: 10px 20px;
box-sizing: border-box;
input{
width: 100%;
height: 100%;
font-size: $font_size_medium;
}
}
.unit{
color: $color_font_one;
font-size: $font_size;
margin-left: 20px;
}
text{
color: #ccc;
padding: 0 20px;
}
.width_main{
}
}
.btn_list_element{
background-color: #F0F0F0;
border-radius: 30px;
padding: 20px;
box-sizing: border-box;
textarea{
width: 100%;
height: 126px;
font-size: $font_size_medium;
}
}
}
.btns_con{
width: 100%;
position: fixed;
bottom:0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.btns_two{
display: flex;
width: 552px;
height: 82px;
border: 2px solid #cde5ff;
font-size: $font_size_big;
border-radius: 40px;
margin-bottom: 20px;
.rest_btn{
flex:1;
border-radius: 0px 40px 40px 0px;
text-align: center;
line-height: 82px;
color: $color_main;
}
.verify_btn{
flex:1;
border-radius: 0px 40px 40px 0px;
background: #007aff;
text-align: center;
line-height: 82px;
color: #fff;
}
}
}
}
src/pages/subjectList/components/filter/index.tsx
+115
View File
@@ -0,0 +1,115 @@
import Popup, {Params as PopuParams} from "@/components/popup"
import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
import classnames from "classnames";
import { useEffect, useState } from "react";
import styles from './index.module.scss'
type params = {
onFiltr?: (val:object) => void
} & PopuParams
export default ({onClose, onFiltr, show = false}:params) => {
const [filterObj, setFilterObj] = useState({
series: '',
minWidth: '',
maxWidth: '',
minWeight: '',
maxWeight: '',
element: ''
})
const onCloseEven = () => {
onClose?.()
}
const onRest = () => {
console.log('12123')
setFilterObj({
series: '',
minWidth: '',
maxWidth: '',
minWeight: '',
maxWeight: '',
element: ''
})
}
useEffect(() => {
console.log(filterObj)
}, [filterObj])
const onVerify = () => {
console.log(filterObj)
onFiltr?.(filterObj)
}
const setNumber = (e, field) => {
console.log(e)
let num = parseFloat(e.detail.value)
if(isNaN(num)) {
filterObj[field] = null
} else {
filterObj[field] = parseFloat(num.toFixed(2))
}
setFilterObj({...filterObj})
}
const setElement = (e) => {
let res = e.detail.value
setFilterObj({...filterObj, element:res})
}
return (
<Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
<View className={styles.popup_main}>
<View className={styles.popup_title}>全部筛选</View>
<ScrollView scrollY className={styles.scroll}>
<View className={styles.popup_filter}>
<View className={styles.popup_filter_item}>
<View className={styles.title}>系列</View>
<View className={styles.btn_list}>
<View className={classnames(styles.btn_item, styles.select_btn_item)}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>幅宽</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input value={filterObj.minWidth} type="digit" onBlur={(e) => setNumber(e,'minWidth')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input value={filterObj.maxWidth} type="digit" onBlur={(e) => setNumber(e,'maxWidth')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>cm</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>克重</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input type="digit" value={filterObj.minWeight} onBlur={(e) => setNumber(e,'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input type="digit" value={filterObj.maxWeight} onBlur={(e) => setNumber(e,'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>g</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>成分</View>
<View className={styles.btn_list_element}>
<Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setElement(e)}/>
</View>
</View>
<View className="common_safe_area_y"></View>
</View>
</ScrollView>
<View className={styles.btns_con}>
<View className={styles.btns_two}>
<View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
<View className={styles.verify_btn } onClick={() => onVerify()}>确认</View>
</View>
</View>
</View>
</Popup>
)
}
src/pages/subjectList/index.config.ts
+3
View File
@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '分类标题'
}
src/pages/subjectList/index.module.scss
+150
View File
@@ -0,0 +1,150 @@
.main{
display: flex;
flex-direction: column;
height: 100vh;
background-color: $color_bg_one;
.search{
padding: 20px;
}
.filter{
.filter_all {
display: flex;
justify-content: space-between;
padding: 20px 50px;
font-size: $font_size_medium;
color: $color_font_three;
.text_one{
color: $color_main;
display: flex;
align-items: center;
}
.text_two{
position: relative;
.miconfont{
font-size: 20px;
margin-left: 10px;
}
&::before{
content: '';
width: 2px;
height: 32px;
background-color: #C2C2C2;
position: absolute;
top: 0;
left: -50px;
}
}
}
.filter_btns{
display: flex;
justify-content: space-between;
padding: 20px;
.selected{
background-color: #ecf5ff;
border: 2px solid #cde5ff;
color: $color_main;
width: 122px;
height: 42.93px;
}
}
}
.list{
flex:1;
height: 0;
}
.popup_main{
width: 608px;
height: 100vh;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
.popup_title{
font-size: $font_size;
font-weight: 700;
text-align: center;
padding: 20px 0;
}
.scroll{
flex:1;
height: 0;
}
.popup_filter{
}
.popup_filter_item{
margin-bottom: 20px;
.title{
font-size: $font_size;
color: $color_font_one;
font-weight: 700;
padding: 20px 0;
}
.btn_list{
display: grid;
grid-template-columns: repeat(3, 165.75px);
justify-content: space-between;
.btn_item{
width: 165.75px;
height: 69.2px;
background: #f0f0f0;
border-radius: 34px;
text-align: center;
line-height: 69.2px;
font-size: $font_size_medium;
color: $color_font_one;
margin-bottom: 20px;
}
.select_btn_item{
color: $color_main;
background: #ecf5ff;
border: 2px solid #007aff;
width: 161.75px;
height: 65.2px;
}
}
.btn_list_input{
display: flex;
// justify-content: space-between;
align-items: center;
.btn_width {
width: 220px;
height: 70px;
background: #f0f0f0;
border-radius: 50px;
padding: 10px 20px;
box-sizing: border-box;
input{
width: 100%;
height: 100%;
font-size: $font_size_medium;
}
}
.unit{
color: $color_font_one;
font-size: $font_size;
margin-left: 20px;
}
text{
color: #ccc;
padding: 0 20px;
}
.width_main{
}
}
.btn_list_element{
background-color: #F0F0F0;
border-radius: 30px;
padding: 20px;
box-sizing: border-box;
textarea{
width: 100%;
height: 126px;
font-size: $font_size_medium;
}
}
}
}
}
src/pages/subjectList/index.tsx
+130
View File
@@ -0,0 +1,130 @@
import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
import classnames from "classnames";
import Search from '@/components/search'
import Product from '@/components/product'
import InfiniteScroll from '@/components/infiniteScroll'
import styles from './index.module.scss'
import { useCallback, useEffect, useRef, useState } from "react";
import Filter from "@/components/filter";
import SortBtn from "@/components/sortBtn";
import SelectData, {ListProps} from "../searchList/components/selectData";
import {GetProductListApi} from '@/api/material'
import { useRouter } from "@tarojs/taro";
import { getFilterData } from "@/common/util";
import LoadingCard from "@/components/loadingCard";
export default () => {
const [showPopup, setShowPopup] = useState(false)
const router = useRouter()
//搜索参数
const [searchField, setSearchField] = useState({
code_or_name: '',
product_subject_id: router.params.id,
page : 1,
size : 10,
width: '',
weight_density: '',
product_kind_id: '',
component: ''
})
//获取专题
const [subjectList, setSubjectList] = useState<{list:any[], total:number}>({
list:[],
total:0
})
const {fetchData, state} = GetProductListApi()
const getSubjectList = async () => {
let res = await fetchData(getFilterData(searchField))
setSubjectList({...subjectList, list:res.data.list, total: res.data.total})
}
//监听筛选数据变化
useEffect(() => {
getSubjectList()
}, [searchField])
//上拉加载数据
const pageNum = useRef({size: searchField.size, page: searchField.page})
const [hasMore, setHasMore] = useState(true)
const getScrolltolower = () => {
if(subjectList.list.length < subjectList.total) {
pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page
setSearchField({...searchField, size })
}
}
//监听获得的数据变化
useEffect(() => {
(subjectList.list.length < subjectList.total)?setHasMore(true):setHasMore(false)
}, [subjectList])
//获取筛选条件
const getFiltr = (e) => {
pageNum.current.page = 1
const {data} = e
setSearchField({
...searchField,
width: data?.width,
weight_density: data?.weight,
size: 10,
component: data?.element,
product_kind_id: data?.seriesId
})
formatSelectList(e)
}
//筛选条件格式化
const [selectList , setSelectList] = useState<ListProps[]>()
const formatSelectList = (val = {data:{}, field:{}}) => {
let data:ListProps[] = []
for(let key in val.data) {
if(key !== 'seriesId'&& val.data[key] != '') {
data.push({title:val.field[key], value:val.data[key]})
}
}
setSelectList([...data])
}
//输入了搜索关键字
const getSearchData = useCallback((e) => {
pageNum.current.page = 1
setSubjectList(() => ({list:[], total:0}))
setSearchField((val) => ({...val, code_or_name:e, size:10}))
}, [])
return (
<View className={styles.main}>
<View className={styles.search}>
<Search placeIcon="out" showBtn={true} btnStyle={{color: '#007AFF'}} changeOnSearch={getSearchData} debounceTime={300}/>
</View>
<View className={styles.filter}>
<View className={styles.filter_all}>
<View className={styles.text_one}>
<Text>综合</Text>
<SortBtn status="top"/>
</View>
<View className={styles.text_two} onClick={() => setShowPopup(true)}>
<Text>筛选</Text>
<Text className={classnames('iconfont icon-bianji_bianji', styles.miconfont)}></Text>
</View>
</View>
<View className={styles.filter_btns}>
<SelectData list={selectList}/>
</View>
</View>
<View className={styles.list}>
{(subjectList.list.length == 0&&state.loading)&&<LoadingCard/>}
{(subjectList.list.length == 0 && !state.loading)&&<LoadingCard title="暂无数据" loadingIcon={false}/>}
{(subjectList.list.length > 0)&&<InfiniteScroll selfonScrollToLower={() => getScrolltolower()} hasMore={hasMore}>
<Product desStatus={false} productList={subjectList.list}/>
</InfiniteScroll>}
</View>
<Filter show={showPopup} onClose={() => setShowPopup(false)} onFiltr={getFiltr}/>
</View>
)
}