订单售后v3
This commit is contained in:
parent
f92a8913f4
commit
51ff3eefe7
@ -38,4 +38,14 @@ export const GetSaleOrderListApi = () => {
|
||||
url: `/v1/mall/returnApplyOrder`,
|
||||
method: "get",
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 物流上传
|
||||
*/
|
||||
export const ReturnApplyLogisticsApi = () => {
|
||||
return useRequest({
|
||||
url: `/v1/mall/returnApplyOrder/upload`,
|
||||
method: "put",
|
||||
})
|
||||
}
|
||||
@ -4,13 +4,13 @@
|
||||
// export const BASE_URL = `http://10.0.0.5:50001/lymarket`
|
||||
// export const BASE_URL = `http://192.168.0.89:40001/lymarket`
|
||||
// export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
|
||||
export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境
|
||||
// export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境
|
||||
// export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发
|
||||
// export const BASE_URL = `http://192.168.1.30:50001/lymarket` // 发
|
||||
// export const BASE_URL = `https://dev.zzfzyc.com/lymarket` // 开发环境
|
||||
// export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境
|
||||
// export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞
|
||||
// export const BASE_URL = `http://192.168.1.224:50002/lymarket` // 添
|
||||
export const BASE_URL = `http://192.168.1.224:50002/lymarket` // 添
|
||||
// export const BASE_URL = `http://192.168.1.15:50001/lymarket` // 杰
|
||||
|
||||
// CDN
|
||||
|
||||
@ -55,7 +55,7 @@ export default memo(({orderInfo, onClick}:Param) => {
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: [SaleOrderStatusWaitingDelivery.value], //申请退款按钮对应： 待发货
|
||||
value: [SaleOrderStatusWaitingDelivery.value, SaleOrderStatusTaking.value], //申请退款按钮对应： 待发货, 提货中
|
||||
label: '申请退款'
|
||||
},
|
||||
// {
|
||||
|
||||
36
src/components/textareaEnhance/index.module.scss
Normal file
36
src/components/textareaEnhance/index.module.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
43
src/components/textareaEnhance/index.tsx
Normal file
43
src/components/textareaEnhance/index.tsx
Normal file
@ -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 (
|
||||
<View className={styles.other_desc}>
|
||||
<View className={styles.title}>{title}</View>
|
||||
<View className={styles.textarea}>
|
||||
{descData.show&&<Textarea autoFocus value={descData.value} onBlur={() => toggleShowRealTextarea(false)} className={styles.textarea_con} cursorSpacing={100} maxlength={descData.count} onInput={(e) => getDesc(e)}></Textarea>||
|
||||
<View className={classnames(styles.textarea_con_pretend, descData.value&&styles.textarea_con_pretend_ed)} onClick={() => toggleShowRealTextarea(true)}>{descData.value||placeholder}</View>
|
||||
}
|
||||
<View className={styles.descDataNum}>{descData.number +'/'+ descData.count}</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
55
src/components/uploadImage/index.module.scss
Normal file
55
src/components/uploadImage/index.module.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
59
src/components/uploadImage/index.tsx
Normal file
59
src/components/uploadImage/index.tsx
Normal file
@ -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<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) {
|
||||
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 (
|
||||
<View className={styles.image_main}>
|
||||
{imageList.map((item, index) =>
|
||||
<View className={styles.ImgItem}>
|
||||
<Image mode="aspectFill" src={formatImgUrl(item)} onClick={showImage}></Image>
|
||||
<View onClick={() => delImage(index)} className={classnames(styles.miconfont_close, 'iconfont icon-qingkong')}></View>
|
||||
</View>)}
|
||||
<View className={styles.uploadImg } onClick={uploadImage}>
|
||||
<Text className={classnames(styles.miconfont, 'iconfont icon-saomazhifu')}></Text>
|
||||
<Text className={styles.uploadText}>上传照片</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
export default PictureItem
|
||||
@ -59,60 +59,8 @@
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.uploadImg{
|
||||
width: 202px;
|
||||
height: 150px;
|
||||
background: #f0f0f0;
|
||||
border: 2px dashed #cccccc;
|
||||
margin-left: 20px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
.miconfont{
|
||||
font-size: 50px;
|
||||
}
|
||||
.uploadText{
|
||||
font-size: 26px;
|
||||
color: $color_font_three;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.ImgItem{
|
||||
width: 202px;
|
||||
height: 150px;
|
||||
background: #f0f0f0;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
&:nth-child(1) {
|
||||
margin-left: 50px;
|
||||
}
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.miconfont_close{
|
||||
width: 43px;
|
||||
height: 43px;
|
||||
background-color: #ccc;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -10px;
|
||||
text-align: center;
|
||||
line-height: 43px;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
}
|
||||
.upload_image{
|
||||
flex:1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,23 +1,20 @@
|
||||
import { Image, ScrollView, Text, Textarea, View } from "@tarojs/components";
|
||||
import { Image, ScrollView, Text, View } from "@tarojs/components";
|
||||
import { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import classnames from "classnames";
|
||||
import styles from './index.module.scss'
|
||||
import { formatHashTag, formatImgUrl } from "@/common/fotmat";
|
||||
import Counter from "@/components/counter";
|
||||
import ReasonPopup from "./components/reasonPopup";
|
||||
import OtherReason from "./components/otherReason";
|
||||
import Taro, { useDidShow, useRouter } from "@tarojs/taro";
|
||||
import useUploadCDNImg from "@/use/useUploadImage";
|
||||
import { useDidShow, useRouter } from "@tarojs/taro";
|
||||
import { GetSaleOrderDetailApi } from "@/api/order";
|
||||
import KindList from "./components/kindList"
|
||||
import { ReturnApplyOrderApi } from "@/api/salesAfterOrder";
|
||||
import { alert, goLink } from "@/common/common";
|
||||
import UploadImage from "@/components/uploadImage"
|
||||
import TextareaEnhance from "@/components/textareaEnhance";
|
||||
|
||||
type ReasonParam = 1|2|3 //1 退货原因 2 货物状况 3 退货说明
|
||||
export default () => {
|
||||
|
||||
|
||||
|
||||
useDidShow(() => {
|
||||
getSaleOrderPreView()
|
||||
})
|
||||
@ -178,11 +175,13 @@ export default () => {
|
||||
</View>
|
||||
<View className={styles.returnSaleInput_item}>
|
||||
<View className={styles.title}>拍照上传</View>
|
||||
<PictureItem onChange={getImageList}/>
|
||||
|
||||
<View className={styles.upload_image}>
|
||||
<UploadImage onChange={getImageList}/>
|
||||
</View>
|
||||
</View>
|
||||
<TextareaEnhance onChange={getOtherReason} title='其他说明'/>
|
||||
</View>
|
||||
<OtherReason onChange={getOtherReason}/>
|
||||
|
||||
</View>
|
||||
</ScrollView>
|
||||
<View className="common_safe_area_y"></View>
|
||||
@ -196,45 +195,4 @@ export default () => {
|
||||
<ReasonPopup show={showReason.show} onClose={closeReason} status={showReason.status}/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
//图片列表
|
||||
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) {
|
||||
setImageLise([...imageList, res.url])
|
||||
}
|
||||
}
|
||||
|
||||
//删除图片
|
||||
const delImage = (index) => {
|
||||
imageList.splice(index,1)
|
||||
setImageLise(() => [...imageList])
|
||||
}
|
||||
|
||||
//监听上传的图片变化
|
||||
useEffect(() => {
|
||||
onChange?.(imageList||[])
|
||||
}, [imageList])
|
||||
|
||||
return (
|
||||
<>
|
||||
{imageList.map((item, index) =>
|
||||
<View className={styles.ImgItem}>
|
||||
<Image mode="aspectFill" src={formatImgUrl(item)} ></Image>
|
||||
<View onClick={() => delImage(index)} className={classnames(styles.miconfont_close, 'iconfont icon-qingkong')}></View>
|
||||
</View>)}
|
||||
<View className={styles.uploadImg } onClick={uploadImage}>
|
||||
<Text className={classnames(styles.miconfont, 'iconfont icon-saomazhifu')}></Text>
|
||||
<Text className={styles.uploadText}>上传照片</Text>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
})
|
||||
}
|
||||
@ -16,6 +16,7 @@ import UseLogin from "@/use/useLogin"
|
||||
import { formatHashTag, formatPriceDiv } from "@/common/fotmat";
|
||||
import { debounce, getFilterData } from "@/common/util";
|
||||
import LabAndImg from "@/components/LabAndImg";
|
||||
import VirtualList from '@tarojs/components/virtual-list'
|
||||
|
||||
|
||||
|
||||
@ -123,11 +124,14 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
|
||||
|
||||
//计数组件
|
||||
const getInputValue = (num, item) => {
|
||||
item.count = parseFloat(num)
|
||||
if(num == 0) item.show = false
|
||||
setList([...list])
|
||||
console.log(num)
|
||||
item.count = parseFloat(num)
|
||||
if(num == 0) item.show = false
|
||||
setList([...list])
|
||||
console.log(num)
|
||||
|
||||
}
|
||||
|
||||
|
||||
const onAdd = (item) => {
|
||||
item.show = true
|
||||
item.count = selectList[selectIndex].defaultNum
|
||||
@ -198,10 +202,41 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
|
||||
return <View className={styles.priceText}><Text>¥</Text>{price}<Text> /{selectList[selectIndex].eunit}</Text></View>
|
||||
}, [selectIndex])
|
||||
|
||||
//虚拟滚动
|
||||
const Rows = memo(({id, index, style, data}:any) => {
|
||||
let item = data[index]
|
||||
return (
|
||||
<View className={styles.item} key={item.id}>
|
||||
<View className={styles.item_color}>
|
||||
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
|
||||
</View>
|
||||
<View className={styles.item_con}>
|
||||
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
|
||||
<View className={styles.num}>
|
||||
{formatPrice(item)}
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.btn_con}>
|
||||
{!item.show&&<View className={styles.btn} onClick={() => onAdd(item)}>添加</View>
|
||||
||<View className={styles.btn_count}>
|
||||
<Counter
|
||||
onBlue={(e) => 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}
|
||||
/>
|
||||
</View>}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<View className={styles.shop_cart_main}>
|
||||
|
||||
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()} >
|
||||
<View className={styles.popup_con}>
|
||||
<View className={styles.header}>{title}</View>
|
||||
@ -227,39 +262,52 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
|
||||
<View className={styles.product_color_con}>
|
||||
{(list.length <= 0 && colorState.loading)&&<LoadingCard/>}
|
||||
{(list.length > 0&& !colorState.loading)&&
|
||||
|
||||
<InfiniteScroll moreStatus={false}>
|
||||
<View className={styles.color_con}>
|
||||
{list.map(item => {
|
||||
return <View className={styles.item} key={item.id}>
|
||||
<View className={styles.item_color}>
|
||||
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
|
||||
</View>
|
||||
<View className={styles.item_con}>
|
||||
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
|
||||
<View className={styles.num}>
|
||||
{formatPrice(item)}
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.btn_con}>
|
||||
{!item.show&&<View className={styles.btn} onClick={() => onAdd(item)}>添加</View>
|
||||
||<View className={styles.btn_count}>
|
||||
<Counter
|
||||
onBlue={(e) => 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}
|
||||
/>
|
||||
</View>}
|
||||
</View>
|
||||
</View>
|
||||
})}
|
||||
</View>
|
||||
</InfiniteScroll>}
|
||||
// <InfiniteScroll moreStatus={false}>
|
||||
// <View className={styles.color_con}>
|
||||
// {list.map(item => {
|
||||
// return <View className={styles.item} key={item.id}>
|
||||
// <View className={styles.item_color}>
|
||||
// <LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
|
||||
// </View>
|
||||
// <View className={styles.item_con}>
|
||||
// <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
|
||||
// <View className={styles.num}>
|
||||
// {formatPrice(item)}
|
||||
// </View>
|
||||
// </View>
|
||||
// <View className={styles.btn_con}>
|
||||
// {!item.show&&<View className={styles.btn} onClick={() => onAdd(item)}>添加</View>
|
||||
// ||<View className={styles.btn_count}>
|
||||
// <Counter
|
||||
// onBlue={(e) => 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}
|
||||
// />
|
||||
// </View>}
|
||||
// </View>
|
||||
// </View>
|
||||
// })}
|
||||
// </View>
|
||||
// </InfiniteScroll>}
|
||||
<View className={styles.color_con}>
|
||||
<VirtualList
|
||||
height={500} /* 列表的高度 */
|
||||
width='100%' /* 列表的宽度 */
|
||||
itemData={list} /* 渲染列表的数据 */
|
||||
itemCount={list.length} /* 渲染列表的长度 */
|
||||
itemSize={100} /* 列表单项的高度 */
|
||||
overscanCount={1}
|
||||
>
|
||||
{Rows}
|
||||
</VirtualList>
|
||||
<View className="common_safe_area_y"></View>
|
||||
</View>}
|
||||
|
||||
{(list.length <= 0 && !colorState.loading)&&<View className={styles.noData}>暂无此商品</View>}
|
||||
</View>
|
||||
<View className={styles.buy_btn}>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,57 @@
|
||||
import { memo } from "react";
|
||||
import Popup from "@/components/popup";
|
||||
import TextareaEnhance from "@/components/textareaEnhance";
|
||||
import { ScrollView, Text, View } from "@tarojs/components";
|
||||
import { memo, useCallback, useState } from "react";
|
||||
import ReasonPopup from "../reasonPopup";
|
||||
import styles from './index.module.scss'
|
||||
import classnames from "classnames";
|
||||
|
||||
type Param = {
|
||||
show?: true|false,
|
||||
onClose?: () => void
|
||||
}
|
||||
export default memo(({show, onClose}:Param) => {
|
||||
|
||||
|
||||
const getOtherReason = useCallback(() => {
|
||||
|
||||
}, [])
|
||||
|
||||
const onSubmit = (val) => {
|
||||
|
||||
}
|
||||
|
||||
//显示说明
|
||||
const [showReason, setShowReason] = useState(false)
|
||||
const closeReason = useCallback(() => {
|
||||
setShowReason(false)
|
||||
}, [])
|
||||
|
||||
const onShowReason = () => {
|
||||
setShowReason(true)
|
||||
}
|
||||
|
||||
export default memo(() => {
|
||||
return (
|
||||
<>
|
||||
123123
|
||||
<Popup show={show} title="申请退款" onClose={onClose} >
|
||||
<View className={styles.apply_after_sales_con}>
|
||||
<View className={styles.returnSaleInput_item}>
|
||||
<View className={styles.title}>退款说明</View>
|
||||
<View className={styles.select} onClick={() => onShowReason()}>
|
||||
<Text>请选择</Text>
|
||||
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
|
||||
</View>
|
||||
</View>
|
||||
<TextareaEnhance onChange={getOtherReason} title='备注' placeholder="请输入退款备注"/>
|
||||
<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>
|
||||
</View>
|
||||
</Popup>
|
||||
<ReasonPopup show={showReason} onClose={closeReason} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
27
src/pages/order/components/reasonPopup/index.module.scss
Normal file
27
src/pages/order/components/reasonPopup/index.module.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
37
src/pages/order/components/reasonPopup/index.tsx
Normal file
37
src/pages/order/components/reasonPopup/index.tsx
Normal file
@ -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 (
|
||||
<Popup showIconButton={false} show={show} title="退款说明" onClose={onClose} >
|
||||
<View className={styles.reason_return_con}>
|
||||
<View className={styles.reason_title}><Text>退款说明</Text></View>
|
||||
<ScrollView scrollY className={styles.reason_scroll}>
|
||||
<View className={styles.reason_list}>
|
||||
<View className={styles.reason_item}>完好无损带原标签</View>
|
||||
<View className={styles.reason_item}>完好无损带原标签</View>
|
||||
<View className={styles.reason_item}>完好无损带原标签</View>
|
||||
<View className={styles.reason_item}>完好无损带原标签</View>
|
||||
<View className={styles.reason_item}>完好无损带原标签</View>
|
||||
<View className={styles.reason_item}>完好无损带原标签</View>
|
||||
<View className={styles.reason_item}>完好无损带原标签</View>
|
||||
<View className={styles.reason_item}>完好无损带原标签</View>
|
||||
<View className={styles.reason_item}>完好无损带原标签</View>
|
||||
<View className={styles.reason_item}>完好无损带原标签</View>
|
||||
<View className={styles.reason_item}>完好无损带原标签</View>
|
||||
<View className={styles.reason_item}>完好无损带原标签</View>
|
||||
<View className={styles.reason_item}>完好无损带原标签</View>
|
||||
<View className={styles.reason_item}>完好无损带原标签</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</Popup>
|
||||
)
|
||||
})
|
||||
@ -1,18 +1,24 @@
|
||||
import Popup from "@/components/popup"
|
||||
import { Textarea, View } from "@tarojs/components"
|
||||
import { useCallback, useState } from "react"
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type Param = {
|
||||
onBlur?: (val:any) => void
|
||||
onSave?: (val: string) => void
|
||||
defaultValue?: string
|
||||
}
|
||||
export default ({onBlur, onSave}:Param) => {
|
||||
export default ({onBlur, onSave, defaultValue = ''}:Param) => {
|
||||
const [descData, setDescData] = useState({
|
||||
number: 0,
|
||||
value: '',
|
||||
count: 200
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
getDesc(defaultValue)
|
||||
}, [defaultValue])
|
||||
|
||||
const getDesc = useCallback((e) => {
|
||||
let value = e.detail.value
|
||||
let res = value
|
||||
|
||||
@ -15,6 +15,7 @@ import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
|
||||
import classnames from "classnames";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import AddressInfoDetail from "./components/addressInfoDetail";
|
||||
import ApplyRefund from "./components/applyRefund";
|
||||
import KindList from "./components/kindList";
|
||||
import OrderState from "./components/orderState";
|
||||
import Payment from "./components/payment";
|
||||
@ -149,7 +150,10 @@ import styles from './index.module.scss'
|
||||
}else if(val == 2) {
|
||||
//待付款
|
||||
toPay()
|
||||
} else if(val == 3) {
|
||||
setRefundShow(true)
|
||||
}
|
||||
|
||||
}, [orderDetail])
|
||||
|
||||
//页面下拉刷新
|
||||
@ -189,6 +193,12 @@ import styles from './index.module.scss'
|
||||
getSaleOrderPreView()
|
||||
}, [orderDetail])
|
||||
|
||||
//退款申请
|
||||
const [refundShow, setRefundShow] = useState(false)
|
||||
const applyRefundClose = useCallback(() => {
|
||||
setRefundShow(false)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<View className={styles.order_main}>
|
||||
<OrderState orderInfo={orderDetail} onRefresh={refresh}/>
|
||||
@ -224,10 +234,10 @@ import styles from './index.module.scss'
|
||||
<View className="common_safe_area_y"></View>
|
||||
</View> }
|
||||
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
|
||||
<Remark onSave={(e) => getRemark(e)}/>
|
||||
<Remark onSave={(e) => getRemark(e)} defaultValue={orderDetail?.remark}/>
|
||||
</Popup>
|
||||
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={orderDetail} />
|
||||
|
||||
<ApplyRefund show={refundShow} onClose={applyRefundClose}/>
|
||||
<View className="common_safe_area_y"></View>
|
||||
</View>
|
||||
)
|
||||
|
||||
@ -1,30 +1,69 @@
|
||||
import { AFTER_ORDER_STATUS } from "@/common/enum";
|
||||
import { Text, View } from "@tarojs/components"
|
||||
import classnames from "classnames";
|
||||
import {memo} from "react";
|
||||
import {memo, useMemo} from "react";
|
||||
import styles from './index.module.scss'
|
||||
|
||||
export default memo(({return_address = '', return_phone = ''}:{return_address:string, return_phone: string}) => {
|
||||
type Param = {
|
||||
return_address?:string,
|
||||
return_phone?: string,
|
||||
onLogistics?: (val: number) => void,
|
||||
stage?: number
|
||||
}
|
||||
export default memo(({return_address = '', return_phone = '', onLogistics, stage}:Param) => {
|
||||
const {
|
||||
ReturnStageApplying,
|
||||
ReturnStageWaitCheck,
|
||||
ReturnStageChecked,
|
||||
ReturnStageReturned,
|
||||
ReturnStageCancel,
|
||||
ReturnStageQualityCheckPendingRefund,
|
||||
ReturnStageServiceOrderPendingRefund,
|
||||
ReturnStageRejected
|
||||
} = AFTER_ORDER_STATUS
|
||||
|
||||
//是否显示地址
|
||||
const showAddress = useMemo(() => {
|
||||
return stage != ReturnStageApplying.value
|
||||
}, [])
|
||||
|
||||
//上传物流
|
||||
const upLogistics = useMemo(() => {
|
||||
return stage == ReturnStageWaitCheck.value
|
||||
}, [stage])
|
||||
|
||||
//查看物流
|
||||
const showLogistics = useMemo(() => {
|
||||
return (stage == ReturnStageChecked.value || stage == ReturnStageQualityCheckPendingRefund.value)
|
||||
}, [stage])
|
||||
|
||||
|
||||
return (
|
||||
<View className={styles.address_main}>
|
||||
<View className={styles.address_title_tag}>
|
||||
<Text className={classnames(styles.miconfont, 'iconfont icon-zhuyi')}></Text>
|
||||
请按以下退货地址寄回货物并提供退货物流信息
|
||||
</View>
|
||||
<View className={styles.order_address} >
|
||||
<View className={classnames(styles.order_address_icon, 'iconfont','icon-fahuo')}></View>
|
||||
<View className={styles.order_address_text_con}>
|
||||
<View className={styles.order_address_text_title}>
|
||||
<Text className={classnames(styles.address_text, styles.address_text_no)}>{return_address}</Text>
|
||||
</View>
|
||||
<View className={styles.order_address_text_name}>
|
||||
<Text>管理员</Text>
|
||||
<Text>{return_phone}</Text>
|
||||
{/* <View className={styles.updateBtn}>
|
||||
上传物流
|
||||
</View> */}
|
||||
<>
|
||||
{showAddress&&<View className={styles.address_main}>
|
||||
<View className={styles.address_title_tag}>
|
||||
<Text className={classnames(styles.miconfont, 'iconfont icon-zhuyi')}></Text>
|
||||
请按以下退货地址寄回货物并提供退货物流信息
|
||||
</View>
|
||||
<View className={styles.order_address} >
|
||||
<View className={classnames(styles.order_address_icon, 'iconfont','icon-fahuo')}></View>
|
||||
<View className={styles.order_address_text_con}>
|
||||
<View className={styles.order_address_text_title}>
|
||||
<Text className={classnames(styles.address_text, styles.address_text_no)}>{return_address}</Text>
|
||||
</View>
|
||||
<View className={styles.order_address_text_name}>
|
||||
<Text>管理员</Text>
|
||||
<Text>{return_phone}</Text>
|
||||
{upLogistics&&<View className={styles.updateBtn} onClick={() => onLogistics?.(1)}>
|
||||
上传物流
|
||||
</View>}
|
||||
{showLogistics&&<View className={styles.updateBtn} onClick={() => onLogistics?.(2)}>
|
||||
查看物流
|
||||
</View>}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>}
|
||||
</>
|
||||
)
|
||||
})
|
||||
146
src/pages/salesAfter/components/applyRecord/index.module.scss
Normal file
146
src/pages/salesAfter/components/applyRecord/index.module.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
124
src/pages/salesAfter/components/applyRecord/index.tsx
Normal file
124
src/pages/salesAfter/components/applyRecord/index.tsx
Normal file
@ -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<any>() //获取到的原始数据
|
||||
const {fetchData: saleOrderOrderDetailData} = SaleOrderOrderDetailApi()
|
||||
const getSaleOrderPreView = async () => {
|
||||
if(id) {
|
||||
let res = await saleOrderOrderDetailData({id: id})
|
||||
setOrderDetail(res.data)
|
||||
}
|
||||
Taro.stopPullDownRefresh()
|
||||
}
|
||||
//格式化数据格式
|
||||
const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
|
||||
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 (
|
||||
<>
|
||||
<Popup show={show} title="申请记录" onClose={onClose}>
|
||||
{formatDetailOrder&&<View className={styles.apply_record_main}>
|
||||
<View className={styles.kind_number}><Text>{numText}</Text></View>
|
||||
<ScrollView scrollY className={styles.apply_record_scroll}>
|
||||
<View className={styles.orders_list_con}>
|
||||
{
|
||||
formatDetailOrder?.list?.map(item => {
|
||||
return <View key={item.product_code} className={styles.order_list}>
|
||||
<View className={styles.order_list_title}>
|
||||
<View className={styles.tag}>{formatDetailOrder.sale_mode_name}</View>
|
||||
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
|
||||
<View className={styles.num}>共{item?.product_colors.length}种</View>
|
||||
</View>
|
||||
<View className={styles.order_list_scroll}>
|
||||
{item?.product_colors?.map(colorItem => {
|
||||
return <View key={colorItem.id} className={styles.order_list_item}>
|
||||
<View className={styles.order_list_item_img}>
|
||||
<LabAndImg value={labAndRgbAndUrl(colorItem)}/>
|
||||
</View>
|
||||
<View className={styles.order_list_item_con}>
|
||||
<View className={styles.order_list_item_des}>
|
||||
<View className={styles.order_list_item_title}>{colorItem.code + ' ' + colorItem.name}</View>
|
||||
<View className={styles.order_list_item_price}>¥{standardPrice(colorItem.sale_price)}</View>
|
||||
</View>
|
||||
<View className={styles.order_list_item_count}>
|
||||
<View className={styles.count_num}>×{formatCount(colorItem)}<text>{formatDetailOrder.unit}</text></View>
|
||||
<View className={styles.count_price}><text>¥</text>{formatPriceDiv(colorItem.estimate_amount).toLocaleString()}</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
})
|
||||
}
|
||||
<View className={styles.order_total}>
|
||||
<Text>申请条数</Text>
|
||||
<Text>×{orderDetail?.total_number}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>}
|
||||
</Popup>
|
||||
</>
|
||||
)
|
||||
})
|
||||
@ -45,18 +45,18 @@ export default memo(({order, comfirm = false}:Param) => {
|
||||
return `${order?.total_fabrics}种面料，${order?.total_colors}种颜色，共${order?.total_number}${order?.unit}`
|
||||
}, [order])
|
||||
|
||||
const {
|
||||
SaleOrderStatusBooking, // 待接单
|
||||
SaleOrderStatusArranging, // 配布中
|
||||
SaleOrderStatusArranged, // 已配布
|
||||
SaleOrderStatusWaitingPayment, // 待付款
|
||||
SaleOrderStatusWaitingDelivery, // 待发货
|
||||
SaleOrderStatusWaitingReceipt, // 待收货
|
||||
SaleOrderStatusAlreadyReceipt, // 已收货
|
||||
SaleOrderStatusComplete, // 已完成
|
||||
SaleOrderStatusRefund, // 已退款
|
||||
SaleOrderStatusCancel, // 已取消
|
||||
} = ORDER_STATUS
|
||||
// const {
|
||||
// SaleOrderStatusBooking, // 待接单
|
||||
// SaleOrderStatusArranging, // 配布中
|
||||
// SaleOrderStatusArranged, // 已配布
|
||||
// SaleOrderStatusWaitingPayment, // 待付款
|
||||
// SaleOrderStatusWaitingDelivery, // 待发货
|
||||
// SaleOrderStatusWaitingReceipt, // 待收货
|
||||
// SaleOrderStatusAlreadyReceipt, // 已收货
|
||||
// SaleOrderStatusComplete, // 已完成
|
||||
// SaleOrderStatusRefund, // 已退款
|
||||
// SaleOrderStatusCancel, // 已取消
|
||||
// } = ORDER_STATUS
|
||||
|
||||
//金额列表枚举
|
||||
const priceList = [
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
70
src/pages/salesAfter/components/returnLogistics/index.tsx
Normal file
70
src/pages/salesAfter/components/returnLogistics/index.tsx
Normal file
@ -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 (
|
||||
<>
|
||||
<Popup show={show} title="上传物流" onClose={onClose}>
|
||||
<View className={styles.logistics_main}>
|
||||
<View className={styles.logistics_image}>
|
||||
<Text className={styles.title_desc}>上传附件：</Text>
|
||||
<View className={styles.upload_image}>
|
||||
<UploadImage onChange={getImageList}/>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.logistics_desc}>
|
||||
<TextareaEnhance onChange={getOtherReason} title="备注：" placeholder="请输入备注信息"/>
|
||||
</View>
|
||||
<View className={styles.btns_two}>
|
||||
<View className={styles.verify_btn } onClick={() => onSubmitEven()}>保存</View>
|
||||
</View >
|
||||
</View>
|
||||
</Popup>
|
||||
</>
|
||||
)
|
||||
})
|
||||
@ -15,9 +15,11 @@ import Taro, {useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
|
||||
import classnames from "classnames";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState, memo } from "react";
|
||||
import AddressInfoDetail from "./components/addressInfoDetail";
|
||||
import ApplyRecord from "./components/applyRecord";
|
||||
import ContentBox from "./components/contentBox";
|
||||
import KindList from "./components/kindList";
|
||||
import OrderState from "./components/orderState";
|
||||
import ReturnLogistics from "./components/returnLogistics";
|
||||
import styles from './index.module.scss'
|
||||
|
||||
export default () => {
|
||||
@ -73,13 +75,7 @@ import styles from './index.module.scss'
|
||||
|
||||
//获取底部按钮点击, 获取按钮状态
|
||||
const orderStateClick = useCallback((val) => {
|
||||
if(val == 1) {
|
||||
//取消订单
|
||||
getSaleOrderPreView()
|
||||
}
|
||||
if(val == 2) {
|
||||
|
||||
}
|
||||
|
||||
}, [orderDetail])
|
||||
|
||||
//页面下拉刷新
|
||||
@ -102,16 +98,42 @@ import styles from './index.module.scss'
|
||||
//订单状态枚举
|
||||
const {SaleOrderStatusCancel} = ORDER_STATUS
|
||||
|
||||
//物流显示
|
||||
const [logisticsShow, setLogisticsShow] = useState(false)
|
||||
const onShowLogistics = useCallback((val) => {
|
||||
if(val == 1) {
|
||||
setLogisticsShow(true)
|
||||
} else {
|
||||
const list = orderDetail?.fabric_piece_accessory_url.map(item => {
|
||||
return formatImgUrl(item)
|
||||
})
|
||||
Taro.previewImage({
|
||||
current: list[0], // 当前显示
|
||||
urls: list // 需要预览的图片http链接列表
|
||||
})
|
||||
}
|
||||
}, [orderDetail])
|
||||
const onCloseLogistics = useCallback(() => setLogisticsShow(false), [])
|
||||
//物流成功上传
|
||||
const logisticsSuccess = useCallback(() => {
|
||||
getSaleOrderPreView()
|
||||
}, [])
|
||||
|
||||
//显示生气记录
|
||||
const [applyRecord, setApplyRecord] = useState(false)
|
||||
|
||||
return (
|
||||
<View className={styles.order_main}>
|
||||
<OrderState orderInfo={orderDetail}/>
|
||||
<AddressInfoDetail return_address={orderDetail?.return_address} return_phone={orderDetail?.return_phone}/>
|
||||
<AddressInfoDetail return_address={orderDetail?.return_address} return_phone={orderDetail?.return_phone} stage={orderDetail?.stage} onLogistics={onShowLogistics}/>
|
||||
<KindList order={formatPreViewOrderMemo}/>
|
||||
<OrderDes orderInfo={orderDetail}/>
|
||||
{(orderDetail?.status != SaleOrderStatusCancel.value)&&<View className={styles.submit_order}>
|
||||
<AfterOrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
|
||||
</View>}
|
||||
<AfterSalePricture urls={orderDetail?.fabric_piece_accessory_url}/>
|
||||
<ReturnLogistics show={logisticsShow} id={orderDetail?.return_apply_order_id} onClose={onCloseLogistics} onSubmit={logisticsSuccess}/>
|
||||
<ApplyRecord show={applyRecord} id={orderDetail?.id} onClose={() => setApplyRecord(false)}/>
|
||||
<View className="common_safe_area_y"></View>
|
||||
</View>
|
||||
)
|
||||
@ -145,12 +167,18 @@ import styles from './index.module.scss'
|
||||
<View className={styles.order_num_btn} onClick={() => clipboardData(orderInfo?.order_no)}>复制</View>
|
||||
</View>
|
||||
</SearchInput>
|
||||
<SearchInput showBorder={false} title='退货原因' height={50}>
|
||||
<Text>{orderInfo?.return_reason_name}</Text>
|
||||
</SearchInput>
|
||||
<SearchInput showBorder={false} title='退货说明' height={50}>
|
||||
<Text>{orderInfo?.return_explain_name}</Text>
|
||||
</SearchInput>
|
||||
<SearchInput showBorder={false} title='其它说明' height={50}>
|
||||
<Text>{orderInfo?.return_remark}</Text>
|
||||
</SearchInput>
|
||||
<SearchInput showBorder={false} title='货物状况' height={50}>
|
||||
<Text>{orderInfo?.goods_status_name}</Text>
|
||||
</SearchInput>
|
||||
<SearchInput showBorder={false} title='申请时间' height={50}>
|
||||
<Text>{formatDateTime(orderInfo?.apply_time)}</Text>
|
||||
</SearchInput>
|
||||
@ -158,12 +186,20 @@ import styles from './index.module.scss'
|
||||
)
|
||||
})
|
||||
|
||||
const AfterSalePricture = memo(({urls}:{urls: string[]}) => {
|
||||
const AfterSalePricture = memo(({urls = []}:{urls: string[]}) => {
|
||||
|
||||
const showList = useMemo(() => {
|
||||
let res = urls.map(item => {
|
||||
return formatImgUrl(item)
|
||||
})
|
||||
return res
|
||||
}, [urls])
|
||||
|
||||
//预览图片
|
||||
const showImage = () => {
|
||||
Taro.previewImage({
|
||||
current: formatImgUrl(''), // 当前显示
|
||||
urls: [formatImgUrl('')] // 需要预览的图片http链接列表
|
||||
current: showList[0], // 当前显示
|
||||
urls: showList // 需要预览的图片http链接列表
|
||||
})
|
||||
}
|
||||
return (
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 (
|
||||
<>
|
||||
<Popup show={show} title="上传物流" onClose={onClose}>
|
||||
<View className={styles.logistics_main}>
|
||||
<View className={styles.logistics_image}>
|
||||
<Text className={styles.title_desc}>上传附件：</Text>
|
||||
<View className={styles.upload_image}>
|
||||
<UploadImage onChange={getImageList}/>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.logistics_desc}>
|
||||
<TextareaEnhance onChange={getOtherReason} title="备注：" placeholder="请输入备注信息"/>
|
||||
</View>
|
||||
<View className={styles.btns_two}>
|
||||
<View className={styles.verify_btn } onClick={() => onSubmitEven()}>保存</View>
|
||||
</View >
|
||||
</View>
|
||||
</Popup>
|
||||
</>
|
||||
)
|
||||
})
|
||||
@ -13,6 +13,7 @@ import OrderStatusList from "./components/orderStatusList"
|
||||
import Payment from "../order/components/payment"
|
||||
import { AFTER_ORDER_STATUS } from "@/common/enum"
|
||||
import { GetSaleOrderListApi } from "@/api/salesAfterOrder"
|
||||
import ReturnLogistics from "./components/returnLogistics"
|
||||
|
||||
export default () => {
|
||||
const {checkLogin} = useLogin()
|
||||
@ -97,30 +98,14 @@ export default () => {
|
||||
//监听点击的按钮
|
||||
const clickOrderBtn = useCallback(({status, orderInfo}) => {
|
||||
if(status == 2) {
|
||||
//去支付
|
||||
setPayOrderInfo({orderId:orderInfo.should_collect_order_id, payment_method:orderInfo.payment_method})
|
||||
toPay()
|
||||
} else {
|
||||
getOrderList()
|
||||
//退货物流
|
||||
|
||||
}
|
||||
}, [orderData])
|
||||
|
||||
|
||||
//去付款
|
||||
const [payOrderInfo, setPayOrderInfo] = useState<any>()
|
||||
const [payMentShow, setPayMentShow] = useState(false)
|
||||
const toPay = () => {
|
||||
setPayMentShow(true)
|
||||
}
|
||||
//关闭支付弹窗
|
||||
const closePayShow = useCallback(() => {
|
||||
setPayMentShow(() => false)
|
||||
}, [])
|
||||
//支付成功
|
||||
const onPaySuccess = useCallback(() => {
|
||||
getOrderList()
|
||||
closePayShow()
|
||||
}, [])
|
||||
//物流显示
|
||||
const [logisticsShow, setLogisticsShow] = useState(false)
|
||||
const onCloseLogistics = useCallback(() => setLogisticsShow(false), [])
|
||||
|
||||
|
||||
return (
|
||||
@ -135,8 +120,8 @@ export default () => {
|
||||
return <View key={item.id} className={styles.order_item_con}> <Order value={item} onClickBtn={clickOrderBtn}/></View>
|
||||
})}
|
||||
</InfiniteScroll>
|
||||
<ReturnLogistics show={logisticsShow} onClose={onCloseLogistics}/>
|
||||
</View>
|
||||
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={payOrderInfo}/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user