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

对接完添加购物车

Browse Source
This commit is contained in:
cheng
2022-05-09 18:52:08 +08:00
parent b5e967779c
commit f3c818f549
15 changed files with 212 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/checkbox/index.module.scss
+7 -7
View File
@@ -1,13 +1,13 @@
.checkbox_main{
width: 60px;
height: 60px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.checkbox_item{
width: 40px;
height: 40px;
width: 30px;
height: 30px;
border: 1px solid #707070;
border-radius: 50%;
text-align: center;
@@ -17,10 +17,10 @@
background-color: $color_main;
border: 0;
color: #fff;
width: 44px;
height: 44px;
width: 30px;
height: 30px;
text-align: center;
line-height: 44px;
line-height: 30px;
.miconfont{
font-size: 26px;
}
src/components/checkbox/index.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export default ({onSelect, onClose, status = false}: params) => {
<>
<View className={styles.checkbox_main} onClick={() => onSelectEven()}>
<View className={classnames(styles.checkbox_item, selected&&styles.checkbox_item_select)}>
{selected&&<View className={classnames('iconfont', 'icon-tick_gou', styles.miconfont)}></View>}
{selected&&<View className={classnames('iconfont', 'icon-tick', styles.miconfont)}></View>}
</View>
</View>
</>
src/components/shopCart/index.module.scss
+2 -1
View File
@@ -59,7 +59,6 @@
.checkbox{
display: flex;
align-items: center;
}
.img{
width: 126px;
@@ -80,6 +79,7 @@
.title{
font-size: $font_size;
color: $color_font_one;
@include common_ellipsis;
}
.subtitle{
color: $color_font_two;
@@ -101,6 +101,7 @@
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
.price{
font-size: $font_size;
font-weight: 700;
src/components/shopCart/index.tsx
+30 -13
View File
@@ -5,17 +5,24 @@ import MCheckbox from "@/components/checkbox";
import LoadingCard from "@/components/loadingCard";
import InfiniteScroll from "@/components/infiniteScroll";
import styles from "./index.module.scss"
import { useEffect, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import Taro from "@tarojs/taro";
import { goLink } from "@/common/common";
import {GetShoppingCartApi} from "@/api/shopCart"
import { formatHashTag, formatMillionYuan } from "@/common/fotmat";
type param = {
show?: true|false,
onClose?: () => void
}
export default ({show = false, onClose}: param) => {
const selectList = ['不限', '剪板', '散剪', '大货']
const selectList = [
{title:'不限', unit:'', eunit:''},
{title:'大货', unit:'件', eunit:'kg'},
{title:'剪板', unit:'米', eunit:'m'},
{title:'散剪', unit:'米', eunit:'kg'},
]
const [selectIndex, setSelectIndex] = useState(0)
const selectProduct = (index:number) => {
setSelectIndex(index)
@@ -28,7 +35,8 @@ export default ({show = false, onClose}: param) => {
const getShoppingCart = async () => {
setLoading(true)
const {data} = await fetchData()
setList(data)
console.log('color_list::', data)
setList(data.color_list)
setLoading(false)
}
@@ -94,7 +102,16 @@ export default ({show = false, onClose}: param) => {
})
}
//格式化金额
const formatPirce = useCallback((price) => {
const {num} = formatMillionYuan(price, 100)
return Number(num)
}, [])
//格式化数量
const formatCount = useCallback((item) => {
return item.sale_mode == 0? item.roll + '件': item.length + 'm'
}, [])
return (
<View className={styles.shop_cart_main}>
@@ -109,15 +126,15 @@ export default ({show = false, onClose}: param) => {
</View>
<View className={styles.search}>
{selectList.map((item, index) => {
return <View key={index} onClick={() => selectProduct(index)} className={classnames(styles.search_item, (selectIndex==index)&&styles.search_item_select)}>{item}</View>
return <View key={index} onClick={() => selectProduct(index)} className={classnames(styles.search_item, (selectIndex==index)&&styles.search_item_select)}>{item.title}</View>
})}
</View>
<View className={styles.con}>
{loading&&<LoadingCard/>}
{!loading&&list.length > 0&&<InfiniteScroll refresherTriggered={true} refresherEnabled={true} selfonScrollToLower={() => {console.log('触底了')}} paddingBottom={100}>
{!loading&&list?.length > 0&&<InfiniteScroll refresherTriggered={true} refresherEnabled={true} moreStatus={false} >
<View className={styles.product_list}>
{list.map((item, index) => {
{list?.map((item, index) => {
return <View key={index} className={styles.product_item}>
<View className={styles.checkbox}>
<MCheckbox status={item.select} onSelect={() => selectCallBack(item)} onClose={() => colseCallBack(item)}/>
@@ -126,19 +143,19 @@ export default ({show = false, onClose}: param) => {
<Image src="https://bpic.588ku.com//back_origin_min_pic/22/01/11/aa3da17bab9a6556564028e4f1d77874.jpg!/fw/750/quality/99/unsharp/true/compress/true"/>
</View>
<View className={styles.des}>
<View className={styles.title}>{item.title}</View>
<View className={styles.subtitle}>07703# 21S单面平纹(食毛)</View>
<View className={styles.tag}>剪板</View>
<View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
<View className={styles.subtitle}>{item.product_color_code +' ' + item.product_color_name}</View>
<View className={styles.tag}>{item.sale_mode_name}</View>
</View>
<View className={styles.count}>
<View className={styles.price}><text>￥</text>40.5<text>/kg</text></View>
<View className={styles.long}>×12m</View>
<View className={styles.price}><text>￥</text>{formatPirce(item.sale_price)}<text>/kg</text></View>
<View className={styles.long}>×{formatCount(item)}</View>
</View>
</View>
})}
</View>
</InfiniteScroll>}
{!loading&&list.length == 0 &&<View className={styles.empty}>
{!loading&&list?.length == 0 &&<View className={styles.empty}>
<View className={styles.title}>暂未选择商品</View>
<View className={styles.btn}>去选购</View>
</View>}