优化底部按钮

This commit is contained in:
2022-07-14 17:59:22 +08:00
parent da7c834198
commit ed9f9420db
14 changed files with 99 additions and 598 deletions
@@ -1,326 +0,0 @@
import {Image, ScrollView, View, Text, CustomWrapper } from "@tarojs/components"
import Popup from "@/components/popup"
import LoadingCard from "@/components/loadingCard";
import Search from "@/components/search";
import InfiniteScroll from "@/components/infiniteScroll";
import Counter from "../counter";
import Big from 'big.js'
import classnames from "classnames";
import styles from "./index.module.scss"
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useSelector } from "@/reducers/hooks"
import {GetColorList} from "@/api/materialColor"
import {AddShoppingCartApi} from "@/api/shopCart"
import Taro, { useRouter } from "@tarojs/taro";
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'
import useCommonData from "@/use/useCommonData";
type param = {
show?: true|false,
onClose?: () => void,
title?: string,
productId?: number
}
export default memo(({show = false, onClose, title = '', productId = 0}: param) => {
const {adminUserInfo} = useSelector(state => state.userInfo)
const [selectList, _] = useState([
{id: 0, step:1, digits:0, maxNum:100000, defaultNum:1, title:'大货', unit:'条', eunit:'kg', priceField:'bulk_price'},
{id: 1, step:1, digits:2, maxNum:9.99, defaultNum:1, title:'剪板', unit:'米', eunit:'m', priceField:'length_cut_price'},
{id: 2, step:1, digits:2, minNum:10, maxNum:100000, defaultNum:10, title:'散剪', unit:'米', eunit:'kg', priceField:'weight_cut_price'},
])
const [selectIndex, setSelectIndex] = useState(0)
const selectProduct = (index:number) => {
setSelectIndex(() => index)
}
//重置数据
useEffect(() => {
const newList = initList(list)
setList([...newList])
condition.current.code_or_name = null
setSearchShow(false)
}, [selectIndex])
//获取面料颜色列表
const {fetchData:colorFetchData, state: colorState} = GetColorList()
const [list, setList] = useState<any[]>([])
const condition = useRef({physical_warehouse:adminUserInfo?.physical_warehouse, sale_mode:selectIndex, product_id:0, code_or_name:null})
const getColorList = async () => {
let {data} = await colorFetchData(getFilterData(condition.current))
let lists = initList(data.list)
setList(() => [...lists])
}
const [showPopup, setShowPopup] = useState(false)
//显示获取
useEffect(() => {
if(show) {
setSelectIndex(0)
condition.current.code_or_name = null
setSearchShow(false)
condition.current.product_id = productId
getColorList()
}
setShowPopup(show)
}, [show])
//初始化列表数据
const initList = useCallback((list) => {
const newList = list.map(item => {
item.count = 0
item.show = false
return item
})
return newList
}, [])
//卸载数据
useEffect(() => {
return () => {
setList([])
}
}, [])
//popup关闭
const closePopup = () => {
onClose?.()
setShowPopup(false)
setList([])
}
//计算总数量和总米/件数
const [selectCount, setSelectCount] = useState<{sumCount:number, kindCount:number, color_list:any[]}>({
sumCount: 0,
kindCount: 0,
color_list: []
})
useEffect(() => {
let sumCount = 0, kindCount = 0, color_list:any[] = []
let color_list_info = {}
list.map(item => {
if(item.count > 0) {
sumCount = Big(sumCount).add(item.count).toNumber()
kindCount ++
color_list_info = selectIndex == 0? {product_color_id:item.id, roll:item.count}:{product_color_id:item.id, length:(item.count*100)}
color_list.push(color_list_info)
}
})
setSelectCount({...selectCount, sumCount, kindCount, color_list})
}, [list])
//计数组件
const getInputValue = (num, item) => {
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
setList((list) => [...list])
}
//搜索显示与隐藏
const [searchShow, setSearchShow] = useState(false)
const changeSearchShow = () => {
setSearchShow(true)
}
//添加购物车
const {getShopCount} = useCommonData()
const {getSelfUserInfo} = UseLogin()
const {fetchData:addFetchData} = AddShoppingCartApi()
const addShopCart = async () => {
try {
await getSelfUserInfo()
} catch(msg) {
Taro.showToast({
icon:'none',
title:'授权失败,请求完善授权'
})
return false
}
if(selectCount.sumCount == 0) {
Taro.showToast({
icon:'none',
title:'请选择面料颜色!'
})
return false
}
const state = await addFetchData({
"sale_mode": selectIndex,
color_list: selectCount.color_list
})
if(state.success) {
Taro.showToast({
title:'添加成功'
})
getShopCount()
onClose?.()
} else {
Taro.showToast({
icon:'none',
title: state.msg
})
}
}
//筛选数据
const searchInput = useCallback((e) => {
condition.current.code_or_name = e
getColorList()
}, [])
//清空搜索内容
const searchRef = useRef<any>(null)
const clearSearch = () => {
searchRef.current.clearInput()
setSearchShow(false)
}
//格式化金额
const formatPrice = useCallback((item) => {
const price = Number(formatPriceDiv(item[selectList[selectIndex].priceField]))
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 (
<>
{item&&<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 className={styles.item}></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>
<View className={styles.search}>
<View className={styles.search_title}>下单类型:</View>
<View className={styles.search_list}>
{selectList.map((item, index) => {
return <View key={index} onClick={() => selectProduct(index)} className={classnames(styles.search_item, (selectIndex==index)&&styles.search_item_select)}>{item.title}</View>
})}
</View>
</View>
{searchShow&&<View className={styles.colorFind}>
<View className={styles.search}>
<Search placeIcon="out" ref={searchRef} changeOnSearch={searchInput} debounceTime={400}/>
</View>
<View className={styles.text} onClick={() => clearSearch()}>取消</View>
</View>}
<View className={styles.colorNum}>
<View className={styles.title}>颜色分类 ({list.length})</View>
{!searchShow&&<View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>}
</View>
<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>}
<View className={styles.color_con}>
<VirtualList
className={styles.virtual_list}
height={400} /* 列表的高度 */
width='100%' /* 列表的宽度 */
itemData={list} /* 渲染列表的数据 */
itemCount={list.length + 1} /* 渲染列表的长度 */
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}>
<View className={styles.buy_btn_con}>
<View className={styles.count}>当前已选{selectCount.kindCount}种,共{selectCount.sumCount}{selectList[selectIndex].unit}</View>
<View className={classnames(styles.add_cart, selectCount.kindCount&&styles.select_add_cart)} onClick={() => addShopCart()}>加入购物车</View>
</View>
</View>
</View>
<View className="common_safe_area_y"></View>
</Popup>
</View>
)
})
+1 -1
View File
@@ -53,12 +53,12 @@
}
.order_desc_text, .order_desc_text_hint{
font-size: $font_size_medium;
color: $color_font_two;
margin-right: 10px;
flex:1;
}
.order_desc_text_hint{
text-align: right;
color: $color_font_two;
}
.miconfont{
font-size: 20px;
+1 -1
View File
@@ -184,7 +184,7 @@ import { throttle } from "@/common/util";
<View className={classnames(styles.order_btn, btnStatus&&styles.ok_order_btn)} onClick={() => submitOrderEven()}>提交订单</View>
</View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<Remark onSave={(e) => getRemark(e)}/>
<Remark defaultValue={submitOrderData?.remark} onSave={(e) => getRemark(e)}/>
</Popup>
<View className="common_safe_area_y"></View>
</View>
@@ -5,7 +5,7 @@ import classnames from "classnames";
import styles from './index.module.scss'
import dayjs from "dayjs";
import { useTimeCountDown } from "@/use/useCommon";
import { ORDER_STATUS, PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
import { ORDER_STATUS, PAYMENT_METHOD } from "@/common/enum";
type List = {
status: string,
@@ -19,7 +19,7 @@ type Param = {
onRefresh?: () => void,
orderInfo?: {
logistics_details:List[], //订单状态列表
payment_method: 0|PAYMENT_METHOD_PARAM, //支付方式
payment_method: number, //支付方式
status: number, //订单状态
}
}
@@ -1,190 +0,0 @@
import { ORDER_STATUS } from "@/common/enum"
import { formatHashTag, formatPriceDiv } from "@/common/fotmat"
import LabAndImg from "@/components/LabAndImg"
import { View } from "@tarojs/components"
import { memo, useCallback, useMemo } from "react"
import EstimatedAmount from "../estimatedAmount"
import styles from './index.module.scss'
type OrderParam = {
estimate_amount: number, //预估金额
list: any[],
sale_mode: number,
sale_mode_name: string,
unit: string,
total_colors: number,
total_fabrics: number,
total_number: number,
status: number, //订单状态
total_sale_price: number, //销售金额
total_should_collect_money: number, //应收金额
total_weight_error_discount: number, //空差优惠
the_previous_status: number, //取消订单时的订单状态
actual_amount: number //实付金额
}
type Param = {
order: OrderParam,
comfirm?: boolean //是否是确认订单页面使用
}
export default memo(({order, comfirm = false}:Param) => {
//对应数量
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) {
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}`
}
}, [order])
const {
SaleOrderStatusBooking, // 待接单
SaleOrderStatusArranging, // 配布中
SaleOrderStatusArranged, // 已配布
SaleOrderStatusWaitingPayment, // 待付款
SaleOrderStatusWaitingDelivery, // 待发货
SaleOrderStatusWaitingReceipt, // 待收货
SaleOrderStatusAlreadyReceipt, // 已收货
SaleOrderStatusComplete, // 已完成
SaleOrderStatusRefund, // 已退款
SaleOrderStatusCancel, // 已取消
SaleorderstatusWaitingPrePayment // 预付款
} = ORDER_STATUS
//金额列表枚举
const priceList = [
{
id:1,
value:[SaleorderstatusWaitingPrePayment.value, SaleOrderStatusBooking.value, SaleOrderStatusArranging.value, ],
label:'预估金额',
field: 'estimate_amount'
},
{
id:2,
value:[SaleorderstatusWaitingPrePayment.value, SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
label:'合计金额',
field: 'total_sale_price'
},
{
id:3,
value:[SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
label:'空差优惠',
field: 'total_weight_error_discount'
},
{
id:4,
value:[ SaleOrderStatusWaitingPayment.value],
label:'应付金额',
field: 'total_should_collect_money'
},
{
id:5,
value:[SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
label:'实付金额',
field: 'actual_amount'
}
]
//是否显示价格
const showPrice = useCallback((priceInfo, status) => {
return priceInfo.value.includes(status)
}, [order])
//金额展示大货
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} />}</>
})
}
</>
)
}
}, [order])
//金额展示剪板
const cutPriceConDom = useMemo(() => {
if(!order) return
return <EstimatedAmount number={formatPriceDiv(order.total_should_collect_money)} title="合计金额" />
}, [order])
const showPriceAll = useMemo(() => {
if(order?.sale_mode == 1) {
return cutPriceConDom //剪板
} else {
return priceConDom //大货
}
}, [order])
return (
<>
<View className={styles.orders_list_title}>{numText}</View>
<View className={styles.orders_list_con}>
{
order?.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={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
</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>{order.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_estimated_amount}>
{showPriceAll}
</View>
</View>
</>
)
})
@@ -93,7 +93,7 @@ export default memo(({order, comfirm = false}:Param) => {
},
{
id:5,
value:[SaleOrderStatusTaking.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
value:[SaleOrderStatusTaking.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value],
label:'实付金额',
field: 'actual_amount',
message: '本单实付总金额',
@@ -3,7 +3,7 @@ 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 { ORDER_STATUS, PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
import { ORDER_STATUS, PAYMENT_METHOD } from "@/common/enum";
import * as dayjs from 'dayjs'
type List = {
@@ -18,13 +18,11 @@ type Param = {
onRefresh?: () => void,
orderInfo?: {
logistics_details:List[], //订单状态列表
payment_method: 0|PAYMENT_METHOD_PARAM, //支付方式
payment_method: number, //支付方式
status: number, //订单状态
}
}
export default memo(({orderInfo = {logistics_details: [],payment_method: 0, status: 0}, onRefresh}:Param) => {
const [showMore, setShowMore] = useState(false)
+1 -1
View File
@@ -336,7 +336,7 @@ import styles from './index.module.scss'
</Popup>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={orderDetail} />
<ApplyRefund show={refundShow} onClose={applyRefundClose} orderId={orderDetail?.id}/>
<ShopCart show={showCart} onClose={() => setShowCart(false)}/>
<ShopCart intoStatus="again" show={showCart} onClose={() => setShowCart(false)}/>
<ReturnRecord show={returnRecordShow} onClose={closeReturnRecord} id={orderDetail?.id}/>
<View className="common_safe_area_y"></View>
</View>
+1 -1
View File
@@ -205,7 +205,7 @@ export default () => {
</InfiniteScroll>
</View>
<ApplyRefund show={refundShow} onClose={applyRefundClose} orderId={callBackOrderInfo?.id}/>
<ShopCart show={showCart} onClose={() => setShowCart(false)}/>
<ShopCart intoStatus="again" show={showCart} onClose={() => setShowCart(false)}/>
<ReturnRecord show={returnRecordShow} onClose={closeReturnRecord} id={callBackOrderInfo?.id}/>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={callBackOrderInfo}/>
</View>
+2 -3
View File
@@ -31,12 +31,11 @@ export default () => {
}
const { fetchData: Apiassets, state } = userassets()
const { fetchData: ApigetTotal, state: stateData } = userorderStatistics()
useEffect(() => {
Apiassets();
}, [])
useDidShow(() => {
ApigetTotal()
getAdminUserInfo()
Apiassets()
})
const checkGo = () => {
if (adminUserInfo?.authentication_status === 0 || adminUserInfo?.authentication_status === 1 || adminUserInfo?.authentication_status === 2 || adminUserInfo?.authentication_status === 3) {