@netang/quasar 0.1.63 → 0.1.65

package/components/uploader-query/index.vue

@@ -77,7 +77,7 @@
                     @dragend="dragEnd"
                 >
                     <n-img
-                        :src="getImage(fileItem)"
+                        :src="currentQuery[fileItemIndex].src"
                         :spinner-size="toPx(currentSize / 2)"
                         :width="toPx(currentSize)"
                         :height="toPx(currentSize)"
@@ -146,9 +146,9 @@
                                 name="search"
                                 :size="settingsIconSize"
                                 title="预览"
-                                @click="uploader.previewImage(fileItem)"
+                                @click="previewImage(fileItemIndex)"
                                 v-bind="settingsIconProps"
-                                v-if="! noPreview && getImage(fileItem)"
+                                v-if="! noPreview && currentQuery[fileItemIndex].preview_src"
                             />
 
                             <!-- 删除 -->
@@ -361,10 +361,12 @@ import $n_has from 'lodash/has'
 import $n_get from 'lodash/get'
 
 import $n_px from '@netang/utils/px'
+import $n_forEach from '@netang/utils/forEach'
 import $n_isValidArray from '@netang/utils/isValidArray'
 import $n_isValidString from '@netang/utils/isValidString'
 
 import $n_getImage from '../../utils/getImage'
+import $n_previewImage from '../../utils/previewImage'
 
 import NDragger from '../dragger'
 
@@ -463,12 +465,55 @@ export default {
 
         // ==========【计算属性】=========================================================================================
 
+        /**
+         * 当前上传文件队列
+         */
+        const currentQuery = computed(function () {
+
+            // 如果不是图片
+            if (uploaderProps.type !== 'image') {
+                if ($n_isValidArray(query.value)) {
+                    return query.value
+                }
+                return []
+            }
+
+            const lists = []
+
+            $n_forEach(query.value, function (fileItem) {
+                const newItem = Object.assign({}, fileItem)
+
+                let src = ''
+                let preview_src = ''
+
+                if ($n_has(fileItem, '__img')) {
+                    src = fileItem.__img
+                    preview_src = src
+                } else if ($n_isValidString(fileItem.hash)) {
+                    src = $n_getImage(fileItem.hash, { w: $q.platform.is.mobile ? currentSize.value * 2 : currentSize.value })
+                    if (src) {
+                        // 预览地址
+                        preview_src = fileItem.hash
+                    }
+                }
+
+                lists.push(Object.assign(newItem, {
+                    // 图片地址
+                    src,
+                    // 预览地址
+                    preview_src,
+                }))
+            })
+
+            return lists
+        })
+
+
         /**
          * 当前是否开启拖拽
          */
         const currentDrag = computed(function() {
             return props.drag
-                && $n_isValidArray(query.value)
                 && query.value.length > 1
                 && ! props.readonly
                 && ! props.disable
@@ -500,8 +545,8 @@ export default {
         const showSquareButton = computed(function () {
             // 自动显示方块按钮 && 有上传文件限制数量
             return props.autoShowSquareButton && uploaderProps.count > 0 ?
-                // 如果 上传文件列表数量 < 上传文件限制数量
-                 query.value.length < uploaderProps.count
+                // 如果 当前上传文件队列数量 < 上传文件限制数量
+                currentQuery.value.length < uploaderProps.count
                 // 始终显示
                 : true
         })
@@ -509,16 +554,15 @@ export default {
         // ==========【方法】=============================================================================================
 
         /**
-         * 获取图片地址
+         * 预览图片
          */
-        function getImage(fileItem) {
-            return $n_has(fileItem, '__img') ?
-                fileItem.__img
-                : (
-                    $n_isValidString(fileItem.hash) ?
-                        $n_getImage(fileItem.hash, { w: $q.platform.is.mobile ? currentSize.value * 2 : currentSize.value })
-                        : ''
-                )
+        function previewImage(startPosition) {
+            $n_previewImage({
+                // 需要预览的图片 URL 数组
+                images: currentQuery.value.map(e => e.preview_src),
+                // 图片预览起始位置索引
+                startPosition,
+            })
         }
 
         /**
@@ -538,8 +582,10 @@ export default {
             type: uploaderProps.type,
             // 上传文件数量(0:不限)
             count: uploaderProps.count,
-            // 上传文件队列
+            // 文件队列
             query,
+            // 当前上传文件队列
+            currentQuery,
 
             // 当前是否开启拖拽
             currentDrag,
@@ -553,8 +599,8 @@ export default {
             // 上传器
             uploader,
 
-            // 获取图片地址
-            getImage,
+            // 预览图片
+            previewImage,
             // 获取文件名称
             getFileName,
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netang/quasar",
-  "version": "0.1.63",
+  "version": "0.1.65",
   "description": "netang-quasar",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/utils/$power.js

@@ -1358,6 +1358,36 @@ function getPageData($route) {
     })
 }
 
+/**
+ * 新窗口
+ */
+function routerPush({ path, query, pageTitle, fromPage }) {
+
+    if (! $n_isValidObject(query)) {
+        query = {}
+    }
+
+    // 如果有标题
+    pageTitle = $n_trimString(pageTitle)
+    if (pageTitle) {
+        query.n_page_title = pageTitle
+    }
+
+    // 来源页面
+    if (fromPage) {
+        if (fromPage === true) {
+            fromPage = $n_router.getRoute().fullPath
+        }
+        // 来源页面是指定路由的完整路径
+        query.n_from_page = encodeURIComponent(fromPage)
+    }
+
+    $n_router.push({
+        path,
+        query,
+    })
+}
+
 /**
  * 权限业务
  */
@@ -1374,6 +1404,8 @@ const $power = {
     formatBtns,
     // 请求
     request,
+    // 新窗口
+    routerPush,
 }
 
 export default $power

package/utils/uploader.js

@@ -1,4 +1,5 @@
 import { ref, isRef, } from 'vue'
+import { useQuasar } from 'quasar'
 import SparkMD5 from 'spark-md5'
 
 import $n_has from 'lodash/has'
@@ -57,6 +58,9 @@ function create(options) {
 
     // ==========【数据】=========================================================================================
 
+    // quasar 对象
+    const $q = useQuasar()
+
     const {
         // 上传文件输入框节点
         fileRef,
@@ -1387,25 +1391,50 @@ function create(options) {
     /**
      * 播放
      */
-    function play(fileItem) {
-        // 轻提示
-        $n_toast({
-            message: '播放还没做',
+    function play({ hash, __img }) {
+
+        const src = __img ? __img : $n_getFile(hash)
+
+        let width
+        let height
+        let fullWidth = false
+        let fullHeight = false
+        let ok = true
+        let style = ''
+
+        if ($q.platform.is.mobile) {
+            width = $q.screen.width - 48 - 32
+            height = $q.screen.height - 48 - 32 - 6 - 52
+            fullWidth = true
+            fullHeight = true
+        } else {
+            width = 800 - 32
+            height = 400 - 32 - 6
+            ok = false
+            style = 'width:800px;max-width:800px;height:400px;max-height:400px;'
+        }
+
+        $q.dialog({
+            message: `<video style="width:${width}px;height:${height}px;" playsinline autoplay controls src="${src}" type="video/mp4" muted="muted"></video>`,
+            style,
+            html: true,
+            dark: true,
+            ok,
+            fullWidth,
+            fullHeight,
         })
     }
 
     /**
      * 复制地址
      */
-    function copyUrl({ type, hash, url, isNet }) {
-
-        const _url = isNet ? url : (
-            type === FilE_TYPE.image ?
-                // 如果是图片
-                $n_getImage(hash)
-                // 否则是文件
-                : $n_getFile(hash)
-        )
+    function copyUrl({ type, hash }) {
+
+        const _url = type === FilE_TYPE.image ?
+            // 如果是图片
+            $n_getImage(hash)
+            // 否则是文件
+            : $n_getFile(hash)
 
         if ($n_isValidString(_url)) {
             copy(_url, '复制地址成功')