@zamlia/mini-ui 0.0.1

package/src/components/common/PullToPushRefresh/index.tsx

@@ -0,0 +1,338 @@
+import Taro, { useDidShow } from '@tarojs/taro';
+import
+React, {
+  MutableRefObject,
+  PropsWithChildren,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from 'react';
+import { Utils } from '@utils';
+import { View, Text, ScrollView } from '@tarojs/components';
+import { Loading } from '@nutui/nutui-react-taro';
+import './index.scss';
+
+export type PullToPushRefreshProps<T = Record<string, any>> = {
+  pageSize?: number
+  /** 没有数据展示内容 */
+  emptyRender?: React.ReactElement
+  /** 加载文案
+ * @default 加载中...
+ */
+  loadingText?: string
+  /**
+* 错误文案
+* @default 加载失败，请点击重试
+*/
+  errorText?: string
+  /**
+   * 没有数据文案
+   * @default emptyText
+   * */
+  emptyText?: string
+  /**
+  * 底部文案
+  * @default 没有更多了
+  * */
+  bottomText?: string
+  /**
+   * 是否展示底部文案
+   * @default true
+  */
+  showBottomText?: boolean
+  /**
+   * 是否展示加载图标
+   * @default true
+  */
+  showLoding?: boolean
+  /**
+   * 下拉刷新文案
+   * @default '松开即可刷新'
+   */
+  refreshText?: string
+  /**
+  * show页面是否加载数据
+  * @default false
+  */
+  showPageRequest?: boolean
+  /**
+   * 是否首次进入页面自动掉接口
+   * @default true
+   */
+  hasFirstPageAutoRequest?: boolean
+  /**
+   * 自定义每条数据的内容
+   * @param {T} item 当前条数据
+   * @param {number} index
+  */
+  renderItem: (item: T, index: number) => React.ReactElement
+  /**
+   * 请求方法
+   * @param {T} skip 当前页码
+   * @param {T} first pageSize
+   * @param {Record<string, any>} restParams 可以传其余的饿默认参数
+  */
+  // request: (skip: number, first: number, restParams?: Record<string, any>) => Promise<PullToPushRefreshRequestType
+  request: (skip: number, first: number, restParams?: Record<string, any>) => void
+}
+
+export type PullToPushRefreshRef = {
+  /**
+   * 刷新
+   * @param isFirst 是否是第一次调用
+   * @param restParams 可以传其余的饿默认参数
+   */
+  reload: (isFirst?: boolean, restParams?: Record<string, any>) => void
+  /**
+   * 设置是否可以页面show刷新
+   * @param {boolean}bol
+   */
+  showPageRequest: (bol: boolean) => void
+} | undefined
+
+export type PullToPushRefreshRequestType<T> = {
+  data: Array<T>
+  total: number
+  success: boolean
+}
+
+export type ListInfoType<T> = {
+  loading: boolean,
+  error: boolean,
+  skip: number,
+  list: Array<T>,
+  total: number
+}
+
+const PullToPushRefresh = React.forwardRef<PullToPushRefreshRef, PropsWithChildren<PullToPushRefreshProps<any>>>((props, ref) => {
+  const {
+    pageSize: _pageSize = 10,
+    emptyRender,
+    loadingText = '加载中...',
+    errorText = '加载失败，请点击重试',
+    emptyText = '没有数据',
+    bottomText = '没有更多了',
+    showBottomText = true,
+    showLoding = true,
+    showPageRequest: _showPageRequest = false,
+    // refreshText = '松开即可刷新',
+    hasFirstPageAutoRequest = true,
+    renderItem,
+    request = () => { console.error('PullToPushRefresh组件props没有传入handleQuery') },
+  } = props;
+  const flatlistRef: MutableRefObject<any> = useRef(null);
+
+  const [, setHasMore] = useState<boolean>(true);
+  const [pageSize] = useState<number>(_pageSize)
+  const [refreshing, setRefreshing] = useState<boolean>(false);
+  const [firstEnter, setFirstEnter] = useState<boolean>(true);
+  const [scrollY,] = useState<boolean>(true)
+  const [showPageRequest, setShowPageRequest] = useState<boolean>(_showPageRequest);
+
+  const [listInfo, setListInfo] = useState<ListInfoType<any>>({
+    loading: false,
+    error: true,
+    skip: 0,
+    list: [],
+    total: 0
+  })
+
+  useEffect(() => {
+    setFirstEnter(false)
+    hasFirstPageAutoRequest && handleFetchMore(true)
+  }, [])
+
+  // 使用 useImperativeHandle 定义向外暴露的方法或属性
+  useImperativeHandle(ref, () => ({
+    // 这里返回您希望向外暴露的方法或属性
+    reload: handleFetchMore,
+    showPageRequest: setShowPageRequest
+  }));
+
+  useDidShow(() => {
+    showPageRequest && !firstEnter && handleFetchMore(true)
+  })
+
+  /**
+   * 请求
+   * @param isFirst 是否是第一次调用
+   * @param restParams 可以传其余的饿默认参数
+   */
+  const handleFetchMore = async (isFirst: any = false, restParams = {}) => {
+    showLoding && Taro.showLoading({ title: loadingText })
+
+    let currentPage: number
+    if (isFirst) {
+      currentPage = 0
+      setListInfo({
+        ...listInfo,
+        loading: true,
+        skip: 0,
+        list: [],
+        total: 0,
+      })
+    } else {
+      currentPage = listInfo.skip
+      setListInfo({
+        ...listInfo,
+        loading: true,
+      })
+    }
+    const dataSource: any = await request(currentPage, pageSize, restParams);
+    let cloneDataSource = Utils.cloneDeep(dataSource);
+
+    showLoding && Taro.hideLoading()
+    // 刷新完成后，将刷新状态设置为 false
+    setRefreshing(false)
+    if (!cloneDataSource) {
+      setListInfo({
+        ...listInfo,
+        loading: false,
+        error: true
+      })
+    } else if (isFirst) {
+      setListInfo({
+        ...listInfo,
+        loading: false,
+        error: false,
+        list: [...(cloneDataSource?.data || [])],
+        skip: listInfo?.skip + pageSize!!,
+        total: cloneDataSource?.total || 0
+      })
+    } else {
+      setListInfo({
+        ...listInfo,
+        loading: false,
+        error: false,
+        list: [...listInfo.list, ...(cloneDataSource?.data || [])],
+        skip: listInfo.skip + pageSize!!,
+        total: cloneDataSource?.total || 0
+      })
+    }
+  }
+
+
+  // /**
+  //  * 下拉刷新
+  //  */
+  // const handleRefresh = () => {
+  //   // 将刷新状态设置为 true
+  //   setRefreshing(true)
+
+  //   // 进行刷新操作，例如重新请求数据
+  //   handleFetchMore(true)
+  // };
+
+  /**
+   * 上拉加载
+   */
+  const handleLoadMore = () => {
+    if (
+      !listInfo?.loading &&
+      !refreshing &&
+      listInfo.skip <= listInfo.total
+    ) {
+      if (firstEnter && !hasFirstPageAutoRequest) return
+
+      handleFetchMore();
+    } else {
+      setHasMore(true)
+    }
+  };
+
+  const renderFooter = () => {
+    const isBottom = listInfo.skip > listInfo.total;
+
+    let textRender: any = null;
+
+    if (!listInfo?.loading) {
+      if (!listInfo.error && listInfo.total !== 0) {
+        textRender = (
+          !isBottom ? null : (
+            !showBottomText ? null : (
+              <Text className='we-list__text'>{bottomText}</Text>
+            )
+          )
+        )
+      }
+    } else {
+      textRender = (
+        <>
+          {!refreshing && (
+            <Loading type='circular'>加载中...</Loading>
+          )}
+        </>
+      );
+    }
+
+    return (
+      <View className='we-list__ptpr'>
+        {textRender}
+      </View>
+    )
+  }
+
+  /** 没有数据展示内容 */
+  const renderEmpty = (): React.ReactElement | null => {
+    if (listInfo?.loading || refreshing || firstEnter) return null
+    let textRender: any = null;
+
+    if (listInfo?.error) {
+      textRender = (
+        <Text
+          onClick={() => { handleFetchMore(true) }}
+          className='we-list__bottom_text'
+        >
+          {errorText}
+        </Text>
+      )
+    } else if (listInfo.total === 0) {
+      textRender = !!emptyRender ? emptyRender : (
+        <Text className='we-list__bottom-text'>{emptyText}</Text>
+      )
+    }
+    if (!!textRender) {
+      return (
+        <View className='we-list__bottom'>
+          {textRender}
+        </View>
+      )
+    } else {
+      return null
+    }
+  };
+
+  return (
+    <View className='we-list' ref={flatlistRef}>
+      <ScrollView
+        className='scroll'
+        scrollWithAnimation
+        enableBackToTop
+        lowerThreshold={20}
+        onScrollToLower={handleLoadMore}
+        scrollY={scrollY}
+      // onTouchStart={this.handleTouchStart.bind(this)}
+      // onTouchEnd={this.handleTouchEnd.bind(this)}
+      // onTouchMove={this.handleTouchMove.bind(this)}
+      >
+        {props.children}
+        {listInfo?.list?.map((it, index) => (renderItem(it, index)))}
+        {renderEmpty()}
+        {renderFooter()}
+      </ScrollView>
+    </View>
+  )
+})
+
+type WrappedPullToPushRefreshProps<T> = {
+  actionRef: MutableRefObject<PullToPushRefreshRef>;
+} & PullToPushRefreshProps<T>;
+
+const WrappedPullToPushRefresh = <T extends Record<string, any>>(props: WrappedPullToPushRefreshProps<T>) => {
+  const { actionRef, ...restPorps } = props;
+
+  return <PullToPushRefresh ref={actionRef} {...restPorps} />;
+}
+
+export default WrappedPullToPushRefresh

package/src/components/common/Radio/index.scss

@@ -0,0 +1,15 @@
+// 样式基础文件（变量和 mixin）已通过 Taro 配置自动注入，无需手动导入
+.we-radio {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 31px;
+  height: 31px;
+  border: 2px solid #D7D7D7;
+  border-radius: 50%;
+}
+
+.we-radio--select {
+  border-color: transparent !important;
+  background: $primary-color;
+}

package/src/components/common/Radio/index.tsx

@@ -0,0 +1,56 @@
+import { Check } from '@nutui/icons-react-taro';
+import { View } from '@tarojs/components';
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import './index.scss';
+
+export type RadioProps = {
+  /**
+   * 是否选中
+   * @default false
+   */
+  visible: boolean
+  /**
+   * 大小 大小等同于圆圈宽度
+   * @default 10
+   */
+  size?: number
+  /**
+   * 边框颜色
+   * @default '#AAAAAA'
+   */
+  borderColor?: string
+  /**
+   * 边框宽度
+   * @default 1
+   */
+  borderWidth?: number
+};
+
+const Radio: React.FC<RadioProps> = (props) => {
+  const {
+    visible = false,
+    size = 10,
+    borderColor = '#D7D7D7',
+    borderWidth = 1,
+  } = props
+
+  const circleStyles = useMemo(() => ({
+    width: size * 1.5,
+    height: size * 1.5,
+    borderWidth,
+    borderColor: visible ? '#3b4eae' : borderColor,
+  }), [])
+
+  return (
+    <View style={circleStyles}
+      className={classNames(
+        'we-radio',
+        { 'we-radio--select': visible }
+      )}>
+      {visible ? (<Check size={size} color='#ffffff' />) : null}
+    </View>
+  );
+};
+
+export default Radio;

package/src/components/common/TabPane/index.tsx

@@ -0,0 +1,26 @@
+import React, { PropsWithChildren } from 'react';
+import { View } from '@tarojs/components';
+import classNames from 'classnames'
+/** 和Tabs共用样式 */
+import '../Tabs/index.scss';
+
+export type TabPaneProps = {
+  /** 标题 */
+  title: string
+};
+
+const TabPane: React.FC<PropsWithChildren<TabPaneProps>> = (props) => {
+  const {
+    children
+  } = props
+
+  return (
+    <View
+      className={classNames('bd-tabs__pane')}
+    >
+      {children}
+    </View>
+  );
+};
+
+export default TabPane;

package/src/components/common/Tabs/index.scss

@@ -0,0 +1,60 @@
+// 样式基础文件（变量和 mixin）已通过 Taro 配置自动注入，无需手动导入
+$tabs-header-height: 92px;
+$tabs-header-title-color: #333333;
+
+.we-tabs {
+  &__header {
+    padding-inline: 20px;
+    box-sizing: border-box;
+    height: $tabs-header-height;
+    background-color: #ffffff;
+    overflow: hidden;
+
+    &-item {
+      position: relative;
+      font-size: 28px;
+      line-height: $tabs-header-height;
+      text-align: center;
+
+      &__text {
+        color: $tabs-header-title-color;
+      }
+
+      &__line {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0px;
+        margin: auto;
+        width: 59px;
+        height: 14px;
+        background: $primary-color;
+        border-radius: 7px;
+        opacity: 0;
+      }
+    }
+
+    &-item--active {
+      font-weight: bold;
+
+      .bd-tabs__header-item__line {
+        overflow: hidden;
+        opacity: 1;
+      }
+    }
+  }
+
+  &__list {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  &__header-border {
+    border-bottom: 1px solid #F0F0F0;
+  }
+
+  &__body {
+    overflow: hidden;
+  }
+}

package/src/components/common/Tabs/index.tsx

@@ -0,0 +1,107 @@
+import React, { CSSProperties, PropsWithChildren, useMemo } from 'react';
+import { ScrollView, View } from '@tarojs/components';
+import TabPane, { TabPaneProps } from '../TabPane';
+import classNames from 'classnames';
+import './index.scss';
+
+export type TabsProps = {
+  /**
+   * 标签栏样式
+   * @default {}
+   */
+  tabStyle?: CSSProperties
+  /**
+  * 当前激活 tab 面板的值
+  * @default 0
+  */
+  value: number
+  className?: string;
+  /** 是否需要滚动 */
+  scroll?: boolean
+  tabsRender?: (dom: { tabsDom: React.ReactNode }) => React.ReactNode
+  // style?: CSSProperties;
+  onChange: (value: number) => void
+};
+
+interface TabsComponent extends React.FC<PropsWithChildren<TabsProps>> {
+  TabPane: React.FC<PropsWithChildren<TabPaneProps>>;
+}
+
+const Tabs: TabsComponent = (props) => {
+  const {
+    value = 0,
+    onChange,
+    className,
+    // style,
+    scroll,
+    tabStyle = {},
+    tabsRender: tabsRenderProps,
+    children
+  } = props;
+
+  const titles = useMemo(() => {
+    return React.Children.map(children, (child: any) => {
+      return child?.props?.title;
+    }) || [];
+  }, [children])
+
+  const tabsDom = () => {
+    const tabListDom = (
+      <>
+        {titles?.map((it: string, index: number) => (
+          <View
+            className={classNames(
+              'we-tabs__header-item',
+              { 'we-tabs__header-item--active': value === index }
+            )}
+            key={index}
+            style={{ width: `calc(100vw / ${titles?.length})` }}
+            onClick={() => { onChange(index) }}
+          >
+            <View className='we-tabs__header-item__line' />
+            <View className='we-tabs__header-item__text'>{it}</View>
+          </View>
+        ))}
+      </>
+    )
+    if (scroll) {
+      return (
+        <ScrollView style={{ whiteSpace: 'nowrap' }} scrollX className='we-tabs__scroll'>
+          <View className='we-tabs__list'>
+            {tabListDom}
+          </View>
+        </ScrollView>
+      )
+    }
+    return (
+      <View className='we-tabs__list'>
+        {tabListDom}
+      </View>
+    )
+  }
+
+  const tabsRender = () => {
+    return tabsRenderProps ? tabsRenderProps({ tabsDom: tabsDom() }) : tabsDom()
+  }
+
+  return (
+    <View className={classNames('we-tabs', className)}>
+      <View className={classNames('we-tabs__header')} style={tabStyle}>
+        {tabsRender()}
+      </View>
+      <View className='we-card__body'>
+        {React.Children.map(children, (child, index) => {
+          if (index === value) {
+            return child;
+          } else {
+            return null;
+          }
+        })}
+      </View>
+    </View>
+  );
+};
+
+Tabs.TabPane = TabPane
+
+export default Tabs;

package/src/components/common/UploadFile/index.scss

@@ -0,0 +1,59 @@
+.uploadImg {
+  display: flex;
+  flex-wrap: wrap;
+
+  &__item {
+    position: relative;
+    margin-right: 9px;
+    margin-bottom: 10px;
+    width: 140px;
+    height: 142px;
+    border-radius: 10px;
+    overflow: hidden;
+
+    .deleteImg{
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 31px;
+      height: 31px;
+      // @include bgImg('/aliyunOSSUpload_deleteIcon.png');
+    }
+
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__item:nth-child(4n) {
+    margin-right: 0;
+  }
+
+  &__add {
+    position: relative;
+    width: 140px;
+    height: 142px;
+    background: #f0f0f0;
+    border-radius: 10px;
+
+    .add_icon {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+      width: 30px;
+      height: 30px;
+      // @include bgImg('/aliyunOSSUpload_addIcon.png')
+    }
+
+    .add_icon:nth-child(2) {
+      top: 25%;
+      left: 51%;
+      width: 2px;
+      height: 60px;
+    }
+  }
+}