✨ feat(邀请码): 完成邀请码模块

src/components/Dialog/index.module.scss

@@ -0,0 +1,40 @@
+$am-ms: 200ms;
+
+.dialog{
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  &_mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 1;
+    opacity: 0;
+    transition: opacity $am-ms ease-in;
+    &_active {
+      opacity: 1;
+    }
+    &--hidden {
+      background: transparent;
+    }
+  }
+  &_content {
+    position: fixed;
+    z-index: 2;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: opacity $am-ms ease-in;
+    &_active {
+      opacity: 1;
+    }
+  }
+}

src/components/Dialog/index.tsx

@@ -0,0 +1,63 @@
+import { Image, View } from '@tarojs/components'
+import classnames from 'classnames'
+import { useEffect, useState } from 'react'
+import style from './index.module.scss'
+import { usePropsValue } from '@/use/useCommon'
+
+interface PropsType {
+  showOverLay?: boolean
+  show: boolean
+  onClose?: (show: boolean) => void
+  onChange?: (isShow) => void
+  children?: React.ReactNode
+}
+// 弹出框
+const Dialog = (props: PropsType) => {
+  const { showOverLay = true, show = false, onClose: _onClose, onChange: _onChange, children } = props
+
+  const [_show, setShow] = usePropsValue({
+    value: show,
+    defaultValue: false,
+    onChange: (value) => {
+      _onChange?.(value)
+    },
+  })
+
+  const [animShow, setAnimShow] = useState(false)
+
+  const handleAnimShow = () => {
+    setShow(true)
+    setTimeout(() => {
+      setAnimShow(true)
+    }, 200)
+  }
+  const handleAnimHide = () => {
+    setAnimShow(false)
+    setTimeout(() => {
+      setShow(false)
+    }, 200)
+  }
+  const onClose = () => {
+    handleAnimHide()
+    _onClose?.(_show)
+  }
+  useEffect(() => {
+    if (show) {
+      handleAnimShow()
+    }
+  }, [show])
+  return _show
+    ? <View className={style.dialog}>
+      {/* 遮罩层 start */}
+      <View
+        className={classnames(style.dialog_mask, { [style.dialog_mask_active]: animShow, [style['drawer_mask--hidden']]: !showOverLay })}
+        onClick={onClose}
+      ></View>
+      {/* 遮罩层 end */}
+      <View className={classnames(style.dialog_content, { [style.dialog_content_active]: animShow })}>
+        {children}
+      </View>
+    </View>
+    : <View></View>
+}
+export default Dialog

src/components/LoadMore/index.module.scss

@@ -7,3 +7,6 @@
   color: $color_font_three;
   padding: 24px 0;
 }
+.empty{
+  padding: 100px;
+}

src/components/LoadMore/index.tsx

@@ -4,7 +4,7 @@ import Iconfont from '../iconfont/iconfont'
 import LoadingCard from '../loadingCard/index'
 import styles from './index.module.scss'
 
-export type LoadMoreStatus = 'more' | 'loading' | 'noMore'
+export type LoadMoreStatus = 'more' | 'loading' | 'noMore' | 'empty'
 
 interface LoadMoreEvent {
   onClick?: () => void
@@ -15,10 +15,11 @@ interface LoadMorePropsType extends LoadMoreEvent {
   moreText?: string
   loadingText?: string
   noMoreText?: string
+  emptyText?: string
 }
 
 const LoadMore: FC<LoadMorePropsType> = (props) => {
-  const { status, moreText = '查看更多', loadingText = '加载中', noMoreText = '没有更多', onClick } = props
+  const { status, moreText = '查看更多', loadingText = '加载中', noMoreText = '没有更多', emptyText = '暂无数据', onClick } = props
 
   const handleShowMore = () => {
     onClick && onClick()
@@ -36,6 +37,13 @@ const LoadMore: FC<LoadMorePropsType> = (props) => {
       </View>
     )
   }
+  else if (status === 'empty') {
+    component = (
+      <View className={styles.empty}>
+        <Text>{emptyText}</Text>
+      </View>
+    )
+  }
   else {
     component = <Text>{noMoreText}</Text>
   }

src/components/infiniteScroll/index.tsx

@@ -29,6 +29,9 @@ interface Params {
   refresherEnabled?: boolean
   enableBackToTop?: boolean
   emptySlot?: React.ReactNode
+  moreText?: string
+  loadingText?: string
+  noMoreText?: string
 }
 const InfiniteScroll = ({
   styleObj,

src/components/table/index.tsx

@@ -26,10 +26,15 @@ export interface TablePropsType {
   dataSource?: { list: RecordType[]; total: number }
   onLoadMore?: () => void
   height?: number
+  moreText?: string
+  loadingText?: string
+  noMoreText?: string
+  emptyText?: string
+  safeAreaInsetBottom?: boolean
 }
 
 const Table: FC<TablePropsType> = (props) => {
-  const { columns, dataSource, onLoadMore, height = 400 } = props
+  const { columns, dataSource, onLoadMore, height = 400, moreText = '查看更多', loadingText = '加载中', noMoreText = '没有更多了', emptyText = '暂无数据', safeAreaInsetBottom = true } = props
 
   const handleShowMore = () => {
     onLoadMore && onLoadMore()
@@ -54,15 +59,18 @@ const Table: FC<TablePropsType> = (props) => {
 
   const loadMoreComponent = useMemo(() => {
     if (dataSource) {
-      if (dataSource.list.length < dataSource.total) {
-        return <LoadMore status="more" onClick={handleShowMore}></LoadMore>
+      if (dataSource.list.length === 0 && dataSource.list.length === dataSource.total) {
+        return <LoadMore emptyText={emptyText} status="empty"></LoadMore>
+      }
+      else if (dataSource.list.length < dataSource.total) {
+        return <LoadMore moreText={moreText} status="more" onClick={handleShowMore}></LoadMore>
       }
       else if (dataSource.list.length >= dataSource.total) {
-        return <LoadMore status="noMore" onClick={handleShowMore}></LoadMore>
+        return <LoadMore noMoreText={noMoreText} status="noMore"></LoadMore>
       }
     }
     else {
-      return <LoadMore status="loading" onClick={handleShowMore}></LoadMore>
+      return <LoadMore moreText={moreText} loadingText={loadingText} noMoreText={noMoreText} status="loading"></LoadMore>
     }
   }, [dataSource])
 
@@ -111,7 +119,7 @@ const Table: FC<TablePropsType> = (props) => {
           )
         })}
       </View>
-      <InfiniteScroll enableLoadMoreStatus={false} safeAreaInsetBottom>
+      <InfiniteScroll enableLoadMoreStatus={false} safeAreaInsetBottom={safeAreaInsetBottom}>
         {sourceContainer()}
       </InfiniteScroll>
     </View>