fixed 修改图片上传组件可以上传视频并且预览，修改后台商品列表页销量展示

src/components/ImageUpload/index.vue

@@ -1,24 +1,12 @@
 <template>
   <div class="component-upload-image">
-    <el-upload
-      multiple
-      :action="uploadImgUrl"
-      list-type="picture-card"
-      :on-success="handleUploadSuccess"
-      :before-upload="handleBeforeUpload"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      name="file"
-      :data="data"
-      :drag="drag" 
-      :on-remove="handleRemove"
-      :show-file-list="true"
-      :headers="headers"
-      :file-list="fileList"
-      :on-preview="handlePictureCardPreview"
-      :class="{ hide: fileList.length >= limit }">
-      <el-icon class="avatar-uploader-icon"><plus /></el-icon>
+    <el-upload multiple :action="uploadImgUrl" list-type="picture-card" :on-success="handleUploadSuccess"
+      :before-upload="handleBeforeUpload" :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed"
+      name="file" :data="data" :drag="drag" :on-remove="handleRemove" :show-file-list="true" :headers="headers"
+      :file-list="fileList" :on-preview="handlePictureCardPreview" :class="{ hide: fileList.length >= limit }">
+      <el-icon class="avatar-uploader-icon">
+        <plus />
+      </el-icon>
     </el-upload>
     <!-- 上传提示 -->
     <div class="el-upload__tip" v-if="showTip">
@@ -33,7 +21,13 @@
     </div>
 
     <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
+      <template v-if="isImage(dialogImageUrl)">
         <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
+      </template>
+      <template v-else-if="isVideo(dialogImageUrl)">
+        <video :src="dialogImageUrl" controls autoplay
+          style="display: block; max-width: 100%; height: 500px; margin: 0 auto"></video>
+      </template>
     </el-dialog>
   </div>
 </template>
@@ -130,9 +124,27 @@ function handleUploadSuccess(res) {
     number.value = 0
     emit('update:modelValue', listToString(fileList.value))
   }
+  updateVideoDom()
   proxy.$modal.closeLoading()
 }
 
+function updateVideoDom() {
+  setTimeout(() => {
+    Array.prototype.slice.call(document.getElementsByClassName('is-success'))
+      .filter(item => item.className.indexOf('el-upload-list__item') !== -1)
+      .map(item => {
+        let tag = item.getElementsByClassName('el-upload-list__item-thumbnail')[0];
+        if (isVideo(tag.getAttribute('src'))) {
+          let attr = [tag.getAttribute('class'), tag.getAttribute('src')];
+          let videoTag = document.createElement('video');
+          videoTag.setAttribute('class', attr[0]);
+          videoTag.setAttribute('src', attr[1]);
+          item.replaceChild(videoTag, tag);
+        }
+      });
+  },)
+}
+
 // 上传前loading加载
 function handleBeforeUpload(file) {
   let isImg = false
@@ -192,6 +204,23 @@ function listToString(list, separator) {
   }
   return strs != '' ? strs.substr(0, strs.length - 1) : ''
 }
+
+const getFileExtension = (filename) => {
+  return filename.slice(filename.lastIndexOf('.'));
+};
+
+const isImage = (value) => {
+  const imageExtensions = ['.png', '.jpg', '.jpeg'];
+  const extension = getFileExtension(value);
+  return imageExtensions.includes(extension.toLowerCase());
+};
+
+const isVideo = (value) => {
+  const videoExtensions = ['.mp4', '.avi', '.mov', '.wmv', '.flv', '.mkv', '.mpeg', '.3gp', '.webm', '.vob', '.rm', '.rmvb'];
+  const extension = getFileExtension(value);
+  return videoExtensions.includes(extension.toLowerCase());
+};
+
 </script>
 
 <style lang="scss" scoped>

src/views/business/GoodsManager/Goodss/index.vue

@@ -104,7 +104,11 @@
       </el-table-column>
       <el-table-column prop="goodsName" label="商品名称" width="450" align="center" :show-overflow-tooltip="true" />
       <el-table-column prop="goodsPriceLowest" label="价格" align="center" />
-      <el-table-column prop="goodsSalesActual" label="实际销量" align="center" />
+      <el-table-column prop="goodsSalesActual" label="销量" align="center" >
+        <template #default="scope">
+          {{ scope.row.goodsSalesInitial + scope.row.goodsSalesActual }}
+        </template>
+      </el-table-column>
       <el-table-column prop="goodsTotalInventory" label="库存总量" align="center" />
       <el-table-column prop="goodsShelfStatus" label="状态" align="center">
         <template #default="scope">