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/counter/index.tsx
+6 -2
View File
@@ -11,12 +11,14 @@ type params = {
onChange?:(val:number) => void,
onBlue?:(val:number) => void, //失去焦点触发
onClickBtn?:(val:number) => void,
unit?: string
unit?: string,
disable?: true|false, //是否禁用
}
export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = ''}: params) => {
export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '', disable = false}: params) => {
const [value, setValue] = useState<any>({count:defaultNum})
const onPlus = () => {
if(disable) return false
let {count} = value
let num_res = Big(count).add(step).toNumber()
num_res = num_res >= maxNum?maxNum:num_res
@@ -26,6 +28,7 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
onClickBtn?.(parseFloat(num_res))
}
const minus = () => {
if(disable) return false
let {count} = value
let num_res = Big(count).minus(step).toNumber()
num_res = num_res < minNum?minNum:num_res
@@ -102,6 +105,7 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
onInput={onInputEven}
onBlur={onBluerEven}
type='digit'
disabled={disable}
/>
<View className={styles.unit}>{unit}</View>
</View>
src/components/orderBtns/index.tsx
+2
View File
@@ -6,6 +6,7 @@ import Taro from "@tarojs/taro"
import {useRef, memo, useState, useMemo } from "react"
import classnames from "classnames";
import styles from './index.module.scss'
import { AddShoppingCartApi } from "@/api/shopCart"
type Param = {
orderInfo: {
@@ -180,6 +181,7 @@ export default memo(({orderInfo, onClick}:Param) => {
})
}
//显示更多按钮
const [showMore, setShowMore] = useState(false)
const styleTop = useMemo(() => {
src/components/shopCart/index.module.scss
+14
View File
@@ -17,6 +17,11 @@
margin-right: 10px;
}
}
.count_all{
font-size: 22px;
color: #ABABAB;
padding: 30px 20px;
}
.search{
display: flex;
justify-content: space-between;
@@ -104,6 +109,15 @@
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
.btn_count{
width: 235px;
height: 64px;
background-color: #ECF5FF;
border-radius: 40px 0px 16px 0px;
padding: 0 20px;
display: flex;
align-items: center;
}
.price{
font-size: $font_size;
font-weight: 700;
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>