diff --git a/src/api/onlinePay.ts b/src/api/onlinePay.ts index 3c23414..b5ce06f 100644 --- a/src/api/onlinePay.ts +++ b/src/api/onlinePay.ts @@ -6,7 +6,8 @@ import { useRequest } from "@/use/useHttp" export const GetPayCode = () => { return useRequest({ url: `/`, - base_url: 'http://192.168.1.127:8081', + base_url: 'http://192.168.1.127:8081/caphtml', method: "post", }) -} \ No newline at end of file +} + diff --git a/src/api/order.ts b/src/api/order.ts index a1eb29f..d48b41d 100644 --- a/src/api/order.ts +++ b/src/api/order.ts @@ -59,4 +59,24 @@ export const SaleOrderApi = () => { 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", + }) } \ No newline at end of file diff --git a/src/pages/order/components/addressInfoDetail/index.module.scss b/src/pages/order/components/addressInfoDetail/index.module.scss index b4a9f1b..68e6171 100644 --- a/src/pages/order/components/addressInfoDetail/index.module.scss +++ b/src/pages/order/components/addressInfoDetail/index.module.scss @@ -61,6 +61,7 @@ position: absolute; bottom: 10px; right: 10px; + z-index: 999; .updateBtn_list{ position: absolute; display: flex; diff --git a/src/pages/order/components/addressInfoDetail/index.tsx b/src/pages/order/components/addressInfoDetail/index.tsx index 4675aec..9d774e6 100644 --- a/src/pages/order/components/addressInfoDetail/index.tsx +++ b/src/pages/order/components/addressInfoDetail/index.tsx @@ -2,7 +2,7 @@ import AddressList from "@/components/AddressList"; import Popup from "@/components/popup"; import { Text, View } from "@tarojs/components" import classnames from "classnames"; -import { memo, useCallback, useEffect, useMemo, useState } from "react"; +import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useState } from "react"; import styles from './index.module.scss' export type AddressInfoParam = { @@ -21,7 +21,7 @@ type Param = { shipment_mode?: 1|2 //1自提 2物流 } -export default memo(({onSelect, defaultValue = null, disabled = false, shipment_mode = 1}: Param) => { +export default memo(forwardRef(({onSelect, defaultValue = null, disabled = false, shipment_mode = 1}: Param, ref) => { const [showAddressList, setShowAddressList] = useState(false) useEffect(() => { @@ -48,12 +48,19 @@ export default memo(({onSelect, defaultValue = null, disabled = false, shipment_ } //收货方法,1:自提,2物流 const [receivingStatus, setReceivingStatus] = useState(1) - const onReceivingStatus = (val) => { + const onReceivingStatus = (val, e) => { + e.stopPropagation() setReceivingStatus(val) + console.log("e::::", e) } useEffect(() => { setReceivingStatus(() => shipment_mode) }, [shipment_mode]) + + //把内部方法提供给外部 + useImperativeHandle(ref, () => ({ + changeShow + })) return ( changeShow()}> @@ -70,18 +77,18 @@ export default memo(({onSelect, defaultValue = null, disabled = false, shipment_ - onReceivingStatus(1)}>自提 - onReceivingStatus(2)}>物流 + onReceivingStatus(1,e)}>自提 + onReceivingStatus(2,e)}>物流 - {!disabled&& setShowAddressList(false)}> + setShowAddressList(false)}> 请选择收货地址 getAddress(item)}/> - } + ) -}) \ No newline at end of file +})) \ No newline at end of file diff --git a/src/pages/order/components/kindList/index.tsx b/src/pages/order/components/kindList/index.tsx index 34d9542..db30c54 100644 --- a/src/pages/order/components/kindList/index.tsx +++ b/src/pages/order/components/kindList/index.tsx @@ -15,7 +15,6 @@ type OrderParam = { total_number: number } - export default memo(({value}:{value:OrderParam|null}) => { //对应数量 const formatCount = useCallback((item) => { @@ -36,7 +35,7 @@ export default memo(({value}:{value:OrderParam|null}) => { {numText} { - value?.list.map(item => { + value?.list?.map(item => { return {value.sale_mode_name} diff --git a/src/pages/order/components/orderState/index.tsx b/src/pages/order/components/orderState/index.tsx index a3b51bb..d710730 100644 --- a/src/pages/order/components/orderState/index.tsx +++ b/src/pages/order/components/orderState/index.tsx @@ -2,7 +2,7 @@ import { Image, Text, View } from "@tarojs/components" import { memo, useState } from "react" import styles from './index.module.scss' import classnames from "classnames"; -import { formatImgUrl } from "@/common/fotmat"; +import { formatDateTime, formatImgUrl } from "@/common/fotmat"; type Param = { status: string, time: string, @@ -24,7 +24,7 @@ export default memo(({list = []}:{list?:Param[]}) => { {(list.length != (index + 1))&&} {item.status} - {item.time} + {formatDateTime(item.time)} {item.tag} {item.desc} @@ -35,7 +35,7 @@ export default memo(({list = []}:{list?:Param[]}) => { } - + {/* */} } diff --git a/src/pages/order/components/scanPay/index.tsx b/src/pages/order/components/scanPay/index.tsx index 8467da4..40ee09a 100644 --- a/src/pages/order/components/scanPay/index.tsx +++ b/src/pages/order/components/scanPay/index.tsx @@ -1,5 +1,5 @@ import { Image, ScrollView, Text, View } from "@tarojs/components"; -import { memo, useEffect } from "react"; +import { memo, useEffect, useRef, useState } from "react"; import classnames from "classnames"; import styles from './index.module.scss' import Popup from "@/components/popup"; @@ -14,32 +14,106 @@ 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 base64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQAQMAAAC6caSPAAAABlBMVEX///8AAABVwtN+AAACFElEQVR42uyaMbKzMAyExVC8kiNwFI5GjsZRcgRKCgb9I69sY+Ik7R+8O/OKF/N1Gnklr1AURVEURf2sBnUd+P9PZdxFpFddRaZ4uhEhAiR+euBznM2q+hCRacXpROSuiJ0vjphG1YfVkRXM2lm5ECFSR/QpYn+hw+hBhMgnRCScCxA0JSJE3t1i4XdrTPa5e5gvFx+R9pBseqdN9AnTO6+9Pobjq08m8ttIKUP02ZdT0GcRaQuxDhOKyWvMTK/VmMi8droMBxEiNUw6Xawhaagxm5LipGRe+KUpEWkVifMz2hDOXcHwHqV/IdI6IvH3U41JaEqhV6HGLhiRuyBhRj7yyIMrKXnhNYw7L0t7Is0i0mF7snW5w+xp17/4w8+1wxBpF4G79ZEIhbWn2yqY3ortIdIu0mHhYrcYxuqwhRvwkhi88HULR6R5xBd3mmwPmlIaqdGciBBJyKmQjEeNddH2VGuMyO8jeaGCeyfnlAzxLVwlp0SkUeTsbv0dedxlNh8TN7qVRyEizSJlFg4exn7Oo/Xy9zEJSaQt5KS0hzmnaWuml0jDSJm1LqakwbNw28X0ErkPUuaUxg0F40mV+FooRIjUs9Y4n31S8ljTS40RIYLgW1yoxAQkPMzbtC2RlpF0i0mekrwpESFSn5IUq9vYkJba2pbIfZBT1trfkUNSpc/BNiJEKIqiKIqi/gv9CwAA//9IKiY1VjApygAAAABJRU5ErkJggg==' - + //获取支付二维码 + const [payCodeImage, setPayCodeImage] = useState('') + const fileData = useRef({ + filePath: '', + base64: '' + }) + const {fetchData} = 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:"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 + } + useEffect(() => { + getCore() + }, []) + //检查是否开启保存图片权限 const {check} = useCheckAuthorize({scope:'scope.writePhotosAlbum', msg:'您没授权,无法保存图片'}) const saveImageCheck = async () => { const res = await check() res&&saveImage() } + //保存图片 const saveImage = () => { const save = Taro.getFileSystemManager() - const number = Math.random(); - const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || []; - let filePath = Taro.env.USER_DATA_PATH +'/pic.'+ format alert.loading('正在保存图片') save.writeFile({ - filePath: filePath, - data: base64, + filePath: fileData.current.filePath, + data: fileData.current.base64, encoding: 'base64', success: function (res) { - console.log('aa::',res) - console.log('aa2::',filePath) Taro.saveImageToPhotosAlbum({ - filePath: filePath, + filePath: fileData.current.filePath, success: function (res) { alert.success('图片保存成功') }, @@ -50,42 +124,14 @@ export default memo(({show = true, onClose}:Param) => { } }) } + //预览图片 const showImage = () => { Taro.previewImage({ - current: formatImgUrl(''), // 当前显示图片的http链接 - urls: [formatImgUrl('')] // 需要预览的图片http链接列表 + current: fileData.current.filePath, // 当前显示图片的http链接 + urls: [fileData.current.filePath] // 需要预览的图片http链接列表 }) } - - // const {fetchData} = GetPayCode() - // useEffect(() => { - // 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:"23000", - // qrcode:"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'}] - // }) - // }, []) - //复制功能 return ( @@ -99,7 +145,7 @@ export default memo(({show = true, onClose}:Param) => { 扫码支付成功后,自动更新状态 - + 保存电子确认单 diff --git a/src/pages/order/index.module.scss b/src/pages/order/index.module.scss index e965350..662cb6e 100644 --- a/src/pages/order/index.module.scss +++ b/src/pages/order/index.module.scss @@ -89,6 +89,10 @@ margin-left: 34px; } } + .order_btn_select{ + color: $color_main; + border: 2px solid $color_main; + } .order_number_desc{ font-size: $font_size_medium; color: $color_font_two; diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx index 47259cd..e306c36 100644 --- a/src/pages/order/index.tsx +++ b/src/pages/order/index.tsx @@ -109,6 +109,10 @@ import styles from './index.module.scss' const toPay = () => { setPayMentShow(true) } + + //打开地址修改 + const addressRef = useRef(null) + return ( {/* @@ -116,7 +120,7 @@ import styles from './index.module.scss' */} - + @@ -143,9 +147,9 @@ import styles from './index.module.scss' - 申请退货 - 查看物流 - 确认收货 + + {(orderDetail?.status == 0)&&取消订单} + {(orderDetail?.status == 0)&& addressRef.current.changeShow()}>修改地址} toPay()}>去支付 setShowDesc(false)} > diff --git a/src/pages/orderList/components/order/index.tsx b/src/pages/orderList/components/order/index.tsx index 6fe747c..e6fc8d5 100644 --- a/src/pages/orderList/components/order/index.tsx +++ b/src/pages/orderList/components/order/index.tsx @@ -1,11 +1,33 @@ -import { formatImgUrl } from "@/common/fotmat"; +import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; import { useSelector } from "@/reducers/hooks"; import { Image, Text, View } from "@tarojs/components" import classnames from "classnames"; -import { memo } from "react"; +import { memo, useCallback } from "react"; import styles from './index.module.scss' -export default memo(() => { + +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 + } +} +export default memo(({value}: 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]) return ( @@ -14,41 +36,43 @@ export default memo(() => { {userInfo.adminUserInfo.user_name} - 订单号:LY2278204399678 + 订单号:{value?.order_no} - 自提 + {value?.shipment_mode_name} - - 大货 - 0770# 21S单面平纹(食毛) - 待接单 + + + {value?.sale_mode_name} + {formatHashTag(value?.product_list[0].code, value?.product_list[0].name)} + {value?.status_name} + + + + + {value?.product_list[0].product_colors[0].code} + + + {value?.product_list[0].product_colors.map((itemColor, index) => { + return ( + (index <= 1)&& + {formatHashTag(itemColor.code, itemColor.name)} + {standardPrice(itemColor.sale_price, value.sale_mode)} + ×{formatCount(itemColor, value.sale_mode)}条 + + ) + + }) + } + + …… + …… + …… + + + + {`${value?.total_fabrics}种面料,${value?.total_colors}种颜色,共${value?.total_number}条`} - - - - 24色 - - - - 1# 薄荷绿 - ¥40/kg - ×2条 - - - 1# 薄荷绿 - ¥40/kg - ×2条 - - - …… - …… - …… - - - - - 2种面料,3种颜色,共6条 取消订单 修改地址 diff --git a/src/pages/orderList/index.module.scss b/src/pages/orderList/index.module.scss index 1a68dbc..f7222c8 100644 --- a/src/pages/orderList/index.module.scss +++ b/src/pages/orderList/index.module.scss @@ -9,28 +9,30 @@ box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.16); border-bottom: 2px solid #e2e2e2; .order_status_list{ - display: flex; - justify-content: space-between; font-size: $font_size; color: #9E9E9E; margin-top: 20px; .order_status_item{ - padding: 20px 10px; + padding: 20px; box-sizing: border-box; } .selected{ font-weight: 700; color: #000; border-bottom: 4px solid #707070; - // border-radius: 4px; + } + .order_list_scroll{ + white-space: nowrap; + display: flex; } } } .order_list{ flex:1; height: 0; - .order_item{ + .order_item_con{ margin-top: 20px; + padding: 0 20px; } } } \ No newline at end of file diff --git a/src/pages/orderList/index.tsx b/src/pages/orderList/index.tsx index 010f815..7e446d2 100644 --- a/src/pages/orderList/index.tsx +++ b/src/pages/orderList/index.tsx @@ -1,15 +1,16 @@ import Search from "@/components/search" import useLogin from "@/use/useLogin" -import { Image, Text, View } from "@tarojs/components" -import { useDidShow, useRouter } from "@tarojs/taro" -import { useCallback, useState } from "react" +import { Image, ScrollView, Text, View } from "@tarojs/components" +import Taro, { useDidShow, useRouter } from "@tarojs/taro" +import { useCallback, useEffect, useMemo, useRef, useState } from "react" import {ORDER_STATUS} from '@/common/enum' import styles from './index.module.scss' import classnames from "classnames"; -import { useSelector } from "@/reducers/hooks" -import { formatImgUrl } from "@/common/fotmat" import Order from "./components/order" import InfiniteScroll from "@/components/infiniteScroll" +import {GetOrderStatusListApi, GetOrderListApi} from '@/api/order' +import { dataLoadingStatus, getFilterData } from "@/common/util" +import Tabs from "@/components/tabs" export default () => { const {checkLogin} = useLogin() @@ -17,46 +18,89 @@ export default () => { await checkLogin() }) - const router = useRouter() //搜索参数 const [searchField, setSearchField] = useState({ - shipment_mode:'', + status: -1, page : 1, size : 10, - key:'' + Name:'' }) - //订单状态 - type orderStatusParam = {value:number, label:string}[] - const order_status: orderStatusParam = [{value:-1, label:'全部'}, ...Object.values(ORDER_STATUS)] - const [selectStatus, setSelectStatus] = useState(-1) - const changeStatus = useCallback((e) => { - setSelectStatus(() => e) + //获取订单状态 + const {fetchData: statusFetchData} = GetOrderStatusListApi() + const [statusList, setStatusList] = useState([{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}) + Taro.stopPullDownRefresh() + } + + + //监听筛选条件变化 + 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) => { - // setMaterialList(() => ({list:[], total:0})) - setSearchField((val) => ({...val, code_or_name:e, size:10})) + pageNum.current.page = 1 + setOrderData(() => ({list:[], total:0})) + setSearchField((val) => ({...val, name:e, size:10})) }, []) - - return ( - + - {order_status.map(item => { - return changeStatus(item.value)} className={classnames(styles.order_status_item, (selectStatus==item.value)&&styles.selected)}>{item.label} - })} + + + {statusList.map(item => { + return changeStatus(item.id)} className={classnames(styles.order_status_item, (searchField.status==item.id)&&styles.selected)}>{item.name} + })} + + - - {new Array(10).fill('').map(item => { - return - + + {orderData?.list.map(item => { + return })} diff --git a/src/use/useHttp.ts b/src/use/useHttp.ts index 592321f..74ee064 100644 --- a/src/use/useHttp.ts +++ b/src/use/useHttp.ts @@ -1,7 +1,7 @@ import Taro, { useRouter } from '@tarojs/taro' -import { useRef, useState } from 'react' +import { useEffect, useRef, useState } from 'react' import {BASE_URL, WX_APPID} from '@/common/constant' import useUserInfo from "./useUserInfo" import qs from 'qs'; @@ -122,10 +122,15 @@ export const useRequest = (options:option = { const stateRef = useRef({...params}) const [state, setState] = useState({...stateRef.current}) const {removeToken, removeSessionKey} = useUserInfo() + + useEffect(() => { + console.log('变化::', state.loading) + }, [state.loading]) // 请求函数 const fetchData = async (sub_options?:any) => { stateRef.current.loading = true setState((e) => ({...e, loading:true})) + console.log('tf:::', stateRef.current.loading) stateRef.current.query = { ...sub_options, ...options.pagination && { @@ -153,6 +158,7 @@ export const useRequest = (options:option = { } } const result = await Taro.request(q as any) + const { statusCode } = result const { code, @@ -189,7 +195,7 @@ export const useRequest = (options:option = { } stateRef.current.error = false stateRef.current.loading = false - setState(() => stateRef.current) + setState(() => ({...stateRef.current})) return stateRef.current }