可退款按钮

zhaoxiaoqiang

2023-09-07 96f3af2ea35e3e104916b78a803afb794d6d9588

 src/components/upload.vue

@@ -2,294 +2,156 @@
 * @Author: zxq
 * @Date: 2022-01-05 18:44:53
 * @LastEditors: zhaoxiaoqiang 287285524@qq.com
 * @LastEditTime: 2023-08-24 14:39:04
 * @LastEditTime: 2023-08-31 14:56:53
 * @Description: Description
 * @FilePath: \qyp_finlean_plat\src\components\upload.vue
 * @FilePath: \sjzl-plat\src\components\upload.vue
-->
<template>
  <div style="width: 100%">
  <div>
    <el-upload
      action="#"
      :limit="limit"
      multiple
      class="upload-demo"
      :list-type="!isUploadOther?'picture-card':''"
      :disabled="disabled"
      :on-exceed="masterFileMax"
      :before-upload="beforeAvatarUpload"
      :http-request="uploadFileData"
      :file-list="PicList"
      :class="[uploadDisabled ? 'updispaly' : '']"
    >
      <el-button v-if="isUploadOther" size="small" icon="el-icon-plus" type="primary" >点击上传</el-button>
      <i v-else slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file }">
        <template v-if="isUploadOther">
          <div class="pdf_style" v-if='file.url'>
            <template
              v-if="
                file.url
                  .substring(file.url.lastIndexOf('.'))
                  .split('.')[1]
                  .trim() != 'pdf'
              "
        action="#"
        :limit='limit'
          multiple
        :disabled='disabled'
        list-type="picture-card"
        :on-exceed="masterFileMax"
        :before-upload="beforeAvatarUpload"
        :http-request="uploadFileData"
        :file-list="pictureList"
        >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{ file }">
            <!-- <span>{{ file.url }}</span> -->
            <img class="el-upload-list__item-thumbnail"  :src="file.url"  alt=""/>
            <span class="el-upload-list__item-actions">
            <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
            >
              <div :style="imgStyle" class="img_box">
                <img
                  class="el-upload-list__item-thumbnail"
                  :style="imgStyle"
                  :src="file.url"
                  alt=""
                />
                <div class="el-upload-list__item-actions" :style="imgStyle">
                  <span class="el-upload-list__item-preview">
                    <i
                      class="el-icon-zoom-in"
                      style="color: #fff; font-size: 20px"
                      @click="handlePictureCardPreview(file)"
                    ></i>
                    <i
                      class="el-icon-delete"
                      style="color: #fff; font-size: 20px"
                      @click="handleRemoveLoanT(file)"
                    ></i>
                  </span>
                </div>
              </div>
            </template>
            <template v-else>
              <div class="pdf_box">
                <span>{{ file.fileName }}</span>
                <i
                  class="el-icon-delete delete_file"
                  style="color: #fff; font-size: 20px"
                  @click="handleRemoveLoanT(file)"
                ></i>
              </div>
            </template>
          </div>
        </template>
        <template v-else>
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
              <i class="el-icon-zoom-in"></i>
                <i class="el-icon-zoom-in"></i>
            </span>
            <span v-if='!disabled' class="el-upload-list__item-delete" @click="handleRemoveLoanT(file)">
              <i class="el-icon-delete"></i>
            <span  v-if='!disabled'
                class="el-upload-list__item-delete"
                @click="handleRemoveLoanT(file)"
            >
                <i class="el-icon-delete"></i>
            </span>
          </span>
        </template>
      </div>
            </span>
        </div>
    </el-upload>
    <el-dialog
      title="查看图片"
      :append-to-body="true"
      top="0"
      :visible.sync="imgVisible"
      class="dialogImageUrlbox"
    >
      <img width="100%" :src="dialogImageUrl" alt="" />
    <el-dialog title="查看图片" top="1vh"  :append-to-body='true' :visible.sync="imgVisible" class='dialogImageUrlbox'>
      <img width="80%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { uploadFile } from "@/api/user";
import { imgShrink } from "@/utils/validate";
import {showTipOfStatuCode} from '@/utils/statusCodeManage'

export default {
  props: {
    limit: {
      type: Number | String,
      default: "",
    },
    disabled: {
  props:{
     limit: {
      type: Number,
      default: 1
     },
     disabled: {
      type: Boolean,
      default: false,
    },
    defaultList: {
      default: false
     },
     defaultList:{
      type: Array,
      default: () => {
        return [];
      },
    },
    imgSize: {
      type: Object,
      default: () => {
        return {};
      },
    },
    imgStyle: {
      type: Object,
      default: () => {
        return {
          width: "100px",
          height: "100px",
        };
      },
    },
    isUploadOther: {
      default: ()=>{
          return []
      }
     },
     isProject:{
      type: Boolean,
      default: false,
    },
      default: false
     }
  },
  data() {
    return {
      PicList: [],
      imgVisible: false,
      dialogImageUrl: "",
      uploadFileForm: {
        suffix: "",
        base64Data: "",
      },
      uploadDisabled: false,
    };
      return {
          pictureList:[],
          imgVisible:false,
          dialogImageUrl:'',
          uploadFileForm:{
             suffix:"",
             base64Data:""
          }
      };
  },
  watch: {
    defaultList: {
      handler: function (val) {
        this.PicList = val;
      },
      deep: true,
    },
  watch:{
      defaultList:{
        handler: function(val) {
          console.log(val)
          this.pictureList = val;
        },
        deep: true
    }
  },
  methods: {
    beforeAvatarUpload(file, type) {
      var testmsg = !/\/(?:jpg|jpeg|png|pdf)/i.test(file.type);
      const isLt5M = file.size / 1024 / 1024 < 100;
      if (testmsg) {
        this.$message.error("请检查文件格式");
        return false;
      }
      if (!isLt5M) {
        this.$message.error("上传图片大小不能超过 100MB!");
        return false;
      }
    },
    uploadFileData(file, type) {
      if(this.isUploadOther){
        var formData = new FormData(); //新建表单对象
        formData.append("file", file.file); //把文件对象添加到表单对象里
        formData.append("filename", file.file.name); //把文件名称添加到表单对象里
        axios.post("/sfPlat/pub/uploadLargeFile", formData).then(({ data }) => {
            let { fileUrl, fileName, fileId } = data.body;
            this.PicList.push({
              fileUrl: fileUrl,
              fileName,
              url: fileUrl,
              fileId,
            });
            this.$emit("sendList", this.PicList);
          })
          .catch((err) => {
            showTipOfStatuCode(err)
          });
      }else{
      beforeAvatarUpload(file,type) {
          var testmsg = /^image\/(jpeg|png|jpg)$/.test(file.type);
          const isLt5M = file.size / 1024 / 1024 < 15;
          if (!testmsg) {
              this.$message.error("上传图片格式不对!");
              return false;
          }
          if (!isLt5M) {
              this.$message.error("上传图片大小不能超过 15MB!");
              return false;
          }
      },
      uploadFileData(file,type) {
          //上传图片
          const fileName = file.file.name;
          this.uploadFileForm.suffix = fileName.substr(fileName.lastIndexOf(".") + 1, fileName.length);
          imgShrink(file.file,this.imgSize.width,this.imgSize.height).then(resBase64 => {
            this.uploadFileForm.base64Data = resBase64.split(",")[1];
            //直接拿到base64信息
            uploadFile(this.uploadFileForm).then(res => {
              this.PicList.push({
                filePath: res.body.fileUrl,
                fileName: fileName,
                url: res.body.fileUrl,
                fileId: res.body.fileId
          this.uploadFileForm.suffix = fileName.substr( fileName.lastIndexOf(".") + 1,fileName.length); 
          imgShrink(file.file).then(resBase64 => {
              this.uploadFileForm.base64Data = resBase64.split(",")[1];
              let apiEvent = {uploadFile};
              //直接拿到base64信息
              apiEvent["uploadFile"](this.uploadFileForm).then(res => {
                  this.pictureList.push({
                      filePath: res.body.fileUrl,
                      fileName: fileName,
                      uid: file.file.uid,
                      url: res.body.fileUrl,
                      fileId:res.body.fileId
                  });
                  this.$emit('sendList',this.pictureList);
              });
              this.uploadDisabled = this.PicList.length >= 1 && this.limit==1
              this.$emit('sendList', this.PicList);
            });
          });
      },
      handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.imgVisible = true;
      },
      handleRemoveLoanT(file) {
        const index = this.pictureList.findIndex(item => {
            return item.uid == file.uid;
        });
        this.pictureList.splice(index,1);
        this.$emit('sendList',this.pictureList);
      },
      masterFileMax(){
        this.$message.warning(`请最多上传 ${this.limit} 个文件。`);
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.imgVisible = true;
    },
    handleRemoveLoanT(file) {
      const index = this.PicList.findIndex((item) => {
        return item.fileId == file.fileId;
      });
      this.PicList.splice(index, 1);
      this.uploadDisabled = this.PicList.length >= 1 && this.limit == 1;
      this.$emit("sendList", this.PicList);
    },
    masterFileMax() {
      this.$message.warning(`最多上传 ${this.limit} 个文件。`);
    },
  },
  created() {},
  mounted() {
    if (this.defaultList.length > 0) {
      this.PicList = this.defaultList;
      this.uploadDisabled = this.PicList.length >= 1 && this.limit == 1;
      this.pictureList = this.defaultList;
      this.uploadDisabled = this.pictureList.length >= 1 && this.limit == 1;
    }
  },
};
</script>

<style  lang="scss">
.updispaly {
  .el-upload--picture-card {
    display: none;
  }
  .el-upload {
    width: 100% !important;
    height: 100% !important;
  }
  .uplaod_img > .el-upload--picture-card {
    width: 100% !important;
    height: 100% !important;
  }
<style>
.el-upload--picture-card , .el-upload-list__item{
  width: 74px !important;
  height: 74px !important;
  line-height: 76px !important;
}
.pdf_style{
  .img_box {
    position: relative;
    margin-right: 5px;
    margin-bottom: 5px;
  }
  .el-upload-list__item {
    width: inherit !important;
  }
  .el-upload-list__item-actions {
    position: absolute !important;
    top: 0 !important;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    background: rgba(0, 0, 0, 0.5);
  }

  .img_box:hover .el-upload-list__item-actions {
    opacity: 1;
  }
  .el-upload-list {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }
  .pdf_box {
    padding: 5px 0;
    padding-right: 24px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .delete_file {
    display: inline-block;
    margin-left: 12px;
    opacity: 0;
  }
  .pdf_box:hover .delete_file {
    opacity: 1;
    color: #666 !important;
  }
}

 
</style>