From e73bd1bc25eb43f4ce70085ca6f7f4a08f253d52 Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Thu, 26 May 2022 17:32:59 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E5=88=97=E8=A1=A8=E5=AF=B9?= =?UTF-8?q?=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/order.ts | 10 +++ src/components/orderBtns/index.module.scss | 22 +++++ src/components/orderBtns/index.tsx | 80 +++++++++++++++++++ src/pages/order/comfirm.tsx | 47 +++-------- .../components/addressInfoDetail/index.tsx | 66 ++++++++++----- src/pages/order/components/scanPay/index.tsx | 47 ++++++----- src/pages/order/index.tsx | 34 +++++--- .../components/order/index.module.scss | 22 ----- .../orderList/components/order/index.tsx | 61 +++++++++++--- src/pages/orderList/index.tsx | 2 +- 10 files changed, 271 insertions(+), 120 deletions(-) create mode 100644 src/components/orderBtns/index.module.scss create mode 100644 src/components/orderBtns/index.tsx diff --git a/src/api/order.ts b/src/api/order.ts index d48b41d..45eb243 100644 --- a/src/api/order.ts +++ b/src/api/order.ts @@ -79,4 +79,14 @@ export const SaleOrderApi = () => { url: `/v1/mall/saleOrder/list`, method: "get", }) +} + +/** + * 作废销售单 + */ + export const CancelOrderApi = () => { + return useRequest({ + url: `/v1/mall/saleOrder/cancel`, + method: "put", + }) } \ No newline at end of file diff --git a/src/components/orderBtns/index.module.scss b/src/components/orderBtns/index.module.scss new file mode 100644 index 0000000..28023d0 --- /dev/null +++ b/src/components/orderBtns/index.module.scss @@ -0,0 +1,22 @@ +.btns_list{ + display: flex; + justify-content: flex-end; + margin-top: 30px; + .btns_item{ + width: 152px; + height: 72px; + border: 2px solid #dddddd; + border-radius: 38px; + text-align: center; + line-height: 72px; + font-size: $font_size; + color: $color_font_three; + &:nth-child(n+2) { + margin-left: 32px; + } + } + .end_btn{ + border: 2px solid $color_main; + color: $color_main; + } +} \ No newline at end of file diff --git a/src/components/orderBtns/index.tsx b/src/components/orderBtns/index.tsx new file mode 100644 index 0000000..53e33a1 --- /dev/null +++ b/src/components/orderBtns/index.tsx @@ -0,0 +1,80 @@ +import { CancelOrderApi } from "@/api/order" +import { alert } from "@/common/common" +import { View } from "@tarojs/components" +import Taro from "@tarojs/taro" +import { useCallback, useRef, memo } from "react" +import styles from './index.module.scss' + +type Param = { + status?: number //订单状态 + orderId?: number //订单id +} +export default memo(({status = 0, orderId = 0}:Param) => { + //订单按钮按订单状态归类 + const orderBtnsList = useRef([ + { + value: [0, 1, 2, 9, 3], //取消订单按钮对应： 待接单，待配布，已配布, 待付款， 待发货 + label: '取消订单' + }, + { + value: [3, 9], //去付款按钮对应：待付款， 待发货 + label: '去付款' + }, + { + value: [3], //取消订单按钮对应： 待发货 + label: '申请退款' + }, + { + value: [4, 7, 8, 6], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款 + label: '查看物流' + }, + { + value: [4, 7, 6], //取消订单按钮对应： 待收货, 已收货, 已退款 + label: '申请退货' + }, + { + value: [4], //取消订单按钮对应： 待收货 + label: '确认收货' + }, + { + value: [4,7,8,6], //取消订单按钮对应： 待收货，已收货，已完成, 已退款 + label: '再次购买' + } + ]) + const orderBtnsShow = useCallback((item, status) => { + return item.value.includes(status) + },[]) + + //点击按钮操作 + const submitBtns = (val) => { + if( val == 0 ) cancelOrder() + } + + //取消订单 + const {fetchData: cancelFetchData} = CancelOrderApi() + const cancelOrder = () => { + Taro.showModal({ + title: '要取消该订单吗？', + success: async function (res) { + if (res.confirm) { + let res = await cancelFetchData({id: orderId}) + if(res.success) { + alert.success('取消成功') + } else { + alert.none(res.msg) + } + } else if (res.cancel) { + console.log('用户点击取消') + } + } + }) + } + + return ( + + {orderBtnsList.current.map((item, index) => + orderBtnsShow(item, status)&& submitBtns(index)}>{item.label} + )} + + ) +}) \ No newline at end of file diff --git a/src/pages/order/comfirm.tsx b/src/pages/order/comfirm.tsx index 5db9fc2..87a0048 100644 --- a/src/pages/order/comfirm.tsx +++ b/src/pages/order/comfirm.tsx @@ -31,7 +31,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn"; const param = getParam() const idsAndSaleModel = useRef({shopping_cart_product_color_list:[], sale_mode:0}) useDidShow(async () => { - await checkLogin() + // await checkLogin() idsAndSaleModel.current.sale_mode = Number(param?.sale_mode) param?.ids?.split('-')?.map(item => { return idsAndSaleModel.current.shopping_cart_product_color_list?.push({ @@ -43,8 +43,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn"; }) //获取销售预览订单 - 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 [preViewOrder, setPreViewOrder] = useState() //获取到的原始数据 const {fetchData} = SaleOrderPreViewApi() const getSaleOrderPreView = async () => { if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) { @@ -65,36 +64,16 @@ import SubmitOrderBtn from "./components/submitOrderBtn"; //格式化数据格式 const [formatPreViewOrder, setFormatPreViewOrder] = useState() //格式化后的数据 const formatData = () => { - if(preViewOrder?.product_color_list&&preViewOrder?.product_color_list.length > 0) { - let dataList = {} - let num_count = 0 //总数量 - let orderList:{shopping_cart_product_color_id:number}[] = [] //提交订单时的格式 - preViewOrder?.product_color_list.map(item => { - dataList[item.product_code] = dataList[item.product_code]||{} - dataList[item.product_code].product_code = item.product_code - dataList[item.product_code].product_name = item.product_name - dataList[item.product_code].sale_mode_name = preViewOrder.sale_mode_name - dataList[item.product_code].color_list = dataList[item.product_code]?.color_list||[] - dataList[item.product_code].color_list.push(item) - //大货 - if (preViewOrder.sale_mode == 0) num_count += item.roll - //剪板或散件 - if (preViewOrder.sale_mode == 1 || preViewOrder.sale_mode == 2) num_count += item.length - orderList.push({shopping_cart_product_color_id:item.id}) - }) - if (preViewOrder.sale_mode == 1 || preViewOrder.sale_mode == 2) num_count = Number(num_count / 100); - setFormatPreViewOrder({ - estimate_amount: preViewOrder.estimate_amount, //预估金额 - estimate_weight: preViewOrder.estimate_weight, - sale_mode: preViewOrder.sale_mode, - sale_mode_name: preViewOrder.sale_mode_name, - colo_count: preViewOrder.product_color_list.length, //颜色数量 - num_count: num_count, //总数量 - unit: preViewOrder.sale_mode == 0?'条':'m', //单位 - list: Object.values(dataList) - }) - setSubmitOrderData({...submitOrderData, list: orderList}) - } + setFormatPreViewOrder({ + estimate_amount: preViewOrder.estimate_amount, //预估金额 + sale_mode: preViewOrder.sale_mode, + sale_mode_name: preViewOrder.sale_mode_name, + total_colors: preViewOrder.total_colors, //总颜色数量 + total_number: preViewOrder.total_number, //总数量 + total_fabrics: preViewOrder.total_fabrics, //面料数量 + unit: preViewOrder.sale_mode == 0?'条':'m', //单位 + list: preViewOrder.product_list + }) } const formatPreViewOrderMemo = useMemo(() => { console.log('formatPreViewOrder::',formatPreViewOrder) @@ -185,7 +164,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn"; - {`${formatPreViewOrder?.list.length}种面料，${formatPreViewOrder?.colo_count}种颜色，共${formatPreViewOrder?.num_count + formatPreViewOrder?.unit}`} + {`${formatPreViewOrder?.total_fabrics}种面料，${formatPreViewOrder?.total_colors}种颜色，共${formatPreViewOrder?.total_number + formatPreViewOrder?.unit}`} submitOrderEven()}>提交订单 diff --git a/src/pages/order/components/addressInfoDetail/index.tsx b/src/pages/order/components/addressInfoDetail/index.tsx index 9d774e6..fe9b337 100644 --- a/src/pages/order/components/addressInfoDetail/index.tsx +++ b/src/pages/order/components/addressInfoDetail/index.tsx @@ -1,3 +1,6 @@ +import { EditSaleOrderAddressApi, EditSaleOrderShipmentModeApi } from "@/api/order"; +import { alert } from "@/common/common"; +import { debounce } from "@/common/util"; import AddressList from "@/components/AddressList"; import Popup from "@/components/popup"; import { Text, View } from "@tarojs/components" @@ -12,29 +15,25 @@ export type AddressInfoParam = { address_detail: string, id?: number, name: string, - phone: string + phone: string, } type Param = { onSelect?: (val:any) => void, //选择 - defaultValue?: AddressInfoParam|null //默认值 - disabled?: false|true //true禁用后只用于展示 - shipment_mode?: 1|2 //1自提 2物流 + defaultValue?: AddressInfoParam|null, //默认值 + disabled?: false|true, //true禁用后只用于展示 + shipment_mode?: 1|2, //1自提 2物流 + onChangeShipmentMode?: (val: number) => void, //返回收货方式 + orderId?: number //订单id } -export default memo(forwardRef(({onSelect, defaultValue = null, disabled = false, shipment_mode = 1}: Param, ref) => { +export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = null, orderId = 0, shipment_mode = 1}: Param, ref) => { const [showAddressList, setShowAddressList] = useState(false) useEffect(() => { setUserInfo(() => defaultValue) }, [defaultValue]) - //选择地址 const [userInfo, setUserInfo] = useState() - const getAddress = useCallback((val) => { - setShowAddressList(() => false) - setUserInfo(() => val) - onSelect?.(val) - }, []) //地址格式 const formatAddress = useMemo(() => { @@ -46,13 +45,7 @@ export default memo(forwardRef(({onSelect, defaultValue = null, disabled = false if(receivingStatus == 2) setShowAddressList(() => true) } - //收货方法,1:自提，2物流 - const [receivingStatus, setReceivingStatus] = useState(1) - const onReceivingStatus = (val, e) => { - e.stopPropagation() - setReceivingStatus(val) - console.log("e::::", e) - } + useEffect(() => { setReceivingStatus(() => shipment_mode) }, [shipment_mode]) @@ -61,6 +54,41 @@ export default memo(forwardRef(({onSelect, defaultValue = null, disabled = false useImperativeHandle(ref, () => ({ changeShow })) + + //收货方法,1:自提，2物流 + const [receivingStatus, setReceivingStatus] = useState(1) + const {fetchData: shipmentModeFetchData} = EditSaleOrderShipmentModeApi() + const onReceivingStatus = (value, e) => { + e.stopPropagation() + changeReceivingStatus(value) + } + const changeReceivingStatus = debounce(async (value) => { + alert.loading('正在修改') + const res = await shipmentModeFetchData({id: orderId, shipment_mode:value}) + if(res.success) { + alert.success('修改成功') + onChangeShipmentMode?.(value) + setReceivingStatus(value) + } else { + alert.none(res.msg) + } + }, 10) + + //修改地址 + const {fetchData: addressFetchData} = EditSaleOrderAddressApi() + const getAddress = async (value) => { + alert.loading('正在修改') + setShowAddressList(() => false) + setUserInfo(() => value) + const res = await addressFetchData({id: orderId, address_id: value.id}) + if(res.success) { + alert.success('修改成功') + onSelect?.(value) + } else { + alert.none(res.msg) + } + } + return ( changeShow()}> @@ -86,7 +114,7 @@ export default memo(forwardRef(({onSelect, defaultValue = null, disabled = false setShowAddressList(false)}> 请选择收货地址 - getAddress(item)}/> + diff --git a/src/pages/order/components/scanPay/index.tsx b/src/pages/order/components/scanPay/index.tsx index 40ee09a..d6fb06e 100644 --- a/src/pages/order/components/scanPay/index.tsx +++ b/src/pages/order/components/scanPay/index.tsx @@ -8,6 +8,7 @@ import { alert } from "@/common/common"; import { formatImgUrl } from "@/common/fotmat"; import useCheckAuthorize from "@/use/useCheckAuthorize"; import { GetPayCode } from "@/api/onlinePay"; +import LoadingCard from "@/components/loadingCard"; type Param = { @@ -58,7 +59,7 @@ export default memo(({show = true, onClose}:Param) => { filePath: '', base64: '' }) - const {fetchData} = GetPayCode() + const {fetchData, state} = GetPayCode() const getCore = async () => { let res = await fetchData({ title: "面料销售电子确认单", @@ -80,7 +81,7 @@ export default memo(({show = true, onClose}:Param) => { phone:"15818085802", order_total_length:"12", order_total_price:"63000", - qrcode:"www.zzfzyc.com/checkorder/XS-211005888", + qrcode:"https://www.zzfzyc.com/checkorder/XS-211005888", order_total_weight:"300.00", list: [{product_code:'5215',product_name:'26S双纱亲水滑爽棉',product_color_code:'053',product_color_name:'洋红',num:'4',weight:'123.23',sale_price:'43',total_price:'4510.7'}] }) @@ -91,10 +92,18 @@ export default memo(({show = true, onClose}:Param) => { let filePath = Taro.env.USER_DATA_PATH + '/img' + time +'.'+ format fileData.current.filePath = filePath fileData.current.base64 = bodyData + const save = Taro.getFileSystemManager() + save.writeFile({ + filePath: fileData.current.filePath, + data: fileData.current.base64, + encoding: 'base64', + }) + } useEffect(() => { - getCore() - }, []) + if(show) + getCore() + }, [show]) //检查是否开启保存图片权限 const {check} = useCheckAuthorize({scope:'scope.writePhotosAlbum', msg:'您没授权，无法保存图片'}) @@ -105,30 +114,23 @@ export default memo(({show = true, onClose}:Param) => { //保存图片 const saveImage = () => { - const save = Taro.getFileSystemManager() alert.loading('正在保存图片') - save.writeFile({ + Taro.saveImageToPhotosAlbum({ filePath: fileData.current.filePath, - data: fileData.current.base64, - encoding: 'base64', success: function (res) { - Taro.saveImageToPhotosAlbum({ - filePath: fileData.current.filePath, - success: function (res) { - alert.success('图片保存成功') - }, - fail: function (err) { - console.log('err::', err) - } - }) + alert.success('图片保存成功') + }, + fail: function (err) { + console.log('err::', err) } }) } //预览图片 const showImage = () => { + console.log('fileData.current.filePath::', fileData.current.filePath) Taro.previewImage({ - current: fileData.current.filePath, // 当前显示图片的http链接 + current: fileData.current.filePath, // 当前显示 urls: [fileData.current.filePath] // 需要预览的图片http链接列表 }) } @@ -144,9 +146,12 @@ export default memo(({show = true, onClose}:Param) => { 扫码支付成功后，自动更新状态 - - - + + {(state.loading)&&|| + + + } + 保存电子确认单 diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx index e306c36..cc718f3 100644 --- a/src/pages/order/index.tsx +++ b/src/pages/order/index.tsx @@ -1,20 +1,22 @@ -import { GetSaleOrderDetailApi, EditSaleOrderRemarkApi } from "@/api/order"; +import { + GetSaleOrderDetailApi, + EditSaleOrderRemarkApi, + CancelOrderApi +} from "@/api/order"; import { alert, goLink } from "@/common/common"; import { formatDateTime, formatPriceDiv } from "@/common/fotmat"; -import { setParam } from "@/common/system"; +import OrderBtns from "@/components/orderBtns"; import Popup from "@/components/popup"; import SearchInput from "@/components/searchInput"; import { Text, Textarea, View } from "@tarojs/components" import Taro, { useDidShow, useRouter } from "@tarojs/taro"; import classnames from "classnames"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import AddressInfo from "./components/addressInfo"; import AddressInfoDetail from "./components/addressInfoDetail"; import KindList from "./components/kindList"; import OrderState from "./components/orderState"; import Payment from "./components/payment"; import Remark from "./components/remark"; -import WeightMemo from "./components/weightMemo"; import styles from './index.module.scss' export default () => { @@ -59,7 +61,6 @@ import styles from './index.module.scss' }) } const formatPreViewOrderMemo = useMemo(() => { - console.log('formatDetailOrder::',formatDetailOrder) return formatDetailOrder }, [formatDetailOrder]) @@ -97,7 +98,8 @@ import styles from './index.module.scss' setOrderRemark(() => e) let res = await remarkFetchData({remark:e, id: orderId.current}) if(res.success) { - alert.success('修改成功') + getSaleOrderPreView() + alert.success('提交成功') } else { alert.error(res.msg) } @@ -113,6 +115,18 @@ import styles from './index.module.scss' //打开地址修改 const addressRef = useRef(null) + //修改收货方式 + const getShipmentMode = useCallback(() => { + getSaleOrderPreView() + }, [orderDetail]) + + //修改地址 + const getAddress = useCallback(() => { + getSaleOrderPreView() + }, [orderDetail]) + + + return ( {/* @@ -120,7 +134,7 @@ import styles from './index.module.scss' */} - + @@ -141,15 +155,13 @@ import styles from './index.module.scss' setShowDesc(true)}> 订单备注 { - orderRemark&&{orderRemark}|| + orderRemark&&{orderDetail?.remark}|| 填写备注 } - - {(orderDetail?.status == 0)&&取消订单} - {(orderDetail?.status == 0)&& addressRef.current.changeShow()}>修改地址} + toPay()}>去支付 setShowDesc(false)} > diff --git a/src/pages/orderList/components/order/index.module.scss b/src/pages/orderList/components/order/index.module.scss index 4bba847..e453de3 100644 --- a/src/pages/orderList/components/order/index.module.scss +++ b/src/pages/orderList/components/order/index.module.scss @@ -118,26 +118,4 @@ border-radius: 10px; padding: 10px 22px; } - .btns_list{ - display: flex; - justify-content: flex-end; - margin-top: 30px; - .btns_item{ - width: 152px; - height: 72px; - border: 2px solid #dddddd; - border-radius: 38px; - text-align: center; - line-height: 72px; - font-size: $font_size; - color: $color_font_three; - &:nth-child(n+2) { - margin-left: 32px; - } - } - .end_btn{ - border: 2px solid $color_main; - color: $color_main; - } - } } \ No newline at end of file diff --git a/src/pages/orderList/components/order/index.tsx b/src/pages/orderList/components/order/index.tsx index e6fc8d5..659d18c 100644 --- a/src/pages/orderList/components/order/index.tsx +++ b/src/pages/orderList/components/order/index.tsx @@ -1,8 +1,10 @@ +import { goLink } from "@/common/common"; import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; +import OrderBtns from "@/components/orderBtns"; import { useSelector } from "@/reducers/hooks"; import { Image, Text, View } from "@tarojs/components" import classnames from "classnames"; -import { memo, useCallback } from "react"; +import { memo, useCallback, useMemo, useRef } from "react"; import styles from './index.module.scss' type Param = { @@ -15,7 +17,9 @@ type Param = { product_list: any[], total_fabrics: number, total_colors: number, - total_number: number + total_number: number, + status: 0, + id: number } } export default memo(({value}: Param) => { @@ -28,9 +32,47 @@ export default memo(({value}: Param) => { const standardPrice = useCallback((price, sale_mode) => { return formatPriceDiv(price).toLocaleString() + '/' + (sale_mode == 1?'m':'kg') }, [value]) + + + + //订单按钮按订单状态归类 + const orderBtnsList = useRef([ + { + value: [0, 1, 2, 9, 3], //取消订单按钮对应： 待接单，待配布，已配布, 待付款， 待发货 + label: '取消订单' + }, + { + value: [3, 9], //去付款按钮对应：待付款， 待发货 + label: '去付款' + }, + { + value: [3], //取消订单按钮对应： 待发货 + label: '申请退款' + }, + { + value: [4, 7, 8, 6], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款 + label: '查看物流' + }, + { + value: [4, 7, 6], //取消订单按钮对应： 待收货, 已收货, 已退款 + label: '申请退货' + }, + { + value: [4], //取消订单按钮对应： 待收货 + label: '确认收货' + }, + { + value: [4,7,8,6], //取消订单按钮对应： 待收货，已收货，已完成, 已退款 + label: '再次购买' + } + ]) + const orderBtnsShow = useCallback((item, status) => { + return item.value.includes(status) + },[]) + return ( - + goLink('/pages/order/index', {id: value?.id})}> {userInfo.adminUserInfo.user_name} @@ -41,7 +83,7 @@ export default memo(({value}: Param) => { {value?.shipment_mode_name} - + goLink('/pages/order/index', {id: value?.id})}> {value?.sale_mode_name} {formatHashTag(value?.product_list[0].code, value?.product_list[0].name)} @@ -61,7 +103,6 @@ export default memo(({value}: Param) => { ×{formatCount(itemColor, value.sale_mode)}条 ) - }) } @@ -73,12 +114,8 @@ export default memo(({value}: Param) => { {`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`} - - 取消订单 - 修改地址 - 修改地址 - 去付款 - + ) -}) \ No newline at end of file +}) + diff --git a/src/pages/orderList/index.tsx b/src/pages/orderList/index.tsx index 7e446d2..8bceb49 100644 --- a/src/pages/orderList/index.tsx +++ b/src/pages/orderList/index.tsx @@ -100,7 +100,7 @@ export default () => { {orderData?.list.map(item => { - return + return })}