oxy-uni-ui 1.1.0 → 1.2.3

package/components/oxy-file-list/oxy-file-list.vue

@@ -1,16 +1,34 @@
 <template>
   <view :class="['oxy-file-list', { 'oxy-file-list__list': props.type === 'list' }, customClass]">
     <block v-if="props.type === 'list'">
-      <view v-for="(file, index) in props.data" :key="index" class="oxy-file-list__list--item" @click="onPreview(file)">
+      <view v-for="(file, index) in props.data" :key="index" class="oxy-file-list__list--item" @click="handleClick(file, index)">
         <image :src="getUploadImage(file)" mode="aspectFill" class="oxy-file-list__icon" />
         <text class="oxy-file-list__name">{{ file.name }}</text>
+        <oxy-loading v-if="props.enableDownload && isDownloading(file)" size="18px" custom-class="oxy-file-list__download" />
+        <view @tap.stop="onDownload(file)" v-if="props.enableDownload && !isDownloading(file)">
+          <oxy-icon name="download" custom-class="oxy-file-list__download" />
+        </view>
+        <view v-if="props.enableDelete && !isDownloading(file)" @tap.stop="onDelete(file, index)">
+          <oxy-icon name="delete" custom-class="oxy-file-list__delete" />
+        </view>
       </view>
     </block>
     <block v-else>
       <view v-for="(file, index) in props.data" :key="index" class="oxy-file-list__item">
         <view class="oxy-file-list__content">
-          <image v-if="isImage(file)" :src="file.url" mode="aspectFill" class="oxy-file-list__picture" @click="onPreview(file)" />
-          <image v-else :src="getUploadImage(file)" mode="aspectFill" class="oxy-file-list__icon" @click="onPreview(file)" />
+          <image v-if="isImage(file)" :src="file.url" mode="aspectFill" class="oxy-file-list__picture" @click="handleClick(file, index)" />
+          <image v-else :src="getUploadImage(file)" mode="aspectFill" class="oxy-file-list__icon" @click="handleClick(file, index)" />
+          <view v-if="props.enableDownload || props.enableDelete" class="oxy-file-list__download-btn">
+            <template v-if="props.enableDownload">
+              <oxy-loading v-if="isDownloading(file)" size="18px" color="#ffffff" custom-class="oxy-file-list__download" />
+              <view @tap.stop="onDownload(file)">
+                <oxy-icon name="download" custom-class="oxy-file-list__download" />
+              </view>
+            </template>
+            <view v-if="props.enableDelete && !isDownloading(file)" @tap.stop="onDelete(file, index)">
+              <oxy-icon name="delete" custom-class="oxy-file-list__delete" />
+            </view>
+          </view>
         </view>
         <oxy-tooltip placement="top" :content="file.name">
           <text class="oxy-file-list__name">{{ file.name }}</text>
@@ -18,6 +36,8 @@
       </view>
     </block>
   </view>
+  <oxy-toast selector="oxy-file-list" />
+  <oxy-message-box selector="oxy-file-list" />
   <oxy-video-preview ref="videoPreview"></oxy-video-preview>
 </template>
 
@@ -39,7 +59,13 @@ import ImgVideo from '../oxy-upload/images/video.png'
 import ImgPic from '../oxy-upload/images/pic.png'
 import ImgOther from '../oxy-upload/images/other.png'
 import OxyVideoPreview from '../oxy-video-preview/oxy-video-preview.vue'
-import { ref } from 'vue'
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import OxyLoading from '../oxy-loading/oxy-loading.vue'
+import OxyToast from '../oxy-toast/oxy-toast.vue'
+import OxyMessageBox from '../oxy-message-box/oxy-message-box.vue'
+import { useToast } from '../oxy-toast'
+import { useMessage } from '../oxy-message-box'
+import { ref, nextTick } from 'vue'
 import { isImageUrl, isVideoUrl, isAudioUrl, isPdfUrl, isDocUrl } from '../common/util'
 import { type FileListItem, fileListProps } from './types'
 import type { VideoPreviewInstance } from '../oxy-video-preview/types'
@@ -54,25 +80,41 @@ const imgs: AnyObject = {
 }
 
 const props = defineProps(fileListProps)
+const emit = defineEmits(['delete', 'click'])
 
 const videoPreview = ref<VideoPreviewInstance>()
+const toast = useToast('oxy-file-list')
+const message = useMessage('oxy-file-list')
+const downloading = ref<Record<string, boolean>>({})
+
+function isDownloading(file: FileListItem) {
+  return !!downloading.value[file.url]
+}
 /**
  * 预览图片
  * @param file
  */
 function handlePreviewImage(file: FileListItem) {
   const { onPreviewFail } = props
+  toast.loading({ msg: '正在打开预览...', direction: 'vertical', position: 'middle' })
   uni.previewImage({
     urls: [file.url],
     current: 0,
+    success() {
+      toast.close()
+    },
     fail() {
       if (onPreviewFail) {
         onPreviewFail({
           file
         })
       } else {
-        uni.showToast({ title: '预览图片失败', icon: 'none' })
+        toast.error({ msg: '预览图片失败', direction: 'vertical', position: 'middle' })
       }
+      toast.close()
+    },
+    complete() {
+      toast.close()
     }
   })
 }
@@ -81,8 +123,9 @@ function handlePreviewImage(file: FileListItem) {
  * 预览视频
  * @param file
  */
-function handlePreviewVieo(file: FileListItem) {
+function handlePreviewVideo(file: FileListItem) {
   const { onPreviewFail } = props
+  toast.loading({ msg: '正在打开预览...', direction: 'vertical', position: 'middle' })
   // #ifdef MP-WEIXIN
   uni.previewMedia({
     current: 0,
@@ -93,19 +136,29 @@ function handlePreviewVieo(file: FileListItem) {
         poster: file.thumb
       }
     ],
+    success() {
+      toast.close()
+    },
     fail() {
       if (onPreviewFail) {
         onPreviewFail({
           file
         })
       } else {
-        uni.showToast({ title: '预览视频失败', icon: 'none' })
+        toast.error({ msg: '预览视频失败', direction: 'vertical', position: 'middle' })
       }
+      toast.close()
+    },
+    complete() {
+      toast.close()
     }
   })
   // #endif
   // #ifndef MP-WEIXIN
   videoPreview.value?.open({ url: file.url, poster: file.thumb, title: file.name })
+  nextTick(() => {
+    toast.close()
+  })
   // #endif
 }
 
@@ -114,62 +167,183 @@ function handlePreviewVieo(file: FileListItem) {
  * @param file
  */
 function handlePreviewFile(file: FileListItem) {
+  const { onPreviewFail } = props
+  toast.loading({ msg: '正在打开预览...', direction: 'vertical', position: 'middle' })
   uni.openDocument({
     filePath: file.url,
-    showMenu: true
+    showMenu: true,
+    success() {
+      toast.close()
+    },
+    fail() {
+      if (onPreviewFail) {
+        onPreviewFail({
+          file
+        })
+      } else {
+        toast.error({ msg: '预览文件失败', direction: 'vertical', position: 'middle' })
+      }
+      toast.close()
+    },
+    complete() {
+      toast.close()
+    }
   })
 }
 
-function onPreviewImage(file: FileListItem) {
+function handleClick(file: FileListItem, index: number) {
+  emit('click', { file, index })
+  if (!props.enablePreview) return
+  const execPreview = () => {
+    if (isImage(file)) {
+      handlePreviewImage(file)
+    } else if (isVideo(file)) {
+      handlePreviewVideo(file)
+    } else {
+      handlePreviewFile(file)
+    }
+  }
+
   const { beforePreview } = props
   if (beforePreview) {
     beforePreview({
       file,
       resolve: (isPass: boolean) => {
-        isPass && handlePreviewImage(file)
+        isPass && execPreview()
       }
     })
   } else {
-    handlePreviewImage(file)
+    execPreview()
   }
 }
 
-function onPreviewVideo(file: FileListItem) {
-  const { beforePreview } = props
-  if (beforePreview) {
-    beforePreview({
-      file,
-      resolve: (isPass: boolean) => {
-        isPass && handlePreviewVieo(file)
+function onDownload(file: FileListItem) {
+  const { beforeDownload, onDownloadSuccess, onDownloadFail } = props
+
+  const execDownload = () => {
+    const filename = file.name || file.url
+    downloading.value[file.url] = true
+    // #ifdef MP-WEIXIN
+    uni.downloadFile({
+      url: file.url,
+      success(res) {
+        const tempFilePath = res.tempFilePath
+        uni.saveFile({
+          tempFilePath,
+          success() {
+            if (onDownloadSuccess) {
+              onDownloadSuccess({ file, tempFilePath })
+            } else {
+              toast.success({ msg: `下载成功：${filename}`, direction: 'vertical', position: 'middle' })
+            }
+            downloading.value[file.url] = false
+          },
+          fail() {
+            if (onDownloadFail) {
+              onDownloadFail({ file })
+            } else {
+              toast.error({ msg: `下载失败：${filename}`, direction: 'vertical', position: 'middle' })
+            }
+            downloading.value[file.url] = false
+          }
+        })
+      },
+      fail() {
+        if (onDownloadFail) {
+          onDownloadFail({ file })
+        } else {
+          toast.error({ msg: `下载失败：${filename}`, direction: 'vertical', position: 'middle' })
+        }
+        downloading.value[file.url] = false
       }
     })
-  } else {
-    handlePreviewVieo(file)
+    // #endif
+    // #ifdef H5
+    try {
+      const a = document.createElement('a')
+      a.href = file.url
+      a.download = file.name || ''
+      a.target = '_blank'
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      if (onDownloadSuccess) {
+        onDownloadSuccess({ file })
+      } else {
+        toast.success({ msg: `下载成功：${filename}`, direction: 'vertical', position: 'middle' })
+      }
+      downloading.value[file.url] = false
+    } catch (e) {
+      if (onDownloadFail) {
+        onDownloadFail({ file })
+      } else {
+        toast.error({ msg: `下载失败：${filename}`, direction: 'vertical', position: 'middle' })
+      }
+      downloading.value[file.url] = false
+    }
+    // #endif
+    // #ifdef APP-PLUS
+    uni.downloadFile({
+      url: file.url,
+      success(res) {
+        const tempFilePath = res.tempFilePath
+        uni.saveFile({
+          tempFilePath,
+          success() {
+            if (onDownloadSuccess) {
+              onDownloadSuccess({ file, tempFilePath })
+            } else {
+              toast.success({ msg: `下载成功：${filename}`, direction: 'vertical', position: 'middle' })
+            }
+            downloading.value[file.url] = false
+          },
+          fail() {
+            if (onDownloadFail) {
+              onDownloadFail({ file })
+            } else {
+              toast.error({ msg: `下载失败：${filename}`, direction: 'vertical', position: 'middle' })
+            }
+            downloading.value[file.url] = false
+          }
+        })
+      },
+      fail() {
+        if (onDownloadFail) {
+          onDownloadFail({ file })
+        } else {
+          toast.error({ msg: `下载失败：${filename}`, direction: 'vertical', position: 'middle' })
+        }
+        downloading.value[file.url] = false
+      }
+    })
+    // #endif
   }
-}
 
-function onPreviewFile(file: FileListItem) {
-  const { beforePreview } = props
-  if (beforePreview) {
-    beforePreview({
+  if (beforeDownload) {
+    beforeDownload({
       file,
       resolve: (isPass: boolean) => {
-        isPass && handlePreviewFile(file)
+        isPass && execDownload()
       }
     })
   } else {
-    handlePreviewFile(file)
+    execDownload()
   }
 }
 
-function onPreview(file: FileListItem) {
-  if (isImage(file)) {
-    onPreviewImage(file)
-  } else if (isVideo(file)) {
-    onPreviewVideo(file)
-  } else {
-    onPreviewFile(file)
+function onDelete(file: FileListItem, index: number) {
+  const execDelete = () => {
+    const title = '确认删除文件'
+    const msg = file.name || '确认删除该文件？'
+    message
+      .confirm({ title, msg, confirmButtonText: '删除', cancelButtonText: '取消' })
+      .then(() => {
+        emit('delete', { file, index })
+      })
+      .catch(() => {})
   }
+
+  execDelete()
 }
 
 function isVideo(file: FileListItem) {

package/components/oxy-file-list/types.ts

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue'
-import { baseProps, makeArrayProp, makeStringProp } from '../common/props'
+import { baseProps, makeArrayProp, makeStringProp, makeBooleanProp } from '../common/props'
 
 export type FileListItem = {
   [key: string]: any
@@ -22,6 +22,29 @@ export type FileListOnPreviewFailOption = {
 }
 export type FileListOnPreviewFail = (option: FileListOnPreviewFailOption) => void
 
+export type FileListBeforeDownloadOption = {
+  file: FileListItem
+  resolve: (isPass: boolean) => void
+}
+export type FileListBeforeDownload = (option: FileListBeforeDownloadOption) => void
+
+export type FileListOnDownloadSuccessOption = {
+  file: FileListItem
+  tempFilePath?: string
+}
+export type FileListOnDownloadSuccess = (option: FileListOnDownloadSuccessOption) => void
+
+export type FileListOnDownloadFailOption = {
+  file: FileListItem
+}
+export type FileListOnDownloadFail = (option: FileListOnDownloadFailOption) => void
+
+export type FileListBeforeDeleteOption = {
+  file: FileListItem
+  resolve: (isPass: boolean) => void
+}
+export type FileListBeforeDelete = (option: FileListBeforeDeleteOption) => void
+
 export const fileListProps = {
   ...baseProps,
 
@@ -37,6 +60,24 @@ export const fileListProps = {
    * 默认值：'card'
    */
   type: makeStringProp<FileListType>('list'),
+  /**
+   * 是否启用文件预览
+   * 类型：boolean
+   * 默认值：true
+   */
+  enablePreview: makeBooleanProp(true),
+  /**
+   * 是否启用文件下载
+   * 类型：boolean
+   * 默认值：true
+   */
+  enableDownload: makeBooleanProp(true),
+  /**
+   * 是否启用删除按钮
+   * 类型：boolean
+   * 默认值：true
+   */
+  enableDelete: makeBooleanProp(true),
   /**
    * 文件预览前的钩子，参数为预览的文件，若返回false或者返回Promise且被reject，则停止预览。
    * 类型：function({file,resolve})
@@ -48,7 +89,22 @@ export const fileListProps = {
    * 类型：function({file})
    * 默认值：-
    */
-  onPreviewFail: Function as PropType<FileListOnPreviewFail>
+  onPreviewFail: Function as PropType<FileListOnPreviewFail>,
+  /**
+   * 文件下载前钩子
+   * 类型：function({file,resolve})
+   */
+  beforeDownload: Function as PropType<FileListBeforeDownload>,
+  /**
+   * 文件下载成功回调
+   * 类型：function({file,tempFilePath})
+   */
+  onDownloadSuccess: Function as PropType<FileListOnDownloadSuccess>,
+  /**
+   * 文件下载失败回调
+   * 类型：function({file})
+   */
+  onDownloadFail: Function as PropType<FileListOnDownloadFail>
 }
 
 export type CornerProps = ExtractPropTypes<typeof fileListProps>

package/components/oxy-global-loading/oxy-global-loading.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { ref, nextTick, watch } from 'vue'
+import { useToast } from '../oxy-toast'
+import { storeToRefs } from 'pinia'
+import { useGlobalLoading } from '../composables/useGlobalLoading'
+import { getCurrentPath } from '../common/path'
+
+const { loadingOptions, currentPage } = storeToRefs(useGlobalLoading())
+
+const { close: closeGlobalLoading } = useGlobalLoading()
+
+const loading = useToast('globalLoading')
+
+// #ifdef MP-ALIPAY
+const hackAlipayVisible = ref(false)
+
+nextTick(() => {
+  hackAlipayVisible.value = true
+})
+// #endif
+
+watch(
+  () => loadingOptions.value,
+  (newVal) => {
+    if (newVal && newVal.show) {
+      if (currentPage.value === getCurrentPath()) {
+        loading.loading(loadingOptions.value)
+      }
+    } else {
+      loading.close()
+    }
+  }
+)
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<template>
+  <!-- #ifdef MP-ALIPAY -->
+  <oxy-toast v-if="hackAlipayVisible" selector="globalLoading" :closed="closeGlobalLoading" />
+  <!-- #endif -->
+  <!-- #ifndef MP-ALIPAY -->
+  <oxy-toast selector="globalLoading" :closed="closeGlobalLoading" />
+  <!-- #endif -->
+</template>

package/components/oxy-global-message/oxy-global-message.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { ref, nextTick, watch } from 'vue'
+import { useMessage } from '../oxy-message-box'
+import { deepClone, isFunction } from '../common/util'
+import { storeToRefs } from 'pinia'
+import { useGlobalMessage } from '../composables/useGlobalMessage'
+import { getCurrentPath } from '../common/path'
+
+const { messageOptions, currentPage } = storeToRefs(useGlobalMessage())
+
+const messageBox = useMessage('globalMessage')
+
+// #ifdef MP-ALIPAY
+const hackAlipayVisible = ref(false)
+
+nextTick(() => {
+  hackAlipayVisible.value = true
+})
+// #endif
+
+watch(
+  () => messageOptions.value,
+  (newVal) => {
+    if (newVal) {
+      if (currentPage.value === getCurrentPath()) {
+        const option = deepClone(newVal)
+        messageBox
+          .show(option)
+          .then((res) => {
+            if (isFunction(option.success)) {
+              option.success(res)
+            }
+          })
+          .catch((err) => {
+            if (isFunction(option.fail)) {
+              option.fail(err)
+            }
+          })
+      }
+    } else {
+      messageBox.close()
+    }
+  }
+)
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<template>
+  <!-- #ifdef MP-ALIPAY -->
+  <oxy-message-box v-if="hackAlipayVisible" selector="globalMessage" />
+  <!-- #endif -->
+  <!-- #ifndef MP-ALIPAY -->
+  <oxy-message-box selector="globalMessage" />
+  <!-- #endif -->
+</template>

package/components/oxy-global-toast/oxy-global-toast.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { ref, nextTick, watch } from 'vue'
+import { useToast } from '../oxy-toast'
+import { storeToRefs } from 'pinia'
+import { useGlobalToast } from '../composables/useGlobalToast'
+import { getCurrentPath } from '../common/path'
+
+const { toastOptions, currentPage } = storeToRefs(useGlobalToast())
+
+const { close: closeGlobalToast } = useGlobalToast()
+
+const toast = useToast('globalToast')
+
+// #ifdef MP-ALIPAY
+const hackAlipayVisible = ref(false)
+
+nextTick(() => {
+  hackAlipayVisible.value = true
+})
+// #endif
+
+watch(
+  () => toastOptions.value,
+  (newVal) => {
+    if (newVal && newVal.show) {
+      if (currentPage.value === getCurrentPath()) {
+        toast.show(toastOptions.value)
+      }
+    } else {
+      toast.close()
+    }
+  }
+)
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<template>
+  <!-- #ifdef MP-ALIPAY -->
+  <oxy-toast v-if="hackAlipayVisible" selector="globalToast" :closed="closeGlobalToast" />
+  <!-- #endif -->
+  <!-- #ifndef MP-ALIPAY -->
+  <oxy-toast selector="globalToast" :closed="closeGlobalToast" />
+  <!-- #endif -->
+</template>

package/components/oxy-img-lazy/index.scss

@@ -0,0 +1,17 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+@include b(img-lazy) {
+  // overflow: hidden;
+  position: relative;
+  @include e(image) {
+    display: block;
+    will-change: transform;
+  }
+
+  @include e(load) {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}