Merge branch 'dev' of http://git.online.zzfzyc.com/mp/EShop 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/onlinePay.ts

@@ -0,0 +1,13 @@
+import { useRequest } from "@/use/useHttp"
+
+/**
+ * 获取在线支付二维码
+ */
+ export const GetPayCode = () => {
+    return useRequest({
+        url: `/`,
+        base_url: 'http://192.168.1.127:8081/caphtml',
+        method: "post",
+    })
+}
+

src/api/order.ts

@@ -3,7 +3,7 @@ import { useRequest } from "@/use/useHttp"
 /**
  * 下单现货销售单
  */
- export const SaleOrderApi = () => {
+export const SaleOrderApi = () => {
     return useRequest({
         url: `/v1/mall/saleOrder`,
         method: "post",
@@ -18,4 +18,75 @@ import { useRequest } from "@/use/useHttp"
         url: `/v1/mall/saleOrder/preView`,
         method: "put",
     })
+}
+
+/**
+ * 获取商城订单详情
+ */
+ export const GetSaleOrderDetailApi = () => {
+    return useRequest({
+        url: `/v1/mall/saleOrder/detail`,
+        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",
+    })
+}
+
+/**
+ * 获取订单状态枚举
+ */
+ export const GetOrderStatusListApi = () => {
+    return useRequest({
+        url: `/v1/mall/enum/sale/order/status`,
+        method: "get",
+    })
+}
+
+/**
+ * 获取订单列表
+ */
+ export const GetOrderListApi = () => {
+    return useRequest({
+        url: `/v1/mall/saleOrder/list`,
+        method: "get",
+    })
+}
+
+/**
+ * 作废销售单
+ */
+ export const CancelOrderApi = () => {
+    return useRequest({
+        url: `/v1/mall/saleOrder/cancel`,
+        method: "put",
+    })
 }

src/api/orderPay.ts

@@ -0,0 +1,21 @@
+import { useRequest } from "@/use/useHttp"
+
+/**
+ * 获取订单支付方式信息
+ */
+ export const GetOrderPayApi = () => {
+    return useRequest({
+        url: `/v1/mall/orderPayment/orderPaymentMethodInfo`,
+        method: "get",
+    })
+}
+
+/**
+ * 订单支付提交
+ */
+ export const SubmitOrderPayApi = () => {
+    return useRequest({
+        url: `/v1/mall/orderPayment/orderPaymentSubmission`,
+        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/common.ts

@@ -7,20 +7,15 @@ import Qs from 'qs'
  * @param params 
  * @param type false 跳转普通页面，true 跳转tabbar页面
  */
-export const goLink = (path = '', params = {}, type:false|true = false) => {
+type ParamLink = 'navigateTo'|'switchTab'|'reLaunch'|'redirectTo'
+export const goLink = (path = '', params = {}, way: ParamLink = 'navigateTo') => {
     if(path) {
         let params_str = Qs.stringify(params)
         console.log('params_str::',params_str)
         path = params_str?path+'?'+params_str:path
-        if(!type) {
-            Taro.navigateTo({
-                url: path
-            })
-        } else {
-            Taro.switchTab({
-                url: path
-            })
-        }
+        console.log('path::', way)
+        Taro[way]({url: path})
+        
     }
   
 }

src/common/constant.js

@@ -17,12 +17,17 @@ export const BASE_URL = `http://192.168.1.224:50001/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"
 
 
 // 上传图片视频
 export const CDN_UPLOAD_IMG = `${UPLOAD_CDN_URL || ''}`;
 
 //appid
-export const WX_APPID = 'wx68d92d7cbf0b6963'
+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(() => {
@@ -90,4 +90,17 @@ 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/checkbox/index.module.scss

@@ -26,6 +26,6 @@
     text-align: center;
     line-height: 40px;
     .miconfont{
-        font-size: 26px;
+        font-size: 32px;
     }
 }

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)
-        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))
+    //重置数据
+    const onRestEven = () => {
+        let res = {
+            seriesName: '',
+            seriesId: '',
+            width: '',
+            weight: '',
+            element: '',
         }
+        setFilterObj(res)
+        onFiltr?.(filterObj)
+        onClose?.()
+    }
+
+    //提交搜索
+    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;
@@ -12,5 +11,11 @@
             display: flex;
             align-items: center;
         }
+        .noMore{
+            padding-top: 20px;
+        }
+    }
+    .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,
+    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'}}>
-                    {children}
-                    {moreStatus&&<View className={style.infinite_scroll}>
-                        {
-                            hasMore&&<View className={style.loading_more}>加载中<DotLoading/></View>||
-                            <View>没有更多数据了</View>
-                        }
-                    </View>}
-                </View>
+                {!moreStatus&&<>
+                    <View style={{paddingBottom:paddingBottom + 'rpx'}} className={style.scrollViewCon}>
+                        {children}
+                    </View>
+                </>||
+                <>
+                    {(statusMore == 2 || statusMore == 3)&&<View style={{paddingBottom:paddingBottom + 'rpx'}} className={style.scrollViewCon}>
+                            {children}
+                            <View className={style.infinite_scroll}>
+                                {
+                                    (statusMore == 2)&&<View className={style.loading_more}>加载中<DotLoading/></View>||
+                                    <View className={style.noMore}>没有更多数据了</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/orderBtns/index.module.scss

@@ -0,0 +1,22 @@
+.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/components/orderBtns/index.tsx

@@ -0,0 +1,102 @@
+import { CancelOrderApi } from "@/api/order"
+import { alert } from "@/common/common"
+import { View } from "@tarojs/components"
+import Taro from "@tarojs/taro"
+import { useCallback, useRef, memo } from "react"
+import styles  from './index.module.scss'
+
+type Param = {
+    orderInfo: {
+        status?: number, //订单状态
+        orderId: number, //订单id
+        payModel: number, //支付方式
+        realPayPrice: number, //实付金额
+        pendingPayPrice: number, //待付金额
+    },
+    onClick?: (val: number) => void //点击后触发的事件，返回订单状态
+}
+export default memo(({orderInfo, onClick}:Param) => {
+    //订单按钮按订单状态归类
+    const orderBtnsList = useRef([
+        {
+            id: 1,
+            value: [0, 1, 2, 3, 4], //取消订单按钮对应： 待接单，待配布，已配布, 待付款， 待发货
+            label: '取消订单'
+        },
+        {
+            id: 2,
+            value: [3, 4], //去付款按钮对应：待付款， 待发货
+            label: '去付款'
+        },
+        {
+            id: 3,
+            value: [4], //取消订单按钮对应： 待发货
+            label: '申请退款'
+        },
+        {
+            id: 4,
+            value: [5, 6, 7, 8], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款
+            label: '查看物流'
+        },
+        {
+            id: 5,
+            value: [5, 6, 8], //取消订单按钮对应： 待收货, 已收货, 已退款
+            label: '申请退货'
+        },
+        {
+            id: 6,
+            value: [5], //取消订单按钮对应： 待收货
+            label: '确认收货'
+        },
+        {
+            id: 7,
+            value: [5,6,7,8], //取消订单按钮对应： 待收货，已收货，已完成, 已退款
+            label: '再次购买'
+        }
+    ])
+    //判断是否显示该按钮
+    const orderBtnsShow = useCallback((item, status) => {
+        if(item.id == 1) {
+           return( orderInfo.realPayPrice == 0 && status <= 4) //在代发货之前没有付过款
+        } 
+        if(item.id == 2) {
+            return( orderInfo.pendingPayPrice != 0 && status <= 4) //在代发货之前没有付完款
+        }
+        return item.value.includes(status)
+    },[])
+
+    //点击按钮操作
+    const submitBtns = (val) => {
+        (val == 1)&&cancelOrder(); //取消订单按钮
+        (val == 2)&&onClick?.(val); //去付款按钮
+    }
+
+    //取消订单
+    const {fetchData: cancelFetchData} = CancelOrderApi()
+    const cancelOrder = () => {
+        Taro.showModal({
+            title: '要取消该订单吗？',
+            success: async function (res) {
+              if (res.confirm) {
+                let res = await cancelFetchData({id: orderInfo.orderId})
+                if(res.success) {
+                    alert.success('取消成功')
+                    onClick?.(1)
+                } else {
+                    alert.none(res.msg)
+                }
+              } else if (res.cancel) {
+                console.log('用户点击取消')
+              }
+            }
+          })
+    }
+
+    return (
+        <View className={styles.btns_list}>
+            {orderBtnsList.current.map((item, index) => 
+                orderBtnsShow(item, status)&&<View className={styles.btns_item} onClick={() => submitBtns(item.id)}>{item.label}</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,17 +14,17 @@ 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>
                     </View>
                     <View className={styles.introduce}>{item.component}</View>
-                    {desStatus&&<View className={styles.des}>{item.describe}</View>}
+                        {desStatus&&<View className={styles.des}>{item.describe}</View>}
                     </View>
                 </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,
-    btnStyle = {},
-    placeIcon = 'inner',
-    btnTitle = '搜索',
-    debounceTime = 0,
+    showIcon = true, //是否显示关闭图标
+    showBtn = false, //是否显示搜索按钮
+    btnStyle = {}, 
+    placeIcon = 'inner', 
+    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

@@ -12,6 +12,8 @@ type Params = {
     changeOnInput?: (string) => void,
     clickOnInput?: () => void,
     children?: ReactNode
+    height?: number,
+    titleStyle?: Object
 
 }
 
@@ -24,7 +26,9 @@ export default memo((props: Params) => {
         placeholder = '请输入',
         showBorder = true,
         changeOnInput,
-        clickOnInput
+        clickOnInput,
+        height = 80,
+        titleStyle = {}
     } = props
 
     let stylen = useMemo(() => {
@@ -33,10 +37,9 @@ 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>}
+        <View className={styles.searchInput_main} style={{height: height + 'rpx', ...stylen}}>
+            {showTitle&&<View className={styles.searchInput_title} style={titleStyle}>{title}</View>}
             <View className={styles.searchInput_con}>
                 {!props.children&&<Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>
                     ||<View>{props.children}</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/creditLine/index.tsx

@@ -2,25 +2,45 @@
 import AddressList from "@/components/AddressList"
 import { Button, Canvas, ScrollView, Text, View } from "@tarojs/components"
 import Taro, { useReady } from "@tarojs/taro"
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
 import {creditInfoApi} from "@/api/creditLine"
 import "./index.scss"
 import { useSelector } from "@/reducers/hooks";
 
 export default ()=>{
   
-	const {userInfo} = useSelector(state => state.userInfo);
+	const userInfo = useSelector(state => state.userInfo);
   useEffect(()=>{
-    console.log(userInfo,"==");
-    
-    // getData()
+    getData()
   }, [])
   const {fetchData, state} = creditInfoApi();
+  const [data, setData] = useState({
+    credit_quota_used_line: [0,"00"],
+    credit_quota_line: [0,"00"],
+    credit_quota_available_line: [0,"00"],
+    progress: 0,
+    create_time: ""
+  });
   // 获取数据
   const getData = async ()=>{
     const result = await fetchData();
-    console.log(state);
-    
+    const progress = result.data.credit_quota_used_line / result.data.credit_quota_line * 100;
+    const credit_quota_used_line = convertPrice(result.data.credit_quota_used_line);
+    const credit_quota_line = convertPrice(result.data.credit_quota_line);
+    const credit_quota_available_line = convertPrice(result.data.credit_quota_available_line);
+    setData({
+      ...result.data,
+      progress,
+      credit_quota_used_line,
+      credit_quota_line,
+      credit_quota_available_line
+    })
+  }
+  const convertPrice  = (data)=>{
+    var t = data.toString().split(".");
+    t[0] = t[0].toLocaleString();
+    t[1] = t[1]?t[1].padStart(2,0):"00";
+    return t;
   }
   
 
@@ -31,11 +51,11 @@ export default ()=>{
       </View>
       <View className="credit-line-card">
         <View className="credit-line-card-top">
-          <View><Progress /></View>
+          <View><Progress progress={data.progress} /></View>
           <View className="credit-line-card-top-info">
             <View className="credit-line-card-top-info-title">已用额度</View>
-            <View className="credit-line-card-top-info-price"><Text>¥</Text>999,999<Text>.20</Text></View>
-            <View className="credit-line-card-top-info-date">有效期: 2022-03-09至2022-05-13</View>
+            <View className="credit-line-card-top-info-price"><Text>¥</Text>{data?.credit_quota_used_line[0]}<Text>.{data.credit_quota_used_line[1]}</Text></View>
+            <View className="credit-line-card-top-info-date">有效期: {data.create_time} 2022-03-09至2022-05-13</View>
           </View>
         </View>
         <View className="credit-line-card-bottom">
@@ -44,14 +64,14 @@ export default ()=>{
               <Text className="iconfont icon-yucunkuan"></Text>
               <View>总额度</View>
             </View>
-            <View className="credit-line-card-bottom-item-price"><Text>¥</Text>999,999<Text>.20</Text></View>
+            <View className="credit-line-card-bottom-item-price"><Text>¥</Text>{data.credit_quota_line[0]}<Text>.{data.credit_quota_line[1]}</Text></View>
           </View>
           <View className="credit-line-card-bottom-item">
             <View className="credit-line-card-bottom-item-title">
               <Text className="iconfont icon-tick-pressed"></Text>
               <View>可用额度</View>
             </View>
-            <View className="credit-line-card-bottom-item-price"><Text>¥</Text>999,999<Text>.20</Text></View>
+            <View className="credit-line-card-bottom-item-price"><Text>¥</Text>{data.credit_quota_available_line[0]}<Text>.{data.credit_quota_available_line[1]}</Text></View>
           </View>
         </View>
       </View>
@@ -59,9 +79,12 @@ export default ()=>{
   )
 }
 
-const Progress = ()=>{
+const Progress = (props)=>{
+  useEffect(()=>{
+    getCanvas();
+  },[props.progress])
   const getCanvas = ()=>{
-    const percentage = 100;
+    const percentage = props.progress??0;
     const query = Taro.createSelectorQuery();
     query.select("#myCanvas").fields({ node: true, size: true }).exec((res) => {
       const canvas = res[0]?.node;
@@ -116,15 +139,17 @@ const Progress = ()=>{
         ctx.fillText(percentage+"%", 0,0);
 
         // 蓝色的圆
-        ctx.beginPath();
-        ctx.lineWidth = 25;
-        ctx.lineCap = "round";
-        const gad = ctx.createLinearGradient(100,0,0,100);
-        gad.addColorStop(0, "#047CFF");
-        gad.addColorStop(1, "#51A4FF");
-        ctx.strokeStyle = gad;
-        ctx.arc(0,0,104,-Math.PI*0.5,2*Math.PI/100*((percentage<50?percentage:50)-25), false);
-        ctx.stroke();
+        if(percentage>0){
+          ctx.beginPath();
+          ctx.lineWidth = 25;
+          ctx.lineCap = "round";
+          const gad = ctx.createLinearGradient(100,0,0,100);
+          gad.addColorStop(0, "#047CFF");
+          gad.addColorStop(1, "#51A4FF");
+          ctx.strokeStyle = gad;
+          ctx.arc(0,0,104,-Math.PI*0.5,2*Math.PI/100*((percentage<50?percentage:50)-25), false);
+          ctx.stroke();
+        }
 
         if(percentage>50){
           ctx.beginPath();

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/details/index.tsx

@@ -8,7 +8,7 @@ import ShopCart from '@/components/shopCart';
 import Preview,{colorItem} from './components/preview';
 import styles  from './index.module.scss'
 import { useEffect, useMemo, useState } from 'react';
-import {formatHashTag} from '@/common/fotmat'
+import {formatHashTag, formatImgUrl} from '@/common/fotmat'
 import useManualPullDownRefresh from '@/use/useManualPullDownRefresh';
 import { goLink } from '@/common/common';
 import useUserInfo from '@/use/useUserInfo';
@@ -147,7 +147,7 @@ export default (props:params) => {
               {productInfo?.product_color_list?.map(item => {
                 return <View className={styles.item} onClick={() => getColorItem(item)}>
                   <View className={styles.item_color}>
-                    <Image src={item.texture_url}></Image>
+                    <Image src={formatImgUrl(item.texture_url)}></Image>
                   </View>
                   <View className={styles.item_name}>{item.code}</View>
                 </View>

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,20 +80,23 @@ 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)}>
@@ -101,14 +104,14 @@ export default () => {
         <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()}>
-            <Product productList={productData.list}/>
-          </SideBar>
+            <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>
         <View className='common_safe_area_y'></View>
         <ShopCart show={showShopCart} onClose={() => setShowShopCart(false)}/>
@@ -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,188 @@
+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}))
+    })
+
+    //获取销售预览订单
+    const [preViewOrder, setPreViewOrder] = useState<any>() //获取到的原始数据
+    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()
+            getDataList()
+            //当有默认地址时设置默认地址id
+            preViewOrder.default_address&&setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id}))
+        }
+    }, [preViewOrder])
+
+    //格式化数据格式
+    const [formatPreViewOrder, setFormatPreViewOrder] = useState<any>() //格式化后的数据
+    const formatData = () => {  
+        setFormatPreViewOrder({
+            estimate_amount: preViewOrder.estimate_amount, //预估金额
+            sale_mode: preViewOrder.sale_mode,
+            sale_mode_name: preViewOrder.sale_mode_name, 
+            total_colors: preViewOrder.total_colors, //总颜色数量
+            total_number: preViewOrder.total_number, //总数量
+            total_fabrics: preViewOrder.total_fabrics, //面料数量
+            unit: preViewOrder.sale_mode == 0?'条':'m', //单位
+            list: preViewOrder.product_list
+        })
+    }
+    const formatPreViewOrderMemo = useMemo(() => {
+        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 getDataList = () => {
+        let list:{shopping_cart_product_color_id:number}[] = []
+        preViewOrder.product_list?.map(item => {
+            item.product_colors?.map(colorItem => {
+                list.push({shopping_cart_product_color_id:colorItem.id})
+            })
+        })
+        setSubmitOrderData((val) => ({...val, list}))
+    }
+
+    //获取地址
+    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}, 'redirectTo')
+                } 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?.total_fabrics}种面料，${formatPreViewOrder?.total_colors}种颜色，共${formatPreViewOrder?.total_number + 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_text_con}>
-                    <View className={styles.order_address_text_title}>**省**市**区**街道****仓库**省**市**区**街道****仓库</View>
-                    <View className={styles.order_address_text_name}>
-                        <Text>陈先生</Text>
-                        <Text>1818877790</Text>
+            <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_name}>
+                            <Text>{userInfo?.name}</Text>
+                            <Text>{userInfo?.phone}</Text>
+                        </View>
+                        <View className={styles.order_address_text_title}>{formatAddress}</View>
                     </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/addressInfoDetail/index.module.scss

@@ -0,0 +1,112 @@
+.order_address{
+    height: 178px;
+    background: #ffffff;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    padding: 30px;
+    box-sizing: border-box;
+    margin-top: 20px;
+    position: relative;
+    .order_address_icon{
+        font-size: 50px;
+        color: $color_main;
+        position: absolute;
+        top: 35px;
+        left: 20px;
+    }
+    .order_address_text_con{
+        flex:1;
+        padding-left: 50px;
+        box-sizing: border-box;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .order_address_text_title{
+            font-size: $font_size_medium;
+            margin-top: 10px;
+            @include common_ellipsis;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .moreIconfont{
+                font-size: 20px;
+            }
+        }
+        .order_address_text_name{
+
+            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{
+        width:200px;
+        font-size: $font_size_min;
+        background-color: #F0F0F0;
+        height: 64px;
+        border-radius: 24px;
+        color: $color_font_two;
+        position: absolute;
+        bottom: 10px; 
+        right: 10px;
+        z-index: 999;
+        .updateBtn_list{
+            position: absolute;
+            display: flex;
+            z-index: 5;
+            width: 100%;
+            .updateBtn_item_select{
+                color: #fff;
+            }
+        }
+        .updateBtn_item{
+            flex:1;
+            text-align: center;
+            line-height: 64px;
+        }
+        .updateBtn_select{
+            color: #fff;
+            background-color: $color_main;
+            border-radius: 24px;
+            position: absolute;
+            width: 100px;
+            height: 61px;
+            z-index: 1;
+            transition: all 0.3s ease-in-out;
+        }
+        
+    }
+    .order_address_text_no{
+        flex: 1;
+        font-size: $font_size;
+        font-weight: 700;
+        margin-left: 30px;
+    }
+    .order_address_more_icon{
+        color: $color_font_three;
+        font-size: $font_size;
+    }
+   
+}
+.order_address_list {
+    height: 900px;
+    .order_address_title{
+        font-size: $font_size;
+        font-weight: 700;
+        width: 100%;
+        text-align: center;
+        padding: 20px 0 30px 0;
+    }
+}

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

@@ -0,0 +1,122 @@
+import { EditSaleOrderAddressApi, EditSaleOrderShipmentModeApi } from "@/api/order";
+import { alert } from "@/common/common";
+import { debounce } from "@/common/util";
+import AddressList from "@/components/AddressList";
+import Popup from "@/components/popup";
+import { Text, View } from "@tarojs/components"
+import classnames from "classnames";
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useState } from "react";
+import styles  from './index.module.scss'
+
+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禁用后只用于展示
+    shipment_mode?: 1|2, //1自提 2物流
+    onChangeShipmentMode?: (val: number) => void, //返回收货方式
+    orderId?: number //订单id
+}
+
+export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = null, orderId = 0, shipment_mode = 1}: Param, ref) => {
+    const [showAddressList, setShowAddressList] = useState(false)
+
+    useEffect(() => {
+        setUserInfo(() => defaultValue)
+    }, [defaultValue])
+
+    const [userInfo, setUserInfo] = useState<any>()
+
+    //地址格式
+    const formatAddress = useMemo(() => {
+        if(userInfo) 
+            return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail
+    }, [userInfo])
+
+    const changeShow = () => {
+        if(receivingStatus == 2)
+            setShowAddressList(() => true)
+    }
+    
+    useEffect(() => {
+        setReceivingStatus(() => shipment_mode)
+    }, [shipment_mode])
+
+    //把内部方法提供给外部
+    useImperativeHandle(ref, () => ({
+        changeShow
+    }))
+
+    //收货方法,1:自提，2物流
+    const [receivingStatus, setReceivingStatus] = useState(1)
+    const {fetchData: shipmentModeFetchData} = EditSaleOrderShipmentModeApi()
+    const onReceivingStatus = (value, e) => {
+        e.stopPropagation()
+        changeReceivingStatus(value)
+    }
+    const changeReceivingStatus = debounce(async (value) => {
+        alert.loading('正在修改')
+        const res = await shipmentModeFetchData({id: orderId, shipment_mode:value})
+        if(res.success) {
+            alert.success('收货方式修改成功')
+            onChangeShipmentMode?.(value)
+            setReceivingStatus(value)
+        } else {
+            alert.none(res.msg)
+        }
+    }, 10)
+
+    //修改地址
+    const {fetchData: addressFetchData} = EditSaleOrderAddressApi()
+    const getAddress = async (value) => {
+        alert.loading('正在修改')
+        const res = await addressFetchData({id: orderId, address_id: value.id})
+        if(res.success) {
+            alert.success('地址修改成功')
+            onSelect?.(value)
+            setShowAddressList(() => false)
+            setUserInfo(() => value)
+        } else {
+            alert.none(res.msg)
+        }
+    }
+
+    return (
+        <View>
+            <View className={styles.order_address} onClick={() => changeShow()}>
+                <View className={classnames(styles.order_address_icon, 'iconfont', receivingStatus == 2?'icon-daohang':'icon-fahuo')}></View>
+                <View className={styles.order_address_text_con}>
+                    <View className={styles.order_address_text_title}>
+                        <Text>{formatAddress}</Text>
+                        {(receivingStatus == 2)&&<Text className={classnames(styles.moreIconfont,'iconfont icon-a-moreback')}></Text>}
+                    </View>
+                    <View className={styles.order_address_text_name}>
+                        <Text>{userInfo?.name}</Text>
+                        <Text>{userInfo?.phone}</Text>
+                    </View>
+                </View>
+                <View className={styles.updateBtn}>
+                    <View className={styles.updateBtn_list}>
+                        <View className={classnames(styles.updateBtn_item, receivingStatus==1&&styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(1,e)}>自提</View>
+                        <View className={classnames(styles.updateBtn_item, receivingStatus==2&&styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(2,e)}>物流</View>
+                    </View>
+                    <View style={{transform: receivingStatus==1?'translateX(0)':'translateX(100%)'}} className={classnames(styles.updateBtn_select)}></View>
+                </View>
+            </View>
+            <Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
+                <View className={styles.order_address_list}>
+                    <View className={styles.order_address_title}>请选择收货地址</View>
+                    <AddressList onSelect={getAddress}/>
+                </View>
+            </Popup>
+        </View>
+    )
+}))

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

@@ -0,0 +1,35 @@
+.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;
+        }
+        &:nth-child(3) {
+            font-size: $font_size_medium;
+        }
+    }
+}
+.emphasis_num{
+    .price_text{
+        &:nth-child(2) {
+            font-size: $font_size_big;
+        }
+    }
+}
+.emphasis_num_big{
+    .price_text{
+        &:nth-child(1) {
+            font-size: $font_size_big;
+        }
+        &:nth-child(2) {
+            font-size: 60px;
+        }
+        &:nth-child(1) {
+            font-size: $font_size_big;
+        }
+    }
+}

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

@@ -0,0 +1,28 @@
+import { Text, View } from "@tarojs/components";
+import { memo, useCallback } from "react";
+import styles  from './index.module.scss'
+import classnames from "classnames";
+
+type Param = {
+    number: number, //数字
+    status: 0|1|2 //0 小型，1中型，2大
+}
+export default memo(({number = 0, status = 1}:Param) => {
+    const priceDom = useCallback(() => {
+        let res = number.toFixed(2).split('.')
+        let int_num  = parseInt(res[0]) + ''
+        let decimals_num = res[1]
+        return (
+            <>
+                <Text className={styles.price_text}>¥</Text>
+                <Text className={styles.price_text}>{Number(int_num).toLocaleString()}</Text>
+                <Text className={styles.price_text}>.{decimals_num}</Text>
+            </>
+        )
+    }, [number])
+    return (
+        <View className={classnames(styles.order_price_num, status==1&&styles.emphasis_num, status==2&&styles.emphasis_num_big)} >
+            {priceDom()}
+        </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,33 +1,29 @@
 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'
+import AmountShow from "../amountShow";
 type Param = {
     style?: Object,
-    number?: number
+    number?: number,
+    title?: string,
+    titleStatus?: true|false, //true 标题加大加深
+    numberStatus?: 0|1|2, //数字尺寸
 }
-export default ({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>{formatPrice(int_num)}</Text>
-                <Text>.{decimals_num}</Text>
-            </>
-        )
-    }, [number])
-    const formatPrice = useCallback((number: string) => {
-        return formatKbPrice(number)
-    }, [])
+export default memo(({style, number = 0, titleStatus = true, title = '', numberStatus = 1}:Param) => {
     return (
-        <View className={styles.order_price}>
-            <Text className={styles.order_price_text}>预估金额</Text>
-            <View className={styles.order_price_num} style={style}>
-                {priceDom()}
+        <>  
+            <View className={styles.order_price}>
+                <View className={classnames(styles.order_price_text, titleStatus&&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>
+                <AmountShow status={numberStatus} number={number}/>
             </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,88 @@
+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, //预估金额
+    list: any[], 
+    sale_mode: number,
+    sale_mode_name: string,
+    unit: string,
+    total_colors: number,
+    total_fabrics: number,
+    total_number: number,
+    status: number, //订单状态
+    total_sale_price: number, //销售金额
+    total_should_collect_money: number, //应收金额
+    total_weight_error_discount: number, //空差优惠
+
+}
+
+export default memo(({value}:{value?:OrderParam}) => {
+    //对应数量
+    const formatCount = useCallback((item) => {
+        return value?.sale_mode == 0? item.roll : Number(item.length / 100)
+    }, [value])
+    //对应单价
+    const standardPrice = useCallback(price => {
+        return formatPriceDiv(price).toLocaleString() + '/' + (value?.sale_mode == 1?'m':'kg')
+    }, [value])
+
+    //数量格式
+    const numText = useMemo(() => {
+        if(value)
+            return `${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}${value?.unit}`
+    }, [value])
+
+    const priceConDom = useMemo(() => {
+        return (
+            <>
+                {(value&&value.status < 3)&&<EstimatedAmount number={formatPriceDiv(value?.estimate_amount)} title="预估金额" />}     
+                {(value&&value.status >= 3)&&<EstimatedAmount number={formatPriceDiv(value?.total_sale_price)} titleStatus={false}  numberStatus={0} title="合计金额" />}      
+                {(value&&value.status >= 3)&&<EstimatedAmount number={formatPriceDiv(value?.total_weight_error_discount)} titleStatus={false} numberStatus={0} title="空差优惠" />}      
+                {(value&&value.status >= 3)&&<EstimatedAmount number={formatPriceDiv(value?.total_should_collect_money)} title="应付金额" />} 
+            </>
+        )
+    }, [value])
+    
     return (
         <>
+            <View className={styles.orders_list_title}>{numText}</View>
             <View className={styles.orders_list_con}>
-                <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>
+                {
+                    value?.list?.map(item => {
+                        return <View key={item.product_code} className={styles.order_list}>
+                            <View className={styles.order_list_title}>
+                                <View className={styles.tag}>{value.sale_mode_name}</View>
+                                <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
+                                <View className={styles.num}>共{item?.product_colors.length}种</View>
+                            </View>
+                            <View className={styles.order_list_scroll}>
+                                {item?.product_colors?.map(colorItem => {
+                                    return <View key={colorItem.id} 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}>{colorItem.code + ' ' + colorItem.name}</View>
+                                                <View className={styles.order_list_item_price}>¥{standardPrice(colorItem.sale_price)}</View>
+                                            </View>
+                                            <View className={styles.order_list_item_count}>
+                                                <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_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>
-                            </View>
-                        </View>
-                    </View>
-                </View>
+                    })
+                }
                 <View className={styles.order_estimated_amount}>
-                    <EstimatedAmount number={price}/>    
-                    <View className={styles.order_price_des}>（按照25kg/条, 预估金额）</View>
+                    {priceConDom}     
                 </View>
             </View>
         </>
     )
-}
+})

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

@@ -0,0 +1,46 @@
+$top:170px;
+.offlinePay_main{
+    .offlinePay_con{
+        padding: 20px;
+        background-color: #F6F6F6;
+        border-radius: 20px;
+        .miconfont_title{
+            transform: rotate(-180deg);
+            position: absolute;
+            left: 20px;
+            top: 27px;
+            font-size: 37px;
+            color: $color_font_three;
+            z-index: 99;
+        }
+    }
+    .title{
+        font-size: $font_size_big;
+        color: #000000;
+        text-align: center;
+        font-weight: 700;
+        position: relative;
+        
+    }
+    
+    .offlinePay_list{
+        border-radius: 10px;
+        padding: 60px 0;
+       .offlinePay_con_text{
+           font-size: $font_size;
+           font-weight: 700;
+       }
+    }
+    .btns{
+        background: #007aff;
+        border-radius: 40px;
+        width: 668px;
+        height: 82px;
+        text-align: center;
+        line-height: 80px;
+        width: 100%;
+        color: #fff;
+        font-size: 32px;
+        margin-top: 30px;
+    }
+}

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

@@ -0,0 +1,52 @@
+import { Text, View } from "@tarojs/components";
+import { memo } from "react";
+import AmountShow from "../amountShow";
+import classnames from "classnames";
+import styles  from './index.module.scss'
+
+import MCheckbox from "@/components/checkbox";
+import Popup from "@/components/popup";
+import SearchInput from "@/components/searchInput";
+import Taro from "@tarojs/taro";
+
+type Param = {
+    show?: true|false,
+    onClose?: () => void
+}
+export default memo(({show = true, onClose}:Param) => {
+    //复制功能
+    const clipboardData = () => {
+        Taro.setClipboardData({
+            data: '开户名称:佛山市浩川盛世科技有限公司;  开户银行:招商银行汾江支行;  转账汇款账号:62062342120001221231212',
+            success: function (res) {
+                Taro.showToast({
+                    icon: 'none',
+                    title: '复制成功'
+                })
+            }
+        })
+    }
+    return (
+        <View className={styles.offlinePay_main}>
+            <Popup show={show} showTitle={false} onClose={onClose} >
+                <View className={styles.offlinePay_con}>
+                    <View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
+                    <View className={styles.title}>线下汇款</View>
+                    <View className={styles.offlinePay_list}>
+                        <SearchInput showBorder={false} title='开户名称' titleStyle={{fontSize:'23rpx'}}>
+                            <Text className={styles.offlinePay_con_text}>佛山市浩川盛世科技有限公司</Text>
+                        </SearchInput>
+                        <SearchInput showBorder={false} title='开户银行' titleStyle={{fontSize:'23rpx'}}>
+                            <Text className={styles.offlinePay_con_text}>招商银行汾江支行</Text>
+                        </SearchInput>
+                        <SearchInput showBorder={false} title='转账汇款账号' titleStyle={{fontSize:'23rpx'}}>
+                            <Text className={styles.offlinePay_con_text}>62062342120001221231212</Text>
+                        </SearchInput>
+                    </View>
+                    <View className={styles.btns} onClick={clipboardData}>复制信息</View>
+                </View>
+            </Popup>
+        </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,105 @@
 .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;
+    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_flow_state_desc{
-        color: $color_font_three;
-        font-size: $font_size_medium;
-        margin-left: 50px;
+    .order_status_list_show {
+        max-height: 1000px !important;
+    }
+    .order_status_item{
+        position: relative;
+        padding-left: 50px;
+        &:nth-last-child(n+2) {
+            padding-bottom: 30px;
+        }
+        .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: 9px;
+            position: absolute;
+            z-index: 1;
+        }
+        .order_status_content{
+            display: flex;
+            align-items: center;
+            .order_status_title{
+                color: $color_font_two;
+                font-size: $font_size;
+                font-weight: 700;
+            }
+            .order_status_time{
+                color: $color_font_two;
+                font-size: $font_size_medium;
+                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, useMemo, useState } from "react"
 import styles  from './index.module.scss'
+import classnames from "classnames";
+import { formatDateTime, formatImgUrl } from "@/common/fotmat";
+type Param = {
+    status: string,
+    time: string,
+    tag: string,
+    desc: string
+}
+export default memo(({list = []}:{list?:Param[]}) => {
+    const [showMore, setShowMore] = useState(false)
+    const changeMore = () => {
+        setShowMore(() => !showMore)
+    }
+    const dataList = useMemo(() => {
+        return list.reverse()
+    }, [list])
 
-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>
+        <>
+            {(dataList.length > 0)&&<View className={styles.order_flow_state}>
+                <View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
+                    {dataList.map((item, index) => <View className={styles.order_status_item}>
+                        {(dataList.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
+                        {(dataList.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.status}</View>
+                            <View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{formatDateTime(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>
+                {(dataList.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/payment/index.module.scss

@@ -0,0 +1,126 @@
+$top:190px;
+.payment_main{
+    .payment_con{
+        padding: 20px;
+        background-color: #F6F6F6;
+        border-radius: 20px;
+        .miconfont_title{
+            transform: rotate(-180deg);
+            position: absolute;
+            left: 20px;
+            top: 27px;
+            font-size: 37px;
+            color: $color_font_three;
+            z-index: 99;
+        }
+        
+    }
+    .title{
+        font-size: $font_size_big;
+        color: #000000;
+        text-align: center;
+        font-weight: 700;
+        position: relative;
+        
+    }
+    .amount{
+        text-align: center;
+        padding: 25px 0;
+    }
+    
+    .payment_list{
+        background-color: #fff;
+        // box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.16); 
+        min-height: 300px;
+        border-radius: 10px;
+        padding-bottom: 100px;
+        position: relative;
+        background: radial-gradient(circle 20px at left $top, transparent 20px, #fff 20px + 3px) left 0px/60% no-repeat ,
+                    radial-gradient(circle 20px at right $top, transparent 20px, #fff 20px + 3px) right 0px/60% no-repeat;
+        filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, .16));
+        position: relative;
+        &::before{
+            content: '';
+            position: absolute;
+            border-bottom: 3px dashed #ccc;
+            top: $top;
+            width: calc(100% - 100px);
+            left:0;
+            right: 0;
+            margin: auto;
+
+        }
+        .payment_list_top_border{
+            height: 32px;
+            width: 100%;
+            background: linear-gradient(215deg,#cde5ff 2%, #cde5ff 2%, #68b4ff 72%);
+            border-radius: 10px 10px 0px 0px;
+        }
+        .payment_list_title{
+            text-align: center;
+            padding: 30px 0 50px 0;
+            font-size: $font_size;
+            color: $color_font_three;
+            .payment_list_title_price_item{
+                display: flex;
+                justify-content: space-between;
+                padding: 0 90px;
+                &:nth-child(1) {
+                    margin-bottom: 15px;
+                }
+            }
+            text{
+                &:nth-child(2) {
+                    color: $color_main;
+                }
+            }
+        }
+        .payment_list_con{
+            padding: 20px 30px 0 30px;
+            .payment_list_item{
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                height: 123px;
+                &:nth-last-child(n+2) {
+                    border-bottom: 2px solid #F3F3F3;
+                }
+            }
+            .payment_list_item_left{
+                display: flex;
+                flex-direction: column;
+                font-size: $font_size;
+                .payment_list_item_left_name{
+                    display: flex;
+                    align-items: center;
+                }
+                .miconfont{
+                    font-size: 30px;
+                    color: #FFC300;
+                    padding-right: 10px;
+                }
+                .payment_list_item_left_price{
+                    font-size: $font_size_min;
+                    color: $color_font_two;
+                    padding-left: 35px;
+                    padding-top: 5px;
+                }
+            }
+            .miconfont_more{
+                font-size: 20px;
+            }
+        }
+    }
+    .btns{
+        background: #007aff;
+        border-radius: 40px;
+        width: 668px;
+        height: 82px;
+        text-align: center;
+        line-height: 80px;
+        width: 100%;
+        color: #fff;
+        font-size: 32px;
+        margin-top: 30px;
+    }
+}

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

@@ -0,0 +1,168 @@
+import { Text, View } from "@tarojs/components";
+import { memo, useEffect, useMemo, useState } from "react";
+import AmountShow from "../amountShow";
+import classnames from "classnames";
+import styles  from './index.module.scss'
+
+import MCheckbox from "@/components/checkbox";
+import Popup from "@/components/popup";
+import OfflinePay from "../offlinePay";
+import ScanPay from "../scanPay";
+import { GetOrderPayApi, SubmitOrderPayApi } from "@/api/orderPay";
+import { formatPriceDiv } from "@/common/fotmat";
+import {alert} from "@/common/common"
+
+type Param = {
+    show?: true|false,
+    onClose?: () => void,
+    orderId?: number, //应付单id
+    onSubmitSuccess?: () => void //支付成功
+}
+
+type PayInfo = {
+    amount: string
+}
+
+type PayStatus = 0|1|2|3|4|null //0:预存款， 1:账期，2：线下汇款， 3：扫码支付, 4:货到付款
+export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param) => {
+
+    //提交参数
+    const [submitData, setSubmitData] = useState<{id:number, payment_method: PayStatus}>({
+        id:0,
+        payment_method: null
+    })
+
+    //线下付款
+    const [offlinePayShow, setofflinePayShow] = useState(false)
+    const onShowOfflinePay = () => {
+        setofflinePayShow(true)
+        onClose?.()
+    }
+
+    //扫码支付
+    const [scanPayShow, setScanPayShow] = useState(false)
+    const onShowScanPay = () => {
+        setScanPayShow(true)
+        onClose?.()
+    }
+
+    //获取支付方式数据
+    const [payInfo, setPayInfo] = useState<any>()
+    const {fetchData: orderFetchData} = GetOrderPayApi()
+    const getOrderPay = async () => {
+        let {data} = await orderFetchData({id: orderId})
+        setPayInfo(() => data)
+    }
+    useEffect(() => {
+        if(show&&orderId)
+            setSubmitData((val) => ({...val, id:orderId}))
+            getOrderPay()
+    }, [show, orderId]) 
+
+    //预存款选择
+    const advanceSelectData = (val) => {
+        setSubmitData((e) => ({...e, payment_method:val}))
+    }
+    //账期选择
+    const periodSelectData = (val) => {
+        setSubmitData((e) => ({...e, payment_method:val}))
+    }
+
+    //提交支付
+    const {fetchData: submitFetchData} = SubmitOrderPayApi()
+    const submitPay = async () => {
+        if(submitData.payment_method === null) {
+            alert.error('请选择支付方式')
+            return false
+        }
+        alert.loading('正在支付')
+        let res = await submitFetchData(submitData)
+        if(res.success) {
+            alert.success('支付成功')
+            onSubmitSuccess?.()
+        } else {
+            alert.none(res.msg)
+        }
+    }
+
+    const advance_payment = useMemo(() => {
+        const price = formatPriceDiv(payInfo?.should_collect_money - payInfo?.amount_paid)
+        return (
+            <View className={styles.payment_list_item_left_price}>{(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{payInfo?.advance_deposit_balance}</View>
+        )
+    }, [payInfo])
+
+    return (
+        <View className={styles.payment_main}>
+            <Popup show={show} showTitle={false} onClose={onClose} >
+                <View className={styles.payment_con}>
+                    <View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
+                    <View className={styles.title}>订单支付</View>
+                    <View className={styles.amount}>
+                        <AmountShow status={2} number={formatPriceDiv(payInfo?.should_collect_money - payInfo?.amount_paid)}/>
+                    </View>
+                    <View className={styles.payment_list}>
+                        <View className={styles.payment_list_top_border}></View>
+                        <View className={styles.payment_list_title}>
+                            {/* <Text>向商家发起支付</Text> */}
+                            <View className={styles.payment_list_title_price}>
+                                <View className={styles.payment_list_title_price_item}>
+                                    <Text>订单金额</Text>
+                                    <Text>¥{formatPriceDiv(payInfo?.should_collect_money)}</Text>
+                                </View>
+                                <View className={styles.payment_list_title_price_item}>
+                                    <Text>已付金额</Text>
+                                    <Text>¥{formatPriceDiv(payInfo?.amount_paid)}</Text>
+                                </View>
+                            </View>
+                        </View>
+                        <View className={styles.payment_list_con}>
+                            <View className={styles.payment_list_item}>
+                                <View className={styles.payment_list_item_left}>
+                                    <View className={styles.payment_list_item_left_name}>
+                                        <View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
+                                        <View className={styles.payment_list_item_left_text}>预存款</View>
+                                    </View>
+                                    {advance_payment}
+                                </View>
+                                <MCheckbox  status={submitData.payment_method == 0} onSelect={() => advanceSelectData(0)} onClose={() => advanceSelectData(null)}/>
+                            </View>
+                            <View className={styles.payment_list_item}>
+                                <View className={styles.payment_list_item_left}>
+                                    <View className={styles.payment_list_item_left_name}>
+                                        <View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
+                                        <View className={styles.payment_list_item_left_text}>{payInfo?.account_period}天账期</View>
+                                    </View>
+                                    <View className={styles.payment_list_item_left_price}>可用额度 ¥{payInfo?.account_period_credit_available_line}</View>
+                                </View>
+                                <MCheckbox  status={submitData.payment_method == 1} onSelect={() => periodSelectData(1)} onClose={() => periodSelectData(null)}/>
+                            </View>
+                            <View className={styles.payment_list_item} onClick={onShowOfflinePay}>
+                                <View className={styles.payment_list_item_left}>
+                                    <View className={styles.payment_list_item_left_name}>
+                                        <View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
+                                        <View className={styles.payment_list_item_left_text}>线下汇款</View>
+                                    </View>
+                                </View>
+                                <View className={classnames('iconfont icon-a-moreback', styles.miconfont_more)}></View>
+                            </View>
+                            <View className={styles.payment_list_item} onClick={onShowScanPay}>
+                                <View className={styles.payment_list_item_left}>
+                                    <View className={styles.payment_list_item_left_name}>
+                                        <View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
+                                        <View className={styles.payment_list_item_left_text}>扫码支付</View>
+                                    </View>
+                                </View>
+                                <View className={classnames('iconfont icon-a-moreback', styles.miconfont_more)}></View>
+                            </View>
+                        </View>
+                    </View>
+                    <View className={styles.btns} onClick={submitPay}>确认交易</View>
+                </View>
+            </Popup>
+            <OfflinePay show={offlinePayShow} onClose={() => setofflinePayShow(false)}/>
+            <ScanPay show={scanPayShow} onClose={() => setScanPayShow(false)}/>
+        </View>
+        
+    )
+})

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

@@ -27,7 +27,7 @@ export default ({onBlur, onSave}:Param) => {
     }
     return (
         <View className={styles.order_popup}>
-            <View className={styles.order_popup_title}>添加备注</View>
+            <View className={styles.order_popup_title}>编辑备注</View>
             <View className={styles.order_popup_input}>
                 <Textarea placeholder="请添加备注" maxlength={descData.count} cursorSpacing={100} onInput={(e) => getDesc(e)} onBlur={(e) => onBlur?.(e)}></Textarea>
                 <View className={styles.descDataNum}>{descData.number}/{descData.count}</View>

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

@@ -0,0 +1,54 @@
+$top:170px;
+.scanPay_main{
+    .scanPay_con{
+        padding: 20px;
+        background-color: #F6F6F6;
+        border-radius: 20px;
+        .miconfont_title{
+            transform: rotate(-180deg);
+            position: absolute;
+            left: 20px;
+            top: 27px;
+            font-size: 37px;
+            color: $color_font_three;
+            z-index: 99;
+            
+        }
+    }
+    .title{
+        font-size: $font_size_big;
+        color: #000000;
+        text-align: center;
+        font-weight: 700;
+        position: relative;
+    }
+    .desc{
+        font-size: $font_size_min;
+        color: $color_main;
+        text-align: center;
+        padding: 10px 0;
+        .miconfont{
+            font-size: 25px;
+        }
+    }
+    
+    .scanPay_list{
+        border-radius: 10px;
+        height: 900px;
+        image{
+            width: 100%;
+        }
+    }
+    .btns{
+        background: #007aff;
+        border-radius: 40px;
+        width: 668px;
+        height: 82px;
+        text-align: center;
+        line-height: 80px;
+        width: 100%;
+        color: #fff;
+        font-size: 32px;
+        margin-top: 30px;
+    }
+}

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

@@ -0,0 +1,161 @@
+import { Image, ScrollView, Text, View } from "@tarojs/components";
+import { memo, useEffect, useRef, useState } from "react";
+import classnames from "classnames";
+import styles  from './index.module.scss'
+import Popup from "@/components/popup";
+import Taro from "@tarojs/taro";
+import { alert } from "@/common/common";
+import { formatImgUrl } from "@/common/fotmat";
+import useCheckAuthorize from "@/use/useCheckAuthorize";
+import { GetPayCode } from "@/api/onlinePay";
+import LoadingCard from "@/components/loadingCard";
+
+
+type Param = {
+    show?: true|false,
+    onClose?: () => void
+}
+
+
+type Item = {
+    product_code: string,
+    product_name: string,
+    product_color_code: string,
+    product_color_name: string,
+    num: string,
+    weight: string,
+    sale_price: string,
+    total_price: string
+}
+type CodeParam = {
+    title: string,
+    company: string,
+    order_type: string,
+    sale_user: string,
+    order_created_time: string,
+    order_no: string,
+    department: string,
+    shipment_mode: string,
+    target_user_name: string,
+    target_address: string,
+    target_description: string,
+    pay_account: string,
+    bank_account_name: string,
+    bank_name: string,
+    pay_type: string,
+    client: string,
+    phone: string,
+    order_total_length: string,
+    order_total_price: string,
+    qrcode: string,
+    order_total_weight: string,
+    list: Item[]
+}
+export default memo(({show = true, onClose}:Param) => {
+
+    //获取支付二维码
+    const [payCodeImage, setPayCodeImage] = useState<string>('')
+    const fileData = useRef({
+        filePath: '',
+        base64: ''
+    })
+    const {fetchData, state} = GetPayCode()
+    const getCore = async () => {
+        let res = await fetchData({
+            title: "面料销售电子确认单",
+            company: "什么什么公司123",
+            order_type: "散剪",
+            sale_user: "小崔",
+            order_created_time:"2022/02/01 12:32:13",
+            order_no:"XS-211005888",
+            department:"嘻嘻嘻",
+            shipment_mode:"自提",
+            target_user_name:"大崔",
+            target_address:"阿斯顿发斯蒂芬",
+            target_description:"无",
+            pay_account:"1234567890123450001",
+            bank_account_name:"佛山市浩川长盛科技有限公司",
+            bank_name:"招商银行佛山分行禅城支行",
+            pay_type:"现结",
+            client:"客户名称",
+            phone:"15818085802",
+            order_total_length:"12",
+            order_total_price:"63000",
+            qrcode:"https://www.zzfzyc.com/checkorder/XS-211005888",
+            order_total_weight:"300.00",
+            list: [{product_code:'5215',product_name:'26S双纱亲水滑爽棉',product_color_code:'053',product_color_name:'洋红',num:'4',weight:'123.23',sale_price:'43',total_price:'4510.7'}]
+        })
+        const base64 = res.data.base64
+        setPayCodeImage(() => base64)
+        const time = new Date().valueOf()
+        const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
+        let filePath = Taro.env.USER_DATA_PATH + '/img' + time +'.'+ format
+        fileData.current.filePath = filePath
+        fileData.current.base64 = bodyData
+        const save = Taro.getFileSystemManager()
+        save.writeFile({
+            filePath: fileData.current.filePath,
+            data: fileData.current.base64,
+            encoding: 'base64',
+        })
+        
+    }
+    useEffect(() => {
+        if(show)
+            getCore()
+    }, [show])
+
+    //检查是否开启保存图片权限
+    const {check} = useCheckAuthorize({scope:'scope.writePhotosAlbum', msg:'您没授权，无法保存图片'})
+    const saveImageCheck = async () => {
+        const res = await check()
+        res&&saveImage()
+    }
+
+    //保存图片
+    const saveImage = () => {
+        alert.loading('正在保存图片')
+        Taro.saveImageToPhotosAlbum({
+            filePath: fileData.current.filePath,
+            success: function (res) {
+                alert.success('图片保存成功')
+            },
+            fail: function (err) {
+                console.log('err::', err)
+            }
+        })
+    }
+
+    //预览图片
+    const showImage = () => {
+        console.log('fileData.current.filePath::', fileData.current.filePath)
+        Taro.previewImage({
+            current: fileData.current.filePath, // 当前显示
+            urls: [fileData.current.filePath] // 需要预览的图片http链接列表
+        })
+    }
+    
+    //复制功能
+    return (
+        <View className={styles.scanPay_main}>
+            <Popup show={show} showTitle={false} onClose={onClose}>
+                <View className={styles.scanPay_con}>
+                    <View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
+                    <View className={styles.title}>扫码支付</View>
+                    <View className={styles.desc}>
+                        <Text className={classnames(styles.miconfont, 'iconfont, icon-zhuyi')}></Text>
+                        扫码支付成功后，自动更新状态
+                    </View>
+                    <View className={styles.scanPay_list}>
+                        {(state.loading)&&<LoadingCard/>||
+                        <ScrollView scrollY className={styles.scanPay_list}>
+                            <Image mode="widthFix" src={payCodeImage} onClick={showImage}></Image>
+                        </ScrollView>}
+                    </View>
+                    <View className={styles.btns} onClick={saveImageCheck}>保存电子确认单</View>
+                </View>
+            </Popup>
+        </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,40 @@
+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,5 @@
 export default {
-  navigationBarTitleText: '确认订单'
+  navigationBarTitleText: '订单详情',
+  enablePullDownRefresh: true,
+  backgroundTextStyle: 'dark'
 }

src/pages/order/index.module.scss

@@ -37,19 +37,25 @@
         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;
+            word-break:break-all;
+        }
+        .order_desc_text_hint{
+            text-align: right;
         }
         .miconfont{
             font-size: 20px;
@@ -61,26 +67,32 @@
         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_btn_select{
+            color: $color_main;
+            border: 2px solid $color_main;
         }
         .order_number_desc{
             font-size: $font_size_medium;
@@ -115,4 +127,8 @@
         }
 
     }
+    .weight_memo_con{
+        margin-bottom: 20px;
+    }
+
 }

src/pages/order/index.tsx

@@ -1,23 +1,81 @@
-import { SaleOrderPreViewApi } from "@/api/order";
+import { 
+    GetSaleOrderDetailApi, 
+    EditSaleOrderRemarkApi, 
+    CancelOrderApi
+} from "@/api/order";
+import { GetOrderPayApi } from "@/api/orderPay";
+import { alert, goLink } from "@/common/common";
+import { formatDateTime, formatPriceDiv } from "@/common/fotmat";
+import OrderBtns from "@/components/orderBtns";
 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, usePullDownRefresh, useRouter } from "@tarojs/taro";
 import classnames from "classnames";
-import { useCallback, useEffect, useRef, useState } from "react";
-import AddressInfo from "./components/addressInfo";
-import EstimatedAmount from "./components/estimatedAmount";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import order from "../orderList/components/order";
+import AddressInfoDetail from "./components/addressInfoDetail";
 import KindList from "./components/kindList";
+import orderState from "./components/orderState";
 import OrderState from "./components/orderState";
+import Payment from "./components/payment";
 import Remark from "./components/remark";
 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)
+        }
+        Taro.stopPullDownRefresh()       
+    }
+
+    //监听获取到的数据
+    useEffect(() => {
+        if(orderDetail)
+            formatData()
+    }, [orderDetail])
+
+    //格式化数据格式
+    const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
+    const formatData = () => {  
+        setFormatDetailOrder({
+            estimate_amount: orderDetail.estimate_amount, //预估金额
+            sale_mode: orderDetail.sale_mode,
+            sale_mode_name: orderDetail.sale_mode_name, 
+            total_colors: orderDetail.total_colors, //总颜色数量
+            total_number: orderDetail.total_number, //总数量
+            total_fabrics: orderDetail.total_fabrics, //面料数量
+            unit: orderDetail.sale_mode == 0?'条':'m', //单位
+            list: orderDetail.product_list,
+            status: orderDetail.status, //订单状态
+            total_sale_price: orderDetail.total_sale_price, //销售金额
+            total_should_collect_money: orderDetail.total_should_collect_money, //应收金额
+            total_weight_error_discount: orderDetail.total_weight_error_discount, //空差优惠
+        })
+    }
+    const formatPreViewOrderMemo = useMemo(() => {
+        return formatDetailOrder
+    }, [formatDetailOrder])
+
+    //复制功能
     const clipboardData = () => {
         Taro.setClipboardData({
-            data: '123123121321',
+            data: orderDetail?.order_no||'',
             success: function (res) {
                 Taro.showToast({
                     icon: 'none',
@@ -26,66 +84,136 @@ 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) {
+            getSaleOrderPreView()
+            alert.success('提交成功')
+        } else {
+            alert.error(res.msg)
+        }
+        setShowDesc(() => false)
     }, [])
 
-    //获取销售订单预览图
-    const {fetchData} = SaleOrderPreViewApi()
-    const getSaleOrderPreView = async () => {
-        if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) {
-            let res = await fetchData(idsAndSaleModel.current)
-            console.log('res::', res)
-        }       
+    //去付款
+    const [payMentShow, setPayMentShow] = useState(false)
+    const toPay = () => {
+        setPayMentShow(true)
     }
 
+    //打开地址修改
+    const addressRef = useRef<any>(null)
+
+    //修改收货方式
+    const getShipmentMode = useCallback(() => {
+        getSaleOrderPreView()
+    }, [orderDetail])
+
+    //修改地址
+    const getAddress = useCallback(() => {
+        getSaleOrderPreView()
+    }, [orderDetail])
+
+    //获取底部按钮点击, 获取按钮状态
+    const orderStateClick = useCallback((val) => {
+        console.log('val::', val)
+        if(val == 1) {
+            //取消订单
+            getSaleOrderPreView()
+        }
+        if(val == 2) {
+            //待付款
+            toPay()
+        }
+    }, [orderDetail])
+
+    //页面下拉刷新
+    usePullDownRefresh(() => {
+        getSaleOrderPreView()
+    })
+
+    //支付成功
+    const onPaySuccess = useCallback(() => {
+        getSaleOrderPreView()
+        closePayShow()
+    }, [orderDetail])
+
+    //关闭支付弹窗
+    const closePayShow = useCallback(() => {
+        setPayMentShow(() => false)
+    }, [orderDetail])
+
+    //按钮所需数据
+    const orderInfo = useMemo(() => {
+        return {
+            status: orderDetail?.status,
+            orderId: orderDetail?.id,
+            payModel: orderDetail?.id, //支付方式
+            realPayPrice: orderDetail?.id, //实付金额
+            pendingPayPrice: orderDetail?.id, //待付金额
+        }
+    }, [orderDetail])
+
     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>
-            <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>
+            {/* <View className={styles.weight_memo_con}>
+                <WeightMemo/>
+            </View> */}
+            <OrderState list={orderDetail?.logistics_details}/>
+            <View >
+                <AddressInfoDetail orderId={orderDetail?.id} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} defaultValue={defaultAddress} shipment_mode={orderDetail?.shipment_mode}/>
             </View>
+            <KindList value={formatPreViewOrderMemo}/>
             <View className={styles.order_info} >
-                <View className={styles.order_info_title}>订单备注</View>
-                <SearchInput showBorder={false} title='单号'>
+                <View className={styles.order_info_title}>订单信息</View>
+                <SearchInput showBorder={false} title='单号' height={50}>
                     <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>
+                <SearchInput showBorder={false} title='下单时间' height={50}>
+                    <Text>{formatDateTime(orderDetail?.create_time)}</Text>
+                </SearchInput>
+                <SearchInput showBorder={false} title='付款时间' height={50}>
+                    <Text>{formatDateTime(orderDetail?.create_time)}</Text>
                 </SearchInput>
             </View>
+            <View className={styles.order_desc} onClick={() => setShowDesc(true)}>
+                <View className={styles.order_desc_con}>订单备注</View>
+                {
+                    orderRemark&&<View className={styles.order_desc_text}>{orderDetail?.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}>
-                    <EstimatedAmount style={{color:'#007AFF'}} number={price}/>    
-                    <View className={styles.order_number_desc}>2种面料，6种颜色，共6条</View>
-                </View>
-                <View className={styles.order_btn}>提交订单</View>    
+                <OrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
+                {/* <View className={styles.order_btn} onClick={() => toPay()}>去支付</View>     */}
             </View>        
             <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
-                <Remark onSave={(e) => console.log(e)}/>
+                <Remark onSave={(e) => getRemark(e)}/>
             </Popup>
+            <Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderId={orderDetail?.should_collect_order_id}/>
             <View className="common_safe_area_y"></View>
         </View>
     )

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

@@ -0,0 +1,121 @@
+.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;
+    }
+}

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

@@ -0,0 +1,90 @@
+import { goLink } from "@/common/common";
+import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
+import OrderBtns from "@/components/orderBtns";
+import { useSelector } from "@/reducers/hooks";
+import { Image, Text, View } from "@tarojs/components"
+import classnames from "classnames";
+import { memo, useCallback, useMemo, useRef } from "react";
+import styles  from './index.module.scss'
+
+type Param = {
+    value?: {
+        order_no: string,
+        sale_mode: number,
+        sale_mode_name: string,
+        status_name: string,
+        shipment_mode_name: string,
+        product_list: any[],
+        total_fabrics: number,
+        total_colors: number,
+        total_number: number,
+        status: 0,
+        id: number
+    },
+    onClickBtn?: (val:number) => void
+}
+export default memo(({value, onClickBtn}: Param) => {
+    const userInfo = useSelector(state => state.userInfo)
+    //对应数量
+    const formatCount = useCallback((item, sale_mode) => {
+        return sale_mode == 0? item.roll : Number(item.length / 100)
+    }, [value])
+    //对应单价
+    const standardPrice = useCallback((price, sale_mode) => {
+        return formatPriceDiv(price).toLocaleString() + '/' + (sale_mode == 1?'m':'kg')
+    }, [value])
+
+    //点击订单按钮
+    const orderBtnsClick = useCallback((status) => {
+        onClickBtn?.(status)
+    }, [value])
+
+    return (
+        <View className={styles.order_item}>
+            <View className={styles.header} onClick={() => goLink('/pages/order/index', {id: value?.id})}>
+                <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>订单号：{value?.order_no}</Text>
+                <Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text>
+                </View>
+                <View className={styles.tag}>{value?.shipment_mode_name}</View>
+            </View>
+            <View className={styles.product_con} onClick={() => goLink('/pages/order/index', {id: value?.id})}>
+                <View className={styles.product_title}>
+                    <View className={styles.product_tag}>{value?.sale_mode_name}</View>
+                    <View className={styles.product_name}>{formatHashTag(value?.product_list[0].code, value?.product_list[0].name)}</View>
+                    <View className={styles.product_status}>{value?.status_name}</View>
+                </View>
+                <View className={styles.product_list}>
+                    <View className={styles.image}>
+                    <Image src={formatImgUrl(value?.product_list[0].product_colors[0].texture_url)}/>
+                    <View className={styles.color_num}>{value?.product_list[0].product_colors[0].code}</View>
+                    </View>
+                    <View className={styles.color_list}>
+                        {value?.product_list[0].product_colors.map((itemColor, index) => {
+                                return (
+                                    (index <= 1)&&<View className={styles.color_item}>
+                                        <View className={styles.color_title}>{formatHashTag(itemColor.code, itemColor.name)}</View>
+                                        <View className={styles.color_price}>{standardPrice(itemColor.sale_price, value.sale_mode)}</View>
+                                        <View className={styles.color_num}>×{formatCount(itemColor, value.sale_mode)}条</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}>{`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`}</View>
+            </View>
+            <OrderBtns status={value?.status} onClick={orderBtnsClick} orderId={value?.id as number}/>
+        </View>
+    )
+})
+

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

@@ -0,0 +1,18 @@
+.order_status_list{
+    font-size: $font_size;
+    color: #9E9E9E;
+    margin-top: 20px;
+    .order_status_item{
+        padding: 20px;
+        box-sizing: border-box;
+    }
+    .selected{
+        font-weight: 700;
+        color: #000;
+        border-bottom: 4px solid #707070;
+    }
+    .order_list_scroll{
+        white-space: nowrap;
+        display: flex;
+    }
+}

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

@@ -0,0 +1,46 @@
+import { ScrollView, View } from "@tarojs/components"
+import { memo, useEffect, useState } from "react"
+import styles  from './index.module.scss'
+import classnames from "classnames";
+
+type Param = {
+    list: {id: number, name: string}[],
+    defaultId?: number|null,
+    onSelect?: (val: number) => void
+}
+export default memo(({list = [], defaultId = null, onSelect}: Param) => {
+    const [selectInfo, setSelectInfo] = useState({
+        selected: -1, //当前选中的id
+        tabId: '', //需要滚动到的id
+    })
+    useEffect(() => {
+        if(defaultId) {
+            const index = list?.findIndex(item => {
+                console.log(item.id, defaultId)
+                return item.id == defaultId 
+            })
+            if(index !== -1) {
+                const num = index > 0?( index - 1) : 0
+                setSelectInfo((e) => ({...e, tabId:list[num].id.toString()}))
+            }
+        }
+    }, [defaultId])
+    const clickEvent = ({item, index}: {item:any, index:number}) => {
+        const num = index > 0?( index - 1) : 0
+        setSelectInfo((e) => ({...e, tabId:list[num].id.toString(), selected: item.id}))
+        onSelect?.(item.id)
+    }
+
+    return (
+        <View className={styles.order_status_list}>
+          <ScrollView scrollX  scrollIntoView={`tabs_${selectInfo.tabId}`} scrollWithAnimation={true}>
+            <View className={styles.order_list_scroll}> 
+              {list.map((item, index) => {
+                return <View key={item.id} id={`tabs_${item.id}`} onClick={() => clickEvent({item, index})}  className={classnames(styles.order_status_item, (selectInfo.selected==item.id)&&styles.selected)}>{item.name}</View>
+              })}
+            </View>
+          </ScrollView>
+        </View>
+    )
+})
+

src/pages/orderList/index.config.ts

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

src/pages/orderList/index.module.scss

@@ -0,0 +1,38 @@
+.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{
+            font-size: $font_size;
+            color: #9E9E9E;
+            margin-top: 20px;
+            .order_status_item{
+                padding: 20px;
+                box-sizing: border-box;
+            }
+            .selected{
+                font-weight: 700;
+                color: #000;
+                border-bottom: 4px solid #707070;
+            }
+            .order_list_scroll{
+                white-space: nowrap;
+                display: flex;
+            }
+        }
+    }
+    .order_list{
+        flex:1;
+        height: 0;
+        .order_item_con{
+            margin-top: 20px;
+            padding: 0 20px;
+        }
+    }
+}

src/pages/orderList/index.tsx

@@ -0,0 +1,112 @@
+import Search from "@/components/search"
+import useLogin from "@/use/useLogin"
+import { Image, ScrollView, Text, View } from "@tarojs/components"
+import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import styles  from './index.module.scss'
+import classnames from "classnames";
+import Order from "./components/order"
+import InfiniteScroll from "@/components/infiniteScroll"
+import {GetOrderStatusListApi, GetOrderListApi} from '@/api/order'
+import { dataLoadingStatus, getFilterData } from "@/common/util"
+import OrderStatusList from "./components/orderStatusList"
+
+export default () => {
+  const {checkLogin} = useLogin()
+  useDidShow(async () => {
+    await checkLogin()
+  })
+
+  //搜索参数
+  const [searchField, setSearchField] = useState({
+    status: -1,
+    page : 1,
+    size : 10,
+    Name:''
+  })
+
+  //获取订单状态
+  const {fetchData: statusFetchData} = GetOrderStatusListApi()
+  const [statusList, setStatusList] = useState<any[]>([{id: -1, name: '全部'}])
+  const getOrderStatusList = async () => {
+    let res = await statusFetchData()
+    let list = [...statusList, ...res.data.list||[]]
+    setStatusList(() => list)
+  }
+  useEffect(() => {
+    getOrderStatusList()
+  }, [])
+
+  //获取订单列表
+  const {fetchData: listFetchData, state:orderState} = GetOrderListApi()
+  const [orderData, setOrderData] = useState<{list:any[], total:number}>({list:[], total:0})
+  const getOrderList = async () => {
+    let res = await listFetchData(getFilterData(searchField))
+    setOrderData({list: res.data.list, total: res.data.total})
+    setRefresherTriggeredStatus(() => false)
+  }
+
+
+  //监听筛选条件变化
+  useEffect(() => {
+      getOrderList()
+  }, [searchField])
+
+  //上拉加载数据
+  const pageNum = useRef({size: searchField.size, page: searchField.page})
+  const getScrolltolower = useCallback(() => {
+      if(orderData.list.length < orderData.total) {
+          pageNum.current.page++
+          const size = pageNum.current.size * pageNum.current.page
+          setSearchField({...searchField, size })
+      }
+  }, [orderData])
+
+  //状态改变
+  const changeStatus = useCallback((e) => {
+    pageNum.current.page = 1
+    setSearchField((value) => ({...value, status:e,  size:10}))
+    setOrderData(() => ({list:[], total:0}))
+  }, [])
+
+
+  //数据加载状态
+  const statusMore = useMemo(() => {
+    return dataLoadingStatus({list:orderData.list, total: orderData.total, status: orderState.loading})
+  }, [orderData, orderState])
+
+  //输入了搜索关键字
+  const getSearchData = useCallback((e) => {
+    pageNum.current.page = 1
+    setOrderData(() => ({list:[], total:0}))
+    setSearchField((val) => ({...val, name:e, size:10}))
+  }, [])
+
+  const clickOrderBtn = useCallback((state) => {
+    getOrderList()
+  }, [orderData])
+
+  //列表下拉刷新
+  const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
+  const getRefresherRefresh = async () => {
+    pageNum.current.size = 1
+    setRefresherTriggeredStatus(true)
+    setSearchField((val) => ({...val, size:10}))
+  }
+  
+  return (
+    <View className={styles.order_list_main}>
+      <View className={styles.title}>
+        <Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true}  changeOnSearch={getSearchData} debounceTime={300}/>
+        <OrderStatusList list={statusList} onSelect={changeStatus} defaultId={1}/>
+      </View>
+      <View className={styles.order_list}>
+          <InfiniteScroll statusMore={statusMore} selfonScrollToLower={getScrolltolower} refresherEnabled={true} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={getRefresherRefresh}>
+            {orderData?.list.map(item => {
+              return <View key={item.id} className={styles.order_item_con}> <Order value={item} onClickBtn={clickOrderBtn}/></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})
         }
-    }, [state.deviceLab])
+    }, [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])
+    }
 
     //页面下拉刷新
-    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>
-                    </ScrollView>
+                    <View className={styles.filter_scroll}>
+                        <SelectData list={selectList}/>
+                    </View>
                     <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}>
@@ -45,7 +132,7 @@ export default () => {
                         <Text>综合</Text>
                         <SortBtn status="top"/>
                     </View>
-                    <View className={styles.text_sc} >
+                    <View className={styles.text_sc}>
                         <Text>收藏</Text>
                         <SortBtn status="top"/>
                     </View>
@@ -66,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
+    }
+}