update 修改后台/销售端商品上架

peng

6 天以前 5e134eb52c3b1872f61ab45165ea6ef5e5c1e9c3

update 修改后台/销售端商品上架

 manager/src/views/goods/goods-info/goods.vue

@@ -89,9 +89,12 @@
        <template slot="goodsSlot" slot-scope="{ row }">
          <div style="margin: 5px 0px; height: 80px; display: flex">
            <div style="">
              <img
              <img v-if="row.original"
                :src="row.original"
                style="height: 60px; margin-top: 1px; width: 60px"
              />
              <video v-else
                     :src="row.goodsVideo" style="height: 60px; margin-top: 1px; width: 60px"
              />
            </div>

@@ -159,6 +162,7 @@

<script>
import { getGoodsListData, upGoods, lowGoods } from "@/api/goods";
import {getSts} from '@/api/file'
import vueQr from "vue-qr";
export default {
  components: {
@@ -376,6 +380,18 @@
        this.loading = false;
        if (res.success) {
          this.data = res.result.records;
          getSts().then(res => {
         const endpoint = res.data.endpoint
            this.data.forEach(item => {
              if (item.goodsVideo != null && item.goodsVideo.indexOf('http')===-1) {
                item.goodsVideo = endpoint + '/' + item.goodsVideo;
              }
              if (item.original !=null && item.original.indexOf('http') ===-1) {
                item.original = endpoint + '/' + item.original;
              }
            })
          })

          this.total = res.result.total;
        }
      });

 manager/src/views/goods/goods-info/goodsApply.vue

@@ -43,10 +43,12 @@
        <template slot="goodsSlot" slot-scope="scope">
          <div style="margin-top: 5px; height: 80px; display: flex">
            <div style="">
              <img
              <img v-if="scope.row.original"
                :src="scope.row.original"
                style="height: 60px; margin-top: 3px; width: 60px"
              />
              <video v-else :src="scope.row.goodsVideo"      style="height: 60px; margin-top: 3px; width: 60px"
              />
            </div>

            <div style="margin-left: 13px">

 manager/src/views/goods/goods-info/goodsDetail.vue

@@ -143,6 +143,7 @@
</template>
<script>
import { getGoodsDetail } from "@/api/goods";
import {getSts} from '@/api/file'
export default {
  name: "goodsDetail",
  data() {
@@ -193,6 +194,26 @@
    initGoods(id) {
      getGoodsDetail(id).then((res) => {
        this.goods = res.result;
        if (this.goods.goodsVideo != null && this.goods.goodsVideo !== '') {
          getSts().then(res => {
            console.log('--------------->',this.goods.goodsVideo.indexOf('http')!== -1)
            if (this.goods.goodsVideo !== null && this.goods.goodsVideo.indexOf('http')=== -1) {
              this.goods.goodsVideo = res.data.endpoint+'/'+this.goods.goodsVideo;
            }
          })
        }
        if (this.goods.goodsGalleryList != null && this.goods.goodsGalleryList.length > 0) {
          getSts().then(res => {
            this.goods.goodsGalleryList =  this.goods.goodsGalleryList.map((item) => {
              if (item !== null&&item.indexOf('http')===-1) {
                return  res.data.endpoint+'/'+item;
              }else {
                return item;
              }
            })
          })
        }

        let that = this;
        res.result.skuList.forEach(function (sku, index, array) {
          that.skuData.push({

 manager/src/views/health/HealthVideoList.vue

@@ -112,6 +112,7 @@
              <FormItem label="视频">
                <video style="width: 150px;height: 150px"
                       controls
                       @loadedmetadata="getVideoDuration"
                       :poster="uploadVideoForm.showCoverUrl"
                       :autoplay="false"
                       id="remoteVideo" :src="uploadVideoForm.showVideoUrl"
@@ -671,6 +672,10 @@
        this.auditingLoading = false
      })
    },
    getVideoDuration(e){
      const duration = this.$refs.healthVideoInfo.duration;
      this.uploadVideoForm.videoDuration = Math.floor(duration);
    },
    // 打开编辑弹窗
    deleteHealthVideo(row) {
      console.log('删除测试', row)

 manager/src/views/kitchen/kitchenVideo.vue

@@ -112,6 +112,7 @@
              <FormItem label="视频">
                <video style="width: 150px;height: 150px"
                       controls
                       @loadedmetadata="getVideoDuration"
                       :poster="uploadVideoForm.showCoverUrl"
                       :autoplay="false"
                       id="remoteVideo" :src="uploadVideoForm.showVideoUrl"
@@ -588,6 +589,10 @@
      this.$set(this.uploadVideoForm, 'temp', new Date().getTime());
      console.log(this.uploadVideoForm)
    },
    getVideoDuration(e){
      const duration = this.$refs.healthVideoInfo.duration;
      this.uploadVideoForm.videoDuration = Math.floor(duration);
    },
    // 视频上架
    videoUp(row) {
      this.$Modal.confirm({

 seller/package.json

@@ -13,6 +13,7 @@
    "@amap/amap-jsapi-loader": "0.0.7",
    "@antv/g2": "^4.1.14",
    "axios": "^0.21.1",
    "cos-js-sdk-v5": "^1.10.1",
    "dplayer": "^1.27.1",
    "js-cookie": "^2.2.1",
    "node-sass": "^4.14.1",

 seller/src/api/file.js

New file
@@ -0,0 +1,31 @@
import service, {
  getRequest,
  postRequest,
  putRequest,
  deleteRequest,
  importRequest,
  getRequestWithNoToken,
  commonUrl,
  postRequestWithNoForm
} from "@/libs/axios";


// 获取文件临时访问url
export const getFilePreview = (fileKey) => {
    return service({
        baseURL: commonUrl,
        url: "/common/lmk/file/preview",
        method: "POST",
        data: {"fileKey": fileKey}
    })
}

// 获取STS访问令牌
export const getSts = () => {
    return service({
        baseURL: commonUrl,
        url: "/common/lmk/file/sts",
        method: "GET"
    })
}


 seller/src/libs/axios.js

@@ -353,7 +353,8 @@
    }
  });
};

// 原始的axios暴露出去用即可
export default service
export const uploadFileRequest = (url, params) => {
  let accessToken = getStore("accessToken");
  return service({

 seller/src/utils/file.js

New file
@@ -0,0 +1,40 @@

/**
 * 生成fileKey
 *
 * @param fileName 文件名
 * @returns {*}
 */
export function getFileKey (fileName) {
    const extension = fileName.split('.').pop().toLowerCase();
        
    const fileTypes = {
        image: { name: '图片', exts: ["jpg", "png", "jpeg", "gif", "bmp", "webp", "tiff", "svg", "ico", "psd", "raw"] },
        video: { name: '视频', exts: ["mp4", "avi", "rmvb", "mov", "wmv", "flv", "mkv", "mpeg", "mpg", "m4v", "3gp", "webm", "vob", "swf"] },
        radio: { name: '音频', exts: ["mp3", "wma", "wav", "mpeg-4", "cd", "m4a", "aac", "flac", "ogg", "aiff", "ape", "midi", "amr", "ra"] },
        text: { name: '文本', exts: ["txt", "xls", "xlsx", "doc", "docx", "pdf", "ppt", "pptx", "csv", "rtf", "odt", "ods", "odp", "epub", "mobi", "pages", "numbers", "key"] },
        zip: { name: '压缩文件', exts: ["zip", "rar", "7z", "tar", "gz", "bz2", "xz", "iso", "dmg", "pkg", "cab", "z", "lz", "lzma", "lzo"] }
    };
  
    // 获取当前时间并格式化为 yyyyMMddHHmmss
    const now = new Date();
    const yyyyMMddHHmmss = [
        now.getFullYear(),
        String(now.getMonth() + 1).padStart(2, '0'),
        String(now.getDate()).padStart(2, '0'),
        String(now.getHours()).padStart(2, '0'),
        String(now.getMinutes()).padStart(2, '0'),
        String(now.getSeconds()).padStart(2, '0')
    ].join('');
	
    // 生成5位随机数字
    const random5Digits = Math.floor(10000 + Math.random() * 90000);
	
    // 查找匹配的文件类型
    for (const [type, data] of Object.entries(fileTypes)) {
        if (data.exts.includes(extension)) {
            return `${type}/${yyyyMMddHHmmss}${random5Digits}` + '.' + extension;
        }
    }
    return '';
}

 seller/src/views/goods/goods-seller/goods.vue

@@ -95,10 +95,11 @@
        <template slot="goodsSlot" slot-scope="{ row }">
          <div style="margin-top: 5px; height: 90px; display: flex">
            <div style="">
              <img
              <img v-if="row.original"
                :src="row.original"
                style="height: 80px; margin-top: 3px; width: 70px"
              />
              <video :src="row.goodsVideo" v-else style="height: 80px; margin-top: 3px; width: 70px"></video>
            </div>

            <div style="margin-left: 13px">

 seller/src/views/goods/goods-seller/goodsOperationFirst.vue

@@ -109,19 +109,19 @@
          type: "PHYSICAL_GOODS",
          check: false,
        },
        {
          title: "虚拟商品",
          img: require("@/assets/goodsType2.png"),
          desc: "虚拟核验，无需物流",
          type: "VIRTUAL_GOODS",
          check: false,
        },
        {
          title: "商品模板导入",
          img: require("@/assets/goodsTypeTpl.png"),
          desc: "商品模板，一键导入",
          check: false,
        },
        // {
        //   title: "虚拟商品",
        //   img: require("@/assets/goodsType2.png"),
        //   desc: "虚拟核验，无需物流",
        //   type: "VIRTUAL_GOODS",
        //   check: false,
        // },
        // {
        //   title: "商品模板导入",
        //   img: require("@/assets/goodsTypeTpl.png"),
        //   desc: "商品模板，一键导入",
        //   check: false,
        // },
      ],
      // 商品分类选择数组
      category: [
@@ -130,7 +130,8 @@
        { name: "", id: "" },
      ],
      // 商品类型
      goodsType: "",
      // goodsType: "",
      goodsType: "PHYSICAL_GOODS",
      /** 1级分类列表*/
      categoryListLevel1: [],
      /** 2级分类列表*/

 seller/src/views/goods/goods-seller/goodsOperationSec.vue

@@ -101,10 +101,10 @@
          </div>
          <h4>商品规格及图片</h4>
          <div class="form-item-view">
            <FormItem class="form-item-view-el required" label="主图" prop="goodsGalleryFiles">
            <FormItem class="form-item-view-el required" label="主图" prop="goodsGalleryFiles"  v-if=" baseInfoForm.goodsVideo ==null || baseInfoForm.goodsVideo ===''">
              <div style="display: flex; flex-wrap: wrap;">
                <vuedraggable :animation="200" :list="baseInfoForm.goodsGalleryFiles">
                  <div v-for="(item, __index) in baseInfoForm.goodsGalleryFiles" :key="__index"
                <vuedraggable :animation="200" :list="showListImages">
                  <div v-for="(item, __index) in showListImages" :key="__index"
                       class="demo-upload-list">
                    <template>
                      <img :src="item"/>
@@ -139,22 +139,33 @@
              </Modal>
            </FormItem>
            <FormItem>
              <div style="color: grey">主图仅支持png，jpg，jpeg格式，宽高至少600*600px，大小2M内，可拖拽调整主图顺序</div>

<!--              <div class="demo-upload-list" v-for="(item,index) in showListImages">-->
<!--                <template style="display: flex">-->
<!--                  <img :src="item">-->
<!--                  <div class="demo-upload-list-cover">-->
<!--                    <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>-->
<!--                    <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>-->
<!--                  </div>-->
<!--                </template>-->
<!--              </div>-->
              <div style="color: grey"  v-if="!baseInfoForm.goodsVideo">主图仅支持png，jpg，jpeg格式，宽高至少600*600px，大小2M内</div>
            </FormItem>
            <FormItem class="form-item-view-el" label="主图视频" prop="goodsVideo">
            <FormItem class="form-item-view-el" label="视频" prop="goodsVideo" v-if="!(baseInfoForm.goodsGalleryFiles !=null &&baseInfoForm.goodsGalleryFiles.length>0)">
              <div class="goods-video">
                <div v-if="baseInfoForm.goodsVideo">
                  <div>
                    <video :src="baseInfoForm.goodsVideo" class="video" controls style="max-width: 300px;"/>
                    <video :src="baseInfoForm.showGoodsVideo" class="video" controls style="max-width: 300px;"/>
                  </div>
                </div>
                <Upload ref="upload" :action="uploadFileUrl" :format="['avi', 'wmv', 'mpeg', 'mp4', 'mov']"
                <Upload ref="upload" action="-" :format="['avi', 'wmv', 'mpeg', 'mp4', 'mov']"
                        :headers="{ ...accessToken }"
                        :max-size="10240" :on-error="() => { loadingVideo = false }"
                        :on-exceeded-size="handleVideoMaxSize"
                        :on-format-error="handleFormatError" :on-progress="() => { loadingVideo = true }"
                        :on-success="handleSuccessGoodsVideo" :show-upload-list="false"
                        multiple
                        :before-upload="upLoadVideo"
                        accept="video/*"
                        style="margin-left: 10px" type="drag">
                  <Button :loading="loadingVideo" icon="ios-cloud-upload-outline" type="text">
                    <span v-if="!loadingVideo">
@@ -165,6 +176,9 @@
                    </span>
                  </Button>
                </Upload>
                <Button :loading="loadingVideo" v-if="baseInfoForm.goodsVideo"  icon="delete" @click="removeVideo" type="text">
                  <span>删除视频</span>
                </Button>
              </div>
            </FormItem>
            <div class="layout" style="width: 100%">
@@ -185,10 +199,13 @@
                              <div>
                                <AutoComplete v-model="item.name" :filter-method="filterMethod"
                                              :maxlength="30" placeholder="请输入规格项名称" style="width: 150px"
                                              @on-focus="changeSkuItem(item.name)" @on-change="editSkuItem(item.name, $index, item)">
                                              @on-focus="changeSkuItem(item.name)"
                                              @on-change="editSkuItem(item.name, $index, item)">
                                </AutoComplete>

                                <iSwitch v-if="$index === 0" style="margin-left: 10px" size="small" @on-change="changeSkuOpenImage" v-model="openImage" /><span v-if="$index === 0" style="margin-left: 5px">添加规格图片</span>
<!--                                <iSwitch v-if="$index === 0" style="margin-left: 10px" size="small"-->
<!--                                         @on-change="changeSkuOpenImage" v-model="openImage"/>-->
<!--                                <span v-if="$index === 0" style="margin-left: 5px">添加规格图片</span>-->
                              </div>
                            </FormItem>

@@ -210,7 +227,8 @@
                                                @on-change="skuValueChange(val, index, item)">
                                  </AutoComplete>
                                  <a style="margin-left: 6px" v-if="val.value && val.value !== ''">
                                    <Icon size="15" type="md-trash" @click="handleCloseSkuValue(val, index, item)"></Icon>
                                    <Icon size="15" type="md-trash"
                                          @click="handleCloseSkuValue(val, index, item)"></Icon>
                                  </a>
                                </div>
                                <div v-if="$index === 0 && openImage" style="margin-top: 10px">
@@ -227,17 +245,18 @@
                                        <div class="sku-upload-list-cover">
                                          <div style="margin-top: 50px" >
                                            <Icon size="25" type="md-search" @click="handleView(img)"></Icon>
                                            <Icon size="25" type="md-trash" @click="handleRemove(val.images, __index)"></Icon>
                                            <Icon size="25" type="md-trash"
                                                  @click="handleRemove(val.images, __index)"></Icon>
                                          </div>
                                        </div>
                                      </template>
                                    </div>
                                  </vuedraggable>
                                  <Upload ref="uploadSku" :action="uploadFileUrl"
<!--                                  todo 3-->
                                  <Upload ref="uploadSku" action="-"
                                          v-if="val.images < 1"
                                          :before-upload="handleBeforeUpload"
                                          :format="['jpg', 'jpeg', 'png', 'webp']"
                                          :headers="{ ...accessToken }"
                                          :max-size="2048"
                                          :on-error="() => { $Spin.hide(); }"
                                          :on-exceeded-size="handleMaxSize"
@@ -255,7 +274,9 @@
                                </div>
                              </FormItem>

                              <FormItem v-if="item.spec_values.length < 10 && item.spec_values.length >= 1 && item.spec_values[0].value !== ''" class="sku-item-content-val flex" label="" style="line-height: 32px;">
                              <FormItem
                                v-if="item.spec_values.length < 10 && item.spec_values.length >= 1 && item.spec_values[0].value !== ''"
                                class="sku-item-content-val flex" label="" style="line-height: 32px;">
                                <AutoComplete ref="input" v-model="newSkuValues[$index]"
                                              :filter-method="filterMethod"
                                              :maxlength="30" placeholder="自定义规格值" style="width: 180px"
@@ -473,8 +494,32 @@
    <!--<Modal width="1200px" v-model="picModelFlag">-->
    <!--<ossManage @callback="callbackSelected" ref="ossManage" />-->
    <!--</Modal>-->
    <Modal v-model="picModelFlag" width="1200px" @on-ok="confirmUrls">
      <ossManage ref="ossManage" :isComponent="true" :initialize="picModelFlag" @callback="callbackSelected" @selected="(list)=>{ selectedImage = list}"/>
    <!--    todo web-->
    <Modal v-model="picModelFlag" width="1200px">
      <!--      <ossManage ref="ossManage" :isComponent="true" :initialize="picModelFlag" @callback="callbackSelected" @selected="(list)=>{ selectedImage = list}"/>-->
      <div class="demo-upload-list" v-for="(item,index) in showListImages">
        <template>
          <img :src="item">
          <div class="demo-upload-list-cover">
            <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
            <Icon type="ios-trash-outline" @click.native="handleRemove(null,index)"></Icon>
          </div>
        </template>
      </div>
      <div class="demo-upload-list">
        <Upload
          :before-upload="upLoadImg"
          accept="image/*"
          action="-"
          type="drag"
          style=" display: inline-block;width: 58px"
        >
          <div style="width: 58px;height:58px;line-height: 58px;">
            <Icon type="ios-camera" size="20"></Icon>
          </div>
        </Upload>
      </div>

    </Modal>

  </div>
@@ -491,6 +536,9 @@
import DPlayer from 'dplayer';
// import ossManage from "@/views/sys/oss-manage/ossManage";
import ossManage from "@/views/shop/ossManages";
import COS from 'cos-js-sdk-v5';
import {getFileKey} from "@/utils/file.js";
import {getFilePreview, getSts} from "@/api/file";


export default {
@@ -523,6 +571,7 @@
      }, 1000);
    };
    return {
      showListImages: [],
      regular,
      openImage: false,
      needToloadSku: false,
@@ -625,6 +674,7 @@
        /** 商品分类中文名 */
        categoryName: [],
        goodsVideo: "",
        showGoodsVideo: "",
      },
      /** 表格头 */
      skuTableColumn: [],
@@ -703,7 +753,9 @@
  methods: {
    // 选择图片modal
    handleCLickImg(val, index) {
      this.$refs.ossManage.selectImage = true;
      console.log('测试输入的值----------------》', val)
      // 废弃原有的图片上传
      // this.$refs.ossManage.selectImage = true;
      this.picModelFlag = true;
      this.selectedFormBtnName = val;
      // this.picIndex = index;
@@ -865,7 +917,15 @@
    },
    // 移除已选图片
    handleRemove(item, index) {
      if (!item) {
        this.listImages.splice(index, 1);
        this.showListImages.splice(index, 1);
        this.baseInfoForm.goodsGalleryFiles.splice(index, 1);
        this.baseInfoForm.goodsGalleryList.splice(index, 1);
      } else {
        console.log('移除测试',item, index);
      item.splice(index, 1)
      }
      this.previewPicture = "";
    },
    // 查看商品大图
@@ -999,14 +1059,57 @@
      }
    },
    // sku图片上传前钩子
    handleBeforeUpload(file) {
  async handleBeforeUpload(file) {
      const check =
        this.selectedSku.images !== undefined &&
        this.selectedSku.images.length > 5;
      if (check) {
        this.$Notice.warning({title: "图片数量不能大于五张"});
        return false;
      }
      try {
        // this.upLoadVideoLoading = true;
        // 获取文件上传临时密钥
        const sts = await getSts();
        const cos = new COS({
          getAuthorization: async function (options, callback) {
            callback({
              TmpSecretId: sts.data.tmpSecretId,
              TmpSecretKey: sts.data.tmpSecretKey,
              SecurityToken: sts.data.sessionToken,
              // 建议返回服务器时间作为签名的开始时间，避免客户端本地时间偏差过大导致签名错误
              StartTime: sts.data.stsStartTime, // 时间戳，单位秒，如：1580000000
              ExpiredTime: sts.data.stsEndTime,// 时间戳，单位秒，如：1580000000
              ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
            });
          }
        })
        const fileKey = getFileKey(file.name)
        const upData = await cos.uploadFile({
          Bucket: sts.data.bucket,
          Region: sts.data.region,
          Key: fileKey,
          Body: file, // 要上传的文件对象。
          SliceSize: 1024 * 1024 * 5,
          onProgress: function (progressData) {
            console.log('上传进度：', progressData);
          },
        });
        console.log("上传成功", upData)
        this.$nextTick(() => {
          this.listImages.push(fileKey);
          this.showListImages.push(sts.data.endpoint + "/" + fileKey);
          this.baseInfoForm.goodsGalleryFiles.push(fileKey);
        })

      } catch (e) {
        console.log("上传失败", upData)
        return false;
      } finally {
        // this.upLoadVideoLoading = false;

      }
      return false;

    },

    /** 查询商品品牌列表 */
@@ -1086,7 +1189,33 @@
        this.baseInfoForm.goodsGalleryFiles =
          response.result.goodsGalleryList.map((i) => {
            return i;
          });
          })
        try {
          const stsInfo = await getSts();
          const endpoint = stsInfo.data.endpoint;
          this.showListImages = response.result.goodsGalleryList.map((i) => {
            if (i!=null&&i.indexOf('http')===-1)
            return endpoint+'/'+i;
            else return i;
          })
          if (response.result.goodsVideo){

          }
        } catch (e) {
          console.log('组装路径出问题',e);
        }

      }
     if (response.result.goodsVideo){
       try {
         const stsInfo = await getSts();
         const endpoint = stsInfo.data.endpoint;
         this.baseInfoForm.goodsVideo = response.result.goodsVideo;
         this.baseInfoForm.showGoodsVideo = endpoint + '/' + response.result.goodsVideo;
         console.log('显示商品视频------------------->', this.baseInfoForm.showGoodsVideo);
       } catch (e) {
         console.log('组装视频地址出错了')
       }
      }

      if (
@@ -1780,6 +1909,7 @@
    },
    /**  添加商品 **/
    save() {
      try {
      this.submitLoading = true;
      this.$refs["baseInfoForm"].validate((valid) => {
        if (valid) {
@@ -1793,14 +1923,15 @@
          }
          this.baseInfoForm.goodsId = this.goodsId;
          let submit = JSON.parse(JSON.stringify(this.baseInfoForm));
          if (
            submit.goodsGalleryFiles &&
            submit.goodsGalleryFiles.length <= 0
          ) {
            this.submitLoading = false;
            this.$Message.error("请上传商品图片");
            return;
          }
            console.log('----------------->提交',submit);
            // if (
            //   (submit.goodsGalleryFiles &&
            //     submit.goodsGalleryFiles.length <= 0) && !submit.goodsVideo
            // ) {
            //   this.submitLoading = false;
            //   this.$Message.error("请上传商品图片或者视频");
            //   return;
            // }
          if (submit.templateId === "") submit.templateId = 0;
          let flag = false;
          let paramValue = "";
@@ -1898,6 +2029,9 @@
          this.$Message.error("还有必填项未做处理，请检查表单");
        }
      });
      } finally {
        this.submitLoading = false;
      }
    },
    /** 保存为模板 */
    saveToDraft() {
@@ -1961,8 +2095,110 @@
        } else if (type === 'localRefresh') {
          this.$Message.error("刷新失败，请重试");
        }
      }).catch(reason => {
        console.log("获取模板失败",reason)
      });
    },
    removeVideo(){
      this.baseInfoForm.showGoodsVideo = null;
      this.baseInfoForm.goodsVideo = null;
    },
    // todo 文件上传
    async upLoadImg(file) {
      console.log(file,this.count++);
      if (this.listImages.length >= 5) {
        this.$Message.error("图片上传不能超过5个");
        return;
      }
      try {
        // this.upLoadVideoLoading = true;
        // 获取文件上传临时密钥
        const sts = await getSts();
        const cos = new COS({
          getAuthorization: async function (options, callback) {
            callback({
              TmpSecretId: sts.data.tmpSecretId,
              TmpSecretKey: sts.data.tmpSecretKey,
              SecurityToken: sts.data.sessionToken,
              // 建议返回服务器时间作为签名的开始时间，避免客户端本地时间偏差过大导致签名错误
              StartTime: sts.data.stsStartTime, // 时间戳，单位秒，如：1580000000
              ExpiredTime: sts.data.stsEndTime,// 时间戳，单位秒，如：1580000000
              ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
      });
    }
        })
        const fileKey = getFileKey(file.name)
        const upData = await cos.uploadFile({
          Bucket: sts.data.bucket,
          Region: sts.data.region,
          Key: fileKey,
          Body: file, // 要上传的文件对象。
          SliceSize: 1024 * 1024 * 5,
          onProgress: function (progressData) {
            console.log('上传进度：', progressData);
          },
        });
        console.log("上传成功", upData)
        this.$nextTick(() => {
          this.listImages.push(fileKey);
          this.showListImages.push(sts.data.endpoint + "/" + fileKey);
          this.baseInfoForm.goodsGalleryFiles.push(fileKey);
        })

      } catch (e) {
        console.log("上传失败", upData)
        return false;
      } finally {
        // this.upLoadVideoLoading = false;

      }
      return false;
    },
    async upLoadVideo(file) {
      try {
        // this.upLoadVideoLoading = true;
        // 获取文件上传临时密钥
        const sts = await getSts();
        const cos = new COS({
          getAuthorization: async function (options, callback) {
            callback({
              TmpSecretId: sts.data.tmpSecretId,
              TmpSecretKey: sts.data.tmpSecretKey,
              SecurityToken: sts.data.sessionToken,
              // 建议返回服务器时间作为签名的开始时间，避免客户端本地时间偏差过大导致签名错误
              StartTime: sts.data.stsStartTime, // 时间戳，单位秒，如：1580000000
              ExpiredTime: sts.data.stsEndTime,// 时间戳，单位秒，如：1580000000
              ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
            });
          }
        })
        const fileKey = getFileKey(file.name)
        const upData = await cos.uploadFile({
          Bucket: sts.data.bucket,
          Region: sts.data.region,
          Key: fileKey,
          Body: file, // 要上传的文件对象。
          SliceSize: 1024 * 1024 * 5,
          onProgress: function (progressData) {
            console.log('上传进度：', progressData);
          },
        });
        console.log("上传成功", upData)
        this.$nextTick(() => {
          this.baseInfoForm.goodsVideo = fileKey;
          this.baseInfoForm.showGoodsVideo = sts.data.endpoint + "/" + fileKey;
          this.baseInfoForm.goodsVideo = fileKey;
        })

      } catch (e) {
        console.log("上传失败", upData)
        return false;
      } finally {
        // this.upLoadVideoLoading = false;

      }
      return false;
    },
  },
  mounted() {
    this.accessToken = {
@@ -2044,4 +2280,45 @@
.refresh-icon {
  margin-left: 10px;
}

.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>