diff --git a/src/api/material.ts b/src/api/material.ts index a777a95..11b6553 100644 --- a/src/api/material.ts +++ b/src/api/material.ts @@ -55,3 +55,14 @@ export const GetLabProductApi = () => { method: "get", }) } + +/** + * 收藏面料 + * @returns +*/ +// export const GetProductDetailApi = () => { +// return useRequest({ +// url: `/v1/mall/product`, +// method: "get", +// }) +// } diff --git a/src/api/salesAfterOrder.ts b/src/api/salesAfterOrder.ts new file mode 100644 index 0000000..1755ce0 --- /dev/null +++ b/src/api/salesAfterOrder.ts @@ -0,0 +1,62 @@ +import { useRequest } from "@/use/useHttp" + +/** + * 售后订单列表 + */ +export const GetSaleOrderListApi = () => { + return useRequest({ + url: `/v1/mall/returnApplyOrder/list`, + method: "get", + }) +} + +/** + * 申请售后订单 + */ + export const ReturnApplyOrderApi = () => { + return useRequest({ + url: `/v1/mall/returnApplyOrder`, + method: "post", + }) +} + +/** + * 取消退货 + */ + export const ReturnApplyOrderCancelApi = () => { + return useRequest({ + url: `/v1/mall/returnApplyOrder/cancel`, + method: "post", + }) +} + +/** + * 售后订单详情 + */ + export const SaleOrderOrderDetailApi = () => { + return useRequest({ + url: `/v1/mall/returnApplyOrder`, + method: "get", + }) +} + +/** + * 物流上传 + */ + export const ReturnApplyLogisticsApi = () => { + return useRequest({ + url: `/v1/mall/returnApplyOrder/upload`, + method: "put", + }) +} + + +/** + * 售后货物状况 + */ + export const ReturnGoodsStatusApi = () => { + return useRequest({ + url: `/v1/mall/enum/return/goodsStatus`, + method: "get", + }) +} diff --git a/src/api/shopCart.ts b/src/api/shopCart.ts index 87e0d32..291ab60 100644 --- a/src/api/shopCart.ts +++ b/src/api/shopCart.ts @@ -31,4 +31,15 @@ export const DelShoppingCartApi = () => { url: `/v1/mall/shoppingCart/productColor`, method: "delete", }) +} + +/** + * 修改购物车数量 + * @returns +*/ +export const UpdateShoppingCartApi = () => { + return useRequest({ + url: `/v1/mall/shoppingCart/productColor`, + method: "put", + }) } \ No newline at end of file diff --git a/src/api/user.ts b/src/api/user.ts index 345c9c7..7d7c97f 100644 --- a/src/api/user.ts +++ b/src/api/user.ts @@ -60,3 +60,12 @@ import { useRequest } from "@/use/useHttp" }) } +/** + * 绑定公司 + */ + export const BindingCompanyApi = () => { + return useRequest({ + url: `/v1/mall/user/binding/company`, + method: "put", + }) +} \ No newline at end of file diff --git a/src/app.config.ts b/src/app.config.ts index 27b804e..e735150 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -171,6 +171,12 @@ export default { pages: [ "index", ] + }, + { + root: "pages/collection", + pages: [ + "index", + ] } ] } diff --git a/src/common/constant.js b/src/common/constant.js index 2f4fa08..ba43cfa 100644 --- a/src/common/constant.js +++ b/src/common/constant.js @@ -5,13 +5,13 @@ // 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 = `http://192.168.1.30:40001/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:50001/lymarket` // 添 -// export const BASE_URL = `http://192.168.1.15:50001/lymarket` // 杰 +// export const BASE_URL = `http://192.168.1.224:50002/lymarket` // 添 +export const BASE_URL = `http://192.168.1.15:50001/lymarket` // 杰 // CDN // 生成密钥 @@ -21,8 +21,6 @@ export const UPLOAD_CDN_URL = `https://v0.api.upyun.com/` // cdn export const IMG_CND_Prefix = CURRENT_ENV.includes('development')? "https://test.cdn.zzfzyc.com":"https://cdn.zzfzyc.com" - - // 上传图片视频 export const CDN_UPLOAD_IMG = `${UPLOAD_CDN_URL || ''}`; diff --git a/src/components/afterOrderBtns/index copy.tsx b/src/components/afterOrderBtns/index copy.tsx new file mode 100644 index 0000000..d695e16 --- /dev/null +++ b/src/components/afterOrderBtns/index copy.tsx @@ -0,0 +1,202 @@ +import { CancelOrderApi, ReceiveOrderApi } from "@/api/order" +import { alert } from "@/common/common" +import { ORDER_STATUS, SALE_MODE } from "@/common/enum" +import { ScrollView, Text, View } from "@tarojs/components" +import Taro from "@tarojs/taro" +import { useCallback, useRef, memo, useState, useEffect, useMemo } from "react" +import styles from './index.module.scss' + +type Param = { + orderInfo: { + status: number, //订单状态 + orderId: number, //订单id + actual_amount: number, //实付金额 + wait_pay_amount: number, //待付金额 + sale_mode: number //订单类型 + }|null, + onClick?: (val: number) => void //点击后触发的事件，返回订单状态 +} + +export default memo(({orderInfo, onClick}:Param) => { + //订单状态枚举 + const { + SaleOrderStatusBooking, + SaleOrderStatusArranging, + SaleOrderStatusArranged, + SaleOrderStatusWaitingDelivery, + SaleOrderStatusComplete, + SaleOrderStatusRefund, + SaleOrderStatusWaitingPayment, + SaleOrderStatusWaitingReceipt, + SaleOrderStatusAlreadyReceipt, + SaleorderstatusWaitingPrePayment + } = ORDER_STATUS + + //订单类型 + const { + SaLeModeBulk, + SaleModeLengthCut, + SaLeModeWeightCut, + } = SALE_MODE + + //订单按钮按订单状态归类, value是该订单状态，可能该按钮会出现 + const orderBtnsList = useRef([ + { + id: 1, + value: [SaleOrderStatusBooking.value, + SaleOrderStatusArranging.value, + SaleOrderStatusArranged.value, + SaleOrderStatusWaitingPayment.value, + SaleOrderStatusWaitingDelivery.value], //取消订单按钮对应： 待接单，配布中，已配布, 待付款， 待发货 + label: '取消订单' + }, + { + id: 2, + value: [SaleorderstatusWaitingPrePayment.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value], //去付款按钮对应：待付款， 待发货, 待收货, 已收货, 已完成 + label: '去付款' + }, + { + id: 3, + value: [SaleOrderStatusWaitingDelivery.value], //申请退款按钮对应： 待发货 + label: '申请退款' + }, + { + id: 4, + value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款 + label: '查看物流' + }, + { + id: 5, + value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusRefund.value], //申请退货按钮对应： 待收货, 已收货, 已退款 + label: '申请退货' + }, + { + id: 6, + value: [SaleOrderStatusWaitingReceipt.value], //确认收货按钮对应： 待收货 + label: '确认收货' + }, + { + id: 7, + value: [SaleOrderStatusWaitingReceipt.value,SaleOrderStatusAlreadyReceipt.value,SaleOrderStatusComplete.value,SaleOrderStatusRefund.value], //再次购买按钮对应： 待收货，已收货，已完成, 已退款 + label: '再次购买' + }, + { + id: 8, + value: [SaleOrderStatusBooking.value], //按钮对应： 待接单 + label: '退款' + }, + ]) + + + //判断是否显示该按钮 + const orderBtnsShow = (item) => { + if(orderInfo) { + if(item.id == 1) { + //取消订单按钮 + return( orderInfo.actual_amount == 0 && item.value.includes(orderInfo.status)) //在待发货之前没有付过款 + } else if (item.id == 2) { + //去付款按钮 + return( orderInfo.wait_pay_amount != 0 && item.value.includes(orderInfo.status)) //只要没有付完款就显示 + } else if(item.id == 3 ) { + //申请退款, 只有大货才有 + return (orderInfo.sale_mode == SaLeModeBulk.value && orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //大货在待发货付过款 + } else if( item.id == 8) { + //退款按钮（直接退款不用申请）, 只有散剪和剪板有 + return (orderInfo.sale_mode != SaLeModeBulk.value && orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //散剪和剪板在待接单时付过款 + } + else { + //其他按钮 + return item.value.includes(orderInfo.status) + } + } + } + + //显示的按钮数组 + const orderBtnsShowList: {id: number, value: any, label: string}[] = useMemo(() => { + return orderBtnsList.current.filter(item => { + return orderBtnsShow(item) + }) + }, [orderInfo]) + + + + //点击按钮操作 + const submitBtns = (val, index) => { + (val == 1)&&cancelOrder(); //取消订单按钮 + (val == 2)&&onClick?.(2); //去付款按钮 + (val == 6)&&receiveOrder(); //确认收货 + + } + + //取消订单 + const {fetchData: cancelFetchData} = CancelOrderApi() + const cancelOrder = () => { + Taro.showModal({ + title: '要取消该订单吗？', + success: async function (res) { + if (res.confirm) { + let res = await cancelFetchData({id: orderInfo?.orderId}) + if(res.success) { + alert.success('取消成功') + onClick?.(1) + } else { + alert.none(res.msg) + } + } else if (res.cancel) { + console.log('用户点击取消') + } + } + }) + } + + //确认订单 + const {fetchData: receiveOrderFetchData} = ReceiveOrderApi() + const receiveOrder = async () => { + console.log('123456') + Taro.showModal({ + title: '确定收货？', + success: async function (res) { + if (res.confirm) { + let res = await receiveOrderFetchData({sale_order_id: orderInfo?.orderId}) + if(res.success){ + onClick?.(6) + alert.success('收货成功') + } else { + alert.error('收货失败') + } + } else if (res.cancel) { + console.log('用户点击取消') + } + } + }) + } + + //显示更多按钮 + const [showMore, setShowMore] = useState(false) + const styleTop = useMemo(() => { + return {top:`-${(orderBtnsShowList.length - 3)*70 + 10}rpx`, left: `-${10}rpx`} + }, [orderBtnsShowList]) + + return ( + + {(orderBtnsShowList.length > 3)&& + setShowMore(true)}>更多 + {showMore&& + + {orderBtnsShowList.map((item, index) => { + return ((index >= 3) && submitBtns(item.id, index)}>{item.label}) + })} + + setShowMore(false)}> + } + } + + + {orderBtnsShowList.map((item, index) => + (index < 3)&& submitBtns(item.id, index)}>{item.label} + )} + + + + ) +}) \ No newline at end of file diff --git a/src/components/afterOrderBtns/index.module.scss b/src/components/afterOrderBtns/index.module.scss new file mode 100644 index 0000000..252b22e --- /dev/null +++ b/src/components/afterOrderBtns/index.module.scss @@ -0,0 +1,87 @@ +.btns_list{ + width: 100%; + // margin-top: 30px; + display: flex; + align-content: center; + .more{ + font-size: 28px; + width: 143px; + display: flex; + align-items: center; + color: $color_font_two; + padding-left: 20px; + position: relative; + + .more_list{ + position: absolute; + background-color: #fff; + width: 226px; + box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.06); + border-radius: 10px; + padding: 0 20px; + box-sizing: border-box; + z-index:999; + &::before{ + z-index: 1; + position: absolute; + bottom: -7px; + left: 50px; + width: 15px; + height: 15px; + content: " "; + transform: rotate(45deg); + background: #fff; + box-sizing: border-box; + box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); + } + .more_item{ + font-size: 28px; + height: 70px; + line-height: 70px; + text-align: center; + &:nth-last-child(n+2) { + border-bottom: 1PX solid #F0F0F0; + } + } + } + .more_bg{ + position:fixed; + width: 100vw; + height: 100vh; + top: 0; + left: 0; + } + } + .scroll{ + white-space: nowrap; + width: 100%; + } + .list_scroll{ + white-space: nowrap; + width: 100%; + text-align: right; + } + .btns_item{ + padding: 0 15px; + width: 130px; + border: 2px solid #dddddd; + border-radius: 38px; + text-align: center; + line-height: 60px; + font-size: $font_size; + color: $color_font_three; + display:inline-block; + &:nth-child(n+2) { + margin-left: 32px; + } + &:nth-last-child(1) { + border: 2px solid $color_main; + color: $color_main; + } + + } + .end_btn{ + border: 2px solid $color_main; + color: $color_main; + } +} \ No newline at end of file diff --git a/src/components/afterOrderBtns/index.tsx b/src/components/afterOrderBtns/index.tsx new file mode 100644 index 0000000..6750838 --- /dev/null +++ b/src/components/afterOrderBtns/index.tsx @@ -0,0 +1,193 @@ +import { CancelOrderApi, ReceiveOrderApi } from "@/api/order" +import { alert } from "@/common/common" +import { AFTER_ORDER_STATUS, ORDER_STATUS, SALE_MODE } from "@/common/enum" +import {Text, View } from "@tarojs/components" +import Taro from "@tarojs/taro" +import {useRef, memo, useState, useMemo } from "react" +import classnames from "classnames"; +import styles from './index.module.scss' +import { ReturnApplyOrderCancelApi } from "@/api/salesAfterOrder" + +type Param = { + orderInfo: { + stage: number, //售后状态 + orderId: number, //订单id + sale_mode: number //订单类型 + type: number //1退货，2退款 + }, + onClick?: (val: number) => void //点击后触发的事件，返回订单状态 +} + +export default memo(({orderInfo, onClick}:Param) => { + //售后订单状态 + const { + ReturnStageApplying, + ReturnStageWaitCheck, + ReturnStageChecked, + ReturnStageReturned, + ReturnStageCancel, + ReturnStageQualityCheckPendingRefund, + ReturnStageServiceOrderPendingRefund, + ReturnStageRejected + } = AFTER_ORDER_STATUS + + //订单类型 + const { + SaLeModeBulk, + SaleModeLengthCut, + SaLeModeWeightCut, + } = SALE_MODE + + //售后按钮按售后状态归类, value是该订单状态，可能该按钮会出现 + const orderBtnsList = useRef([ + { + id: 1, + value: [ReturnStageApplying.value, ReturnStageWaitCheck.value], + label: '取消退货' + }, + { + id: 2, + value: [ReturnStageWaitCheck.value], + label: '退货物流' + }, + { + id: 3, + value: [ReturnStageChecked.value, ReturnStageQualityCheckPendingRefund.value], + label: '查看物流' + }, + { + id: 4, + value: [ReturnStageQualityCheckPendingRefund.value, ReturnStageServiceOrderPendingRefund.value, ReturnStageReturned.value], + label: '质检结果' + }, + { + id: 5, + value: [ReturnStageServiceOrderPendingRefund.value, ReturnStageReturned.value], + label: '退货码单' + }, + { + id: 6, + value: [ReturnStageApplying.value, ReturnStageServiceOrderPendingRefund.value], + label: '取消退款' + }, + { + id: 7, + value: [ReturnStageServiceOrderPendingRefund.value, ReturnStageReturned.value], + label: '退款码单' + }, + { + id: 8, + value: [], + label: '申请记录' + }, + ]) + + + //判断是否显示该按钮 + const orderBtnsShow = (item) => { + if(!orderInfo) return false + + if(item.id == 1) { + //取消退货 + return (orderInfo.type == 1)&&item.value.includes(orderInfo.stage) + } else if (item.id == 6) { + //取消退款 + return (orderInfo.type == 2)&&item.value.includes(orderInfo.stage) + } else { + return item.value.includes(orderInfo.stage) + } + + } + + //显示的按钮数组 + const orderBtnsShowList: {id: number, value: any, label: string}[] = useMemo(() => { + return orderBtnsList.current.filter(item => { + return orderBtnsShow(item) + }) + }, [orderInfo]) + + + + //点击按钮操作 + const submitBtns = (val, index) => { + if (val == 1) { + cancelOrder() + } else if (val == 6) { + receiveOrder() + } else { + onClick?.(val) + } + } + + //取消退货 + const {fetchData: returnApplyOrderCancelFetchData} = ReturnApplyOrderCancelApi() + const cancelOrder = () => { + Taro.showModal({ + title: '要取消退货吗？', + success: async function (res) { + if (res.confirm) { + let res = await returnApplyOrderCancelFetchData({id: orderInfo?.orderId}) + if(res.success) { + alert.success('取消成功') + onClick?.(1) + } else { + alert.none(res.msg) + } + } else if (res.cancel) { + console.log('用户点击取消') + } + } + }) + } + + //确认订单 + const {fetchData: receiveOrderFetchData} = ReceiveOrderApi() + const receiveOrder = async () => { + console.log('123456') + Taro.showModal({ + title: '确定收货？', + success: async function (res) { + if (res.confirm) { + let res = await receiveOrderFetchData({sale_order_id: orderInfo?.orderId}) + if(res.success){ + onClick?.(6) + alert.success('收货成功') + } else { + alert.error('收货失败') + } + } else if (res.cancel) { + console.log('用户点击取消') + } + } + }) + } + + //显示更多按钮 + const [showMore, setShowMore] = useState(false) + const styleTop = useMemo(() => { + return {top:`-${(orderBtnsShowList.length - 3)*70 + 10}rpx`, left: `-${10}rpx`} + }, [orderBtnsShowList]) + + return ( + + {(orderBtnsShowList.length > 3)&& + setShowMore(true)}>更多 + {showMore&& + + {orderBtnsShowList.map((item, index) => { + return ((index >= 3) && submitBtns(item.id, index)}>{item.label}) + })} + + setShowMore(false)}> + } + } + + + {orderBtnsShowList.map((item, index) => + (index < 3)&& submitBtns(item.id, index)}>{item.label} + )} + + + + ) +}) \ No newline at end of file diff --git a/src/components/counter/index.module.scss b/src/components/counter/index.module.scss index fe96cca..2748cef 100644 --- a/src/components/counter/index.module.scss +++ b/src/components/counter/index.module.scss @@ -4,19 +4,25 @@ align-items: center; justify-content: space-between; width: 100%; - .reduce, .plus{ - font-size: $font_size_big; + .plus{ color: $color_main; width: 46px; height: 46px; - display: flex; - align-items: center; - justify-content:center; + text-align: center; + line-height: 43px; font-size: 50px; background-color: $color_main; color: #fff; border-radius: 8px; } + .reduce { + font-size: 50px; + width: 46px; + height: 46px; + text-align: center; + line-height: 43px; + color:#007AFF; + } .input{ display: flex; align-items: flex-end; @@ -25,10 +31,13 @@ box-sizing: border-box; width: 106px; border-radius: 10px; + input{ + font-size: $font_size_medium; + text-align: right; + padding-right: 10px; + } } - input{ - font-size: $font_size_medium; - } + .unit{ font-size: $font_size_min; color: $color_font_two; diff --git a/src/components/counter/index.tsx b/src/components/counter/index.tsx index d7f632d..9ff7d87 100644 --- a/src/components/counter/index.tsx +++ b/src/components/counter/index.tsx @@ -11,12 +11,14 @@ type params = { onChange?:(val:number) => void, onBlue?:(val:number) => void, //失去焦点触发 onClickBtn?:(val:number) => void, - unit?: string + unit?: string, + disable?: true|false, //是否禁用 } -export default ({minNum = 0, maxNum = 100, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = ''}: params) => { +export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '', disable = false}: params) => { const [value, setValue] = useState({count:defaultNum}) const onPlus = () => { + if(disable) return false let {count} = value let num_res = Big(count).add(step).toNumber() num_res = num_res >= maxNum?maxNum:num_res @@ -26,9 +28,10 @@ export default ({minNum = 0, maxNum = 100, step=1, digits = 0, defaultNum = 0, o onClickBtn?.(parseFloat(num_res)) } const minus = () => { + if(disable) return false let {count} = value let num_res = Big(count).minus(step).toNumber() - num_res = num_res < minNum?0:num_res + num_res = num_res < minNum?minNum:num_res setValue({...value, count:num_res}) onChange?.(parseFloat(num_res)) onClickBtn?.(parseFloat(num_res)) @@ -102,6 +105,7 @@ export default ({minNum = 0, maxNum = 100, step=1, digits = 0, defaultNum = 0, o onInput={onInputEven} onBlur={onBluerEven} type='digit' + disabled={disable} /> {unit} diff --git a/src/components/counter/index1.module.scss b/src/components/counter/index1.module.scss new file mode 100644 index 0000000..fe96cca --- /dev/null +++ b/src/components/counter/index1.module.scss @@ -0,0 +1,37 @@ + +.main{ + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + .reduce, .plus{ + font-size: $font_size_big; + color: $color_main; + width: 46px; + height: 46px; + display: flex; + align-items: center; + justify-content:center; + font-size: 50px; + background-color: $color_main; + color: #fff; + border-radius: 8px; + } + .input{ + display: flex; + align-items: flex-end; + background-color: #fff; + padding: 5px 10px; + box-sizing: border-box; + width: 106px; + border-radius: 10px; + } + input{ + font-size: $font_size_medium; + } + .unit{ + font-size: $font_size_min; + color: $color_font_two; + } + +} \ No newline at end of file diff --git a/src/components/counter/index1.tsx b/src/components/counter/index1.tsx new file mode 100644 index 0000000..d7f632d --- /dev/null +++ b/src/components/counter/index1.tsx @@ -0,0 +1,111 @@ +import { Input, View } from "@tarojs/components" +import { useEffect, useMemo, useRef, useState } from "react" +import Big from 'big.js' +import styles from "./index.module.scss" +type params = { + minNum?: number, //最小值 + maxNum?: number, //最大值 + step?: number, //步长 + defaultNum?: number, //默认值 + digits?: number //多少位小数 + onChange?:(val:number) => void, + onBlue?:(val:number) => void, //失去焦点触发 + onClickBtn?:(val:number) => void, + unit?: string +} +export default ({minNum = 0, maxNum = 100, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = ''}: params) => { + const [value, setValue] = useState({count:defaultNum}) + + const onPlus = () => { + let {count} = value + let num_res = Big(count).add(step).toNumber() + num_res = num_res >= maxNum?maxNum:num_res + num_res = formatDigits(num_res) + setValue({...value, count:num_res}) + onChange?.(parseFloat(num_res)) + onClickBtn?.(parseFloat(num_res)) + } + const minus = () => { + let {count} = value + let num_res = Big(count).minus(step).toNumber() + num_res = num_res < minNum?0:num_res + setValue({...value, count:num_res}) + onChange?.(parseFloat(num_res)) + onClickBtn?.(parseFloat(num_res)) + } + + //保留小数 + const formatDigits = (num) => { + num = num + '' + if(num.includes('.')&&digits > 0) { + console.log('num::',num.includes('.')) + let res = num.split('.') + let last_num = res[1].substr(0, digits) + return res[0] + '.' + last_num + } + return parseFloat(num) + } + + //检查数据 + const checkData = (val) => { + let num = parseFloat(val) + if(num > maxNum) return maxNum + if(num < minNum) return minNum + return val + } + + + const onInputEven = (e) => { + let res = e.detail.value + if(res === '') { + setValue({...value, count:minNum}) + onChange?.(minNum) + } + else if(!isNaN(Number(res))) { + let count = formatDigits(res) + count = checkData(count) + setValue({...value, count}) + onChange?.(parseFloat(count as string)) + } else { + let num = parseFloat(res) + if(!isNaN(num)) { + let count = formatDigits(num) + count = checkData(count) + setValue({...value, count}) + onChange?.(count as number) + } else { + setValue({...value, count:defaultNum}) + onChange?.(defaultNum) + } + + } + } + + const onBluerEven = () => { + let num = parseFloat(value.count) + if(!isNaN(num)) { + let count = formatDigits(num) + count = checkData(count) + setValue({...value, count}) + onBlue?.(count as number) + } else { + setValue({...value, count:defaultNum}) + onBlue?.(defaultNum) + } + } + return ( + + minus()}>- + + + {unit} + + onPlus()}>+ + + ) +} \ No newline at end of file diff --git a/src/components/orderBtns/index.module.scss b/src/components/orderBtns/index.module.scss index d6e9810..252b22e 100644 --- a/src/components/orderBtns/index.module.scss +++ b/src/components/orderBtns/index.module.scss @@ -74,6 +74,11 @@ &:nth-child(n+2) { margin-left: 32px; } + &:nth-last-child(1) { + border: 2px solid $color_main; + color: $color_main; + } + } .end_btn{ border: 2px solid $color_main; diff --git a/src/components/orderBtns/index.tsx b/src/components/orderBtns/index.tsx index 3296d83..871f2a2 100644 --- a/src/components/orderBtns/index.tsx +++ b/src/components/orderBtns/index.tsx @@ -1,10 +1,12 @@ import { CancelOrderApi, ReceiveOrderApi } from "@/api/order" -import { alert } from "@/common/common" +import { alert, goLink } from "@/common/common" import { ORDER_STATUS, SALE_MODE } from "@/common/enum" -import { ScrollView, Text, View } from "@tarojs/components" +import {Text, View } from "@tarojs/components" import Taro from "@tarojs/taro" -import { useCallback, useRef, memo, useState, useEffect, useMemo } from "react" +import {useRef, memo, useState, useMemo } from "react" +import classnames from "classnames"; import styles from './index.module.scss' +import { AddShoppingCartApi } from "@/api/shopCart" type Param = { orderInfo: { @@ -29,7 +31,8 @@ export default memo(({orderInfo, onClick}:Param) => { SaleOrderStatusWaitingPayment, SaleOrderStatusWaitingReceipt, SaleOrderStatusAlreadyReceipt, - SaleorderstatusWaitingPrePayment + SaleorderstatusWaitingPrePayment, + SaleOrderStatusTaking } = ORDER_STATUS //订单类型 @@ -41,6 +44,7 @@ export default memo(({orderInfo, onClick}:Param) => { //订单按钮按订单状态归类, value是该订单状态，可能该按钮会出现 const orderBtnsList = useRef([ + { id: 1, value: [SaleOrderStatusBooking.value, @@ -50,14 +54,9 @@ export default memo(({orderInfo, onClick}:Param) => { SaleOrderStatusWaitingDelivery.value], //取消订单按钮对应： 待接单，配布中，已配布, 待付款， 待发货 label: '取消订单' }, - { - id: 2, - value: [SaleorderstatusWaitingPrePayment.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value], //去付款按钮对应：待付款， 待发货, 待收货, 已收货, 已完成 - label: '去付款' - }, { id: 3, - value: [SaleOrderStatusWaitingDelivery.value], //申请退款按钮对应： 待发货 + value: [SaleOrderStatusWaitingDelivery.value, SaleOrderStatusTaking.value], //申请退款按钮对应： 待发货, 提货中 label: '申请退款' }, // { @@ -85,6 +84,11 @@ export default memo(({orderInfo, onClick}:Param) => { value: [SaleOrderStatusBooking.value], //按钮对应： 待接单 label: '退款' }, + { + id: 2, + value: [SaleOrderStatusTaking.value, SaleorderstatusWaitingPrePayment.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value], //去付款按钮对应：待付款， 待发货, 待收货, 已收货, 已完成 + label: '去付款' + }, ]) @@ -123,10 +127,15 @@ export default memo(({orderInfo, onClick}:Param) => { //点击按钮操作 const submitBtns = (val, index) => { - (val == 1)&&cancelOrder(); //取消订单按钮 - (val == 2)&&onClick?.(2); //去付款按钮 - (val == 6)&&receiveOrder(); //确认收货 - + if (val == 1) { + cancelOrder() + } else if (val == 6) { + receiveOrder() + } else if(val == 5) { + goLink('/pages/applyAfterSales/index',{id:orderInfo?.orderId}) + } else { + onClick?.(val) + } } //取消订单 @@ -172,6 +181,7 @@ export default memo(({orderInfo, onClick}:Param) => { }) } + //显示更多按钮 const [showMore, setShowMore] = useState(false) const styleTop = useMemo(() => { @@ -194,7 +204,7 @@ export default memo(({orderInfo, onClick}:Param) => { {orderBtnsShowList.map((item, index) => - (index < 3)&& submitBtns(item.id, index)}>{item.label} + (index < 3)&& submitBtns(item.id, index)}>{item.label} )} diff --git a/src/components/product/index.module.scss b/src/components/product/index.module.scss index 6543b25..35f7693 100644 --- a/src/components/product/index.module.scss +++ b/src/components/product/index.module.scss @@ -25,7 +25,7 @@ border-radius: 10px; } .num{ - padding: 5px 10px; + padding: 5px 10px 5px 20px; font-size: $font_size_min; position: absolute; right:0; @@ -51,7 +51,7 @@ .tag_list{ display: flex; margin-top: 16px; - .tag{ + .tag, .tag_g{ padding: 3px 10px; background-color: #CDE5FF; font-size: $font_size_min; @@ -61,6 +61,10 @@ margin-left: 10px; } } + .tag_g{ + background-color: #FFE6CE; + color: #EE7500; + } } .introduce{ font-size: $font_size_medium; diff --git a/src/components/product/index.tsx b/src/components/product/index.tsx index 0e849f8..c6b900d 100644 --- a/src/components/product/index.tsx +++ b/src/components/product/index.tsx @@ -22,7 +22,7 @@ export default ({desStatus = true, productList = []}:Params) => { {formatHashTag(item.code, '')} {item.name} {item.width} - {item.weight_density} + {item.weight_density} {item.component} {desStatus&&{item.describe}} diff --git a/src/components/shopCart/index.module.scss b/src/components/shopCart/index.module.scss index 43de2c1..dcccd27 100644 --- a/src/components/shopCart/index.module.scss +++ b/src/components/shopCart/index.module.scss @@ -17,6 +17,11 @@ margin-right: 10px; } } + .count_all{ + font-size: 22px; + color: #ABABAB; + padding: 30px 20px; + } .search{ display: flex; justify-content: space-between; @@ -104,6 +109,15 @@ flex-direction: column; justify-content: space-between; align-items: flex-end; + .btn_count{ + width: 235px; + height: 64px; + background-color: #ECF5FF; + border-radius: 40px 0px 16px 0px; + padding: 0 20px; + display: flex; + align-items: center; + } .price{ font-size: $font_size; font-weight: 700; @@ -150,6 +164,7 @@ justify-content: center; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); + z-index: 999; .buy_con{ width: 702px; height: 95px; diff --git a/src/components/shopCart/index.tsx b/src/components/shopCart/index.tsx index 2470ef1..905ef9d 100644 --- a/src/components/shopCart/index.tsx +++ b/src/components/shopCart/index.tsx @@ -8,10 +8,11 @@ import styles from "./index.module.scss" import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import Taro from "@tarojs/taro"; import { alert, goLink } from "@/common/common"; -import {GetShoppingCartApi, DelShoppingCartApi} from "@/api/shopCart" +import {GetShoppingCartApi, DelShoppingCartApi, UpdateShoppingCartApi} from "@/api/shopCart" import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; import { setParam } from "@/common/system"; import { debounce } from "@/common/util"; +import Counter from "../counter"; type param = { show?: true|false, @@ -19,11 +20,9 @@ type param = { } export default ({show = false, onClose}: param) => { const selectList = [ - // {value:-1, title:'不限', unit:'', eunit:''}, - {value:0, title:'大货', unit:'件', eunit:'kg'}, - {value:1,title:'剪板', unit:'米', eunit:'m'}, - {value:2,title:'散剪', unit:'米', eunit:'kg'}, - + {value:0, title:'大货', unit:'条', eunit:'kg', step:1, digits:0, minNum:1, maxNum:100000, defaultNum:1}, + {value:1,title:'剪板', unit:'米', eunit:'m', step:1, digits:2, minNum:0.5, maxNum:9.99, defaultNum:1}, + {value:2,title:'散剪', unit:'米', eunit:'kg', step:1, digits:2, minNum:5, maxNum:100000, defaultNum:10}, ] const [selectIndex, setSelectIndex] = useState(0) @@ -53,7 +52,6 @@ export default ({show = false, onClose}: param) => { const [loading, setLoading] = useState(false) const {fetchData} = GetShoppingCartApi() const getShoppingCart = async () => { - setLoading(true) const {data} = await fetchData() let color_list = data.color_list||[] initList(color_list) @@ -65,6 +63,7 @@ export default ({show = false, onClose}: param) => { const initList = (color_list) => { color_list?.map(item => { if(selectIndex == item.sale_mode) item.select = true + item.count = formatCount(item) }) } @@ -74,6 +73,7 @@ export default ({show = false, onClose}: param) => { setList([]) setSelectIndex(0) } else { + setLoading(true) getShoppingCart() } }, [show]) @@ -136,11 +136,13 @@ export default ({show = false, onClose}: param) => { //删除购物车内容 const {fetchData:delShopFetchData} = DelShoppingCartApi() const delSelect = () => { + getSelectId() + if(selectIds.current.length <= 0) return alert.none('请选择要删除的面料!') Taro.showModal({ content: '删除所选商品？', success: async function (res) { if (res.confirm) { - getSelectId() + const res = await delShopFetchData({id:selectIds.current}) if(res.success) { getShoppingCart() @@ -180,17 +182,33 @@ export default ({show = false, onClose}: param) => { //格式化数量 const formatCount = useCallback((item) => { - return item.sale_mode == 0? item.roll + '件': (item.length/100) + 'm' + console.log('item:::',item) + return item.sale_mode == 0? item.roll : (item.length/100) }, []) - //预估金额 + //格式化单位 + const formatUnit = useCallback((item) => { + return item.sale_mode == 0? '条':'米' + }, []) + + //预估金额和总条数 const estimatePrice = useMemo(() => { - let count = 0 + let estimate_amount = 0 + let product_list = new Set() //面料 + let color_count = 0 //颜色数量 + let all_count = 0 //总数量 list.map(item => { - if(item.select) count += item.estimate_amount + if(item.select) { + estimate_amount += item.estimate_amount + product_list.add(item.product_id) + color_count++ + all_count += item.sale_mode == 0?item.roll: (item.length) + } }) - return Number(formatPriceDiv(count)) + let all_count_text = selectIndex == 0?all_count + '条': (all_count/100) + '米' + return {price: Number(formatPriceDiv(estimate_amount)).toFixed(2), countText: `已选${product_list.size}种面料，${color_count}个颜色，共${all_count_text}`, color_count} },[list]) + //去结算 const orderDetail = debounce(() => { @@ -199,11 +217,25 @@ export default ({show = false, onClose}: param) => { alert.error('请选择面料') } else { let ids = selectIds.current.join('-') - setParam({ids, sale_mode:selectIndex}) + setParam({ids, sale_mode:selectIndex}) //临时存储 closePopup() goLink('/pages/order/comfirm') } }, 500) + + //计数组件-当后端修改完成才修改前端显示 + const {fetchData: fetchDataUpdateShoppingCart} = UpdateShoppingCartApi() + const [UpdateShoppingCartLoading, setUpdateShoppingCartLoading] = useState(false) + const getInputValue = debounce(async (num, item) => { + let roll = item.sale_mode == 0?parseFloat(num):0 + let length = item.sale_mode != 0?(parseFloat(num)*100):0 + setUpdateShoppingCartLoading(() => true) + let res = await fetchDataUpdateShoppingCart({id: item.id, roll, length}) + setUpdateShoppingCartLoading(() => false) + if(res.success) { + getShoppingCart() + } + }, 300) return ( @@ -216,6 +248,7 @@ export default ({show = false, onClose}: param) => { 删除所选 + {estimatePrice.countText} {selectList.map((item) => { return selectProduct(item.value)} className={classnames(styles.search_item, (selectIndex==item.value)&&styles.search_item_select)}>{item.title} @@ -240,7 +273,20 @@ export default ({show = false, onClose}: param) => { ￥{formatPirce(item.sale_price)}/{selectList[selectIndex].eunit} - ×{formatCount(item)} + {/* ×{formatCount(item)}{selectList[selectIndex].unit} */} + + getInputValue(e, item)} + defaultNum={item.count} + step={selectList[selectIndex].step} + digits={selectList[selectIndex].digits} + onClickBtn={(e) => getInputValue(e, item)} + unit={formatUnit(item)} + minNum={selectList[selectIndex].minNum} + maxNum={selectList[selectIndex].maxNum} + disable={UpdateShoppingCartLoading} + /> + })} @@ -258,11 +304,11 @@ export default ({show = false, onClose}: param) => { - ￥{estimatePrice} + ￥{estimatePrice.price} 预估金额 orderDetail()}> - 去结算 + 去结算({estimatePrice.color_count}) diff --git a/src/components/sideBar/index.module.scss b/src/components/sideBar/index.module.scss index c6bdb76..7329301 100644 --- a/src/components/sideBar/index.module.scss +++ b/src/components/sideBar/index.module.scss @@ -29,8 +29,9 @@ } .sideBar_select_title_select{ - background-color: $color_bg_one; - color: $color_font_one; + background-color: #007AFF; + color: #fff; + border-radius: 0px 14px 14px 0px; } } .sideBar_con{ diff --git a/src/components/sideBar/index.tsx b/src/components/sideBar/index.tsx index 78ceec0..d601151 100644 --- a/src/components/sideBar/index.tsx +++ b/src/components/sideBar/index.tsx @@ -104,7 +104,6 @@ export default memo(({list = [], ) }) } - selfOnScrolltolower?.()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}> 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/components/kindList/index.module.scss b/src/pages/applyAfterSales/components/kindList/index.module.scss new file mode 100644 index 0000000..bc49015 --- /dev/null +++ b/src/pages/applyAfterSales/components/kindList/index.module.scss @@ -0,0 +1,64 @@ +.apply_after_sales_list{ + padding: 0 20px; + .apply_after_sales_item{ + margin-bottom: 50px; + .apply_after_sales_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; + } + } + .color_list { + .color_item{ + display: flex; + align-items: center; + margin: 30px 0; + } + .image{ + width: 70px; + height: 70px; + image{ + width: 100%; + height: 100%; + border-radius: 50%; + } + } + .name_and_number{ + padding-left: 30px; + flex:1; + text{ + &:nth-child(1) { + font-weight: 700; + font-size: $font_size; + } + &:nth-child(2) { + color: $color_font_two; + font-size: $font_size; + margin-left: 20px; + } + } + } + .btn_count{ + width: 216px; + height: 64px; + background-color: #ECF5FF; + border-radius: 40px 0px 16px 0px; + padding: 0 20px; + display: flex; + align-items: center; + } + } + } + +} diff --git a/src/pages/applyAfterSales/components/kindList/index.tsx b/src/pages/applyAfterSales/components/kindList/index.tsx new file mode 100644 index 0000000..3a26d92 --- /dev/null +++ b/src/pages/applyAfterSales/components/kindList/index.tsx @@ -0,0 +1,71 @@ +import { formatHashTag, formatImgUrl } from "@/common/fotmat"; +import Counter from "@/components/counter"; +import MCheckbox from "@/components/checkbox"; +import { Image, Text, View } from "@tarojs/components"; +import { FC, memo, useCallback } from "react"; +import styles from './index.module.scss' + +type OrderParam = { + list?: any[], + sale_mode?: number, + sale_mode_name?: string, + unit?: string, + total_colors?: number, + total_fabrics?: number, + total_number?: number, + status?: number, //订单状态 +} + +type Param = { + order: OrderParam, + onNumChange?: (val:any) => void + onSelectChange?: (val: {color_id:number, length: number, status: true|false}) => void +} + +const kindeList:FC = memo(({order, onNumChange, onSelectChange}) => { + //对应数量 + const formatCount = useCallback((item) => { + return (order?.sale_mode == 0? item.roll : Number(item.length / 100)) + order?.unit + }, [order]) + + //计步器失返回值 + const getCounterChange = useCallback((colorItem) => { + return (number) => { + onNumChange?.({number, color_id: colorItem.id}) + } + }, []) + + //checkbox选中回调 + const selectCallBack = (colorItem) => { + console.log('colorItem::',colorItem) + onSelectChange?.({color_id:colorItem.id, length:colorItem.length, status: true}) + } + + //checkbox关闭回调 + const colseCallBack = (colorItem) => { + onSelectChange?.({color_id:colorItem.id, length:colorItem.length, status: false}) + } + + return ( + + {order?.list?.map(item => + + {order.sale_mode_name} + {formatHashTag(item.code, item.name)} + + + {item.product_colors.map(colorItem => + + {colorItem.code + ' ' + colorItem.name}x {formatCount(colorItem)} + {(order.sale_mode == 0)&& + + || + selectCallBack(colorItem)} onClose={() => colseCallBack(colorItem)}/>} + )} + + )} + + ) +}) + +export default kindeList \ No newline at end of file diff --git a/src/pages/applyAfterSales/components/otherReason/index.tsx b/src/pages/applyAfterSales/components/otherReason/index.tsx index fc580c9..5059f75 100644 --- a/src/pages/applyAfterSales/components/otherReason/index.tsx +++ b/src/pages/applyAfterSales/components/otherReason/index.tsx @@ -4,7 +4,10 @@ import styles from './index.module.scss' import classnames from "classnames"; //其他说明 -export default memo(() => { +type Param = { + onChange: (val: string) => void +} +export default memo(({onChange}:Param) => { const [descData, setDescData] = useState({ number: 0, value: '', @@ -18,6 +21,7 @@ export default memo(() => { res = value.slice(0, descData.count) } setDescData({...descData, number:res.length, value: res}) + onChange?.(res) } const toggleShowRealTextarea = (show) => { diff --git a/src/pages/applyAfterSales/components/reasonPopup/index.tsx b/src/pages/applyAfterSales/components/reasonPopup/index.tsx index fc7ba76..6b1f1ef 100644 --- a/src/pages/applyAfterSales/components/reasonPopup/index.tsx +++ b/src/pages/applyAfterSales/components/reasonPopup/index.tsx @@ -3,39 +3,22 @@ import { ScrollView, Text, View } from "@tarojs/components"; import { memo, useMemo } from "react"; import styles from './index.module.scss' -type ReasonParam = 1|2|3 //1 退货原因 2 货物状况 3 退货说明 //原因选择 type ReasonInfoParam = { show?: boolean, onClose?: () => void, - status: ReasonParam + title?: string, + list?: {id:number, name:string}[] } -export default memo(({show = false, onClose, status}: ReasonInfoParam) => { - const title = useMemo(() => { - if(status == 1) return '退货原因' - if(status == 2) return '货物状况' - if(status == 3) return '退货说明' - },[status]) +export default memo(({show = false, onClose, title = '', list= []}: ReasonInfoParam) => { + return ( - + {title} - 完好无损带原标签 - 完好无损带原标签 - 完好无损带原标签 - 完好无损带原标签 - 完好无损带原标签 - 完好无损带原标签 - 完好无损带原标签 - 完好无损带原标签 - 完好无损带原标签 - 完好无损带原标签 - 完好无损带原标签 - 完好无损带原标签 - 完好无损带原标签 - 完好无损带原标签 + {list.map(item => {item.name} )} diff --git a/src/pages/applyAfterSales/index.module.scss b/src/pages/applyAfterSales/index.module.scss index b4ce39c..6e11a17 100644 --- a/src/pages/applyAfterSales/index.module.scss +++ b/src/pages/applyAfterSales/index.module.scss @@ -36,7 +36,7 @@ .returnSaleInput_item{ display: flex; align-items: center; - padding-bottom: 20px; + padding-bottom: 30px; flex-wrap: wrap; .title{ font-size: $font_size; @@ -59,122 +59,10 @@ 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; - image{ - width: 100%; - height: 100%; - border-radius: 10px; - } - .miconfont_close{ - width: 30px; - height: 30px; - background-color: #ccc; - border-radius: 50%; - position: absolute; - right: -10px; - top: -10px; - text-align: center; - line-height: 30px; - color: #fff; - } - } - } - } - - } - .apply_after_sales_list{ - padding: 0 20px; - .apply_after_sales_item{ - margin-bottom: 50px; - .apply_after_sales_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; + .upload_image{ flex:1; } } - .color_list { - .color_item{ - display: flex; - align-items: center; - margin: 20px 0; - } - .image{ - width: 70px; - height: 70px; - image{ - width: 100%; - height: 100%; - border-radius: 50%; - } - } - .name_and_number{ - padding-left: 30px; - flex:1; - text{ - &:nth-child(1) { - font-weight: 700; - font-size: $font_size; - } - &:nth-child(2) { - color: $color_font_two; - font-size: $font_size; - margin-left: 20px; - } - } - } - .btn_count{ - width: 235px; - height: 64px; - background-color: #ECF5FF; - border-radius: 40px 0px 16px 0px; - padding: 0 20px; - display: flex; - align-items: center; - } - } } } diff --git a/src/pages/applyAfterSales/index.tsx b/src/pages/applyAfterSales/index.tsx index dd07f90..9698934 100644 --- a/src/pages/applyAfterSales/index.tsx +++ b/src/pages/applyAfterSales/index.tsx @@ -1,61 +1,169 @@ -import { Image, ScrollView, Text, Textarea, View } from "@tarojs/components"; -import { memo, useCallback, useMemo, useState } from "react"; +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 { formatImgUrl } from "@/common/fotmat"; -import Counter from "@/components/counter"; import ReasonPopup from "./components/reasonPopup"; import OtherReason from "./components/otherReason"; -import Taro 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, ReturnGoodsStatusApi } 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 () => { - const [showDesc, setShowDesc] = useState(true) + + 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: 1, + 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]) + //退货选择弹窗 - const [showReason, setShowReason] = useState<{show:true|false, status:ReasonParam}>({show:false, status:1}) + const [showReason, setShowReason] = useState<{show:true|false, title: string}>({show:false, title: ''}) const closeReason = useCallback(() => setShowReason({...showReason, show:false}), []) - const onShowReason = (status) => setShowReason({...showReason, status, show:true}) + const onShowReason = (status) => { + setShowReason({...showReason, show:true}) + } + + //面料数据 + 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} + } 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) => { + console.log('val::', val) + if(val.status) { + roll_list.current[val.color_id] = {product_color_id: val.color_id, product_roll: val.length} + } 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('请选择退货颜色') + let res = await fetchDataReturnApply(submitData) + if(res.success) { + alert.success('申请成功') + goLink('/pages/salesAfterList/index',{}, 'reLaunch') + } else { + alert.error('申请失败') + } + console.log('提交：：',submitData) + } - //底部按钮 const onSubmit = (val) => { - + if(val == 2) { + onSubmitData() + } } + const [returnGoodsInfo, setReturnGoodsInfo] = useState<{title:string, list: any[]}>({title:'', list:[]}) + //售后货物状况 + const {fetchData: fetchDataGoodsStatus} = ReturnGoodsStatusApi() + const getReturnGoodsStatus = async () => { + let res = await fetchDataGoodsStatus() + setReturnGoodsInfo((e) => ({...e, title: '售后货物状况', list:res.data?.list||[]})) + } + useEffect(() => { + getReturnGoodsStatus() + }, []) + return ( - 2种面料，3种颜色，共6条 + {dataCount} - - - {new Array(5).fill(5).map(item => - - 大货 - 0770# 21S单面平纹(食毛) - - - - - 1# 薄荷绿x1 - - - - - - - 1# 薄荷绿x1 - - - - - - )} - - + 退货原因 @@ -80,11 +188,13 @@ export default () => { 拍照上传 - - + + + + - + @@ -95,28 +205,7 @@ export default () => { onSubmit(2)}>确认 - + ) -} - -//图片列表 -const PictureItem = memo(() => { - const {getWxPhoto} = useUploadCDNImg() - //图片 - const uploadImage = async () => { - let res = await getWxPhoto('after-sale') - } - return ( - <> - - - - - - - 上传照片 - - - ) -}) +} \ No newline at end of file diff --git a/src/pages/collection/index.config.ts b/src/pages/collection/index.config.ts new file mode 100644 index 0000000..a316ea6 --- /dev/null +++ b/src/pages/collection/index.config.ts @@ -0,0 +1,4 @@ +export default { + navigationBarTitleText: '我的收藏', + enableShareAppMessage: true, +} diff --git a/src/pages/collection/index.module.scss b/src/pages/collection/index.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/collection/index.tsx b/src/pages/collection/index.tsx new file mode 100644 index 0000000..67a9d9f --- /dev/null +++ b/src/pages/collection/index.tsx @@ -0,0 +1,12 @@ +import Search from "@/components/search" +import { View } from "@tarojs/components" +import styles from './index.module.scss' +export default () => { + return ( + + + console.log(e)} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} /> + + + ) + } \ No newline at end of file diff --git a/src/pages/details/components/counter/index.module.scss b/src/pages/details/components/counter/index.module.scss index fe96cca..2748cef 100644 --- a/src/pages/details/components/counter/index.module.scss +++ b/src/pages/details/components/counter/index.module.scss @@ -4,19 +4,25 @@ align-items: center; justify-content: space-between; width: 100%; - .reduce, .plus{ - font-size: $font_size_big; + .plus{ color: $color_main; width: 46px; height: 46px; - display: flex; - align-items: center; - justify-content:center; + text-align: center; + line-height: 43px; font-size: 50px; background-color: $color_main; color: #fff; border-radius: 8px; } + .reduce { + font-size: 50px; + width: 46px; + height: 46px; + text-align: center; + line-height: 43px; + color:#007AFF; + } .input{ display: flex; align-items: flex-end; @@ -25,10 +31,13 @@ box-sizing: border-box; width: 106px; border-radius: 10px; + input{ + font-size: $font_size_medium; + text-align: right; + padding-right: 10px; + } } - input{ - font-size: $font_size_medium; - } + .unit{ font-size: $font_size_min; color: $color_font_two; diff --git a/src/pages/details/components/orderCount/index.module.scss b/src/pages/details/components/orderCount/index.module.scss index c22118d..705cf29 100644 --- a/src/pages/details/components/orderCount/index.module.scss +++ b/src/pages/details/components/orderCount/index.module.scss @@ -72,6 +72,9 @@ padding-bottom:151px; } .color_con{ + .virtual_list{ + padding-bottom: 300px; + } .item { display: flex; justify-content: space-between; diff --git a/src/pages/details/components/orderCount/index.tsx b/src/pages/details/components/orderCount/index.tsx index f9b122a..d06a1c4 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' @@ -49,20 +50,14 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) //获取面料颜色列表 const {fetchData:colorFetchData, state: colorState} = GetColorList() const [list, setList] = useState([]) - const [loading, setLoading] = useState(false) const condition = useRef({physical_warehouse:adminUserInfo?.physical_warehouse, sale_mode:selectIndex, product_id:0, code_or_name:null}) const getColorList = async () => { - setLoading(() => true) let {data} = await colorFetchData(getFilterData(condition.current)) let lists = initList(data.list) setList(() => [...lists]) - setLoading(() => false) } const [showPopup, setShowPopup] = useState(false) - useEffect(() => { - console.log('colorState::',colorState) - }, [colorState]) //显示获取 useEffect(() => { @@ -123,11 +118,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 +196,44 @@ 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 ( + <> + {item&& + + + + + {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 +259,53 @@ 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/details/index.tsx b/src/pages/details/index.tsx index d70e2da..3d289d7 100644 --- a/src/pages/details/index.tsx +++ b/src/pages/details/index.tsx @@ -80,9 +80,10 @@ export default (props:Params) => { const [showCart, setShowCart] = useState(false) const [showOrderCount, setShowOrderCount] = useState(false) - const html = ` - - ` + // const html = ` + // + // ` + const html = `` //弹窗提示 const [colorInfo, setColorInfo] = useState() @@ -117,6 +118,7 @@ export default (props:Params) => { //授权手机号和下单 const placeOrder = async (status = 'to_phone',e:any = {}) => { + if(!productInfo.id) return false if(status == 'to_phone') { if(!e.detail.code) return alert.error('请授权手机号') try { diff --git a/src/pages/order/comfirm.module.scss b/src/pages/order/comfirm.module.scss index 2858dec..a33eb0c 100644 --- a/src/pages/order/comfirm.module.scss +++ b/src/pages/order/comfirm.module.scss @@ -80,6 +80,9 @@ box-sizing: border-box; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); + .submit_order_number{ + padding: 20px 0; + } .order_btn { width: 250px; height: 90px; diff --git a/src/pages/order/comfirm.tsx b/src/pages/order/comfirm.tsx index 7113d8f..52371dc 100644 --- a/src/pages/order/comfirm.tsx +++ b/src/pages/order/comfirm.tsx @@ -1,15 +1,12 @@ import { SaleOrderPreViewApi, SaleOrderApi } from "@/api/order"; import { formatPriceDiv } from "@/common/fotmat"; import Popup from "@/components/popup"; -import SearchInput from "@/components/searchInput"; -import { Text, Textarea, View } from "@tarojs/components" -import Taro, { useDidShow, useRouter } from "@tarojs/taro"; +import { View } from "@tarojs/components" +import Taro, { useDidShow, usePullDownRefresh} from "@tarojs/taro"; import classnames from "classnames"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import AddressInfo,{AddressInfoParam} from "./components/addressInfo"; -import EstimatedAmount from "./components/estimatedAmount"; +import AddressInfo from "./components/addressInfo"; import KindList from "./components/kindList"; -import OrderState from "./components/orderState"; import Remark from "./components/remark"; import styles from './comfirm.module.scss' import { getParam } from "@/common/system"; @@ -17,9 +14,9 @@ import useLogin from "@/use/useLogin"; import { alert, goLink } from "@/common/common"; import ShipmentMode from "../editOrder/components/shipmentMode"; import SubmitOrderBtn from "./components/submitOrderBtn"; +import AddressInfoDetail from "./components/addressInfoDetail"; export default () => { - const {checkLogin} = useLogin() const [showDesc, setShowDesc] = useState(false) //下单信息 @@ -57,8 +54,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn"; if(preViewOrder) { formatData() getDataList() - //当有默认地址时设置默认地址id - preViewOrder.default_address&&setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id})) + setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id, shipment_mode:preViewOrder.shipment_mode||2})) } }, [preViewOrder]) @@ -74,7 +70,8 @@ import SubmitOrderBtn from "./components/submitOrderBtn"; total_fabrics: preViewOrder.total_fabrics, //面料数量 unit: preViewOrder.sale_mode == 0?'条':'m', //单位 list: preViewOrder.product_list, - total_should_collect_money: preViewOrder.total_should_collect_money //应收金额 + total_should_collect_money: preViewOrder.total_should_collect_money, //应收金额 + total_sale_price: preViewOrder.total_sale_price //合计金额 }) } const formatPreViewOrderMemo = useMemo(() => { @@ -84,18 +81,16 @@ import SubmitOrderBtn from "./components/submitOrderBtn"; //格式化初始地址 const defaultAddress = useMemo(() => { const address = preViewOrder?.default_address - if(address) { - return { - province_name: address.province_name, - city_name: address.city_name, - district_name: address.district_name, - address_detail: address.address_detail, - id: address.id, - name: address.name, - phone: address.phone - } + return { + province_name: address?.province_name, + city_name: address?.city_name, + district_name: address?.district_name, + address_detail: address?.address_detail, + id: address?.id, + name: address?.name, + phone: address?.phone, + shipment_mode: address?.shipment_mode } - return null }, [preViewOrder]) //获取提交格式数据列表 @@ -126,24 +121,29 @@ import SubmitOrderBtn from "./components/submitOrderBtn"; //提交按钮是否可用 const btnStatus = useMemo(() => { - if( submitOrderData?.list?.length == 0 || !submitOrderData?.shipment_mode || (submitOrderData?.shipment_mode == 2 && !submitOrderData?.address_id)) { - return false - } else { - return true - } + return submitOrderData?.shipment_mode == 1 || (submitOrderData?.shipment_mode == 2 && submitOrderData?.address_id) }, [submitOrderData]) + //数量格式 + const numText = useMemo(() => { + if(formatPreViewOrder) { + let total_number = formatPreViewOrder?.sale_mode == 0?formatPreViewOrder?.total_number:(formatPreViewOrder?.total_number/100) + return `${formatPreViewOrder?.total_fabrics}种面料，${formatPreViewOrder?.total_colors}种颜色，共${total_number}${formatPreViewOrder?.unit}` + } + }, [formatPreViewOrder]) + //提交订单 const {fetchData: saleOrderFetchData} = SaleOrderApi() const submitOrderEven = () => { - if(!submitOrderData?.address_id) { - alert.error('请选择地址') - return false - } if(!submitOrderData?.shipment_mode) { alert.error('请选择收货方式') return false } + if(!submitOrderData?.address_id&&submitOrderData?.shipment_mode == 2) { + alert.error('请选择地址') + return false + } + Taro.showModal({ title: '确定提交？', success: async function (res) { @@ -160,10 +160,14 @@ import SubmitOrderBtn from "./components/submitOrderBtn"; } }) } + + //页面下拉刷新 + usePullDownRefresh(() => { + getSaleOrderPreView() + }) return ( - - getAddress(e)} defaultValue={defaultAddress}/> + setShowDesc(true)}> 订单备注 @@ -176,7 +180,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn"; - {`${formatPreViewOrder?.total_fabrics}种面料，${formatPreViewOrder?.total_colors}种颜色，共${formatPreViewOrder?.total_number + formatPreViewOrder?.unit}`} + {numText} submitOrderEven()}>提交订单 diff --git a/src/pages/order/components/addressInfoDetail/index copy.tsx b/src/pages/order/components/addressInfoDetail/index copy.tsx new file mode 100644 index 0000000..1fffafe --- /dev/null +++ b/src/pages/order/components/addressInfoDetail/index copy.tsx @@ -0,0 +1,163 @@ +import { EditSaleOrderAddressApi, EditSaleOrderShipmentModeApi } from "@/api/order"; +import { alert } from "@/common/common"; +import { ORDER_STATUS } from "@/common/enum"; +import { debounce } from "@/common/util"; +import AddressList from "@/components/AddressList"; +import Popup from "@/components/popup"; +import { Text, View } from "@tarojs/components" +import classnames from "classnames"; +import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useState } from "react"; +import styles from './index.module.scss' + +export type AddressInfoParam = { + province_name: string, + city_name: string, + district_name: string, + address_detail: string, + id?: number, + name: string, + phone: string, +} +type Param = { + onSelect?: (val:any) => void, //选择地址 + defaultValue?: AddressInfoParam|null, //默认值 + disabled?: false|true, //true禁用后只用于展示 + onChangeShipmentMode?: (val: number) => void, //返回收货方式 + status?: 1|2, //1确认订单时使用， 2订单流程 + orderInfo?: { + orderId: number //订单id + shipment_mode: 1|2, //1自提 2物流 + status: number //订单状态 + } +} + +export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = null, orderInfo, status = 2}: Param, ref) => { + const [showAddressList, setShowAddressList] = useState(false) + + useEffect(() => { + setUserInfo(() => defaultValue) + }, [defaultValue]) + + const [userInfo, setUserInfo] = useState() + + //地址格式 + const formatAddress = useMemo(() => { + if(userInfo) + return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail + }, [userInfo]) + + const changeShow = () => { + if(receivingStatus == 2 && !logisticsShow) + setShowAddressList(() => true) + } + + useEffect(() => { + if(orderInfo) + setReceivingStatus(() => orderInfo.shipment_mode||2) + }, [orderInfo]) + + //把内部方法提供给外部 + useImperativeHandle(ref, () => ({ + changeShow + })) + + //收货方法,1:自提，2物流 + const [receivingStatus, setReceivingStatus] = useState(2) + const {fetchData: shipmentModeFetchData} = EditSaleOrderShipmentModeApi() + const onReceivingStatus = (value, e) => { + e.stopPropagation() + changeReceivingStatus(value) + } + const changeReceivingStatus = debounce(async (value) => { + if(!orderInfo) return false + if(status == 1) { + onChangeShipmentMode?.(value) + setReceivingStatus(value) + return false + } + alert.loading('正在修改') + const res = await shipmentModeFetchData({id: orderInfo.orderId, shipment_mode:value}) + if(res.success) { + alert.success('收货方式修改成功') + onChangeShipmentMode?.(value) + setReceivingStatus(value) + } else { + alert.none(res.msg) + } + }, 10) + + //修改地址 + const [addressId, setAddressId] = useState(0) + const {fetchData: addressFetchData} = EditSaleOrderAddressApi() + const getAddress = async (value) => { + if(!orderInfo) return false + if(status == 1) { + setShowAddressList(() => false) + setAddressId(value.id) + setUserInfo(() => value) + return false + } + alert.loading('正在修改') + const res = await addressFetchData({id: orderInfo.orderId, address_id: value.id}) + if(res.success) { + alert.success('地址修改成功') + onSelect?.(value) + setShowAddressList(() => false) + setAddressId(value.id) + setUserInfo(() => value) + } else { + alert.none(res.msg) + } + } + + //订单状态 + const { + SaleOrderStatusWaitingReceipt, + SaleOrderStatusAlreadyReceipt, + SaleOrderStatusComplete, + SaleOrderStatusRefund, + SaleOrderStatusCancel + } = ORDER_STATUS + + //根据订单状态判断是否显示物流 + const logisticsShowList = [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value] + const logisticsShow = useMemo(() => { + return logisticsShowList.includes(orderInfo?.status as number) + }, [orderInfo]) + + return ( + + changeShow()}> + + + + {formatAddress} + {(receivingStatus == 2 && !logisticsShow)&&} + + + {userInfo?.name} + {userInfo?.phone} + + + {!logisticsShow&& + + onReceivingStatus(1,e)}>自提 + onReceivingStatus(2,e)}>物流 + + + || + + 查看物流 + } + + setShowAddressList(false)}> + + 请选择收货地址 + + + + + + + ) +})) \ 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 42dd5d1..cf039ce 100644 --- a/src/pages/order/components/addressInfoDetail/index.module.scss +++ b/src/pages/order/components/addressInfoDetail/index.module.scss @@ -33,6 +33,11 @@ } .address_text{ word-break:break-all; + + } + .address_text_no{ + font-weight: 700; + padding-left: 20px; } } .order_address_text_name{ diff --git a/src/pages/order/components/addressInfoDetail/index.tsx b/src/pages/order/components/addressInfoDetail/index.tsx index c2a7fa0..f7194be 100644 --- a/src/pages/order/components/addressInfoDetail/index.tsx +++ b/src/pages/order/components/addressInfoDetail/index.tsx @@ -20,40 +20,47 @@ export type AddressInfoParam = { } type Param = { onSelect?: (val:any) => void, //选择地址 - defaultValue?: AddressInfoParam|null, //默认值 disabled?: false|true, //true禁用后只用于展示 onChangeShipmentMode?: (val: number) => void, //返回收货方式 + onLogistics?: () => void, //查看物流 + status?: 1|2, //1确认订单时使用， 2订单流程 orderInfo?: { - orderId: number //订单id - shipment_mode: 1|2, //1自提 2物流 - status: number //订单状态 + id?: number //订单id + shipment_mode?: 1|2, //1自提 2物流 + status?: number //订单状态 + province_name: string, + city_name: string, + district_name: string, + address_detail: string } } -export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = null, orderInfo}: Param, ref) => { - const [showAddressList, setShowAddressList] = useState(false) - +export default memo(forwardRef(({onSelect, onChangeShipmentMode, orderInfo, status = 2, disabled = false, onLogistics}: Param, ref) => { + + const [addressInfo, setAddressInfo] = useState() useEffect(() => { - setUserInfo(() => defaultValue) - }, [defaultValue]) + if(orderInfo) { + setReceivingStatus(() => orderInfo.shipment_mode||2) + setAddressInfo(() => orderInfo) + } + }, [orderInfo]) - const [userInfo, setUserInfo] = useState() //地址格式 const formatAddress = useMemo(() => { - if(userInfo) - return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail - }, [userInfo]) + if(addressInfo?.province_name) { + return addressInfo.province_name + addressInfo.city_name + addressInfo.district_name + addressInfo.address_detail + } else { + return '' + } + }, [addressInfo]) + //打开地址列表 + const [showAddressList, setShowAddressList] = useState(false) const changeShow = () => { if(receivingStatus == 2 && !logisticsShow) setShowAddressList(() => true) } - - useEffect(() => { - if(orderInfo) - setReceivingStatus(() => orderInfo.shipment_mode) - }, [orderInfo]) //把内部方法提供给外部 useImperativeHandle(ref, () => ({ @@ -61,7 +68,7 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = })) //收货方法,1:自提，2物流 - const [receivingStatus, setReceivingStatus] = useState(1) + const [receivingStatus, setReceivingStatus] = useState(2) const {fetchData: shipmentModeFetchData} = EditSaleOrderShipmentModeApi() const onReceivingStatus = (value, e) => { e.stopPropagation() @@ -69,8 +76,13 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = } const changeReceivingStatus = debounce(async (value) => { if(!orderInfo) return false + if(status == 1) { + onChangeShipmentMode?.(value) + setReceivingStatus(value) + return false + } alert.loading('正在修改') - const res = await shipmentModeFetchData({id: orderInfo.orderId, shipment_mode:value}) + const res = await shipmentModeFetchData({id: orderInfo.id, shipment_mode:value}) if(res.success) { alert.success('收货方式修改成功') onChangeShipmentMode?.(value) @@ -85,14 +97,21 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = const {fetchData: addressFetchData} = EditSaleOrderAddressApi() const getAddress = async (value) => { if(!orderInfo) return false + if(status == 1) { + setShowAddressList(() => false) + setAddressId(value.id) + setAddressInfo(() => value) + onSelect?.(value) + return false + } alert.loading('正在修改') - const res = await addressFetchData({id: orderInfo.orderId, address_id: value.id}) + const res = await addressFetchData({id: orderInfo.id, address_id: value.id}) if(res.success) { alert.success('地址修改成功') onSelect?.(value) setShowAddressList(() => false) setAddressId(value.id) - setUserInfo(() => value) + setAddressInfo(() => value) } else { alert.none(res.msg) } @@ -104,12 +123,14 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = SaleOrderStatusAlreadyReceipt, SaleOrderStatusComplete, SaleOrderStatusRefund, - SaleOrderStatusCancel + SaleOrderStatusCancel, } = ORDER_STATUS + //根据订单状态判断是否显示物流 const logisticsShowList = [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value] const logisticsShow = useMemo(() => { + console.log('aa:',orderInfo?.status) return logisticsShowList.includes(orderInfo?.status as number) }, [orderInfo]) @@ -119,12 +140,12 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = - {formatAddress} + {formatAddress||'请选择收货地址及信息'} {(receivingStatus == 2 && !logisticsShow)&&} - {userInfo?.name} - {userInfo?.phone} + {addressInfo?.name} + {addressInfo?.phone} {!logisticsShow&& @@ -134,7 +155,7 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = || - + 查看物流 } diff --git a/src/pages/order/components/applyRefund/index.module.scss b/src/pages/order/components/applyRefund/index.module.scss new file mode 100644 index 0000000..ec17129 --- /dev/null +++ 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 new file mode 100644 index 0000000..481d03f --- /dev/null +++ b/src/pages/order/components/applyRefund/index.tsx @@ -0,0 +1,57 @@ +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) + } + + return ( + <> + + + + 退款说明 + onShowReason()}> + 请选择 + + + + + + + onSubmit(1)}>取消 + onSubmit(2)}>确认 + + + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/order/components/kindList/index copy.tsx b/src/pages/order/components/kindList/index copy.tsx new file mode 100644 index 0000000..8247927 --- /dev/null +++ b/src/pages/order/components/kindList/index copy.tsx @@ -0,0 +1,190 @@ +import { ORDER_STATUS } from "@/common/enum" +import { formatHashTag, formatPriceDiv } from "@/common/fotmat" +import LabAndImg from "@/components/LabAndImg" +import { View } from "@tarojs/components" +import { memo, useCallback, useMemo } from "react" +import EstimatedAmount from "../estimatedAmount" +import styles from './index.module.scss' + +type OrderParam = { + estimate_amount: number, //预估金额 + list: any[], + sale_mode: number, + sale_mode_name: string, + unit: string, + total_colors: number, + total_fabrics: number, + total_number: number, + status: number, //订单状态 + total_sale_price: number, //销售金额 + total_should_collect_money: number, //应收金额 + total_weight_error_discount: number, //空差优惠 + the_previous_status: number, //取消订单时的订单状态 + actual_amount: number //实付金额 +} + +type Param = { + order: OrderParam, + comfirm?: boolean //是否是确认订单页面使用 +} + +export default memo(({order, comfirm = false}:Param) => { + //对应数量 + const formatCount = useCallback((item) => { + return order?.sale_mode == 0? item.roll : Number(item.length / 100) + }, [order]) + //对应单价 + const standardPrice = useCallback(price => { + return formatPriceDiv(price).toLocaleString() + '/' + (order?.sale_mode == 1?'m':'kg') + }, [order]) + + //数量格式 + const numText = useMemo(() => { + if(order) { + let total_number = order?.sale_mode == 0?order?.total_number:(order?.total_number/100) + return `${order?.total_fabrics}种面料，${order?.total_colors}种颜色，共${total_number}${order?.unit}` + } + }, [order]) + + const { + SaleOrderStatusBooking, // 待接单 + SaleOrderStatusArranging, // 配布中 + SaleOrderStatusArranged, // 已配布 + SaleOrderStatusWaitingPayment, // 待付款 + SaleOrderStatusWaitingDelivery, // 待发货 + SaleOrderStatusWaitingReceipt, // 待收货 + SaleOrderStatusAlreadyReceipt, // 已收货 + SaleOrderStatusComplete, // 已完成 + SaleOrderStatusRefund, // 已退款 + SaleOrderStatusCancel, // 已取消 + SaleorderstatusWaitingPrePayment // 预付款 + } = ORDER_STATUS + + //金额列表枚举 + const priceList = [ + { + id:1, + value:[SaleorderstatusWaitingPrePayment.value, SaleOrderStatusBooking.value, SaleOrderStatusArranging.value, ], + label:'预估金额', + field: 'estimate_amount' + }, + { + id:2, + value:[SaleorderstatusWaitingPrePayment.value, SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], + label:'合计金额', + field: 'total_sale_price' + }, + { + id:3, + value:[SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], + label:'空差优惠', + field: 'total_weight_error_discount' + }, + { + id:4, + value:[ SaleOrderStatusWaitingPayment.value], + label:'应付金额', + field: 'total_should_collect_money' + }, + { + id:5, + value:[SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], + label:'实付金额', + field: 'actual_amount' + } + ] + + //是否显示价格 + const showPrice = useCallback((priceInfo, status) => { + return priceInfo.value.includes(status) + }, [order]) + + //金额展示大货 + const priceConDom = useMemo(() => { + if(!order) return + if(comfirm == true) { + //确认订单时 + return + } + + if(order?.status == SaleOrderStatusCancel.value) { + //订单状态为取消订单时 + return ( + <> + { + priceList.map(item => { + return <>{showPrice(item, order?.the_previous_status)&&} + }) + } + + ) + } else { + //其他订单状态 + return ( + <> + { + priceList.map(item => { + return <>{showPrice(item, order?.status)&&} + }) + } + + ) + } + }, [order]) + + //金额展示剪板 + const cutPriceConDom = useMemo(() => { + if(!order) return + return + }, [order]) + + const showPriceAll = useMemo(() => { + if(order?.sale_mode == 1) { + return cutPriceConDom //剪板 + } else { + return priceConDom //大货 + } + }, [order]) + + + return ( + <> + {numText} + + { + order?.list?.map(item => { + return + + {order.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)}{order.unit} + ¥{formatPriceDiv(colorItem.estimate_amount).toLocaleString()} + + + + })} + + + }) + } + + {showPriceAll} + + + + ) +}) \ No newline at end of file diff --git a/src/pages/order/components/kindList/index.module.scss b/src/pages/order/components/kindList/index.module.scss index a4b4c9e..2c4b957 100644 --- a/src/pages/order/components/kindList/index.module.scss +++ b/src/pages/order/components/kindList/index.module.scss @@ -66,9 +66,14 @@ font-size: $font_size; margin-bottom: 15px; } - .order_list_item_price{ + .order_list_item_price, .order_list_item_price_dg{ font-size: 26px; color: $color_font_three; + display: flex; + align-items: center; + Text{ + padding-left: 13px; + } } } .order_list_item_count{ diff --git a/src/pages/order/components/kindList/index.tsx b/src/pages/order/components/kindList/index.tsx index aba9f02..185a3b9 100644 --- a/src/pages/order/components/kindList/index.tsx +++ b/src/pages/order/components/kindList/index.tsx @@ -1,7 +1,7 @@ import { ORDER_STATUS } from "@/common/enum" -import { formatHashTag, formatPriceDiv } from "@/common/fotmat" +import { formatHashTag, formatPriceDiv, formatWeightDiv } from "@/common/fotmat" import LabAndImg from "@/components/LabAndImg" -import { View } from "@tarojs/components" +import { Text, View } from "@tarojs/components" import { memo, useCallback, useMemo } from "react" import EstimatedAmount from "../estimatedAmount" import styles from './index.module.scss' @@ -16,7 +16,7 @@ type OrderParam = { total_fabrics: number, total_number: number, status: number, //订单状态 - total_sale_price: number, //销售金额 + total_sale_price: number, //合计金额 total_should_collect_money: number, //应收金额 total_weight_error_discount: number, //空差优惠 the_previous_status: number, //取消订单时的订单状态 @@ -57,20 +57,21 @@ export default memo(({order, comfirm = false}:Param) => { SaleOrderStatusComplete, // 已完成 SaleOrderStatusRefund, // 已退款 SaleOrderStatusCancel, // 已取消 - SaleorderstatusWaitingPrePayment // 预付款 + SaleorderstatusWaitingPrePayment, // 预付款 + SaleOrderStatusTaking //提货 } = ORDER_STATUS //金额列表枚举 const priceList = [ { id:1, - value:[SaleOrderStatusBooking.value, SaleOrderStatusArranging.value], + value:[SaleorderstatusWaitingPrePayment.value, SaleOrderStatusBooking.value, SaleOrderStatusArranging.value], label:'预估金额', field: 'estimate_amount' }, { id:2, - value:[SaleorderstatusWaitingPrePayment.value, SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], + value:[SaleOrderStatusTaking.value, SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], label:'合计金额', field: 'total_sale_price' }, @@ -88,63 +89,61 @@ export default memo(({order, comfirm = false}:Param) => { }, { id:5, - value:[SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], + value:[SaleOrderStatusTaking.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], label:'实付金额', field: 'actual_amount' } ] - //是否显示价格 - const showPrice = useCallback((priceInfo, status) => { - return priceInfo.value.includes(status) - }, [order]) + //订单流程是否显示价格 + const showPrice = (item) => { + if (item.id == 2) { + //合计金额 (剪板特殊请情况) + return (item.value.includes(order.status)|| order.sale_mode == 1) + } else if (item.id == 3) { + //空差优惠只有大货才有 + return (item.value.includes(order.status) && order.sale_mode == 1 ) + } else { + return (item.value.includes(order.status) && order.sale_mode != 1 ) + } + + } - //金额展示大货 + //订单流程金额展示 const priceConDom = useMemo(() => { if(!order) return - if(comfirm == true) { - //确认订单时 - return - } else if(order?.status == SaleOrderStatusCancel.value) { - //订单状态为取消订单时 - return ( - <> - { - priceList.map(item => { - return <>{showPrice(item, order?.the_previous_status)&&} - }) - } - - ) - } else { - //其他订单状态 - return ( - <> - { - priceList.map(item => { - return <>{showPrice(item, order?.status)&&} - }) - } - - ) - } + return ( + <> + { + priceList.map(item => { + return <>{showPrice(item)&&} + }) + } + + ) }, [order]) - //金额展示剪板 - const cutPriceConDom = useMemo(() => { + //确认订单金额展示 + const comfirmPriceConDom = useMemo(() => { if(!order) return - return + let item = order.sale_mode == 1?priceList[1]:priceList[0] + return }, [order]) - const showPriceAll = useMemo(() => { - if(order?.sale_mode == 1) { - return cutPriceConDom //剪板 - } else { - return priceConDom //大货 + //金额展示 + const showPriceConDom = useMemo(() => { + return comfirm?comfirmPriceConDom:priceConDom + }, [order]) + + + //散剪大约重量 + const aboutWeight = useCallback((weight) => { + if(order.sale_mode == 2 ) { + let showWeight = [SaleorderstatusWaitingPrePayment.value, SaleOrderStatusBooking.value, SaleOrderStatusArranging.value].includes(order.status) + return showWeight?; ≈{formatWeightDiv(weight)}kg:<> } - + return <> }, [order]) - return ( <> @@ -167,7 +166,11 @@ export default memo(({order, comfirm = false}:Param) => { {colorItem.code + ' ' + colorItem.name} - ¥{standardPrice(colorItem.sale_price)} + + ¥{standardPrice(colorItem.sale_price)} + {aboutWeight(colorItem.estimate_weight)} + + ×{formatCount(colorItem)}{order.unit} @@ -181,7 +184,7 @@ export default memo(({order, comfirm = false}:Param) => { }) } - {showPriceAll} + {showPriceConDom} diff --git a/src/pages/order/components/orderState/index.module.scss b/src/pages/order/components/orderState/index.module.scss index dbe0c48..0cc33d6 100644 --- a/src/pages/order/components/orderState/index.module.scss +++ b/src/pages/order/components/orderState/index.module.scss @@ -15,7 +15,6 @@ } .order_status_item{ position: relative; - // padding-left: 50px; &:nth-last-child(n+2) { padding-bottom: 30px; } diff --git a/src/pages/order/components/orderState/index.tsx b/src/pages/order/components/orderState/index.tsx index db0643f..b08861d 100644 --- a/src/pages/order/components/orderState/index.tsx +++ b/src/pages/order/components/orderState/index.tsx @@ -10,7 +10,8 @@ type List = { status: string, time: string, tag: string, - desc: string + desc: string, + expire_time: string } type Param = { @@ -19,13 +20,12 @@ type Param = { logistics_details:List[], //订单状态列表 payment_method: 0|PAYMENT_METHOD_PARAM, //支付方式 status: number, //订单状态 - expire_time: number } } -export default memo(({orderInfo = {logistics_details: [],payment_method: 0, status: 0, expire_time:0}, onRefresh}:Param) => { +export default memo(({orderInfo = {logistics_details: [],payment_method: 0, status: 0}, onRefresh}:Param) => { const [showMore, setShowMore] = useState(false) const changeMore = () => { @@ -44,36 +44,13 @@ export default memo(({orderInfo = {logistics_details: [],payment_method: 0, stat PaymentMethodCashOnDelivery, } = PAYMENT_METHOD - - //倒计时 - const timeObj:any = useRef() - useEffect(() => { - if(orderInfo.expire_time) { - timeObj.current = setInterval(() => { - count_down() - }, 1000) - } - return () => { - clearInterval(timeObj.current) - } - }, [orderInfo.expire_time]) - - - const count_down = () => { - var startData = dayjs(); - var endDate = dayjs(orderInfo.expire_time); - console.log('endDate::', endDate.format('YYYY-MM-DD HH:mm')) - var _dd = endDate.diff(startData,'day'); - var _hh = endDate.diff(startData,'hour'); - var _mm = endDate.diff(startData,'minute'); - var _ss = endDate.diff(startData,'second'); - // 转换 - var hh = _hh - (_dd*24); - var mm = _mm - (_hh*60); - var ss = _ss - (_mm*60); - console.log(`${_dd} ${hh} ${mm} ${ss}`) - } - + //获取预付款最后时间 + const endTime = useMemo(() => { + if(orderInfo.status == SaleorderstatusWaitingPrePayment.value && orderInfo.logistics_details.length > 0) { + return orderInfo.logistics_details[0].expire_time + } + return '' + }, [orderInfo]) return ( <> {(dataList?.length > 0)&& @@ -84,12 +61,9 @@ export default memo(({orderInfo = {logistics_details: [],payment_method: 0, stat {item.status} {formatDateTime(item.time)} - {/* {item.tag} */} {item.desc} - {(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&& - 剩23:58:55支付关闭，订单自动取消 - } + {(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&&} )} {(dataList.length > 2) && changeMore()}> @@ -107,4 +81,52 @@ export default memo(({orderInfo = {logistics_details: [],payment_method: 0, stat } ) -}) \ No newline at end of file +}) + +//倒计时 +const CountDown = ({endTime = '', onFinish}:{endTime:string, onFinish?:() => void}) => { + const [showTime, setShowTime] = useState('') + const timeObj:any = useRef() + useEffect(() => { + if(endTime) { + clearInterval(timeObj.current) + timeObj.current = setInterval(() => { + count_down() + }, 1000) + } + return () => { + clearInterval(timeObj.current) + } + }, [endTime]) + const count_down = () => { + var startData = dayjs(); + var endDate = dayjs(endTime); + if(startData >= endDate) { + clearInterval(timeObj.current) + onFinish?.() + setShowTime(() => '00:00:00') + return false + } + var _dd = endDate.diff(startData,'day'); + var _hh = endDate.diff(startData,'hour'); + var _mm = endDate.diff(startData,'minute'); + var _ss = endDate.diff(startData,'second'); + // 转换 + var hh = _hh - (_dd*24); + var mm = _mm - (_hh*60); + var ss = _ss - (_mm*60); + // 格式化 + var DD = ('00'+_dd).slice(-2); + var HH = ('00'+hh).slice(-2); + var MM = ('00'+mm).slice(-2); + var SS = ('00'+ss).slice(-2); + setShowTime(() => ` ${HH}:${MM}:${SS}`) + } + return ( + <> + + 剩{showTime||'--:--:--'}支付关闭，订单自动取消 + + + ) +} \ No newline at end of file diff --git a/src/pages/order/components/payment/index.module.scss b/src/pages/order/components/payment/index.module.scss index 340b0ed..0f16e80 100644 --- a/src/pages/order/components/payment/index.module.scss +++ b/src/pages/order/components/payment/index.module.scss @@ -35,9 +35,9 @@ $top:190px; border-radius: 10px; padding-bottom: 100px; position: relative; - background: radial-gradient(circle 20px at left $top, transparent 20px, #fff 20px + 3px) left 0px/60% no-repeat , - radial-gradient(circle 20px at right $top, transparent 20px, #fff 20px + 3px) right 0px/60% no-repeat; - filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, .16)); + // background: radial-gradient(circle 20px at left $top, transparent 20px, #fff 20px + 3px) left 0px/60% no-repeat , + // radial-gradient(circle 20px at right $top, transparent 20px, #fff 20px + 3px) right 0px/60% no-repeat; + // filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, .16)); position: relative; &::before{ content: ''; diff --git a/src/pages/order/components/payment/index.tsx b/src/pages/order/components/payment/index.tsx index a07cc7a..303b62f 100644 --- a/src/pages/order/components/payment/index.tsx +++ b/src/pages/order/components/payment/index.tsx @@ -25,6 +25,7 @@ type OrderInfo = { pre_collect_order_id?: number, //预付单id status?: number, //订单状态 payment_method?: 0|PAYMENT_METHOD_PARAM //支付方式 + sale_mode?: number //订单类型 0：大货 1剪板 2散剪 } type PayStatus = 1|2|3|4|5|null //1:预存款， 2:账期，3：线下汇款， 4：扫码支付, 5:货到付款 @@ -122,6 +123,8 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) //是否显示七天账期 const show_account_payment = useMemo(() => { console.log('orderInfo?.status::',orderInfo) + //剪板合散剪不显示 + if(orderInfo?.sale_mode != 0) return false //支付方式是账期支付,不显示 if(orderInfo?.payment_method == PaymentMethodAccountPeriod.value) return false //支付方式是货到付款,不显示 @@ -139,6 +142,10 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) ) }, [payInfo]) + //选择改变 + const changeSelect = () => { + } + return ( @@ -164,7 +171,7 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) - + 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..11d870f 100644 --- a/src/pages/order/components/remark/index.tsx +++ b/src/pages/order/components/remark/index.tsx @@ -1,20 +1,25 @@ 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 }) - const getDesc = useCallback((e) => { - let value = e.detail.value + + useEffect(() => { + getDesc(defaultValue) + }, [defaultValue]) + + const getDesc = useCallback((value) => { let res = value if(value.length > descData.count) { res = value.slice(0, descData.count) @@ -29,7 +34,7 @@ export default ({onBlur, onSave}:Param) => { 编辑备注 - + {descData.number}/{descData.count} setSave()}>保存 diff --git a/src/pages/order/components/submitOrderBtn/index.module.scss b/src/pages/order/components/submitOrderBtn/index.module.scss index c5ac9ed..7330951 100644 --- a/src/pages/order/components/submitOrderBtn/index.module.scss +++ b/src/pages/order/components/submitOrderBtn/index.module.scss @@ -1,11 +1,9 @@ .order_price{ display: flex; align-items: center; - justify-content: space-between; + // justify-content: space-between; width: 100%; - &:nth-last-child(n+2) { - margin-bottom: 30px; - } + .order_price_text{ font-size: $font_size_medium; // margin-right: 10px; @@ -41,7 +39,7 @@ } } .emphasis{ - font-weight: 700; + // font-weight: 700; } .order_price_num{ color: $color_main; @@ -51,7 +49,7 @@ font-size: $font_size_min; } &:nth-child(2) { - font-size: 26px; + font-size: 44px; } &:nth-child(3) { font-size: $font_size_medium; @@ -61,7 +59,7 @@ .emphasis_num{ text{ &:nth-child(2) { - font-size: $font_size_big; + font-size: 44px; } } } diff --git a/src/pages/order/components/submitOrderBtn/index.tsx b/src/pages/order/components/submitOrderBtn/index.tsx index d84e61e..5e083c3 100644 --- a/src/pages/order/components/submitOrderBtn/index.tsx +++ b/src/pages/order/components/submitOrderBtn/index.tsx @@ -26,11 +26,7 @@ export default memo(({style, number = 0, priceTitle = ''}:Param) => { <> - {priceTitle} - - - {/* 123123123121212312312312312 */} - + {priceTitle}： {priceDom()} diff --git a/src/pages/order/index.module.scss b/src/pages/order/index.module.scss index fdef528..55096de 100644 --- a/src/pages/order/index.module.scss +++ b/src/pages/order/index.module.scss @@ -62,18 +62,15 @@ color: $color_font_two; } } - .submit_order{ + .submit_order_con{ position: fixed; bottom: 0; left: 0; width: 100%; - align-items: center; background-color: #fff; box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16); padding: 20px 20px; box-sizing: border-box; - // padding-bottom: constant(safe-area-inset-bottom); - // padding-bottom: env(safe-area-inset-bottom); .order_btn { width: 152px; height: 72px; diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx index 0586039..fae2191 100644 --- a/src/pages/order/index.tsx +++ b/src/pages/order/index.tsx @@ -4,17 +4,20 @@ import { CancelOrderApi } from "@/api/order"; import { GetOrderPayApi } from "@/api/orderPay"; +import { AddShoppingCartApi } from "@/api/shopCart"; import { alert, goLink } from "@/common/common"; import { ORDER_STATUS } from "@/common/enum"; -import { formatDateTime, formatPriceDiv } from "@/common/fotmat"; +import { formatDateTime, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; import OrderBtns from "@/components/orderBtns"; import Popup from "@/components/popup"; import SearchInput from "@/components/searchInput"; +import ShopCart from "@/components/shopCart"; import { Text, Textarea, View } from "@tarojs/components" 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"; @@ -38,7 +41,8 @@ import styles from './index.module.scss' setOrderDetail(res.data) setOrderRemark(res.data.remark) } - Taro.stopPullDownRefresh() + Taro.stopPullDownRefresh() + Taro.hideToast() } //监听获取到的数据 @@ -85,16 +89,19 @@ import styles from './index.module.scss' }) } - //格式化初始地址 + //初始地址数据 const defaultAddress = useMemo(() => { return { province_name: orderDetail?.province_name, city_name: orderDetail?.city_name, district_name: orderDetail?.district_name, address_detail: orderDetail?.address_detail, - // id: address.id, name: orderDetail?.target_user_name, - phone: orderDetail?.target_user_phone + phone: orderDetail?.target_user_phone, + shipment_mode: orderDetail?.shipment_mode, + id: orderDetail?.id, + sale_mode: orderDetail?.sale_mode, + status: orderDetail?.status } }, [orderDetail]) @@ -114,12 +121,6 @@ import styles from './index.module.scss' setShowDesc(() => false) }, []) - //支付所需数据 - // const payOrderInfo = useMemo(() => { - // if(orderDetail) - // return {should_collect_order_id: orderDetail.should_collect_order_id, payment_method:orderDetail.payment_method, pre_collect_order_id:orderDetail.pre_collect_order_id} - // }, [orderDetail]) - //去付款 const [payMentShow, setPayMentShow] = useState(false) const toPay = () => { @@ -146,13 +147,20 @@ import styles from './index.module.scss' //获取底部按钮点击, 获取按钮状态 const orderStateClick = useCallback((val) => { + console.log('123456789',val) if(val == 1 || val == 6) { //取消订单 getSaleOrderPreView() }else if(val == 2) { //待付款 toPay() + } else if(val == 3) { + setRefundShow(true) + } else if(val == 7) { + //再购 + addShopCart() } + }, [orderDetail]) //页面下拉刷新 @@ -186,13 +194,66 @@ import styles from './index.module.scss' //订单状态枚举 const {SaleOrderStatusCancel} = ORDER_STATUS + //刷新页面 + const refresh = useCallback(() => { + alert.loading('刷新中') + getSaleOrderPreView() + }, [orderDetail]) + + //退款申请 + const [refundShow, setRefundShow] = useState(false) + const applyRefundClose = useCallback(() => { + setRefundShow(false) + }, []) + + //查看物流 + const getLogistics = useCallback(() => { + const list = orderDetail?.delivery_appendix_url.map(item => { + return formatImgUrl(item) + }) + Taro.previewImage({ + current: list[0], // 当前显示 + urls: list // 需要预览的图片http链接列表 + }) + }, [orderDetail]) + //添加购物车 + const [showCart, setShowCart] = useState(false) + const {fetchData:addFetchData} = AddShoppingCartApi() + const addShopCart = async () => { + let color_list:{product_color_id: number, roll?: number, length?: number}[] = [] + orderDetail?.product_list.map(pitem => { + pitem?.product_colors.map(citem => { + if(orderDetail?.sale_mode == 0) { + return color_list.push({product_color_id: citem.id, roll: citem.roll}) + } else { + return color_list.push({product_color_id: citem.id, length: citem.length}) + } + }) + }) + const state = await addFetchData({ + sale_mode: orderDetail?.sale_mode, + color_list + }) + if(state.success) { + Taro.showToast({ + title:'已加入购物车' + }) + setShowCart(true) + } else { + Taro.showToast({ + icon:'none', + title: state.msg + }) + } + + } return ( - - - + + + @@ -218,14 +279,16 @@ import styles from './index.module.scss' } - {(orderDetail?.status != SaleOrderStatusCancel.value)&& + {(orderDetail?.status != SaleOrderStatusCancel.value)&& } setShowDesc(false)}> - getRemark(e)}/> + getRemark(e)} defaultValue={orderDetail?.remark}/> + + setShowCart(false)}/> ) diff --git a/src/pages/orderList/index.tsx b/src/pages/orderList/index.tsx index 49c1b4b..982f9d2 100644 --- a/src/pages/orderList/index.tsx +++ b/src/pages/orderList/index.tsx @@ -12,6 +12,8 @@ import { dataLoadingStatus, getFilterData } from "@/common/util" import OrderStatusList from "./components/orderStatusList" import Payment from "../order/components/payment" import { ORDER_STATUS } from "@/common/enum" +import { AddShoppingCartApi } from "@/api/shopCart" +import ShopCart from "@/components/shopCart" export default () => { const {checkLogin} = useLogin() @@ -108,6 +110,9 @@ export default () => { payment_method: orderInfo.payment_method //支付方式 }) toPay() + } else if (status == 7) { + //购买 + addShopCart(orderInfo) } }, [orderData]) @@ -128,6 +133,38 @@ export default () => { closePayShow() }, []) + //添加购物车 + const [showCart, setShowCart] = useState(false) + const {fetchData:addFetchData} = AddShoppingCartApi() + const addShopCart = async (item) => { + let color_list:{product_color_id: number, roll?: number, length?: number}[] = [] + item?.product_list.map(pitem => { + pitem?.product_colors.map(citem => { + if(item?.sale_mode == 0) { + return color_list.push({product_color_id: citem.id, roll: citem.roll}) + } else { + return color_list.push({product_color_id: citem.id, length: citem.length}) + } + }) + }) + const state = await addFetchData({ + sale_mode: item?.sale_mode, + color_list + }) + if(state.success) { + Taro.showToast({ + title:'已加入购物车' + }) + setShowCart(true) + } else { + Taro.showToast({ + icon:'none', + title: state.msg + }) + } + + } + return ( @@ -142,6 +179,7 @@ export default () => { })} + setShowCart(false)}/> ) diff --git a/src/pages/salesAfter/components/addressInfoDetail/index.module.scss b/src/pages/salesAfter/components/addressInfoDetail/index.module.scss index 68e6171..82159da 100644 --- a/src/pages/salesAfter/components/addressInfoDetail/index.module.scss +++ b/src/pages/salesAfter/components/addressInfoDetail/index.module.scss @@ -1,12 +1,31 @@ +.address_main{ + margin-top: 20px; +} + +.address_title_tag{ + font-size: 24px; + color: #EE7500; + background: rgba(255,230,206,0.36); + border-radius: 20px 20px 0px 0px; + height: 56px; + display: flex; + align-items: center; + position: relative; + z-index: 999; + .miconfont { + font-size: 30px; + padding: 0 20px; + } +} + .order_address{ height: 178px; background: #ffffff; - border-radius: 20px; + border-radius: 0 0 20px 20px; display: flex; align-items: center; padding: 30px; box-sizing: border-box; - margin-top: 20px; position: relative; .order_address_icon{ font-size: 50px; @@ -26,87 +45,46 @@ .order_address_text_title{ font-size: $font_size_medium; margin-top: 10px; - @include common_ellipsis; display: flex; align-items: center; justify-content: space-between; .moreIconfont{ font-size: 20px; } + .address_text{ + word-break:break-all; + font-size: 28px; + font-weight: 700; + } } .order_address_text_name{ - + color: #707070; align-items: center; + display: flex; + margin-top: 20px; text{ &:nth-child(1) { - color: #000; - font-weight: 700; - font-size: $color_font_one; + font-size: $font_size_medium; margin-right: 40px; } &:nth-child(2) { - color: $color_font_one; + flex:1; font-size: $font_size_medium; } } } } .updateBtn{ - width:200px; - font-size: $font_size_min; - background-color: #F0F0F0; - height: 64px; - border-radius: 24px; + width:152px; + font-size: 28px; + height: 60px; color: $color_font_two; - position: absolute; - bottom: 10px; - right: 10px; z-index: 999; - .updateBtn_list{ - position: absolute; - display: flex; - z-index: 5; - width: 100%; - .updateBtn_item_select{ - color: #fff; - } - } - .updateBtn_item{ - flex:1; - text-align: center; - line-height: 64px; - } - .updateBtn_select{ - color: #fff; - background-color: $color_main; - border-radius: 24px; - position: absolute; - width: 100px; - height: 61px; - z-index: 1; - transition: all 0.3s ease-in-out; - } + border: 2px solid #dddddd; + border-radius: 36px; + text-align: center; + line-height: 60px; } - .order_address_text_no{ - flex: 1; - font-size: $font_size; - font-weight: 700; - margin-left: 30px; - } - .order_address_more_icon{ - color: $color_font_three; - font-size: $font_size; - } -} -.order_address_list { - height: 900px; - .order_address_title{ - font-size: $font_size; - font-weight: 700; - width: 100%; - text-align: center; - padding: 20px 0 30px 0; - } } \ No newline at end of file diff --git a/src/pages/salesAfter/components/addressInfoDetail/index.tsx b/src/pages/salesAfter/components/addressInfoDetail/index.tsx index 7290ae6..db4d5f3 100644 --- a/src/pages/salesAfter/components/addressInfoDetail/index.tsx +++ b/src/pages/salesAfter/components/addressInfoDetail/index.tsx @@ -1,122 +1,69 @@ -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 { AFTER_ORDER_STATUS } from "@/common/enum"; import { Text, View } from "@tarojs/components" import classnames from "classnames"; -import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useState } from "react"; +import {memo, useMemo} from "react"; import styles from './index.module.scss' -export type AddressInfoParam = { - province_name: string, - city_name: string, - district_name: string, - address_detail: string, - id?: number, - name: string, - phone: string, -} -type Param = { - onSelect?: (val:any) => void, //选择 - defaultValue?: AddressInfoParam|null, //默认值 - disabled?: false|true, //true禁用后只用于展示 - shipment_mode?: 1|2, //1自提 2物流 - onChangeShipmentMode?: (val: number) => void, //返回收货方式 - orderId?: number //订单id +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 -export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = null, orderId = 0, shipment_mode = 1}: Param, ref) => { - const [showAddressList, setShowAddressList] = useState(false) + //是否显示地址 + const showAddress = useMemo(() => { + return stage != ReturnStageApplying.value + }, [stage]) - useEffect(() => { - setUserInfo(() => defaultValue) - }, [defaultValue]) + //上传物流 + const upLogistics = useMemo(() => { + return stage == ReturnStageWaitCheck.value + }, [stage]) - const [userInfo, setUserInfo] = useState() + //查看物流 + const showLogistics = useMemo(() => { + return (stage == ReturnStageChecked.value || stage == ReturnStageQualityCheckPendingRefund.value) + }, [stage]) - //地址格式 - const formatAddress = useMemo(() => { - if(userInfo) - return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail - }, [userInfo]) - - const changeShow = () => { - if(receivingStatus == 2) - setShowAddressList(() => true) - } - - useEffect(() => { - setReceivingStatus(() => shipment_mode) - }, [shipment_mode]) - - //把内部方法提供给外部 - 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('正在修改') - const res = await addressFetchData({id: orderId, address_id: value.id}) - if(res.success) { - alert.success('地址修改成功') - onSelect?.(value) - setShowAddressList(() => false) - setUserInfo(() => value) - } else { - alert.none(res.msg) - } - } return ( - - changeShow()}> - - - - {formatAddress} - {(receivingStatus == 2)&&} - - - {userInfo?.name} - {userInfo?.phone} + <> + {showAddress&& + + + 请按以下退货地址寄回货物并提供退货物流信息 + + + + + + {return_address} + + + 管理员 + {return_phone} + {upLogistics&& onLogistics?.(1)}> + 上传物流 + } + {showLogistics&& onLogistics?.(2)}> + 查看物流 + } + - - - onReceivingStatus(1,e)}>自提 - onReceivingStatus(2,e)}>物流 - - - - - setShowAddressList(false)}> - - 请选择收货地址 - - - - + } + ) -})) \ No newline at end of file +}) \ 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.module.scss b/src/pages/salesAfter/components/kindList/index.module.scss index be8f53f..de1171e 100644 --- a/src/pages/salesAfter/components/kindList/index.module.scss +++ b/src/pages/salesAfter/components/kindList/index.module.scss @@ -1,14 +1,17 @@ -.orders_list_title{ - padding: 20px 20px 10px 20px; - color: $color_font_two; - font-size: $font_size_medium; +.kindsList_main{ + margin-top: 20px; } .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: 30px; @@ -47,7 +50,6 @@ width: 126px; height: 126px; border-radius: 20px; - background-color: red; } .order_list_item_con{ display: flex; @@ -96,6 +98,21 @@ } } } + .order_total{ + padding-top: 20px; + display: flex; + justify-content: space-between; + text{ + &:nth-child(1) { + font-size: 28px; + font-weight: 700; + } + &:nth-child(2) { + font-size: 24px; + font-weight: 700; + } + } + } .order_estimated_amount{ display: flex; align-items: flex-end; diff --git a/src/pages/salesAfter/components/kindList/index.tsx b/src/pages/salesAfter/components/kindList/index.tsx index e93be35..2cc8d3a 100644 --- a/src/pages/salesAfter/components/kindList/index.tsx +++ b/src/pages/salesAfter/components/kindList/index.tsx @@ -1,6 +1,7 @@ import { ORDER_STATUS } from "@/common/enum" import { formatHashTag, formatPriceDiv } from "@/common/fotmat" -import { View } from "@tarojs/components" +import LabAndImg from "@/components/LabAndImg" +import { Text, View } from "@tarojs/components" import { memo, useCallback, useMemo } from "react" import EstimatedAmount from "../estimatedAmount" import styles from './index.module.scss' @@ -14,7 +15,8 @@ type OrderParam = { total_colors: number, total_fabrics: number, total_number: number, - status: number, //订单状态 + stage: number, //订单状态 + type: 1|2, //1退货， 2退款 total_sale_price: number, //销售金额 total_should_collect_money: number, //应收金额 total_weight_error_discount: number, //空差优惠 @@ -43,48 +45,60 @@ 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 = [ { id:1, - value:[SaleOrderStatusBooking.value, SaleOrderStatusArranging.value], - label:'预估金额', + value:[], + label:'退货条数', field: 'estimate_amount' }, { id:2, - value:[SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], - label:'合计金额', + value:[], + label:'扣款金额', field: 'total_sale_price' }, { id:3, - value:[SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], - label:'空差优惠', + value:[], + label:'其他扣款', field: 'total_weight_error_discount' }, { id:4, - value:[ SaleOrderStatusWaitingPayment.value], - label:'应付金额', + value:[], + label:'应退金额', field: 'total_should_collect_money' }, { id:5, - value:[SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], + value:[], + label:'退款金额', + field: 'total_should_collect_money' + }, + { + id:6, + value:[], + label:'退款去向', + field: 'actual_amount' + }, + { + id:7, + value:[], label:'实付金额', field: 'actual_amount' } @@ -97,38 +111,26 @@ export default memo(({order, comfirm = false}:Param) => { const priceConDom = useMemo(() => { if(!order) return - //确认订单 - if(comfirm == true) { - return - } - //订单为取消订单状态 - if(order?.status == SaleOrderStatusCancel.value) { - return ( - <> - { - priceList.map(item => { - return <>{showPrice(item, order?.the_previous_status)&&} - }) - } - - ) - } else { - return ( - <> - { - priceList.map(item => { - return <>{showPrice(item, order?.status)&&} - }) - } - - ) - } + return ( + <> + { + priceList.map(item => { + return <>{showPrice(item, order?.stage)&&} + }) + } + + ) }, [order]) + + //整理颜色 + const labAndRgbAndUrl = useCallback((item) => { + return {lab:{...item?.lab}, rgb:{...item?.rgb}, texturl_url: item?.texturl_url} + }, []) return ( - <> - {numText} + + {order?.type == 1?'退货信息':'退款信息'} { order?.list?.map(item => { return @@ -140,7 +142,9 @@ export default memo(({order, comfirm = false}:Param) => { {item?.product_colors?.map(colorItem => { return - + + + {colorItem.code + ' ' + colorItem.name} @@ -157,10 +161,11 @@ export default memo(({order, comfirm = false}:Param) => { }) } + 合计{numText} {priceConDom} - + ) }) \ No newline at end of file diff --git a/src/pages/salesAfter/components/orderState copy/index.module.scss b/src/pages/salesAfter/components/orderState copy/index.module.scss deleted file mode 100644 index 78bda44..0000000 --- a/src/pages/salesAfter/components/orderState copy/index.module.scss +++ /dev/null @@ -1,18 +0,0 @@ -.order_flow_state{ - display: flex; - align-items: center; - padding: 0 30px; - height: 116px; - background-color: #fff; - border-radius: 20px; - .order_flow_state_text{ - color: $color_main; - font-size:$font_size; - font-weight: 700; - } - .order_flow_state_desc{ - color: $color_font_three; - font-size: $font_size_medium; - margin-left: 50px; - } -} \ No newline at end of file diff --git a/src/pages/salesAfter/components/orderState copy/index.tsx b/src/pages/salesAfter/components/orderState copy/index.tsx deleted file mode 100644 index 58fec4d..0000000 --- a/src/pages/salesAfter/components/orderState copy/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { View } from "@tarojs/components" -import styles from './index.module.scss' - -export default ({ - state = '', - desc = '' -}) => { - return ( - - {state} - {desc} - - ) -} \ No newline at end of file diff --git a/src/pages/salesAfter/components/orderState/index.module.scss b/src/pages/salesAfter/components/orderState/index.module.scss index 90dbcbb..0cc33d6 100644 --- a/src/pages/salesAfter/components/orderState/index.module.scss +++ b/src/pages/salesAfter/components/orderState/index.module.scss @@ -15,7 +15,6 @@ } .order_status_item{ position: relative; - padding-left: 50px; &:nth-last-child(n+2) { padding-bottom: 30px; } @@ -44,6 +43,7 @@ .order_status_content{ display: flex; align-items: center; + padding: 0 30px; .order_status_title{ color: $color_font_two; font-size: $font_size; @@ -75,6 +75,24 @@ .order_status_des_select{ color: $color_font_one; } + .pay_time{ + height: 56px; + background: #f6f6f6; + border-radius: 20px; + color: #3C3C3C; + font-size: 24px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + margin-top: 20px; + text{ + font-size: 28px; + color: $color_main; + padding: 0 10px; + + } + } } .more{ width: 100%; @@ -102,4 +120,20 @@ top: -10px; right: -10px; } + .refresh{ + position: absolute; + top: 23px; + right: 20px; + display: flex; + color: #707070; + display: flex; + align-items: center; + + .mconfont{ + font-size: 30px; + } + .refresh_text{ + font-size: 23px; + } + } } \ No newline at end of file diff --git a/src/pages/salesAfter/components/orderState/index.tsx b/src/pages/salesAfter/components/orderState/index.tsx index 82ed17f..b08861d 100644 --- a/src/pages/salesAfter/components/orderState/index.tsx +++ b/src/pages/salesAfter/components/orderState/index.tsx @@ -1,42 +1,59 @@ import { Image, Text, View } from "@tarojs/components" -import { memo, useMemo, useState } from "react" +import { memo, useEffect, useMemo, useRef, useState } from "react" import styles from './index.module.scss' import classnames from "classnames"; import { formatDateTime, formatImgUrl } from "@/common/fotmat"; -import { PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum"; +import { ORDER_STATUS, PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum"; +import * as dayjs from 'dayjs' - - -type Param = { - list: { - status: string, - time: string, - tag: string, - desc: string - }[], - payment_method: 0|PAYMENT_METHOD_PARAM, - +type List = { + status: string, + time: string, + tag: string, + desc: string, + expire_time: string } -//支付方式枚举 -const { - PaymentMethodAccountPeriod, - PaymentMethodCashOnDelivery, -} = PAYMENT_METHOD +type Param = { + onRefresh?: () => void, + orderInfo?: { + logistics_details:List[], //订单状态列表 + payment_method: 0|PAYMENT_METHOD_PARAM, //支付方式 + status: number, //订单状态 + } +} -export default memo(({list = [], payment_method = 0}:Param) => { + + +export default memo(({orderInfo = {logistics_details: [],payment_method: 0, status: 0}, onRefresh}:Param) => { const [showMore, setShowMore] = useState(false) const changeMore = () => { setShowMore(() => !showMore) } const dataList = useMemo(() => { - return list.reverse() - }, [list]) + return orderInfo.logistics_details?orderInfo?.logistics_details.reverse():[] + }, [orderInfo.logistics_details]) + //订单状态枚举 + const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS + + //支付方式枚举 + const { + PaymentMethodAccountPeriod, + PaymentMethodCashOnDelivery, + } = PAYMENT_METHOD + + //获取预付款最后时间 + const endTime = useMemo(() => { + if(orderInfo.status == SaleorderstatusWaitingPrePayment.value && orderInfo.logistics_details.length > 0) { + return orderInfo.logistics_details[0].expire_time + } + return '' + }, [orderInfo]) return ( <> - {(dataList.length > 0)&& + {(dataList?.length > 0)&& {dataList.map((item, index) => {(dataList.length > 1)&&} @@ -44,9 +61,9 @@ export default memo(({list = [], payment_method = 0}:Param) => { {item.status} {formatDateTime(item.time)} - {/* {item.tag} */} {item.desc} + {(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&&} )} {(dataList.length > 2) && changeMore()}> @@ -54,10 +71,62 @@ export default memo(({list = [], payment_method = 0}:Param) => { } - {(payment_method == PaymentMethodAccountPeriod.value)&&} - {(payment_method == PaymentMethodCashOnDelivery.value)&&} + {(orderInfo.payment_method == PaymentMethodCashOnDelivery.value)&&} + {(orderInfo.payment_method == PaymentMethodAccountPeriod.value)&&} + {(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&& + + 刷新 + } } ) -}) \ No newline at end of file +}) + +//倒计时 +const CountDown = ({endTime = '', onFinish}:{endTime:string, onFinish?:() => void}) => { + const [showTime, setShowTime] = useState('') + const timeObj:any = useRef() + useEffect(() => { + if(endTime) { + clearInterval(timeObj.current) + timeObj.current = setInterval(() => { + count_down() + }, 1000) + } + return () => { + clearInterval(timeObj.current) + } + }, [endTime]) + const count_down = () => { + var startData = dayjs(); + var endDate = dayjs(endTime); + if(startData >= endDate) { + clearInterval(timeObj.current) + onFinish?.() + setShowTime(() => '00:00:00') + return false + } + var _dd = endDate.diff(startData,'day'); + var _hh = endDate.diff(startData,'hour'); + var _mm = endDate.diff(startData,'minute'); + var _ss = endDate.diff(startData,'second'); + // 转换 + var hh = _hh - (_dd*24); + var mm = _mm - (_hh*60); + var ss = _ss - (_mm*60); + // 格式化 + var DD = ('00'+_dd).slice(-2); + var HH = ('00'+hh).slice(-2); + var MM = ('00'+mm).slice(-2); + var SS = ('00'+ss).slice(-2); + setShowTime(() => ` ${HH}:${MM}:${SS}`) + } + return ( + <> + + 剩{showTime||'--:--:--'}支付关闭，订单自动取消 + + + ) +} \ No newline at end of file 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 aff512d..2796f66 100644 --- a/src/pages/salesAfter/index.tsx +++ b/src/pages/salesAfter/index.tsx @@ -3,18 +3,23 @@ import { EditSaleOrderRemarkApi, } from "@/api/order"; import { GetOrderPayApi } from "@/api/orderPay"; +import { SaleOrderOrderDetailApi } from "@/api/salesAfterOrder"; import { alert, goLink } from "@/common/common"; import { ORDER_STATUS } from "@/common/enum"; import { formatDateTime, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; +import AfterOrderBtns from "@/components/afterOrderBtns"; import OrderBtns from "@/components/orderBtns"; import SearchInput from "@/components/searchInput"; import { Image, Text, Textarea, View } from "@tarojs/components" 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 () => { @@ -27,10 +32,10 @@ import styles from './index.module.scss' //获取订单详情 const [orderDetail, setOrderDetail] = useState() //获取到的原始数据 - const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi() + const {fetchData: saleOrderOrderDetailData} = SaleOrderOrderDetailApi() const getSaleOrderPreView = async () => { if(orderId.current) { - let res = await getOrderFetchData({id: orderId.current}) + let res = await saleOrderOrderDetailData({id: orderId.current}) setOrderDetail(res.data) } Taro.stopPullDownRefresh() @@ -54,7 +59,8 @@ import styles from './index.module.scss' total_fabrics: orderDetail.total_fabrics, //面料数量 unit: orderDetail.sale_mode == 0?'条':'m', //单位 list: orderDetail.product_list, - status: orderDetail.status, //订单状态 + 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, //空差优惠 @@ -69,13 +75,7 @@ import styles from './index.module.scss' //获取底部按钮点击, 获取按钮状态 const orderStateClick = useCallback((val) => { - if(val == 1) { - //取消订单 - getSaleOrderPreView() - } - if(val == 2) { - - } + }, [orderDetail]) //页面下拉刷新 @@ -87,34 +87,61 @@ import styles from './index.module.scss' //按钮所需数据 const orderInfo = useMemo(() => { return { - status: orderDetail?.status, //订单状态 + stage: orderDetail?.stage, //售后订单状态 orderId: orderDetail?.id, settle_mode: orderDetail?.settle_mode, - actual_amount: orderDetail?.actual_amount, //实付金额 - wait_pay_amount: orderDetail?.wait_pay_amount, //待付金额 + type: orderDetail?.type, //退货or退款 + sale_mode: orderDetail?.sale_model, //订单类型 } }, [orderDetail]) //订单状态枚举 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)}/> ) } - const OrderDes = memo(({val = ''}:{val?:string}) => { + const OrderDes = memo(({orderInfo}:{orderInfo?:any}) => { //复制功能 - const clipboardData = () => { + const clipboardData = (val) => { Taro.setClipboardData({ data: val, success: function (res) { @@ -130,58 +157,57 @@ import styles from './index.module.scss' 订单信息 - RA-LY-2204240002 - clipboardData()}>复制 + {orderInfo?.return_order_no} + clipboardData(orderInfo?.return_order_no)}>复制 - XS-LY-2204210002 - clipboardData()}>复制 + {orderInfo?.order_no} + clipboardData(orderInfo?.order_no)}>复制 - - 其他问题 + + {orderInfo?.return_reason_name} + + + {orderInfo?.return_explain_name} - 板布疵点太多 + {orderInfo?.return_remark} + + + {orderInfo?.goods_status_name} - 2022-04-24 08:32:39 + {formatDateTime(orderInfo?.apply_time)} ) }) - const AfterSalePricture = memo(() => { + 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 ( - - - - - - - - - - - - - - - - - - + {urls?.map(item=> + + )} ) diff --git a/src/pages/salesAfterList/components/order/index.module.scss b/src/pages/salesAfterList/components/order/index.module.scss index ece7c61..2582b83 100644 --- a/src/pages/salesAfterList/components/order/index.module.scss +++ b/src/pages/salesAfterList/components/order/index.module.scss @@ -14,6 +14,8 @@ font-weight: 700; margin-left: 15px; font-size: $font_size; + width: 100px; + @include common_ellipsis(); } image{ width: 70px; @@ -26,7 +28,7 @@ font-size: $font_size_medium; color: $color_font_one; text-align: right; - padding-right: 30px; + padding-right: 10px; display: flex; justify-content: flex-end; align-items: center; @@ -69,23 +71,22 @@ .image{ width: 126px; height: 126px; - background: #e5ad3a; - border-radius: 20px 20px 0px 0px; + border-radius: 20px ; position: relative; image{ width: 100%; height: 100%; - border-radius: 20px 20px 0px 0px; + border-radius: 20px ; } .color_num { background: rgba(0,0,0, 0.5); - border-radius: 50px 0px 0px 0px; + border-radius: 36px 0px 20px 0px; font-size: $font_size_min; color: #fff; position: absolute; right:0; bottom:0; - padding: 5px 10px; + padding: 5px 10px 5px 15px; box-sizing: border-box; } } @@ -123,7 +124,7 @@ display: flex; background-color: #F6F6F6; padding: 20px; - margin-top: 20px; + margin: 20px 0; align-items: center; font-size: $font_size_medium; border-radius: 10px; diff --git a/src/pages/salesAfterList/components/order/index.tsx b/src/pages/salesAfterList/components/order/index.tsx index 30cf95b..7dd2ac9 100644 --- a/src/pages/salesAfterList/components/order/index.tsx +++ b/src/pages/salesAfterList/components/order/index.tsx @@ -1,6 +1,7 @@ import { goLink } from "@/common/common"; import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; -import OrderBtns from "@/components/orderBtns"; +import AfterOrderBtns from "@/components/afterOrderBtns"; +import LabAndImg from "@/components/LabAndImg"; import { useSelector } from "@/reducers/hooks"; import { Image, Text, View } from "@tarojs/components" import classnames from "classnames"; @@ -11,20 +12,21 @@ import styles from './index.module.scss' type Param = { value: { order_no: string, + return_order_no: string, sale_mode: number, sale_mode_name: string, - status_name: string, + stage_name: string, shipment_mode_name: string, product_list: any[], total_fabrics: number, total_colors: number, total_number: number, - status: 0, + stage: 0, id: number, - payment_method: number, //支付方式 - actual_amount: number, //实付金额 - wait_pay_amount: number //待付金额 - should_collect_order_id: number //应付单id + lab: {l:number, a:number, b:number}, + rgb: {r:number, g:number, b:number}, + texturl_url: string, + type: number //1 退货 2退款 }, onClickBtn?: (val:{status:number, orderInfo:Param['value']}) => void } @@ -47,13 +49,18 @@ export default memo(({value, onClickBtn}: Param) => { //按钮所需数据 const orderInfo = useMemo(() => { return { - status: value?.status, //订单状态 + stage: value?.stage, //订单状态 orderId: value?.id, - actual_amount: value?.actual_amount, //实付金额 - wait_pay_amount: value?.wait_pay_amount, //待付金额 + sale_mode: value?.sale_mode, //订单类型 + type: value?.type //退货or退款 } }, [value]) + //整理颜色 + const labAndRgbAndUrl = useMemo(() => { + return {lab:{...value?.lab}, rgb:{...value?.rgb}, texturl_url: value?.texturl_url} + }, [value]) + return ( goLink('/pages/salesAfter/index', {id: value?.id})}> @@ -62,21 +69,21 @@ export default memo(({value, onClickBtn}: Param) => { {userInfo?.adminUserInfo?.user_name} - 订单号：{value?.order_no} + 售后单号：{value?.return_order_no} - + goLink('/pages/salesAfter/index', {id: value?.id})}> {value?.sale_mode_name} {formatHashTag(value?.product_list[0].code, value?.product_list[0].name)} - {value?.status_name} + {value?.stage_name} - - {value?.product_list[0].product_colors[0].code} + + {value?.product_list[0].product_colors[0].code} {value?.product_list[0].product_colors.map((itemColor, index) => { @@ -98,11 +105,11 @@ export default memo(({value, onClickBtn}: Param) => { {`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`} - 已申请退款 - 订单号：LY2278204399678 + {value?.type == 1?'已申请退货':'已申请退款'} + 订单号：{value?.order_no} - + ) }) diff --git a/src/pages/salesAfterList/components/orderStatusTag/index.tsx b/src/pages/salesAfterList/components/orderStatusTag/index.tsx index 5664c7c..1a794dc 100644 --- a/src/pages/salesAfterList/components/orderStatusTag/index.tsx +++ b/src/pages/salesAfterList/components/orderStatusTag/index.tsx @@ -5,14 +5,14 @@ import styles from './index.module.scss' type Param = { - status?: 0|1|2 //0默认不处理, 1退款，2退货 + status?: 0|1|2 //0默认不处理, 1退货，2退款 } export default memo(({status = 0}:Param) => { return ( <> - {(status !== 0)&& + {(status !== 0)&& - { status == 1?'退款':'退货'} + { status == 1?'退货':'退款'} } ) 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 f5c59c7..9c4f25e 100644 --- a/src/pages/salesAfterList/index.tsx +++ b/src/pages/salesAfterList/index.tsx @@ -12,6 +12,8 @@ import { dataLoadingStatus, getFilterData } from "@/common/util" 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() @@ -40,7 +42,7 @@ export default () => { }, []) //获取订单列表 - const {fetchData: listFetchData, state:orderState} = GetOrderListApi() + const {fetchData: listFetchData, state:orderState} = GetSaleOrderListApi() const [orderData, setOrderData] = useState<{list:any[], total:number}>({list:[], total:0}) const getOrderList = async () => { let res = await listFetchData(getFilterData(searchField)) @@ -96,28 +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() + //退货物流 + } }, [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 ( @@ -132,8 +120,8 @@ export default () => { return })} + - ) } diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx index 859600b..6852d2e 100644 --- a/src/pages/user/index.tsx +++ b/src/pages/user/index.tsx @@ -67,7 +67,7 @@ const Header = memo((props:any) => { const {data} = props; let menu = [{ text: "待配布", icon: "icon-daipeibu", url: "/pages/orderList/index" }, { text: "待付款", icon: "icon-daifukuan", url: "/pages/orderList/index" }, { text: "待发货", icon: "icon-daifahuo", url: "/pages/orderList/index" }, { text: "已发货", icon: "icon-yifahuo", url: "/pages/orderList/index" }, - { text: "退款/售后", icon: "icon-a-tuikuanshouhou", url: "/pages/orderList/index" }]; + { text: "退款/售后", icon: "icon-a-tuikuanshouhou", url: "/pages/salesAfterList/index" }]; const { getPhoneNumber } = useLogin(); const mGetPhoneNumber = (ev)=>{ if(ev.detail?.code){ diff --git a/src/use/useHttp.ts b/src/use/useHttp.ts index 2663ab8..2f38afc 100644 --- a/src/use/useHttp.ts +++ b/src/use/useHttp.ts @@ -110,7 +110,7 @@ export const useRequest = (options:option = { success: false, // 请求是否成功 data: {}, msg: '', - loading: true, + loading: false, error: null, query: {}, filter: null, @@ -127,7 +127,7 @@ export const useRequest = (options:option = { const {login} = useLoginRequest() useEffect(() => { - console.log('变化::', state.loading) + console.log('变化1::', state.loading) }, [state.loading]) // 请求函数 const fetchData = async (sub_options?:any) => { diff --git a/src/use/useLogin.ts b/src/use/useLogin.ts index 08d80d2..7435b02 100644 --- a/src/use/useLogin.ts +++ b/src/use/useLogin.ts @@ -1,6 +1,6 @@ import useUserInfo from "./useUserInfo" import Taro, { useRouter } from "@tarojs/taro" -import { GetWxUserInfoApi, GetAdminUserInfoApi, GetPhoneNumberApi } from "@/api/user" +import { GetWxUserInfoApi, GetAdminUserInfoApi, GetPhoneNumberApi, BindingCompanyApi } from "@/api/user" import useLoginRequest from "./useLoginRequest" import { SHARE_SCENE } from "@/common/enum" import { GetShortCodeApi } from "@/api/share" @@ -93,6 +93,7 @@ export default () => { //获取手机号码 const {fetchData: fetchDataUserPhone} = GetPhoneNumberApi() + const {fetchData: fetchBindingCompany} = BindingCompanyApi() const getPhoneNumber = (code) => { return new Promise( async (reslove, reject) => { if(userInfo.adminUserInfo?.is_authorize_phone) { @@ -102,6 +103,7 @@ export default () => { const res = await fetchDataUserPhone({code}) if(res.success) { setUserInfo({...userInfo.userInfo, phone:res.data.phone_number}) + await fetchBindingCompany() getAdminUserInfo() reslove(res.data) } else { diff --git a/src/use/useUploadImage.ts b/src/use/useUploadImage.ts index 4b69a0d..86c698e 100644 --- a/src/use/useUploadImage.ts +++ b/src/use/useUploadImage.ts @@ -126,7 +126,7 @@ export default () => { const getWxPhoto = (cdn_upload_type: cdn_upload_type_Param) => { return new Promise((resolve, reject) => { Taro.chooseImage({ - count: 1, // 默认9 + count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: async function (res) {