🎈 perf(优化电子商城):

This commit is contained in:
czm 2022-11-30 17:14:28 +08:00
parent c2ca7f9e4e
commit c9b4dbdec3
8 changed files with 278 additions and 233 deletions

View File

@ -52,13 +52,13 @@ export default memo(({ orderInfo, onClick, fixedBottom = true }: Param) => {
return false return false
}, },
}, },
{ // {
id: 4, // id: 4,
label: '质检结果', // label: '质检结果',
validatarFunc: (orderInfo) => { // validatarFunc: (orderInfo) => {
return orderInfo?.is_quality_check // return orderInfo?.is_quality_check
}, // },
}, // },
{ {
id: 5, id: 5,
label: '上传物流', label: '上传物流',

View File

@ -1,5 +1,5 @@
import { MovableArea, MovableView, View } from '@tarojs/components' import { MovableArea, MovableView, View } from '@tarojs/components'
import Taro, { useReady } from '@tarojs/taro' import Taro, { useDidShow, useReady, useRouter } from '@tarojs/taro'
import { ReactElement, useEffect, useLayoutEffect, useRef, useState } from 'react' import { ReactElement, useEffect, useLayoutEffect, useRef, useState } from 'react'
import classnames from 'classnames' import classnames from 'classnames'
import styles from './index.module.scss' import styles from './index.module.scss'
@ -28,9 +28,9 @@ export default ({ children = null, onClick }: param) => {
setShowMoveBtn(true) setShowMoveBtn(true)
}) })
useEffect(() => { useDidShow(() => {
getShopCount() getShopCount()
}, []) })
const dragEnd = (e) => {} const dragEnd = (e) => {}

View File

@ -374,7 +374,9 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
{!loading && list?.length == 0 && ( {!loading && list?.length == 0 && (
<View className={styles.empty}> <View className={styles.empty}>
<View className={styles.title}></View> <View className={styles.title}></View>
<View className={styles.btn}></View> <View className={styles.btn} onClick={() => goLink('/pages/index/index')}>
</View>
</View> </View>
)} )}
</View> </View>

View File

@ -341,7 +341,9 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
{!loading && listData?.length == 0 && ( {!loading && listData?.length == 0 && (
<View className={styles.empty}> <View className={styles.empty}>
<View className={styles.title}></View> <View className={styles.title}></View>
<View className={styles.btn}></View> <View className={styles.btn} onClick={() => goLink('/pages/index/index', null, 'switchTab')}>
</View>
</View> </View>
)} )}
</View> </View>

View File

@ -40,9 +40,8 @@ export default memo(({ show = false, onClose, title = '', productId = 0 }: param
//重置数据 //重置数据
useEffect(() => { useEffect(() => {
const newList = initList(list)
setList([...newList])
condition.current.code_or_name = null condition.current.code_or_name = null
getColorList()
setSearchShow(false) setSearchShow(false)
}, [selectIndex]) }, [selectIndex])

View File

@ -5,7 +5,7 @@ import styles from './index.module.scss'
import Popup from '@/components/popup' import Popup from '@/components/popup'
import Taro from '@tarojs/taro' import Taro from '@tarojs/taro'
import { alert } from '@/common/common' import { alert } from '@/common/common'
import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from '@/common/fotmat' import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/fotmat'
import useCheckAuthorize from '@/use/useCheckAuthorize' import useCheckAuthorize from '@/use/useCheckAuthorize'
import { GetPayCode } from '@/api/onlinePay' import { GetPayCode } from '@/api/onlinePay'
import LoadingCard from '@/components/loadingCard' import LoadingCard from '@/components/loadingCard'
@ -39,9 +39,9 @@ export default memo(({ show = true, onClose, company, orderInfo }: Param) => {
orderInfo.product_list?.map((pitem) => { orderInfo.product_list?.map((pitem) => {
pitem?.product_colors?.map((citem) => { pitem?.product_colors?.map((citem) => {
lists.push({ lists.push({
product_code: formatHashTag(pitem.code, '', 'name')!, product_code: formatRemoveHashTag(pitem.code),
product_name: pitem.name, product_name: pitem.name,
product_color_code: formatHashTag(citem.code)!, product_color_code: formatRemoveHashTag(citem.code)!,
product_color_name: citem.name, product_color_name: citem.name,
num: citem.roll.toString(), num: citem.roll.toString(),
length: (citem.length / 100).toString(), length: (citem.length / 100).toString(),

View File

@ -1,202 +1,236 @@
import { AFTER_ORDER_STATUS, ORDER_STATUS, REFUND_STATUS } from "@/common/enum" import { AFTER_ORDER_STATUS, ORDER_STATUS, REFUND_STATUS } from '@/common/enum'
import { formatHashTag, formatPriceDiv, formatWeightDiv } from "@/common/fotmat" import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
import EstimatedAmount from "@/components/estimatedAmount" import EstimatedAmount from '@/components/estimatedAmount'
import LabAndImg from "@/components/LabAndImg" import LabAndImg from '@/components/LabAndImg'
import { Text, View } from "@tarojs/components" import { Text, View } from '@tarojs/components'
import { memo, useCallback, useMemo } from "react" import { memo, useCallback, useMemo } from 'react'
import classnames from "classnames"; import classnames from 'classnames'
import styles from './index.module.scss' import styles from './index.module.scss'
type OrderParam = { type OrderParam = {
estimate_amount: number, //预估金额 estimate_amount: number //预估金额
list: any[], list: any[]
product_list: any[], product_list: any[]
quality_check_pass_product: any[], quality_check_pass_product: any[]
sale_mode: number, sale_mode: number
sale_mode_name: string, sale_mode_name: string
unit: string, unit: string
total_colors: number, total_colors: number
total_fabrics: number, total_fabrics: number
total_number: number, total_number: number
stage: number, //订单状态 stage: number //订单状态
type: 1|2, //1退货 2退款 type: 1 | 2 //1退货 2退款
refund_type: number, //退款状态 refund_type: number //退款状态
total_sale_price: number, //销售金额 total_sale_price: number //销售金额
total_should_collect_money: number, //应收金额 total_should_collect_money: number //应收金额
total_weight_error_discount: number, //空差优惠 total_weight_error_discount: number //空差优惠
the_previous_status: number, //取消订单时的订单状态 the_previous_status: number //取消订单时的订单状态
actual_amount: number //实付金额 actual_amount: number //实付金额
quality_check_pass_colors: number, //验布后的颜色总数 quality_check_pass_colors: number //验布后的颜色总数
quality_check_pass_fabrics: number, //验布后的面料数量 quality_check_pass_fabrics: number //验布后的面料数量
quality_check_pass_number: number, //验布后的总数量 quality_check_pass_number: number //验布后的总数量
is_quality_check: true|false, //是否质检过 is_quality_check: true | false //是否质检过
} }
type Param = { type Param = {
order: OrderParam, order: OrderParam
comfirm?: boolean //是否是确认订单页面使用 comfirm?: boolean //是否是确认订单页面使用
} }
export default memo(({order, comfirm = false}:Param) => { export default memo(({ order, comfirm = false }: Param) => {
//售后单状态枚举
const {
ReturnStageApplying, // 申请中
ReturnStageWaitCheck, // 退货中
ReturnStageChecked, // 待验布
ReturnStageReturned, // 已退款
ReturnStageCancel, // 已取消
ReturnStageQualityCheckPendingRefund, // 已验布
ReturnStageServiceOrderPendingRefund, // 待退款
ReturnStageRejected, // 已拒绝
} = AFTER_ORDER_STATUS
//售后单状态枚举 //金额列表枚举
const { const priceList = [
ReturnStageApplying, // 申请中 {
ReturnStageWaitCheck, // 退货中 id: 5,
ReturnStageChecked, // 待验布 value: [ReturnStageReturned.value],
ReturnStageReturned, // 已退款 label: '合计金额',
ReturnStageCancel, // 已取消 field: 'total_refund_amount',
ReturnStageQualityCheckPendingRefund, // 已验布 message: '按原单价*退货重量的金额',
ReturnStageServiceOrderPendingRefund, // 待退款 },
ReturnStageRejected, // 已拒绝 {
} = AFTER_ORDER_STATUS id: 1,
value: [ReturnStageReturned.value],
//金额列表枚举 label: '扣款金额',
const priceList = [ field: 'other_deduction_amount',
{ message: '本次售后扣款金额',
id:5, },
value: [ReturnStageReturned.value], {
label:'合计金额', id: 3,
field: 'total_refund_amount', value: [ReturnStageReturned.value],
message: '按原单价*退货重量的金额', label: '退款金额',
field: 'refund_amount',
}, message: '本次售后应退款金额',
{ },
id:1, {
value: [ReturnStageReturned.value], id: 4,
label:'扣款金额', value: [ReturnStageReturned.value],
field: 'other_deduction_amount', label: '退款去向',
message: '本次售后扣款金额' field: 'refund_flow_name',
}, message: '本次售后退款金额去向',
{ },
id:3, ]
value: [ReturnStageReturned.value],
label:'退款金额',
field: 'refund_amount',
message: '本次售后应退款金额'
},
{
id:4,
value: [ReturnStageReturned.value],
label:'退款去向',
field: 'refund_flow_name',
message: '本次售后退款金额去向'
},
]
//是否显示价格 //是否显示价格
const showPrice = useCallback((priceInfo) => { const showPrice = useCallback(
return priceInfo.value.includes(order?.stage) (priceInfo) => {
}, [order]) return priceInfo.value.includes(order?.stage)
},
[order],
)
const priceConDom = useMemo(() => { const priceConDom = useMemo(() => {
if(!order) return if (!order) return
return (
<>
{
priceList.map(item => {
return <>{showPrice(item)&&<EstimatedAmount messageTitle={item.message} key={item.id} number={order[item.field]} numberFormat={item.id == 4?'text': 'number'} title={item.label} />}</>
})
}
</>
)
}, [order])
//对应数量
const formatCount = useCallback((item) => {
return order?.sale_mode == 0? item.roll : Number(item.length / 100)
}, [order])
//对应单价
const standardPrice = useCallback(price => {
return formatPriceDiv(price).toLocaleString() + '/' + (order?.sale_mode == 1?'m':'kg')
}, [order])
//数量格式
const numText = useMemo(() => {
if(order) {
if(!order?.is_quality_check) {
let total_number = order?.sale_mode == 0?order?.total_number:(order?.total_number/100)
return `${order?.total_fabrics} 种面料,${order?.total_colors} 种颜色,共 ${total_number} ${order?.unit}`
} else {
let total_number = order?.sale_mode == 0?order?.quality_check_pass_number:(order?.quality_check_pass_number/100)
return `${order?.quality_check_pass_fabrics} 种面料,${order?.quality_check_pass_colors} 种颜色,共 ${total_number} ${order?.unit}`
}
}
}, [order])
//获取面料数组
const list = useMemo(() => {
return order?.is_quality_check?order?.quality_check_pass_product:order?.product_list
}, [order])
//整理颜色
const labAndRgbAndUrl = useCallback((item) => {
return {lab:{...item?.lab}, rgb:{...item?.rgb}, texturl_url: item?.texturl_url}
}, [])
//单价显示判断
const sale_price_show = useMemo(() => {
return order?.stage != ReturnStageServiceOrderPendingRefund.value && order?.stage != ReturnStageQualityCheckPendingRefund.value
}, [order])
//销售价格
const formatPrice = useCallback((colorItem) => {
return (ReturnStageReturned.value == order?.stage) && <View className={styles.count_price}><text>¥</text>{formatPriceDiv(colorItem.estimate_amount, 100 , true)}</View>
}, [order])
return ( return (
<View className={styles.kindsList_main}> <>
{list?.length > 0 && <View className={styles.orders_list_con}> {priceList.map((item) => {
<View className={styles.orders_return_title}>{order?.type == 1?'退货信息':'退款信息'}</View> return (
{ <>
list?.map(item => { {showPrice(item) && (
return <View key={item.product_code} className={styles.order_list}> <EstimatedAmount
<View className={styles.order_list_title}> messageTitle={item.message}
<View className={styles.tag}>{order.sale_mode_name}</View> key={item.id}
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View> number={order[item.field]}
<View className={styles.num}>{item?.product_colors?.length}</View> numberFormat={item.id == 4 ? 'text' : 'number'}
</View> title={item.label}
<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}>
{sale_price_show&&<Text>¥{standardPrice(colorItem.sale_price)}</Text>}
{(order?.stage == ReturnStageReturned.value)&&<Text>{formatWeightDiv(colorItem.estimate_weight)}kg</Text>}
</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×{formatCount(colorItem)}<text>{order.unit}</text></View>
{formatPrice(colorItem)}
</View>
</View>
</View>
})}
</View>
</View>
})
}
<View className={styles.order_total}><Text></Text><Text>{numText}</Text></View>
<View className={styles.order_estimated_amount}>
{priceConDom}
</View>
</View>
}
{
(list?.length <=0 && order?.is_quality_check) && <View className={styles.inspection}>
<View className={styles.inspection_title}></View>
<View className={styles.inspection_con}>
<Text className={classnames('iconfont icon-zhuyi', styles.miconfont)}></Text>
退
</View>
</View>
}
</View>
) )
}) }, [order])
//对应数量
const formatCount = useCallback(
(item) => {
return order?.sale_mode == 0 ? item.roll : Number(item.length / 100)
},
[order],
)
//对应单价
const standardPrice = useCallback(
(price) => {
return formatPriceDiv(price).toLocaleString() + '/' + (order?.sale_mode == 1 ? 'm' : 'kg')
},
[order],
)
//数量格式
const numText = useMemo(() => {
if (order) {
if (!order?.is_quality_check) {
let total_number = order?.sale_mode == 0 ? order?.total_number : order?.total_number / 100
return `${order?.total_fabrics} 种面料,${order?.total_colors} 种颜色,共 ${total_number} ${order?.unit}`
} else {
let total_number = order?.sale_mode == 0 ? order?.quality_check_pass_number : order?.quality_check_pass_number / 100
return `${order?.quality_check_pass_fabrics} 种面料,${order?.quality_check_pass_colors} 种颜色,共 ${total_number} ${order?.unit}`
}
}
}, [order])
//获取面料数组
const list = useMemo(() => {
return order?.is_quality_check ? order?.quality_check_pass_product : order?.product_list
}, [order])
//整理颜色
const labAndRgbAndUrl = useCallback((item) => {
return { lab: { ...item?.lab }, rgb: { ...item?.rgb }, texturl_url: item?.texturl_url }
}, [])
//单价显示判断
const sale_price_show = useMemo(() => {
return order?.stage != ReturnStageServiceOrderPendingRefund.value && order?.stage != ReturnStageQualityCheckPendingRefund.value
}, [order])
//销售价格
const formatPrice = useCallback(
(colorItem) => {
return (
ReturnStageReturned.value == order?.stage && (
<View className={styles.count_price}>
<text>¥</text>
{formatPriceDiv(colorItem.estimate_amount, 100, true)}
</View>
)
)
},
[order],
)
return (
<View className={styles.kindsList_main}>
{list?.length > 0 && (
<View className={styles.orders_list_con}>
<View className={styles.orders_return_title}>{order?.type == 1 ? '退货信息' : '退款信息'}</View>
{list?.map((item) => {
return (
<View key={item.product_code} className={styles.order_list}>
<View className={styles.order_list_title}>
<View className={styles.tag}>{order.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}>
{sale_price_show && <Text>¥{standardPrice(colorItem.sale_price)}</Text>}
{order?.stage == ReturnStageReturned.value && <Text>{formatWeightDiv(colorItem.estimate_weight)}kg</Text>}
</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>
×{formatCount(colorItem)}
<text>{order.unit}</text>
</View>
{formatPrice(colorItem)}
</View>
</View>
</View>
)
})}
</View>
</View>
)
})}
<View className={styles.order_total}>
<Text></Text>
<Text>{numText}</Text>
</View>
<View className={styles.order_estimated_amount}>{priceConDom}</View>
</View>
)}
{list?.length <= 0 && order?.is_quality_check && (
<View className={styles.inspection}>
<View className={styles.inspection_title}></View>
<View className={styles.inspection_con}>
<Text className={classnames('iconfont icon-zhuyi', styles.miconfont)}></Text>
退
</View>
</View>
)}
</View>
)
})

View File

@ -38,34 +38,42 @@ export default () => {
getAdminUserInfo() getAdminUserInfo()
Apiassets() Apiassets()
}) })
//临时注释
// const checkGo = async () => {
// if (adminUserInfo?.authentication_status !== 4) {
// let res = await Taro.showModal({
// title: '提示',
// content: '你暂未开通授信,目前仅支持线下申请,开通后可使用账期采购。',
// cancelText: '稍后认证',
// confirmText: '联系客服',
// })
// if (res.confirm) {
// Taro.showModal({
// content: '联系电话:0757-8270 6695',
// cancelText: '取消',
// confirmText: '拨打',
// success: function (res) {
// if (res.confirm) {
// Taro.makePhoneCall({
// phoneNumber: '(0757)82706695',
// })
// }
// },
// })
// }
// } else {
// Taro.navigateTo({
// url: '/pages/creditLine/index',
// })
// }
// }
const checkGo = async () => { const checkGo = async () => {
if (adminUserInfo?.authentication_status !== 4) { Taro.navigateTo({
let res = await Taro.showModal({ url: '/pages/creditLine/index',
title: '提示', })
content: '你暂未开通授信,目前仅支持线下申请,开通后可使用账期采购。',
cancelText: '稍后认证',
confirmText: '联系客服',
})
if (res.confirm) {
Taro.showModal({
content: '联系电话:0757-8270 6695',
cancelText: '取消',
confirmText: '拨打',
success: function (res) {
if (res.confirm) {
Taro.makePhoneCall({
phoneNumber: '(0757)82706695',
})
}
},
})
}
} else {
Taro.navigateTo({
url: '/pages/creditLine/index',
})
}
} }
return ( return (
<View className={styles.main}> <View className={styles.main}>
<Header data={adminUserInfo} MenuData={stateData} /> <Header data={adminUserInfo} MenuData={stateData} />