oxy-uni-ui 1.0.1

package/components/composables/useUpload.ts

@@ -0,0 +1,364 @@
+import { isArray, isDef, isFunction } from '../common/util'
+import type { ChooseFile, ChooseFileOption, UploadFileItem, UploadMethod, UploadStatusType } from '../oxy-upload/types'
+
+export const UPLOAD_STATUS: Record<string, UploadStatusType> = {
+  PENDING: 'pending',
+  LOADING: 'loading',
+  SUCCESS: 'success',
+  FAIL: 'fail'
+}
+
+export interface UseUploadReturn {
+  // 开始上传文件
+  startUpload: (file: UploadFileItem, options: UseUploadOptions) => UniApp.UploadTask | void | Promise<void>
+  // 中断上传
+  abort: (task?: UniApp.UploadTask) => void
+  // 上传状态常量
+  UPLOAD_STATUS: Record<string, UploadStatusType>
+  // 选择文件
+  chooseFile: (options: ChooseFileOption) => Promise<ChooseFile[]>
+}
+
+export interface UseUploadOptions {
+  // 上传地址
+  action: string
+  // 请求头
+  header?: Record<string, any>
+  // 文件对应的 key
+  name?: string
+  // 其它表单数据
+  formData?: Record<string, any>
+  // 文件类型 仅支付宝支持且在支付宝平台必填
+  fileType?: 'image' | 'video' | 'audio'
+  // 成功状态码
+  statusCode?: number
+  // 文件状态的key
+  statusKey?: string
+  // 自定义上传方法
+  uploadMethod?: UploadMethod
+  // 上传成功回调
+  onSuccess?: (res: UniApp.UploadFileSuccessCallbackResult, file: UploadFileItem, formData: Record<string, any>) => void
+  // 上传失败回调
+  onError?: (res: UniApp.GeneralCallbackResult, file: UploadFileItem, formData: Record<string, any>) => void
+  // 上传进度回调
+  onProgress?: (res: UniApp.OnProgressUpdateResult, file: UploadFileItem) => void
+  // 是否自动中断之前的上传任务
+  abortPrevious?: boolean
+  // 根据文件拓展名过滤(H5支持全部类型过滤,微信小程序支持all和file时过滤,其余平台不支持)
+  extension?: string[]
+}
+
+export function useUpload(): UseUploadReturn {
+  let currentTask: UniApp.UploadTask | null = null
+
+  // 中断上传
+  const abort = (task?: UniApp.UploadTask) => {
+    if (task) {
+      task.abort()
+    } else if (currentTask) {
+      currentTask.abort()
+      currentTask = null
+    }
+  }
+
+  /**
+   * 默认上传方法
+   */
+  const defaultUpload: UploadMethod = (file, formData, options) => {
+    // 如果配置了自动中断,则中断之前的上传任务
+    if (options.abortPrevious) {
+      abort()
+    }
+
+    const uploadTask = uni.uploadFile({
+      url: options.action,
+      header: options.header,
+      name: options.name,
+      fileName: options.name,
+      fileType: options.fileType,
+      formData,
+      filePath: file.url,
+      success(res) {
+        if (res.statusCode === options.statusCode) {
+          // 上传成功
+          options.onSuccess(res, file, formData)
+        } else {
+          // 上传失败
+          options.onError({ ...res, errMsg: res.errMsg || '' }, file, formData)
+        }
+      },
+      fail(err) {
+        // 上传失败
+        options.onError(err, file, formData)
+      }
+    })
+
+    currentTask = uploadTask
+
+    // 获取当前文件加载的百分比
+    uploadTask.onProgressUpdate((res) => {
+      options.onProgress(res, file)
+    })
+
+    // 返回上传任务实例,让外部可以控制上传过程
+    return uploadTask
+  }
+
+  /**
+   * 开始上传文件
+   */
+  const startUpload = (file: UploadFileItem, options: UseUploadOptions) => {
+    const {
+      uploadMethod,
+      formData = {},
+      action,
+      name = 'file',
+      header = {},
+      fileType = 'image',
+      statusCode = 200,
+      statusKey = 'status',
+      abortPrevious = false
+    } = options
+
+    // 设置上传中状态
+    file[statusKey] = UPLOAD_STATUS.LOADING
+
+    const uploadOptions = {
+      action,
+      header,
+      name,
+      fileName: name,
+      fileType,
+      statusCode,
+      abortPrevious,
+      onSuccess: (res: UniApp.UploadFileSuccessCallbackResult, file: UploadFileItem, formData: Record<string, any>) => {
+        // 更新文件状态
+        file[statusKey] = UPLOAD_STATUS.SUCCESS
+        currentTask = null
+        options.onSuccess?.(res, file, formData)
+      },
+      onError: (error: UniApp.GeneralCallbackResult, file: UploadFileItem, formData: Record<string, any>) => {
+        // 更新文件状态和错误信息
+        file[statusKey] = UPLOAD_STATUS.FAIL
+        file.error = error.errMsg
+        currentTask = null
+        options.onError?.(error, file, formData)
+      },
+      onProgress: (res: UniApp.OnProgressUpdateResult, file: UploadFileItem) => {
+        // 更新上传进度
+        file.percent = res.progress
+        options.onProgress?.(res, file)
+      }
+    }
+
+    // 返回上传任务实例,支持外部获取uploadTask进行操作
+    if (isFunction(uploadMethod)) {
+      return uploadMethod(file, formData, uploadOptions)
+    } else {
+      return defaultUpload(file, formData, uploadOptions)
+    }
+  }
+
+  /**
+   * 格式化图片信息
+   */
+  function formatImage(res: UniApp.ChooseImageSuccessCallbackResult): ChooseFile[] {
+    // #ifdef MP-DINGTALK
+    // 钉钉文件在files中
+    res.tempFiles = isDef((res as any).files) ? (res as any).files : res.tempFiles
+    // #endif
+    if (isArray(res.tempFiles)) {
+      return res.tempFiles.map((item: any) => ({
+        path: item.path || '',
+        name: item.name || '',
+        size: item.size,
+        type: 'image',
+        thumb: item.path || ''
+      }))
+    }
+    return [
+      {
+        path: (res.tempFiles as any).path || '',
+        name: (res.tempFiles as any).name || '',
+        size: (res.tempFiles as any).size,
+        type: 'image',
+        thumb: (res.tempFiles as any).path || ''
+      }
+    ]
+  }
+
+  /**
+   * 格式化视频信息
+   */
+  function formatVideo(res: UniApp.ChooseVideoSuccess): ChooseFile[] {
+    return [
+      {
+        path: res.tempFilePath || (res as any).filePath || '',
+        name: res.name || '',
+        size: res.size,
+        type: 'video',
+        thumb: (res as any).thumbTempFilePath || '',
+        duration: res.duration
+      }
+    ]
+  }
+
+  /**
+   * 格式化媒体信息
+   */
+  function formatMedia(res: UniApp.ChooseMediaSuccessCallbackResult): ChooseFile[] {
+    return res.tempFiles.map((item) => ({
+      type: item.fileType,
+      path: item.tempFilePath,
+      thumb: item.fileType === 'video' ? item.thumbTempFilePath : item.tempFilePath,
+      size: item.size,
+      duration: item.duration
+    }))
+  }
+
+  /**
+   * 选择文件
+   */
+  function chooseFile({
+    multiple,
+    sizeType,
+    sourceType,
+    maxCount,
+    accept,
+    compressed,
+    maxDuration,
+    camera,
+    extension
+  }: ChooseFileOption): Promise<ChooseFile[]> {
+    return new Promise((resolve, reject) => {
+      switch (accept) {
+        case 'image':
+          // #ifdef MP-WEIXIN
+          uni.chooseMedia({
+            count: multiple ? maxCount : 1,
+            mediaType: ['image'],
+            sourceType,
+            sizeType,
+            camera,
+            success: (res) => resolve(formatMedia(res)),
+            fail: reject
+          })
+          // #endif
+          // #ifndef MP-WEIXIN
+          uni.chooseImage({
+            count: multiple ? maxCount : 1,
+            sizeType,
+            sourceType,
+            // #ifdef H5
+            extension,
+            // #endif
+            success: (res) => resolve(formatImage(res)),
+            fail: reject
+          })
+          // #endif
+          break
+        case 'video':
+          // #ifdef MP-WEIXIN
+          uni.chooseMedia({
+            count: multiple ? maxCount : 1,
+            mediaType: ['video'],
+            sourceType,
+            camera,
+            maxDuration,
+            success: (res) => resolve(formatMedia(res)),
+            fail: reject
+          })
+          // #endif
+          // #ifndef MP-WEIXIN
+          uni.chooseVideo({
+            sourceType,
+            compressed,
+            maxDuration,
+            camera,
+            // #ifdef H5
+            extension,
+            // #endif
+            success: (res) => resolve(formatVideo(res)),
+            fail: reject
+          })
+          // #endif
+          break
+        // #ifdef MP-WEIXIN
+        case 'media':
+          uni.chooseMedia({
+            count: multiple ? maxCount : 1,
+            sourceType,
+            sizeType,
+            camera,
+            maxDuration,
+            success: (res) => resolve(formatMedia(res)),
+            fail: reject
+          })
+          break
+        case 'file':
+          uni.chooseMessageFile({
+            count: multiple ? (isDef(maxCount) ? maxCount : 100) : 1,
+            type: accept,
+            extension,
+            success: (res) => resolve(res.tempFiles),
+            fail: reject
+          })
+          break
+        // #endif
+        case 'all':
+          // #ifdef H5
+          uni.chooseFile({
+            count: multiple ? maxCount : 1,
+            type: accept,
+            extension,
+            success: (res) => resolve(res.tempFiles as ChooseFile[]),
+            fail: reject
+          })
+          // #endif
+          // #ifdef MP-WEIXIN
+          uni.chooseMessageFile({
+            count: multiple ? Number(maxCount) : 1,
+            type: accept,
+            extension,
+            success: (res) => resolve(res.tempFiles),
+            fail: reject
+          })
+          // #endif
+
+          break
+        default:
+          // #ifdef MP-WEIXIN
+          uni.chooseMedia({
+            count: multiple ? maxCount : 1,
+            mediaType: ['image'],
+            sourceType,
+            sizeType,
+            camera,
+            success: (res) => resolve(formatMedia(res)),
+            fail: reject
+          })
+          // #endif
+          // #ifndef MP-WEIXIN
+          uni.chooseImage({
+            count: multiple ? maxCount : 1,
+            sizeType,
+            sourceType,
+            // #ifdef H5
+            extension,
+            // #endif
+            success: (res) => resolve(formatImage(res)),
+            fail: reject
+          })
+          // #endif
+          break
+      }
+    })
+  }
+
+  return {
+    startUpload,
+    abort,
+    UPLOAD_STATUS,
+    chooseFile
+  }
+}

package/components/oxy-action-sheet/index.scss

@@ -0,0 +1,204 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-theme-dark {
+  @include b(action-sheet) {
+    background-color: $-dark-background2;
+    color: $-dark-color;
+
+    @include e(action) {
+      color: $-dark-color;
+      background: $-dark-background2;
+
+      &:not(.oxy-action-sheet__action--disabled):not(.oxy-action-sheet__action--loading):active {
+        background: $-dark-background4;
+      }
+
+      @include m(disabled) {
+        color: $-dark-color-gray;
+      }
+    }
+
+    @include e(subname) {
+      color: $-dark-color3;
+    }
+
+    @include e(cancel) {
+      color: $-dark-color;
+      background: $-dark-background4;
+
+      &:active {
+        background: $-dark-background5;
+      }
+    }
+
+    :deep(.oxy-action-sheet__close) {
+      color: $-dark-color3;
+    }
+
+    @include e(panel-title) {
+      color: $-dark-color;
+    }
+
+    @include e(header) {
+      color: $-dark-color;
+    }
+  }
+}
+
+:deep(.oxy-action-sheet__popup) {
+  border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
+}
+
+@include b(action-sheet) {
+  background-color: $-color-white;
+  padding-bottom: 1px;
+
+  @include edeep(popup) {
+    border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
+  }
+
+  @include e(actions) {
+    padding: 8px 0;
+    max-height: 50vh;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  @include e(action) {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: $-action-sheet-action-height;
+    line-height: $-action-sheet-action-height;
+    color: $-action-sheet-color;
+    font-size: $-action-sheet-fs;
+    text-align: center;
+    border: none;
+    background: $-action-sheet-bg;
+    outline: none;
+
+    &:after {
+      display: none;
+    }
+
+    &:not(&--disabled):not(&--loading):active {
+      background: $-action-sheet-active-color;
+    }
+
+    @include m(disabled) {
+      color: $-action-sheet-disabled-color;
+      cursor: not-allowed;
+    }
+
+    @include m(loading) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: initial;
+    }
+  }
+  
+  @include edeep(action-loading){
+    width: $-action-sheet-loading-size;
+    height: $-action-sheet-loading-size;
+  }
+
+  @include e(name) {
+    display: inline-block;
+  }
+
+  @include e(subname) {
+    display: inline-block;
+    margin-left: 4px;
+    font-size: $-action-sheet-subname-fs;
+    color: $-action-sheet-subname-color;
+  }
+
+  @include e(cancel) {
+    display: block;
+    width: calc(100% - 48px);
+    line-height: $-action-sheet-cancel-height;
+    padding: 0;
+    color: $-action-sheet-cancel-color;
+    font-size: $-action-sheet-fs;
+    text-align: center;
+    border-radius: $-action-sheet-cancel-radius;
+    border: none;
+    background: $-action-sheet-cancel-bg;
+    outline: none;
+    margin: 0 auto 24px;
+    font-weight: $-action-sheet-weight;
+
+    &:active {
+      background: $-action-sheet-active-color;
+    }
+
+    &:after {
+      display: none;
+    }
+  }
+
+  @include e(header) {
+    color: $-action-sheet-color;
+    position: relative;
+    height: $-action-sheet-title-height;
+    line-height: $-action-sheet-title-height;
+    text-align: center;
+    font-size: $-action-sheet-title-fs;
+    font-weight: $-action-sheet-weight;
+  }
+
+  @include edeep(close) {
+    position: absolute;
+    top: $-action-sheet-close-top;
+    right: $-action-sheet-close-right;
+    color: $-action-sheet-close-color;
+    font-size: $-action-sheet-close-fs;
+    transform: rotate(-45deg);
+    line-height: 1.1;
+  }
+
+  @include e(panels) {
+    height: 84px;
+    overflow-y: hidden;
+
+    &:first-of-type {
+      margin-top: 20px;
+    }
+
+    &:last-of-type {
+      margin-bottom: 12px;
+    }
+  }
+
+  @include e(panels-content) {
+    display: flex;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  @include e(panel) {
+    width: 88px;
+    flex: 0 0 auto;
+    display: inline-block;
+    padding: $-action-sheet-panel-padding;
+  }
+
+  @include e(panel-img) {
+    display: block;
+    width: $-action-sheet-panel-img-fs;
+    height: $-action-sheet-panel-img-fs;
+    margin: 0 auto;
+    margin-bottom: 7px;
+    border-radius: $-action-sheet-panel-img-radius;
+  }
+
+  @include e(panel-title) {
+    font-size: $-action-sheet-subname-fs;
+    line-height: 1.2;
+    text-align: center;
+    color: $-action-sheet-color;
+    @include lineEllipsis;
+  }
+}

package/components/oxy-action-sheet/oxy-action-sheet.vue

@@ -0,0 +1,155 @@
+<template>
+  <view>
+    <oxy-popup
+      custom-class="oxy-action-sheet__popup"
+      :custom-style="`${(actions && actions.length) || (panels && panels.length) ? 'background: transparent;' : ''}`"
+      v-model="showPopup"
+      :duration="duration"
+      position="bottom"
+      :close-on-click-modal="closeOnClickModal"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      :lazy-render="lazyRender"
+      :root-portal="rootPortal"
+      @enter="handleOpen"
+      @close="close"
+      @after-enter="handleOpened"
+      @after-leave="handleClosed"
+      @click-modal="handleClickModal"
+      :z-index="zIndex"
+    >
+      <view
+        :class="`oxy-action-sheet ${customClass}`"
+        :style="`${
+          (actions && actions.length) || (panels && panels.length)
+            ? 'margin: 0 10px calc(var(--window-bottom) + 10px) 10px; border-radius: 16px;'
+            : 'margin-bottom: var(--window-bottom);'
+        } ${customStyle}`"
+      >
+        <view v-if="title" :class="`oxy-action-sheet__header ${customHeaderClass}`">
+          {{ title }}
+          <oxy-icon custom-class="oxy-action-sheet__close" name="add" @click="close" />
+        </view>
+        <view class="oxy-action-sheet__actions" v-if="actions && actions.length">
+          <button
+            v-for="(action, rowIndex) in actions"
+            :key="rowIndex"
+            :class="`oxy-action-sheet__action ${action.disabled ? 'oxy-action-sheet__action--disabled' : ''}  ${
+              action.loading ? 'oxy-action-sheet__action--loading' : ''
+            }`"
+            :style="`color: ${action.color}`"
+            @click="select(rowIndex, 'action')"
+          >
+            <oxy-loading custom-class="`oxy-action-sheet__action-loading" v-if="action.loading" />
+            <view v-else class="oxy-action-sheet__name">{{ action.name }}</view>
+            <view v-if="!action.loading && action.subname" class="oxy-action-sheet__subname">{{ action.subname }}</view>
+          </button>
+        </view>
+        <view v-if="formatPanels && formatPanels.length">
+          <view v-for="(panel, rowIndex) in formatPanels" :key="rowIndex" class="oxy-action-sheet__panels">
+            <view class="oxy-action-sheet__panels-content">
+              <view v-for="(col, colIndex) in panel" :key="colIndex" class="oxy-action-sheet__panel" @click="select(rowIndex, 'panels', colIndex)">
+                <image class="oxy-action-sheet__panel-img" :src="(col as any).iconUrl" />
+                <view class="oxy-action-sheet__panel-title">{{ (col as any).title }}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <slot />
+        <button v-if="cancelText" class="oxy-action-sheet__cancel" @click="handleCancel">{{ cancelText }}</button>
+      </view>
+    </oxy-popup>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-action-sheet',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyPopup from '../oxy-popup/oxy-popup.vue'
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import OxyLoading from '../oxy-loading/oxy-loading.vue'
+import { watch, ref } from 'vue'
+import { actionSheetProps, type Panel } from './types'
+import { isArray } from '../common/util'
+
+const props = defineProps(actionSheetProps)
+const emit = defineEmits(['select', 'click-modal', 'cancel', 'closed', 'close', 'open', 'opened', 'update:modelValue'])
+
+const formatPanels = ref<Array<Panel> | Array<Panel[]>>([])
+
+const showPopup = ref<boolean>(false)
+
+watch(() => props.panels, computedValue, { deep: true, immediate: true })
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    showPopup.value = newValue
+  },
+  { deep: true, immediate: true }
+)
+
+function isPanelArray() {
+  return props.panels.length && !isArray(props.panels[0])
+}
+function computedValue() {
+  formatPanels.value = isPanelArray() ? [props.panels as Panel[]] : (props.panels as Panel[][])
+}
+
+function select(rowIndex: number, type: 'action' | 'panels', colIndex?: number) {
+  if (type === 'action') {
+    if (props.actions[rowIndex].disabled || props.actions[rowIndex].loading) {
+      return
+    }
+    emit('select', {
+      item: props.actions[rowIndex],
+      index: rowIndex
+    })
+  } else if (isPanelArray()) {
+    emit('select', {
+      item: props.panels[Number(colIndex)],
+      index: colIndex
+    })
+  } else {
+    emit('select', {
+      item: (props.panels as Panel[][])[rowIndex][Number(colIndex)],
+      rowIndex,
+      colIndex
+    })
+  }
+  if (props.closeOnClickAction) {
+    close()
+  }
+}
+function handleClickModal() {
+  emit('click-modal')
+}
+function handleCancel() {
+  emit('cancel')
+  close()
+}
+function close() {
+  emit('update:modelValue', false)
+  emit('close')
+}
+function handleOpen() {
+  emit('open')
+}
+function handleOpened() {
+  emit('opened')
+}
+function handleClosed() {
+  emit('closed')
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>