160 lines
7.0 KiB
TypeScript
160 lines
7.0 KiB
TypeScript
import {Image, ScrollView, View } 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, useEffect, useState } from "react";
|
||
|
||
type param = {
|
||
show?: true|false,
|
||
onClose?: () => void
|
||
}
|
||
export default memo(({show = false, onClose}: param) => {
|
||
const selectList = [
|
||
{step:1, digits:2, title:'剪板', unit:'米'},
|
||
{step:1, digits:2, title:'散剪', unit:'米'},
|
||
{step:1, digits:0, title:'大货', unit:'件'}
|
||
]
|
||
const [selectIndex, setSelectIndex] = useState(0)
|
||
const selectProduct = (index:number) => {
|
||
setSelectIndex(index)
|
||
}
|
||
|
||
const [list, setList] = useState<any[]>([])
|
||
const [loading, setLoading] = useState(false)
|
||
|
||
console.log('执行执行')
|
||
|
||
useEffect(() => {
|
||
let lists:any[] = []
|
||
for(let i = 0; i < 20; i++) {
|
||
lists = [...lists, {
|
||
title:`${i}#薄荷绿`,
|
||
subtitle: '0770# 21S单面平纹(食毛)',
|
||
tag: '剪板',
|
||
count:0,
|
||
show: false,
|
||
}]
|
||
}
|
||
setList([...lists])
|
||
}, [])
|
||
|
||
const [showPopup, setShowPopup] = useState(false)
|
||
useEffect(() => {
|
||
setShowPopup(show)
|
||
}, [show])
|
||
|
||
|
||
//popup关闭
|
||
const closePopup = () => {
|
||
onClose?.()
|
||
setShowPopup(false)
|
||
}
|
||
|
||
|
||
//计算总数量和总米/件数
|
||
const [selectCount, setSelectCount] = useState({
|
||
sumCount: 0,
|
||
kindCount: 0
|
||
})
|
||
useEffect(() => {
|
||
let sumCount = 0, kindCount = 0
|
||
list.map(item => {
|
||
if(item.count > 0) {
|
||
sumCount = Big(sumCount).add(item.count).toNumber()
|
||
kindCount ++
|
||
}
|
||
})
|
||
setSelectCount({sumCount, kindCount})
|
||
}, [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 = item.count == 0?1:item.count
|
||
setList([...list])
|
||
}
|
||
|
||
//搜索显示与隐藏
|
||
const [searchShow, setSearchShow] = useState(false)
|
||
const changeSearchShow = () => {
|
||
setSearchShow(true)
|
||
}
|
||
|
||
|
||
return (
|
||
<View className={styles.shop_cart_main}>
|
||
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
|
||
<View className={styles.popup_con}>
|
||
<View className={styles.header}>0770# 21S单面平纹(食毛)</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" />
|
||
</View>
|
||
<View className={styles.text} onClick={() => setSearchShow(false)}>取消</View>
|
||
</View>}
|
||
<View className={styles.colorNum}>
|
||
<View className={styles.title}>颜色分类 (13)</View>
|
||
<View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>
|
||
</View>
|
||
<View className={styles.product_color_con}>
|
||
{list.length > 0&&<InfiniteScroll>
|
||
<View className={styles.color_con}>
|
||
{list.map(item => {
|
||
return <View className={styles.item}>
|
||
<View className={styles.item_color}>
|
||
<Image src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d'/>
|
||
</View>
|
||
<View className={styles.item_con}>
|
||
<View className={styles.title}>{item.title}</View>
|
||
<View className={styles.num}>¥25.5/m</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}
|
||
/>
|
||
</View>}
|
||
</View>
|
||
</View>
|
||
})}
|
||
</View>
|
||
</InfiniteScroll>||
|
||
<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)}>加入购物车</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<View className="common_safe_area_y"></View>
|
||
</Popup>
|
||
</View>
|
||
)
|
||
}) |