@10yun/cv-mobile-ui 0.5.27 → 0.5.29

package/uview-plus/components/u-upload/u-upload.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="u-upload" :style="[$u.addStyle(customStyle)]">
+  <view class="u-upload" :style="[addStyle(customStyle)]">
     <view class="u-upload__wrap">
       <template v-if="previewImage">
         <view class="u-upload__wrap__preview" v-for="(item, index) in lists" :key="index">
@@ -8,30 +8,73 @@
             :src="item.thumb || item.url"
             :mode="imageMode"
             class="u-upload__wrap__preview__image"
-            @tap="onPreviewImage(item)"
+            @tap="onClickPreview(item, index)"
             :style="[
               {
-                width: $u.addUnit(width),
-                height: $u.addUnit(height)
+                width: addUnit(width),
+                height: addUnit(height)
               }
             ]"
           />
-          <view v-else class="u-upload__wrap__preview__other">
+          <view
+            class="u-upload__wrap__preview__video"
+            :style="{
+              width: addUnit(width),
+              height: addUnit(height)
+            }"
+            v-else-if="(item.isVideo || (item.type && item.type === 'video')) && getVideoThumb"
+          >
+            <image
+              v-if="item.thumb"
+              :src="item.thumb"
+              :mode="imageMode"
+              class="u-upload__wrap__preview__image"
+              @tap="onClickPreview(item, index)"
+              :style="[
+                {
+                  width: addUnit(width),
+                  height: addUnit(height)
+                }
+              ]"
+            />
+            <u-icon
+              v-else
+              color="#80CBF9"
+              size="26"
+              :name="item.isVideo || (item.type && item.type === 'video') ? 'movie' : 'file-text'"
+            ></u-icon>
+            <view v-if="item.status === 'success'" class="u-upload__wrap__play" @tap="onClickPreview(item, index)">
+              <slot name="playIcon"></slot>
+              <up-icon v-if="!$slots['playIcon']" class="u-upload__wrap__play__icon" name="play-right" size="22px"></up-icon>
+            </view>
+          </view>
+          <view
+            v-else
+            class="u-upload__wrap__preview__other"
+            @tap="onClickPreview(item, index)"
+            :style="[
+              {
+                width: addUnit(width),
+                height: addUnit(height)
+              }
+            ]"
+          >
             <u-icon
               color="#80CBF9"
               size="26"
               :name="item.isVideo || (item.type && item.type === 'video') ? 'movie' : 'folder'"
             ></u-icon>
             <text class="u-upload__wrap__preview__other__text">
-              {{ item.isVideo || (item.type && item.type === 'video') ? '视频' : '文件' }}
+              {{ item.isVideo || (item.type && item.type === 'video') ? item.name || '视频' : item.name || '文件' }}
             </text>
           </view>
           <view class="u-upload__status" v-if="item.status === 'uploading' || item.status === 'failed'">
             <view class="u-upload__status__icon">
               <u-icon v-if="item.status === 'failed'" name="close-circle" color="#ffffff" size="25" />
-              <u-loading-icon size="22" mode="circle" color="#ffffff" v-else />
+              <u-loading-icon size="22" mode="circle" v-else />
             </view>
             <text v-if="item.message" class="u-upload__status__message">{{ item.message }}</text>
+            <up-gap class="u-upload__progress" height="3px" :style="{ width: item.progress + '%' }"></up-gap>
           </view>
           <view
             class="u-upload__deletable"
@@ -42,20 +85,26 @@
               <u-icon name="close" color="#ffffff" size="10"></u-icon>
             </view>
           </view>
-          <view class="u-upload__success" v-if="item.status === 'success'">
-            <!-- #ifdef APP-NVUE -->
-            <image :src="successIcon" class="u-upload__success__icon"></image>
-            <!-- #endif -->
-            <!-- #ifndef APP-NVUE -->
-            <view class="u-upload__success__icon">
-              <u-icon name="checkmark" color="#ffffff" size="12"></u-icon>
+          <slot name="success">
+            <view class="u-upload__success" v-if="item.status === 'success'">
+              <!-- #ifdef APP-NVUE -->
+              <image :src="successIcon" class="u-upload__success__icon"></image>
+              <!-- #endif -->
+              <!-- #ifndef APP-NVUE -->
+              <view class="u-upload__success__icon">
+                <u-icon name="checkmark" color="#ffffff" size="12"></u-icon>
+              </view>
+              <!-- #endif -->
             </view>
-            <!-- #endif -->
-          </view>
+          </slot>
         </view>
       </template>
+      <canvas id="myCanvas" type="2d" style="width: 100px; height: 150px; display: none"></canvas>
       <template v-if="isInCount">
-        <view v-if="$slots.default || $slots.$default" @tap="chooseFile">
+        <view v-if="$slots.trigger" @tap="chooseFile">
+          <slot name="trigger" />
+        </view>
+        <view v-else-if="!$slots.trigger && ($slots.default || $slots.$default)" @tap="chooseFile">
           <slot />
         </view>
         <view
@@ -67,8 +116,8 @@
           :class="[disabled && 'u-upload__button--disabled']"
           :style="[
             {
-              width: $u.addUnit(width),
-              height: $u.addUnit(height)
+              width: addUnit(width),
+              height: addUnit(height)
             }
           ]"
         >
@@ -77,20 +126,40 @@
         </view>
       </template>
     </view>
+    <up-popup mode="center" v-model:show="popupShow">
+      <video
+        id="myVideo"
+        v-if="popupShow"
+        :src="currentItemIndex >= 0 ? lists[currentItemIndex].url : ''"
+        @error="videoErrorCallback"
+        show-center-play-btn
+        object-fit="cover"
+        show-fullscreen-btn="true"
+        enable-play-gesture
+        controls
+        :autoplay="true"
+        auto-pause-if-open-native
+        @loadedmetadata="loadedVideoMetadata"
+        :initial-time="0.1"
+      ></video>
+    </up-popup>
   </view>
 </template>
 <script>
 import { chooseFile } from './utils';
-import mixinUp from './mixin.js';
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
+import { mixinUpload } from './mixin';
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addStyle, addUnit, toast } from '../../libs/function/index';
+import test from '../../libs/function/test';
 /**
  * upload 上传
  * @description 该组件用于上传图片场景
- * @tutorial https://uviewui.com/components/upload.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/upload.html
  * @property {String}			accept				接受的文件类型, 可选值为all media image file video （默认 'image' ）
  * @property {String | Array}	capture				图片或视频拾取模式，当accept为image类型时设置capture可选额外camera可以直接调起摄像头（默认 ['album', 'camera'] ）
+ * @property {Array}			extension			选择文件的后缀名，暂只支持.zip、.png等，不支持application/msword等值
  * @property {Boolean}			compressed			当accept为video时生效，是否压缩视频，默认为true（默认 true ）
  * @property {String}			camera				当accept为video时生效，可选值为back或front（默认 'back' ）
  * @property {Number}			maxDuration			当accept为video时生效，拍摄视频最长拍摄时间，单位秒（默认 60 ）
@@ -120,7 +189,7 @@ import mixin from '../../libs/mixin/mixin.js';
  */
 export default {
   name: 'u-upload',
-  mixins: [mpMixin, mixin, mixinUp, props],
+  mixins: [mpMixin, mixin, mixinUpload, props],
   data() {
     return {
       // #ifdef APP-NVUE
@@ -128,7 +197,9 @@ export default {
         'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKKADAAQAAAABAAAAKAAAAAB65masAAACP0lEQVRYCc3YXygsURwH8K/dpcWyG3LF5u/6/+dKVylSypuUl6uUPMifKMWL8oKEB1EUT1KeUPdR3uTNUsSLxb2udG/cbvInNuvf2rVnazZ/ZndmZ87snjM1Z+Z3zpzfp9+Z5mEAhlvjRtZgCKs+gnPAOcAkkMOR4jEHfItjDvgRxxSQD8cM0BuOCaAvXNCBQrigAsXgggYUiwsK0B9cwIH+4gIKlIILGFAqLiBAOTjFgXJxigJp4BQD0sIpAqSJow6kjSNAFTnRaHJwLenD6Mud52VQAcrBfTd2oyq+HtGaGGWAcnAVcXWoM3bCZrdi+ncPfaAcXE5UKVpdW/vitGPqqAtn98d0gXJwX7Qp6MmegUYVhvmTIezdmHlxJCjpHRTCFerLkRRu4k0aqdajN3sWOo0BK//msHa+xDuPC/oNFMKRhTtM4xjIX0SCNpXL4+7VIaHuyiWEp2L7ahWLf8fejfPdqPmC3mJicORZUp1CQzm+GiphvljGk+PBvWRbxii+xVTj5M6CiZ/tsDufvaXyxEUDxeLIyvu3m0iOyEFWVAkydcVYdyFrE9tQk9iMq6f/GNlvwt3LjQfh60LUrw9/cFyyMJUW/XkLSNMV4Mi6C5ML+ui4x5ClAX9sB9w0wV6wglJwJCv5fOxcr6EstgbGiEw4XcfUry4cWrcEUW8n+ARKxXEJHhw2WG43UKSvwI/TSZgvl7kh0b3XLZaLEy0QmMgLZAVH7J+ALOE+AVnDvQOyiPMAWcW5gSzjCPAV+78S5WE0GrQAAAAASUVORK5CYII=',
       // #endif
       lists: [],
-      isInCount: true
+      isInCount: true,
+      popupShow: false,
+      currentItemIndex: -1
     };
   },
   watch: {
@@ -139,53 +210,125 @@ export default {
       },
       immediate: true,
       deep: true
+    },
+    deletable(newVal) {
+      this.formatFileList();
+    },
+    maxCount(newVal) {
+      this.formatFileList();
+    },
+    accept(newVal) {
+      this.formatFileList();
+    },
+    popupShow(newVal) {
+      if (!newVal) {
+        this.currentItemIndex = -1;
+      }
     }
   },
   // #ifdef VUE3
-  emits: ['error', 'beforeRead', 'oversize', 'afterRead', 'delete', 'clickPreview'],
+  emits: ['error', 'beforeRead', 'oversize', 'afterRead', 'delete', 'clickPreview', 'update:fileList', 'afterAutoUpload'],
   // #endif
   methods: {
+    addUnit,
+    addStyle,
+    videoErrorCallback() {},
+    loadedVideoMetadata(e) {
+      if (this.currentItemIndex < 0) {
+        return;
+      }
+      if (this.autoUploadDriver != 'local') {
+        return;
+      }
+      if (!this.getVideoThumb) {
+        return;
+      }
+      // 截取第一帧作为封面，oss等云存储场景直接使用拼接参数。
+      let w = this.lists[this.currentItemIndex].width;
+      let h = this.lists[this.currentItemIndex].height;
+      const dpr = uni.getSystemInfoSync().pixelRatio;
+      uni
+        .createSelectorQuery()
+        .select('#myVideo')
+        .context((res) => {
+          console.log('select video', res);
+          const myVideo = res.context;
+          uni
+            .createSelectorQuery()
+            .select('#myCanvas')
+            .fields({ node: true, size: true })
+            .exec(([res]) => {
+              console.log('select canvas', res);
+              const ctx1 = res[0].node.getContext('2d');
+              res[0].node.width = w * dpr;
+              res[0].node.height = h * dpr;
+              // Draw the first frame and export it as an image
+              // myVideo.onPlay(() => {
+              setTimeout(() => {
+                captureFirstFrame();
+              }, 500);
+              // })
+              const captureFirstFrame = () => {
+                ctx1.drawImage(myVideo, 0, 0, w * dpr, h * dpr);
+                wx.canvasToTempFilePath({
+                  canvas: res[0].node,
+                  success: (result) => {
+                    console.log('First frame image path:', result.tempFilePath);
+                    // Now you can use the image path (result.tempFilePath)
+                    this.fileList['currentItemIndex'].thumb = result.tempFilePath;
+                  },
+                  fail: (err) => {
+                    console.error('Failed to export image:', err);
+                  }
+                });
+              };
+              // Capture the first frame
+              setInterval(() => {
+                ctx1.drawImage(myVideo, 0, 0, w * dpr, h * dpr);
+              }, 1000 / 24);
+            })
+            .exec();
+        })
+        .exec();
+    },
     formatFileList() {
       const { fileList = [], maxCount } = this;
-      const lists = fileList.map((item) =>
-        Object.assign(Object.assign({}, item), {
+      const lists = fileList.map((item) => {
+        const name = item.name || item.url || item.thumb;
+        return Object.assign(Object.assign({}, item), {
           // 如果item.url为本地选择的blob文件的话，无法判断其为video还是image，此处优先通过accept做判断处理
-          isImage: this.accept === 'image' || uni.$u.test.image(item.url || item.thumb),
-          isVideo: this.accept === 'video' || uni.$u.test.video(item.url || item.thumb),
+          isImage: item.name ? test.image(item.name) : this.accept === 'image' || test.image(name),
+          isVideo: item.name ? test.video(item.name) : this.accept === 'video' || test.video(name),
           deletable: typeof item.deletable === 'boolean' ? item.deletable : this.deletable
-        })
-      );
+        });
+      });
       this.lists = lists;
       this.isInCount = lists.length < maxCount;
     },
-    chooseFile() {
+    chooseFile(params) {
       const { maxCount, multiple, lists, disabled } = this;
-      if (disabled) return;
-      // 如果用户传入的是字符串，需要格式化成数组
-      let capture;
-      try {
-        capture = uni.$u.test.array(this.capture) ? this.capture : this.capture.split(',');
-      } catch (e) {
-        capture = [];
-      }
-      chooseFile(
-        Object.assign(
-          {
-            accept: this.accept,
-            multiple: this.multiple,
-            capture: capture,
-            compressed: this.compressed,
-            maxDuration: this.maxDuration,
-            sizeType: this.sizeType,
-            camera: this.camera
-          },
-          {
-            maxCount: maxCount - lists.length
-          }
-        )
-      )
+      if (disabled) return Promise.reject();
+      const chooseParams = Object.assign(
+        {
+          accept: this.accept,
+          extension: this.extension,
+          multiple: this.multiple,
+          capture: this.capture,
+          compressed: this.compressed,
+          maxDuration: this.maxDuration,
+          sizeType: this.sizeType,
+          camera: this.camera
+        },
+        {
+          maxCount: maxCount - lists.length,
+          ...params
+        }
+      );
+      return chooseFile(chooseParams)
         .then((res) => {
-          this.onBeforeRead(multiple ? res : res[0]);
+          const result = chooseParams.multiple ? res : res[0];
+          this.onBeforeRead(result);
+          return result;
         })
         .catch((error) => {
           this.$emit('error', error);
@@ -194,9 +337,9 @@ export default {
     // 文件读取之前
     onBeforeRead(file) {
       const { beforeRead, useBeforeRead } = this;
-      let res = true;
+      let res = file;
       // beforeRead是否为一个方法
-      if (uni.$u.test.func(beforeRead)) {
+      if (test.func(beforeRead)) {
         // 如果用户定义了此方法，则去执行此方法，并传入读取的文件回调
         res = beforeRead(file, this.getDetail());
       }
@@ -220,13 +363,10 @@ export default {
           );
         });
       }
-      if (!res) {
-        return;
-      }
-      if (uni.$u.test.promise(res)) {
+      if (test.promise(res)) {
         res.then((data) => this.onAfterRead(data || file));
       } else {
-        this.onAfterRead(file);
+        this.onAfterRead(res || file);
       }
     },
     getDetail(index) {
@@ -235,10 +375,13 @@ export default {
         index: index == null ? this.fileList.length : index
       };
     },
-    onAfterRead(file) {
+    async onAfterRead(file) {
       const { maxSize, afterRead } = this;
       const oversize = Array.isArray(file) ? file.some((item) => item.size > maxSize) : file.size > maxSize;
       if (oversize) {
+        uni.showToast({
+          title: '超过大小限制'
+        });
         this.$emit(
           'oversize',
           Object.assign(
@@ -250,62 +393,276 @@ export default {
         );
         return;
       }
-      if (typeof afterRead === 'function') {
-        afterRead(file, this.getDetail());
+      let len = this.fileList.length;
+      if (this.autoUpload) {
+        // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
+        let lists = [].concat(file);
+        let fileListLen = this.fileList.length;
+        lists.map((item) => {
+          this.fileList.push({
+            ...item,
+            status: 'uploading',
+            message: '上传中',
+            progress: 0
+          });
+        });
+        let that = this;
+        this.$emit('update:fileList', this.fileList);
+        for (let i = 0; i < lists.length; i++) {
+          let j = i;
+          let result = '';
+          switch (this.autoUploadDriver) {
+            case 'cos': // 腾讯云
+              break;
+            case 'kodo': // 七牛云
+              break;
+            case 'oss':
+            case 'upload_oss':
+              // 阿里云前端直传
+              // 获取签名
+              console.log();
+              let formData = {};
+              let ret = await uni.request({
+                url: this.autoUploadAuthUrl,
+                method: 'get',
+                header: this.autoUploadHeader,
+                data: {
+                  filename: lists[j].name
+                }
+              });
+              // console.log(ret);
+              let res0 = ret.data;
+              if (res0.code == 200) {
+                // 路径 + 文件名 + 扩展名
+                // 不传递filename就要拼接key
+                // res0.data.params.key = res0.data.params.dir + res0.data.params.uniqidName + fileExt;
+                formData = res0.data.params;
+              } else {
+                uni.showToast({
+                  title: res0.msg,
+                  duration: 1500
+                });
+                return;
+              }
+              var uploadTask = uni.uploadFile({
+                url: res0.data.params.host,
+                filePath: lists[j].url,
+                name: 'file',
+                // fileType: 'video', // 仅支付宝小程序，且必填。
+                // header: header,
+                formData: formData,
+                success: (uploadFileRes) => {
+                  let thumb = '';
+                  let afterPromise = '';
+                  if (that.customAfterAutoUpload) {
+                    afterPromise = new Promise((resolve, reject) => {
+                      that.$emit(
+                        'afterAutoUpload',
+                        Object.assign(res0, {
+                          callback: (r) => {
+                            r.url ? resolve(r) : reject();
+                          }
+                        })
+                      );
+                    });
+                  }
+                  if (test.promise(afterPromise)) {
+                    afterPromise.then((data) => that.succcessUpload(len + j, data.url, data.thumb));
+                  } else {
+                    result = res0.data.params.host + '/' + res0.data.params.key;
+                    if (that.accept === 'video' || test.video(result)) {
+                      thumb = result + '?x-oss-process=video/snapshot,t_10000,m_fast';
+                    }
+                    that.succcessUpload(len + j, result, thumb);
+                  }
+                }
+              });
+              uploadTask.onProgressUpdate((res) => {
+                that.updateUpload(len + j, {
+                  progress: res.progress
+                });
+                // console.log('上传进度' + res.progress);
+                // console.log('已经上传的数据长度' + res.totalBytesSent);
+                // console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
+              });
+              break;
+            case 'local':
+            default:
+              // 服务器本机上传
+              var uploadTask = uni.uploadFile({
+                url: this.autoUploadApi,
+                filePath: lists[j].url,
+                name: 'file',
+                // fileType: 'video', // 仅支付宝小程序，且必填。
+                header: this.autoUploadHeader,
+                success: (uploadFileRes) => {
+                  let res0 = uploadFileRes.data;
+                  let afterPromise = '';
+                  if (that.customAfterAutoUpload) {
+                    afterPromise = new Promise((resolve, reject) => {
+                      that.$emit(
+                        'afterAutoUpload',
+                        Object.assign(res0, {
+                          callback: (r) => {
+                            r.url ? resolve(r) : reject();
+                          }
+                        })
+                      );
+                    });
+                  }
+                  if (test.promise(afterPromise)) {
+                    afterPromise.then((data) => that.succcessUpload(len + j, data.url));
+                  } else {
+                    if (res0.code != 200) {
+                      uni.showToast({
+                        title: res0.msg
+                      });
+                    } else {
+                      result = res0.data.url;
+                      that.succcessUpload(len + j, result);
+                    }
+                  }
+                }
+              });
+              uploadTask.onProgressUpdate((res) => {
+                that.updateUpload(len + j, {
+                  progress: res.progress
+                });
+                // console.log('上传进度' + res.progress);
+                // console.log('已经上传的数据长度' + res.totalBytesSent);
+                // console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
+              });
+              break;
+          }
+        }
+      } else {
+        if (typeof afterRead === 'function') {
+          afterRead(file, this.getDetail());
+        }
+        this.$emit(
+          'afterRead',
+          Object.assign(
+            {
+              file
+            },
+            this.getDetail()
+          )
+        );
       }
-      this.$emit(
-        'afterRead',
-        Object.assign(
-          {
-            file
-          },
-          this.getDetail()
-        )
-      );
+    },
+    updateUpload(index, param) {
+      let item = this.fileList[index];
+      this.fileList.splice(index, 1, {
+        ...item,
+        // 注意这里不判断会出现succcessUpload先执行又被覆盖的问题
+        status: param.progress == 100 ? 'success' : 'uploading',
+        message: '',
+        progress: param.progress
+      });
+      this.$emit('update:fileList', this.fileList);
+    },
+    succcessUpload(index, url, thumb = '') {
+      let item = this.fileList[index];
+      this.fileList.splice(index, 1, {
+        ...item,
+        status: 'success',
+        message: '',
+        url: url,
+        progress: 100,
+        thumb: thumb
+      });
+      this.$emit('update:fileList', this.fileList);
     },
     deleteItem(index) {
-      this.$emit(
-        'delete',
-        Object.assign(Object.assign({}, this.getDetail(index)), {
-          file: this.fileList[index]
-        })
-      );
+      if (this.autoDelete) {
+        this.fileList.splice(index, 1);
+        this.$emit('update:fileList', this.fileList);
+      } else {
+        this.$emit(
+          'delete',
+          Object.assign(Object.assign({}, this.getDetail(index)), {
+            file: this.fileList[index]
+          })
+        );
+      }
     },
     // 预览图片
-    onPreviewImage(item) {
-      if (!item.isImage || !this.previewFullImage) return;
+    onPreviewImage(previewItem, index) {
+      if (!previewItem.isImage || !this.previewFullImage) return;
+      let current = 0;
+      const urls = [];
+      let imageIndex = 0;
+      for (var i = 0; i < this.lists.length; i++) {
+        const item = this.lists[i];
+        if (item.isImage || (item.type && item.type === 'image')) {
+          urls.push(item.url || item.thumb);
+          if (i === index) {
+            current = imageIndex;
+          }
+          imageIndex += 1;
+        }
+      }
+      if (urls.length < 1) {
+        return;
+      }
       uni.previewImage({
-        // 先filter找出为图片的item，再返回filter结果中的图片url
-        urls: this.lists
-          .filter((item) => this.accept === 'image' || uni.$u.test.image(item.url || item.thumb))
-          .map((item) => item.url || item.thumb),
-        current: item.url || item.thumb,
+        urls: urls,
+        current: current,
         fail() {
-          uni.$u.toast('预览图片失败');
+          toast('预览图片失败');
         }
       });
     },
-    onPreviewVideo(event) {
-      if (!this.data.previewFullImage) return;
-      const { index } = event.currentTarget.dataset;
-      const { lists } = this.data;
-      wx.previewMedia({
-        sources: lists
-          .filter((item) => isVideoFile(item))
-          .map((item) =>
+    onPreviewVideo(previewItem, index) {
+      if (!this.previewFullImage) return;
+      let current = 0;
+      const sources = [];
+      let videoIndex = 0;
+      for (var i = 0; i < this.lists.length; i++) {
+        const item = this.lists[i];
+        if (item.isVideo || (item.type && item.type === 'video')) {
+          sources.push(
             Object.assign(Object.assign({}, item), {
               type: 'video'
             })
-          ),
-        current: index,
+          );
+          if (i === index) {
+            current = videoIndex;
+          }
+          videoIndex += 1;
+        }
+      }
+      if (sources.length < 1) {
+        return;
+      }
+      // #ifndef MP-WEIXIN
+      this.popupShow = true;
+      this.currentItemIndex = index;
+      console.log(this.lists[this.currentItemIndex]);
+      // #endif
+      // #ifdef MP-WEIXIN
+      wx.previewMedia({
+        sources: sources,
+        current: current,
         fail() {
-          uni.$u.toast('预览视频失败');
+          toast('预览视频失败');
         }
       });
+      // #endif
     },
-    onClickPreview(event) {
-      const { index } = event.currentTarget.dataset;
-      const item = this.data.lists[index];
+    onClickPreview(item, index) {
+      if (this.previewFullImage) {
+        switch (item.type) {
+          case 'image':
+            this.onPreviewImage(item, index);
+            break;
+          case 'video':
+            this.onPreviewVideo(item, index);
+            break;
+          default:
+            break;
+        }
+      }
       this.$emit('clickPreview', Object.assign(Object.assign({}, item), this.getDetail(index)));
     }
   }