购物车完成

2022-04-07 17:31:49 +08:00
parent 64ed1aaad6
commit df850ed826
18 changed files with 637 additions and 107 deletions
@@ -0,0 +1,125 @@
+import { Checkbox, Image, ScrollView, View } from "@tarojs/components"
+import Popup from "@/components/popup"
+import classnames from "classnames";
+import MCheckbox from "@/components/checkbox";
+import styles from "./index.module.scss"
+import { useEffect, useState } from "react";
+
+type param = {
+    show?: true|false,
+    onClose?: () => void
+}
+export default ({show = false, onClose}: param) => {
+    const selectList = ['不限', '剪板', '散剪', '大货']
+    const [selectIndex, setSelectIndex] = useState(0)
+    const selectProduct = (index:number) => {
+        setSelectIndex(index)
+    }
+
+    const [list, setList] = useState<any[]>([])
+    useEffect(() => {
+        for(let i = 0; i < 20; i++) {
+            setList((e) => [...e, {
+                title:`${i}#薄荷绿`,
+                subtitle: '0770# 21S单面平纹(食毛)',
+                tag: '剪板',
+                select: i%2?true: false
+            }])
+        }
+    }, [])
+
+    const [showPopup, setShowPopup] = useState(false)
+    useEffect(() => {
+        setShowPopup(show)
+    }, [show])
+
+    const selectAll = () => {
+        console.log('123123')
+        list.map(item => {
+            item.select = true
+        })
+        setList([...list])
+    }
+
+    //checkbox选中回调
+    const selectCallBack = (item) => {
+        item.select = true
+        setList([...list])
+    }
+
+    //checkbox关闭回调
+    const colseCallBack = (item) => {
+        item.select = false
+        setList([...list])
+    }
+
+    //popup关闭
+    const closePopup = () => {
+        onClose?.()
+        setShowPopup(false)
+    }
+    
+    return (
+        <View className={styles.shop_cart_main}>
+            <Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
+                <View className={styles.header}>
+                    <View onClick={selectAll}>全选</View>
+                    <View>
+                        <text className={classnames('iconfont', 'icon-lajixiang', styles.miconfont)}></text>
+                        删除勾选项
+                    </View>
+                </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>
+                    })}
+                
+                </View>
+                <View className={styles.con}>
+                    {list.length > 0&&<ScrollView scrollY className={styles.scroll}>
+                        <View className={styles.product_list}>
+                            {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)}/>
+                                    </View>
+                                    <View className={styles.img}>
+                                        <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}>0770# 21S单面平纹(食毛)</View>
+                                        <View className={styles.tag}>剪板</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>
+                                </View>
+                            })}
+                        </View>
+                        
+                    </ScrollView>||
+                    <View className={styles.empty}>
+                        <View className={styles.title}>暂未选择商品</View>
+                        <View className={styles.btn}>去选购</View>
+                    </View>}
+                </View>
+                <View className={styles.buy_btn}>
+                    <View className={styles.buy_con}>
+                        <View className={styles.icon}>
+                            <View className={classnames('iconfont', 'icon-gouwuche', styles.miconfont)}></View>
+                        </View>
+                        <View className={styles.price_con}>
+                            <View className={styles.price_real}><text>￥</text>200</View>
+                            <View className={styles.price_forecast}>预估金额</View>
+                        </View>
+                        <View className={styles.goPay}>
+                            去结算
+                        </View>
+                    </View>
+                </View>
+            </Popup>
+        </View>
+    )
+}