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

订单售后v3

Browse Source
This commit is contained in:
cheng
2022-06-16 20:30:38 +08:00
parent d6bb1d1e8a
commit bd04a6d31b
22 changed files with 487 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/applyAfterSales/components/kindList/index.module.scss
+64
View File
@@ -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: 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: 216px;
height: 64px;
background-color: #ECF5FF;
border-radius: 40px 0px 16px 0px;
padding: 0 20px;
display: flex;
align-items: center;
}
}
}
}
src/pages/applyAfterSales/components/kindList/index.tsx
+43
View File
@@ -0,0 +1,43 @@
import { formatHashTag, formatImgUrl } from "@/common/fotmat";
import Counter from "@/components/counter";
import { Image, Text, View } from "@tarojs/components";
import { 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, //订单状态
}
export default memo(({order}:{order:OrderParam}) => {
//对应数量
const formatCount = useCallback((item) => {
return (order?.sale_mode == 0? item.roll : Number(item.length / 100)) + order?.unit
}, [order])
return (
<View className={styles.apply_after_sales_list}>
{order?.list?.map(item => <View className={styles.apply_after_sales_item}>
<View className={styles.apply_after_sales_title}>
<View className={styles.tag}>{order.sale_mode_name}</View>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
</View>
<View className={styles.color_list}>
{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>
</View>)}
</View>
</View>)}
</View>
)
})
src/pages/applyAfterSales/index.module.scss
+3 -64
View File
@@ -92,6 +92,9 @@
margin-bottom: 20px;
position: relative;
border-radius: 10px;
&:nth-child(1) {
margin-left: 50px;
}
image{
width: 100%;
height: 100%;
@@ -114,70 +117,6 @@
}
}
.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: 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;
}
}
}
}
.btns_con{
src/pages/applyAfterSales/index.tsx
+76 -38
View File
@@ -1,24 +1,77 @@
import { Image, ScrollView, Text, Textarea, View } from "@tarojs/components";
import { memo, useCallback, useMemo, useState } from "react";
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import classnames from "classnames";
import styles from './index.module.scss'
import { formatImgUrl } from "@/common/fotmat";
import { formatHashTag, 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 Taro, { useDidShow, useRouter } from "@tarojs/taro";
import useUploadCDNImg from "@/use/useUploadImage";
import { GetSaleOrderDetailApi } from "@/api/order";
import KindList from "./components/kindList"
type ReasonParam = 1|2|3 //1 退货原因 2 货物状况 3 退货说明
export default () => {
const [showDesc, setShowDesc] = useState(true)
const router = useRouter()
const orderId = useRef<number>(Number(router.params.id))
useDidShow(() => {
getSaleOrderPreView()
})
//获取订单数据
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])
//对应数量
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) => {
@@ -27,35 +80,10 @@ export default () => {
return (
<View className={styles.apply_after_sales_main}>
<View className={styles.apply_after_sales_con}>
<View className={styles.kind_number}><Text>2种面料，3种颜色，共6条</Text></View>
<View className={styles.kind_number}><Text>{dataCount}</Text></View>
<ScrollView scrollY className={styles.scroll}>
<View className={styles.scroll_con}>
<View className={styles.apply_after_sales_list}>
{new Array(5).fill(5).map(item => <View className={styles.apply_after_sales_item}>
<View className={styles.apply_after_sales_title}>
<View className={styles.tag}>大货</View>
<View className={styles.title}>0770# 21S单面平纹(食毛)</View>
</View>
<View className={styles.color_list}>
<View className={styles.color_item}>
<View className={styles.image}><Image src={formatImgUrl('')}/></View>
<View className={styles.name_and_number}><Text>1# 薄荷绿</Text><Text>x1</Text></View>
<View className={styles.btn_count}>
<Counter/>
</View>
</View>
<View className={styles.color_item}>
<View className={styles.image}><Image src={formatImgUrl('')}/></View>
<View className={styles.name_and_number}><Text>1# 薄荷绿</Text><Text>x1</Text></View>
<View className={styles.btn_count}>
<Counter/>
</View>
</View>
</View>
</View>)}
</View>
<KindList order={formatDetailOrder}/>
<View className={styles.returnSaleInput}>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}>退货原因</View>
@@ -103,16 +131,26 @@ export default () => {
//图片列表
const PictureItem = memo(() => {
const {getWxPhoto} = useUploadCDNImg()
//图片
const [imageList, setImageLise] = useState<string[]>([])
const uploadImage = async () => {
let res = await getWxPhoto('after-sale')
let res:any = await getWxPhoto('after-sale')
if(res.code == 200) {
setImageLise([...imageList, res.url])
}
}
//删除图片
const delImage = (index) => {
}
return (
<>
<View className={styles.ImgItem}>
<Image mode="aspectFill" src={formatImgUrl('')} ></Image>
<View className={classnames(styles.miconfont_close, 'iconfont icon-qingkong')}></View>
</View>
{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>