✨ feat(发货列表): 已完成发货列表对接
This commit is contained in:
xuan
@@ -1,91 +1,88 @@
|
||||
$am-ms: 200ms;
|
||||
.drawer_main{
|
||||
.drawer {
|
||||
position:fixed;
|
||||
left: 0;
|
||||
top:0;
|
||||
.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;
|
||||
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;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
.drawer_container_active{
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
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;
|
||||
}
|
||||
.drawer_mask_active{
|
||||
opacity: 1;
|
||||
.common_close_btn_icon {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
.drawer_container_active {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
.drawer_active {
|
||||
visibility:visible;
|
||||
.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_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_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);
|
||||
}
|
||||
|
||||
.drawer_container_right {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 100vh;
|
||||
min-width: 300px;
|
||||
border-radius: 20px 0 0 20px;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,74 +1,61 @@
|
||||
import { View } from "@tarojs/components";
|
||||
import style from "./index.module.scss"
|
||||
import classnames from "classnames";
|
||||
import { memo, ReactNode, useEffect, useMemo, useRef } from "react";
|
||||
import CloseBtnIcon from "@/components/closeBtn"
|
||||
import { View } from '@tarojs/components'
|
||||
import style from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
import { memo, ReactNode, useEffect, useMemo, useRef } from 'react'
|
||||
import CloseBtnIcon from '@/components/closeBtn'
|
||||
|
||||
export interface Params {
|
||||
title?: string, //标题
|
||||
show?: false|true, //显示显示弹窗
|
||||
showTitle?: false|true, //是否显示标题
|
||||
onClose?:() => void, //关闭事件
|
||||
children?: ReactNode, //插槽内容
|
||||
// IconButton?: ReactNode, //
|
||||
showIconButton?: false|true, //是否显示关闭按钮
|
||||
position?: 'bottom'|'top'|'right', //弹出位置
|
||||
animationEnd?: () => void //弹出动画结束
|
||||
title?: string //标题
|
||||
show?: false | true //显示显示弹窗
|
||||
showTitle?: false | true //是否显示标题
|
||||
onClose?: () => void //关闭事件
|
||||
children?: ReactNode //插槽内容
|
||||
// IconButton?: ReactNode, //
|
||||
showIconButton?: false | true //是否显示关闭按钮
|
||||
position?: 'bottom' | 'top' | 'right' //弹出位置
|
||||
animationEnd?: () => void //弹出动画结束
|
||||
}
|
||||
export default memo((
|
||||
{
|
||||
title = '标题',
|
||||
show = false,
|
||||
showTitle = true,
|
||||
onClose,
|
||||
showIconButton = false,
|
||||
children,
|
||||
position = 'bottom',
|
||||
animationEnd
|
||||
}:Params) => {
|
||||
|
||||
export default memo(
|
||||
({ title = '标题', show = false, showTitle = true, onClose, showIconButton = false, children, position = 'bottom', animationEnd }: Params) => {
|
||||
const animationTime = useRef<any>(null)
|
||||
useEffect(() => {
|
||||
if(show) {
|
||||
animationTime.current = setTimeout(() => {
|
||||
animationEnd?.()
|
||||
}, 260)
|
||||
} else {
|
||||
clearTimeout(animationTime.current)
|
||||
}
|
||||
if (show) {
|
||||
animationTime.current = setTimeout(() => {
|
||||
animationEnd?.()
|
||||
}, 260)
|
||||
} else {
|
||||
clearTimeout(animationTime.current)
|
||||
}
|
||||
}, [show])
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
clearTimeout(animationTime.current)
|
||||
}
|
||||
return () => {
|
||||
clearTimeout(animationTime.current)
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
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?.()}
|
||||
>
|
||||
<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?.()}/>
|
||||
</View>}
|
||||
|
||||
<View className={style.drawer_container_context}>
|
||||
{show&&children}
|
||||
</View>
|
||||
<View className="common_safe_area_y"></View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<>
|
||||
<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?.()}>
|
||||
<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?.()} />
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className={style.drawer_container_context}>{children}</View>
|
||||
<View className='common_safe_area_y'></View>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
})
|
||||
},
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user