联动组件优化

This commit is contained in:
czm 2022-07-13 14:52:40 +08:00
parent e770e7a61b
commit 33016fca85
5 changed files with 334 additions and 85 deletions

View File

@ -11,8 +11,8 @@
// export const BASE_URL = `https://dev.zzfzyc.com/lymarket` // 开发环境
// export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境
// export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞
// export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添
export const BASE_URL = `http://192.168.1.42:50001/lymarket` // 杰
export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添
// export const BASE_URL = `http://192.168.1.42:50001/lymarket` // 杰
// CDN
// 生成密钥

View File

@ -11,14 +11,14 @@
}
.selectName{
font-size: 26px;
padding: 10px;
padding: 20px 10px;
font-weight: 400;
color: #ABABAB;
}
.tips{
color: #ABABAB;
border-bottom: 0;
padding: 10px;
padding: 20px 10px;
}
.select_bottom {
border-bottom: 3px solid #007AFF;

View File

@ -17,36 +17,22 @@ type ReasonInfoParam = {
defaultValue?: number, //默认选中
dataLength?: number, //可显示的数据列数
}
export default memo(({show = false, onClose, title = '', list = [], onSelect, onHeaderSelect, defaultValue, dataLength = 2}: ReasonInfoParam) => {
export default memo(({show = false, onClose, title = '', list = [], onSelect, onHeaderSelect, defaultValue, dataLength = 1}: ReasonInfoParam) => {
const [initList, setInitList] = useState<typeof list>([])
const [initList, setInitList] = useState([])
//退货原因
const idRef = useRef(0)
const {fetchData: fetchDataReturnReason} = ReturnReasonApi()
const getReturnReason = async () => {
let res = await fetchDataReturnReason()
setInitList(res.data?.list||[])
}
useEffect(() => {
getReturnReason()
}, [])
//售后退货说明
const {fetchData: fetchDataReturnExplain} = ReturnExplainApi()
const getReturnExplain = async () => {
let res = await fetchDataReturnExplain({return_reason: idRef.current})
setInitList(res.data?.list||[])
}
setInitList(list)
}, [list])
const [selectIndex, setSelectIndex] = useState(1)
const [headerList, setHeaderList] = useState<{id: number, name: string}[]>([])
const onSelectData = (item) => {
if(selectIndex <= dataLength) {
idRef.current = item.id
if(selectIndex < dataLength) getReturnExplain()
headerList[selectIndex - 1] = {id:item.id, name:item.name}
onSelect?.({data:headerList, index:selectIndex})
setSelectIndex(selectIndex == dataLength?dataLength:selectIndex + 1)
setHeaderList((e) => [...e])
if(selectIndex == dataLength) onSelect?.(headerList)
if(selectIndex == dataLength) onClose?.()
}
}
@ -54,13 +40,9 @@ export default memo(({show = false, onClose, title = '', list = [], onSelect, on
let list = headerList.slice(0, index + 1)
setSelectIndex(index + 1)
setHeaderList(list)
onHeaderSelect?.({val, index})
if(index == 0) {
getReturnReason()
}
onHeaderSelect?.({data:val, index: index + 1})
}
return (
<Popup showIconButton={false} show={show} title={title} onClose={onClose} >
<View className={styles.reason_return_con}>

View File

@ -0,0 +1,254 @@
import { Image, ScrollView, Text, View } from "@tarojs/components";
import { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import classnames from "classnames";
import styles from './index.module.scss'
import ReasonPopup from "./components/reasonPopup";
import { useDidShow, useRouter } from "@tarojs/taro";
import { GetSaleOrderDetailApi } from "@/api/order";
import KindList from "./components/kindList"
import CutKindList from "./components/cutkindList"
import { ReturnApplyOrderApi, ReturnExplainApi, ReturnGoodsStatusApi, ReturnReasonApi } from "@/api/salesAfterOrder";
import { alert, goLink } from "@/common/common";
import UploadImage from "@/components/uploadImage"
import TextareaEnhance from "@/components/textareaEnhance";
import useLogin from "@/use/useLogin";
enum returnStatus {
return_reason = 1, //原因
goods_status = 2, //状况
return_explain = 3, //说明
}
export default () => {
useLogin()
useDidShow(() => {
getSaleOrderPreView()
})
const router = useRouter()
const orderId = useRef<number>(Number(router.params.id))
//需要提交的数据
const [submitData, setSubmitData] = useState<any>({
fabric_piece_accessory_url: [],
goods_status: 0,
reason_describe: '',
return_explain: 0,
return_reason: 0,
roll: 0,
roll_list: [],
sale_order_id: orderId.current
})
//获取订单数据
const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
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<any>() //格式化后的数据
const formatData = () => {
setFormatDetailOrder({
sale_mode: orderDetail.sale_mode,
sale_mode_name: orderDetail.sale_mode_name,
total_colors: orderDetail.total_colors, //总颜色数量
total_number: orderDetail.total_number, //总数量
total_fabrics: orderDetail.total_fabrics, //面料数量
unit: orderDetail.sale_mode == 0?'条':'m', //单位
list: orderDetail.product_list,
status: orderDetail.status, //订单状态
})
}
//数据总量
const dataCount = useMemo(() => {
if(formatDetailOrder) {
return `${formatDetailOrder.total_fabrics}种面料,${formatDetailOrder.total_colors}种颜色,共${formatDetailOrder.total_number}`
}
}, [formatDetailOrder])
//面料数据
let roll_list = useRef({})
//大货时获取计步器数据
const getNumChange = useCallback((val) => {
if(parseInt(val.number) > 0) {
roll_list.current[val.color_id] = {product_color_id: val.color_id, product_roll: val.number, sale_order_detail_id: val.sale_order_detail_id}
} else {
delete roll_list.current[val.color_id]
}
let count = 0
Object.values(roll_list.current).map((item: any) => {
count += item.product_roll
})
setSubmitData((e) => ({...e, roll_list:Object.values(roll_list.current), roll: count}))
}, [])
//散剪和剪板
const getSelectChange = useCallback((val) => {
if(val.status) {
roll_list.current[val.color_id] = {product_color_id: val.color_id, product_roll: val.length, sale_order_detail_id: val.sale_order_detail_id}
} else {
delete roll_list.current[val.color_id]
}
let count = 0
Object.values(roll_list.current).map((item: any) => {
count += item.product_roll
})
setSubmitData((e) => ({...e, roll_list:Object.values(roll_list.current), roll: count}))
}, [])
//获取图片列表
const getImageList = useCallback((list) => {
setSubmitData((e) => ({...e, fabric_piece_accessory_url:list}))
}, [])
//其他说明
const getOtherReason = useCallback((val) => {
setSubmitData((e) => ({...e, reason_describe: val}))
}, [])
//提交数据
const {fetchData: fetchDataReturnApply} = ReturnApplyOrderApi()
const onSubmitData = async () => {
if(submitData.roll_list.length <= 0) return alert.error('请选择退货颜色')
console.log('submitData::',submitData)
let res = await fetchDataReturnApply(submitData)
if(res.success) {
alert.success('申请成功')
goLink('/pages/salesAfterList/index',{}, 'reLaunch')
} else {
alert.error(res.msg)
}
}
//底部按钮
const onSubmit = (val) => {
if(val == 2) {
onSubmitData()
}
}
//退货选择弹窗
const [showReason, setShowReason] = useState(false)
const closeReason = useCallback(() => setShowReason(false), [])
const onShowReason = (status) => {
if(status == returnStatus.return_reason) {
getReturnReason()
} else if (status == returnStatus.goods_status) {
getReturnGoodsStatus()
} else {
getReturnExplain()
}
setShowReason(true)
}
console.log('aaa:', 123456789)
//请求获取到的数据
const [returnGoodsInfo, setReturnGoodsInfo] = useState<{title:string, list: any[], status: 1|2|3}>({title:'', list:[], status: returnStatus.goods_status})
//售后货物状况
const {fetchData: fetchDataGoodsStatus} = ReturnGoodsStatusApi()
const getReturnGoodsStatus = async () => {
let res = await fetchDataGoodsStatus()
setReturnGoodsInfo((e) => ({...e, title: '货物状况', list:res.data?.list||[], status:returnStatus.goods_status}))
}
//退货原因
const {fetchData: fetchDataReturnReason} = ReturnReasonApi()
const getReturnReason = async () => {
let res = await fetchDataReturnReason()
setReturnGoodsInfo((e) => ({...e, title: '退货原因', list:res.data?.list||[], status:returnStatus.return_reason}))
}
//售后退货说明
const {fetchData: fetchDataReturnExplain} = ReturnExplainApi()
const getReturnExplain = async () => {
let res = await fetchDataReturnExplain()
setReturnGoodsInfo((e) => ({...e, title: '退货说明', list:res.data?.list||[], status:returnStatus.return_explain}))
}
//选择列表返回的数据
const [returnObj, setReturnObj] = useState<{[val:number]:{name:string, id: number}}>({})
const onReturnSelect = useCallback((val) => {
let {id, name} = val
if(returnGoodsInfo.status == returnStatus.goods_status) {
setSubmitData((e) => ({...e, goods_status:id}))
setReturnObj(e => ({...e, [returnStatus.goods_status]:{name, id}}))
}
if(returnGoodsInfo.status == returnStatus.return_explain) {
setSubmitData((e) => ({...e, return_explain:id}))
setReturnObj(e => ({...e, [returnStatus.return_explain]:{name, id}}))
}
if(returnGoodsInfo.status == returnStatus.return_reason) {
setSubmitData((e) => ({...e, return_reason:id}))
setReturnObj(e => ({...e, [returnStatus.return_reason]:{name, id}}))
}
setShowReason(false)
}, [returnGoodsInfo])
return (
<View className={styles.apply_after_sales_main}>
<View className={styles.apply_after_sales_con}>
<View className={styles.kind_number}><Text>{dataCount}</Text></View>
<ScrollView scrollY className={styles.scroll}>
<View className={styles.scroll_con}>
{(orderDetail?.sale_mode == 0)&&<KindList order={formatDetailOrder} onNumChange={getNumChange} />||
<CutKindList order={formatDetailOrder} onSelectChange={getSelectChange}/>}
<View className={styles.returnSaleInput}>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}>退</View>
<View className={styles.select} onClick={() => onShowReason(returnStatus.return_reason)}>
<Text className={returnObj[returnStatus.return_reason]&&styles.selected}>{returnObj[returnStatus.return_reason]?.name||'请选择'}</Text>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
</View>
</View>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}></View>
<View className={styles.select} onClick={() => onShowReason(returnStatus.goods_status)}>
<Text className={returnObj[returnStatus.goods_status]&&styles.selected}>{returnObj[returnStatus.goods_status]?.name||'请选择'}</Text>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
</View>
</View>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}>退</View>
<View className={styles.select} onClick={() => onShowReason(returnStatus.return_explain)}>
<Text className={returnObj[returnStatus.return_explain]&&styles.selected}>{returnObj[returnStatus.return_explain]?.name||'请选择'}</Text>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
</View>
</View>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}></View>
<View className={styles.upload_image}>
<UploadImage onChange={getImageList}/>
</View>
</View>
<TextareaEnhance onChange={getOtherReason} title='其他说明'/>
</View>
</View>
</ScrollView>
<View className="common_safe_area_y"></View>
</View>
<View className={styles.btns_con}>
<View className={styles.btns_two}>
<View className={styles.rest_btn} onClick={() => onSubmit(1)}></View>
<View className={styles.verify_btn } onClick={() => onSubmit(2)}></View>
</View >
</View >
<ReasonPopup defaultValue={returnObj[returnGoodsInfo.status]?.id} show={showReason} onClose={closeReason} title={returnGoodsInfo.title} list={returnGoodsInfo.list} onSelect={onReturnSelect}/>
</View>
)
}

View File

@ -31,10 +31,10 @@ export default () => {
//需要提交的数据
const [submitData, setSubmitData] = useState<any>({
fabric_piece_accessory_url: [],
goods_status: 0,
reason_describe: '',
return_explain: 0,
return_reason: 0,
goods_status: '', //货物状况
reason_describe: '', //其他说明
return_explain: '', //退货说明
return_reason: '', //退货原因
roll: 0,
roll_list: [],
sale_order_id: orderId.current
@ -69,13 +69,15 @@ export default () => {
unit: orderDetail.sale_mode == 0?'条':'m', //单位
list: orderDetail.product_list,
status: orderDetail.status, //订单状态
av_return_roll: orderDetail.av_return_roll //可退条数
})
}
//数据总量
const dataCount = useMemo(() => {
if(formatDetailOrder) {
return `${formatDetailOrder.total_fabrics}种面料,${formatDetailOrder.total_colors}种颜色,共${formatDetailOrder.total_number}`
let total_number = formatDetailOrder.sale_mode == 0?formatDetailOrder.total_number + '条':(formatDetailOrder.total_number/100) + '米'
return `${formatDetailOrder.total_fabrics}种面料,${formatDetailOrder.total_colors}种颜色,共${total_number}`
}
}, [formatDetailOrder])
@ -140,64 +142,81 @@ export default () => {
//底部按钮
const onSubmit = (val) => {
if(val == 2) {
if(!submitData.return_explain) return alert.error('请填写其他说明')
onSubmitData()
}
}
//退货选择弹窗
//退货原因选择弹窗
const [showReason, setShowReason] = useState(false)
const closeReason = useCallback(() => setShowReason(false), [])
const onShowReason = (status) => {
if(status == returnStatus.return_reason) {
getReturnReason()
} else if (status == returnStatus.goods_status) {
getReturnGoodsStatus()
} else {
getReturnExplain()
}
const onShowReason = () => {
setShowReason(true)
}
console.log('aaa:', 123456789)
useEffect(() => {
getReturnReason()
}, [])
//请求获取到的数据
const [returnGoodsInfo, setReturnGoodsInfo] = useState<{title:string, list: any[], status: 1|2|3}>({title:'', list:[], status: returnStatus.goods_status})
//售后货物状况
const {fetchData: fetchDataGoodsStatus} = ReturnGoodsStatusApi()
const getReturnGoodsStatus = async () => {
let res = await fetchDataGoodsStatus()
setReturnGoodsInfo((e) => ({...e, title: '货物状况', list:res.data?.list||[], status:returnStatus.goods_status}))
}
const [returnGoodsInfo, setReturnGoodsInfo] = useState([])
//退货原因
const {fetchData: fetchDataReturnReason} = ReturnReasonApi()
const getReturnReason = async () => {
let res = await fetchDataReturnReason()
setReturnGoodsInfo((e) => ({...e, title: '退货原因', list:res.data?.list||[], status:returnStatus.return_reason}))
setReturnGoodsInfo((e) => (res.data?.list))
}
//售后退货说明
const {fetchData: fetchDataReturnExplain} = ReturnExplainApi()
const getReturnExplain = async () => {
let res = await fetchDataReturnExplain()
setReturnGoodsInfo((e) => ({...e, title: '退货说明', list:res.data?.list||[], status:returnStatus.return_explain}))
const getReturnExplain = async (id) => {
let res = await fetchDataReturnExplain({return_reason: id})
setReturnGoodsInfo((e) => (res.data?.list))
}
//选择列表返回的数据
const [returnObj, setReturnObj] = useState<{[val:number]:{name:string, id: number}}>({})
//退货原因选择列表返回的数据
const [returnObj, setReturnObj] = useState<any>([])
const onReturnSelect = useCallback((val) => {
let {id, name} = val
if(returnGoodsInfo.status == returnStatus.goods_status) {
setSubmitData((e) => ({...e, goods_status:id}))
setReturnObj(e => ({...e, [returnStatus.goods_status]:{name, id}}))
setReturnGoodsInfo((e) => [])
let res = val.data[val.data.length - 1]
if(val.index == 1) getReturnExplain(res.id)
if(val.index == 2) setReturnObj(val.data)
}, [])
const onHeaderSelect = useCallback((val) => {
setReturnGoodsInfo((e) => [])
if(val.index == 1) getReturnReason()
}, [])
//选择货物状况
const [showStatus, setShowStatus] = useState(false)
const [statusInfo, setStatusInfo] = useState<any>()
const [statusGoodsInfo, setStatusGoodsInfo] = useState([])
const {fetchData: fetchDataGoodsStatus} = ReturnGoodsStatusApi()
const getReturnGoodsStatus = async () => {
let res = await fetchDataGoodsStatus()
setStatusGoodsInfo((e) => (res.data?.list))
}
const onShowStatus = () => {
setShowStatus(() => true)
getReturnGoodsStatus()
}
const closeStatus = useCallback(() => {
setShowStatus(() => false)
}, [])
const onStatusSelect = useCallback((val) => {
let res = val.data[val.data.length - 1]
setStatusInfo(res)
}, [])
useEffect(() => {
if(returnObj.length > 0) {
submitData.return_reason = returnObj[0].id
submitData.return_explain = returnObj[1].id
}
if(returnGoodsInfo.status == returnStatus.return_explain) {
setSubmitData((e) => ({...e, return_explain:id}))
setReturnObj(e => ({...e, [returnStatus.return_explain]:{name, id}}))
if(statusInfo) {
submitData.goods_status = statusInfo.id
}
if(returnGoodsInfo.status == returnStatus.return_reason) {
setSubmitData((e) => ({...e, return_reason:id}))
setReturnObj(e => ({...e, [returnStatus.return_reason]:{name, id}}))
}
setShowReason(false)
}, [returnGoodsInfo])
setSubmitData(() => ({...submitData}))
}, [returnObj, statusInfo])
return (
<View className={styles.apply_after_sales_main}>
@ -210,22 +229,15 @@ export default () => {
<View className={styles.returnSaleInput}>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}>退</View>
<View className={styles.select} onClick={() => onShowReason(returnStatus.return_reason)}>
<Text className={returnObj[returnStatus.return_reason]&&styles.selected}>{returnObj[returnStatus.return_reason]?.name||'请选择'}</Text>
<View className={styles.select} onClick={onShowReason}>
<Text className={returnObj?.length > 0&&styles.selected}>{returnObj?.length > 0?(returnObj[0]?.name + '/' +returnObj[1]?.name):'请选择'}</Text>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
</View>
</View>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}></View>
<View className={styles.select} onClick={() => onShowReason(returnStatus.goods_status)}>
<Text className={returnObj[returnStatus.goods_status]&&styles.selected}>{returnObj[returnStatus.goods_status]?.name||'请选择'}</Text>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
</View>
</View>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}>退</View>
<View className={styles.select} onClick={() => onShowReason(returnStatus.return_explain)}>
<Text className={returnObj[returnStatus.return_explain]&&styles.selected}>{returnObj[returnStatus.return_explain]?.name||'请选择'}</Text>
<View className={styles.select} onClick={onShowStatus}>
<Text className={statusInfo?.name&&styles.selected}>{statusInfo?.name||'请选择'}</Text>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
</View>
</View>
@ -248,7 +260,8 @@ export default () => {
<View className={styles.verify_btn } onClick={() => onSubmit(2)}></View>
</View >
</View >
<ReasonPopup defaultValue={returnObj[returnGoodsInfo.status]?.id} show={showReason} onClose={closeReason} title={returnGoodsInfo.title} list={returnGoodsInfo.list} onSelect={onReturnSelect}/>
<ReasonPopup show={showReason} onClose={closeReason} title='退货原因' list={returnGoodsInfo} onHeaderSelect={onHeaderSelect} onSelect={onReturnSelect} dataLength={2}/>
<ReasonPopup show={showStatus} onClose={closeStatus} title='货物状况' list={statusGoodsInfo} onSelect={onStatusSelect} dataLength={1}/>
</View>
)
}