购物车完成

src/components/popup/index.module.scss

@@ -0,0 +1,91 @@
+$am-ms: 200ms;
+.drawer_main{
+    .drawer {
+        position:fixed;
+        left: 0;
+        top:0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        width: 100%;
+        height: 100vh;
+        margin: 0 auto;
+        z-index: 1000;
+        visibility: hidden;
+        transition: visibility $am-ms ease-in-out;
+        .drawer_mask{
+            display: flex;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background: rgba(0, 0, 0, 0.6);
+            z-index: 1011;
+            opacity: 0;
+            transition: opacity $am-ms ease-in;
+            .drawer_container{
+                display: flex;
+                flex-direction: column;
+                position: absolute;
+                background-color: #fff;
+                z-index: 1012;
+                transition: transform $am-ms ease-in-out;
+                .drawer_container_title {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    height: 80px;
+                    font-size: 29px;
+                    color: #000000;
+                    padding-top: 10px;
+                }
+                .common_close_btn_icon{
+                    position: absolute;
+                    top: 10px;
+                    right: 10px;
+                }
+            }
+            .drawer_container_active{
+                transform: translate3d(0, 0, 0);
+            }
+        }
+        .drawer_mask_active{
+            opacity: 1;
+        }
+    }
+    .drawer_active {
+        visibility:visible;
+    }
+
+    .drawer_container_bottom{
+        bottom: 0;
+        left: 0;
+        min-height: 200px;
+        width: 100vw;
+        border-radius: 20px 20px 0px 0px;
+        transform: translate3d(0, 100%, 0);
+    }
+
+    .drawer_container_top{
+        top: 0;
+        left: 0;
+        min-height: 200px;
+        width: 100vw;
+        border-radius: 0 0 20px 20px;
+        transform: translate3d(0, -100%, 0);
+    }
+
+    .drawer_container_right{
+        bottom: 0;
+        right: 0;
+        height: 100vh;
+        min-width: 300px;
+        border-radius: 20px 0 0 20px;
+        transform: translate3d(100%, 0, 0);
+    }
+    
+}
+
+

src/components/popup/index.tsx

@@ -0,0 +1,56 @@
+import { View } from "@tarojs/components";
+import style from "./index.module.scss"
+import classnames from "classnames";
+import { memo, ReactNode, useMemo } from "react";
+import CloseBtnIcon from "@/components/closeBtn"
+
+interface Params {
+    title?: string,
+    show?: false|true,
+    showTitle?: false|true,
+    onClose?:(boolean) => void,
+    children?: ReactNode,
+    IconButton?: ReactNode,
+    showIconButton?: false|true,
+    position?: 'bottom'|'top'|'right'
+}
+export default memo((
+    {
+        title = '标题', 
+        show = false, 
+        showTitle = true, 
+        onClose, 
+        showIconButton = false, 
+        children,
+        position = 'bottom'
+    }:Params) => {
+    
+    
+    return (
+        <>
+            <View className={style.drawer_main}>
+                <View catchMove={true} className={`${style.drawer} ${show?style.drawer_active:''}` }>
+                    <View
+                        className={classnames(style.drawer_mask, {[style.drawer_mask_active]: show})}
+                        onClick={() =>  onClose?.(false)}
+                    >
+                        <View  
+                            className={classnames(style.drawer_container, style['drawer_container_'+position], {[style.drawer_container_active]: show})}
+                            onClick={(e) => e.stopPropagation()}
+                        >
+                            {showTitle&&<View className={style.drawer_container_title}>{title}</View>}
+                            {showIconButton&&<View className={style.common_close_btn_icon}>
+                                <CloseBtnIcon onClose={() => onClose?.(false)}/>
+                            </View>}
+                            
+                            <View className={style.drawer_container_context}> 
+                                {children}
+                            </View>
+                            <View className="common_safe_area_y"></View>
+                        </View>
+                    </View>
+                </View>
+            </View>
+        </>
+    )
+})