eep_page/src/views/book/create.vue

<template>
  <div class="create">
    <div class="breadcrumb">
      <ul>
        <li v-for="(item, i) in breadcrumbList" :key="item">
          <span v-if="i !== 0" class="separator">></span>
          <span class="breadcrumb-name">
            {{ item }}
          </span>
        </li>
      </ul>
    </div>
    <div class="basic-info">
      <div class="basic-info-title">基本信息</div>
      <el-form ref="form" :model="form" :rules="formRules" label-width="80px">
        <el-form-item label="封面" prop="cover_image_url">
          <el-upload
            class="cover-uploader"
            action="none"
            :show-file-list="false"
            :http-request="uploadCover"
            :before-upload="beforeCoverUpload"
          >
            <img v-if="form.cover_image_url" :src="form.cover_image_url" class="cover" />
            <div v-else class="cover-uploader-icon">
              <i class="el-icon-plus"></i>
              <span>点击上传封面</span>
            </div>
          </el-upload>
          <div class="tips">支持jpg、png格式图片，图片尺寸必须为 456 x 640px，大小不超过5mb。</div>
        </el-form-item>
        <el-form-item label="书籍名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="form.author" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="现价" prop="current_price">
          <el-input v-model="form.current_price" placeholder="请输入内容">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="原价" prop="original_price">
          <el-input v-model="form.original_price" placeholder="请输入内容">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="标签" prop="tags">
          <el-input v-model="form.tags" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="分类" prop="classify">
          <el-select v-model="form.classify" placeholder="选择分类">
            <el-option label="分类1" value="1" />
            <el-option label="分类2" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="简介" prop="brief_introduction">
          <el-input
            v-model="form.brief_introduction"
            type="textarea"
            :autosize="{ minRows: 12 }"
            :maxlength="500"
            show-word-limit
            placeholder="请输入更多内容"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="confirm">确定</el-button>
          <el-button @click="$router.push('/')">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { fileUpload } from '@/api/app';

export default {
  name: 'CreateBookPage',
  data() {
    return {
      id: this.$route.query.id,
      form: {
        cover_image_url: '',
        image_id: '',
        name: '',
        author: '',
        current_price: '',
        original_price: '',
        tags: '',
        classify: '',
        brief_introduction: '',
      },
      formRules: {
        cover_image_url: [{ required: true, message: '请上传封面', trigger: 'blur' }],
        name: [{ required: true, message: '请输入书籍名称', trigger: 'blur' }],
        author: [{ required: true, message: '请输入作者', trigger: 'blur' }],
        current_price: [{ required: true, message: '请输入现价', trigger: 'blur' }],
        classify: [{ required: true, message: '请选择分类', trigger: 'blur' }],
        brief_introduction: [{ required: true, message: '请输入简介', trigger: 'blur' }],
      },
      breadcrumbList: ['教材管理', '新建教材', '基本信息'],
    };
  },
  created() {
    if (this.id) {
      // TODO 获取书籍信息
    }
  },
  methods: {
    confirm() {
      this.$router.push('/book/setting/123');
    },
    uploadCover(file) {
      fileUpload('Mid', file, { isGlobalprogress: true }).then(({ file_info_list }) => {
        if (file_info_list.length > 0) {
          const { file_url, file_id } = file_info_list[0];
          this.form.cover_image_url = file_url;
          this.form.image_id = file_id;
        }
      });
    },
    beforeCoverUpload(file) {
      return new Promise((resolve, reject) => {
        // 图片尺寸必须为 456 x 640px
        const img = new Image();
        img.src = window.URL.createObjectURL(file);
        let isCorrectSize = true; // 是否为正确尺寸
        img.onload = () => {
          const { width, height } = img;
          if (width !== 456 || height !== 640) {
            isCorrectSize = false;
            this.$message.error('图片尺寸必须为 456 x 640px!');
            reject();
          }

          const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
          if (!isJPG) {
            this.$message.error('上传封面图片只能是 JPG 或 PNG 格式!');
            reject();
          }

          const isLt5M = file.size / 1024 / 1024 < 5;
          if (!isLt5M) {
            this.$message.error('上传封面图片大小不能超过 5MB!');
            reject();
          }

          if (!isCorrectSize && isJPG && isLt5M) {
            resolve();
          }
        };
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.create {
  padding: 8px 24px;

  .breadcrumb {
    display: flex;
    align-items: center;

    > ul {
      display: flex;

      li {
        font-size: 14px;
        font-weight: 400;
        color: $font-light-color;

        .separator {
          margin: 0 8px;
          color: #c9cdd4;
        }

        &:nth-last-child(1) {
          font-weight: bold;
          color: $font-color;
        }
      }
    }
  }

  .basic-info {
    width: 1200px;
    padding: 24px;
    margin: 24px auto 16px;
    background-color: #fff;
    border-radius: 4px;

    &-title {
      margin-bottom: 24px;
      font-size: 18px;
      font-weight: bold;
    }

    .el-form {
      .el-input,
      .el-textarea,
      .el-select {
        width: 400px;

        :deep .el-input__inner,
        :deep .el-textarea__inner {
          background-color: #fff;
          border-color: #dcdcdc;
        }
      }

      .cover-uploader {
        :deep .el-upload {
          position: relative;
          overflow: hidden;
          cursor: pointer;
          border: 1px dashed #d9d9d9;
          border-radius: 6px;

          &:hover {
            border-color: #409eff;
          }
        }

        &-icon {
          display: flex;
          flex-direction: column;
          row-gap: 4px;
          align-items: center;
          justify-content: center;
          width: 228px;
          height: 320px;
          font-size: 12px;
          color: #8c939d;
          background-color: #eee;

          .el-icon-plus {
            font-size: 16px;
            font-weight: bold;
            color: #000;
          }
        }

        .avatar {
          display: block;
          width: 178px;
          height: 178px;
        }
      }

      .tips {
        margin-top: -4px;
        font-size: 12px;
        color: #8c8c8c;
      }

      &-item {
        margin-bottom: 24px;
      }
    }
  }
}
</style>