diff --git a/src/api/salesAfterOrder.ts b/src/api/salesAfterOrder.ts index dae4883..1b08495 100644 --- a/src/api/salesAfterOrder.ts +++ b/src/api/salesAfterOrder.ts @@ -38,4 +38,14 @@ export const GetSaleOrderListApi = () => { url: `/v1/mall/returnApplyOrder`, method: "get", }) +} + +/** + * 物流上传 + */ + export const ReturnApplyLogisticsApi = () => { + return useRequest({ + url: `/v1/mall/returnApplyOrder/upload`, + method: "put", + }) } \ No newline at end of file diff --git a/src/common/constant.js b/src/common/constant.js index 2289265..42b4b0b 100644 --- a/src/common/constant.js +++ b/src/common/constant.js @@ -4,13 +4,13 @@ // export const BASE_URL = `http://10.0.0.5:50001/lymarket` // export const BASE_URL = `http://192.168.0.89:40001/lymarket` // export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞 -export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境 +// export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境 // export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发 // export const BASE_URL = `http://192.168.1.30:50001/lymarket` // 发 // 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.224:50002/lymarket` // 添 +export const BASE_URL = `http://192.168.1.224:50002/lymarket` // 添 // export const BASE_URL = `http://192.168.1.15:50001/lymarket` // 杰 // CDN diff --git a/src/components/orderBtns/index.tsx b/src/components/orderBtns/index.tsx index 5f0d895..c1f23b2 100644 --- a/src/components/orderBtns/index.tsx +++ b/src/components/orderBtns/index.tsx @@ -55,7 +55,7 @@ export default memo(({orderInfo, onClick}:Param) => { }, { id: 3, - value: [SaleOrderStatusWaitingDelivery.value], //申请退款按钮对应： 待发货 + value: [SaleOrderStatusWaitingDelivery.value, SaleOrderStatusTaking.value], //申请退款按钮对应： 待发货, 提货中 label: '申请退款' }, // { diff --git a/src/components/textareaEnhance/index.module.scss b/src/components/textareaEnhance/index.module.scss new file mode 100644 index 0000000..3defd51 --- /dev/null +++ b/src/components/textareaEnhance/index.module.scss @@ -0,0 +1,36 @@ +.other_desc{ + // padding: 0 20px; + box-sizing: border-box; + .title{ + font-size: $font_size; + font-weight: 700; + } + .textarea{ + position: relative; + height: 165.4px; + .descDataNum{ + position: absolute; + right: 10px; + bottom: 10px; + font-size: 22px; + color: #ABABAB; + } + } + .textarea_con, .textarea_con_pretend{ + background-color: #f3f3f3; + border: 2px solid #e6e6e6; + border-radius: 10px; + width: 100%; + font-size: 25px; + height: 165.4px; + padding: 20px 20px 30px 20px; + box-sizing: border-box; + margin-top: 20px; + } + .textarea_con_pretend{ + color: $color_font_two; + } + .textarea_con_pretend_ed{ + color: #000; + } +} \ No newline at end of file diff --git a/src/components/textareaEnhance/index.tsx b/src/components/textareaEnhance/index.tsx new file mode 100644 index 0000000..4c6eb69 --- /dev/null +++ b/src/components/textareaEnhance/index.tsx @@ -0,0 +1,43 @@ +import {Textarea, View } from "@tarojs/components"; +import { memo, useMemo, useState } from "react"; +import styles from './index.module.scss' +import classnames from "classnames"; + +//其他说明 +type Param = { + title?: string, + onChange?: (val: string) => void, + placeholder?: string +} +export default memo(({onChange, title = '', placeholder = '请输入'}:Param) => { + const [descData, setDescData] = useState({ + number: 0, + value: '', + count: 200, + show: false + }) + const getDesc = (e) => { + let value = e.detail.value + let res = value + if(value.length > descData.count) { + res = value.slice(0, descData.count) + } + setDescData({...descData, number:res.length, value: res}) + onChange?.(res) + } + + const toggleShowRealTextarea = (show) => { + setDescData({...descData, show:show}) + } + return ( + + {title} + + {descData.show&&|| + toggleShowRealTextarea(true)}>{descData.value||placeholder} + } + {descData.number +'/'+ descData.count} + + + ) +}) diff --git a/src/components/uploadImage/index.module.scss b/src/components/uploadImage/index.module.scss new file mode 100644 index 0000000..c977074 --- /dev/null +++ b/src/components/uploadImage/index.module.scss @@ -0,0 +1,55 @@ +.image_main{ + display: flex; + align-items: center; + flex-wrap: wrap; + .uploadImg{ + width: 202px; + height: 150px; + background: #f0f0f0; + border: 2px dashed #cccccc; + border-radius: 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; + margin: 0 0 20px 20px; + position: relative; + .miconfont{ + font-size: 50px; + } + .uploadText{ + font-size: 26px; + color: $color_font_three; + } + + + } + .ImgItem{ + width: 202px; + height: 150px; + background: #f0f0f0; + margin-left: 20px; + margin-bottom: 20px; + position: relative; + border-radius: 10px; + image{ + width: 100%; + height: 100%; + border-radius: 10px; + } + .miconfont_close{ + width: 43px; + height: 43px; + background-color: #ccc; + border-radius: 50%; + position: absolute; + right: -10px; + top: -10px; + text-align: center; + line-height: 43px; + color: #fff; + font-size: 30px; + } + } +} \ No newline at end of file diff --git a/src/components/uploadImage/index.tsx b/src/components/uploadImage/index.tsx new file mode 100644 index 0000000..8a144be --- /dev/null +++ b/src/components/uploadImage/index.tsx @@ -0,0 +1,59 @@ +import Taro, { FC } from "@tarojs/taro" +import { memo, useEffect, useState } from "react" +import useUploadCDNImg from "@/use/useUploadImage"; +import { Image, Text, View } from "@tarojs/components"; +import { formatImgUrl } from "@/common/fotmat"; +import classnames from "classnames"; +import styles from './index.module.scss' + +//图片列表 +type ImageParam = { + onChange?:(val: string[]) => void +} +const PictureItem:FC = memo(({onChange}) => { + const {getWxPhoto} = useUploadCDNImg() + const [imageList, setImageLise] = useState([]) + //上传图片 + const uploadImage = async () => { + let res:any = await getWxPhoto('after-sale') + if(res.code == 200) { + setImageLise([...imageList, res.url]) + } + } + //删除图片 + const delImage = (index) => { + imageList.splice(index,1) + setImageLise(() => [...imageList]) + } + //监听上传的图片变化 + useEffect(() => { + onChange?.(imageList||[]) + }, [imageList]) + + //预览图片 + const showImage = () => { + let list = imageList.map(item => { + return formatImgUrl(item) + }) + Taro.previewImage({ + current: list[0], // 当前显示 + urls: list // 需要预览的图片http链接列表 + }) + } + + return ( + + {imageList.map((item, index) => + + + delImage(index)} className={classnames(styles.miconfont_close, 'iconfont icon-qingkong')}> + )} + + + 上传照片 + + + ) +}) + +export default PictureItem \ No newline at end of file diff --git a/src/pages/applyAfterSales/index.module.scss b/src/pages/applyAfterSales/index.module.scss index c20a8b8..6e11a17 100644 --- a/src/pages/applyAfterSales/index.module.scss +++ b/src/pages/applyAfterSales/index.module.scss @@ -59,60 +59,8 @@ font-size: 30px; } } - - .uploadImg{ - width: 202px; - height: 150px; - background: #f0f0f0; - border: 2px dashed #cccccc; - margin-left: 20px; - border-radius: 10px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - position: relative; - margin-bottom: 20px; - position: relative; - .miconfont{ - font-size: 50px; - } - .uploadText{ - font-size: 26px; - color: $color_font_three; - } - - - } - .ImgItem{ - width: 202px; - height: 150px; - background: #f0f0f0; - margin-left: 20px; - margin-bottom: 20px; - position: relative; - border-radius: 10px; - &:nth-child(1) { - margin-left: 50px; - } - image{ - width: 100%; - height: 100%; - border-radius: 10px; - } - .miconfont_close{ - width: 43px; - height: 43px; - background-color: #ccc; - border-radius: 50%; - position: absolute; - right: -10px; - top: -10px; - text-align: center; - line-height: 43px; - color: #fff; - font-size: 30px; - } + .upload_image{ + flex:1; } } } diff --git a/src/pages/applyAfterSales/index.tsx b/src/pages/applyAfterSales/index.tsx index 2837b71..44f3b95 100644 --- a/src/pages/applyAfterSales/index.tsx +++ b/src/pages/applyAfterSales/index.tsx @@ -1,23 +1,20 @@ -import { Image, ScrollView, Text, Textarea, View } from "@tarojs/components"; +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 { formatHashTag, formatImgUrl } from "@/common/fotmat"; -import Counter from "@/components/counter"; import ReasonPopup from "./components/reasonPopup"; import OtherReason from "./components/otherReason"; -import Taro, { useDidShow, useRouter } from "@tarojs/taro"; -import useUploadCDNImg from "@/use/useUploadImage"; +import { useDidShow, useRouter } from "@tarojs/taro"; import { GetSaleOrderDetailApi } from "@/api/order"; import KindList from "./components/kindList" import { ReturnApplyOrderApi } from "@/api/salesAfterOrder"; import { alert, goLink } from "@/common/common"; +import UploadImage from "@/components/uploadImage" +import TextareaEnhance from "@/components/textareaEnhance"; type ReasonParam = 1|2|3 //1 退货原因 2 货物状况 3 退货说明 export default () => { - - useDidShow(() => { getSaleOrderPreView() }) @@ -178,11 +175,13 @@ export default () => { 拍照上传 - - + + + + - + @@ -196,45 +195,4 @@ export default () => { ) -} - -//图片列表 -type ImageParam = { - onChange?:(val: string[]) => void -} -const PictureItem:FC = memo(({onChange}) => { - const {getWxPhoto} = useUploadCDNImg() - const [imageList, setImageLise] = useState([]) - //上传图片 - const uploadImage = async () => { - let res:any = await getWxPhoto('after-sale') - if(res.code == 200) { - setImageLise([...imageList, res.url]) - } - } - - //删除图片 - const delImage = (index) => { - imageList.splice(index,1) - setImageLise(() => [...imageList]) - } - - //监听上传的图片变化 - useEffect(() => { - onChange?.(imageList||[]) - }, [imageList]) - - return ( - <> - {imageList.map((item, index) => - - - delImage(index)} className={classnames(styles.miconfont_close, 'iconfont icon-qingkong')}> - )} - - - 上传照片 - - - ) -}) +} \ No newline at end of file diff --git a/src/pages/details/components/orderCount/index.tsx b/src/pages/details/components/orderCount/index.tsx index f9b122a..ea454ec 100644 --- a/src/pages/details/components/orderCount/index.tsx +++ b/src/pages/details/components/orderCount/index.tsx @@ -16,6 +16,7 @@ import UseLogin from "@/use/useLogin" import { formatHashTag, formatPriceDiv } from "@/common/fotmat"; import { debounce, getFilterData } from "@/common/util"; import LabAndImg from "@/components/LabAndImg"; +import VirtualList from '@tarojs/components/virtual-list' @@ -123,11 +124,14 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) //计数组件 const getInputValue = (num, item) => { - item.count = parseFloat(num) - if(num == 0) item.show = false - setList([...list]) - console.log(num) + item.count = parseFloat(num) + if(num == 0) item.show = false + setList([...list]) + console.log(num) + } + + const onAdd = (item) => { item.show = true item.count = selectList[selectIndex].defaultNum @@ -198,10 +202,41 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) return ¥{price} /{selectList[selectIndex].eunit} }, [selectIndex]) + //虚拟滚动 + const Rows = memo(({id, index, style, data}:any) => { + let item = data[index] + return ( + + + + + + {formatHashTag(item.code, item.name)} + + {formatPrice(item)} + + + + {!item.show&& onAdd(item)}>添加 + || + getInputValue(e, item)} + defaultNum={item.count} + step={selectList[selectIndex].step} + digits={selectList[selectIndex].digits} + onClickBtn={(e) => getInputValue(e, item)} + unit={selectList[selectIndex].unit} + minNum={selectList[selectIndex].minNum} + maxNum={selectList[selectIndex].maxNum} + /> + } + + + ) + }) return ( - closePopup()} > {title} @@ -227,39 +262,52 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) {(list.length <= 0 && colorState.loading)&&} {(list.length > 0&& !colorState.loading)&& - - - - {list.map(item => { - return - - - - - {formatHashTag(item.code, item.name)} - - {formatPrice(item)} - - - - {!item.show&& onAdd(item)}>添加 - || - getInputValue(e, item)} - defaultNum={item.count} - step={selectList[selectIndex].step} - digits={selectList[selectIndex].digits} - onClickBtn={(e) => getInputValue(e, item)} - unit={selectList[selectIndex].unit} - minNum={selectList[selectIndex].minNum} - maxNum={selectList[selectIndex].maxNum} - /> - } - - - })} - - } + // + // + // {list.map(item => { + // return + // + // + // + // + // {formatHashTag(item.code, item.name)} + // + // {formatPrice(item)} + // + // + // + // {!item.show&& onAdd(item)}>添加 + // || + // getInputValue(e, item)} + // defaultNum={item.count} + // step={selectList[selectIndex].step} + // digits={selectList[selectIndex].digits} + // onClickBtn={(e) => getInputValue(e, item)} + // unit={selectList[selectIndex].unit} + // minNum={selectList[selectIndex].minNum} + // maxNum={selectList[selectIndex].maxNum} + // /> + // } + // + // + // })} + // + // } + + + {Rows} + + + } + {(list.length <= 0 && !colorState.loading)&&暂无此商品} diff --git a/src/pages/order/components/applyRefund/index.module.scss b/src/pages/order/components/applyRefund/index.module.scss index e69de29..ec17129 100644 --- a/src/pages/order/components/applyRefund/index.module.scss +++ b/src/pages/order/components/applyRefund/index.module.scss @@ -0,0 +1,66 @@ + +.apply_after_sales_con{ + padding: 20px; + .returnSaleInput_item{ + display: flex; + align-items: center; + padding-bottom: 50px; + flex-wrap: wrap; + .title{ + font-size: $font_size; + font-weight: 700; + width: 119px; + } + .select{ + flex:1; + height: 60px; + border: 2px solid #e6e6e6; + border-radius: 10px; + margin-left: 20px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + font-size: 26px; + color: $color_font_two; + .miconfont{ + font-size: 30px; + } + } + .upload_image{ + flex:1; + } + } + .btns_con{ + width: 100%; + bottom:0; + box-sizing: border-box; + margin-top: 50px; + .btns_two{ + display: flex; + height: 82px; + // border: 1PX solid #007aff; + font-size: $font_size_big; + border-radius: 40px; + margin-bottom: 20px; + .rest_btn{ + flex:1; + border: 1PX solid #007aff; + border-radius: 40px 0 0 40px; + text-align: center; + line-height: 82px; + color: $color_main; + background-color: #fff; + + } + .verify_btn{ + flex:1; + border-radius: 0 40px 40px 0; + background: #007aff; + text-align: center; + line-height: 82px; + color: #fff; + } + } + } +} \ No newline at end of file diff --git a/src/pages/order/components/applyRefund/index.tsx b/src/pages/order/components/applyRefund/index.tsx index 91f98dc..481d03f 100644 --- a/src/pages/order/components/applyRefund/index.tsx +++ b/src/pages/order/components/applyRefund/index.tsx @@ -1,9 +1,57 @@ -import { memo } from "react"; +import Popup from "@/components/popup"; +import TextareaEnhance from "@/components/textareaEnhance"; +import { ScrollView, Text, View } from "@tarojs/components"; +import { memo, useCallback, useState } from "react"; +import ReasonPopup from "../reasonPopup"; +import styles from './index.module.scss' +import classnames from "classnames"; + +type Param = { + show?: true|false, + onClose?: () => void +} +export default memo(({show, onClose}:Param) => { + + + const getOtherReason = useCallback(() => { + + }, []) + + const onSubmit = (val) => { + + } + + //显示说明 + const [showReason, setShowReason] = useState(false) + const closeReason = useCallback(() => { + setShowReason(false) + }, []) + + const onShowReason = () => { + setShowReason(true) + } -export default memo(() => { return ( <> - 123123 + + + + 退款说明 + onShowReason()}> + 请选择 + + + + + + + onSubmit(1)}>取消 + onSubmit(2)}>确认 + + + + + ) }) \ No newline at end of file diff --git a/src/pages/order/components/reasonPopup/index.module.scss b/src/pages/order/components/reasonPopup/index.module.scss new file mode 100644 index 0000000..eba26cd --- /dev/null +++ b/src/pages/order/components/reasonPopup/index.module.scss @@ -0,0 +1,27 @@ +.reason_return_con{ + height: 50vh; + .reason_title{ + padding: 10px 20px 0 20px; + height: 60px; + border-bottom: 1PX solid #F3F3F3; + box-sizing: border-box; + Text{ + font-size: 26px; + border-bottom: 3px solid #000; + padding: 10px; + font-weight: 400; + } + + } + .reason_scroll{ + height: calc(100% - 70px); + .reason_list{ + font-size: 26px; + padding: 30px 20px 0 20px; + color: #707070; + .reason_item{ + margin-bottom: 36px; + } + } + } +} \ No newline at end of file diff --git a/src/pages/order/components/reasonPopup/index.tsx b/src/pages/order/components/reasonPopup/index.tsx new file mode 100644 index 0000000..1230787 --- /dev/null +++ b/src/pages/order/components/reasonPopup/index.tsx @@ -0,0 +1,37 @@ +import Popup from "@/components/popup"; +import { ScrollView, Text, View } from "@tarojs/components"; +import { memo, useMemo } from "react"; +import styles from './index.module.scss' + +//原因选择 +type ReasonInfoParam = { + show?: boolean, + onClose?: () => void, +} +export default memo(({show = false, onClose}: ReasonInfoParam) => { + return ( + + + 退款说明 + + + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/order/components/remark/index.tsx b/src/pages/order/components/remark/index.tsx index 14d981b..ce82f0f 100644 --- a/src/pages/order/components/remark/index.tsx +++ b/src/pages/order/components/remark/index.tsx @@ -1,18 +1,24 @@ import Popup from "@/components/popup" import { Textarea, View } from "@tarojs/components" -import { useCallback, useState } from "react" +import { useCallback, useEffect, useState } from "react" import styles from './index.module.scss' type Param = { onBlur?: (val:any) => void onSave?: (val: string) => void + defaultValue?: string } -export default ({onBlur, onSave}:Param) => { +export default ({onBlur, onSave, defaultValue = ''}:Param) => { const [descData, setDescData] = useState({ number: 0, value: '', count: 200 }) + + useEffect(() => { + getDesc(defaultValue) + }, [defaultValue]) + const getDesc = useCallback((e) => { let value = e.detail.value let res = value diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx index 5d6b559..e1e3b45 100644 --- a/src/pages/order/index.tsx +++ b/src/pages/order/index.tsx @@ -15,6 +15,7 @@ import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro"; import classnames from "classnames"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import AddressInfoDetail from "./components/addressInfoDetail"; +import ApplyRefund from "./components/applyRefund"; import KindList from "./components/kindList"; import OrderState from "./components/orderState"; import Payment from "./components/payment"; @@ -149,7 +150,10 @@ import styles from './index.module.scss' }else if(val == 2) { //待付款 toPay() + } else if(val == 3) { + setRefundShow(true) } + }, [orderDetail]) //页面下拉刷新 @@ -189,6 +193,12 @@ import styles from './index.module.scss' getSaleOrderPreView() }, [orderDetail]) + //退款申请 + const [refundShow, setRefundShow] = useState(false) + const applyRefundClose = useCallback(() => { + setRefundShow(false) + }, []) + return ( @@ -224,10 +234,10 @@ import styles from './index.module.scss' } setShowDesc(false)}> - getRemark(e)}/> + getRemark(e)} defaultValue={orderDetail?.remark}/> - + ) diff --git a/src/pages/salesAfter/components/addressInfoDetail/index.tsx b/src/pages/salesAfter/components/addressInfoDetail/index.tsx index e4d7ed7..d8e8b70 100644 --- a/src/pages/salesAfter/components/addressInfoDetail/index.tsx +++ b/src/pages/salesAfter/components/addressInfoDetail/index.tsx @@ -1,30 +1,69 @@ +import { AFTER_ORDER_STATUS } from "@/common/enum"; import { Text, View } from "@tarojs/components" import classnames from "classnames"; -import {memo} from "react"; +import {memo, useMemo} from "react"; import styles from './index.module.scss' -export default memo(({return_address = '', return_phone = ''}:{return_address:string, return_phone: string}) => { +type Param = { + return_address?:string, + return_phone?: string, + onLogistics?: (val: number) => void, + stage?: number +} +export default memo(({return_address = '', return_phone = '', onLogistics, stage}:Param) => { + const { + ReturnStageApplying, + ReturnStageWaitCheck, + ReturnStageChecked, + ReturnStageReturned, + ReturnStageCancel, + ReturnStageQualityCheckPendingRefund, + ReturnStageServiceOrderPendingRefund, + ReturnStageRejected + } = AFTER_ORDER_STATUS + + //是否显示地址 + const showAddress = useMemo(() => { + return stage != ReturnStageApplying.value + }, []) + + //上传物流 + const upLogistics = useMemo(() => { + return stage == ReturnStageWaitCheck.value + }, [stage]) + + //查看物流 + const showLogistics = useMemo(() => { + return (stage == ReturnStageChecked.value || stage == ReturnStageQualityCheckPendingRefund.value) + }, [stage]) + + return ( - - - - 请按以下退货地址寄回货物并提供退货物流信息 - - - - - - {return_address} - - - 管理员 - {return_phone} - {/* - 上传物流 - */} + <> + {showAddress&& + + + 请按以下退货地址寄回货物并提供退货物流信息 + + + + + + {return_address} + + + 管理员 + {return_phone} + {upLogistics&& onLogistics?.(1)}> + 上传物流 + } + {showLogistics&& onLogistics?.(2)}> + 查看物流 + } + - - + } + ) }) \ No newline at end of file diff --git a/src/pages/salesAfter/components/applyRecord/index.module.scss b/src/pages/salesAfter/components/applyRecord/index.module.scss new file mode 100644 index 0000000..ad1916d --- /dev/null +++ b/src/pages/salesAfter/components/applyRecord/index.module.scss @@ -0,0 +1,146 @@ +.apply_record_scroll{ + height: 70vh; +} +.apply_record_main{ + margin-top: 20px; + padding: 0 30px; + .kind_number{ + width: 100%; + padding: 20px; + box-sizing: border-box; + text{ + background-color: #F6F6F6; + border-radius: 10px; + font-size: $font_size_medium; + padding: 5px 0; + text-align: center; + width: 100%; + display: block; + color: $color_font_three; + } + } + .orders_list_con{ + + background-color: #fff; + border-radius: 20px; + padding: 20px; + .orders_return_title{ + font-size: 28px; + font-weight: 700; + padding-bottom: 20px; + } + .order_list{ + &:nth-child(n+2) { + margin-top: 45px; + } + .order_list_title{ + display: flex; + align-items: center; + .tag{ + font-size: $font_size_min; + background-color: #CDE5FF; + padding: 5px 10px; + border-radius: 6px; + color: $color_main; + } + .title{ + font-weight: 700; + font-size: $font_size; + margin-left: 20px; + flex:1; + } + .num{ + color: $color_font_two; + font-size: $font_size_min; + } + } + } + .order_list_scroll{ + margin-top: 30px; + + .order_list_item { + display: flex; + &:nth-child(2) { + margin-top: 30px; + } + .order_list_item_img{ + width: 126px; + height: 126px; + border-radius: 20px; + } + .order_list_item_con{ + display: flex; + width: 100%; + flex:1; + border-bottom: 1px solid #f0f0f0; + height: 150px; + padding-top: 20px; + box-sizing: border-box; + } + .order_list_item_des{ + flex:1; + box-sizing: border-box; + padding-left: 30px; + .order_list_item_title{ + font-weight: 700; + font-size: $font_size; + margin-bottom: 15px; + } + .order_list_item_price{ + font-size: 26px; + color: $color_font_three; + } + } + .order_list_item_count{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-end; + .count_num{ + color: $color_main; + font-size: $font_size; + margin-bottom: 15px; + font-weight: 400; + text{ + font-size: $font_size_min; + } + } + .count_price { + font-size: $font_size; + font-weight: 700; + text{ + font-size: $font_size_min; + } + } + } + } + } + .order_total{ + padding-top: 30px; + display: flex; + justify-content: space-between; + text{ + &:nth-child(1) { + font-size: 28px; + font-weight: 700; + } + &:nth-child(2) { + font-size: 32px; + font-weight: 700; + color: #007AFF; + } + } + } + .order_estimated_amount{ + display: flex; + align-items: flex-end; + flex-direction: column; + padding: 30px 0; + .order_price_des{ + font-size: $font_size_medium; + color: $color_font_two; + } + } + } +} + diff --git a/src/pages/salesAfter/components/applyRecord/index.tsx b/src/pages/salesAfter/components/applyRecord/index.tsx new file mode 100644 index 0000000..2d48da6 --- /dev/null +++ b/src/pages/salesAfter/components/applyRecord/index.tsx @@ -0,0 +1,124 @@ +import { SaleOrderOrderDetailApi } from "@/api/salesAfterOrder"; +import { formatHashTag, formatPriceDiv } from "@/common/fotmat"; +import LabAndImg from "@/components/LabAndImg"; +import Popup from "@/components/popup"; +import { ScrollView, Text, View } from "@tarojs/components"; +import { memo, useCallback, useEffect, useMemo, useState } from "react"; +import styles from './index.module.scss' + +type Param = { + show?: true|false, + onClose?: () => void, + onSubmit?: () => void, + id?: number +} +export default memo(({show, onClose, onSubmit, id}:Param) => { + useEffect(() => { + if(show && id) getSaleOrderPreView() + }, [show, id]) + + //获取订单详情 + const [orderDetail, setOrderDetail] = useState() //获取到的原始数据 + const {fetchData: saleOrderOrderDetailData} = SaleOrderOrderDetailApi() + const getSaleOrderPreView = async () => { + if(id) { + let res = await saleOrderOrderDetailData({id: id}) + setOrderDetail(res.data) + } + Taro.stopPullDownRefresh() + } + //格式化数据格式 + const [formatDetailOrder, setFormatDetailOrder] = useState() //格式化后的数据 + const formatData = () => { + setFormatDetailOrder({ + estimate_amount: orderDetail.estimate_amount, //预估金额 + 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, + stage: orderDetail.stage, //订单状态 + type: orderDetail.type, //退货or退款 + total_sale_price: orderDetail.total_sale_price, //销售金额 + total_should_collect_money: orderDetail.total_should_collect_money, //应收金额 + total_weight_error_discount: orderDetail.total_weight_error_discount, //空差优惠 + actual_amount: orderDetail.actual_amount, //实付金额 + the_previous_status: orderDetail.the_previous_status, //取消订单时的订单状态 + }) + } + + //监听获取到的数据 + useEffect(() => { + if(orderDetail) + formatData() + }, [orderDetail]) + + //对应数量 + const formatCount = useCallback((item) => { + return formatDetailOrder?.sale_mode == 0? item.roll : Number(item.length / 100) + }, [formatDetailOrder]) + //对应单价 + const standardPrice = useCallback(price => { + return formatPriceDiv(price).toLocaleString() + '/' + (formatDetailOrder?.sale_mode == 1?'m':'kg') + }, [formatDetailOrder]) + //数量格式 + const numText = useMemo(() => { + if(formatDetailOrder) + return `${formatDetailOrder?.total_fabrics}种面料，${formatDetailOrder?.total_colors}种颜色，共${formatDetailOrder?.total_number}${formatDetailOrder?.unit}` + }, [formatDetailOrder]) + + //整理颜色 + const labAndRgbAndUrl = useCallback((item) => { + return {lab:{...item?.lab}, rgb:{...item?.rgb}, texturl_url: item?.texturl_url} + }, []) + + return ( + <> + + {formatDetailOrder&& + {numText} + + + { + formatDetailOrder?.list?.map(item => { + return + + {formatDetailOrder.sale_mode_name} + {formatHashTag(item.code, item.name)} + 共{item?.product_colors.length}种 + + + {item?.product_colors?.map(colorItem => { + return + + + + + + {colorItem.code + ' ' + colorItem.name} + ¥{standardPrice(colorItem.sale_price)} + + + ×{formatCount(colorItem)}{formatDetailOrder.unit} + ¥{formatPriceDiv(colorItem.estimate_amount).toLocaleString()} + + + + })} + + + }) + } + + 申请条数 + ×{orderDetail?.total_number} + + + + } + + + ) +}) \ No newline at end of file diff --git a/src/pages/salesAfter/components/kindList/index.tsx b/src/pages/salesAfter/components/kindList/index.tsx index b5e7a52..2cc8d3a 100644 --- a/src/pages/salesAfter/components/kindList/index.tsx +++ b/src/pages/salesAfter/components/kindList/index.tsx @@ -45,18 +45,18 @@ export default memo(({order, comfirm = false}:Param) => { return `${order?.total_fabrics}种面料，${order?.total_colors}种颜色，共${order?.total_number}${order?.unit}` }, [order]) - const { - SaleOrderStatusBooking, // 待接单 - SaleOrderStatusArranging, // 配布中 - SaleOrderStatusArranged, // 已配布 - SaleOrderStatusWaitingPayment, // 待付款 - SaleOrderStatusWaitingDelivery, // 待发货 - SaleOrderStatusWaitingReceipt, // 待收货 - SaleOrderStatusAlreadyReceipt, // 已收货 - SaleOrderStatusComplete, // 已完成 - SaleOrderStatusRefund, // 已退款 - SaleOrderStatusCancel, // 已取消 - } = ORDER_STATUS + // const { + // SaleOrderStatusBooking, // 待接单 + // SaleOrderStatusArranging, // 配布中 + // SaleOrderStatusArranged, // 已配布 + // SaleOrderStatusWaitingPayment, // 待付款 + // SaleOrderStatusWaitingDelivery, // 待发货 + // SaleOrderStatusWaitingReceipt, // 待收货 + // SaleOrderStatusAlreadyReceipt, // 已收货 + // SaleOrderStatusComplete, // 已完成 + // SaleOrderStatusRefund, // 已退款 + // SaleOrderStatusCancel, // 已取消 + // } = ORDER_STATUS //金额列表枚举 const priceList = [ diff --git a/src/pages/salesAfter/components/returnLogistics/index.module.scss b/src/pages/salesAfter/components/returnLogistics/index.module.scss new file mode 100644 index 0000000..1a22287 --- /dev/null +++ b/src/pages/salesAfter/components/returnLogistics/index.module.scss @@ -0,0 +1,35 @@ + +.logistics_main{ + padding: 20px 30px; + box-sizing: border-box; + .logistics_image{ + display: flex; + .title_desc{ + font-size: 28px; + font-weight: 700; + padding-top: 50px; + box-sizing: border-box; + } + .upload_image{ + flex:1; + } + } + .logistics_desc{ + margin-top: 50px; + } + .btns_two{ + display: flex; + height: 82px; + font-size: $font_size_big; + border-radius: 40px; + margin-top: 50px; + .verify_btn{ + flex:1; + border-radius: 40px; + background: #007aff; + text-align: center; + line-height: 82px; + color: #fff; + } + } +} diff --git a/src/pages/salesAfter/components/returnLogistics/index.tsx b/src/pages/salesAfter/components/returnLogistics/index.tsx new file mode 100644 index 0000000..3d6b19f --- /dev/null +++ b/src/pages/salesAfter/components/returnLogistics/index.tsx @@ -0,0 +1,70 @@ +import Popup from "@/components/popup"; +import { Text, View } from "@tarojs/components"; +import { memo, useCallback, useEffect, useRef, useState } from "react"; +import UploadImage from "@/components/uploadImage" +import styles from './index.module.scss' +import TextareaEnhance from "@/components/textareaEnhance"; +import { ReturnApplyLogisticsApi } from "@/api/salesAfterOrder"; +import { alert } from "@/common/common"; + +type Param = { + show?: true|false, + onClose?: () => void, + onSubmit?: () => void, + id?: number //订单id +} +export default memo(({show = false, onClose, onSubmit, id = 0}: Param) => { + //需要提交的数据 + const submitData = useRef({ + accessory_url: [], + remark: '', + id: 0 + }) + useEffect(() => { + if(id) submitData.current.id = id + }, [id]) + + //获取图片列表 + const getImageList = useCallback((list) => { + submitData.current.accessory_url = list + }, []) + + //备注 + const getOtherReason = useCallback((val) => { + submitData.current.remark = val + }, []) + + //确定 + const {fetchData} = ReturnApplyLogisticsApi() + const onSubmitEven = async () => { + if(!id) return alert.error('参数有误') + if(submitData.current.accessory_url.length <= 0) return alert.error('请上传附件') + let res = await fetchData(submitData.current) + if(res.success) { + alert.success('上传成功') + } else { + alert.error('上传失败') + } + } + + return ( + <> + + + + 上传附件： + + + + + + + + + onSubmitEven()}>保存 + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/salesAfter/index.tsx b/src/pages/salesAfter/index.tsx index 0e396d2..2796f66 100644 --- a/src/pages/salesAfter/index.tsx +++ b/src/pages/salesAfter/index.tsx @@ -15,9 +15,11 @@ import Taro, {useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro"; import classnames from "classnames"; import { useCallback, useEffect, useMemo, useRef, useState, memo } from "react"; import AddressInfoDetail from "./components/addressInfoDetail"; +import ApplyRecord from "./components/applyRecord"; import ContentBox from "./components/contentBox"; import KindList from "./components/kindList"; import OrderState from "./components/orderState"; +import ReturnLogistics from "./components/returnLogistics"; import styles from './index.module.scss' export default () => { @@ -73,13 +75,7 @@ import styles from './index.module.scss' //获取底部按钮点击, 获取按钮状态 const orderStateClick = useCallback((val) => { - if(val == 1) { - //取消订单 - getSaleOrderPreView() - } - if(val == 2) { - - } + }, [orderDetail]) //页面下拉刷新 @@ -102,16 +98,42 @@ import styles from './index.module.scss' //订单状态枚举 const {SaleOrderStatusCancel} = ORDER_STATUS + //物流显示 + const [logisticsShow, setLogisticsShow] = useState(false) + const onShowLogistics = useCallback((val) => { + if(val == 1) { + setLogisticsShow(true) + } else { + const list = orderDetail?.fabric_piece_accessory_url.map(item => { + return formatImgUrl(item) + }) + Taro.previewImage({ + current: list[0], // 当前显示 + urls: list // 需要预览的图片http链接列表 + }) + } + }, [orderDetail]) + const onCloseLogistics = useCallback(() => setLogisticsShow(false), []) + //物流成功上传 + const logisticsSuccess = useCallback(() => { + getSaleOrderPreView() + }, []) + + //显示生气记录 + const [applyRecord, setApplyRecord] = useState(false) + return ( - + {(orderDetail?.status != SaleOrderStatusCancel.value)&& } + + setApplyRecord(false)}/> ) @@ -145,12 +167,18 @@ import styles from './index.module.scss' clipboardData(orderInfo?.order_no)}>复制 + + {orderInfo?.return_reason_name} + {orderInfo?.return_explain_name} {orderInfo?.return_remark} + + {orderInfo?.goods_status_name} + {formatDateTime(orderInfo?.apply_time)} @@ -158,12 +186,20 @@ import styles from './index.module.scss' ) }) - const AfterSalePricture = memo(({urls}:{urls: string[]}) => { + const AfterSalePricture = memo(({urls = []}:{urls: string[]}) => { + + const showList = useMemo(() => { + let res = urls.map(item => { + return formatImgUrl(item) + }) + return res + }, [urls]) + //预览图片 const showImage = () => { Taro.previewImage({ - current: formatImgUrl(''), // 当前显示 - urls: [formatImgUrl('')] // 需要预览的图片http链接列表 + current: showList[0], // 当前显示 + urls: showList // 需要预览的图片http链接列表 }) } return ( diff --git a/src/pages/salesAfterList/components/returnLogistics/index.module.scss b/src/pages/salesAfterList/components/returnLogistics/index.module.scss new file mode 100644 index 0000000..1a22287 --- /dev/null +++ b/src/pages/salesAfterList/components/returnLogistics/index.module.scss @@ -0,0 +1,35 @@ + +.logistics_main{ + padding: 20px 30px; + box-sizing: border-box; + .logistics_image{ + display: flex; + .title_desc{ + font-size: 28px; + font-weight: 700; + padding-top: 50px; + box-sizing: border-box; + } + .upload_image{ + flex:1; + } + } + .logistics_desc{ + margin-top: 50px; + } + .btns_two{ + display: flex; + height: 82px; + font-size: $font_size_big; + border-radius: 40px; + margin-top: 50px; + .verify_btn{ + flex:1; + border-radius: 40px; + background: #007aff; + text-align: center; + line-height: 82px; + color: #fff; + } + } +} diff --git a/src/pages/salesAfterList/components/returnLogistics/index.tsx b/src/pages/salesAfterList/components/returnLogistics/index.tsx new file mode 100644 index 0000000..3d6b19f --- /dev/null +++ b/src/pages/salesAfterList/components/returnLogistics/index.tsx @@ -0,0 +1,70 @@ +import Popup from "@/components/popup"; +import { Text, View } from "@tarojs/components"; +import { memo, useCallback, useEffect, useRef, useState } from "react"; +import UploadImage from "@/components/uploadImage" +import styles from './index.module.scss' +import TextareaEnhance from "@/components/textareaEnhance"; +import { ReturnApplyLogisticsApi } from "@/api/salesAfterOrder"; +import { alert } from "@/common/common"; + +type Param = { + show?: true|false, + onClose?: () => void, + onSubmit?: () => void, + id?: number //订单id +} +export default memo(({show = false, onClose, onSubmit, id = 0}: Param) => { + //需要提交的数据 + const submitData = useRef({ + accessory_url: [], + remark: '', + id: 0 + }) + useEffect(() => { + if(id) submitData.current.id = id + }, [id]) + + //获取图片列表 + const getImageList = useCallback((list) => { + submitData.current.accessory_url = list + }, []) + + //备注 + const getOtherReason = useCallback((val) => { + submitData.current.remark = val + }, []) + + //确定 + const {fetchData} = ReturnApplyLogisticsApi() + const onSubmitEven = async () => { + if(!id) return alert.error('参数有误') + if(submitData.current.accessory_url.length <= 0) return alert.error('请上传附件') + let res = await fetchData(submitData.current) + if(res.success) { + alert.success('上传成功') + } else { + alert.error('上传失败') + } + } + + return ( + <> + + + + 上传附件： + + + + + + + + + onSubmitEven()}>保存 + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/salesAfterList/index.tsx b/src/pages/salesAfterList/index.tsx index 53430b9..9c4f25e 100644 --- a/src/pages/salesAfterList/index.tsx +++ b/src/pages/salesAfterList/index.tsx @@ -13,6 +13,7 @@ import OrderStatusList from "./components/orderStatusList" import Payment from "../order/components/payment" import { AFTER_ORDER_STATUS } from "@/common/enum" import { GetSaleOrderListApi } from "@/api/salesAfterOrder" +import ReturnLogistics from "./components/returnLogistics" export default () => { const {checkLogin} = useLogin() @@ -97,30 +98,14 @@ export default () => { //监听点击的按钮 const clickOrderBtn = useCallback(({status, orderInfo}) => { if(status == 2) { - //去支付 - setPayOrderInfo({orderId:orderInfo.should_collect_order_id, payment_method:orderInfo.payment_method}) - toPay() - } else { - getOrderList() + //退货物流 + } }, [orderData]) - - //去付款 - const [payOrderInfo, setPayOrderInfo] = useState() - const [payMentShow, setPayMentShow] = useState(false) - const toPay = () => { - setPayMentShow(true) - } - //关闭支付弹窗 - const closePayShow = useCallback(() => { - setPayMentShow(() => false) - }, []) - //支付成功 - const onPaySuccess = useCallback(() => { - getOrderList() - closePayShow() - }, []) + //物流显示 + const [logisticsShow, setLogisticsShow] = useState(false) + const onCloseLogistics = useCallback(() => setLogisticsShow(false), []) return ( @@ -135,8 +120,8 @@ export default () => { return })} + - ) }