xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

订单售后v3

Browse Source
This commit is contained in:
cheng
2022-06-17 20:35:04 +08:00
parent bd04a6d31b
commit 6e08416ba0
16 changed files with 189 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/applyAfterSales/components/kindList/index.module.scss
+1 -1
View File
@@ -23,7 +23,7 @@
.color_item{
display: flex;
align-items: center;
margin: 20px 0;
margin: 30px 0;
}
.image{
width: 70px;
src/pages/applyAfterSales/components/kindList/index.tsx
+34 -6
View File
@@ -1,7 +1,8 @@
import { formatHashTag, formatImgUrl } from "@/common/fotmat";
import Counter from "@/components/counter";
import MCheckbox from "@/components/checkbox";
import { Image, Text, View } from "@tarojs/components";
import { memo, useCallback } from "react";
import { FC, memo, useCallback } from "react";
import styles from './index.module.scss'
type OrderParam = {
@@ -15,12 +16,36 @@ type OrderParam = {
status?: number, //订单状态
}
export default memo(({order}:{order:OrderParam}) => {
type Param = {
order: OrderParam,
onNumChange?: (val:any) => void
onSelectChange?: (val: {color_id:number, length: number, status: true|false}) => void
}
const kindeList:FC<Param> = 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 (
<View className={styles.apply_after_sales_list}>
{order?.list?.map(item => <View className={styles.apply_after_sales_item}>
@@ -32,12 +57,15 @@ export default memo(({order}:{order:OrderParam}) => {
{item.product_colors.map(colorItem => <View className={styles.color_item}>
<View className={styles.image}><Image src={formatImgUrl('')}/></View>
<View className={styles.name_and_number}><Text>{colorItem.code + ' ' + colorItem.name}</Text><Text>x {formatCount(colorItem)}</Text></View>
<View className={styles.btn_count}>
<Counter/>
</View>
{(order.sale_mode == 0)&&<View className={styles.btn_count}>
<Counter maxNum={colorItem.roll} onChange={getCounterChange(colorItem)}/>
</View>||
<MCheckbox status={item.select} onSelect={() => selectCallBack(colorItem)} onClose={() => colseCallBack(colorItem)}/>}
</View>)}
</View>
</View>)}
</View>
)
})
})
export default kindeList
src/pages/applyAfterSales/components/otherReason/index.tsx
+5 -1
View File
@@ -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) => {
src/pages/applyAfterSales/index.module.scss
+5 -4
View File
@@ -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;
@@ -101,16 +101,17 @@
border-radius: 10px;
}
.miconfont_close{
width: 30px;
height: 30px;
width: 43px;
height: 43px;
background-color: #ccc;
border-radius: 50%;
position: absolute;
right: -10px;
top: -10px;
text-align: center;
line-height: 30px;
line-height: 43px;
color: #fff;
font-size: 30px;
}
}
}
src/pages/applyAfterSales/index.tsx
+97 -18
View File
@@ -1,5 +1,5 @@
import { Image, ScrollView, Text, Textarea, View } from "@tarojs/components";
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import classnames from "classnames";
import styles from './index.module.scss'
import { formatHashTag, formatImgUrl } from "@/common/fotmat";
@@ -10,17 +10,33 @@ import Taro, { useDidShow, useRouter } from "@tarojs/taro";
import useUploadCDNImg from "@/use/useUploadImage";
import { GetSaleOrderDetailApi } from "@/api/order";
import KindList from "./components/kindList"
import { ReturnApplyOrderApi } from "@/api/salesAfterOrder";
import { alert } from "@/common/common";
type ReasonParam = 1|2|3 //1 退货原因 2 货物状况 3 退货说明
export default () => {
const router = useRouter()
const orderId = useRef<number>(Number(router.params.id))
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: 1,
roll: 0,
roll_list: [],
sale_order_id: orderId.current
})
//获取订单数据
const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi()
@@ -33,8 +49,9 @@ export default () => {
//监听获取到的数据
useEffect(() => {
if(orderDetail)
if(orderDetail) {
formatData()
}
}, [orderDetail])
//格式化数据格式
@@ -59,31 +76,83 @@ export default () => {
return `${formatDetailOrder.total_fabrics}种面料，${formatDetailOrder.total_colors}种颜色，共${formatDetailOrder.total_number}条`
}
}, [formatDetailOrder])
//对应数量
const formatCount = useCallback((item) => {
return (formatDetailOrder?.sale_mode == 0? item.roll : Number(item.length / 100)) + formatDetailOrder?.unit
}, [formatDetailOrder])
//退货选择弹窗
const [showReason, setShowReason] = useState<{show:true|false, status:ReasonParam}>({show:false, status:1})
const closeReason = useCallback(() => setShowReason({...showReason, show:false}), [])
const onShowReason = (status) => setShowReason({...showReason, status, show:true})
//底部按钮
const onSubmit = (val) => {
//面料数据
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('申请成功')
} else {
alert.error('申请失败')
}
console.log('提交：：',submitData)
}
//底部按钮
const onSubmit = (val) => {
if(val == 2) {
onSubmitData()
}
}
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}>
<KindList order={formatDetailOrder}/>
<KindList order={formatDetailOrder} onNumChange={getNumChange} onSelectChange={getSelectChange}/>
<View className={styles.returnSaleInput}>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}>退货原因</View>
@@ -108,11 +177,11 @@ export default () => {
</View>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}>拍照上传</View>
<PictureItem/>
<PictureItem onChange={getImageList}/>
</View>
</View>
<OtherReason/>
<OtherReason onChange={getOtherReason}/>
</View>
</ScrollView>
<View className="common_safe_area_y"></View>
@@ -129,10 +198,13 @@ export default () => {
}
//图片列表
const PictureItem = memo(() => {
type ImageParam = {
onChange?:(val: string[]) => void
}
const PictureItem:FC<ImageParam> = memo(({onChange}) => {
const {getWxPhoto} = useUploadCDNImg()
const [imageList, setImageLise] = useState<string[]>([])
//上传图片
const uploadImage = async () => {
let res:any = await getWxPhoto('after-sale')
if(res.code == 200) {
@@ -142,8 +214,15 @@ const PictureItem = memo(() => {
//删除图片
const delImage = (index) => {
imageList.splice(index,1)
setImageLise(() => [...imageList])
}
//监听上传的图片变化
useEffect(() => {
onChange?.(imageList||[])
}, [imageList])
return (
<>
{imageList.map((item, index) =>