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

订单售后_售后详情

Browse Source
This commit is contained in:
cheng
2022-06-20 20:31:17 +08:00
parent 6e08416ba0
commit 09e61e0779
22 changed files with 802 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/applyAfterSales/index.tsx
+2 -1
View File
@@ -11,7 +11,7 @@ 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";
import { alert, goLink } from "@/common/common";
type ReasonParam = 1|2|3 //1 退货原因 2 货物状况 3 退货说明
export default () => {
@@ -133,6 +133,7 @@ export default () => {
let res = await fetchDataReturnApply(submitData)
if(res.success) {
alert.success('申请成功')
goLink('/pages/salesAfterList/index',{}, 'reLaunch')
} else {
alert.error('申请失败')
}
src/pages/order/components/applyRefund/index.module.scss
View File
src/pages/order/components/applyRefund/index.tsx
+9
View File
@@ -0,0 +1,9 @@
import { memo } from "react";
export default memo(() => {
return (
<>
123123
</>
)
})
src/pages/order/index.tsx
+1 -3
View File
@@ -149,9 +149,6 @@ import styles from './index.module.scss'
}else if(val == 2) {
//待付款
toPay()
} else if (val == 5) {
console.log('aa:::',orderDetail)
goLink('/pages/applyAfterSales/index',{id:orderDetail.id})
}
}, [orderDetail])
@@ -230,6 +227,7 @@ import styles from './index.module.scss'
<Remark onSave={(e) => getRemark(e)}/>
</Popup>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={orderDetail} />
<View className="common_safe_area_y"></View>
</View>
)
src/pages/salesAfter/components/addressInfoDetail/index.module.scss
+21 -2
View File
@@ -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;
src/pages/salesAfter/components/addressInfoDetail/index.tsx
+10 -6
View File
@@ -3,21 +3,25 @@ import classnames from "classnames";
import {memo} from "react";
import styles from './index.module.scss'
export default memo(({defaultValue}:{defaultValue:string}) => {
export default memo(({return_address = '', return_phone = ''}:{return_address:string, return_phone: string}) => {
return (
<View>
<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)}>{defaultValue}</Text>
<Text className={classnames(styles.address_text, styles.address_text_no)}>{return_address}</Text>
</View>
<View className={styles.order_address_text_name}>
<Text>管理员</Text>
<Text>13939399536</Text>
<View className={styles.updateBtn}>
<Text>{return_phone}</Text>
{/* <View className={styles.updateBtn}>
上传物流
</View>
</View> */}
</View>
</View>
</View>
src/pages/salesAfter/components/kindList/index.module.scss
+22 -5
View File
@@ -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;
src/pages/salesAfter/components/kindList/index.tsx
+46 -41
View File
@@ -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, //空差优惠
@@ -60,31 +62,43 @@ export default memo(({order, comfirm = false}:Param) => {
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 <EstimatedAmount number={formatPriceDiv(order.estimate_amount)} title="预估金额" />
}
//订单为取消订单状态
if(order?.status == SaleOrderStatusCancel.value) {
return (
<>
{
priceList.map(item => {
return <>{showPrice(item, order?.the_previous_status)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
})
}
</>
)
} else {
return (
<>
{
priceList.map(item => {
return <>{showPrice(item, order?.status)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
})
}
</>
)
}
return (
<>
{
priceList.map(item => {
return <>{showPrice(item, order?.stage)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
})
}
</>
)
}, [order])
//整理颜色
const labAndRgbAndUrl = useCallback((item) => {
return {lab:{...item?.lab}, rgb:{...item?.rgb}, texturl_url: item?.texturl_url}
}, [])
return (
<>
<View className={styles.orders_list_title}>{numText}</View>
<View className={styles.kindsList_main}>
<View className={styles.orders_list_con}>
<View className={styles.orders_return_title}>{order?.type == 1?'退货信息':'退款信息'}</View>
{
order?.list?.map(item => {
return <View key={item.product_code} className={styles.order_list}>
@@ -140,7 +142,9 @@ export default memo(({order, comfirm = false}:Param) => {
<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}></View>
<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>
@@ -157,10 +161,11 @@ export default memo(({order, comfirm = false}:Param) => {
</View>
})
}
<View className={styles.order_total}><Text>合计</Text><Text>{numText}</Text></View>
<View className={styles.order_estimated_amount}>
{priceConDom}
</View>
</View>
</>
</View>
)
})
src/pages/salesAfter/components/orderState copy/index.module.scss
-18
View File
@@ -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;
}
}
src/pages/salesAfter/components/orderState copy/index.tsx
-14
View File
@@ -1,14 +0,0 @@
import { View } from "@tarojs/components"
import styles from './index.module.scss'
export default ({
state = '',
desc = ''
}) => {
return (
<View className={styles.order_flow_state}>
<View className={styles.order_flow_state_text}>{state}</View>
<View className={styles.order_flow_state_desc}>{desc}</View>
</View>
)
}
src/pages/salesAfter/components/orderState/index.module.scss
+35
View File
@@ -43,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;
@@ -74,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%;
@@ -101,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;
}
}
}
src/pages/salesAfter/components/orderState/index.tsx
+95 -26
View File
@@ -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)&&<View className={styles.order_flow_state}>
{(dataList?.length > 0)&&<View className={styles.order_flow_state}>
<View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
{dataList.map((item, index) => <View className={styles.order_status_item}>
{(dataList.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
@@ -44,9 +61,9 @@ export default memo(({list = [], payment_method = 0}:Param) => {
<View className={styles.order_status_content}>
<View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.status}</View>
<View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{formatDateTime(item.time)}</View>
{/* <View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View> */}
</View>
<Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
{(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&&<CountDown onFinish={onRefresh} endTime={endTime}/>}
</View>)}
</View>
{(dataList.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
@@ -54,10 +71,62 @@ export default memo(({list = [], payment_method = 0}:Param) => {
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
</View>}
<View className={styles.image_tag}>
{(payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
{(payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
{(orderInfo.payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
{(orderInfo.payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
</View>
{(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&&<View className={styles.refresh} onClick={onRefresh}>
<Text className={classnames(styles.mconfont, 'iconfont icon-xianxiahuikuan')}></Text>
<Text className={classnames(styles.refresh_text)}>刷新</Text>
</View>}
</View>}
</>
)
})
})
//倒计时
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 (
<>
<View className={styles.pay_time}>
剩<Text>{showTime||'--:--:--'}</Text>支付关闭，订单自动取消
</View>
</>
)
}
src/pages/salesAfter/index.tsx
+28 -40
View File
@@ -3,9 +3,11 @@ 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"
@@ -28,10 +30,10 @@ import styles from './index.module.scss'
//获取订单详情
const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
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()
@@ -55,7 +57,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, //空差优惠
@@ -88,11 +91,11 @@ 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])
@@ -101,22 +104,22 @@ import styles from './index.module.scss'
return (
<View className={styles.order_main}>
<OrderState list={orderDetail?.logistics_details} payment_method={orderDetail?.payment_method}/>
<AddressInfoDetail defaultValue="广东省佛山市禅城区阿萨的飞机螺丝钉解放" />
<OrderState orderInfo={orderDetail}/>
<AddressInfoDetail return_address={orderDetail?.return_address} return_phone={orderDetail?.return_phone}/>
<KindList order={formatPreViewOrderMemo}/>
<OrderDes/>
<OrderDes orderInfo={orderDetail}/>
{(orderDetail?.status != SaleOrderStatusCancel.value)&&<View className={styles.submit_order}>
<OrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
<AfterOrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
</View>}
<AfterSalePricture/>
<AfterSalePricture urls={orderDetail?.fabric_piece_accessory_url}/>
<View className="common_safe_area_y"></View>
</View>
)
}
const OrderDes = memo(({val = ''}:{val?:string}) => {
const OrderDes = memo(({orderInfo}:{orderInfo?:any}) => {
//复制功能
const clipboardData = () => {
const clipboardData = (val) => {
Taro.setClipboardData({
data: val,
success: function (res) {
@@ -132,30 +135,30 @@ import styles from './index.module.scss'
<View className={styles.order_info_title}>订单信息</View>
<SearchInput showBorder={false} title='售后单号' height={50}>
<View className={styles.order_num}>
<Text>RA-LY-2204240002</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
<Text>{orderInfo?.return_order_no}</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData(orderInfo?.return_order_no)}>复制</View>
</View>
</SearchInput>
<SearchInput showBorder={false} title='订单号' height={50}>
<View className={styles.order_num}>
<Text>XS-LY-2204210002</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
<Text>{orderInfo?.order_no}</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData(orderInfo?.order_no)}>复制</View>
</View>
</SearchInput>
<SearchInput showBorder={false} title='退款说明' height={50}>
<Text>其他问题</Text>
<SearchInput showBorder={false} title='退货说明' height={50}>
<Text>{orderInfo?.return_explain_name}</Text>
</SearchInput>
<SearchInput showBorder={false} title='其它说明' height={50}>
<Text>板布疵点太多</Text>
<Text>{orderInfo?.return_remark}</Text>
</SearchInput>
<SearchInput showBorder={false} title='申请时间' height={50}>
<Text>2022-04-24 08:32:39</Text>
<Text>{formatDateTime(orderInfo?.apply_time)}</Text>
</SearchInput>
</View>
)
})
const AfterSalePricture = memo(() => {
const AfterSalePricture = memo(({urls}:{urls: string[]}) => {
//预览图片
const showImage = () => {
Taro.previewImage({
@@ -166,24 +169,9 @@ import styles from './index.module.scss'
return (
<ContentBox title="售后图片">
<View className={styles.after_sale_picture_list}>
<View className={styles.after_sale_picture_item} onClick={showImage}>
<Image src={formatImgUrl('')} />
</View>
<View className={styles.after_sale_picture_item} onClick={showImage}>
<Image src={formatImgUrl('')}/>
</View>
<View className={styles.after_sale_picture_item}>
<Image src={formatImgUrl('')}/>
</View>
<View className={styles.after_sale_picture_item}>
<Image src={formatImgUrl('')}/>
</View>
<View className={styles.after_sale_picture_item}>
<Image src={formatImgUrl('')}/>
</View>
<View className={styles.after_sale_picture_item}>
<Image src={formatImgUrl('')}/>
</View>
{urls?.map(item=> <View className={styles.after_sale_picture_item} onClick={showImage}>
<Image src={formatImgUrl(item)} />
</View>)}
</View>
</ContentBox>
)
src/pages/salesAfterList/components/order/index.module.scss
+4 -5
View File
@@ -71,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;
}
}
src/pages/salesAfterList/components/order/index.tsx
+20 -16
View File
@@ -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";
@@ -14,18 +15,17 @@ type Param = {
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
@@ -49,14 +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 //订单类型
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 (
<View className={styles.order_item}>
<View className={styles.header} onClick={() => goLink('/pages/salesAfter/index', {id: value?.id})}>
@@ -74,12 +78,12 @@ export default memo(({value, onClickBtn}: Param) => {
<View className={styles.product_title}>
<View className={styles.product_tag}>{value?.sale_mode_name}</View>
<View className={styles.product_name}>{formatHashTag(value?.product_list[0].code, value?.product_list[0].name)}</View>
<View className={styles.product_status}>{value?.status_name}</View>
<View className={styles.product_status}>{value?.stage_name}</View>
</View>
<View className={styles.product_list}>
<View className={styles.image}>
<Image src={formatImgUrl(value?.product_list[0].product_colors[0].texture_url)}/>
<View className={styles.color_num}>{value?.product_list[0].product_colors[0].code}</View>
<LabAndImg value={labAndRgbAndUrl}/>
<View className={styles.color_num}>{value?.product_list[0].product_colors[0].code}</View>
</View>
<View className={styles.color_list}>
{value?.product_list[0].product_colors.map((itemColor, index) => {
@@ -101,11 +105,11 @@ export default memo(({value, onClickBtn}: Param) => {
</View>
<View className={styles.color_count_num}>{`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`}</View>
<View className={styles.order_number}>
<Text>已申请退款</Text>
<Text>{value?.type == 1?'已申请退货':'已申请退款'}</Text>
<Text>订单号：{value?.order_no}</Text>
</View>
</View>
<OrderBtns orderInfo={orderInfo} onClick={orderBtnsClick}/>
<AfterOrderBtns orderInfo={orderInfo} onClick={orderBtnsClick}/>
</View>
)
})
src/pages/salesAfterList/components/orderStatusTag/index.tsx
+3 -3
View File
@@ -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)&&<View className={classnames(styles.tag, status == 1?styles.refund_tag :styles.saleReturn_tag)}>
{(status !== 0)&&<View className={classnames(styles.tag, status == 2?styles.refund_tag :styles.saleReturn_tag)}>
<View className={classnames(styles.miconfont, 'iconfont icon-yucunkuan')}></View>
<Text>{ status == 1?'退款':'退货'}</Text>
<Text>{ status == 1?'退货':'退款'}</Text>
</View>}
</>
)
src/pages/salesAfterList/index.tsx
+2
View File
@@ -100,6 +100,8 @@ export default () => {
//去支付
setPayOrderInfo({orderId:orderInfo.should_collect_order_id, payment_method:orderInfo.payment_method})
toPay()
} else {
getOrderList()
}
}, [orderData])