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

购物车添加数量组件

Browse Source
This commit is contained in:
cheng
2022-06-22 20:34:24 +08:00
parent fab3cd8b86
commit b82dad781a
15 changed files with 166 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/shopCart/index.tsx
+46 -23
View File
@@ -8,7 +8,7 @@ import styles from "./index.module.scss"
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import Taro from "@tarojs/taro";
import { alert, goLink } from "@/common/common";
import {GetShoppingCartApi, DelShoppingCartApi} from "@/api/shopCart"
import {GetShoppingCartApi, DelShoppingCartApi, UpdateShoppingCartApi} from "@/api/shopCart"
import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
import { setParam } from "@/common/system";
import { debounce } from "@/common/util";
@@ -189,14 +189,24 @@ export default ({show = false, onClose}: param) => {
return item.sale_mode == 0? '条':'米'
}, [])
//预估金额
//预估金额和总条数
const estimatePrice = useMemo(() => {
let count = 0
let estimate_amount = 0
let product_list = new Set() //面料
let color_count = 0 //颜色数量
let all_count = 0 //总数量
list.map(item => {
if(item.select) count += item.estimate_amount
if(item.select) {
estimate_amount += item.estimate_amount
product_list.add(item.product_id)
color_count++
all_count += item.sale_mode == 0?item.roll: (item.length)
}
})
return Number(formatPriceDiv(count))
let all_count_text = selectIndex == 0?all_count + '条': (all_count/100) + '米'
return {price: Number(formatPriceDiv(estimate_amount)), countText: `已选${product_list.size}种面料，${color_count}个颜色，共${all_count_text}`, color_count}
},[list])
//去结算
const orderDetail = debounce(() => {
@@ -205,18 +215,27 @@ export default ({show = false, onClose}: param) => {
alert.error('请选择面料')
} else {
let ids = selectIds.current.join('-')
setParam({ids, sale_mode:selectIndex})
setParam({ids, sale_mode:selectIndex}) //临时存储
closePopup()
goLink('/pages/order/comfirm')
}
}, 500)
//计数组件
const getInputValue = (num, item) => {
item.count = parseFloat(num)
setList([...list])
//计数组件-当后端修改完成才修改前端显示
const {fetchData: fetchDataUpdateShoppingCart} = UpdateShoppingCartApi()
const [UpdateShoppingCartLoading, setUpdateShoppingCartLoading] = useState(false)
const getInputValue = async (num, item) => {
let roll = item.sale_mode == 0?parseFloat(num):0
let length = item.sale_mode != 0?(parseFloat(num)*100):0
setUpdateShoppingCartLoading(() => true)
let res = await fetchDataUpdateShoppingCart({id: item.id, roll, length})
setUpdateShoppingCartLoading(() => false)
if(res.success) {
item.count = parseFloat(num)
setList([...list])
}
}
return (
<View className={styles.shop_cart_main}>
@@ -229,6 +248,7 @@ export default ({show = false, onClose}: param) => {
删除所选
</View>
</View>
<View className={styles.count_all}>{estimatePrice.countText}</View>
<View className={styles.search}>
{selectList.map((item) => {
return <View key={item.value} onClick={() => selectProduct(item.value)} className={classnames(styles.search_item, (selectIndex==item.value)&&styles.search_item_select)}>{item.title}</View>
@@ -254,16 +274,19 @@ export default ({show = false, onClose}: param) => {
<View className={styles.count}>
<View className={styles.price}><text>￥</text>{formatPirce(item.sale_price)}<text>/{selectList[selectIndex].eunit}</text></View>
{/* <View className={styles.long}>×{formatCount(item)}</View> */}
<Counter
onBlue={(e) => getInputValue(e, item)}
defaultNum={item.count}
step={selectList[selectIndex].step}
digits={selectList[selectIndex].digits}
onClickBtn={(e) => getInputValue(e, item)}
unit={formatUnit(item)}
minNum={selectList[selectIndex].minNum}
maxNum={selectList[selectIndex].maxNum}
/>
<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={formatUnit(item)}
minNum={selectList[selectIndex].minNum}
maxNum={selectList[selectIndex].maxNum}
disable={UpdateShoppingCartLoading}
/>
</View>
</View>
</View>
})}
@@ -281,11 +304,11 @@ export default ({show = false, onClose}: param) => {
<View className={classnames('iconfont', 'icon-gouwuche', styles.miconfont)}></View>
</View>
<View className={styles.price_con}>
<View className={styles.price_real}><text>￥</text>{estimatePrice}</View>
<View className={styles.price_real}><text>￥</text>{estimatePrice.price}</View>
<View className={styles.price_forecast}>预估金额</View>
</View>
<View className={styles.goPay} onClick={() => orderDetail()}>
去结算
去结算({estimatePrice.color_count})
</View>
</View>
</View>