设备管理 样式调整

mark

2022-10-25 f20a554bdb24e9dfde9dc6a69d78595944f61d15

 src/views/productDetail/components/UploadBox.vue

@@ -2,7 +2,7 @@
  <div class="UploadBox">
    <div class="title">线下汇款说明</div>
    <div class="close iconfont" @click="close">&#xe60f;</div>
    <div class="content">
    <div class="content scroll">
      <el-form
        :model="certificateForm"
        ref="certificateForm"
@@ -61,20 +61,28 @@
          <el-form-item label="备注" prop="reserved">
            <el-input type="textarea" v-model="item.reserved"></el-input>
          </el-form-item>
          <el-form-item label="付款凭证" prop="pic">
          <el-form-item
            label="付款凭证"
            :prop="`list[${index}].appendix`"
            :rules="[
              { required: true, message: '请上传凭证', trigger: 'blur' },
            ]"
          >
            <el-image
              class="preview"
              v-if="item.appendix"
              :src="`/httpImage/${item.appendix}`"
              fit="contain"
            ></el-image>
            <el-upload
              v-else
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              :http-request="(param) => definedUpload(param, index)"
              :show-file-list="false"
              accept=".jpg, .jpeg, .png"
            >
              <el-image
                class="preview"
                v-if="item.appendix"
                :src="`/httpImage/${item.appendix}`"
                fit="contain"
              ></el-image>
              <div class="el-upload__text">
                <i class="el-icon-plus"></i>
                <span class="words">
@@ -82,11 +90,13 @@
                </span>
              </div>
            </el-upload>
            <i
              class="el-icon-error remove"
              v-if="item.appendix"
              @click="item.appendix = ''"
            ></i>
            <div>
              <i
                class="el-icon-error remove"
                v-if="item.appendix"
                @click="item.appendix = ''"
              ></i>
            </div>
          </el-form-item>
          <!-- <div class="text-left" v-if="index!=0">
            <el-button
@@ -114,10 +124,10 @@

export default {
  props: {
    offerId: {},
    orderId: {},
  },
  mounted() {
    this.certificateForm.orderId = this.offerId;
    this.certificateForm.orderId = this.orderId;
  },
  data() {
    return {
@@ -158,12 +168,25 @@
      this.certificateForm.list.splice(index, 1);
    },
    definedUpload(param, index) {
      const fileName = param.file.name;
      const m = fileName.match(/\.(\w+)(#|\?|$)/);
      const fileType = (m && m[1]).toString().toLowerCase();
      const validType = ["jpg", "jpeg", "png"].includes(fileType);
      if (!validType) {
        this.$notify({
          message: "上传格式有误",
          type: "warning",
        });
        return;
      }

      let _this = this;
      const fd = new FormData();
      fd.append("file", param.file);
      console.log(param);
      request({
        method: "post",
        url: `/data/api-s/file/upload`,
        url: `/saas/api-s/saasFile/upload`,
        data: fd,
      })
        .then((res) => {
@@ -191,8 +214,18 @@
                  duration: 2500,
                  offset: 57,
                });
                this.certificateSubmitVisible = false;
                this.close();

                if (this.$route.path === "/personalCenter") {
                  this.$emit("closeAll");
                  return;
                }

                this.$router.push({
                  path: "/personalCenter",
                  query: {
                    id: 0,
                  },
                });
              }
            })
            .catch((e) => {
@@ -255,6 +288,8 @@
  }

  .content {
    height: 533px;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 30px 20px 20px 20px;
    font-size: 14px;
@@ -265,7 +300,7 @@
    right: 20px;
    bottom: 20px;
    display: flex;
    justify-content: end;
    justify-content: flex-end;
    text-align: center;
    line-height: 40px;

@@ -313,6 +348,9 @@
    font-size: 12px;
  }
}
.el-image {
  width: 120px;
}
</style>

<style lang="scss">
@@ -322,6 +360,7 @@
  border: 1px dashed #c0c5cc !important;
  border-radius: 3px;
  background: #e9ebee;

  .el-upload__text {
    margin-top: 35px;
    display: flex;