From d639f2b23bbd1bb180e31f5710d486fbc34c3706 Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Tue, 17 May 2022 20:31:53 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AD=9B=E9=80=89=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/order.ts | 14 +- src/components/AddressList/index.tsx | 1 + src/components/filter/index.tsx | 24 ++-- src/components/search/index.tsx | 5 +- src/components/shopCart/index.tsx | 6 +- .../details/components/orderCount/index.tsx | 14 +- src/pages/index/index.tsx | 5 +- src/pages/order/comfirm.module.scss | 11 +- src/pages/order/comfirm.tsx | 99 +++++++++++--- .../order/components/addressInfo/index.tsx | 24 +++- .../components/kindList/index.module.scss | 9 +- src/pages/order/components/kindList/index.tsx | 19 ++- .../orderState copy/index.module.scss | 18 +++ .../components/orderState copy/index.tsx | 14 ++ .../components/orderState/index.module.scss | 96 ++++++++++++-- .../order/components/orderState/index.tsx | 44 +++++-- src/pages/order/index.tsx | 124 ++++++++++-------- .../components/selectData/index.module.scss | 10 +- .../components/selectData/index.tsx | 4 +- .../searchList/hightSearchList.module.scss | 1 + src/pages/searchList/hightSearchList.tsx | 64 +++++---- src/pages/searchList/searchList.tsx | 34 +++-- 22 files changed, 458 insertions(+), 182 deletions(-) create mode 100644 src/pages/order/components/orderState copy/index.module.scss create mode 100644 src/pages/order/components/orderState copy/index.tsx diff --git a/src/api/order.ts b/src/api/order.ts index 2fd72f8..83cbdae 100644 --- a/src/api/order.ts +++ b/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", }) -} \ No newline at end of file +} + +/** + * 获取销售单详情 + */ + export const GetSaleOrderDetailApi = () => { + return useRequest({ + url: `/v1/mall/saleOrder`, + method: "get", + }) +} diff --git a/src/components/AddressList/index.tsx b/src/components/AddressList/index.tsx index e60a20f..4290452 100644 --- a/src/components/AddressList/index.tsx +++ b/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,//是否开启刷新 diff --git a/src/components/filter/index.tsx b/src/components/filter/index.tsx index 1c72293..b05ae35 100644 --- a/src/components/filter/index.tsx +++ b/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([]) @@ -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 ( - onCloseEven()} showIconButton={true}> 全部筛选 @@ -82,14 +85,14 @@ export default ({onClose, onFiltr, show = false, onRest}:params) => { 幅宽 - setFieldData(e,'width')} placeholder="请输入幅宽" placeholderStyle="font-size: 26rpx"/> + setFieldData(e,'width')} placeholder="请输入幅宽" placeholderStyle="font-size: 26rpx"/> cm 克重 - setFieldData(e,'weight')} placeholder="请输入克重" placeholderStyle="font-size: 26rpx"/> + setFieldData(e,'weight')} placeholder="请输入克重" placeholderStyle="font-size: 26rpx"/> kg @@ -111,6 +114,5 @@ export default ({onClose, onFiltr, show = false, onRest}:params) => { - ) -} \ No newline at end of file +}) \ No newline at end of file diff --git a/src/components/search/index.tsx b/src/components/search/index.tsx index 4b27de9..9c2191b 100644 --- a/src/components/search/index.tsx +++ b/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(({ ) -}) \ No newline at end of file +})) \ No newline at end of file diff --git a/src/components/shopCart/index.tsx b/src/components/shopCart/index.tsx index 15c5d43..7f90162 100644 --- a/src/components/shopCart/index.tsx +++ b/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 ( diff --git a/src/pages/details/components/orderCount/index.tsx b/src/pages/details/components/orderCount/index.tsx index f581163..11c80ea 100644 --- a/src/pages/details/components/orderCount/index.tsx +++ b/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(null) @@ -216,7 +216,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) {searchShow&& - searchInput(e)} debounceTime={400}/> + clearSearch()}>取消 } diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index b99856a..3a54772 100644 --- a/src/pages/index/index.tsx +++ b/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 () => { 我的收藏 - - goLink('/pages/searchList/search')}/> + goLink('/pages/searchList/search')}> + diff --git a/src/pages/order/comfirm.module.scss b/src/pages/order/comfirm.module.scss index 980cde1..c915acd 100644 --- a/src/pages/order/comfirm.module.scss +++ b/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; diff --git a/src/pages/order/comfirm.tsx b/src/pages/order/comfirm.tsx index 17788f9..e92fabd 100644 --- a/src/pages/order/comfirm.tsx +++ b/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() + const [submitOrderData, setSubmitOrderData] = useState() //获取购物车传过来的id type orderPreParam = {shopping_cart_product_color_list:{shopping_cart_product_color_id:number}[], sale_mode:number} const param = getParam() const idsAndSaleModel = useRef({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() //获取到的原始数据 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) - return submitOrder?.address_id&& submitOrder.list?.length &&submitOrder.shipment_mode - }, [submitOrder]) + console.log('submitOrder::',submitOrderData) + return submitOrderData?.address_id&& submitOrderData.list?.length &&submitOrderData.shipment_mode + }, [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 ( 收货方式 {shipmentMode.current.map(item => { - return selectShipmentMode(item.value)}>{item.label} + return selectShipmentMode(item.value)}>{item.label} })} - getAddress(e)}/> + getAddress(e)} defaultValue={defaultAddress}/> setShowDesc(true)}> 订单备注 - 点击填写 - + { + submitOrderData?.remark&&{submitOrderData?.remark}|| + 填写备注 + } + {`${formatPreViewOrder?.list.length}种面料，${formatPreViewOrder?.colo_count}种颜色，共${formatPreViewOrder?.num_count + formatPreViewOrder?.unit}`} - 提交订单{btnStatus?'true':'false'} + submitOrderEven()}>提交订单 setShowDesc(false)} > getRemark(e)}/> diff --git a/src/pages/order/components/addressInfo/index.tsx b/src/pages/order/components/addressInfo/index.tsx index a176a93..7000053 100644 --- a/src/pages/order/components/addressInfo/index.tsx +++ b/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() const getAddress = useCallback((val) => { - setShowAddressList(false) - setUserInfo(val) + setShowAddressList(() => false) + 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]) diff --git a/src/pages/order/components/kindList/index.module.scss b/src/pages/order/components/kindList/index.module.scss index 18da4a6..be8f53f 100644 --- a/src/pages/order/components/kindList/index.module.scss +++ b/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; diff --git a/src/pages/order/components/kindList/index.tsx b/src/pages/order/components/kindList/index.tsx index d7feb64..130f837 100644 --- a/src/pages/order/components/kindList/index.tsx +++ b/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 ( <> + {numText} { value?.list.map(item => { diff --git a/src/pages/order/components/orderState copy/index.module.scss b/src/pages/order/components/orderState copy/index.module.scss new file mode 100644 index 0000000..78bda44 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/pages/order/components/orderState copy/index.tsx b/src/pages/order/components/orderState copy/index.tsx new file mode 100644 index 0000000..58fec4d --- /dev/null +++ b/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 ( + + {state} + {desc} + + ) +} \ No newline at end of file diff --git a/src/pages/order/components/orderState/index.module.scss b/src/pages/order/components/orderState/index.module.scss index 78bda44..e32d18e 100644 --- a/src/pages/order/components/orderState/index.module.scss +++ b/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{ - color: $color_main; - font-size:$font_size; - font-weight: 700; + padding: 20px; + box-sizing:border-box; + .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; + 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); + } } } \ No newline at end of file diff --git a/src/pages/order/components/orderState/index.tsx b/src/pages/order/components/orderState/index.tsx index 58fec4d..3095e2b 100644 --- a/src/pages/order/components/orderState/index.tsx +++ b/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 ({ - state = '', - desc = '' -}) => { +type Param = { + title: string, + time: string, + tag: string, + desc: string +} +export default memo(({list = []}:{list?:Param[]}) => { + const [showMore, setShowMore] = useState(false) + const changeMore = () => { + setShowMore(() => !showMore) + } + list = [ + {title:'待配布', time:'2022-04-24 09:08', tag:'已接单', desc:'仓库正在为你配布...'}, + {title:'待配布', time:'2022-04-24 09:08', tag:'已接单', desc:'仓库正在为你配布...'}, + {title:'待接单', time:'2022-04-24 09:08', tag:'已提交', desc:''}, + ] return ( - {state} - {desc} + + {list.map((item, index) => + {(list.length > 1)&&} + {(list.length != (index + 1))&&} + + {item.title} + {item.time} + {item.tag} + + {item.desc} + )} + + {(list.length > 2) && changeMore()}> + {showMore&&'收起物流详情'||'点击查看更多物流详情'} + + } ) -} \ No newline at end of file +}) \ No newline at end of file diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx index bdb5978..ee6ba53 100644 --- a/src/pages/order/index.tsx +++ b/src/pages/order/index.tsx @@ -1,5 +1,5 @@ -import { SaleOrderPreViewApi } from "@/api/order"; -import { formatPriceDiv } from "@/common/fotmat"; +import { GetSaleOrderDetailApi } from "@/api/order"; +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({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 [preViewOrder, setPreViewOrder] = useState() //获取到的原始数据 - const {fetchData} = SaleOrderPreViewApi() + //获取订单详情 + const [orderDetail, setOrderDetail] = useState() //获取到的原始数据 + const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi() const getSaleOrderPreView = async () => { - if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) { - let res = await fetchData(idsAndSaleModel.current) - setPreViewOrder(res.data) + if(router.params.id) { + let res = await getOrderFetchData({id: router.params.id}) + setOrderDetail(res.data) } } //监听获取到的数据 useEffect(() => { - if(preViewOrder) + if(orderDetail) formatData() - }, [preViewOrder]) + }, [orderDetail]) //格式化数据格式 - const [formatPreViewOrder, setFormatPreViewOrder] = useState() //格式化后的数据 + const [formatDetailOrder, setFormatDetailOrder] = useState() //格式化后的数据 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); - setFormatPreViewOrder({ - estimate_amount: preViewOrder.estimate_amount, //预估金额 - estimate_weight: preViewOrder.estimate_weight, - sale_mode: preViewOrder.sale_mode, - sale_mode_name: preViewOrder.sale_mode_name, - colo_count: preViewOrder.product_color_list.length, //颜色数量 + if (orderDetail.sale_mode == 1 || orderDetail.sale_mode == 2) num_count = Number(num_count / 100); + setFormatDetailOrder({ + estimate_amount: orderDetail.estimate_amount, //预估金额 + estimate_weight: orderDetail.estimate_weight, + sale_mode: orderDetail.sale_mode, + sale_mode_name: orderDetail.sale_mode_name, + colo_count: orderDetail.color_list.length, //颜色数量 num_count: num_count, //总数量 - unit: preViewOrder.sale_mode == 0?'条':'m', //单位 + unit: orderDetail.sale_mode == 0?'条':'m', //单位 list: Object.values(dataList) }) } } const formatPreViewOrderMemo = useMemo(() => { - return formatPreViewOrder - }, [formatPreViewOrder]) + return formatDetailOrder + }, [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 ( - - - 收货方式 - 物流 - 上门自提 - - + + - setShowDesc(true)}> - 订单备注 - 点击填写 - - + - 订单备注 + 订单信息 - 13535359535 + {orderDetail?.order_no} clipboardData()}>复制 - 2022-4-5 10:11:55 + {formatDateTime(orderDetail?.create_time)} + setShowDesc(true)}> + 订单备注 + { + orderRemark&&{orderRemark}|| + 填写备注 + } + + - - - {`${formatPreViewOrder?.list.length}种面料，${formatPreViewOrder?.colo_count}种颜色，共${formatPreViewOrder?.num_count + formatPreViewOrder?.unit}`} - - 提交订单 + + 取消订单 setShowDesc(false)} > - console.log(e)}/> + getRemark(e)}/> diff --git a/src/pages/searchList/components/selectData/index.module.scss b/src/pages/searchList/components/selectData/index.module.scss index 0d19650..f7f3ea5 100644 --- a/src/pages/searchList/components/selectData/index.module.scss +++ b/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; diff --git a/src/pages/searchList/components/selectData/index.tsx b/src/pages/searchList/components/selectData/index.tsx index 60db6ee..e82b2d2 100644 --- a/src/pages/searchList/components/selectData/index.tsx +++ b/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 ( clickEvent({item,index})}> - {item.title} + {`${item.title}: ${item.value}`} ) }) diff --git a/src/pages/searchList/hightSearchList.module.scss b/src/pages/searchList/hightSearchList.module.scss index 8e80f6f..c4e305b 100644 --- a/src/pages/searchList/hightSearchList.module.scss +++ b/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; diff --git a/src/pages/searchList/hightSearchList.tsx b/src/pages/searchList/hightSearchList.tsx index 22c262d..f563b90 100644 --- a/src/pages/searchList/hightSearchList.tsx +++ b/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() + 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 () => { - - - 系列 - 幅宽 - 克重 - 克重 - 克重 - 成分 - - + + + setShowFilter(true)}> 筛选 @@ -188,7 +200,7 @@ export default () => { } - setShowFilter(false)}/> + getFiltr(e)} onClose={() => setShowFilter(false)}/> ) } \ No newline at end of file diff --git a/src/pages/searchList/searchList.tsx b/src/pages/searchList/searchList.tsx index b21eb0b..04db319 100644 --- a/src/pages/searchList/searchList.tsx +++ b/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([]) //搜索参数 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, - weight_density: e?.weight, + width: data?.width, + weight_density: data?.weight, size: 10, - component: e.element + component: data?.element, + product_kind_id: data?.seriesId }) + formatSelectList(e) + } + + //筛选条件格式化 + const [selectList , setSelectList] = useState() + 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 ( - getSearchData(e)} debounceTime={300}/> +