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

商城测试版v5

Browse Source
This commit is contained in:
cheng
2022-07-11 20:06:35 +08:00
parent 217d6bca43
commit 6f9dd5b838
25 changed files with 507 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/order/components/kindList/index.tsx
+10 -9
View File
@@ -69,7 +69,6 @@ export default memo(({order, comfirm = false}:Param) => {
label:'预估金额',
field: 'estimate_amount',
message: '预估金额按生产商定义的标准匹重计算，仅供参考。详细交易金额以出单为准！',
messageShow: false,
},
{
id:2,
@@ -77,7 +76,6 @@ export default memo(({order, comfirm = false}:Param) => {
label:'合计金额',
field: 'total_sale_price',
message: '包含空差的货款金额',
messageShow: false,
},
{
id:3,
@@ -85,7 +83,6 @@ export default memo(({order, comfirm = false}:Param) => {
label:'空差优惠',
field: 'total_weight_error_discount',
message: '扣除空差金额',
messageShow: false,
},
{
id:4,
@@ -93,7 +90,6 @@ export default memo(({order, comfirm = false}:Param) => {
label:'应付金额',
field: 'total_should_collect_money',
message: '扣除空差后的货款金额',
messageShow: false,
},
{
id:5,
@@ -101,14 +97,13 @@ export default memo(({order, comfirm = false}:Param) => {
label:'实付金额',
field: 'actual_amount',
message: '本单实付总金额',
messageShow: false,
}
]
//订单流程是否显示价格
const showPrice = (item) => {
if (item.id == 2) {
//合计金额 (剪板特殊请情况)
//合计金额 (剪板特殊情况)
return (item.value.includes(order.status)|| order.sale_mode == 1)
} else if (item.id == 3) {
//空差优惠只有大货才有
@@ -126,7 +121,7 @@ export default memo(({order, comfirm = false}:Param) => {
<>
{
priceList.map(item => {
return <>{showPrice(item)&&<EstimatedAmount messageShow={item.messageShow} key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} messageTitle={item.message} />}</>
return <>{showPrice(item)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} messageTitle={item.message} />}</>
})
}
</>
@@ -140,11 +135,17 @@ export default memo(({order, comfirm = false}:Param) => {
return<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />
}, [order])
//金额展示
//确认金额展示
const showPriceConDom = useMemo(() => {
return comfirm?comfirmPriceConDom:priceConDom
}, [order])
//颜色金额小计
const colorPrice = useCallback((item) => {
let res = item.total_sale_price||item.estimate_amount
return formatPriceDiv(res).toLocaleString('en', {minimumFractionDigits: 2})
},[order])
//散剪大约重量
const aboutWeight = useCallback((weight) => {
@@ -187,7 +188,7 @@ export default memo(({order, comfirm = false}:Param) => {
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×{formatCount(colorItem)}<text>{order.unit}</text></View>
<View className={styles.count_price}><text>¥</text>{formatPriceDiv(colorItem.estimate_amount).toLocaleString()}</View>
<View className={styles.count_price}><text>¥</text>{colorPrice(colorItem)}</View>
</View>
</View>
</View>
src/pages/order/components/returnRecord/index.module.scss
+160
View File
@@ -0,0 +1,160 @@
.returnRecord_main{
height: 70vh;
.order_item{
background-color: #fff;
border-radius: 20px;
padding: 20px;
box-sizing: border-box;
.header{
display: flex;
align-items: center;
.user{
display: flex;
align-items: center;
.name {
color: #000;
font-weight: 700;
margin-left: 15px;
font-size: $font_size;
width: 100px;
@include common_ellipsis();
}
image{
width: 70px;
height: 70px;
border-radius: 50%;
}
}
.order_con {
padding-left: 15px;
width: 100%;
.name {
color: #000;
font-weight: 700;
font-size: $font_size;
}
.order_num {
flex: 1;
font-size: $font_size_medium;
color: $color_font_one;
padding-right: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
.order_num_con{
flex:1;
}
.miconfont {
font-size: 20px;
}
}
}
.tag{
font-size: $font_size_min;
padding: 5px 15px;
background-color: $color_main;
color: #fff;
border-radius: 0px 20px 0px 20px;
}
}
.product_title{
display: flex;
align-items: center;
padding: 35px 0;
.product_tag{
background-color: #CDE5FF;
font-size: $font_size_min;
padding: 5px 10px;
color: $color_main;
border-radius: 6px;
}
.product_name{
flex:1;
font-size: $font_size;
font-weight: 700;
padding: 0 20px;
@include common_ellipsis()
}
.product_status{
font-size: $font_size;
color: $color_main;
}
}
.product_list{
display: flex;
.image{
width: 126px;
height: 126px;
border-radius: 20px ;
position: relative;
image{
width: 100%;
height: 100%;
border-radius: 20px ;
}
.color_num {
background: rgba(0,0,0, 0.5);
border-radius: 36px 0px 20px 0px;
font-size: $font_size_min;
color: #fff;
position: absolute;
right:0;
bottom:0;
padding: 5px 10px 5px 15px;
box-sizing: border-box;
}
}
.color_list{
flex:1;
padding-left: 30px;
.color_item{
display: flex;
justify-content: space-between;
font-size: $font_size_min;
color: $color_font_three;
align-items: center;
margin-bottom: 20px;
.color_title{
font-weight: 700;
font-size: $font_size;
color: #000;
}
.color_more{
color: $color_font_three;
}
}
}
}
.color_count_num{
font-size: $font_size_min;
color: $color_font_two;
background-color: #F6F6F6;
border-radius: 10px;
padding: 10px 22px;
margin-top: 20px;
}
.order_number{
display: flex;
background-color: #F6F6F6;
padding: 20px;
margin: 20px 0;
align-items: center;
font-size: $font_size_medium;
border-radius: 10px;
text{
&:nth-child(1) {
font-weight: 700;
color: $color_font_three;
border-right: 2px solid #CCCCCC;
padding-right: 20px;
}
&:nth-child(2) {
padding-left: 20px;
color: $color_font_one;
}
}
}
}
}
src/pages/order/components/returnRecord/index.tsx
+160
View File
@@ -0,0 +1,160 @@
import { GetSaleOrderListApi, ReturnRecordApi } from "@/api/salesAfterOrder";
import { goLink } from "@/common/common";
import { formatHashTag, formatPriceDiv } from "@/common/fotmat";
import { dataLoadingStatus, getFilterData } from "@/common/util";
import InfiniteScroll from "@/components/infiniteScroll";
import LabAndImg from "@/components/LabAndImg";
import Popup from "@/components/popup";
import OrderStatusTag from "@/pages/salesAfterList/components/orderStatusTag";
import { useSelector } from "@/reducers/hooks";
import { Image, Text, View } from "@tarojs/components";
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import classnames from "classnames";
import styles from './index.module.scss'
import { REFUND_STATUS_ORDER } from "@/common/enum";
type Param = {
show?: true|false,
onClose?: () => void,
onSubmit?: () => void,
id?: number
}
export default memo(({show, onClose, onSubmit, id}:Param) => {
//搜索参数
const searchField = useRef({
page : 1,
size : 10,
saleOrderID: 0
})
useEffect(() => {
if(show && id) {
searchField.current.saleOrderID = id
getOrderList()
}
}, [show, id])
const userInfo = useSelector(state => state.userInfo)
//获取订单列表
const {fetchData: listFetchData, state:orderState} = ReturnRecordApi()
const [orderData, setOrderData] = useState<{list:any[], total:number}>({list:[], total:0})
const getOrderList = async () => {
console.log('ida::', id)
let res = await listFetchData(getFilterData(searchField.current))
setOrderData({list: res.data.list, total: res.data.total})
}
//整理颜色
const labAndRgbAndUrl = useCallback((item) => {
return {lab:{...item?.lab}, rgb:{...item?.rgb}, texturl_url: item?.texturl_url}
}, [orderData])
const {
ReturnApplyOrderTypeReturnForRefund, // 退货退款
} = REFUND_STATUS_ORDER
//对应单价
const standardPrice = useCallback((price, sale_mode) => {
return formatPriceDiv(price).toLocaleString() + '/' + (sale_mode == 1?'m':'kg')
}, [orderData])
//对应数量
const formatCount = useCallback((item, sale_mode) => {
return sale_mode == 0? item.roll : Number(item.length / 100)
}, [orderData])
//上拉加载数据
const pageNum = useRef({size: searchField.current.size, page: searchField.current.page})
const getScrolltolower = () => {
if(orderData.list.length < orderData.total) {
pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page
searchField.current.size = size
}
}
//监听滚动
const [scrollStatus, setScrollStatus] = useState(false)
const onscroll = useCallback((e) => {
if(e.detail.scrollTop > 20) {
setScrollStatus(true)
} else {
setScrollStatus(false)
}
},[])
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({list:orderData.list, total: orderData.total, status: orderState.loading})
}, [orderData, orderState])
return (
<>
<Popup show={show} title="售后记录" onClose={onClose}>
<View className={styles.returnRecord_main}>
<InfiniteScroll
selfonScrollToLower={getScrolltolower}
selfOnScroll={onscroll}
statusMore={statusMore}
>
<View className={styles.returnRecord_con}>
{orderData?.list?.map(item => <View key={item.id} className={styles.order_item}>
<View className={styles.header} onClick={() => goLink('/pages/salesAfter/index', {id: item?.id})}>
<View className={styles.user}>
<Image src={`${userInfo?.adminUserInfo?.avatar_url}`}/>
</View>
<View className={styles.order_con}>
<Text className={styles.name}>{userInfo?.adminUserInfo?.user_name}</Text>
<View className={styles.order_num}>
<View className={styles.order_num_con}>
<Text className={styles.order_no}>售后单号：{item?.return_order_no}</Text>
<Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text>
</View>
<OrderStatusTag status={item?.type}/>
</View>
</View>
</View>
<View className={styles.product_con} onClick={() => goLink('/pages/salesAfter/index', {id: item?.id})}>
<View className={styles.product_title}>
<View className={styles.product_tag}>{item?.sale_mode_name}</View>
<View className={styles.product_name}>{formatHashTag(item?.product_list?.[0].code, item?.product_list?.[0].name)}</View>
<View className={styles.product_status}>{item?.stage_name}</View>
</View>
<View className={styles.product_list}>
<View className={styles.image}>
<LabAndImg value={labAndRgbAndUrl(item)}/>
<View className={styles.color_num}>{item?.product_list?.[0].product_colors?.[0].code}</View>
</View>
<View className={styles.color_list}>
{item?.product_list?.[0].product_colors?.map((itemColor, index) => {
return (
(index <= 1)&&<View className={styles.color_item}>
<View className={styles.color_title}>{formatHashTag(itemColor.code, itemColor.name)}</View>
<View className={styles.color_price}>{standardPrice(itemColor.sale_price, item.sale_mode)}</View>
<View className={styles.color_num}>×{formatCount(itemColor, itemColor.sale_mode)}条</View>
</View>
)
})
}
<View className={styles.color_item}>
<View className={styles.color_more}>……</View>
<View className={styles.color_more}>……</View>
<View className={styles.color_more}>……</View>
</View>
</View>
</View>
<View className={styles.color_count_num}>{`${item?.total_fabrics}种面料，${item?.total_colors}种颜色，共${item?.total_number}条`}</View>
<View className={styles.order_number}>
<Text>{item?.type == ReturnApplyOrderTypeReturnForRefund.value?'已申请退货':'已申请退款'}</Text>
<Text>订单号：{item?.order_no}</Text>
</View>
</View>
</View>)}
</View>
</InfiniteScroll>
</View>
</Popup>
</>
)
})
src/pages/order/index.module.scss
+1
View File
@@ -108,6 +108,7 @@
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
.order_num_btn{
font-size: $font_size_medium;
padding: 5px 10px;
src/pages/order/index.tsx
+18 -5
View File
@@ -26,6 +26,7 @@ import KindList from "./components/kindList";
import OrderState from "./components/orderState";
import Payment from "./components/payment";
import Remark from "./components/remark";
import ReturnRecord from "./components/returnRecord";
import styles from './index.module.scss'
export default () => {
@@ -180,8 +181,7 @@ import styles from './index.module.scss'
//获取底部按钮点击, 获取按钮状态
const orderStateClick = useCallback((val) => {
if(val == 1 || val == 6) {
//取消订单
if(val == 1 || val == 6 || val == 8) {
getSaleOrderPreView()
}else if(val == 2) {
//待付款
@@ -193,6 +193,9 @@ import styles from './index.module.scss'
} else if(val == 7) {
//再购
addShopCart()
} else if(val == 9) {
//售后记录
onReturnRecordShow()
}
}, [orderDetail])
@@ -286,6 +289,15 @@ import styles from './index.module.scss'
}
//显示售后记录
const [returnRecordShow, setReturnRecordShow] = useState(false)
const onReturnRecordShow = useCallback(() => {
setReturnRecordShow(true)
}, [])
const closeReturnRecord = useCallback(() => {
setReturnRecordShow(false)
}, [])
return (
<View className={styles.order_main}>
{(orderDetail?.status != SaleorderstatusWaitingPrePayment.value)&&<OrderState orderInfo={orderDetail}/>||
@@ -296,16 +308,16 @@ import styles from './index.module.scss'
<KindList order={formatPreViewOrderMemo}/>
<View className={styles.order_info} >
<View className={styles.order_info_title}>订单信息</View>
<SearchInput showBorder={false} title='单号' height={50}>
<SearchInput showBorder={false} title='单号' height='50rpx'>
<View className={styles.order_num}>
<Text>{orderDetail?.order_no}</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
</View>
</SearchInput>
<SearchInput showBorder={false} title='下单时间' height={50}>
<SearchInput showBorder={false} title='下单时间' height='50rpx'>
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
</SearchInput>
{(orderDetail?.payment_time)&&<SearchInput showBorder={false} title='付款时间' height={50}>
{(orderDetail?.payment_time)&&<SearchInput showBorder={false} title='付款时间' height='50rpx'>
<Text>{formatDateTime(orderDetail?.payment_time)}</Text>
</SearchInput>}
</View>
@@ -327,6 +339,7 @@ import styles from './index.module.scss'
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={orderDetail} />
<ApplyRefund show={refundShow} onClose={applyRefundClose} orderId={orderDetail?.id}/>
<ShopCart show={showCart} onClose={() => setShowCart(false)}/>
<ReturnRecord show={returnRecordShow} onClose={closeReturnRecord} id={orderDetail?.id}/>
<View className="common_safe_area_y"></View>
</View>
)