From 33016fca854b735dfaf906f2e44a599b3f008c63 Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Wed, 13 Jul 2022 14:52:40 +0800 Subject: [PATCH] =?UTF-8?q?=E8=81=94=E5=8A=A8=E7=BB=84=E4=BB=B6=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/constant.js | 4 +- .../components/reasonPopup/index.module.scss | 4 +- .../components/reasonPopup/index.tsx | 34 +-- src/pages/applyAfterSales/index copy 2.tsx | 254 ++++++++++++++++++ src/pages/applyAfterSales/index.tsx | 123 +++++---- 5 files changed, 334 insertions(+), 85 deletions(-) create mode 100644 src/pages/applyAfterSales/index copy 2.tsx diff --git a/src/common/constant.js b/src/common/constant.js index 4b55726..deed9aa 100644 --- a/src/common/constant.js +++ b/src/common/constant.js @@ -11,8 +11,8 @@ // export const BASE_URL = `https://dev.zzfzyc.com/lymarket` // 开发环境 // export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境 // export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞 -// export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添 -export const BASE_URL = `http://192.168.1.42:50001/lymarket` // 杰 +export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添 +// export const BASE_URL = `http://192.168.1.42:50001/lymarket` // 杰 // CDN // 生成密钥 diff --git a/src/pages/applyAfterSales/components/reasonPopup/index.module.scss b/src/pages/applyAfterSales/components/reasonPopup/index.module.scss index 5e037ed..a988394 100644 --- a/src/pages/applyAfterSales/components/reasonPopup/index.module.scss +++ b/src/pages/applyAfterSales/components/reasonPopup/index.module.scss @@ -11,14 +11,14 @@ } .selectName{ font-size: 26px; - padding: 10px; + padding: 20px 10px; font-weight: 400; color: #ABABAB; } .tips{ color: #ABABAB; border-bottom: 0; - padding: 10px; + padding: 20px 10px; } .select_bottom { border-bottom: 3px solid #007AFF; diff --git a/src/pages/applyAfterSales/components/reasonPopup/index.tsx b/src/pages/applyAfterSales/components/reasonPopup/index.tsx index f54c2a0..ec631c4 100644 --- a/src/pages/applyAfterSales/components/reasonPopup/index.tsx +++ b/src/pages/applyAfterSales/components/reasonPopup/index.tsx @@ -17,36 +17,22 @@ type ReasonInfoParam = { defaultValue?: number, //默认选中 dataLength?: number, //可显示的数据列数 } -export default memo(({show = false, onClose, title = '', list = [], onSelect, onHeaderSelect, defaultValue, dataLength = 2}: ReasonInfoParam) => { +export default memo(({show = false, onClose, title = '', list = [], onSelect, onHeaderSelect, defaultValue, dataLength = 1}: ReasonInfoParam) => { + + const [initList, setInitList] = useState([]) - const [initList, setInitList] = useState([]) - //退货原因 - const idRef = useRef(0) - const {fetchData: fetchDataReturnReason} = ReturnReasonApi() - const getReturnReason = async () => { - let res = await fetchDataReturnReason() - setInitList(res.data?.list||[]) - } useEffect(() => { - getReturnReason() - }, []) - - //售后退货说明 - const {fetchData: fetchDataReturnExplain} = ReturnExplainApi() - const getReturnExplain = async () => { - let res = await fetchDataReturnExplain({return_reason: idRef.current}) - setInitList(res.data?.list||[]) - } + setInitList(list) + }, [list]) const [selectIndex, setSelectIndex] = useState(1) const [headerList, setHeaderList] = useState<{id: number, name: string}[]>([]) const onSelectData = (item) => { if(selectIndex <= dataLength) { - idRef.current = item.id - if(selectIndex < dataLength) getReturnExplain() headerList[selectIndex - 1] = {id:item.id, name:item.name} + onSelect?.({data:headerList, index:selectIndex}) setSelectIndex(selectIndex == dataLength?dataLength:selectIndex + 1) setHeaderList((e) => [...e]) - if(selectIndex == dataLength) onSelect?.(headerList) + if(selectIndex == dataLength) onClose?.() } } @@ -54,13 +40,9 @@ export default memo(({show = false, onClose, title = '', list = [], onSelect, on let list = headerList.slice(0, index + 1) setSelectIndex(index + 1) setHeaderList(list) - onHeaderSelect?.({val, index}) - if(index == 0) { - getReturnReason() - } + onHeaderSelect?.({data:val, index: index + 1}) } - return ( diff --git a/src/pages/applyAfterSales/index copy 2.tsx b/src/pages/applyAfterSales/index copy 2.tsx new file mode 100644 index 0000000..d012b74 --- /dev/null +++ b/src/pages/applyAfterSales/index copy 2.tsx @@ -0,0 +1,254 @@ +import { Image, ScrollView, Text, View } from "@tarojs/components"; +import { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"; +import classnames from "classnames"; +import styles from './index.module.scss' +import ReasonPopup from "./components/reasonPopup"; +import { useDidShow, useRouter } from "@tarojs/taro"; +import { GetSaleOrderDetailApi } from "@/api/order"; +import KindList from "./components/kindList" +import CutKindList from "./components/cutkindList" +import { ReturnApplyOrderApi, ReturnExplainApi, ReturnGoodsStatusApi, ReturnReasonApi } from "@/api/salesAfterOrder"; +import { alert, goLink } from "@/common/common"; +import UploadImage from "@/components/uploadImage" +import TextareaEnhance from "@/components/textareaEnhance"; +import useLogin from "@/use/useLogin"; + +enum returnStatus { + return_reason = 1, //原因 + goods_status = 2, //状况 + return_explain = 3, //说明 + +} +export default () => { + useLogin() + useDidShow(() => { + getSaleOrderPreView() + }) + + const router = useRouter() + const orderId = useRef(Number(router.params.id)) + + //需要提交的数据 + const [submitData, setSubmitData] = useState({ + fabric_piece_accessory_url: [], + goods_status: 0, + reason_describe: '', + return_explain: 0, + return_reason: 0, + roll: 0, + roll_list: [], + sale_order_id: orderId.current + }) + + //获取订单数据 + const [orderDetail, setOrderDetail] = useState() //获取到的原始数据 + const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi() + const getSaleOrderPreView = async () => { + if(orderId.current) { + let res = await getOrderFetchData({id: orderId.current}) + setOrderDetail(res.data) + } + } + + //监听获取到的数据 + useEffect(() => { + if(orderDetail) { + formatData() + } + }, [orderDetail]) + + //格式化数据格式 + const [formatDetailOrder, setFormatDetailOrder] = useState() //格式化后的数据 + const formatData = () => { + setFormatDetailOrder({ + sale_mode: orderDetail.sale_mode, + sale_mode_name: orderDetail.sale_mode_name, + total_colors: orderDetail.total_colors, //总颜色数量 + total_number: orderDetail.total_number, //总数量 + total_fabrics: orderDetail.total_fabrics, //面料数量 + unit: orderDetail.sale_mode == 0?'条':'m', //单位 + list: orderDetail.product_list, + status: orderDetail.status, //订单状态 + }) + } + + //数据总量 + const dataCount = useMemo(() => { + if(formatDetailOrder) { + return `${formatDetailOrder.total_fabrics}种面料，${formatDetailOrder.total_colors}种颜色，共${formatDetailOrder.total_number}条` + } + }, [formatDetailOrder]) + + + + //面料数据 + let roll_list = useRef({}) + + //大货时获取计步器数据 + const getNumChange = useCallback((val) => { + if(parseInt(val.number) > 0) { + roll_list.current[val.color_id] = {product_color_id: val.color_id, product_roll: val.number, sale_order_detail_id: val.sale_order_detail_id} + } else { + delete roll_list.current[val.color_id] + } + + let count = 0 + Object.values(roll_list.current).map((item: any) => { + count += item.product_roll + }) + setSubmitData((e) => ({...e, roll_list:Object.values(roll_list.current), roll: count})) + }, []) + + //散剪和剪板 + const getSelectChange = useCallback((val) => { + if(val.status) { + roll_list.current[val.color_id] = {product_color_id: val.color_id, product_roll: val.length, sale_order_detail_id: val.sale_order_detail_id} + } else { + delete roll_list.current[val.color_id] + } + let count = 0 + Object.values(roll_list.current).map((item: any) => { + count += item.product_roll + }) + setSubmitData((e) => ({...e, roll_list:Object.values(roll_list.current), roll: count})) + }, []) + + //获取图片列表 + const getImageList = useCallback((list) => { + setSubmitData((e) => ({...e, fabric_piece_accessory_url:list})) + }, []) + + //其他说明 + const getOtherReason = useCallback((val) => { + setSubmitData((e) => ({...e, reason_describe: val})) + }, []) + + //提交数据 + const {fetchData: fetchDataReturnApply} = ReturnApplyOrderApi() + const onSubmitData = async () => { + if(submitData.roll_list.length <= 0) return alert.error('请选择退货颜色') + console.log('submitData::',submitData) + let res = await fetchDataReturnApply(submitData) + if(res.success) { + alert.success('申请成功') + goLink('/pages/salesAfterList/index',{}, 'reLaunch') + } else { + alert.error(res.msg) + } + } + + //底部按钮 + const onSubmit = (val) => { + if(val == 2) { + onSubmitData() + } + } + + //退货选择弹窗 + const [showReason, setShowReason] = useState(false) + const closeReason = useCallback(() => setShowReason(false), []) + const onShowReason = (status) => { + if(status == returnStatus.return_reason) { + getReturnReason() + } else if (status == returnStatus.goods_status) { + getReturnGoodsStatus() + } else { + getReturnExplain() + } + setShowReason(true) + } + + console.log('aaa:', 123456789) + + //请求获取到的数据 + const [returnGoodsInfo, setReturnGoodsInfo] = useState<{title:string, list: any[], status: 1|2|3}>({title:'', list:[], status: returnStatus.goods_status}) + //售后货物状况 + const {fetchData: fetchDataGoodsStatus} = ReturnGoodsStatusApi() + const getReturnGoodsStatus = async () => { + let res = await fetchDataGoodsStatus() + setReturnGoodsInfo((e) => ({...e, title: '货物状况', list:res.data?.list||[], status:returnStatus.goods_status})) + } + //退货原因 + const {fetchData: fetchDataReturnReason} = ReturnReasonApi() + const getReturnReason = async () => { + let res = await fetchDataReturnReason() + setReturnGoodsInfo((e) => ({...e, title: '退货原因', list:res.data?.list||[], status:returnStatus.return_reason})) + } + //售后退货说明 + const {fetchData: fetchDataReturnExplain} = ReturnExplainApi() + const getReturnExplain = async () => { + let res = await fetchDataReturnExplain() + setReturnGoodsInfo((e) => ({...e, title: '退货说明', list:res.data?.list||[], status:returnStatus.return_explain})) + } + //选择列表返回的数据 + const [returnObj, setReturnObj] = useState<{[val:number]:{name:string, id: number}}>({}) + const onReturnSelect = useCallback((val) => { + let {id, name} = val + if(returnGoodsInfo.status == returnStatus.goods_status) { + setSubmitData((e) => ({...e, goods_status:id})) + setReturnObj(e => ({...e, [returnStatus.goods_status]:{name, id}})) + } + if(returnGoodsInfo.status == returnStatus.return_explain) { + setSubmitData((e) => ({...e, return_explain:id})) + setReturnObj(e => ({...e, [returnStatus.return_explain]:{name, id}})) + } + if(returnGoodsInfo.status == returnStatus.return_reason) { + setSubmitData((e) => ({...e, return_reason:id})) + setReturnObj(e => ({...e, [returnStatus.return_reason]:{name, id}})) + } + setShowReason(false) + }, [returnGoodsInfo]) + + return ( + + + {dataCount} + + + {(orderDetail?.sale_mode == 0)&&|| + } + + + 退货原因 + onShowReason(returnStatus.return_reason)}> + {returnObj[returnStatus.return_reason]?.name||'请选择'} + + + + + 货物状况 + onShowReason(returnStatus.goods_status)}> + {returnObj[returnStatus.goods_status]?.name||'请选择'} + + + + + 退货说明 + onShowReason(returnStatus.return_explain)}> + {returnObj[returnStatus.return_explain]?.name||'请选择'} + + + + + 拍照上传 + + + + + + + + + + + + + + onSubmit(1)}>取消 + onSubmit(2)}>确认 + + + + + ) +} \ No newline at end of file diff --git a/src/pages/applyAfterSales/index.tsx b/src/pages/applyAfterSales/index.tsx index d012b74..739ad34 100644 --- a/src/pages/applyAfterSales/index.tsx +++ b/src/pages/applyAfterSales/index.tsx @@ -31,10 +31,10 @@ export default () => { //需要提交的数据 const [submitData, setSubmitData] = useState({ fabric_piece_accessory_url: [], - goods_status: 0, - reason_describe: '', - return_explain: 0, - return_reason: 0, + goods_status: '', //货物状况 + reason_describe: '', //其他说明 + return_explain: '', //退货说明 + return_reason: '', //退货原因 roll: 0, roll_list: [], sale_order_id: orderId.current @@ -69,13 +69,15 @@ export default () => { unit: orderDetail.sale_mode == 0?'条':'m', //单位 list: orderDetail.product_list, status: orderDetail.status, //订单状态 + av_return_roll: orderDetail.av_return_roll //可退条数 }) } //数据总量 const dataCount = useMemo(() => { if(formatDetailOrder) { - return `${formatDetailOrder.total_fabrics}种面料，${formatDetailOrder.total_colors}种颜色，共${formatDetailOrder.total_number}条` + let total_number = formatDetailOrder.sale_mode == 0?formatDetailOrder.total_number + '条':(formatDetailOrder.total_number/100) + '米' + return `${formatDetailOrder.total_fabrics}种面料，${formatDetailOrder.total_colors}种颜色，共${total_number}` } }, [formatDetailOrder]) @@ -140,64 +142,81 @@ export default () => { //底部按钮 const onSubmit = (val) => { if(val == 2) { + if(!submitData.return_explain) return alert.error('请填写其他说明') onSubmitData() } } - //退货选择弹窗 + //退货原因选择弹窗 const [showReason, setShowReason] = useState(false) const closeReason = useCallback(() => setShowReason(false), []) - const onShowReason = (status) => { - if(status == returnStatus.return_reason) { - getReturnReason() - } else if (status == returnStatus.goods_status) { - getReturnGoodsStatus() - } else { - getReturnExplain() - } + const onShowReason = () => { setShowReason(true) } - - console.log('aaa:', 123456789) + useEffect(() => { + getReturnReason() + }, []) //请求获取到的数据 - const [returnGoodsInfo, setReturnGoodsInfo] = useState<{title:string, list: any[], status: 1|2|3}>({title:'', list:[], status: returnStatus.goods_status}) - //售后货物状况 - const {fetchData: fetchDataGoodsStatus} = ReturnGoodsStatusApi() - const getReturnGoodsStatus = async () => { - let res = await fetchDataGoodsStatus() - setReturnGoodsInfo((e) => ({...e, title: '货物状况', list:res.data?.list||[], status:returnStatus.goods_status})) - } + const [returnGoodsInfo, setReturnGoodsInfo] = useState([]) + //退货原因 const {fetchData: fetchDataReturnReason} = ReturnReasonApi() const getReturnReason = async () => { let res = await fetchDataReturnReason() - setReturnGoodsInfo((e) => ({...e, title: '退货原因', list:res.data?.list||[], status:returnStatus.return_reason})) + setReturnGoodsInfo((e) => (res.data?.list)) } //售后退货说明 const {fetchData: fetchDataReturnExplain} = ReturnExplainApi() - const getReturnExplain = async () => { - let res = await fetchDataReturnExplain() - setReturnGoodsInfo((e) => ({...e, title: '退货说明', list:res.data?.list||[], status:returnStatus.return_explain})) + const getReturnExplain = async (id) => { + let res = await fetchDataReturnExplain({return_reason: id}) + setReturnGoodsInfo((e) => (res.data?.list)) } - //选择列表返回的数据 - const [returnObj, setReturnObj] = useState<{[val:number]:{name:string, id: number}}>({}) + //退货原因选择列表返回的数据 + const [returnObj, setReturnObj] = useState([]) const onReturnSelect = useCallback((val) => { - let {id, name} = val - if(returnGoodsInfo.status == returnStatus.goods_status) { - setSubmitData((e) => ({...e, goods_status:id})) - setReturnObj(e => ({...e, [returnStatus.goods_status]:{name, id}})) + setReturnGoodsInfo((e) => []) + let res = val.data[val.data.length - 1] + if(val.index == 1) getReturnExplain(res.id) + if(val.index == 2) setReturnObj(val.data) + }, []) + const onHeaderSelect = useCallback((val) => { + setReturnGoodsInfo((e) => []) + if(val.index == 1) getReturnReason() + }, []) + + //选择货物状况 + const [showStatus, setShowStatus] = useState(false) + const [statusInfo, setStatusInfo] = useState() + const [statusGoodsInfo, setStatusGoodsInfo] = useState([]) + const {fetchData: fetchDataGoodsStatus} = ReturnGoodsStatusApi() + const getReturnGoodsStatus = async () => { + let res = await fetchDataGoodsStatus() + setStatusGoodsInfo((e) => (res.data?.list)) + } + const onShowStatus = () => { + setShowStatus(() => true) + getReturnGoodsStatus() + } + const closeStatus = useCallback(() => { + setShowStatus(() => false) + }, []) + const onStatusSelect = useCallback((val) => { + let res = val.data[val.data.length - 1] + setStatusInfo(res) + }, []) + + useEffect(() => { + if(returnObj.length > 0) { + submitData.return_reason = returnObj[0].id + submitData.return_explain = returnObj[1].id } - if(returnGoodsInfo.status == returnStatus.return_explain) { - setSubmitData((e) => ({...e, return_explain:id})) - setReturnObj(e => ({...e, [returnStatus.return_explain]:{name, id}})) + if(statusInfo) { + submitData.goods_status = statusInfo.id } - if(returnGoodsInfo.status == returnStatus.return_reason) { - setSubmitData((e) => ({...e, return_reason:id})) - setReturnObj(e => ({...e, [returnStatus.return_reason]:{name, id}})) - } - setShowReason(false) - }, [returnGoodsInfo]) + setSubmitData(() => ({...submitData})) + }, [returnObj, statusInfo]) + return ( @@ -210,22 +229,15 @@ export default () => { 退货原因 - onShowReason(returnStatus.return_reason)}> - {returnObj[returnStatus.return_reason]?.name||'请选择'} + + 0&&styles.selected}>{returnObj?.length > 0?(returnObj[0]?.name + '/' +returnObj[1]?.name):'请选择'} 货物状况 - onShowReason(returnStatus.goods_status)}> - {returnObj[returnStatus.goods_status]?.name||'请选择'} - - - - - 退货说明 - onShowReason(returnStatus.return_explain)}> - {returnObj[returnStatus.return_explain]?.name||'请选择'} + + {statusInfo?.name||'请选择'} @@ -240,7 +252,7 @@ export default () => { - + @@ -248,7 +260,8 @@ export default () => { onSubmit(2)}>确认 - + + ) } \ No newline at end of file