Merge branch '优化滚动' into dev

config/index.js

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

src/api/material.ts

@@ -45,3 +45,13 @@ export const GetProductDetailApi = () => {
     })
 }
 
+/**
+ *  根据LAB匹配色卡基础资料
+ * @returns 
+*/
+export const GetLabProductApi = () => {
+    return useRequest({
+        url: `/v1/mall/product/color/absorb/match`,
+        method: "get",
+    })
+}

src/api/order.ts

@@ -19,3 +19,44 @@ import { useRequest } from "@/use/useHttp"
         method: "put",
     })
 }
+
+/**
+ * 获取销售单详情
+ */
+ export const GetSaleOrderDetailApi = () => {
+    return useRequest({
+        url: `/v1/mall/saleOrder`,
+        method: "get",
+    })
+}
+
+
+/**
+ * 修改销售单备注
+ */
+ export const EditSaleOrderRemarkApi = () => {
+    return useRequest({
+        url: `/v1/mall/saleOrder/remark`,
+        method: "put",
+    })
+}
+
+/**
+ * 修改销售单地址
+ */
+ export const EditSaleOrderAddressApi = () => {
+    return useRequest({
+        url: `/v1/mall/saleOrder/address`,
+        method: "put",
+    })
+}
+
+/**
+ * 修改销售单收货方法
+ */
+ export const EditSaleOrderShipmentModeApi = () => {
+    return useRequest({
+        url: `/v1/mall/saleOrder/shipmentMode`,
+        method: "put",
+    })
+}

src/api/search.ts

@@ -3,9 +3,31 @@ import { useRequest } from "@/use/useHttp"
 /**
  * 获取热门搜索
  */
- export const getHotSearchApi = () => {
+ export const GetHotSearchApi = () => {
     return useRequest({
-        url: `/v1/mall/hotSearch`,
+        url: `/v1/mall/hotSearch/list`,
         method: "get",
     })
 }
+
+
+/**
+ * 获取历史搜索
+ */
+ export const GetSearchHistoryApi = () => {
+    return useRequest({
+        url: `/v1/mall/searchHistory/list`,
+        method: "get",
+    })
+}
+
+
+/**
+ * 添加搜索关键字
+ */
+ export const AddSearchHistoryApi = () => {
+    return useRequest({
+        url: `/v1/mall/searchHistory`,
+        method: "post",
+    })
+}

src/api/subjectMaterial.ts

@@ -0,0 +1,13 @@
+import { useRequest } from "@/use/useHttp"
+
+/**
+ *  获取专题列表
+ * @returns 
+*/
+export const GetSubjectList = () => {
+    return useRequest({
+        url: `/v1/mall/subject/list`,
+        method: "get",
+    })
+}
+

src/app.config.ts

@@ -45,7 +45,7 @@ export default {
     {
       root: "pages/details",
       pages: [
-        "index"
+        "index",
       ]
     },
     {
@@ -95,7 +95,26 @@ export default {
     {
       root: "pages/order",
       pages: [
-        "index"
+        "index",
+        "comfirm"
+      ]
+    },
+    {
+      root: "pages/editOrder",
+      pages: [
+        "index",
+      ]
+    },
+    {
+      root: "pages/orderList",
+      pages: [
+        "index",
+      ]
+    },
+    {
+      root: "pages/subjectList",
+      pages: [
+        "index",
       ]
     }
   ]

src/common/client.js

@@ -1,17 +0,0 @@
-import Taro from "@tarojs/taro";
-
-
-/**
- *  设置 客户 本地存储
- * @param {Object} clientInfo 
- */
-export const setClient = (clientInfo) => {
-  Taro.setStorageSync('client', clientInfo)
-}
-
-/**
- * 返回 客户 本地存储
- */
-export const getClient = () => {
-  Taro.getStorageSync('client') || null
-}

src/common/constant.js

@@ -5,10 +5,10 @@
 // export const BASE_URL = `http://192.168.0.89:40001/lymarket`
 // export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
 // export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境
-export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发
+// export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发
 // export const BASE_URL = `https://dev.zzfzyc.com/lymarket`  // 开发环境
 // export const BASE_URL = `https://www.zzfzyc.com/lymarket`  // 正式环境
-// export const BASE_URL = `http://192.168.1.4:40001/lymarket` // 王霞
+export const BASE_URL = `http://192.168.1.4:40001/lymarket` // 王霞
 // export const BASE_URL = `http://192.168.1.224:50002/lymarket` // 添
 
 // CDN
@@ -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/`
 
-// 前缀
-export const IMG_CND_Prefix = "http://test.cdn.zzfzyc.com"
+// cdn
+export const IMG_CND_Prefix = CURRENT_ENV.includes('development')? "https://test.cdn.zzfzyc.com":"https://cdn.zzfzyc.com"
 
 
 // 上传图片视频
@@ -25,3 +25,8 @@ export const CDN_UPLOAD_IMG = `${UPLOAD_CDN_URL || ''}`;
 
 //appid
 export const WX_APPID = 'wx68d92d7cbf0b6963'
+
+//场景值
+export const SCENE = {
+    SearchScene : 0 //商城面料搜索
+}

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

src/common/system.ts

@@ -32,3 +32,19 @@ export const getAccountInfo = () => {
   const result = Taro.getStorageSync('accountInfo')
   return result ? JSON.parse(result) : null
 }
+
+/**
+ *  设置 参数本地存储
+ * @param {Object} info 
+ */
+export const setParam = (info:Object) => {
+  Taro.setStorageSync('params', JSON.stringify(info))
+}
+
+/**
+ * 返回 参数本地存储
+ */
+export const getParam = () => {
+  const res = Taro.getStorageSync('params') || null
+  return res?JSON.parse(res):null
+}

src/common/util.ts

@@ -5,7 +5,7 @@
  * @returns 
  */
 export const debounce = (fn, delay) => {
-  let timer = null;
+  let timer:any = null;
   return (...param) => {
     if (timer) clearTimeout(timer);
     timer = setTimeout(() => {
@@ -91,3 +91,16 @@ export const throttle = (fn, delay) => {
  export const screenshot = (url, suffix="!w200")=>{
    return url+suffix;
  }
+
+ //获取数据加载状态 //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据
+ export const dataLoadingStatus = ({list = [], total = 0, status = false}:{list:any[], total:number,  status:true|false}) => {
+  if(list.length == 0 && status) {
+    return 0
+  } else if (list.length == 0 && !status) {
+    return 1
+  } else if (list.length < total) {
+    return 2
+  } else {
+    return 3
+  }
+ }

src/components/filter/index.module.scss

@@ -31,7 +31,7 @@
             grid-template-columns: repeat(3, 165.75px);
             justify-content: space-between;
             .btn_item{
-                width: 165.75px;
+                // width: 165.75px;
                 height: 69.2px;
                 background: #f0f0f0;
                 border-radius: 34px;
@@ -54,7 +54,7 @@
             // justify-content: space-between;
             align-items: center;
             .btn_width {
-                width: 220px;
+                flex:1;
                 height: 70px;
                 background: #f0f0f0;
                 border-radius: 50px;

src/components/filter/index.tsx

@@ -1,101 +1,105 @@
+import { GetProductKindListApi } from "@/api/material";
 import Popup, {Params as PopuParams} from "@/components/popup"
 import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
+import { useDidShow } from "@tarojs/taro";
 import classnames from "classnames";
-import { useEffect, useState } from "react";
+import { memo, useEffect, useRef, useState } from "react";
 import styles  from './index.module.scss'
 
 type params = {
-    onFiltr?: (val:object) => void
+    onFiltr?: (val:object) => void //确定搜索
+    onRest?: (val:Object) => void //重置
 } & PopuParams
-export default ({onClose, onFiltr, show = false}:params) => {
-    const [filterObj, setFilterObj] = useState({
-        series: '',
-        minWidth: '',
-        maxWidth: '',
-        minWeight: '',
-        maxWeight: '',
-        element: ''
+export default memo(({onClose, onFiltr, show = false, onRest}:params) => {
 
+    //搜索条件
+    const [filterObj, setFilterObj] = useState({
+        seriesName: '',
+        seriesId: '',
+        width: '',
+        weight: '',
+        element: '',
     })
+
+    const selectFieldValue = useRef({width:'幅宽', weight:'克重', element:'成分', seriesName:'系列'})
+
+    //获取系列
+    const {fetchData: kindFetchData} = GetProductKindListApi()
+    const [kindList, setKindList] = useState<any[]>([])
+    const getCategoryList = async () => {
+        let {data} = await kindFetchData()
+        setKindList(data.list)
+    }
+
+    useEffect(() => {
+        show&&getCategoryList()
+    }, [show])
+
+    //切换系列
+    const changeKind = (e) => {
+        setFilterObj({...filterObj, seriesId:e.id, seriesName: e.name})
+    }
+
     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)
+    //重置数据
+    const onRestEven = () => {
+        let res = {
+            seriesName: '',
+            seriesId: '',
+            width: '',
+            weight: '',
+            element: '',
+        }
+        setFilterObj(res)
         onFiltr?.(filterObj)
+        onClose?.()
     }
 
-    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))
+    //提交搜索
+    const onVerify = () => {
+        onFiltr?.({data:filterObj, field: selectFieldValue.current})
+        onClose?.()
     }
+
+    //获取幅宽或克重输入值或成分
+    const setFieldData = (e, field) => {
+        filterObj[field] = e.detail.value
         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>
+                                {kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id)&&styles.select_btn_item)}>{item.name}</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.btn_width}><Input value={filterObj.width}  onBlur={(e) => setFieldData(e,'width')} 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 className={styles.btn_width}><Input  value={filterObj.weight} onBlur={(e) => setFieldData(e,'weight')}  placeholder="请输入克重" placeholderStyle="font-size: 26rpx"/></View>
+                                <View className={styles.unit}>kg</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)}/>
+                                <Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setFieldData(e, 'element')}/>
                             </View>
                         </View>
                         
@@ -104,12 +108,11 @@ export default ({onClose, onFiltr, show = false}:params) => {
                 </ScrollView>
                 <View className={styles.btns_con}>
                     <View className={styles.btns_two}>
-                        <View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
+                        <View className={styles.rest_btn} onClick={() => onRestEven()}>重置</View>
                         <View className={styles.verify_btn } onClick={() => onVerify()}>确认</View>
                     </View>
                 </View>
             </View>
         </Popup>
-
     )
-}
+})

src/components/filterV2/index copy.tsx

@@ -0,0 +1,130 @@
+import { GetProductKindListApi } from "@/api/material";
+import Popup, {Params as PopuParams} from "@/components/popup"
+import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
+import { useDidShow } from "@tarojs/taro";
+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({
+        seriesId: '',
+        minWidth: '',
+        maxWidth: '',
+        minWeight: '',
+        maxWeight: '',
+        element: ''
+    })
+
+    //获取系列
+    const {fetchData: kindFetchData} = GetProductKindListApi()
+    const [kindList, setKindList] = useState<any[]>([])
+    const getCategoryList = async () => {
+        let {data} = await kindFetchData()
+        setKindList(data.list)
+    }
+
+    useEffect(() => {
+        show&&getCategoryList()
+    }, [show])
+
+    //切换系列
+    const changeKind = (e) => {
+        setFilterObj({...filterObj, seriesId:e.id})
+    }
+
+    const onCloseEven = () => {
+       onClose?.()
+    }
+    const onRest = () => {
+        console.log('12123')
+        setFilterObj({
+            seriesId: '',
+            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}>
+                                {kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id)&&styles.select_btn_item)}>{item.name}</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/components/filterV2/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/components/filterV2/index.tsx

@@ -0,0 +1,128 @@
+import { GetProductKindListApi } from "@/api/material";
+import Popup, {Params as PopuParams} from "@/components/popup"
+import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
+import { useDidShow } from "@tarojs/taro";
+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({
+        seriesId: '',
+        minWidth: '',
+        maxWidth: '',
+        minWeight: '',
+        maxWeight: '',
+        element: ''
+    })
+
+    //获取系列
+    const {fetchData: kindFetchData} = GetProductKindListApi()
+    const [kindList, setKindList] = useState<any[]>([])
+    const getCategoryList = async () => {
+        let {data} = await kindFetchData()
+        setKindList(data.list)
+    }
+
+    useEffect(() => {
+        show&&getCategoryList()
+    }, [show])
+
+    //切换系列
+    const changeKind = (e) => {
+        setFilterObj({...filterObj, seriesId:e.id})
+    }
+
+    const onCloseEven = () => {
+       onClose?.()
+    }
+    const onRest = () => {
+        console.log('12123')
+        setFilterObj({
+            seriesId: '',
+            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}>
+                                {kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id)&&styles.select_btn_item)}>{item.name}</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>
+                                <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/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,16 @@ 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"
+
+export type StatusParam = 0|1|2|3
 
 type Params = {
     styleObj?: Object,
     selfonScrollToLower?: () => void,
     hasMore?: false|true, 
     moreStatus?: false|true,
+    statusMore?: StatusParam //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据
     children?: ReactNode,
     lowerThresholdNum?: number,
     selfOnScrollToUpper?:() => void
@@ -35,7 +39,8 @@ export default memo(({
     paddingBottom = 0,
     refresherTriggered = false,
     refresherEnabled = false,
-    moreStatus = true
+    moreStatus = true,
+    statusMore = 0
 }: Params) => {
     const scrollToLower = () => {
         selfonScrollToLower?.()
@@ -77,19 +82,28 @@ export default memo(({
                 onRefresherAbort = {() => refresherAbort()}
                 refresherBackground ='#F8F8F8'
             >
-                <View style={{paddingBottom:paddingBottom + 'rpx'}}>
+                {!moreStatus&&<>
+                    <View style={{paddingBottom:paddingBottom + 'rpx'}} className={style.scrollViewCon}>
                         {children}
-                    {moreStatus&&<View className={style.infinite_scroll}>
+                    </View>
+                </>||
+                <>
+                    {(statusMore == 2 || statusMore == 3)&&<View style={{paddingBottom:paddingBottom + 'rpx'}} className={style.scrollViewCon}>
+                            {children}
+                            <View className={style.infinite_scroll}>
                                 {
-                            hasMore&&<View className={style.loading_more}>加载中<DotLoading/></View>||
+                                    (statusMore == 2)&&<View className={style.loading_more}>加载中<DotLoading/></View>||
                                     <View>没有更多数据了</View>
                                 }
-                    </View>}
                             </View>
+                        </View>
+                    }
+                    {(statusMore == 0)&&<LoadingCard/>}
+                    {(statusMore == 1)&&<LoadingCard loadingIcon={false} title="暂无数据"/>}
+                </>}
                 
                 <View className="common_safe_area_y"></View>
             </ScrollView>
-            
         </>
     )
 })

src/components/loadingCard/index.tsx

@@ -5,17 +5,19 @@ import { memo } from "react";
 
 type Params = {
     styleLoading?: Object,
-    title?: string
+    title?: string,
+    loadingIcon?: false|true
 }
 export default memo(({
     styleLoading = {},
-    title = "加载中..."
+    title = "加载中...", //显示的文字
+    loadingIcon = true //是否显示加载图标
 }:Params) => {
     console.log('loadingCard:::')
     return (
         <>
             <View className={style.loadingCard_main}>
-                <Loading/>
+                {loadingIcon&&<Loading/>}
                 <View className={style.loading_text}>{title}</View>
             </View>
         </>

src/components/product/index.module.scss

@@ -25,21 +25,19 @@
             border-radius: 10px;
         }
         .num{
-            width: 100px;
-            height: 36px;
+            padding: 5px 10px;
             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/search/index.tsx

@@ -17,22 +17,27 @@ type Params = {
     btnStyle?: Object,
     btnTitle?: string,
     debounceTime?: number //防抖时间，不设默认为零
+    defaultValue?: string
 }
 
-export default forwardRef(({
-    clickOnSearch,
-    changeOnSearch,
-    disabled = false,
+export default memo(forwardRef(({
+    clickOnSearch,  //点击筛选按钮触发
+    changeOnSearch, //输入文字触发
+    disabled = false, //是否禁用
     placeholder = '输入搜索内容',
-    showIcon = true,
-    showBtn = false,
+    showIcon = true, //是否显示关闭图标
+    showBtn = false, //是否显示搜索按钮
     btnStyle = {}, 
     placeIcon = 'inner', 
-    btnTitle = '搜索',
-    debounceTime = 0,
+    btnTitle = '搜索', //搜索文字
+    debounceTime = 0, //防抖时间，不设默认为零
+    defaultValue = '' //默认值
 }:Params, ref) => {
     const [inputCon , setInputCon] = useState('')
     const debounceTimeRef = useRef(0)
+    useEffect(() => {
+        setInputCon(defaultValue)
+    }, [defaultValue])
 
     useEffect(() => {
         debounceTimeRef.current = debounceTime
@@ -63,7 +68,7 @@ export default forwardRef(({
 
     return (
         <>
-            <View className={styles.search_main} onClick={() => clickOnSearch?.(inputCon)}>
+            <View className={styles.search_main} >
                 <View className={styles.search_con}>
                     {showIcon&&<View className={classnames('iconfont', 'icon-sousuo', styles.icon_a_sousuo1_self, placeIcon=='inner'?styles.icon_inner:styles.icon_out)}></View>}
                     <Input placeholderStyle='color:#ABABAB; font-size:26rpx' className={classnames(placeIcon=='out'&&styles.input_out)} disabled={disabled} value={inputCon} placeholder={placeholder} onInput={(e) => onInputEven(e)}></Input>
@@ -75,4 +80,4 @@ export default forwardRef(({
             </View>
         </>
     )
-})
+}))

src/components/searchInput/index.tsx

@@ -33,7 +33,6 @@ export default memo((props: Params) => {
         }
         return {}
     }, [showBorder])
-    console.log('searchInput::')
     return (
         <View className={styles.searchInput_main} style={stylen}>
             {showTitle&&<View className={styles.searchInput_title}>{title}</View>}

src/components/shopCart/index.module.scss

@@ -35,13 +35,10 @@
             border: 2px solid $color_main;
             background-color: #ecf5ff;
             color: $color_main;
-            width: 144px;
-            height: 51px;
         }
     }
     .con{
         padding:30px;
-        padding-bottom: 100px;
         box-sizing: border-box;
         flex:1;
         height: 0;
@@ -49,7 +46,7 @@
             height: 100%;
         }
         .product_list{
-            padding-bottom: 20px;
+            padding-bottom: 120px;
             .product_item{
                 display: flex;
                 justify-content: space-between;
@@ -148,7 +145,7 @@
     .buy_btn{
         width: 100%;
         position: fixed;
-        bottom: 0;
+        bottom: 20px;
         display: flex;
         justify-content: center;
         padding-bottom: constant(safe-area-inset-bottom);
@@ -163,6 +160,7 @@
             align-items: center;
             padding: 20px 0;
             box-sizing: border-box;
+            box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.5); 
             .icon{
                 width: 100px;
                 height: 100%;

src/components/shopCart/index.tsx

@@ -9,7 +9,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Taro from "@tarojs/taro";
 import { alert, goLink } from "@/common/common";
 import {GetShoppingCartApi, DelShoppingCartApi} from "@/api/shopCart"
-import { formatHashTag, formatImgUrl, formatMillionYuan } from "@/common/fotmat";
+import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
+import { setParam } from "@/common/system";
+import { debounce } from "@/common/util";
 
 type param = {
     show?: true|false,
@@ -175,35 +177,34 @@ export default ({show = false, onClose}: param) => {
 
     //格式化金额
     const formatPirce = useCallback((price) => {
-        const {num} = formatMillionYuan(price, 100)
-        return Number(num)
+        return Number(formatPriceDiv(price))
     }, [])
 
     //格式化数量
     const formatCount = useCallback((item) => {
-        return item.sale_mode == 0? item.roll + '件': item.length + 'm'
+        return item.sale_mode == 0? item.roll + '件': (item.length/100) + 'm'
     }, [])
 
     //预估金额
     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(formatMillionYuan(count, 100).num)
+        return Number(formatPriceDiv(count))
     },[list])
 
     //去结算
-    const orderDetail = () => {
+    const orderDetail = debounce(() => {
         getSelectId()
         if(selectIds.current.length == 0) {
             alert.error('请选择面料')
         } else {
             let ids = selectIds.current.join('-')
-            goLink('/pages/order/index',{ids, sale_mode:selectIndex})
-        }
-        
+            setParam({ids, sale_mode:selectIndex})
+            goLink('/pages/order/comfirm')
         }
+    }, 500)
     
     return (
         <View className={styles.shop_cart_main}>
@@ -212,8 +213,8 @@ export default ({show = false, onClose}: param) => {
                     <View className={styles.header}>
                         <View onClick={selectAll}>{!selectStatus?'全选':'反选'}</View>
                         <View onClick={delSelect}>
-                            <text className={classnames('iconfont', 'icon-lajixiang', styles.miconfont)}></text>
-                            删除勾选项
+                            <text className={classnames('iconfont', 'icon-shanchu', styles.miconfont)}></text>
+                            删除所选
                         </View>
                     </View>
                     <View className={styles.search}>
@@ -223,7 +224,7 @@ export default ({show = false, onClose}: param) => {
                     </View>
                     <View className={styles.con}>
                         {loading&&<LoadingCard/>}
-                        {!loading&&list?.length > 0&&<InfiniteScroll  refresherTriggered={true} refresherEnabled={true} moreStatus={false} >
+                        {!loading&&list?.length > 0&&<InfiniteScroll  moreStatus={false} >
                             <View className={styles.product_list}>
                                 {list?.map((item, index) => {
                                     return <View key={index} className={classnames(styles.product_item, (selectIndex!=-1&&selectIndex!= item.sale_mode)&&styles.no_product_item_select)}>
@@ -239,7 +240,7 @@ export default ({show = false, onClose}: param) => {
                                             <View className={styles.tag}>{item.sale_mode_name}</View>
                                         </View>
                                         <View className={styles.count}>
-                                            <View className={styles.price}><text>￥</text>{formatPirce(item.sale_price)}<text>/kg</text></View>
+                                            <View className={styles.price}><text>￥</text>{formatPirce(item.sale_price)}<text>/{selectList[selectIndex].eunit}</text></View>
                                             <View className={styles.long}>×{formatCount(item)}</View>
                                         </View>
                                     </View>

src/components/sideBar/index.tsx

@@ -1,10 +1,10 @@
 import { ScrollView, View } from "@tarojs/components"
-import { memo, ReactNode, useEffect, useRef, useState } from "react"
+import React, { memo, ReactNode, useEffect, useRef, useState } from "react"
 import styles from "./index.module.scss"
 import classnames from "classnames";
 import Taro, { useReady } from "@tarojs/taro";
-import InfiniteScroll from "../infiniteScroll";
-
+import InfiniteScroll, {StatusParam} from "../infiniteScroll";
+import LoadingCard from "../loadingCard";
 
 
 type Params = {
@@ -17,7 +17,8 @@ type Params = {
     refresherTriggered?: true|false,
     selfOnRefresherRefresh?: () => void
     selfOnScrolltolower?: () => void,
-    hasMore?: true|false
+    hasMore?: true|false,
+    statusMore?: StatusParam
 }
 
 export default memo(({list = [], 
@@ -29,7 +30,8 @@ export default memo(({list = [],
     refresherTriggered = false,
     selfOnRefresherRefresh,
     selfOnScrolltolower,
-    hasMore = true
+    hasMore = true,
+    statusMore = 0
 }: Params) => {
     
     let num_half = useRef(0)
@@ -81,8 +83,6 @@ export default memo(({list = [],
         })
     })
 
-   
-
     return (
         <>
             <View className={classnames(styles.sideBar_main,'side_bar_select')}>
@@ -107,7 +107,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?.()}>
+                    <InfiniteScroll statusMore={statusMore} hasMore={hasMore} selfonScrollToLower={() => selfOnScrolltolower?.()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}>
                         {children}
                     </InfiniteScroll>
                 </View>

src/constants/common.ts

@@ -0,0 +1,2 @@
+export const SET_COMMON = 'setCommon'
+export const CLEAR_COMMON = 'clearCommon'

src/pages/classList/index.tsx

@@ -3,30 +3,104 @@ import classnames from "classnames";
 import Search from '@/components/search'
 import Product from '@/components/product'
 import InfiniteScroll from '@/components/infiniteScroll'
-import Popup from "@/components/popup";
 import styles  from './index.module.scss'
-import { useState } from "react";
-import Filter from "./components/filter";
-import Tabs from "@/components/tabs";
+import { useCallback, useEffect, useMemo, 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 { dataLoadingStatus, 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 })
+        }
+    }
+
+    //数据加载状态
+    const statusMore = useMemo(() => {
+        return dataLoadingStatus({list:categoryList.list, total: categoryList.total, status: state.loading})
+    }, [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}))
+    }, [])
+
+
+
     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}>
@@ -40,15 +114,15 @@ export default () => {
                     </View>
                 </View>
                 <View className={styles.filter_btns}>
-                    <Tabs list={selectList} style={{}}/>
+                    <SelectData list={selectList}/>
                 </View>
             </View>
             <View className={styles.list}>
-                <InfiniteScroll selfonScrollToLower={() => console.log('123123')}>
-                    <Product desStatus={false}/>
+                <InfiniteScroll selfonScrollToLower={() => getScrolltolower()} statusMore={statusMore}>
+                    <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/details/components/orderCount/index.tsx

@@ -13,8 +13,8 @@ import {GetColorList} from "@/api/materialColor"
 import {AddShoppingCartApi} from "@/api/shopCart"
 import Taro, { useRouter } from "@tarojs/taro";
 import UseLogin from "@/use/useLogin"
-import { formatHashTag, formatMillionYuan } from "@/common/fotmat";
-import { getFilterData } from "@/common/util";
+import { formatHashTag, formatPriceDiv } from "@/common/fotmat";
+import { debounce, getFilterData } from "@/common/util";
 
 
 
@@ -56,7 +56,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
         console.log('数据:::',getFilterData(condition.current))
         let {data} = await colorFetchData(getFilterData(condition.current))
         let lists =  initList(data.list)
-        setList([...lists])
+        setList(() => [...lists])
         setLoading(() => false)
     }
     const [showPopup, setShowPopup] = useState(false)
@@ -114,7 +114,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
             if(item.count > 0) {
                 sumCount = Big(sumCount).add(item.count).toNumber()
                 kindCount ++
-                color_list_info = selectIndex == 0? {product_color_id:item.id, roll:item.count}:{product_color_id:item.id, length:item.count}
+                color_list_info = selectIndex == 0? {product_color_id:item.id, roll:item.count}:{product_color_id:item.id, length:(item.count*100)}
                 color_list.push(color_list_info)
                 
             }
@@ -144,7 +144,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
     //添加购物车
     const {getSelfUserInfo} = UseLogin()
     const {fetchData:addFetchData} = AddShoppingCartApi()
-    const addShopCart =  async () => {
+    const addShopCart =  debounce( async () => {
         try {
             await getSelfUserInfo()
         } catch(msg) {
@@ -178,13 +178,13 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
             })
         }
         
-    }
+    }, 500)
 
     //筛选数据
-    const searchInput = (e) => {
+    const searchInput = useCallback((e) => {
         condition.current.code_or_name = e
         getColorList()
-    }
+    }, [])
 
     //清空搜索内容
     const searchRef = useRef<any>(null)
@@ -195,7 +195,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
 
     //格式化金额
     const formatPrice = useCallback((item) => {
-        const price = Number(formatMillionYuan(item[selectList[selectIndex].priceField], 100).num)
+        const price = Number(formatPriceDiv(item[selectList[selectIndex].priceField]))
         return <View className={styles.priceText}><Text>¥</Text>{price}<Text> /{selectList[selectIndex].eunit}</Text></View> 
     }, [selectIndex])
 
@@ -216,7 +216,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
                     </View>
                     {searchShow&&<View className={styles.colorFind}>
                         <View className={styles.search}>
-                            <Search placeIcon="out" ref={searchRef} changeOnSearch={(e) => searchInput(e)} debounceTime={400}/>
+                            <Search placeIcon="out" ref={searchRef} changeOnSearch={searchInput} debounceTime={400}/>
                         </View>
                         <View className={styles.text} onClick={() => clearSearch()}>取消</View>
                     </View>}

src/pages/details/components/swiper/index.tsx

@@ -21,7 +21,6 @@ export default ({list = []}: params) => {
         setPageIndex(e.detail.current + 1)
     }
     
-
     return (
         <View className={styles.swiper}>
             <Swiper className={styles.swiper_item} circular={true}   onAnimationFinish={(e) => swiperChange(e)}>

src/pages/editOrder/components/shipmentMode/index.module.scss

@@ -0,0 +1,33 @@
+
+    .order_title{
+        display: flex;
+        align-items: center;
+        padding: 20px 30px;
+        box-sizing: border-box;
+        background-color: #fff;
+        height: 116px;
+        border-radius: 20px;
+        margin-top: 20px;
+        text{
+            flex:1;
+            font-size: $font_size;
+            font-weight: 700;
+        }
+        .order_status{
+            background-color: #F0F0F0;
+            width: 148px;
+            height: 55px;
+            color: $color_font_three;
+            text-align: center;
+            line-height: 55px;
+            font-size: $font_size_medium;
+            border-radius: 30px;
+            &:nth-last-child(1) {
+                margin-left: 20px;
+            }
+        }
+        .order_status_selected{
+            color: $color_main;
+            border: 1px solid $color_main;
+        }
+    }

src/pages/editOrder/components/shipmentMode/index.tsx

@@ -0,0 +1,32 @@
+import { Text, View } from "@tarojs/components"
+import styles  from './index.module.scss'
+import classnames from "classnames";
+import { memo, useEffect, useRef, useState } from "react";
+
+type Param = {
+    onSelect?:(val:number) => void
+    defaultValue?: 0|1|2
+}
+export default memo(({onSelect, defaultValue = 0}: Param) => {
+    //收货方法 0:没选择, 1:自提，2：物流
+    const shipmentMode = useRef([
+        {value:1, label:'上门自提', selected:false},
+        {value:2, label:'物流', selected:false}
+    ]) 
+    const [selectValue, setSelectValue] = useState<number>()
+    useEffect(() => {
+        setSelectValue(defaultValue)
+    }, [defaultValue])
+    const selectShipmentMode = (value) => {
+        setSelectValue(() => value)
+        onSelect?.(value)
+    }
+    return (
+        <View className={styles.order_title}>
+          <Text>收货方式</Text>
+          {shipmentMode.current.map(item => {
+              return <View className={classnames(styles.order_status, (selectValue == item.value)&&styles.order_status_selected)} onClick={() => selectShipmentMode(item.value)}>{item.label}</View>
+          })}              
+      </View>
+    )
+})

src/pages/editOrder/index.config.ts

@@ -0,0 +1,5 @@
+export default {
+  navigationBarTitleText: '修改地址',
+  enablePullDownRefresh: true,
+  backgroundTextStyle: 'dark'
+}

src/pages/editOrder/index.module.scss

@@ -0,0 +1,120 @@
+.order_edit_main{
+    min-height: 100%;
+    background-color:$color_bg_one;
+    padding-top: 20px;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    .title_msg{
+        display: flex;
+        align-items: center;
+        padding: 20px;
+        background-color: #fff;
+        margin: 0 20px;
+        border-radius: 20px;
+        .miconfont{
+            font-size: 50px;
+            color: $color_main;
+        }
+        .title_msg_con{
+            font-size: 23px;
+            display: flex;
+            flex-direction: column;
+            margin-left: 30px;
+            text{
+                &:nth-child(1) {
+                    color: $color_main;
+                }
+                &:nth-child(2) {
+                    color: $color_font_three;
+                }
+            }
+        }
+    }
+
+    .shipmentMode_con{
+        margin: 0 20px;
+    }
+    .old_address{
+        display: flex;
+        flex-direction: column;
+        padding: 30px 20px 60px 20px;
+        box-sizing: border-box;
+        .old_address_text{
+            font-weight: 700;
+            &:nth-of-type(1) {
+                padding-bottom: 30px;
+                font-size: $font_size_big;
+            }
+            &:nth-of-type(2) {
+                padding-bottom: 30px;
+                font-size: $font_size;
+            }
+        }
+        .userInfo{
+            display: flex;
+            font-size: $font_size;
+            color: $color_font_three;
+            align-items: center;
+            .userInfo_text{
+                font-size: $font_size;
+                &:nth-child(2) {
+                   padding-left: 20px;
+                }
+            }
+            
+        }
+    }
+    .select_address_con{
+        flex:1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: #fff;
+        border-radius: 30px 30px 0px 0px;
+        position: relative;
+        .title{
+            font-size: $font_size;
+            font-weight: 700;
+            margin-top: 30px;
+        }
+        .address_list{
+            flex:1;
+            height: 0;
+            margin-top: 50px;
+        }
+        .submitBtn{
+            display: flex;
+            font-size: $font_size_big ;
+            justify-content: center;
+            height: 82px;
+            margin-bottom: 20px;
+            position: absolute;
+            bottom:0;
+            .addressBtn{
+                flex:1;
+                text-align: center;
+                height: 100%;
+                border: 3px solid #cde5ff;
+                width: 348px;
+                justify-content: center;
+                align-items: center;
+            }
+            .addAddress{
+                border-right: 0;
+                display: flex;
+                border-radius: 50px  0px 0px 50px;
+                color: $color_main;
+                background-color: #fff;
+            }
+            .submitUpdate{
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                border-radius: 0px  50px 50px 0px;
+                background-color: $color_main;
+                color: #fff;
+            }
+        }
+    }
+}

src/pages/editOrder/index.tsx

@@ -0,0 +1,93 @@
+import { Text, View } from "@tarojs/components"
+import styles  from './index.module.scss'
+import classnames from "classnames";
+import { useCallback, useMemo, useRef, useState } from "react";
+import ShipmentMode from "./components/shipmentMode";
+import AddressList from "@/components/AddressList";
+import { alert, goLink } from "@/common/common";
+import { getParam } from "@/common/system";
+import {EditSaleOrderAddressApi, EditSaleOrderShipmentModeApi} from "@/api/order";
+import Taro from "@tarojs/taro";
+
+export default () => {
+
+  //获取临时传递的数据
+  const params = getParam()
+  const [paramsData, setParamsData] = useState<any>(params)
+
+  //提交的数据
+  const [submitData, setSubmitData] = useState({
+    address_id:0,
+    id:params.id,
+    shipment_mode: params.shipment_mode
+  })
+  
+
+  //格式化地址
+  const address = useMemo(() => {
+    return paramsData.province_name+' '+paramsData.city_name+' '+paramsData.district_name+' '+paramsData.address_detail
+  }, [paramsData])
+
+  //获取收货方法
+  const getShipmentMode = useCallback((num) => {
+    setSubmitData((val) => ({...val, shipment_mode:num}))
+  }, [])
+
+  //获取地址
+  const getSelectAddress = useCallback((e) => {
+    setSubmitData((val) => ({...val, address_id:e.id}))
+  }, [])
+
+  //修改请求
+  const {fetchData: addressFetchData} = EditSaleOrderAddressApi()
+  const {fetchData: shipmentFetchData} = EditSaleOrderShipmentModeApi()
+  const editData = async () => {
+    if(submitData.address_id) {
+      let res = await addressFetchData(submitData)
+      if(!res.success) {
+        alert.error(res.msg)
+        return false
+      }
+    }
+    let res = await shipmentFetchData(submitData)
+    if(!res.success) {
+      alert.error(res.msg)
+      return false
+    }
+    Taro.navigateBack()
+  }
+
+  return (
+    <View className={styles.order_edit_main}>
+      <View className={classnames(styles.title_msg)}>
+        <Text className={classnames(styles.miconfont, 'iconfont icon-zhuyi')}></Text>
+        <View className={styles.title_msg_con}>
+          <Text>修改收货地址可能会影响发货时效</Text>
+          <Text>若商品已发货，则不能修改</Text>
+        </View>
+      </View>
+      <View className={styles.shipmentMode_con}>
+        <ShipmentMode onSelect={getShipmentMode} defaultValue={paramsData.shipment_mode}/>
+      </View>
+      <View className={styles.old_address}>
+        <Text className={styles.old_address_text}>原地址:</Text>
+        <Text className={styles.old_address_text}>{address}</Text>
+        <View className={styles.userInfo}>
+          <Text className={styles.userInfo_text}>{paramsData.name}</Text>
+          <Text className={styles.userInfo_text}>{paramsData.phone}</Text>
+        </View>
+      </View>
+      <View className={styles.select_address_con}>
+        <View className={styles.title}>重新选择收货地址</View>
+        <View className={styles.address_list}>
+          <AddressList focusBorderEnabled={true} addButtonEnabled={false} onSelect={getSelectAddress}/>
+        </View>
+        <View className={styles.submitBtn}>
+          <View onClick={() => goLink('/pages/addressAdd/index', {type:'add'})} className={classnames(styles.addAddress, styles.addressBtn)}>添加新地址</View>
+          <View className={classnames(styles.submitUpdate, styles.addressBtn)} onClick={() => editData()}>提交修改</View>
+        </View>
+      </View>
+      <View className="common_safe_area_y"></View>
+    </View>
+  )
+}

src/pages/index/context.ts

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const ParamsContext = React.createContext<any>(null)

src/pages/index/index.config.ts

@@ -1,5 +1,3 @@
 export default {
-  navigationBarTitleText: '电子商城',
-  enablePullDownRefresh: true,
-  backgroundTextStyle: 'dark'
+  navigationBarTitleText: '首页',
 }

src/pages/index/index.tsx

@@ -7,17 +7,16 @@ import MoveBtn from '@/components/moveBtn'
 import ShopCart from '@/components/shopCart'
 import { goLink } from '@/common/common'
 import styles  from './index.module.scss'
-import { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import Taro, { Events, useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
-import useManualPullDownRefresh from '@/use/useManualPullDownRefresh'
-
 import {GetProductKindListApi, GetProductListApi} from '@/api/material'
 import useLogin from '@/use/useLogin'
+import LoadingCard from '@/components/loadingCard'
+import { dataLoadingStatus } from '@/common/util'
 
 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 () => {
@@ -56,9 +55,10 @@ export default () => {
       getProductList()
   }, [filtrate])
 
+
   //点击面料类型
   const getProductKindId = async (e) => {
-    pageNum.current = 1
+    pageNum.current.page = 1
     setFiltrate({...filtrate, size:5, product_kind_id:e.id})
     setHasMore(true)
   }
@@ -68,8 +68,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,33 +80,36 @@ 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)
   }
 
 
-
-  
   //页面下拉刷新
   // const res = useManualPullDownRefresh()
   usePullDownRefresh(() => {
     console.log('123')
   })
 
+  //数据加载状态
+  const statusMore = useMemo(() => {
+    return dataLoadingStatus({list:productData.list, total: productData.total, status: productState.loading})
+  }, [productData])
+  
   return (
     <MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
       <View className={styles.main}>
         <Banner/>
         <View className={styles.search}>
           <View className={styles.search_collect}>我的收藏</View>
-          <View className={styles.search_input}>
-            <Search disabled={true} style={{width: '263rpx'}} clickOnSearch={() => goLink('/pages/searchList/search')}/>
+          <View className={styles.search_input} onClick={() => goLink('/pages/searchList/search')}>
+            <Search disabled={true} style={{width: '263rpx'}} />
           </View>
         </View>
         <View className={styles.products}>
-          <SideBar list={kindData.list} height="100%" defaultValue={kindData.defaultId} hasMore={hasMore} selfOnScrolltolower={() =>  getScrolltolower()} sideBarOnClick={(e) => getProductKindId(e)} heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getRefresherRefresh()}>
+            <SideBar list={kindData.list} height="100%" defaultValue={kindData.defaultId} hasMore={hasMore} statusMore={statusMore} selfOnScrolltolower={() =>  getScrolltolower()} sideBarOnClick={(e) => getProductKindId(e)} heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getRefresherRefresh()}>
                 <Product productList={productData.list}/>
             </SideBar>
         </View>
@@ -116,3 +119,4 @@ export default () => {
     </MoveBtn>
   )
 }
+

src/pages/order/comfirm.config.ts

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

src/pages/order/comfirm.module.scss

@@ -0,0 +1,130 @@
+.order_main{
+    min-height: 100%;
+    background-color:$color_bg_one;
+    padding: 20px;
+    padding-bottom: 190px;
+    box-sizing: border-box;
+
+    .order_title{
+        display: flex;
+        align-items: center;
+        padding: 20px 30px;
+        box-sizing: border-box;
+        background-color: #fff;
+        height: 116px;
+        border-radius: 20px;
+        margin-top: 20px;
+        text{
+            flex:1;
+            font-size: $font_size;
+            font-weight: 700;
+        }
+        .order_status{
+            background-color: #F0F0F0;
+            width: 148px;
+            height: 55px;
+            color: $color_font_three;
+            text-align: center;
+            line-height: 55px;
+            font-size: $font_size_medium;
+            border-radius: 30px;
+            &:nth-last-child(1) {
+                margin-left: 20px;
+            }
+        }
+        .order_status_selected{
+            color: $color_main;
+            border: 1px solid $color_main;
+        }
+    }
+    .order_desc{
+        display: flex;
+        align-items: center;
+        background-color: #fff;
+        padding: 20px;
+        min-height: 116px;
+        border-radius: 20px;
+        margin-top: 20px;
+        box-sizing: border-box;
+        .order_desc_con{
+            width: 150px;
+            font-size: $font_size;
+            font-weight: 700;
+        }
+        .order_desc_text, .order_desc_text_hint{
+            font-size: $font_size_medium;
+            color: $color_font_two;
+            margin-right: 10px;
+            flex:1;
+        }
+        .order_desc_text_hint{
+            text-align: right;
+        }
+        .miconfont{
+            font-size: 20px;
+            color: $color_font_two;
+        }
+    }
+    .submit_order{
+        display: flex;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        justify-content: space-between;
+        width: 100%;
+        height: 175px;
+        align-items: center;
+        background-color: #fff;
+        box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
+        padding: 20px 50px;
+        box-sizing: border-box;
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
+        .order_btn {
+            width: 250px;
+            height: 90px;
+            opacity: 0.6;
+            background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%);
+            border-radius: 46px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #fff;
+        }
+        .ok_order_btn {
+            opacity: 1;
+        }
+        .order_number_desc{
+            font-size: $font_size_medium;
+            color: $color_font_two;
+        }
+    }
+    .order_info{
+        background-color: #fff;
+        margin-top: 20px;
+        border-radius: 20px;
+        padding: 20px;
+        .order_info_title{
+            font-size: $font_size;
+            font-weight: 700;
+            margin-bottom: 20px;
+            
+        }
+        .order_num{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .order_num_btn{
+                font-size: $font_size_medium;
+                padding: 5px 10px;
+                border: 2px solid #007cf7;
+                border-radius: 10px;
+                color: $color_main;
+            }
+        }
+        text{
+            font-size: $font_size;
+        }
+
+    }
+}

src/pages/order/comfirm.tsx

@@ -0,0 +1,198 @@
+import { SaleOrderPreViewApi, SaleOrderApi } from "@/api/order";
+import { formatPriceDiv } from "@/common/fotmat";
+import Popup from "@/components/popup";
+import SearchInput from "@/components/searchInput";
+import { Text, Textarea, View } from "@tarojs/components"
+import Taro, { useDidShow, useRouter } from "@tarojs/taro";
+import classnames from "classnames";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import AddressInfo,{AddressInfoParam} from "./components/addressInfo";
+import EstimatedAmount from "./components/estimatedAmount";
+import KindList from "./components/kindList";
+import OrderState from "./components/orderState";
+import Remark from "./components/remark";
+import styles  from './comfirm.module.scss'
+import { getParam } from "@/common/system";
+import useLogin from "@/use/useLogin";
+import { alert, goLink } from "@/common/common";
+import ShipmentMode from "../editOrder/components/shipmentMode";
+import SubmitOrderBtn from "./components/submitOrderBtn";
+ 
+ export default () => {
+    const {checkLogin} = useLogin()
+    
+    const [showDesc, setShowDesc] = useState(false)
+    //下单信息
+    type OrderParams = {address_id?: number, remark?: string, sale_mode?: number, shipment_mode?: number, list?: any[]}
+    const [submitOrderData, setSubmitOrderData] = useState<OrderParams>()
+
+    //获取购物车传过来的id
+    type orderPreParam = {shopping_cart_product_color_list:{shopping_cart_product_color_id:number}[], sale_mode:number}
+    const param = getParam()
+    const idsAndSaleModel = useRef<orderPreParam>({shopping_cart_product_color_list:[], sale_mode:0})
+    useDidShow(async () => {
+        await checkLogin()
+        idsAndSaleModel.current.sale_mode =  Number(param?.sale_mode)
+        param?.ids?.split('-')?.map(item => {
+            return idsAndSaleModel.current.shopping_cart_product_color_list?.push({
+                shopping_cart_product_color_id: Number(item)
+            })
+        })
+        getSaleOrderPreView()
+        setSubmitOrderData((val) => ({...val, sale_mode:param?.sale_mode}))
+    })
+
+    //获取销售预览订单
+    type preViewOrderParam = {estimate_amount:number, estimate_weight:number, product_color_list:any[], sale_mode:number, sale_mode_name:string, default_address:AddressInfoParam}
+    const [preViewOrder, setPreViewOrder] = useState<preViewOrderParam>() //获取到的原始数据
+    const {fetchData} = SaleOrderPreViewApi()
+    const getSaleOrderPreView = async () => {
+        if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) {
+            let res = await fetchData(idsAndSaleModel.current)
+            setPreViewOrder(res.data)
+        }       
+    }
+
+    //监听获取到的数据
+    useEffect(() => {
+        if(preViewOrder) {
+            formatData()
+            //当有默认地址时设置默认地址id
+            preViewOrder.default_address&&setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id}))
+        }
+    }, [preViewOrder])
+
+    //格式化数据格式
+    const [formatPreViewOrder, setFormatPreViewOrder] = useState<any>() //格式化后的数据
+    const formatData = () => {  
+        if(preViewOrder?.product_color_list&&preViewOrder?.product_color_list.length > 0) {
+            let dataList = {}
+            let num_count = 0 //总数量
+            let orderList:{shopping_cart_product_color_id:number}[] = [] //提交订单时的格式
+            preViewOrder?.product_color_list.map(item => {
+                dataList[item.product_code] =  dataList[item.product_code]||{}
+                dataList[item.product_code].product_code = item.product_code
+                dataList[item.product_code].product_name = item.product_name
+                dataList[item.product_code].sale_mode_name = preViewOrder.sale_mode_name
+                dataList[item.product_code].color_list =  dataList[item.product_code]?.color_list||[]
+                dataList[item.product_code].color_list.push(item)
+                //大货
+                if (preViewOrder.sale_mode == 0) num_count += item.roll
+                //剪板或散件
+                if (preViewOrder.sale_mode == 1 || preViewOrder.sale_mode == 2) num_count += item.length
+                orderList.push({shopping_cart_product_color_id:item.id})
+            })
+            if (preViewOrder.sale_mode == 1 || preViewOrder.sale_mode == 2) num_count = Number(num_count / 100);
+            setFormatPreViewOrder({
+                estimate_amount: preViewOrder.estimate_amount, //预估金额
+                estimate_weight: preViewOrder.estimate_weight,
+                sale_mode: preViewOrder.sale_mode,
+                sale_mode_name: preViewOrder.sale_mode_name, 
+                colo_count: preViewOrder.product_color_list.length, //颜色数量
+                num_count: num_count, //总数量
+                unit: preViewOrder.sale_mode == 0?'条':'m', //单位
+                list: Object.values(dataList)
+            })
+            setSubmitOrderData({...submitOrderData, list: orderList})
+        }
+    }
+    const formatPreViewOrderMemo = useMemo(() => {
+        console.log('formatPreViewOrder::',formatPreViewOrder)
+        return formatPreViewOrder
+    }, [formatPreViewOrder])
+
+    //格式化初始地址
+    const defaultAddress = useMemo(() => {
+        const address = preViewOrder?.default_address
+        if(address) {
+            return  {
+                province_name: address.province_name,
+                city_name: address.city_name,
+                district_name: address.district_name,
+                address_detail: address.address_detail,
+                id: address.id,
+                name: address.name,
+                phone: address.phone
+            }
+        }
+        return null
+    }, [preViewOrder])
+
+    //获取地址
+    const getAddress = (e) => {
+        setSubmitOrderData((val) => ({...val, address_id:e.id}))
+    }
+
+    const selectShipmentMode = useCallback((value) => {
+        setSubmitOrderData((val) => ({...val, shipment_mode:value}))
+    }, [])
+
+    //获取备注
+    const getRemark = useCallback((e) => {
+        setSubmitOrderData((val) => ({...val, remark:e}))
+        setShowDesc(() => false)
+    }, [])
+
+    //提交按钮是否可用
+    const btnStatus = useMemo(() => {
+        if(  submitOrderData?.list?.length == 0 || !submitOrderData?.shipment_mode || (submitOrderData?.shipment_mode == 2 && !submitOrderData?.address_id)) {
+            return false
+        } else {
+            return true
+        }
+    }, [submitOrderData])
+
+    //提交订单
+    const {fetchData: saleOrderFetchData} = SaleOrderApi()
+    const submitOrderEven =  () => {
+        if(!submitOrderData?.address_id) {
+            alert.error('请选择地址')
+            return false
+        }
+        if(!submitOrderData?.shipment_mode) {
+            alert.error('请选择收货方式')
+            return false
+        }
+        Taro.showModal({
+            title: '确定提交？',
+            success: async function (res) {
+              if (res.confirm) {
+                const res = await saleOrderFetchData(submitOrderData)
+                if(res.success) {
+                    goLink('/pages/order/index',{id: res.data.id})
+                } else {
+                    alert.none(res.msg)
+                }
+              } else if (res.cancel) {
+                console.log('用户点击取消')
+              }
+            }
+        })
+    }
+    return (
+        <View className={styles.order_main}>
+            <ShipmentMode onSelect={selectShipmentMode}/>
+            <AddressInfo onSelect={(e) => getAddress(e)} defaultValue={defaultAddress}/>
+            <KindList value={formatPreViewOrderMemo}/>
+            <View className={styles.order_desc} onClick={() => setShowDesc(true)}>
+                <View className={styles.order_desc_con}>订单备注</View>
+                {
+                    submitOrderData?.remark&&<View className={styles.order_desc_text}>{submitOrderData?.remark}</View>||
+                    <View className={styles.order_desc_text_hint}>填写备注</View>
+                }
+                <View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
+            </View>
+            <View className={styles.submit_order}>
+                <View className={styles.submit_order_number}>
+                    <SubmitOrderBtn style={{color:'#007AFF'}} number={formatPriceDiv(formatPreViewOrder?.estimate_amount)}/>    
+                    <View className={styles.order_number_desc}>{`${formatPreViewOrder?.list.length}种面料，${formatPreViewOrder?.colo_count}种颜色，共${formatPreViewOrder?.num_count + formatPreViewOrder?.unit}`}</View>
+                </View>
+                <View className={classnames(styles.order_btn, btnStatus&&styles.ok_order_btn)} onClick={() => submitOrderEven()}>提交订单</View>    
+            </View>        
+            <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
+                <Remark onSave={(e) => getRemark(e)}/>
+            </Popup>
+            <View className="common_safe_area_y"></View>
+        </View>
+    )
+ }

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

@@ -8,28 +8,45 @@
     box-sizing: border-box;
     margin-top: 20px;
     .order_address_icon{
-        font-size: 60px;
+        font-size: 76px;
+        color: $color_main;
     }
     .order_address_text_con{
         flex:1;
         padding: 0 30px;
         box-sizing: border-box;
         .order_address_text_title{
-            font-size: $font_size;
-            font-weight: 700;
+            font-size: $font_size_medium;
+            margin-top: 10px;
             @include common_ellipsis;
         }
         .order_address_text_name{
-            margin-top: 20px;
-            color: $color_font_three;
-            font-size: $font_size_medium;
+
+            align-items: center;
             text{
                 &:nth-child(1) {
+                    color: #000;
+                    font-weight: 700;
+                    font-size: $color_font_one;
                     margin-right: 40px;
                 }
+                &:nth-child(2) {
+                    color: $color_font_one;
+                    font-size: $font_size_medium;
                 }
             }
         }
+    }
+    .updateBtn{
+        font-size: $font_size_medium;
+        color: $color_font_three;
+        width: 96px;
+        height: 52px;
+        border: 2px solid #dddddd;
+        border-radius: 28px;
+        text-align: center;
+        line-height: 52px;
+    }
     .order_address_text_no{
         flex: 1;
         font-size: $font_size;

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

@@ -2,31 +2,75 @@ import AddressList from "@/components/AddressList";
 import Popup from "@/components/popup";
 import { Text, View } from "@tarojs/components"
 import classnames from "classnames";
-import { useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import styles  from './index.module.scss'
 
-export default () => {
+export type AddressInfoParam = {
+    province_name: string,
+    city_name: string,
+    district_name: string,
+    address_detail: string,
+    id?: number,
+    name: string,
+    phone: string
+}
+type Param =  {
+    onSelect?: (val:any) => void, //选择
+    defaultValue?: AddressInfoParam|null //默认值
+    disabled?: false|true //true禁用后只用于展示
+}
+
+export default memo(({onSelect, defaultValue = null, disabled = false}: Param) => {
     const [showAddressList, setShowAddressList] = useState(false)
+
+    useEffect(() => {
+        setUserInfo(() => defaultValue)
+    }, [defaultValue])
+
+    //选择地址
+    const [userInfo, setUserInfo] = useState<any>()
+    const getAddress = useCallback((val) => {
+        setShowAddressList(() => false)
+        setUserInfo(() => val)
+        onSelect?.(val)
+    }, [])
+
+    //地址格式
+    const formatAddress = useMemo(() => {
+        if(userInfo) 
+            return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail
+    }, [userInfo])
+
+    const changeShow = () => {
+        if(!disabled)
+            setShowAddressList(() => true)
+    }
     return (
         <View>
-            <View className={styles.order_address} onClick={() => setShowAddressList(true)}>
-                <View className={classnames(styles.order_address_icon, 'iconfont icon-shaixuan')}></View>
-                {/* <View className={styles.order_address_text_no}>请选择收货地址及信息</View> */}
+            <View className={styles.order_address} onClick={() => changeShow()}>
+                <View className={classnames(styles.order_address_icon, 'iconfont icon-daohang')}></View>
+                {!userInfo&&
+                    <>
+                        <View className={styles.order_address_text_no}>请选择收货地址及信息</View>
+                        <View className={classnames(styles.order_address_more_icon, 'iconfont icon-a-moreback')}></View>
+                    </>
+                ||<>
                     <View className={styles.order_address_text_con}>
-                    <View className={styles.order_address_text_title}>**省**市**区**街道****仓库**省**市**区**街道****仓库</View>
                         <View className={styles.order_address_text_name}>
-                        <Text>陈先生</Text>
-                        <Text>1818877790</Text>
+                            <Text>{userInfo?.name}</Text>
+                            <Text>{userInfo?.phone}</Text>
                         </View>
+                        <View className={styles.order_address_text_title}>{formatAddress}</View>
                     </View>
-                <View className={classnames(styles.order_address_more_icon, 'iconfont icon-jiantou')}></View>
+                    <View className={styles.updateBtn}>修改</View>
+                </>}
             </View>
-            <Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
+            {!disabled&&<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
                 <View className={styles.order_address_list}>
-                    <View className={styles.order_address_title}>选择收货地址</View>
-                    <AddressList onSelect={(item, index) => console.log(index, item)}/>
+                    <View className={styles.order_address_title}>请选择收货地址</View>
+                    <AddressList onSelect={(item) => getAddress(item)}/>
                 </View>
-            </Popup>
+            </Popup>}
         </View>
     )
-}
+})

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

@@ -1,23 +1,70 @@
 .order_price{
-    font-weight: 700;
     display: flex;
     align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    &:nth-last-child(n+2) {
+        margin-bottom: 30px;
+    }
     .order_price_text{  
         font-size: $font_size_medium;
-        margin-right: 10px;
+        // margin-right: 10px;
+        display: flex;
+        .iconfont_msg{
+            position: relative;
+        }
+        .miconfont{
+            font-size: 26px;
+            font-weight: normal;
+            margin-left: 5px;
+        }
+        .message{
+            position: absolute;
+            top: -50px;
+            background: #A8B3BD;
+            z-index: 9;
+            min-height: 50px;
+            border-radius: 10px;
+            padding: 10px;
+            box-sizing: border-box;
+            &::before{
+                z-index: 1;
+                position: absolute;
+                bottom: -7px;
+                left: 10px;
+                width: 15px;
+                height: 15px;
+                content: " ";
+                transform: rotate(45deg);
+                background: #A8B3BD;
+                box-sizing: border-box;
+            }
+        }
+    }
+    .emphasis{
+        font-weight: 700;
     }
     .order_price_num{
+        color: $color_main;
+        font-weight: 700;
         text{
             &:nth-child(1) {
                 font-size: $font_size_min;
             }
             &:nth-child(2) {
-                font-size: $font_size_big;
+                font-size: 26px;
             }
             &:nth-child(3) {
                 font-size: $font_size_medium;
             }
         }
     }
+    .emphasis_num{
+        text{
+            &:nth-child(2) {
+                font-size: $font_size_big;
+            }
+        }
+    }
     
 }

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

@@ -1,12 +1,15 @@
 import { Text, View } from "@tarojs/components"
-import { useCallback, useEffect, useMemo } from "react"
+import { memo, useCallback, useEffect, useMemo } from "react"
 import {formatKbPrice} from '@/common/common'
+import classnames from "classnames";
 import styles  from './index.module.scss'
 type Param = {
     style?: Object,
-    number?: number
+    number?: number,
+    title?: string,
+    status?: true|false, //true 加大加深
 }
-export default ({style, number = 0}:Param) => {
+export default memo(({style, number = 0, status = true, title = ''}:Param) => {
     const priceDom = useCallback(() => {
         let res = number.toFixed(2).split('.')
         let int_num  = parseInt(res[0]) + ''
@@ -14,20 +17,25 @@ export default ({style, number = 0}:Param) => {
         return (
             <>
                 <Text>¥</Text>
-                <Text>{formatPrice(int_num)}</Text>
+                <Text>{Number(int_num).toLocaleString()}</Text>
                 <Text>.{decimals_num}</Text>
             </>
         )
     }, [number])
-    const formatPrice = useCallback((number: string) => {
-        return formatKbPrice(number)
-    }, [])
     return (
+        <>  
             <View className={styles.order_price}>
-            <Text className={styles.order_price_text}>预估金额</Text>
-            <View className={styles.order_price_num} style={style}>
+                <View className={classnames(styles.order_price_text, status&&styles.emphasis)}>
+                    <Text>{title}</Text>
+                    <View className={styles.iconfont_msg}>
+                        <Text className={classnames(styles.miconfont, 'iconfont icon-zhushi')}></Text>
+                        {/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
+                    </View>
+                </View>
+                <View className={classnames(styles.order_price_num, status&&styles.emphasis_num)} style={style}>
                     {priceDom()}
                 </View>
             </View>
+        </>
     )
-}
+})

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

@@ -1,5 +1,11 @@
+
+.orders_list_title{
+    padding: 20px 20px 10px 20px;
+    color: $color_font_two;
+    font-size: $font_size_medium;
+}
 .orders_list_con{
-    margin-top: 20px;
+    
     background-color: #fff;
     border-radius: 20px;
     padding: 20px;
@@ -67,6 +73,10 @@
                 }
             }
             .order_list_item_count{
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: flex-end;
                 .count_num{
                     color: $color_main;
                     font-size: $font_size;
@@ -86,7 +96,6 @@
             }
         }
     }
-
     .order_estimated_amount{
         display: flex;
         align-items: flex-end;

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

@@ -1,88 +1,72 @@
+import { formatHashTag, formatPriceDiv } from "@/common/fotmat"
 import { View } from "@tarojs/components"
-import { useState } from "react"
+import { memo, useCallback, useMemo } from "react"
 import EstimatedAmount from "../estimatedAmount"
 import styles  from './index.module.scss'
 
-export default () => {
-    const [price, setPrice] = useState(123000.33)
+type OrderParam = {
+    estimate_amount: number, 
+    estimate_weight: number,
+    list: any[], 
+    sale_mode: number,
+    sale_mode_name: string
+    unit: string,
+    colo_count: number,
+    num_count: number
+}
+
+
+export default memo(({value}:{value:OrderParam|null}) => {
+    //对应数量
+    const formatCount = useCallback((item) => {
+        return value?.sale_mode == 0? item.roll : Number(item.length / 100)
+    }, [value])
+    //对应单价
+    const standardPrice = useCallback(item => {
+        return formatPriceDiv(item.standard_price).toLocaleString() + '/' + (value?.sale_mode == 1?'m':'kg')
+    }, [value])
+
+    //数量格式
+    const numText = useMemo(() => {
+        if(value)
+            return `${value?.list.length}种面料，${value?.colo_count}种颜色，共${value?.num_count }${value?.unit}`
+    }, [value])
     return (
         <>
+            <View className={styles.orders_list_title}>{numText}</View>
             <View className={styles.orders_list_con}>
-                <View className={styles.order_list}>
+                {
+                    value?.list.map(item => {
+                        return <View key={item.product_code} className={styles.order_list}>
                             <View className={styles.order_list_title}>
-                        <View className={styles.tag}>大货</View>
-                        <View className={styles.title}>0770# 21S单面平纹(食毛)</View>
-                        <View className={styles.num}>共3种</View>
+                                <View className={styles.tag}>{item.sale_mode_name}</View>
+                                <View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
+                                <View className={styles.num}>共{item.color_list.length}种</View>
                             </View>
                             <View className={styles.order_list_scroll}>
-                        <View className={styles.order_list_item}>
+                                {item.color_list?.map(colorItem => {
+                                    return <View className={styles.order_list_item}>
                                         <View className={styles.order_list_item_img}></View>
                                         <View className={styles.order_list_item_con}>
                                             <View className={styles.order_list_item_des}>
-                                    <View className={styles.order_list_item_title}>1# 薄荷绿</View>
-                                    <View className={styles.order_list_item_price}>¥40/kg</View>
+                                                <View className={styles.order_list_item_title}>{colorItem.product_color_code + ' ' + colorItem.product_color_name}</View>
+                                                <View className={styles.order_list_item_price}>¥{standardPrice(colorItem)}</View>
                                             </View>
                                             <View className={styles.order_list_item_count}>
-                                    <View className={styles.count_num}>×1<text>条</text></View>
-                                    <View className={styles.count_price}><text>¥</text>1,000.5</View>
-                                </View>
-                            </View>
-                        </View>
-                        <View className={styles.order_list_item}>
-                            <View className={styles.order_list_item_img}></View>
-                            <View className={styles.order_list_item_con}>
-                                <View className={styles.order_list_item_des}>
-                                    <View className={styles.order_list_item_title}>1# 薄荷绿</View>
-                                    <View className={styles.order_list_item_price}>¥40/kg</View>
-                                </View>
-                                <View className={styles.order_list_item_count}>
-                                    <View className={styles.count_num}>×1<text>条</text></View>
-                                    <View className={styles.count_price}><text>¥</text>1,000.5</View>
-                                </View>
-                            </View>
-                        </View>
-                    </View>
-                </View>
-                <View className={styles.order_list}>
-                    <View className={styles.order_list_title}>
-                        <View className={styles.tag}>大货</View>
-                        <View className={styles.title}>0770# 21S单面平纹(食毛)</View>
-                        <View className={styles.num}>共3种</View>
-                    </View>
-                    <View className={styles.order_list_scroll}>
-                        <View className={styles.order_list_item}>
-                            <View className={styles.order_list_item_img}></View>
-                            <View className={styles.order_list_item_con}>
-                                <View className={styles.order_list_item_des}>
-                                    <View className={styles.order_list_item_title}>1# 薄荷绿</View>
-                                    <View className={styles.order_list_item_price}>¥40/kg</View>
-                                </View>
-                                <View className={styles.order_list_item_count}>
-                                    <View className={styles.count_num}>×1<text>条</text></View>
-                                    <View className={styles.count_price}><text>¥</text>1,000.5</View>
-                                </View>
-                            </View>
-                        </View>
-                        <View className={styles.order_list_item}>
-                            <View className={styles.order_list_item_img}></View>
-                            <View className={styles.order_list_item_con}>
-                                <View className={styles.order_list_item_des}>
-                                    <View className={styles.order_list_item_title}>1# 薄荷绿</View>
-                                    <View className={styles.order_list_item_price}>¥40/kg</View>
-                                </View>
-                                <View className={styles.order_list_item_count}>
-                                    <View className={styles.count_num}>×1<text>条</text></View>
-                                    <View className={styles.count_price}><text>¥</text>1,000.5</View>
+                                                <View className={styles.count_num}>×{formatCount(colorItem)}<text>{value.unit}</text></View>
+                                                <View className={styles.count_price}><text>¥</text>{formatPriceDiv(colorItem.estimate_amount).toLocaleString()}</View>
                                             </View>
                                         </View>
                                     </View>
+                                })}
                             </View>
                         </View>
+                    })
+                }
                 <View className={styles.order_estimated_amount}>
-                    <EstimatedAmount number={price}/>    
-                    <View className={styles.order_price_des}>（按照25kg/条, 预估金额）</View>
+                    <EstimatedAmount number={formatPriceDiv(value?.estimate_amount)} title="预估金额" />      
                 </View>
             </View>
         </>
     )
-}
+})

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

@@ -0,0 +1,18 @@
+.order_flow_state{
+    display: flex;
+    align-items: center;
+    padding: 0 30px;
+    height: 116px;
+    background-color: #fff;
+    border-radius: 20px;
+    .order_flow_state_text{
+        color: $color_main;
+        font-size:$font_size;
+        font-weight: 700;
+    }
+    .order_flow_state_desc{
+        color: $color_font_three;
+        font-size: $font_size_medium;
+        margin-left: 50px;
+    }
+}

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

@@ -0,0 +1,14 @@
+import { View } from "@tarojs/components"
+import styles  from './index.module.scss'
+
+export default ({
+    state = '',
+    desc = ''
+}) => {
+    return (
+        <View className={styles.order_flow_state}>
+            <View className={styles.order_flow_state_text}>{state}</View>
+            <View className={styles.order_flow_state_desc}>{desc}</View>
+        </View>
+    )
+}

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

@@ -1,18 +1,103 @@
 .order_flow_state{
-    display: flex;
-    align-items: center;
-    padding: 0 30px;
-    height: 116px;
     background-color: #fff;
     border-radius: 20px;
-    .order_flow_state_text{
-        color: $color_main;
-        font-size:$font_size;
+    padding: 20px;
+    box-sizing:border-box;
+    position: relative;
+    overflow: hidden;
+    .order_status_list{
+        max-height: 250px;
+        overflow: hidden;
+        transition: all 0.3s ease-in-out;
+    }
+    .order_status_list_show {
+        max-height: 1000px !important;
+    }
+    .order_status_item{
+        position: relative;
+        padding-left: 50px;
+        min-height: 120px;
+        .order_status_tail_end, .order_status_tail{
+            width: 15px;
+            height: 15px;
+            border: 2px solid $color_main;
+            background-color: #fff;
+            border-radius: 50%;
+            position:absolute;
+            left: 0;
+            top: 10px;
+            z-index: 10;
+        }
+        .order_status_tail_end{
+            background-color: $color_main;
+        }
+        .order_status_line{
+            border-left: 2px solid $color_main;
+            height: 100%;
+            top: 10px;
+            left: 8px;
+            position: absolute;
+            z-index: 1;
+        }
+        .order_status_content{
+            display: flex;
+            align-items: center;
+            .order_status_title{
+                color: $color_font_two;
+                font-size: $font_size_big;
                 font-weight: 700;
             }
-    .order_flow_state_desc{
-        color: $color_font_three;
+            .order_status_time{
+                color: $color_font_two;
                 font-size: $font_size_medium;
-        margin-left: 50px;
+                padding: 0 20px;
+            }
+            .order_status_tag{
+                font-size: $font_size_min;
+                background: #F0F0F0;
+                border-radius: 6px;
+                padding: 5px 10px;
+                color: $color_font_two;
+            }
+            .order_status_select{
+                color: $color_main;
+            }
+            .order_status_tag_select{
+                color: $color_main;
+            }
+        }
+        .order_status_des{
+            color: $color_font_two;
+            font-size: $font_size_medium;
+        }
+        .order_status_des_select{
+            color: $color_font_one;
+        }
+    }
+    .more{
+        width: 100%;
+        text-align: center;
+        font-size: $font_size_min;
+        color: $color_font_one;
+        padding-top: 20px;
+        .miconfonts{
+            display: inline-block;
+            font-size: 25px;
+            transform:rotate(90deg);
+        }
+        .open_miconfonts{
+            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

@@ -1,14 +1,46 @@
-import { View } from "@tarojs/components"
+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,
+    tag: string,
+    desc: string
+}
+export default memo(({list = []}:{list?:Param[]}) => {
+    const [showMore, setShowMore] = useState(false)
+    const changeMore = () => {
+        setShowMore(() => !showMore)
+    }
+    list = [
+        {title:'待配布', time:'2022-04-24 09:08', tag:'已接单', desc:'仓库正在为你配布...'},
+        {title:'待配布', time:'2022-04-24 09:08', tag:'已接单', desc:'仓库正在为你配布...'},
+        {title:'待接单', time:'2022-04-24 09:08', tag:'已提交', desc:''},
+    ]
 
-export default ({
-    state = '',
-    desc = ''
-}) => {
     return (
         <View className={styles.order_flow_state}>
-            <View className={styles.order_flow_state_text}>{state}</View>
-            <View className={styles.order_flow_state_desc}>{desc}</View>
+            <View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
+                {list.map((item, index) => <View className={styles.order_status_item}>
+                    {(list.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
+                    {(list.length != (index + 1))&&<View className={styles.order_status_line}></View>}
+                    <View className={styles.order_status_content}>
+                        <View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.title}</View>
+                        <View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{item.time}</View>
+                        <View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View>
+                    </View>
+                    <Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
+                </View>)}
+            </View>
+            {(list.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
+                <Text>{showMore&&'收起物流详情'||'点击查看更多物流详情'}</Text>
+                <Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
+            </View>}
+            <View className={styles.image_tag}>
+                <Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>
+            </View>
         </View>
     )
-}
+})

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

@@ -0,0 +1,33 @@
+
+    .order_title{
+        display: flex;
+        align-items: center;
+        padding: 20px 30px;
+        box-sizing: border-box;
+        background-color: #fff;
+        height: 116px;
+        border-radius: 20px;
+        margin-top: 20px;
+        text{
+            flex:1;
+            font-size: $font_size;
+            font-weight: 700;
+        }
+        .order_status{
+            background-color: #F0F0F0;
+            width: 148px;
+            height: 55px;
+            color: $color_font_three;
+            text-align: center;
+            line-height: 55px;
+            font-size: $font_size_medium;
+            border-radius: 30px;
+            &:nth-last-child(1) {
+                margin-left: 20px;
+            }
+        }
+        .order_status_selected{
+            color: $color_main;
+            border: 1px solid $color_main;
+        }
+    }

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

@@ -0,0 +1,28 @@
+import { Text, View } from "@tarojs/components"
+import styles  from './index.module.scss'
+import classnames from "classnames";
+import { memo, useRef, useState } from "react";
+
+type Param = {
+    onSelect?:(val:number) => void
+}
+export default memo(({onSelect}: Param) => {
+    //收货方法 1:自提，2：物流
+    const shipmentMode = useRef([
+        {value:1, label:'上门自提', selected:false},
+        {value:2, label:'物流', selected:false}
+    ]) 
+    const [selectValue, setSelectValue] = useState()
+    const selectShipmentMode = (value) => {
+        setSelectValue(() => value)
+        onSelect?.(value)
+    }
+    return (
+        <View className={styles.order_title}>
+          <Text>收货方式</Text>
+          {shipmentMode.current.map(item => {
+              return <View className={classnames(styles.order_status, (selectValue == item.value)&&styles.order_status_selected)} onClick={() => selectShipmentMode(item.value)}>{item.label}</View>
+          })}              
+      </View>
+    )
+})

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

@@ -0,0 +1,69 @@
+.order_price{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    &:nth-last-child(n+2) {
+        margin-bottom: 30px;
+    }
+    .order_price_text{  
+        font-size: $font_size_medium;
+        // margin-right: 10px;
+        display: flex;
+        .iconfont_msg{
+            position: relative;
+        }
+        .miconfont{
+            font-size: 30px;
+            font-weight: normal;
+        }
+        .message{
+            position: absolute;
+            top: -50px;
+            background: #A8B3BD;
+            z-index: 9;
+            min-height: 50px;
+            border-radius: 10px;
+            padding: 10px;
+            box-sizing: border-box;
+            &::before{
+                z-index: 1;
+                position: absolute;
+                bottom: -7px;
+                left: 10px;
+                width: 15px;
+                height: 15px;
+                content: " ";
+                transform: rotate(45deg);
+                background: #A8B3BD;
+                box-sizing: border-box;
+            }
+        }
+    }
+    .emphasis{
+        font-weight: 700;
+    }
+    .order_price_num{
+        color: $color_main;
+        font-weight: 700;
+        text{
+            &:nth-child(1) {
+                font-size: $font_size_min;
+            }
+            &:nth-child(2) {
+                font-size: 26px;
+            }
+            &:nth-child(3) {
+                font-size: $font_size_medium;
+            }
+        }
+    }
+    .emphasis_num{
+        text{
+            &:nth-child(2) {
+                font-size: $font_size_big;
+            }
+        }
+    }
+    
+}

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

@@ -0,0 +1,39 @@
+import { Text, View } from "@tarojs/components"
+import { memo, useCallback, useEffect, useMemo } from "react"
+import {formatKbPrice} from '@/common/common'
+import classnames from "classnames";
+import styles  from './index.module.scss'
+type Param = {
+    style?: Object,
+    number?: number
+}
+export default memo(({style, number = 0}:Param) => {
+    const priceDom = useCallback(() => {
+        let res = number.toFixed(2).split('.')
+        let int_num  = parseInt(res[0]) + ''
+        let decimals_num = res[1]
+        return (
+            <>
+                <Text>¥</Text>
+                <Text>{Number(int_num).toLocaleString()}</Text>
+                <Text>.{decimals_num}</Text>
+            </>
+        )
+    }, [number])
+    return (
+        <>
+            <View className={styles.order_price}>
+                <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>
+                        {/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
+                    </View>
+                </View>
+                <View className={classnames(styles.order_price_num, styles.emphasis_num)} style={style}>
+                    {priceDom()}
+                </View>
+            </View>
+        </>
+    )
+})

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

@@ -0,0 +1,39 @@
+
+.weight_memo{
+    background-color: #fff;
+    border-radius: 20px;
+    padding: 0 20px;
+    .weight_memo_item{
+        display: flex;
+        justify-content: space-between;
+        height: 130px;
+        &:nth-child(1) {
+            border-bottom: 1px solid #f3f3f3;
+        }
+        .title, .desc{
+            display: flex;
+            align-items: center;
+        }
+        .title {
+            font-size: $font_size;
+            font-weight: 700;
+        }
+        .desc{
+            color: $color_font_two;
+            font-size: $font_size_medium;
+        }
+        .miconfont_check, .miconfont_custom{
+            font-size: 37px;
+            color: $color_main;
+            font-weight: normal;
+            padding-right: 10px;
+        }
+        .miconfont_custom{
+            color:#FFC300;
+        }
+        .miconfont_more{
+            font-size: 30px;
+            padding-left: 10px;
+        }
+    }
+}

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

@@ -0,0 +1,36 @@
+import Popup from "@/components/popup"
+import { Text, Textarea, View } from "@tarojs/components"
+import { memo, useCallback, useState } from "react"
+import styles  from './index.module.scss'
+import classnames from "classnames";
+
+type Param = {
+    onCheck?: () => void
+    onCustom?: () => void
+}
+export default memo(({onCheck, onCustom}:Param) => {
+    return (
+        <View className={styles.weight_memo}>
+            <View className={styles.weight_memo_item} onClick={() => onCheck?.()}>
+                <View className={styles.title}>
+                    <Text className={classnames("iconfont icon-a-yuanmadanmadanguanli", styles.miconfont_check)}></Text>
+                    <Text>陆盈纺织</Text>
+                </View>
+                <View className={styles.desc}>
+                    <Text>查看原码单</Text>
+                    <Text className={classnames("iconfont icon-a-moreback", styles.miconfont_more)}></Text>
+                </View>
+            </View>
+            <View className={styles.weight_memo_item} onClick={() => onCustom?.()}>
+                <View className={styles.title}>
+                    <Text className={classnames("iconfont icon-a-yuanmadanmadanguanli", styles.miconfont_custom)}></Text>
+                    <Text>我的码单</Text>
+                </View>
+                <View className={styles.desc}>
+                    <Text>自定义</Text>
+                    <Text className={classnames("iconfont icon-a-moreback", styles.miconfont_more)}></Text>
+                </View>
+            </View>
+        </View>
+    )
+})

src/pages/order/index.config.ts

@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: '确认订单'
+  navigationBarTitleText: '订单详情'
 }

src/pages/order/index.module.scss

@@ -37,19 +37,24 @@
         display: flex;
         align-items: center;
         background-color: #fff;
-        padding: 0 20px;
-        height: 116px;
+        padding: 20px;
+        min-height: 116px;
         border-radius: 20px;
         margin-top: 20px;
+        box-sizing: border-box;
         .order_desc_con{
-            flex:1;
+            width: 150px;
             font-size: $font_size;
             font-weight: 700;
         }
-        .order_desc_text{
+        .order_desc_text, .order_desc_text_hint{
             font-size: $font_size_medium;
             color: $color_font_two;
             margin-right: 10px;
+            flex:1;
+        }
+        .order_desc_text_hint{
+            text-align: right;
         }
         .miconfont{
             font-size: 20px;
@@ -61,26 +66,28 @@
         position: fixed;
         bottom: 0;
         left: 0;
-        justify-content: space-between;
+        justify-content: flex-end;
         width: 100%;
         height: 175px;
         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;
-            height: 90px;
-            opacity: 0.6;
-            background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%);
+            width: 152px;
+            height: 72px;
+            border: 2px solid #dddddd;
             border-radius: 46px;
             display: flex;
             justify-content: center;
             align-items: center;
-            color: #fff;
+            color: $color_font_three;
+            &:nth-child(n+2) {
+                margin-left: 34px;
+            }
         }
         .order_number_desc{
             font-size: $font_size_medium;
@@ -115,4 +122,8 @@
         }
 
     }
+    .weight_memo_con{
+        margin-bottom: 20px;
+    }
+
 }

src/pages/order/index.tsx

@@ -1,25 +1,87 @@
-import { SaleOrderPreViewApi } from "@/api/order";
+import { GetSaleOrderDetailApi, EditSaleOrderRemarkApi } from "@/api/order";
+import { alert, goLink } from "@/common/common";
+import { formatDateTime, formatPriceDiv } from "@/common/fotmat";
+import { setParam } from "@/common/system";
 import Popup from "@/components/popup";
 import SearchInput from "@/components/searchInput";
 import { Text, Textarea, View } from "@tarojs/components"
-import Taro, { useRouter } from "@tarojs/taro";
+import Taro, { useDidShow, useRouter } from "@tarojs/taro";
 import classnames from "classnames";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import AddressInfo from "./components/addressInfo";
-import EstimatedAmount from "./components/estimatedAmount";
 import KindList from "./components/kindList";
 import OrderState from "./components/orderState";
 import Remark from "./components/remark";
+import WeightMemo from "./components/weightMemo";
 import styles  from './index.module.scss'
  
  export default () => {
-    const [price, setPrice] = useState(123000.33)
     const [showDesc, setShowDesc] = useState(false)
     
+    const router = useRouter()
+    const orderId = useRef<number>(Number(router.params.id))
+
+    useDidShow(() => {
+        getSaleOrderPreView()
+    })
+
+    //获取订单详情
+    const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
+    const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi()
+    const getSaleOrderPreView = async () => {
+        if(orderId.current) {
+            let res = await getOrderFetchData({id: orderId.current})
+            setOrderDetail(res.data)
+            setOrderRemark(res.data.remark)
+        }       
+    }
+
+    //监听获取到的数据
+    useEffect(() => {
+        if(orderDetail)
+            formatData()
+    }, [orderDetail])
+
+    //格式化数据格式
+    const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
+    const formatData = () => {  
+        if(orderDetail?.color_list&&orderDetail?.color_list.length > 0) {
+            let dataList = {}
+            let num_count = 0 //总数量
+            orderDetail?.color_list.map(item => {
+                dataList[item.product_code] =  dataList[item.product_code]||{}
+                dataList[item.product_code].product_code = item.product_code
+                dataList[item.product_code].product_name = item.product_name
+                dataList[item.product_code].sale_mode_name = orderDetail.sale_mode_name
+                dataList[item.product_code].color_list =  dataList[item.product_code]?.color_list||[]
+                dataList[item.product_code].color_list.push(item)
+                //大货
+                if (orderDetail.sale_mode == 0) num_count += item.roll
+                //剪板或散件
+                if (orderDetail.sale_mode == 1 || orderDetail.sale_mode == 2) num_count += item.length
+            })
+            if (orderDetail.sale_mode == 1 || orderDetail.sale_mode == 2) num_count = Number(num_count / 100);
+            setFormatDetailOrder({
+                estimate_amount: orderDetail.estimate_amount, //预估金额
+                estimate_weight: orderDetail.estimate_weight, 
+                sale_mode: orderDetail.sale_mode,
+                sale_mode_name: orderDetail.sale_mode_name, 
+                colo_count: orderDetail.color_list.length, //颜色数量
+                num_count: num_count, //总数量
+                unit: orderDetail.sale_mode == 0?'条':'m', //单位
+                list: Object.values(dataList)
+            })
+        }
+    }
+
+    const formatPreViewOrderMemo = useMemo(() => {
+        return formatDetailOrder
+    }, [formatDetailOrder])
+
     //复制功能
     const clipboardData = () => {
         Taro.setClipboardData({
-            data: '123123121321',
+            data: orderDetail?.order_no||'',
             success: function (res) {
                 Taro.showToast({
                     icon: 'none',
@@ -28,88 +90,92 @@ import styles  from './index.module.scss'
             }
         })
     }
-    //获取购物车传过来的id
-    type orderPreParam = {shopping_cart_product_color_list:{shopping_cart_product_color_id:number}[], sale_mode:number}
-    const router = useRouter()
-    const idsAndSaleModel = useRef<orderPreParam>({shopping_cart_product_color_list:[], sale_mode:0})
-    useEffect(() => {
-        idsAndSaleModel.current.sale_mode =  Number(router.params.sale_mode)
-        router.params.ids?.split('-')?.map(item => {
-            return idsAndSaleModel.current.shopping_cart_product_color_list?.push({
-                shopping_cart_product_color_id: Number(item)
-            })
-        })
-        getSaleOrderPreView()
+
+    //格式化初始地址
+    const defaultAddress = useMemo(() => {
+        return  {
+            province_name: orderDetail?.province_name,
+            city_name: orderDetail?.city_name,
+            district_name: orderDetail?.district_name,
+            address_detail: orderDetail?.address_detail,
+            // id: address.id,
+            name: orderDetail?.target_user_name,
+            phone: orderDetail?.target_user_phone
+        }
+       
+    }, [orderDetail])
+
+    //订单备注
+    const {fetchData: remarkFetchData} = EditSaleOrderRemarkApi()
+    const [orderRemark, setOrderRemark] = useState('')
+    const getRemark = useCallback(async (e) => {
+        setOrderRemark(() => e)
+        let res = await remarkFetchData({remark:e, id: orderId.current})
+        if(res.success) {
+            alert.success('修改成功')
+        } else {
+            alert.error(res.msg)
+        }
+        setShowDesc(() => false)
     }, [])
 
-    //获取销售预览订单
-    type preViewOrderParam = {estimate_amount:number, estimate_weight:number, product_color_list:any[], sale_mode:number, sale_mode_name:string}
-    const [preViewOrder, setPreViewOrder] = useState<preViewOrderParam>()
-    const {fetchData} = SaleOrderPreViewApi()
-    const getSaleOrderPreView = async () => {
-        if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) {
-            let res = await fetchData(idsAndSaleModel.current)
-            setPreViewOrder(res.data)
+    //修改地址
+    const changeAddress = () => {
+        //临时传递数据
+        setParam({
+                province_name: orderDetail?.province_name,
+                city_name: orderDetail?.city_name,
+                district_name: orderDetail?.district_name,
+                address_detail: orderDetail?.address_detail,
+                id: orderId.current,
+                name: orderDetail?.target_user_name,
+                phone: orderDetail?.target_user_phone,
+                shipment_mode: orderDetail?.shipment_mode,
             }
+        )
+        goLink('/pages/editOrder/index')
     }
-
-    useEffect(() => {
-        formatData()
-    }, [preViewOrder])
-
-    //格式化数据格式
-    const formatData = () => {  
-        if(preViewOrder?.product_color_list&&preViewOrder?.product_color_list.length > 0) {
-            let dataList = {}
-            preViewOrder?.product_color_list.map(item => {
-                dataList[item.product_code] =  dataList[item.product_code]||{}
-                dataList[item.product_code].product_code = item.product_code
-                dataList[item.product_code].product_name = item.product_name
-                dataList[item.product_code].sale_mode_name = item.sale_mode_name
-                dataList[item.product_code].color_list =  dataList[item.product_code]?.color_list||[]
-                dataList[item.product_code].color_list.push(item)
-            })
-            console.log('dataList::',Object.values(dataList))
-            return Object.values(dataList)
-        }
-    }
-
     return (
         <View className={styles.order_main}>
-            <OrderState state="预约中" desc="客服已接单，等待仓库配布出单..."/>
-            <View className={styles.order_title}>
-                <Text>收货方式</Text>
-                <View className={styles.order_status}>物流</View>                
-                <View className={styles.order_status}>上门自提</View>                
+            <View className={styles.weight_memo_con}>
+                <WeightMemo/>
             </View>
-            <AddressInfo/>
-            <KindList/>
-            <View className={styles.order_desc} onClick={() => setShowDesc(true)}>
-                <View className={styles.order_desc_con}>订单备注</View>
-                <View className={styles.order_desc_text}>点击填写</View>
-                <View className={classnames(styles.miconfont, 'iconfont icon-jiantou')}></View>
+            <OrderState />
+            <View onClick={() => changeAddress()}>
+                <AddressInfo defaultValue={defaultAddress} disabled={true} />
             </View>
+            <KindList value={formatPreViewOrderMemo}/>
             <View className={styles.order_info} >
-                <View className={styles.order_info_title}>订单备注</View>
+                <View className={styles.order_info_title}>订单信息</View>
                 <SearchInput showBorder={false} title='单号'>
                     <View className={styles.order_num}>
-                        <Text>13535359535</Text>
+                        <Text>{orderDetail?.order_no}</Text>
                         <View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
                     </View>
                 </SearchInput>
                 <SearchInput showBorder={false} title='下单时间'>
-                    <Text>2022-4-5 10:11:55</Text>
+                    <Text>{formatDateTime(orderDetail?.create_time)}</Text>
+                </SearchInput>
+                <SearchInput showBorder={false} title='付款时间'>
+                    <Text>{formatDateTime(orderDetail?.create_time)}</Text>
                 </SearchInput>
             </View>
-            <View className={styles.submit_order}>
-                <View className={styles.submit_order_number}>
-                    <EstimatedAmount style={{color:'#007AFF'}} number={price}/>    
-                    <View className={styles.order_number_desc}>2种面料，6种颜色，共6条</View>
+            <View className={styles.order_desc} onClick={() => setShowDesc(true)}>
+                <View className={styles.order_desc_con}>订单备注</View>
+                {
+                    orderRemark&&<View className={styles.order_desc_text}>{orderRemark}</View>||
+                    <View className={styles.order_desc_text_hint}>填写备注</View>
+                }
+                <View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
             </View>
-                <View className={styles.order_btn}>提交订单</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>        
             <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
-                <Remark onSave={(e) => console.log(e)}/>
+                <Remark onSave={(e) => getRemark(e)}/>
             </Popup>
             <View className="common_safe_area_y"></View>
         </View>

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,65 @@
+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/components/selectData/index.module.scss

@@ -3,7 +3,7 @@
     width: 100%;
     .tabs_scroll{
         width: 100%;
-        display: flex;
+        // display: flex;
         white-space: nowrap;
         ::-webkit-scrollbar {
             display:none;
@@ -12,12 +12,12 @@
             color:transparent;
         }
         .tabs_item{
-            flex:1;
+            min-width: 130px;
+            padding: 0 10px;
             display: inline-block;
-            font-size: 24rpx;
+            font-size: 24px;
             background-color: #ecf5ff;
             border-radius: 24rpx;
-            min-width: 126rpx;
             height: 46.93rpx;
             text-align: center;
             line-height: 46.93rpx;
@@ -30,7 +30,7 @@
                 align-items: center;
                 justify-content: center;
                 font-size: $font_size_medium;
-                
+                @include common_ellipsis();
             }
             .tabs_index{
                 height: 5px;

src/pages/searchList/components/selectData/index.tsx

@@ -4,7 +4,7 @@ import classnames from "classnames";
 import styles from './index.module.scss'
 
 
-type ListProps = {
+export type ListProps = {
     title: string,
     value: number
 }
@@ -44,7 +44,7 @@ export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
                             list.map((item, index) => {
                                 return (
                                     <View key={index} id={`tabs_${index}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
-                                        <View  className={classnames(styles.tabs_item_con)}>{item.title}</View>
+                                        <View  className={classnames(styles.tabs_item_con)}>{`${item.title}: ${item.value}`}</View>
                                     </View>
                                 )
                             })

src/pages/searchList/hightSearchList.module.scss

@@ -74,6 +74,7 @@
         .filter_scroll{
             flex:1;
             width: 0;
+            padding-left: 20px;
             ::-webkit-scrollbar {
                 display:none;
                 width:0;
@@ -190,6 +191,7 @@
                 .title{
                     font-size: $font_size;
                     color: $color_font_three;
+                    @include common_ellipsis()
                 }
                 .tag_list{
                     display: flex;
@@ -209,6 +211,7 @@
                     font-size: $font_size_medium;
                     color: $color_font_two;
                     margin-top: 16px;
+                    @include common_ellipsis()
                 }
             }
         }

src/pages/searchList/hightSearchList.tsx

@@ -1,6 +1,5 @@
 import { Image, ScrollView, Text, View } from "@tarojs/components"
 import classnames from "classnames";
-import Search from '@/components/search'
 import Filter from "@/components/filter";
 import InfiniteScroll from '@/components/infiniteScroll'
 import SortBtn from "@/components/sortBtn";
@@ -8,25 +7,69 @@ import SearchInput from "@/components/searchInput";
 import LinkBlueTooth from "@/components/bluetooth/LinkBlueTooth";
 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 useManualPullDownRefresh from "@/use/useManualPullDownRefresh";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import Taro, { useDidShow, usePullDownRefresh, useReady } from "@tarojs/taro";
+import {GetLabProductApi} from "@/api/material"
+import { dataLoadingStatus, 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";
+import SelectData, {ListProps} from "./components/selectData";
 
 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:5},
-        {title: '系列', value:5},
-        {title: '系列', value:5},
-        {title: '系列', value:5},
-        {title: '系列', value:5},
-    ])
+
+    //搜索参数
+    const [searchField, setSearchField] = useState({
+        l: '',
+        a: '',
+        b: '',
+        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} = 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 })
+        }
+    }
+
+
+    //数据加载状态
+    const statusMore = useMemo(() => {
+        return dataLoadingStatus({list:materialList.list, total: materialList.total, status: materialState.loading})
+    }, [materialList])
+
     const [scrollStatus, setScrollStatus] = useState(false)
     const onscroll = useCallback((e) => {
         if(e.detail.scrollTop > 20) {
@@ -36,9 +79,9 @@ export default () => {
         }
     },[])
 
-    const {state, measureAndGetLab} = useBluetooth()
+    const {state: colorState, measureAndGetLab} = useBluetooth()
     const getLab = () => {
-        if(state.connected) {
+        if(colorState.connected) {
             measureAndGetLab()
         } else {
             Taro.showToast({
@@ -48,17 +91,52 @@ export default () => {
         }
     }
 
+    //监听lab数据变化
     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})
+        }
+    }, [colorState.deviceLab])
+
+    const goLinkPage = (item) => {
+        goLink('/pages/details/index',{id:item.id})
+    }
+
+    //获取筛选条件
+    const getFiltr = (e) => {
+        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:{}}) => {
+        console.log('data123::',val.data)
+        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])
     }
-    }, [state.deviceLab])
 
     //页面下拉刷新
-    const res = useManualPullDownRefresh()
+    usePullDownRefresh(() => {
+        setSearchField({...searchField ,size : 10})
+    })
     return (
         <View className={styles.main}>
             <View className={styles.search}>
@@ -86,16 +164,9 @@ export default () => {
                     
                 </View>
                 <View className={styles.filter_btn_con}>
-                    <ScrollView scrollX className={styles.filter_scroll}>
-                        <View className={styles.filter_btn}>
-                                <View>系列</View>
-                                <View>幅宽</View>
-                                <View>克重</View>
-                                <View>克重</View>
-                                <View>克重</View>
-                                <View className={styles.selected}>成分</View>
+                    <View className={styles.filter_scroll}>
+                        <SelectData list={selectList}/>
                     </View>
-                    </ScrollView>
                     <View className={styles.filter_more} onClick={() => setShowFilter(true)}>
                         <Text>筛选</Text>
                         <Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
@@ -103,22 +174,24 @@ 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')} 
+                        selfonScrollToLower={() => getScrolltolower()} 
                         selfOnScroll={(e) => onscroll(e)}
+                        statusMore={statusMore}
                     >
                         <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>
                             })}
@@ -126,7 +199,7 @@ export default () => {
                     </InfiniteScroll>
                 </View>
             </View>
-            <Filter show={showFilter} onClose={() => setShowFilter(false)}/>
+            <Filter show={showFilter} onFiltr={(e) => getFiltr(e)} onClose={() => setShowFilter(false)}/>
         </View>
     )
 }

src/pages/searchList/search.tsx

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

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

@@ -4,25 +4,85 @@ import Search from '@/components/search'
 import Filter from "@/components/filter";
 import InfiniteScroll from '@/components/infiniteScroll'
 import SortBtn from "@/components/sortBtn";
-import SelectData from "./components/selectData";
+import SelectData, {ListProps} from "./components/selectData";
 import { goLink } from "@/common/common";
 import styles  from './searchList.module.scss'
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useMemo, 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 { dataLoadingStatus, 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 [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 getScrolltolower = () => {
+        if(materialList.list.length < materialList.total) {
+            pageNum.current.page++
+            const size = pageNum.current.size * pageNum.current.page
+            setSearchField({...searchField, size })
+        }
+    }
+
+    //数据加载状态
+    const statusMore = useMemo(() => {
+        return dataLoadingStatus({list:materialList.list, total: materialList.total, status: materialState.loading})
+    }, [materialList])
+
+    //输入了搜索关键字
+    const getSearchData = useCallback((e) => {
+        pageNum.current.page = 1
+        setMaterialList(() => ({list:[], total:0}))
+        setSearchField((val) => ({...val, 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 +92,39 @@ export default () => {
         }
     },[])
 
-    //页面下拉刷新
-    const res = useManualPullDownRefresh()
+    //获取筛选条件
+    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:{}}) => {
+        console.log('data123::',val.data)
+        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]})
+            }
+        }
+        console.log('data::',data)
+        setSelectList([...data])
+    }
+
     return (
         <View className={styles.main}>
             <View className={styles.search}>
-                <Search placeIcon="out"  btnStyle={{color: '#007AFF'}}/>
+                <Search placeIcon="out" placeholder="请输入面料关键词"  defaultValue={router.params.key} changeOnSearch={getSearchData} debounceTime={300}/>
             </View>
             <View className={styles.filter}>
                 <View className={styles.filter_all}>
@@ -66,26 +153,27 @@ 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')} 
+                        selfonScrollToLower={() => getScrolltolower()} 
                         selfOnScroll={(e) => onscroll(e)}
+                        statusMore={statusMore}
                     >
                         <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>
                             })}
@@ -93,7 +181,7 @@ export default () => {
                     </InfiniteScroll>
                 </View>
             </View>
-            <Filter show={showFilter} onClose={() => setShowFilter(false)}/>
+            <Filter show={showFilter} onClose={() => setShowFilter(false)} onFiltr={(e) => getFiltr(e)} />
         </View>
     )
 }

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,128 @@
+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, useMemo, 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 { dataLoadingStatus, 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 })
+        }
+    }
+
+    //数据加载状态
+    const statusMore = useMemo(() => {
+        return dataLoadingStatus({list:subjectList.list, total: subjectList.total, status: state.loading})
+    }, [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}>
+                <InfiniteScroll selfonScrollToLower={() => getScrolltolower()} statusMore={statusMore}>
+                    <Product desStatus={false} productList={subjectList.list}/>
+                </InfiniteScroll>
+            </View>
+            <Filter show={showPopup} onClose={() => setShowPopup(false)} onFiltr={getFiltr}/>
+        </View>
+    )
+}

src/reducers/commonData.ts

@@ -0,0 +1,35 @@
+//公共数据,什么都可往里面传，可用于临时传参
+import Taro from '@tarojs/taro'
+import { 
+    SET_COMMON,
+    CLEAR_COMMON
+} from '../constants/common'
+
+export type DataParam = {
+    common: any
+}
+
+type Action = {
+  type?: string,
+  data?: DataParam
+}
+
+
+
+const INIT = {
+    common: Taro.getStorageSync('common')?JSON.parse(Taro.getStorageSync('common')):null,
+}
+
+export default function counter (state = INIT, action: Action) {
+    const {type, data} = action
+    switch (type) {
+        case SET_COMMON:
+            Taro.setStorageSync('common',JSON.stringify(data))
+            return {...state,...data}
+        case CLEAR_COMMON:
+            Taro.removeStorageSync('common')
+            return {...state, common: null}
+        default:
+            return state
+    }
+}

src/reducers/hooks.ts

@@ -2,7 +2,9 @@
 //该方法纯粹只是个Ts类型定义文件
 import { useSelector as useReduxSelector, TypedUseSelectorHook } from 'react-redux';
 import { DataParam } from './userInfo';
+import { DataParam as commonDataParam } from './commonData';
 type Params = {
-    userInfo: DataParam
+    userInfo: DataParam,
+    commonData: commonDataParam
 }
 export const useSelector: TypedUseSelectorHook<Params> = useReduxSelector;

src/reducers/index.ts

@@ -1,6 +1,8 @@
 import { combineReducers } from 'redux'
 import userInfo from './userInfo'
+import commonData from './commonData'
 
 export default combineReducers({
-    userInfo
+    userInfo,
+    commonData
 })

src/styles/bak/iconfont.scss

@@ -1,89 +0,0 @@
-@font-face {
-  font-family: "iconfont"; /* Project id 2987621 */
-  src: 
-       url('iconfont.ttf?t=1650013104232') format('truetype');
-}
-
-.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-yifahuo:before {
-  content: "\e65b";
-}
-
-.icon-daipeibu:before {
-  content: "\e662";
-}
-
-.icon-yaoqingtuandui:before {
-  content: "\e65a";
-}
-
-.icon-a-tuikuanshouhou:before {
-  content: "\e65c";
-}
-
-.icon-daifukuan:before {
-  content: "\e65d";
-}
-
-.icon-shezhi:before {
-  content: "\e65e";
-}
-
-.icon-yanseduibi:before {
-  content: "\e65f";
-}
-
-.icon-daifahuo:before {
-  content: "\e660";
-}
-
-.icon-baoguo:before {
-  content: "\e661";
-}
-
-.icon-tick-pressed:before {
-  content: "\e652";
-}
-
-.icon-wode-pressed:before {
-  content: "\e655";
-}
-
-.icon-fenlei-pressed:before {
-  content: "\e656";
-}
-
-.icon-sousuo:before {
-  content: "\e647";
-}
-
-.icon-fenxiang:before {
-  content: "\e648";
-}
-
-.icon-shaixuan:before {
-  content: "\e649";
-}
-
-.icon-gouwuche:before {
-  content: "\e64a";
-}
-
-.icon-qingkong:before {
-  content: "\e64c";
-}
-
-.icon-jia:before {
-  content: "\e64d";
-}
-
-.icon-jian:before {
-  content: "\e64e";
-}

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; 

src/styles/iconfont.scss

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2987621 */
-  src:url('iconfont.ttf?t=1652068398646') format('truetype');
+  src: url('iconfont.ttf?t=1652868058352') format('truetype');
 }
 
 .iconfont {
@@ -11,6 +11,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-zhuyi:before {
+  content: "\e668";
+}
+
+.icon-zhushi:before {
+  content: "\e667";
+}
+
+.icon-zidingyimadan:before {
+  content: "\e665";
+}
+
+.icon-a-yuanmadanmadanguanli:before {
+  content: "\e666";
+}
+
+.icon-daohang:before {
+  content: "\e664";
+}
+
 .icon-shanchu:before {
   content: "\e663";
 }
@@ -130,3 +150,4 @@
 .icon-sort-down-full:before {
   content: "\ea4d";
 }
+

src/use/useCommonData.ts

@@ -0,0 +1,23 @@
+import { useDispatch } from 'react-redux'
+import {SET_COMMON, CLEAR_COMMON} from '@/constants/common'
+import {useSelector} from '@/reducers/hooks'
+/**
+ * 这个hook 用来临时存储数据用
+ */
+export default () => {
+    const {common: commonData} = useSelector(state => state.commonData)
+    const dispatch = useDispatch()
+    const setCommonData = (val:any) => {
+        dispatch({type:SET_COMMON, data:val})
+    }
+
+    const removeCommonData = () => {
+        dispatch({type:CLEAR_COMMON})
+    }
+
+    return {
+        setCommonData,
+        removeCommonData,
+        commonData
+    }
+}

src/use/useHttp.ts

@@ -107,7 +107,7 @@ export const useRequest = (options:option = {
         success: false, // 请求是否成功
         data: {},
         msg: '',
-        loading: false,
+        loading: true,
         error: null,
         query: {},
         filter: null,
@@ -170,7 +170,6 @@ export const useRequest = (options:option = {
                 if (statusCode === 401) {
                     removeToken()
                     removeSessionKey()
-                    // remove
                     // Taro.reLaunch({
                     //     url: router.path +'?' + qs.stringify(router.params)
                     // })