✨ feat(发货列表): 已完成发货列表对接

2022-09-21 19:19:58 +08:00
parent 25628dccdc
commit 5df6024528
12 changed files with 393 additions and 349 deletions
@@ -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>
+      </>
    )
-})
+  },
+)
@@ -8,19 +8,20 @@ import IconFont from '../iconfont/iconfont'

 type Params = {
  clickOnSearch?: (val: string) => void
-  disabled?: false | true
+  disabled?: boolean
  placeholder?: string
  changeOnSearch?: (value: string) => void
-  showIcon?: false | true
+  showIcon?: boolean
  placeIcon?: 'out' | 'inner'
  style?: Object
-  showBtn?: false | true
+  showBtn?: boolean
  btnStyle?: Object
  btnTitle?: string
  debounceTime?: number //防抖时间，不设默认为零
  defaultValue?: string
  children?: ReactNode
  customRightSlot?: ReactNode
+  adjustPosition?: boolean
 }

 export default memo(
@@ -29,6 +30,7 @@ export default memo(
      {
        clickOnSearch, //点击筛选按钮触发
        changeOnSearch, //输入文字触发
+        adjustPosition=false,
        disabled = false, //是否禁用
        placeholder = '输入搜索内容',
        showIcon = true, //是否显示关闭图标
@@ -88,6 +90,7 @@ export default memo(
              )}
              <View className={styles.input_bar}>
                <Input
+                  adjustPosition={adjustPosition}
                  placeholderStyle='color:#ABABAB; font-size:26rpx'
                  onConfirm={onSearch}
                  className={classnames(placeIcon == 'out' && styles.input_out)}
@@ -0,0 +1,19 @@
+
+
+.time-box {
+  padding: 40px;
+}
+
+.sure-box {
+  // padding: 16px 102px 30px 102px;
+  margin-left: 102px;
+  margin-right: 102px;
+  height: 80px;
+  background: #337FFF;
+  border-radius: 44px;
+  font-size: 28px;
+  font-weight: 500;
+  color: #FFFFFF;
+  text-align: center;
+  line-height: 80px;
+}
@@ -0,0 +1,47 @@
+import Popup from '@/components/popup'
+import { useState, memo } from 'react'
+import { View } from '@tarojs/components'
+import './index.scss'
+import AtCalendar from '@/components/calendar/index'
+import dayjs from 'dayjs'
+
+type DateArg = string | number | Date
+interface Props {
+  showTime: boolean
+  closePopup?: () => void
+  end?: DateArg
+  start?: DateArg
+  onSelectDate?: (any) => void
+}
+
+export default memo((props: Props) => {
+  let { showTime = false, closePopup, start = '', end = '', onSelectDate } = props
+  const [time, setTime] = useState<any>({})
+
+  const handTime = (e) => {
+    const { start, end } = e.value
+    // 如果选的是同一天的日期, end 自动加一天
+    if (start === end) {
+      e.value.end = `${dayjs(new Date(start)).add(1, 'day').format('YYYY-MM-DD')} 00:00:00`
+    }
+    setTime(e)
+  }
+  return (
+    <Popup title={'选择时间'} show={showTime} onClose={() => closePopup?.()}>
+      <View className='time-box'>
+        <AtCalendar
+          isMultiSelect
+          format='YYYY-MM-DD 00:00:00'
+          currentDate={{
+            start: start,
+            end: end,
+          }}
+          onSelectDate={(e) => handTime?.(e)}
+        />
+      </View>
+      <View className='sure-box' onClick={() => onSelectDate?.(time)}>
+        确认
+      </View>
+    </Popup>
+  )
+})