update DiskPhoto.vue

package.json

@@ -10,7 +10,6 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@fingerprintjs/fingerprintjs": "^4.6.2",
-    "@liripeng/vue-audio-player": "^1.5.0",
     "ali-oss": "^6.21.0",
     "axios": "^0.19.2",
     "babel-plugin-prismjs": "^2.0.1",
@@ -42,7 +41,6 @@
     "vue-meta": "^2.4.0",
     "vue-router": "^3.4.5",
     "vue-simple-uploader": "^0.7.6",
-    "vuedraggable": "^2.24.3",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

src/main.js

@@ -22,9 +22,6 @@ Vue.use(VueViewer)
 import uploader from 'vue-simple-uploader'
 Vue.use(uploader)
 
-import AudioPlayer from '@liripeng/vue-audio-player'
-Vue.use(AudioPlayer)
-
 import VueClipboards from 'vue-clipboard2'
 Vue.use(VueClipboards)
 

src/router/index.js

@@ -46,7 +46,7 @@ const Dashboard = () => import('views/admin/Dashboard')
 // 使用安装路由插件
 Vue.use(VueRouter)
 export const constantRoutes = [
-  DiskRouter,
+  DiskMobileRouter,
   UserRouter,
   BlogRouter,
   AiRouter,

src/views/disk/DiskPhoto.vue

@@ -43,7 +43,7 @@
           >
             <el-image
               class="image-content"
-              :src="item.url"
+              :src="item.fileType === 1002 ? require('@/assets/img/video.jpg') : item.url"
               fit="cover"
               lazy
             />
@@ -180,13 +180,24 @@ export default {
       if (this.isEditMode) {
         this.handleSelect(item.fileId)
       } else {
-        if (item.fileType === 1002) {
+        if (item.fileType === 1001) {
+          const imageUrls = []
+          imageUrls.push({
+            src: item.url,
+            alt: item.filename
+          })
+          this.$viewerApi({
+            images: imageUrls,
+            options: {
+              initialViewIndex: 0,
+              movable: true,
+              fullscreen: false,
+              keyboard: true
+            }
+          })
+        } else if (item.fileType === 1002) {
           this.currentVideoItem = item
           this.showPlayerModal = true
-        } else {
-          // 利用 Element UI 没有内置 ImagePreview 全屏 API 的特点，
-          // 建议直接在 el-image 上设置 preview-src-list
-          // 或者手动调用你已有的预览组件
         }
       }
     },

src/views/diskm/DiskPhoto.vue

@@ -40,10 +40,9 @@
           >
             <el-image
               class="image-content"
-              :src="item.url"
+              :src="item.fileType === 1002 ? require('@/assets/img/video.jpg') : item.url"
               fit="cover"
               lazy
-              :preview-src-list="isEditMode || item.fileType === 1002 ? [] : [item.url]"
             />
 
             <div v-if="item.fileType === 1002" class="video-badge">
@@ -96,9 +95,10 @@
         <div class="video-body">
           <video
             ref="videoPlayer"
-            :src="currentVideoItem.url"
+            :src="currentVideoItem.videoUrl"
             controls
             playsinline
+            autoplay
             webkit-playsinline
             class="mobile-video-player"
           />
@@ -166,7 +166,7 @@ export default {
     groupDataByDate(flatList) {
       const groups = {}
       flatList.forEach(item => {
-        const date = item.updateTime.split(' ')[0]
+        const date = item.createAt.split(' ')[0]
         if (!groups[date]) groups[date] = []
         groups[date].push(item)
       })
@@ -193,11 +193,25 @@ export default {
       if (this.isEditMode) {
         this.handleSelect(item.fileId)
       } else {
-        if (item.fileType === 1002) {
+        if (item.fileType === 1001) {
+          const imageUrls = []
+          imageUrls.push({
+            src: item.url,
+            alt: item.filename
+          })
+          this.$viewerApi({
+            images: imageUrls,
+            options: {
+              initialViewIndex: 0,
+              movable: true,
+              fullscreen: false,
+              keyboard: true
+            }
+          })
+        } else if (item.fileType === 1002) {
           this.currentVideoItem = item
           this.showPlayerModal = true
         }
-        // 如果是普通图片，el-image 上的 preview-src-list 会自动接管实现原生全屏缩放预览
       }
     },