oxy-uni-ui 1.0.1

package/components/oxy-upload/types.ts

@@ -0,0 +1,391 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import type { LoadingType } from '../oxy-loading/types'
+import type { ImageMode } from '../oxy-img/types'
+
+export interface ChooseFileOption {
+  // 是否支持多选文件
+  multiple?: boolean
+  // 所选的图片的尺寸
+  sizeType?: UploadSizeType[]
+  // 选择文件的来源
+  sourceType?: UploadSourceType[]
+  // 最大允许上传个数
+  maxCount?: number
+  // 接受文件类型
+  accept?: UploadFileType
+  /**
+   * 是否压缩视频，当 accept 为 video 时生效。
+   */
+  compressed?: boolean
+  /**
+   * 拍摄视频最长拍摄时间，当 accept 为 video | media 时生效，单位秒。
+   */
+  maxDuration?: number
+  /**
+   * 使用前置或者后置相机，当 accept 为 video | media 时生效，可选值为：back｜front。
+   */
+  camera?: UploadCameraType
+  /**
+   * 根据文件拓展名过滤,H5、微信小程序支持
+   * 每一项都不能是空字符串, 默认不过滤
+   * 例如: ['.jpg'] 表示只选择.jpg文件
+   */
+  extension?: string[]
+}
+
+export type UploadFileItem = {
+  [key: string]: any
+  // 	当前上传文件在列表中的唯一标识
+  uid: number
+  // 缩略图地址
+  thumb?: string
+  // 当前文件名称，仅h5支持
+  name?: string
+  // 上传状态。若自定义了status-key，应取对应字段
+  status?: UploadStatusType
+  // 文件大小
+  size?: number
+  // 上传图片/视频的本地地址
+  url: string
+  // 上传进度
+  percent?: number
+  // 后端返回的内容，可能是对象，也可能是字符串
+  response?: string | Record<string, any>
+}
+
+export interface ChooseFile {
+  path: string // 上传临时地址
+  size?: number // 上传大小
+  name?: string // 当前文件名称，仅h5支持
+  type: 'image' | 'video' | 'file' // 上传类型
+  duration?: number // 上传时间
+  thumb?: string // 缩略图地址
+}
+
+export type UploadSourceType = 'album' | 'camera'
+export type UploadSizeType = 'original' | 'compressed'
+export type UploadFileType = 'image' | 'video' | 'media' | 'all' | 'file'
+export type UploadCameraType = 'front' | 'back'
+export type UploadStatusType = 'pending' | 'loading' | 'success' | 'fail'
+
+export type UploadBeforePreviewOption = {
+  file: UploadFileItem
+  index: number
+  imgList: string[]
+  fileList: UploadFileItem[]
+  resolve: (isPass: boolean) => void
+}
+export type UploadBeforePreview = (option: UploadBeforePreviewOption) => void
+
+export type UploadOnPreviewFailOption = {
+  index: number
+  imgList: string[]
+}
+export type UploadOnPreviewFail = (option: UploadOnPreviewFailOption) => void
+
+export type UploadBeforeRemoveOption = {
+  file: UploadFileItem
+  index: number
+  fileList: UploadFileItem[]
+  resolve: (isPass: boolean) => void
+}
+export type UploadBeforeRemove = (option: UploadBeforeRemoveOption) => void
+
+export type UploadBeforeChooseOption = {
+  fileList: UploadFileItem[]
+  resolve: (isPass: boolean) => void
+}
+export type UploadBeforeChoose = (option: UploadBeforeChooseOption) => void
+
+export type UploadBeforeUploadOption = {
+  files: Record<string, any>[]
+  fileList: UploadFileItem[]
+  resolve: (isPass: boolean) => void
+}
+export type UploadBeforeUpload = (options: UploadBeforeUploadOption) => void
+
+export type UploadFormData = Record<string, any>
+
+export type UploadBuildFormDataOption = {
+  file: UploadFileItem
+  formData: UploadFormData
+  resolve: (formData: Record<string, any>) => void
+}
+export type UploadBuildFormData = (options: UploadBuildFormDataOption) => void
+
+export type UploadFile = Partial<UploadFileItem> & { url: string }
+
+export type UploadMethod = (
+  uploadFile: UploadFileItem,
+  formData: UploadFormData,
+  options: {
+    action: string
+    header: Record<string, any>
+    name: string
+    fileName: string
+    fileType: 'image' | 'video' | 'audio'
+    statusCode: number
+    // 添加是否自动中断之前上传的选项
+    abortPrevious?: boolean
+    onSuccess: (res: UniApp.UploadFileSuccessCallbackResult, file: UploadFileItem, formData: UploadFormData) => void
+    onError: (res: UniApp.GeneralCallbackResult, file: UploadFileItem, formData: UploadFormData) => void
+    onProgress: (res: UniApp.OnProgressUpdateResult, file: UploadFileItem) => void
+  }
+) => UniApp.UploadTask | void | Promise<void> // 修改这里,支持返回 UploadTask 类型
+
+export const uploadProps = {
+  ...baseProps,
+  /**
+   * 上传的文件列表,例如:[{name:'food.jpg',url:'https://xxx.cdn.com/xxx.jpg'}]
+   * 类型：array
+   * 默认值：[]
+   */
+  fileList: makeArrayProp<UploadFile>(),
+  /**
+   * 必选参数，上传的地址
+   * 类型：string
+   * 默认值：''
+   */
+  action: makeStringProp(''),
+  /**
+   * 设置上传的请求头部
+   * 类型：object
+   * 默认值：{}
+   */
+  header: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+  /**
+   * 是否支持多选文件
+   * 类型：boolean
+   * 默认值：false
+   */
+  multiple: makeBooleanProp(false),
+  /**
+   * 是否禁用
+   * 类型：boolean
+   * 默认值：false
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 最大允许上传个数
+   * 类型：number
+   * 默认值：无
+   */
+  limit: Number,
+  /**
+   * 限制上传个数的情况下，是否展示当前上传的个数
+   * 类型：boolean
+   * 默认值：true
+   */
+  showLimitNum: makeBooleanProp(true),
+  /**
+   * 文件大小限制，单位为byte
+   * 类型：number
+   * 默认值：Number.MAX_VALUE
+   */
+  maxSize: makeNumberProp(Number.MAX_VALUE),
+  /**
+   * 选择图片的来源，chooseImage接口详细参数，查看官方手册
+   * 类型：array
+   * 默认值：['album','camera']
+   */
+  sourceType: {
+    type: Array as PropType<UploadSourceType[]>,
+    default: () => ['album', 'camera']
+  },
+  /**
+   * 所选的图片的尺寸，chooseImage接口详细参数，查看官方手册
+   * 类型：array
+   * 默认值：['original','compressed']
+   */
+  sizeType: {
+    type: Array as PropType<UploadSizeType[]>,
+    // #ifndef MP-DINGTALK
+    default: () => ['original', 'compressed']
+    // #endif
+  },
+  /**
+   * 文件对应的key，开发者在服务端可以通过这个key获取文件的二进制内容，uploadFile接口详细参数，查看官方手册
+   * 类型：string
+   * 默认值：'file'
+   */
+  name: makeStringProp('file'),
+  /**
+   * HTTP请求中其他额外的formdata，uploadFile接口详细参数，查看官方手册
+   * 类型：object
+   * 默认值：{}
+   */
+  formData: { type: Object as PropType<UploadFormData>, default: () => ({}) },
+  /**
+   * 预览失败执行操作
+   * 类型：function({index,imgList})
+   * 默认值：-
+   */
+  onPreviewFail: Function as PropType<UploadOnPreviewFail>,
+  /**
+   * 上传文件之前的钩子，参数为上传的文件和文件列表，若返回false或者返回Promise且被reject，则停止上传。
+   * 类型：function({files,fileList,resolve})
+   * 默认值：-
+   */
+  beforeUpload: Function as PropType<UploadBeforeUpload>,
+  /**
+   * 选择图片之前的钩子，参数为文件列表，若返回false或者返回Promise且被reject，则停止上传。
+   * 类型：function({fileList,resolve})
+   * 默认值：-
+   */
+  beforeChoose: Function as PropType<UploadBeforeChoose>,
+  /**
+   * 删除文件之前的钩子，参数为要删除的文件和文件列表，若返回false或者返回Promise且被reject，则停止上传。
+   * 类型：function({file,fileList,resolve})
+   * 默认值：-
+   */
+  beforeRemove: Function as PropType<UploadBeforeRemove>,
+  /**
+   * 图片预览前的钩子，参数为预览的图片下标和图片列表，若返回false或者返回Promise且被reject，则停止上传。
+   * 类型：function({index,imgList,resolve})
+   * 默认值：-
+   */
+  beforePreview: Function as PropType<UploadBeforePreview>,
+  /**
+   * 构建上传formData的钩子，参数为上传的文件、待处理的formData，返回值为处理后的formData，若返回false或者返回Promise且被reject，则停止上传。
+   * 类型：function({file,formData,resolve})
+   * 默认值：-
+   * 最低版本：0.1.61
+   */
+  buildFormData: Function as PropType<UploadBuildFormData>,
+  /**
+   * 加载中图标类型
+   * 类型：string
+   * 默认值：'ring'
+   */
+  loadingType: makeStringProp<LoadingType>('ring'),
+  /**
+   * 加载中图标颜色
+   * 类型：string
+   * 默认值：'#ffffff'
+   */
+  loadingColor: makeStringProp('#ffffff'),
+  /**
+   * 文件类型，可选值：'image' | 'video' | 'media' | 'all' | 'file'
+   * 默认值：image
+   * 描述：'media'表示同时支持'image'和'video'，'file'表示支持除'image'和'video'外的所有文件类型，'all'标识支持全部类型文件
+   * 'media'和'file'仅微信支持，'all'仅微信和H5支持
+   */
+  accept: makeStringProp<UploadFileType>('image'),
+  /**
+   * file 数据结构中，status 对应的 key
+   * 类型：string
+   * 默认值：'status'
+   */
+  statusKey: makeStringProp('status'),
+  /**
+   * 加载中图标尺寸
+   * 类型：string
+   * 默认值：'24px'
+   */
+  loadingSize: makeStringProp('24px'),
+  /**
+   * 是否压缩视频，当 accept 为 video 时生效。
+   * 类型：boolean
+   * 默认值：true
+   */
+  compressed: makeBooleanProp(true),
+  /**
+   * 拍摄视频最长拍摄时间，当 accept 为 video | media 时生效，单位秒。
+   * 类型：number
+   * 默认值：60
+   */
+  maxDuration: makeNumberProp(60),
+  /**
+   * 使用前置或者后置相机，当 accept 为 video | media 时生效，可选值为：back｜front。
+   * 类型：UploadCameraType
+   * 默认值：'back'
+   */
+  camera: makeStringProp<UploadCameraType>('back'),
+  /**
+   * 预览图片的mode属性
+   */
+  imageMode: makeStringProp<ImageMode>('aspectFit'),
+  /**
+   * 接口响应的成功状态（statusCode）值
+   */
+  successStatus: makeNumberProp(200),
+  /**
+   * 自定义上传按钮样式
+   * 类型：string
+   */
+  customEvokeClass: makeStringProp(''),
+  /**
+   * 自定义预览图片列表样式
+   * 类型：string
+   */
+  customPreviewClass: makeStringProp(''),
+  /**
+   * 是否选择文件后自动上传
+   * 类型：boolean
+   */
+  autoUpload: makeBooleanProp(true),
+  /**
+   * 点击已上传时是否可以重新上传
+   * 类型：boolean
+   * 默认值：false
+   */
+  reupload: makeBooleanProp(false),
+  /**
+   * 自定义上传文件的请求方法
+   * 类型：UploadMethod
+   * 默认值：-
+   */
+  uploadMethod: Function as PropType<UploadMethod>,
+  /**
+   * 根据文件拓展名过滤,每一项都不能是空字符串。默认不过滤。
+   * H5支持全部类型过滤。
+   * 微信小程序支持all和file时过滤,其余平台不支持。
+   */
+  extension: Array as PropType<string[]>
+}
+
+export type UploadProps = ExtractPropTypes<typeof uploadProps>
+
+export type UploadExpose = {
+  /**
+   * 手动触发上传
+   */
+  submit: () => void
+  /**
+   * 取消上传
+   * @param task 上传任务
+   */
+  abort: (task?: UniApp.UploadTask) => void
+}
+
+export type UploadErrorEvent = {
+  error: any
+  file: UploadFileItem
+  formData: UploadFormData
+}
+
+export type UploadChangeEvent = {
+  fileList: UploadFileItem[]
+}
+
+export type UploadSuccessEvent = {
+  file: UploadFileItem
+  fileList: UploadFileItem[]
+  formData: UploadFormData
+}
+
+export type UploadProgressEvent = {
+  response: UniApp.OnProgressUpdateResult
+  file: UploadFileItem
+}
+
+export type UploadOversizeEvent = {
+  file: ChooseFile
+}
+
+export type UploadRemoveEvent = {
+  file: UploadFileItem
+}
+
+export type UploadInstance = ComponentPublicInstance<UploadProps, UploadExpose>

package/components/oxy-video-preview/index.scss

@@ -0,0 +1,34 @@
+@import "../common/abstracts/variable.scss";
+@import "../common/abstracts/_mixin.scss";
+
+@include b(video-preview) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: $-video-preview-bg;
+
+  @include e(video) {
+    width: 100%;
+    height: 242px;
+    transition: all 0.3s ease;
+  }
+
+  @include edeep(close) {
+    position: absolute;
+    box-sizing: border-box;
+    top: 0px;
+    right: 0px;
+    padding: 12px;
+    text-align: center;
+    cursor: pointer;
+    font-size: $-video-preview-close-font-size;
+    color: $-video-preview-close-color;
+  }
+}

package/components/oxy-video-preview/oxy-video-preview.vue

@@ -0,0 +1,72 @@
+<template>
+  <view :class="`oxy-video-preview ${customClass}`" :style="customStyle" v-if="showPopup" @click="close">
+    <view class="oxy-video-preview__video" @click.stop="">
+      <video
+        class="oxy-video-preview__video"
+        v-if="previdewVideo.url"
+        :controls="true"
+        :poster="previdewVideo.poster"
+        :title="previdewVideo.title"
+        play-btn-position="center"
+        :enableNative="true"
+        :src="previdewVideo.url"
+        :enable-progress-gesture="false"
+      ></video>
+    </view>
+    <oxy-icon name="close" :custom-class="`oxy-video-preview__close`" @click="close" />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-video-preview',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { nextTick, reactive, ref } from 'vue'
+import { videoPreviewProps, type PreviewVideo, type VideoPreviewExpose } from './types'
+import { useLockScroll } from '../composables/useLockScroll'
+defineProps(videoPreviewProps)
+
+const showPopup = ref<boolean>(false)
+const previdewVideo = reactive<PreviewVideo>({ url: '', poster: '', title: '' })
+
+function open(video: PreviewVideo) {
+  showPopup.value = true
+  previdewVideo.url = video.url
+  previdewVideo.poster = video.poster
+  previdewVideo.title = video.title
+}
+
+function close() {
+  showPopup.value = false
+  nextTick(() => {
+    handleClosed()
+  })
+}
+
+function handleClosed() {
+  previdewVideo.url = ''
+  previdewVideo.poster = ''
+  previdewVideo.title = ''
+}
+
+// #ifdef H5
+useLockScroll(() => showPopup.value)
+// #endif
+
+defineExpose<VideoPreviewExpose>({
+  open,
+  close
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-video-preview/types.ts

@@ -0,0 +1,23 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps } from '../common/props'
+
+export const videoPreviewProps = {
+  ...baseProps
+}
+
+export type PreviewVideo = {
+  url: string // 视频资源地址
+  poster?: string // 视频封面
+  title?: string // 视频标题
+}
+
+export type VideoPreviewProps = ExtractPropTypes<typeof videoPreviewProps>
+
+export type VideoPreviewExpose = {
+  // 打开弹框
+  open: (video: PreviewVideo) => void
+  // 关闭弹框
+  close: () => void
+}
+
+export type VideoPreviewInstance = ComponentPublicInstance<VideoPreviewExpose, VideoPreviewProps>

package/components/oxy-watermark/index.scss

@@ -0,0 +1,18 @@
+@import "../common/abstracts/variable.scss";
+@import "../common/abstracts/_mixin.scss";
+
+@include b(watermark) {
+  position: absolute;
+  z-index: 1100;
+  opacity: 0.5;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+  background-repeat: repeat;
+
+  @include when(fullscreen) {
+    position: fixed;
+  }
+}