筛选完成

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,14 @@ import { useRequest } from "@/use/useHttp"
         url: `/v1/mall/saleOrder/preView`,
         method: "put",
     })
-}
+}
+
+/**
+ * 获取销售单详情
+ */
+ export const GetSaleOrderDetailApi = () => {
+    return useRequest({
+        url: `/v1/mall/saleOrder`,
+        method: "get",
+    })
+}

src/components/AddressList/index.tsx

@@ -3,6 +3,7 @@ import { Button, Navigator, ScrollView, Text, View } from "@tarojs/components"
 import { memo, useEffect, useState } from "react"
 import "./index.scss"
 import {addressListApi} from "@/api/addressManager"
+import { useDidShow } from "@tarojs/taro"
 
 interface Params{
   refresherEnabled?: boolean,//是否开启刷新

src/components/filter/index.tsx

@@ -3,23 +3,26 @@ 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 //确定搜索
     onRest?: (val:Object) => void //重置
 } & PopuParams
-export default ({onClose, onFiltr, show = false, onRest}:params) => {
+export default memo(({onClose, onFiltr, show = false, onRest}:params) => {
 
     //搜索条件
     const [filterObj, setFilterObj] = useState({
+        seriesName: '',
         seriesId: '',
         width: '',
         weight: '',
-        element: ''
+        element: '',
     })
 
+    const selectFieldValue = useRef({width:'幅宽', weight:'克重', element:'成分', seriesName:'系列'})
+
     //获取系列
     const {fetchData: kindFetchData} = GetProductKindListApi()
     const [kindList, setKindList] = useState<any[]>([])
@@ -34,7 +37,7 @@ export default ({onClose, onFiltr, show = false, onRest}:params) => {
 
     //切换系列
     const changeKind = (e) => {
-        setFilterObj({...filterObj, seriesId:e.id})
+        setFilterObj({...filterObj, seriesId:e.id, seriesName: e.name})
     }
 
     const onCloseEven = () => {
@@ -44,10 +47,11 @@ export default ({onClose, onFiltr, show = false, onRest}:params) => {
     //重置数据
     const onRestEven = () => {
         let res = {
+            seriesName: '',
             seriesId: '',
             width: '',
             weight: '',
-            element: ''
+            element: '',
         }
         setFilterObj(res)
         onFiltr?.(filterObj)
@@ -56,7 +60,7 @@ export default ({onClose, onFiltr, show = false, onRest}:params) => {
 
     //提交搜索
     const onVerify = () => {
-        onFiltr?.(filterObj)
+        onFiltr?.({data:filterObj, field: selectFieldValue.current})
         onClose?.()
     }
 
@@ -67,7 +71,6 @@ export default ({onClose, onFiltr, show = false, onRest}:params) => {
     }
 
     return (
-        
         <Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
             <View className={styles.popup_main}>
                 <View className={styles.popup_title}>全部筛选</View>
@@ -82,14 +85,14 @@ export default ({onClose, onFiltr, show = false, onRest}:params) => {
                         <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.width} type="digit" onBlur={(e) => setFieldData(e,'width')} 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.weight} onBlur={(e) => setFieldData(e,'weight')}  placeholder="请输入克重" placeholderStyle="font-size: 26rpx"/></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>
@@ -111,6 +114,5 @@ export default ({onClose, onFiltr, show = false, onRest}:params) => {
                 </View>
             </View>
         </Popup>
-
     )
-}
+})

src/components/search/index.tsx

@@ -20,7 +20,7 @@ type Params = {
     defaultValue?: string
 }
 
-export default forwardRef(({
+export default memo(forwardRef(({
     clickOnSearch,  //点击筛选按钮触发
     changeOnSearch, //输入文字触发
     disabled = false, //是否禁用
@@ -35,7 +35,6 @@ export default forwardRef(({
 }:Params, ref) => {
     const [inputCon , setInputCon] = useState('')
     const debounceTimeRef = useRef(0)
-
     useEffect(() => {
         setInputCon(defaultValue)
     }, [defaultValue])
@@ -81,4 +80,4 @@ export default forwardRef(({
             </View>
         </>
     )
-})
+}))

src/components/shopCart/index.tsx

@@ -11,6 +11,7 @@ import { alert, goLink } from "@/common/common";
 import {GetShoppingCartApi, DelShoppingCartApi} from "@/api/shopCart"
 import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
 import { setParam } from "@/common/system";
+import { debounce } from "@/common/util";
 
 type param = {
     show?: true|false,
@@ -194,7 +195,7 @@ export default ({show = false, onClose}: param) => {
     },[list])
 
     //去结算
-    const orderDetail = () => {
+    const orderDetail = debounce(() => {
         getSelectId()
         if(selectIds.current.length == 0) {
             alert.error('请选择面料')
@@ -203,8 +204,7 @@ export default ({show = false, onClose}: param) => {
             setParam({ids, sale_mode:selectIndex})
             goLink('/pages/order/comfirm')
         }
-        
+    }, 500)
-    }
     
     return (
         <View className={styles.shop_cart_main}>

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

@@ -14,7 +14,7 @@ import {AddShoppingCartApi} from "@/api/shopCart"
 import Taro, { useRouter } from "@tarojs/taro";
 import UseLogin from "@/use/useLogin"
 import { formatHashTag, formatPriceDiv } from "@/common/fotmat";
-import { getFilterData } from "@/common/util";
+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)
@@ -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)
@@ -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/index/index.tsx

@@ -13,6 +13,7 @@ import useManualPullDownRefresh from '@/use/useManualPullDownRefresh'
 
 import {GetProductKindListApi, GetProductListApi} from '@/api/material'
 import useLogin from '@/use/useLogin'
+import LoadingCard from '@/components/loadingCard'
 
 export default () => {
 
@@ -98,8 +99,8 @@ export default () => {
         <Banner/>
         <View className={styles.search}>
           <View className={styles.search_collect}>我的收藏</View>
-          <View className={styles.search_input}>
+          <View className={styles.search_input} onClick={() => goLink('/pages/searchList/search')}>
-            <Search disabled={true} style={{width: '263rpx'}} clickOnSearch={() => goLink('/pages/searchList/search')}/>
+            <Search disabled={true} style={{width: '263rpx'}} />
           </View>
         </View>
         <View className={styles.products}>

src/pages/order/comfirm.module.scss

@@ -46,14 +46,18 @@
         border-radius: 20px;
         margin-top: 20px;
         .order_desc_con{
-            flex:1;
+            width: 150px;
             font-size: $font_size;
             font-weight: 700;
         }
-        .order_desc_text{
+        .order_desc_text, .order_desc_text_hint{
             font-size: $font_size_medium;
             color: $color_font_two;
             margin-right: 10px;
+            flex:1;
+        }
+        .order_desc_text_hint{
+            text-align: right;
         }
         .miconfont{
             font-size: 20px;
@@ -86,6 +90,9 @@
             align-items: center;
             color: #fff;
         }
+        .ok_order_btn {
+            opacity: 1;
+        }
         .order_number_desc{
             font-size: $font_size_medium;
             color: $color_font_two;

src/pages/order/comfirm.tsx

@@ -1,30 +1,35 @@
-import { SaleOrderPreViewApi } from "@/api/order";
+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, { useRouter } from "@tarojs/taro";
+import Taro, { useDidShow, useRouter } from "@tarojs/taro";
 import classnames from "classnames";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import AddressInfo from "./components/addressInfo";
+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";
  
  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 [submitOrder, setSubmitOrder] = useState<OrderParams>()
+    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})
-    useEffect(() => {
+    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({
@@ -32,11 +37,11 @@ import { getParam } from "@/common/system";
             })
         })
         getSaleOrderPreView()
-        setSubmitOrder((val) => ({...val, sale_mode:param?.sale_mode}))
+        setSubmitOrderData((val) => ({...val, sale_mode:param?.sale_mode}))
-    }, [])
+    })
 
     //获取销售预览订单
-    type preViewOrderParam = {estimate_amount:number, estimate_weight:number, product_color_list:any[], sale_mode:number, sale_mode_name:string}
+    type preViewOrderParam = {estimate_amount:number, estimate_weight:number, product_color_list:any[], sale_mode:number, sale_mode_name:string, default_address:AddressInfoParam}
     const [preViewOrder, setPreViewOrder] = useState<preViewOrderParam>() //获取到的原始数据
     const {fetchData} = SaleOrderPreViewApi()
     const getSaleOrderPreView = async () => {
@@ -48,8 +53,11 @@ import { getParam } from "@/common/system";
 
     //监听获取到的数据
     useEffect(() => {
-        if(preViewOrder)
+        if(preViewOrder) {
             formatData()
+            //当有默认地址时设置默认地址id
+            preViewOrder.default_address&&setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id}))
+        }
     }, [preViewOrder])
 
     //格式化数据格式
@@ -83,16 +91,34 @@ import { getParam } from "@/common/system";
                 unit: preViewOrder.sale_mode == 0?'条':'m', //单位
                 list: Object.values(dataList)
             })
-            setSubmitOrder({...submitOrder, list: orderList})
+            setSubmitOrderData({...submitOrderData, list: orderList})
         }
     }
     const formatPreViewOrderMemo = useMemo(() => {
+        console.log('formatPreViewOrder::',formatPreViewOrder)
         return formatPreViewOrder
     }, [formatPreViewOrder])
 
+    //格式化初始地址
+    const defaultAddress = useMemo(() => {
+        const address = preViewOrder?.default_address
+        if(address) {
+            return  {
+                province_name: address.province_name,
+                city_name: address.city_name,
+                district_name: address.district_name,
+                address_detail: address.address_detail,
+                id: address.id,
+                name: address.name,
+                phone: address.phone
+            }
+        }
+        return null
+    }, [preViewOrder])
+
     //获取地址
     const getAddress = (e) => {
-        setSubmitOrder((val) => ({...val, address_id:e.id}))
+        setSubmitOrderData((val) => ({...val, address_id:e.id}))
     }
 
     //收货方法 1:自提，2：物流
@@ -101,41 +127,72 @@ import { getParam } from "@/common/system";
         {value:2, label:'物流', selected:false}
     ]) 
     const selectShipmentMode = (value) => {
-        setSubmitOrder((val) => ({...val, shipment_mode:value}))
+        setSubmitOrderData((val) => ({...val, shipment_mode:value}))
     }
 
     //获取备注
     const getRemark = useCallback((e) => {
-        setSubmitOrder((val) => ({...val, remark:e}))
+        setSubmitOrderData((val) => ({...val, remark:e}))
+        setShowDesc(() => false)
     }, [])
 
     //提交按钮是否可用
     const btnStatus = useMemo(() => {
-        console.log('submitOrder::',submitOrder)
+        console.log('submitOrder::',submitOrderData)
-        return submitOrder?.address_id&& submitOrder.list?.length &&submitOrder.shipment_mode
+        return submitOrderData?.address_id&& submitOrderData.list?.length &&submitOrderData.shipment_mode
-    }, [submitOrder])
+    }, [submitOrderData])
 
+    //提交订单
+    const {fetchData: saleOrderFetchData} = SaleOrderApi()
+    const submitOrderEven =  () => {
+        if(!submitOrderData?.address_id) {
+            alert.error('请选择地址')
+            return false
+        }
+        if(!submitOrderData?.shipment_mode) {
+            alert.error('请选择收货方式')
+            return false
+        }
+        Taro.showModal({
+            title: '确定提交？',
+            success: async function (res) {
+              if (res.confirm) {
+                const res = await saleOrderFetchData(submitOrderData)
+                if(res.success) {
+                    goLink('/pages/order/index',{id: res.data.id})
+                } else {
+                    alert.none(res.msg)
+                }
+              } else if (res.cancel) {
+                console.log('用户点击取消')
+              }
+            }
+        })
+    }
     return (
         <View className={styles.order_main}>
             <View className={styles.order_title}>
                 <Text>收货方式</Text>
                 {shipmentMode.current.map(item => {
-                    return <View className={classnames(styles.order_status, (submitOrder?.shipment_mode == item.value)&&styles.order_status_selected)} onClick={() => selectShipmentMode(item.value)}>{item.label}</View>
+                    return <View className={classnames(styles.order_status, (submitOrderData?.shipment_mode == item.value)&&styles.order_status_selected)} onClick={() => selectShipmentMode(item.value)}>{item.label}</View>
                 })}              
             </View>
-            <AddressInfo onSelect={(e) => getAddress(e)}/>
+            <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>
-                <View className={styles.order_desc_text}>点击填写</View>
+                {
-                <View className={classnames(styles.miconfont, 'iconfont icon-jiantou')}></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}>
                     <EstimatedAmount style={{color:'#007AFF'}} number={formatPriceDiv(formatPreViewOrder?.estimate_amount)}/>    
                     <View className={styles.order_number_desc}>{`${formatPreViewOrder?.list.length}种面料，${formatPreViewOrder?.colo_count}种颜色，共${formatPreViewOrder?.num_count + formatPreViewOrder?.unit}`}</View>
                 </View>
-                <View className={classnames(styles.order_btn)}>提交订单{btnStatus?'true':'false'}</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)}/>

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

@@ -5,25 +5,39 @@ import classnames from "classnames";
 import { memo, useCallback, useEffect, 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
+    onSelect?: (val:any) => void,
+    defaultValue?: AddressInfoParam|null
 }
 
-export default memo(({onSelect}: Param) => {
+export default memo(({onSelect, defaultValue = null}: Param) => {
     const [showAddressList, setShowAddressList] = useState(false)
 
+    useEffect(() => {
+        setUserInfo(() => defaultValue)
+    }, [defaultValue])
+
     //选择地址
     const [userInfo, setUserInfo] = useState<any>()
     const getAddress = useCallback((val) => {
-        setShowAddressList(false)
+        setShowAddressList(() => false)
-        setUserInfo(val)
+        setUserInfo(() => val)
         onSelect?.(val)
     }, [])
 
     //地址格式
     const formatAddress = useMemo(() => {
         if(userInfo) {
+            console.log('userInfo::',userInfo)
             return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail
         }
     }, [userInfo])

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;
@@ -90,7 +96,6 @@
             }
         }
     }
-
     .order_estimated_amount{
         display: flex;
         align-items: flex-end;

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

@@ -1,6 +1,6 @@
 import { formatHashTag, formatPriceDiv } from "@/common/fotmat"
 import { View } from "@tarojs/components"
-import { memo, useCallback } from "react"
+import { memo, useCallback, useMemo } from "react"
 import EstimatedAmount from "../estimatedAmount"
 import styles  from './index.module.scss'
 
@@ -10,21 +10,30 @@ type OrderParam = {
     list: any[], 
     sale_mode: number,
     sale_mode_name: string
-    unit: string
+    unit: string,
+    colo_count: number,
+    num_count: number
 }
 
 
-export default memo(({value}:{value:OrderParam}) => {
+export default memo(({value}:{value:OrderParam|null}) => {
     //对应数量
     const formatCount = useCallback((item) => {
-        return value.sale_mode == 0? item.roll : Number(item.length / 100)
+        return value?.sale_mode == 0? item.roll : Number(item.length / 100)
     }, [value])
     //对应单价
     const standardPrice = useCallback(item => {
-        return formatPriceDiv(item.standard_price).toLocaleString() + '/' + (value.sale_mode == 1?'m':'kg')
+        return formatPriceDiv(item.standard_price).toLocaleString() + '/' + (value?.sale_mode == 1?'m':'kg')
+    }, [value])
+
+    //数量格式
+    const numText = useMemo(() => {
+        if(value)
+            return `${value?.list.length}种面料，${value?.colo_count}种颜色，共${value?.num_count }${value?.unit}`
     }, [value])
     return (
         <>
+            <View className={styles.orders_list_title}>{numText}</View>
             <View className={styles.orders_list_con}>
                 {
                     value?.list.map(item => {

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,90 @@
 .order_flow_state{
-    display: flex;
-    align-items: center;
-    padding: 0 30px;
-    height: 116px;
     background-color: #fff;
     border-radius: 20px;
-    .order_flow_state_text{
+    padding: 20px;
-        color: $color_main;
+    box-sizing:border-box;
-        font-size:$font_size;
+    .order_status_list{
-        font-weight: 700;
+        max-height: 250px;
+        overflow: hidden;
+        transition: all 0.3s ease-in-out;
     }
-    .order_flow_state_desc{
+    .order_status_list_show {
-        color: $color_font_three;
+        max-height: 1000px !important;
-        font-size: $font_size_medium;
+    }
-        margin-left: 50px;
+    .order_status_item{
+        position: relative;
+        padding-left: 50px;
+        min-height: 120px;
+        .order_status_tail_end, .order_status_tail{
+            width: 20px;
+            height: 20px;
+            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: 4px solid $color_main;
+            height: 100%;
+            top: 10px;
+            left: 10px;
+            position: absolute;
+            z-index: 1;
+        }
+        .order_status_content{
+            display: flex;
+            align-items: center;
+            .order_status_title{
+                color: $color_font_two;
+                font-size: $font_size_big;
+                font-weight: 700;
+            }
+            .order_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);
+        }
     }
 }

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

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

src/pages/order/index.tsx

@@ -1,5 +1,5 @@
-import { SaleOrderPreViewApi } from "@/api/order";
+import { GetSaleOrderDetailApi } from "@/api/order";
-import { formatPriceDiv } from "@/common/fotmat";
+import { formatDateTime, formatPriceDiv } from "@/common/fotmat";
 import Popup from "@/components/popup";
 import SearchInput from "@/components/searchInput";
 import { Text, Textarea, View } from "@tarojs/components"
@@ -16,72 +16,62 @@ import styles  from './index.module.scss'
  export default () => {
     const [showDesc, setShowDesc] = useState(false)
     
-    //获取购物车传过来的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()
     }, [])
 
-    //获取销售预览订单
+    //获取订单详情
-    type preViewOrderParam = {estimate_amount:number, estimate_weight:number, product_color_list:any[], sale_mode:number, sale_mode_name:string}
+    const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
-    const [preViewOrder, setPreViewOrder] = useState<preViewOrderParam>() //获取到的原始数据
+    const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi()
-    const {fetchData} = SaleOrderPreViewApi()
     const getSaleOrderPreView = async () => {
-        if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) {
+        if(router.params.id) {
-            let res = await fetchData(idsAndSaleModel.current)
+            let res = await getOrderFetchData({id: router.params.id})
-            setPreViewOrder(res.data)
+            setOrderDetail(res.data)
         }       
     }
 
     //监听获取到的数据
     useEffect(() => {
-        if(preViewOrder)
+        if(orderDetail)
             formatData()
-    }, [preViewOrder])
+    }, [orderDetail])
 
     //格式化数据格式
-    const [formatPreViewOrder, setFormatPreViewOrder] = useState<any>() //格式化后的数据
+    const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
     const formatData = () => {  
-        if(preViewOrder?.product_color_list&&preViewOrder?.product_color_list.length > 0) {
+        if(orderDetail?.color_list&&orderDetail?.color_list.length > 0) {
             let dataList = {}
             let num_count = 0 //总数量
-            preViewOrder?.product_color_list.map(item => {
+            orderDetail?.color_list.map(item => {
                 dataList[item.product_code] =  dataList[item.product_code]||{}
                 dataList[item.product_code].product_code = item.product_code
                 dataList[item.product_code].product_name = item.product_name
-                dataList[item.product_code].sale_mode_name = preViewOrder.sale_mode_name
+                dataList[item.product_code].sale_mode_name = orderDetail.sale_mode_name
                 dataList[item.product_code].color_list =  dataList[item.product_code]?.color_list||[]
                 dataList[item.product_code].color_list.push(item)
                 //大货
-                if (preViewOrder.sale_mode == 0) num_count += item.roll
+                if (orderDetail.sale_mode == 0) num_count += item.roll
                 //剪板或散件
-                if (preViewOrder.sale_mode == 1 || preViewOrder.sale_mode == 2) num_count += item.length
+                if (orderDetail.sale_mode == 1 || orderDetail.sale_mode == 2) num_count += item.length
             })
-            if (preViewOrder.sale_mode == 1 || preViewOrder.sale_mode == 2) num_count = Number(num_count / 100);
+            if (orderDetail.sale_mode == 1 || orderDetail.sale_mode == 2) num_count = Number(num_count / 100);
-            setFormatPreViewOrder({
+            setFormatDetailOrder({
-                estimate_amount: preViewOrder.estimate_amount, //预估金额
+                estimate_amount: orderDetail.estimate_amount, //预估金额
-                estimate_weight: preViewOrder.estimate_weight,
+                estimate_weight: orderDetail.estimate_weight,
-                sale_mode: preViewOrder.sale_mode,
+                sale_mode: orderDetail.sale_mode,
-                sale_mode_name: preViewOrder.sale_mode_name, 
+                sale_mode_name: orderDetail.sale_mode_name, 
-                colo_count: preViewOrder.product_color_list.length, //颜色数量
+                colo_count: orderDetail.color_list.length, //颜色数量
                 num_count: num_count, //总数量
-                unit: preViewOrder.sale_mode == 0?'条':'m', //单位
+                unit: orderDetail.sale_mode == 0?'条':'m', //单位
                 list: Object.values(dataList)
             })
         }
     }
 
     const formatPreViewOrderMemo = useMemo(() => {
-        return formatPreViewOrder
+        return formatDetailOrder
-    }, [formatPreViewOrder])
+    }, [formatDetailOrder])
 
     //复制功能
     const clipboardData = () => {
@@ -96,42 +86,62 @@ import styles  from './index.module.scss'
         })
     }
 
+    //格式化初始地址
+    const defaultAddress = useMemo(() => {
+        const address = orderDetail?.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
+    }, [orderDetail])
+
+    //订单备注
+    const [orderRemark, setOrderRemark] = useState('')
+    const getRemark = useCallback((e) => {
+        setOrderRemark(() => e)
+        setShowDesc(() => false)
+    }, [])
+
     return (
         <View className={styles.order_main}>
-            <OrderState state="预约中" desc="客服已接单，等待仓库配布出单..."/>
+            <OrderState />
-            <View className={styles.order_title}>
+            <AddressInfo defaultValue={defaultAddress}/>
-                <Text>收货方式</Text>
-                <View className={styles.order_status}>物流</View>                
-                <View className={styles.order_status}>上门自提</View>                
-            </View>
-            <AddressInfo/>
             <KindList value={formatPreViewOrderMemo}/>
-            <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>
             <View className={styles.order_info} >
-                <View className={styles.order_info_title}>订单备注</View>
+                <View className={styles.order_info_title}>订单信息</View>
                 <SearchInput showBorder={false} title='单号'>
                     <View className={styles.order_num}>
-                        <Text>13535359535</Text>
+                        <Text>{orderDetail?.order_no}</Text>
                         <View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
                     </View>
                 </SearchInput>
                 <SearchInput showBorder={false} title='下单时间'>
-                    <Text>2022-4-5 10:11:55</Text>
+                    <Text>{formatDateTime(orderDetail?.create_time)}</Text>
                 </SearchInput>
             </View>
+            <View className={styles.order_desc} onClick={() => setShowDesc(true)}>
+                <View className={styles.order_desc_con}>订单备注</View>
+                {
+                    orderRemark&&<View className={styles.order_desc_text}>{orderRemark}</View>||
+                    <View className={styles.order_desc_text_hint}>填写备注</View>
+                }
+                <View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
+            </View>
             <View className={styles.submit_order}>
-                <View className={styles.submit_order_number}>
+                
-                    <EstimatedAmount style={{color:'#007AFF'}} number={formatPriceDiv(formatPreViewOrder?.estimate_amount)}/>    
+                <View className={styles.order_btn}>取消订单</View>    
-                    <View className={styles.order_number_desc}>{`${formatPreViewOrder?.list.length}种面料，${formatPreViewOrder?.colo_count}种颜色，共${formatPreViewOrder?.num_count + formatPreViewOrder?.unit}`}</View>
-                </View>
-                <View className={styles.order_btn}>提交订单</View>    
             </View>        
             <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
-                <Remark onSave={(e) => console.log(e)}/>
+                <Remark onSave={(e) => getRemark(e)}/>
             </Popup>
             <View className="common_safe_area_y"></View>
         </View>

src/pages/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;

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,17 +7,16 @@ 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, useRef, useState } from "react";
 import Taro, { useDidShow, usePullDownRefresh, useReady } from "@tarojs/taro";
-import useManualPullDownRefresh from "@/use/useManualPullDownRefresh";
 import {GetLabProductApi} from "@/api/material"
 import { getFilterData } from "@/common/util";
 import { formatHashTag, formatImgUrl } from "@/common/fotmat";
 import LoadingCard from "@/components/loadingCard";
 import useLogin from "@/use/useLogin";
 import { goLink } from "@/common/common";
+import SelectData, {ListProps} from "./components/selectData";
 
 export default () => {
     const {checkLogin} = useLogin()
@@ -27,17 +25,6 @@ export default () => {
     })
 
     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({
@@ -45,7 +32,11 @@ export default () => {
         a: '',
         b: '',
         page : 1,
-        size : 10
+        size : 10,
+        width: '',
+        weight_density: '',
+        product_kind_id: '',
+        component: ''
     })
 
     //获取面料列表
@@ -100,6 +91,7 @@ export default () => {
         }
     }
 
+    //监听lab数据变化
     const [blueToothColor, setBlueToothColor] = useState('')
     useEffect(() => {
         if(colorState.deviceLab) {
@@ -114,6 +106,33 @@ export default () => {
         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])
+    }
+
     //页面下拉刷新
     usePullDownRefresh(() => {
         setSearchField({...searchField ,size : 10})
@@ -145,16 +164,9 @@ export default () => {
                     
                 </View>
                 <View className={styles.filter_btn_con}>
-                    <ScrollView scrollX className={styles.filter_scroll}>
+                    <View className={styles.filter_scroll}>
-                        <View className={styles.filter_btn}>
+                        <SelectData list={selectList}/>
-                                <View>系列</View>
+                    </View>
-                                <View>幅宽</View>
-                                <View>克重</View>
-                                <View>克重</View>
-                                <View>克重</View>
-                                <View className={styles.selected}>成分</View>
-                        </View>
-                    </ScrollView>
                     <View className={styles.filter_more} onClick={() => setShowFilter(true)}>
                         <Text>筛选</Text>
                         <Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
@@ -188,7 +200,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/searchList.tsx

@@ -4,7 +4,7 @@ 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, useEffect, useRef, useState } from "react";
@@ -24,7 +24,6 @@ export default () => {
 
     const [showFilter, setShowFilter] = useState(false)
     const router = useRouter()
-    const [selectList, setSelectList] = useState<any>([])
 
     //搜索参数
     const [searchField, setSearchField] = useState({
@@ -69,10 +68,10 @@ export default () => {
     }, [materialList])
 
     //输入了搜索关键字
-    const getSearchData = (e) => {
+    const getSearchData = useCallback((e) => {
         setMaterialList(() => ({list:[], total:0}))
-        setSearchField({...searchField, code_or_name:e, size:10})
+        setSearchField((val) => ({...val, code_or_name:e, size:10}))
-    }
+    }, [])
 
     const goLinkPage = (item) => {
         goLink('/pages/details/index',{id:item.id})
@@ -95,19 +94,36 @@ export default () => {
 
     //获取筛选条件
     const getFiltr = (e) => {
+        const {data} = e
         setSearchField({
             ...searchField,  
-            width: e?.width,
+            width: data?.width,
-            weight_density: e?.weight, 
+            weight_density: data?.weight, 
             size: 10,
-            component: e.element
+            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" placeholder="请输入面料关键词"  btnStyle={{color: '#007AFF'}} defaultValue={router.params.key} changeOnSearch={(e) => getSearchData(e)} debounceTime={300}/>
+                <Search placeIcon="out" placeholder="请输入面料关键词"  defaultValue={router.params.key} changeOnSearch={getSearchData} debounceTime={300}/>
             </View>
             <View className={styles.filter}>
                 <View className={styles.filter_all}>