@zamlia/mini-ui 0.0.1

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

@@ -0,0 +1,321 @@
+import Taro from '@tarojs/taro';
+import React, { useEffect, useState } from 'react';
+import { View, Image, ITouchEvent } from '@tarojs/components';
+import { 
+  beforeUpload, 
+  convertToDomainFile, 
+  convertToUploadValue, 
+  getKeyName, 
+  uploadImageTypes, 
+  uploadTypes, 
+  uploadVideoTypes 
+} from './utils';
+import { Utils } from '@utils';
+import { uploadFile, UploadFileOption } from './upload';
+import VideoView from '../VideoView';
+import './index.scss';
+
+export type UploadFile = {
+  url: string
+}
+
+export type UploadFileProps = {
+  host: string
+  /**
+   * 可上传文件类型
+   */
+  fileTypes?: string[];
+  value?: any;
+  /**
+   * 最大文件大小，单位MB（暂时没有）
+   */
+  maxSize?: number;
+  /**
+   * 最多上传多少个文件
+   * 最多是8张图片
+   */
+  maxCount?: number;
+  /**
+   * 是否展示删除按钮
+   */
+  showDelete?: boolean;
+  chooseType?: 'img' | 'video' | 'media'
+  dir?: string
+  /**
+   * 扩展参数
+   */
+  extraData?: Record<string, any>
+  onChange?: (v?: any) => void;
+}
+
+interface UploadFileConponent extends React.FC<UploadFileProps> {
+  upload?: (options: UploadFileOption) => Promise<string>
+  /** 文件类型 */
+  UPLOAD_TYPES: string[]
+  /** 图片类型 */
+  UPLOAD_IMAGE_TYPES: string[]
+  /** 视频类型 */
+  UPLOAD_VIDEO_TYPES: string[]
+}
+
+/**
+ *
+ * @param props
+ * @returns React.ReactElement
+ */
+export const UploadFile: UploadFileConponent = (props) => {
+  let {
+    host,
+    value = [],
+    fileTypes = uploadImageTypes,
+    maxCount = 1,
+    showDelete = false,
+    chooseType = 'img',
+    dir,
+    extraData = {},
+    onChange: handleDomainFileChange
+  } = props
+  const [files, setFiles] = useState<UploadFile[]>([]);
+  const [loading] = useState<boolean>(false);
+
+  // maxCount = maxCount > 8 ? 8 : maxCount;
+
+  useEffect(() => {
+    // 取出上传中的文件
+    const uploadValue = convertToUploadValue(value);
+    const newFileList = [...uploadValue, ...files] as UploadFile[];
+    // 设置文件列表
+    setFiles(newFileList);
+  }, [])
+
+    const handleExtraData = async (file: any, dir?: string) => {
+
+    return {
+      key: `${dir}/${getKeyName(file)}`,
+      ...extraData
+    };
+  };
+
+  /**
+   * 上传图片
+   * @param index
+   * @returns
+   */
+  const handleUploadFile = async (_: ITouchEvent, index?: number) => {
+    if (maxCount !== 1 && isNaN(index || NaN) && files.length >= maxCount) {
+      Taro.showToast({ title: `最多只能上传${maxCount}文件` })
+      return;
+    }
+
+    let chooseFn = handleChooseImage;
+    if (chooseType === 'video') {
+      chooseFn = handleChooseVideo
+    } else if (chooseType === 'media') {
+      chooseFn = handleChooseMedia
+    } else {
+      chooseFn = handleChooseImage;
+    }
+
+    chooseFn().then(async chooseImageList => {
+      let firstChooseImageUrl: string = Array.isArray(chooseImageList) ? chooseImageList[0]!! : chooseImageList
+      const pass = beforeUpload(firstChooseImageUrl, fileTypes);
+      if (!pass) {
+        Taro.hideLoading();
+        return;
+      }
+      if (loading) return;
+      Taro.showLoading({ title: '上传中...' });
+
+      const formData = await handleExtraData(firstChooseImageUrl, dir);
+      Taro.uploadFile({
+        url: host,
+        // @ts-ignore
+        fileType: 'image',
+        filePath: firstChooseImageUrl,
+        name: 'file',
+        header: {
+          'content-type': 'multipart/form-data'
+        },
+        formData,
+        success(res) {
+          let { statusCode } = res;
+          //do something
+          if (!/2\d/.test(statusCode as any)) {
+            Taro.hideLoading();
+            Taro.showToast({ title: '上传失败' })
+            return;
+          }
+          let newFiles: UploadFile[] = Utils.cloneDeep(files);
+          let ossImgUrl = `${host}/${dir}/${getKeyName(firstChooseImageUrl)}`;
+          if (maxCount === 1) {
+            if (!newFiles[0]) {
+              newFiles.push({
+                url: ossImgUrl
+              })
+            } else {
+              newFiles[0].url = ossImgUrl
+            }
+          } else {
+            if (!isNaN(index || NaN)) {
+              newFiles[index || NaN].url = ossImgUrl
+            } else {
+              newFiles.push({
+                url: ossImgUrl
+              })
+            }
+          }
+          handleDomainFileChange?.(convertToDomainFile(maxCount, newFiles));
+          setFiles(newFiles);
+          Taro.hideLoading();
+        },
+        fail(res) {
+          console.error('上传失败错误信息：', res);
+          Taro.hideLoading();
+          Taro.showToast({ title: `上传失败${res?.errMsg ? `,${res?.errMsg}` : ''}` })
+        }
+      })
+    })
+  }
+
+  /**
+   * 删除图片
+   * @param index
+   */
+  const handleDeleteImg = async (e: ITouchEvent, index: number) => {
+    e.stopPropagation()
+    if (files?.length === 0) return
+    let newFiles = Utils.cloneDeep(files)
+    newFiles.splice(index, 1);
+    if (handleDomainFileChange) {
+      handleDomainFileChange(convertToDomainFile(maxCount, newFiles));
+    }
+    setFiles(newFiles)
+  }
+
+  /**
+   * 选择图片
+   */
+  const handleChooseImage = (): Promise<any> => {
+    return new Promise((resolve, reject) => {
+      Taro.chooseImage({
+        count: 1,
+        // sizeType: [],
+        success(res) {
+          const tempFilePaths = res.tempFilePaths
+          resolve(tempFilePaths)
+        },
+        fail(res) {
+          reject(res)
+        }
+      })
+    })
+  }
+
+  /**
+     * 选择视频
+     */
+  const handleChooseVideo = (): Promise<any> => {
+    return new Promise((resolve, reject) => {
+      Taro.chooseVideo({
+        maxDuration: 60,
+        sourceType: ['album', 'camera'],
+        // sizeType: [],
+        success(res) {
+          const tempFilePaths = res.tempFilePath
+          resolve([tempFilePaths])
+        },
+        fail(res) {
+          reject(res)
+        }
+      })
+    })
+  }
+
+  /**
+       * 选择图片视频
+       */
+  const handleChooseMedia = (): Promise<any> => {
+    return new Promise((resolve, reject) => {
+      Taro.chooseMedia({
+        count: 1,
+        mediaType: ['image', 'video'],
+        sourceType: ['album', 'camera'],
+        maxDuration: 60,
+        camera: 'back',
+        success(res) {
+          const tempFilePaths = res.tempFiles
+          resolve(tempFilePaths)
+        },
+        fail(res) {
+          reject(res)
+        }
+      })
+    })
+  }
+
+  let firstFile: any = files[0]
+  return (
+    <>
+      <View className='uploadImg'>
+        {
+          maxCount !== 1 &&
+          <>
+            {
+              files?.map((item: any, index) => {
+                return (
+                  <View className='uploadImg__item' onClick={(e) => { handleUploadFile(e, index) }}>
+                    {showDelete && <View className='deleteImg' onClick={(e) => { handleDeleteImg(e, index) }} />}
+                    {
+                      Utils.isImg(item?.url) && <Image src={item?.url} mode={'widthFix'} />
+                    }
+                    {
+                      Utils.isVideo(item?.url) && <VideoView url={item?.url} />
+                    }
+                  </View>
+                )
+              })
+            }
+            {
+              files.length < maxCount &&
+              <View className='uploadImg__add' onClick={handleUploadFile}>
+                <View className='add_icon' />
+              </View>
+            }
+          </>
+        }
+        {maxCount === 1 &&
+          <>
+            {
+              !firstFile?.url ?
+                <View className='uploadImg__add' onClick={(e) => handleUploadFile(e)}>
+                  <View className='add_icon' />
+                </View> :
+                <View className='uploadImg__item' onClick={(e) => {
+                  if (Utils.isImg(firstFile?.url)) {
+                    handleUploadFile(e)
+                  }
+                }}>
+                  {showDelete && <View className='deleteImg' onClick={(e) => { handleDeleteImg(e, 0) }} />}
+                  {
+                    Utils.isImg(firstFile?.url) &&
+                    <Image src={firstFile?.url!} mode={'widthFix'} />
+                  }
+                  {
+                    Utils.isVideo(firstFile?.url) && <VideoView url={firstFile?.url} />
+                  }
+                </View>
+            }
+          </>
+        }
+      </View>
+    </>
+  );
+}
+
+UploadFile.upload = uploadFile;
+UploadFile.UPLOAD_TYPES = uploadTypes;
+UploadFile.UPLOAD_IMAGE_TYPES = uploadImageTypes;
+UploadFile.UPLOAD_VIDEO_TYPES = uploadVideoTypes;
+
+export default UploadFile;
+

package/src/components/common/UploadFile/upload.ts

@@ -0,0 +1,63 @@
+import Taro from "@tarojs/taro"
+import { beforeUpload, getKeyName, uploadImageTypes } from "./utils";
+
+export type UploadFileOption = {
+  file: string
+  dir: string
+  /**
+   * 扩展参数
+  */
+  extraData?: Record<string, any>
+  host: string
+}
+
+const handleExtraData = async (file: any, dir: string, extraData?: Record<string, any>) => {
+
+  return {
+    key: `${dir}/${getKeyName(file)}`,
+    ...extraData
+  };
+};
+
+// 上传头像到服务器
+export const uploadFile = (options: UploadFileOption): Promise<string> => {
+  const { file, dir, extraData, host } = options;
+  const pass = beforeUpload(file, uploadImageTypes);
+
+  return new Promise(async (resolve) => {
+    if (!pass) {
+      Taro.hideLoading();
+      return
+    }
+
+    const extraFormData = await handleExtraData(file, dir, extraData)
+
+    Taro.uploadFile({
+      url: host,
+      // @ts-ignore
+      fileType: 'image',
+      filePath: file,
+      name: 'file',
+      header: {
+        'content-type': 'multipart/form-data'
+      },
+      formData: extraFormData,
+      success(res) {
+        let { statusCode } = res;
+        if (!/2\d/.test(statusCode as any)) {
+          Taro.hideLoading();
+          Taro.showToast({ title: '上传失败' })
+          return;
+        }
+        let ossImgUrl = `${host}/${dir}/${getKeyName(file)}`;
+        resolve(ossImgUrl)
+        Taro.hideLoading();
+      },
+      fail(res) {
+        console.error('上传失败错误信息：', res);
+        Taro.hideLoading();
+        Taro.showToast({ title: `上传失败${res?.errMsg ? `,${res?.errMsg}` : ''}` })
+      }
+    })
+  })
+}

package/src/components/common/UploadFile/utils.ts

@@ -0,0 +1,81 @@
+import Taro from "@tarojs/taro";
+import UploadFile from ".";
+
+export const uploadTypes = ['.rar', '.zip', '.doc', '.docx', '.pdf', '.txt', '.svg', '.png', '.image', '.mp4'];
+export const uploadImageTypes = ['.gif', '.png', '.jpg', '.jpeg', '.image'];
+export const uploadVideoTypes = ['.mp4'];
+
+/**
+ * 将业务文件转换为上传文件
+ * @param v 
+ * @returns 
+ */
+export const convertToUploadValue = (v: string[] | string): any => {
+  if (Array.isArray(v)) {
+    if (!v || v === undefined || v === null) {
+      return [];
+    }
+
+    return (v as any[]).map((it) => ({
+      url: it
+    }));
+  }
+};
+
+/**
+ * 将上传文件转换为业务文件
+ * @param {number} maxCount
+ * @param v 
+ * @returns 
+ */
+export const convertToDomainFile = (maxCount: number, v?: UploadFile[]): any => {
+  if (maxCount > 1) {
+    if (!v) {
+      return [];
+    }
+    return v.map((it) => {
+      return {
+        url: it.url,
+      };
+    });
+  }
+  if (!v) {
+    return [];
+  }
+  const it = v[0];
+  return {
+    url: it.url,
+  };
+};
+
+export const beforeUpload = (file: string, verifyTypes: string[]): boolean => {
+  const isMatchType = verifyTypes.indexOf(file.replace(/.+\./, '.').toLowerCase()) !== -1;
+  if (!isMatchType) {
+    Taro.showModal({ title: `文件格式只支持：${verifyTypes.join('，')}` })
+    return false;
+  }
+  // const isLimitSize = file.size / 1024 / 1024 < 8;
+  // if (!isLimitSize) {
+  //   utils.showToastError({ title: `文件必须小于${maxSize}MB` });
+  //   return false;
+  // }
+  return true;
+};
+
+export const getKeyName = (file: string) => {
+
+    let key = file;
+    if (file?.split("http://tmp/").length === 2) {
+      key = file?.split("http://tmp/")[1];
+    }
+    if (file?.split("https://resource/").length === 2) {
+      key = file?.split("https://resource/")[1];
+    }
+    if (file?.replace(/.+\./, '.').toLowerCase() === '.image') {
+      key = key?.replace('.image', '.png')
+    }
+    if (file?.replace(/.+\./, '.').toLowerCase() === '.video') {
+      key = key?.replace('.video', '.mp4')
+    }
+    return key;
+  }

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Video, View } from '@tarojs/components';
+
+export type VideoViewProps = {
+  url: string
+  hasToH5Show?: boolean
+  width?: number
+  height?: number
+  onH5Open?: (url: string) => void
+};
+
+/**
+ * 视频显示
+ */
+const VideoView: React.FC<VideoViewProps> = (props) => {
+  const {
+    url,
+    hasToH5Show = true,
+    width,
+    height,
+    onH5Open
+  } = props;
+
+  return (
+    <>
+      <View
+        style={{
+          width,
+          height
+        }}
+        onClick={() => {
+          if (!hasToH5Show) return
+          onH5Open?.(url);
+        }}>
+        <Video
+          id='myvideo'
+          src={url}
+          initialTime={0}
+          controls={false}
+          autoplay={false}
+          loop={false}
+          muted={false}
+          showPlayBtn={false}
+        />
+      </View>
+    </>
+  );
+};
+
+export default VideoView;

package/src/components/common/index.ts

@@ -0,0 +1,23 @@
+export { default as BottomPopup} from './BottomPopup'
+export { default as Card} from './Card'
+export { default as Modal} from './Modal'
+export { default as NavBar} from './NavBar'
+export { default as Page} from './Page'
+export { default as PullToPushRefresh} from './PullToPushRefresh'
+export { default as Tabs } from './Tabs';
+export { default as VideoView } from './VideoView';
+export { default as UploadFile } from './UploadFile';
+export { default as Radio } from './Radio';
+export { default as DataSelect } from './DataSelect';
+
+export type { BottomPopupProps } from './BottomPopup'
+export type  { CardProps} from './Card'
+export type  { ModalProps} from './Modal'
+export type  { NavBarProps} from './NavBar'
+export type  { PageProps} from './Page'
+export type  { PullToPushRefreshProps} from './PullToPushRefresh'
+export type  { TabsProps } from './Tabs';
+export type  { VideoViewProps } from './VideoView';
+export type { UploadFileProps } from './UploadFile';
+export type { RadioProps } from './Radio';
+export type { DataSelectProps } from './DataSelect';

package/src/components/industry/CitySelectButton/index.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { View } from '@tarojs/components';
+import CitySelectModal, { CityData } from '../CitySelectModal';
+import './index.scss';
+
+export type CitySelectButtonProps = {
+  className?: string
+  onChange?: (value: CityData) => void;
+  /**
+   * @param {CityData} value
+   * @returns {React.ReactElement}
+  */
+  buttonRender: (value: CityData) => React.ReactElement
+}
+
+/**
+ * 顶部选择城市按钮
+ */
+const CitySelectButton: React.FC<CitySelectButtonProps> = (props) => {
+  const {
+    className,
+    onChange,
+    buttonRender
+  } = props;
+  const [visible, setVisible] = useState<boolean>(false);
+  const [currentCity, setCurrentCity] = useState<CityData>(null as any);
+
+  const handleSelectCity = () => {
+    // @ts-ignore
+    if (process.env.TARO_ENV !== 'alipay') {
+      setVisible(true)
+      return
+    } else {
+      // @ts-ignore
+      my.chooseCity({
+        showLocatedCity: true,
+        showHotCities: true,
+        success: async (result: any) => {
+          let { adCode, city } = result;
+          const cityCode = adCode.slice(3, 4) === '0' ? adCode.replace(/000/, '010') : adCode;
+          console.log(cityCode)
+          let currentCity = {
+            id: cityCode,
+            value: city,
+          }
+          setCurrentCity(currentCity)
+          onChange?.(currentCity)
+        },
+      });
+    }
+  }
+
+  return (
+    <>
+      <View className={className} onClick={handleSelectCity}>
+        {buttonRender(currentCity)}
+      </View>
+
+      {
+        visible && (
+          <CitySelectModal
+            visible={visible}
+            onChange={(city) => {
+              setCurrentCity(city)
+              onChange?.(city)
+              setVisible(false)
+            }}
+            onClose={() => setVisible(false)}
+          />
+        )
+      }
+    </>
+  )
+}
+
+export default CitySelectButton