订单列表页面完成

config/index.js

@@ -11,6 +11,7 @@ const config = {
   outputRoot: 'dist',
   plugins: [],
   defineConstants: {
+    CURRENT_ENV: JSON.stringify(process.env.NODE_ENV)
   },
   copy: {
     patterns: [

src/app.config.ts

@@ -104,6 +104,18 @@ export default {
       pages: [
         "index",
       ]
+    },
+    {
+      root: "pages/orderList",
+      pages: [
+        "index",
+      ]
+    },
+    {
+      root: "pages/subjectList",
+      pages: [
+        "index",
+      ]
     }
   ]
 }

src/common/constant.js

@@ -16,8 +16,8 @@ export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发
 export const GET_UPLOAD_SIGN = `/upyun/getsign` // 请求签名 url
 export const UPLOAD_CDN_URL = `https://v0.api.upyun.com/`
 
-// 前缀
+// cdn
-export const IMG_CND_Prefix = "http://test.cdn.zzfzyc.com"
+export const IMG_CND_Prefix = CURRENT_ENV.includes('development')? "https://test.cdn.zzfzyc.com":"https://cdn.zzfzyc.com"
 
 
 // 上传图片视频

src/common/enum.ts

@@ -0,0 +1,7 @@
+export const ORDER_STATUS = {
+    0:{value:0, label:'申请中'},
+    1:{value:1, label:'配布中'},
+    2:{value:2, label:'待发货'},
+    3:{value:3, label:'已发货'},
+    4:{value:4, label:'已完成'}  
+}

src/common/fotmat.js

@@ -141,6 +141,6 @@ export const toDecimal2 = (x) => {
  * @param {*} url 
  * @returns 
  */
-export const formatImgUrl = (url) => {
+export const formatImgUrl = (url, suffix="!w200") => {
-    return url?IMG_CND_Prefix + url:'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'
+    return url?IMG_CND_Prefix + url + suffix:'https://cdn.zzfzyc.com/mall/no_img.png'
 }

src/components/infiniteScroll/index.module.scss

@@ -1,7 +1,6 @@
 
 .scroll_main{
     height: 100%;
-    
     .infinite_scroll{
         font-size: $font_size_medium;
         color: $color_font_two;
@@ -13,4 +12,7 @@
             align-items: center;
         }
     }
+    .scrollViewCon {
+        // height: 100%;
+    }
 }

src/components/infiniteScroll/index.tsx

@@ -2,12 +2,14 @@ import { ScrollView, View } from "@tarojs/components"
 import { memo, ReactNode, useState } from "react"
 import style from "./index.module.scss"
 import DotLoading from "@/components/dotLoading"
+import LoadingCard from "../loadingCard"
 
 type Params = {
     styleObj?: Object,
     selfonScrollToLower?: () => void,
     hasMore?: false|true,
     moreStatus?: false|true,
+    statusMore?: 0|1|2, //0:没数据加载，1：下拉加载，2：没有数据
     children?: ReactNode,
     lowerThresholdNum?: number,
     selfOnScrollToUpper?:() => void
@@ -35,7 +37,8 @@ export default memo(({
     paddingBottom = 0,
     refresherTriggered = false,
     refresherEnabled = false,
-    moreStatus = true
+    moreStatus = true,
+    statusMore = 0
 }: Params) => {
     const scrollToLower = () => {
         selfonScrollToLower?.()
@@ -77,7 +80,7 @@ export default memo(({
                 onRefresherAbort = {() => refresherAbort()}
                 refresherBackground ='#F8F8F8'
             >
-                <View style={{paddingBottom:paddingBottom + 'rpx'}}>
+                {(statusMore != 0)&&<View style={{paddingBottom:paddingBottom + 'rpx'}} className={style.scrollViewCon}>
                     {children}
                     {moreStatus&&<View className={style.infinite_scroll}>
                         {
@@ -85,8 +88,9 @@ export default memo(({
                             <View>没有更多数据了</View>
                         }
                     </View>}
-                </View>
+                </View>||
-                
+                <LoadingCard/>
+                }
                 <View className="common_safe_area_y"></View>
             </ScrollView>
             

src/components/product/index.module.scss

@@ -25,21 +25,19 @@
             border-radius: 10px;
         }
         .num{
-            width: 100px;
+            padding: 5px 10px;
-            height: 36px;
             font-size: $font_size_min;
             position: absolute;
             right:0;
             bottom: 0;
-            background: rgba($color: #fff, $alpha: 0.3);
+            background: rgba($color: #000, $alpha: 0.3);
             border-radius: 36px 0px 10px 0px;
             color: #fff;
             text-align: center;
-            line-height: 36px;
         }
     }
     .item_con{
-        padding-left: 15px;
+        padding-left: 20px;
         font-size: $font_size;
         flex:1;
         .title{

src/components/product/index.tsx

@@ -2,6 +2,7 @@ import { Image, View } from "@tarojs/components"
 import Taro from "@tarojs/taro"
 import { goLink } from "@/common/common"
 import styles  from './index.module.scss'
+import { formatHashTag, formatImgUrl } from "@/common/fotmat"
 
 type Params = {
     desStatus?: true|false,
@@ -13,11 +14,11 @@ export default ({desStatus = true, productList = []}:Params) => {
             {productList?.map(item => {
                 return <View className={styles.products_item} onClick={() => goLink(`/pages/details/index?id=${item.id}`)}>
                     <View className={styles.item_img}>
-                        <Image src={item.texture_url}/>
+                        <Image src={formatImgUrl(item.texture_url)}/>
                         <View className={styles.num}>{item.product_color_count}色</View>
                     </View>
                     <View className={styles.item_con}>
-                    <View className={styles.title}><text>{item.code}#</text>{item.name}</View>
+                    <View className={styles.title}><text>{formatHashTag(item.code, '')} </text>{item.name}</View>
                     <View className={styles.tag_list}>
                         <View className={styles.tag}>{item.width}</View>
                         <View className={styles.tag}>{item.weight_density}</View>

src/components/shopCart/index.tsx

@@ -189,7 +189,7 @@ export default ({show = false, onClose}: param) => {
     const estimatePrice = useMemo(() => {
         let count = 0
         list.map(item => {
-            if(item.select) count += item.sale_price
+            if(item.select) count += item.estimate_amount
         })
         return Number(formatPriceDiv(count))
     },[list])

src/components/sideBar/index.tsx

@@ -4,6 +4,7 @@ import styles from "./index.module.scss"
 import classnames from "classnames";
 import Taro, { useReady } from "@tarojs/taro";
 import InfiniteScroll from "../infiniteScroll";
+import LoadingCard from "../loadingCard";
 
 
 
@@ -107,6 +108,7 @@ export default memo(({list = [],
                     <View className="common_safe_area_y"></View>
                 </ScrollView>
                 <View className={styles.sideBar_con}>
+                    
                     <InfiniteScroll hasMore={hasMore} selfonScrollToLower={() => selfOnScrolltolower?.()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}>
                         {children}
                     </InfiniteScroll>

src/pages/classList/index.tsx

@@ -4,42 +4,103 @@ import Search from '@/components/search'
 import Product from '@/components/product'
 import InfiniteScroll from '@/components/infiniteScroll'
 import styles  from './index.module.scss'
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
-import Filter from "./components/filter";
+import Filter from "@/components/filter";
 import SortBtn from "@/components/sortBtn";
-import SelectData from "../searchList/components/selectData";
+import SelectData, {ListProps} from "../searchList/components/selectData";
-import {GetSubjectList} from '@/api/subjectMaterial'
+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 [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 [searchField, setSearchField] = useState({
+        code_or_name: '',
+        product_category_id: router.params.id,
+        page : 1,
+        size : 10,
+        width: '',
+        weight_density: '',
+        product_kind_id: '',
+        component: ''
+    })
+
+    //获取列表
+    const [categoryList, setCategoryList] = useState<{list:any[], total:number}>({
+        list:[],
+        total:0
+    })
+    const {fetchData, state} = GetProductListApi()
+    const getSubjectList = async () => {
+        let res = await fetchData(getFilterData(searchField))
+        setCategoryList({...categoryList, 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(categoryList.list.length < categoryList.total) {
+            pageNum.current.page++
+            const size = pageNum.current.size * pageNum.current.page
+            setSearchField({...searchField, size })
+        }
+    }
+
+    //监听获得的数据变化
+    useEffect(() => {
+        (categoryList.list.length < categoryList.total)?setHasMore(true):setHasMore(false)
+    }, [categoryList])
+
+    //获取筛选条件
+    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
+        setCategoryList(() => ({list:[], total:0}))
+        setSearchField((val) => ({...val, code_or_name:e, size:10}))
     }, [])
 
-    //获取专题
+
-    const [list, setList] = useState<any>([])
-    const {fetchData} = GetSubjectList()
-    const getSubjectList = async () => {
-        let res = await fetchData()
-        console.log('res::', res)
-    }
 
     return (
         <View className={styles.main}>
             <View className={styles.search}>
-                <Search placeIcon="out" showBtn={true} btnStyle={{color: '#007AFF'}}/>
+                <Search placeIcon="out" showBtn={true} btnStyle={{color: '#007AFF'}} changeOnSearch={getSearchData} debounceTime={300}/>
             </View>
             <View className={styles.filter}>
                 <View className={styles.filter_all}>
@@ -57,11 +118,13 @@ export default () => {
                 </View>
             </View>
             <View className={styles.list}>
-                <InfiniteScroll selfonScrollToLower={() => console.log('123123')}>
+                {(categoryList.list.length == 0&&state.loading)&&<LoadingCard/>}
-                    <Product desStatus={false}/>
+                {(categoryList.list.length == 0 && !state.loading)&&<LoadingCard title="暂无数据" loadingIcon={false}/>}
-                </InfiniteScroll>
+                {(categoryList.list.length > 0)&&<InfiniteScroll selfonScrollToLower={() => getScrolltolower()} hasMore={hasMore}>
+                    <Product desStatus={false} productList={categoryList.list}/>
+                </InfiniteScroll>}
             </View>
-            <Filter show={showPopup} onClose={() => setShowPopup(false)} onFiltr={(e) => console.log('e:::',e)}/>
+            <Filter show={showPopup} onClose={() => setShowPopup(false)} onFiltr={getFiltr}/>
         </View>
     )
 }

src/pages/editOrder/index.module.scss

@@ -101,7 +101,7 @@
                 align-items: center;
             }
             .addAddress{
-                border-left: 0;
+                border-right: 0;
                 display: flex;
                 border-radius: 50px  0px 0px 50px;
                 color: $color_main;

src/pages/index/index.tsx

@@ -11,6 +11,7 @@ import { useEffect, useRef, useState } from 'react'
 import Taro, { Events, useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
 import {GetProductKindListApi, GetProductListApi} from '@/api/material'
 import useLogin from '@/use/useLogin'
+import LoadingCard from '@/components/loadingCard'
 
 export default () => {
 

src/pages/order/components/estimatedAmount/index.module.scss

@@ -14,8 +14,9 @@
             position: relative;
         }
         .miconfont{
-            font-size: 30px;
+            font-size: 26px;
             font-weight: normal;
+            margin-left: 5px;
         }
         .message{
             position: absolute;

src/pages/order/components/estimatedAmount/index.tsx

@@ -26,7 +26,7 @@ export default memo(({style, number = 0}:Param) => {
                 <View className={styles.order_price_text}>
                     <Text>合计金额</Text>
                     <View className={styles.iconfont_msg}>
-                        <Text className={classnames(styles.miconfont, 'iconfont icon-a-tuikuanshouhou')}></Text>
+                        <Text className={classnames(styles.miconfont, 'iconfont icon-zhushi')}></Text>
                         {/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
                     </View>
                 </View>
@@ -38,7 +38,7 @@ export default memo(({style, number = 0}:Param) => {
                 <View className={styles.order_price_text}>
                     <Text>空差优惠</Text>
                     <View className={styles.iconfont_msg}>
-                        <Text className={classnames(styles.miconfont, 'iconfont icon-a-tuikuanshouhou')}></Text>
+                        <Text className={classnames(styles.miconfont, 'iconfont icon-zhushi')}></Text>
                         {/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
                     </View>
                 </View>
@@ -50,7 +50,7 @@ export default memo(({style, number = 0}:Param) => {
                 <View className={classnames(styles.order_price_text, styles.emphasis)}>
                     <Text>应付金额</Text>
                     <View className={styles.iconfont_msg}>
-                        <Text className={classnames(styles.miconfont, 'iconfont icon-a-tuikuanshouhou')}></Text>
+                        <Text className={classnames(styles.miconfont, 'iconfont icon-zhushi')}></Text>
                         {/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
                     </View>
                 </View>

src/pages/order/components/orderState/index.module.scss

@@ -3,6 +3,8 @@
     border-radius: 20px;
     padding: 20px;
     box-sizing:border-box;
+    position: relative;
+    overflow: hidden;
     .order_status_list{
         max-height: 250px;
         overflow: hidden;
@@ -16,8 +18,8 @@
         padding-left: 50px;
         min-height: 120px;
         .order_status_tail_end, .order_status_tail{
-            width: 20px;
+            width: 15px;
-            height: 20px;
+            height: 15px;
             border: 2px solid $color_main;
             background-color: #fff;
             border-radius: 50%;
@@ -33,7 +35,7 @@
             border-left: 2px solid $color_main;
             height: 100%;
             top: 10px;
-            left: 13px;
+            left: 8px;
             position: absolute;
             z-index: 1;
         }
@@ -87,4 +89,15 @@
             transform:rotate(-90deg);
         }
     }
+    .image_tag{
+        width: 140px;
+        height: 144px;
+        .image{
+            width: 140px;
+            height: 144px;
+        }
+        position: absolute;
+        top: -10px;
+        right: -10px;
+    }
 }

src/pages/order/components/orderState/index.tsx

@@ -2,6 +2,7 @@ import { Image, Text, View } from "@tarojs/components"
 import { memo, useState } from "react"
 import styles  from './index.module.scss'
 import classnames from "classnames";
+import { formatImgUrl } from "@/common/fotmat";
 type Param = {
     title: string,
     time: string,
@@ -18,6 +19,7 @@ export default memo(({list = []}:{list?:Param[]}) => {
         {title:'待配布', time:'2022-04-24 09:08', tag:'已接单', desc:'仓库正在为你配布...'},
         {title:'待接单', time:'2022-04-24 09:08', tag:'已提交', desc:''},
     ]
+
     return (
         <View className={styles.order_flow_state}>
             <View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
@@ -36,9 +38,9 @@ export default memo(({list = []}:{list?:Param[]}) => {
                 <Text>{showMore&&'收起物流详情'||'点击查看更多物流详情'}</Text>
                 <Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
             </View>}
-            {/* <View className={styles.tag}>
+            <View className={styles.image_tag}>
-                <Image src='./styles/image/hkfk.png' />
+                <Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>
-            </View> */}
+            </View>
         </View>
     )
 })

src/pages/order/index.module.scss

@@ -72,19 +72,22 @@
         align-items: center;
         background-color: #fff;
         box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
-        padding: 20px 50px;
+        padding: 20px 20px;
         box-sizing: border-box;
         padding-bottom: constant(safe-area-inset-bottom);
         padding-bottom: env(safe-area-inset-bottom);
         .order_btn {
-            width: 250px;
+            width: 152px;
-            height: 90px;
+            height: 72px;
             border: 2px solid #dddddd;
             border-radius: 46px;
             display: flex;
             justify-content: center;
             align-items: center;
             color: $color_font_three;
+            &:nth-child(n+2) {
+                margin-left: 34px;
+            }
         }
         .order_number_desc{
             font-size: $font_size_medium;

src/pages/order/index.tsx

@@ -149,7 +149,10 @@ import styles  from './index.module.scss'
                 <View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
             </View>
             <View className={styles.submit_order}>
-                <View className={styles.order_btn}>取消订单</View>    
+                <View className={styles.order_btn}>申请退货</View>    
+                <View className={styles.order_btn}>查看物流</View>    
+                <View className={styles.order_btn}>确认收货</View>    
+                <View className={styles.order_btn}>再次购买</View>    
             </View>        
             <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
                 <Remark onSave={(e) => getRemark(e)}/>

src/pages/orderList/components/order/index.module.scss

@@ -0,0 +1,143 @@
+.order_item{
+    background-color: #fff;
+    border-radius: 20px;
+    padding: 20px;
+    box-sizing: border-box;
+    .header{
+        display: flex;
+        align-items: center;
+        .user{
+            display: flex;
+            align-items: center;
+            .name {
+                color: #000;
+                font-weight: 700;
+                margin-left: 15px;
+                font-size: $font_size;
+            }
+            image{
+                width: 70px;
+                height: 70px;
+                border-radius: 50%;
+            }
+        }
+        .order_num {
+            flex: 1;
+            font-size: $font_size_medium;
+            color: $color_font_one; 
+            text-align: right;
+            padding-right: 30px;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            .miconfont {
+                font-size: 20px;
+            }
+        }
+        .tag{
+            font-size: $font_size_min;
+            padding: 5px 15px;
+            background-color: $color_main;
+            color: #fff;
+            border-radius: 0px 20px 0px 20px;
+        }
+    }
+    .product_title{
+        display: flex;
+        align-items: center;
+        padding: 35px 0;
+        .product_tag{
+            background-color: #CDE5FF;
+            font-size: $font_size_min;
+            padding: 5px 10px;
+            color: $color_main;
+            border-radius: 6px;
+        }
+        .product_name{
+            flex:1;
+            font-size: $font_size;
+            font-weight: 700;
+            padding-left: 20px;
+        }
+        .product_status{
+            font-size: $font_size;
+            color:  $color_main;
+        }
+    }
+    .product_list{
+        display: flex;
+        .image{
+            width: 126px;
+            height: 126px;
+            background: #e5ad3a;
+            border-radius: 20px 20px 0px 0px;
+            position: relative;
+            image{
+                width: 100%;
+                height: 100%;
+                border-radius: 20px 20px 0px 0px;
+            }
+            .color_num {
+                background: rgba(0,0,0, 0.5);
+                border-radius: 50px 0px 0px 0px;
+                font-size: $font_size_min;
+                color: #fff;
+                position: absolute;
+                right:0;
+                bottom:0;
+                padding: 5px 10px;
+                box-sizing: border-box;
+            }
+        }
+        .color_list{
+            flex:1;
+            padding-left: 30px;
+            .color_item{
+                display: flex;
+                justify-content: space-between;
+                font-size: $font_size_min;
+                color: $color_font_three;
+                align-items: center;
+                margin-bottom: 20px;
+                .color_title{
+                    font-weight: 700;
+                    font-size: $font_size;
+                    color: #000;
+                }
+                .color_more{
+                    color: $color_font_three;
+                }
+            }
+        }
+       
+    }
+    .color_count_num{
+        font-size: $font_size_min;
+        color: $color_font_two;
+        background-color: #F6F6F6;
+        border-radius: 10px;
+        padding: 10px 22px;
+    }
+    .btns_list{
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 30px;
+        .btns_item{
+            width: 152px;
+            height: 72px;
+            border: 2px solid #dddddd;
+            border-radius: 38px;
+            text-align: center;
+            line-height: 72px;
+            font-size: $font_size;
+            color: $color_font_three;
+            &:nth-child(n+2) {
+                margin-left: 32px;
+            }
+        }
+        .end_btn{
+            border: 2px solid $color_main;
+            color: $color_main;
+        }
+    }
+}

src/pages/orderList/components/order/index.tsx

@@ -0,0 +1,60 @@
+import { formatImgUrl } from "@/common/fotmat";
+import { useSelector } from "@/reducers/hooks";
+import { Image, Text, View } from "@tarojs/components"
+import classnames from "classnames";
+import { memo } from "react";
+import styles  from './index.module.scss'
+export default memo(() => {
+    const userInfo = useSelector(state => state.userInfo)
+    return (
+        <View className={styles.order_item}>
+            <View className={styles.header}>
+                <View className={styles.user}>
+                <Image src={`${userInfo.adminUserInfo.avatar_url}`}/>
+                <Text className={styles.name}>{userInfo.adminUserInfo.user_name}</Text>
+                </View>
+                <View className={styles.order_num}>
+                <Text>订单号：LY2278204399678</Text>
+                <Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text>
+                </View>
+                <View className={styles.tag}>自提</View>
+            </View>
+            <View className={styles.product_title}>
+                <View className={styles.product_tag}>大货</View>
+                <View className={styles.product_name}>0770# 21S单面平纹(食毛)</View>
+                <View className={styles.product_status}>待接单</View>
+            </View>
+            <View className={styles.product_list}>
+                <View className={styles.image}>
+                <Image src={formatImgUrl('')}/>
+                <View className={styles.color_num}>24色</View>
+                </View>
+                <View className={styles.color_list}>
+                <View className={styles.color_item}>
+                    <View className={styles.color_title}>1# 薄荷绿</View>
+                    <View className={styles.color_price}>¥40/kg</View>
+                    <View className={styles.color_num}>×2条</View>
+                </View>
+                <View className={styles.color_item}>
+                    <View className={styles.color_title}>1# 薄荷绿</View>
+                    <View className={styles.color_price}>¥40/kg</View>
+                    <View className={styles.color_num}>×2条</View>
+                </View>
+                <View className={styles.color_item}>
+                    <View className={styles.color_more}>……</View>
+                    <View className={styles.color_more}>……</View>
+                    <View className={styles.color_more}>……</View>
+                </View>
+                
+                </View>
+            </View>
+            <View className={styles.color_count_num}>2种面料，3种颜色，共6条</View>
+            <View className={styles.btns_list}>
+                <View className={styles.btns_item}>取消订单</View>
+                <View className={styles.btns_item}>修改地址</View>
+                <View className={styles.btns_item}>修改地址</View>
+                <View className={classnames(styles.btns_item, styles.end_btn)}>去付款</View>
+            </View>
+        </View>
+    )
+})

src/pages/orderList/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '订单列表',
+}

src/pages/orderList/index.module.scss

@@ -0,0 +1,36 @@
+.order_list_main{
+    min-height: 100vh;
+    background-color: $color_bg_one;
+    display: flex;
+    flex-direction: column;
+    .title{
+        padding: 0 20px;
+        background-color: #fff;
+        box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.16);
+        border-bottom: 2px solid #e2e2e2;
+        .order_status_list{
+            display: flex;
+            justify-content: space-between;
+            font-size: $font_size;
+            color: #9E9E9E;
+            margin-top: 20px;
+            .order_status_item{
+                padding: 20px 10px;
+                box-sizing: border-box;
+            }
+            .selected{
+                font-weight: 700;
+                color: #000;
+                border-bottom: 4px solid #707070;
+                // border-radius: 4px;
+            }
+        }
+    }
+    .order_list{
+        flex:1;
+        height: 0;
+        .order_item{
+            margin-top: 20px;
+        }
+    }
+}

src/pages/orderList/index.tsx

@@ -0,0 +1,66 @@
+import Search from "@/components/search"
+import useLogin from "@/use/useLogin"
+import { Image, Text, View } from "@tarojs/components"
+import { useDidShow, useRouter } from "@tarojs/taro"
+import { useCallback, useState } from "react"
+import {ORDER_STATUS} from '@/common/enum'
+import styles  from './index.module.scss'
+import classnames from "classnames";
+import { useSelector } from "@/reducers/hooks"
+import { formatImgUrl } from "@/common/fotmat"
+import Order from "./components/order"
+import InfiniteScroll from "@/components/infiniteScroll"
+
+export default () => {
+  const {checkLogin} = useLogin()
+  useDidShow(async () => {
+    await checkLogin()
+  })
+
+  const router = useRouter()
+  //搜索参数
+  const [searchField, setSearchField] = useState({
+    shipment_mode:'',
+    page : 1,
+    size : 10,
+    key:''
+  })
+
+  //订单状态
+  type orderStatusParam = {value:number, label:string}[] 
+  const order_status: orderStatusParam = [{value:-1, label:'全部'}, ...Object.values(ORDER_STATUS)]
+  const [selectStatus, setSelectStatus] = useState(-1)
+  const changeStatus = useCallback((e) => {
+    setSelectStatus(() => e)
+  }, [])
+
+  //输入了搜索关键字
+  const getSearchData = useCallback((e) => {
+    // setMaterialList(() => ({list:[], total:0}))
+    setSearchField((val) => ({...val, code_or_name:e, size:10}))
+  }, [])
+
+  
+
+  return (
+    <View className={styles.order_list_main}>
+      <View className={styles.title}>
+        <Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true} defaultValue={router.params.key} changeOnSearch={getSearchData} debounceTime={300}/>
+        <View className={styles.order_status_list}>
+          {order_status.map(item => {
+            return <View key={item.value} onClick={() => changeStatus(item.value)} className={classnames(styles.order_status_item, (selectStatus==item.value)&&styles.selected)}>{item.label}</View>
+          })}
+        </View>
+      </View>
+      <View className={styles.order_list}>
+          <InfiniteScroll>
+            {new Array(10).fill('').map(item => {
+              return <View className={styles.order_item}> <Order/></View>
+              
+            })}
+            
+          </InfiniteScroll>
+      </View>
+    </View>
+  )
+}

src/pages/searchList/searchList.tsx

@@ -69,6 +69,7 @@ export default () => {
 
     //输入了搜索关键字
     const getSearchData = useCallback((e) => {
+        pageNum.current.page = 1
         setMaterialList(() => ({list:[], total:0}))
         setSearchField((val) => ({...val, code_or_name:e, size:10}))
     }, [])
@@ -94,6 +95,7 @@ export default () => {
 
     //获取筛选条件
     const getFiltr = (e) => {
+        pageNum.current.page = 1
         const {data} = e
         setSearchField({
             ...searchField,  

src/pages/subjectList/components/filter/index.module.scss

@@ -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

@@ -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

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '分类标题'
+}

src/pages/subjectList/index.module.scss

@@ -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

@@ -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>
+    )
+}

src/styles/common.scss

@@ -19,7 +19,6 @@ $font_size_min: 22px;
 
 //省略号
 @mixin common_ellipsis($params:1) {
-
     overflow: hidden;
     display: -webkit-box;
     white-space:normal;