更新需求

package.json

@@ -15,6 +15,7 @@
     "js-base64": "^2.6.2",
     "uuid": "^8.3.2",
     "vue": "^2.6.11",
+    "vue-cropper": "^0.5.5",
     "vue-layer": "^1.2.5",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.1.6",

src/components/cropper/index.vue

@@ -0,0 +1,289 @@
+<template>
+  <div class="custom-upload">
+    <el-dialog
+      title="图片裁剪"
+      :visible.sync="showCropper"
+      top="6vh"
+      width="50%"
+      height="700"
+      class="cropper-dialog"
+      center
+      append-to-body
+    >
+      <vue-cropper
+        v-if="showCropper"
+        id="corpper"
+        ref="cropper"
+        :class="{'corpper-warp':showCropper}"
+        v-bind="cropper"
+        :style="{height:`${height}px`}"
+      />
+      <div v-if="showCropper" class="cropper-button">
+        <el-button class="cancel-btn" size="small" @click.native="showCropper=false">取消</el-button>
+        <el-button size="small" type="primary" :loading="loading" @click="uploadCover">完成</el-button>
+      </div>
+    </el-dialog>
+    <input
+      :id="id"
+      type="file"
+      style="display: none"
+      name="single"
+      accept="image/*"
+      @change="onChange($event)"
+    />
+
+    <div class="avatar-uploader" @click="handleOpenFile()">
+      <div class="el-upload el-upload--text">
+        <div v-if="img" class="imgdiv">
+          <img
+            style="width: 100%;height:100%;"
+            :src="OSSURL + img"
+          >
+          <i class="el-icon-circle-close" @click.stop="clearImg"></i>
+        </div>
+        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+      </div>
+    </div>
+
+    <div v-if="tips" class="tips clear-margin-top">{{ tips }}</div>
+  </div>
+</template>
+
+<script>
+// 上传文件组件
+import { VueCropper } from 'vue-cropper'
+
+// 定义的接口根据自己项目更换
+
+import { isImageFile, isMaxFileSize, readFile } from '@/util/upload' // 见下文
+import { Message } from 'element-ui'
+
+export default {
+  components: {
+    VueCropper
+  },
+  props: {
+    // 最大上传文件的大小
+    maxFileSize: {
+      type: Number,
+      default: 20 // （MB)
+    },
+    uploadUrl: {
+      type: String
+    },
+    img: {
+      type: String
+    },
+    // 提示内容
+    tips: {
+      type: String
+    },
+    // 图片裁剪比列
+    fixedNumber: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    },
+    // 图片文件分辨率的宽度
+    width: {
+      type: Number,
+      default: 8640
+    },
+    // 图片文件分辨率的高度
+    height: {
+      type: Number,
+      default: 1920
+    }
+  },
+  data () {
+    return {
+      id: 'cropper-input-' + new Date(),
+      loading: false,
+      showCropper: false,
+      imgName: '',
+      cropper: {
+        img: '',
+        info: true,
+        size: 1024 * 4,
+        outputType: 'jpg',
+        canScale: true,
+        autoCrop: true,
+        full: true,
+        // 只有自动截图开启 宽度高度才生效
+        autoCropWidth: this.width,
+        autoCropHeight: this.height,
+        fixedBox: false,
+        // 开启宽度和高度比例
+        fixed: true,
+        fixedNumber: this.fixedNumber,
+        original: false,
+        canMoveBox: true,
+        canMove: true
+      }
+    }
+  },
+  methods: {
+    // 打开文件
+    clearImg () {
+      this.$emit('clearImg')
+    },
+    handleOpenFile () {
+      const input = document.getElementById(this.id)
+      // 解决同一个文件不能监听的问题
+      input.addEventListener(
+        'click',
+        function () {
+          this.value = ''
+        },
+        false
+      )
+      // 点击input
+      input.click()
+    },
+
+    // 裁剪input 监听
+    async onChange (e) {
+      const file = e.target.files[0]
+
+      if (!file) {
+        return Message.error('选择图片失败')
+      }
+      // 验证文件类型
+      if (!isImageFile(file)) {
+        return
+      }
+      try {
+        // 读取文件
+        const src = await readFile(file)
+        this.imgName = file.name
+        this.showCropper = true
+        this.cropper.img = src
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 封面上传功能
+    uploadCover () {
+      this.$refs.cropper.getCropBlob(async imgRes => {
+        try {
+          // 文件大小限制
+          if (!isMaxFileSize(imgRes, this.maxFileSize)) {
+            return
+          }
+          this.loading = true
+          let formData = new FormData()
+
+          formData.append('file', imgRes, this.imgName)
+          // formData.append('filename', this.imgName)
+        console.log(this.imgName,111111111111)
+
+          const res = await this.$http.post(
+            this.uploadUrl,
+            formData,
+              {
+                headers:{'Content-Type': 'multipart/form-data'},
+              }
+            )
+
+          this.$emit('subUploadSucceed', res.data)
+          Message.success('上传成功')
+          this.loading = false
+          this.showCropper = false
+        } catch (error) {
+          this.loading = false
+          this.showCropper = false
+          Message.error(error)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less"  >
+.el-icon-circle-close{
+  display: none !important;
+}
+#corpper {
+  width: 90%;
+  margin: 0 auto;
+  background-image: none;
+  background: #fff;
+  z-index: 1002;
+  height: 512px;
+}
+.cropper-dialog {
+  height: 800px;
+  text-align: center;
+  .el-dialog__header {
+    padding-top: 15px;
+  }
+  .el-dialog--center .el-dialog__body {
+    padding-top: 0;
+    padding-bottom: 15px;
+  }
+  .el-dialog {
+    text-align: center;
+  }
+}
+.cropper-button {
+  z-index: 1003;
+  text-align: center;
+  margin-top: 20px;
+  .el-button {
+    font-size: 16px;
+    cursor: pointer;
+    text-align: center;
+  }
+  .cancel-btn {
+    color: #373737;
+  }
+  .el-button:last-child {
+    margin-left: 100px;
+  }
+}
+.cropper-modal {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+}
+.custom-upload {
+  .tips {
+    margin-top: 10px;
+    color: red;
+    font-size: 12px;
+  }
+  .clear-margin-top {
+    margin-top: 0;
+  }
+}
+</style>
+
+<style>
+.avatar-uploader{
+  width: 180px;
+  max-height: 180px;
+}
+.avatar-uploader .el-upload {
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  /* height: 178px; */
+  display: block;
+}
+</style>

src/configue/http.js

@@ -11,7 +11,7 @@ let loading = ''
 // 不校验token的api
 const notTokenApis = ['/admin/login']
 // 配置请求域名
-// const serverName = 'http://192.168.0.135:8001/'
+// const serverName = 'http://8.135.106.227:8001'
 const serverName = isProduction ? 'http://8.135.106.227:8001/' : 'http://8.135.106.227:8001/'
 // http://192.168.0.44:8100/web/index.html#/
 
@@ -20,7 +20,7 @@ const serverLocation = window.location.hostname
 axios.defaults.baseURL = serverName
 axios.defaults.headers['X-Requested-with'] = 'XMLHttpRequest'
 // axios.defaults.headers['token'] =  window.localStorage.getItem('token')
-const expectUrls = ['/manage/file/upload']
+const expectUrls = ['/manage/file/upload','/manage/book/upload','manage/goods/upload']
 
 axios.interceptors.request.use(function (config) {
   const token = localStorage.getItem('token')
@@ -48,7 +48,7 @@ axios.interceptors.request.use(function (config) {
   });
   for (let i = 0; i < expectUrls.length; i++) {
     const element = expectUrls[i];
-    if(element == config.url){
+    if(config.url.indexOf(element)>-1 ){
       return config
     }
   }

src/pages/collection/collectionEdit.vue

@@ -72,51 +72,79 @@
       </el-row>
 
       <el-row>
-        <el-form-item label="藏品图片">
-          <el-upload
-            class="avatar-uploader"
-            ref="upload"
-            accept=".jpg,.png"
-            :headers="headerObj"
-            :action="uploadUrl"
-            :on-error="handleError"
-            :show-file-list="false"
-            :on-success="handleIconSuccess"
-            :before-upload="beforeIconUpload"
-            :on-change="handleChange"
-            :on-remove="handleRemove"
-          >
-            <img
-              v-if="ruleForm.thumb"
-              :src="OSSURL + ruleForm.thumb"
-              class="avatar"
-            />
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-            <!-- 单纯用来刷新视图的变化的 -->
-            <el-input v-show="false" v-model="refresh"></el-input>
-          </el-upload>
-          <div>
-            <p style="color: #999">格式要求：</p>
-            <p style="color: #999; line-height: 1">1、支持png,jpeg的图片格式</p>
-            <p style="color: #999">2、最大可支持10M</p>
-          </div>
-        </el-form-item>
+        <div class="myRow">
+          <!-- 单纯用来刷新视图的变化的 -->
+          <el-input v-show="false" v-model="refresh"></el-input>
+
+          <!-- 裁剪的图片 -->
+          <el-form-item label="封面图片">
+            <Cropper
+              :width="250"
+              :height="250"
+              :fixed-number="[1, 1]"
+              :uploadUrl="uploadUrl"
+              :img="ruleForm.thumb"
+              @clearImg="ruleForm.thumb = ''"
+              @subUploadSucceed="getShopImages"
+            >
+            </Cropper>
+          </el-form-item>
+
+          <el-form-item label="藏品图片">
+            <el-upload
+              class="avatar-uploader"
+              ref="upload"
+              accept=".jpg,.png"
+              :headers="headerObj"
+              :action="uploadUrl"
+              :on-error="handleError"
+              :show-file-list="false"
+              :on-success="handleIconSuccess"
+              :before-upload="beforeIconUpload"
+              :on-change="handleChange"
+              :on-remove="handleRemove"
+            >
+              <img
+                v-if="ruleForm.filePath"
+                :src="OSSURL + ruleForm.filePath"
+                class="avatar"
+              />
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+          </el-form-item>
+          <el-form-item>
+            <div>
+              <p style="color: #999">格式要求：</p>
+              <p style="color: #999; line-height: 1">
+                1、支持png,jpeg的图片格式
+                <br />
+                <br />
+                2、最大可支持10M
+                <br />
+                <br />
+                3、封面图片建议上传250 * 250尺寸的图片
+              </p>
+            </div>
+          </el-form-item>
+        </div>
       </el-row>
       <el-row>
         <el-form-item label="藏品介绍" prop="description">
           <!-- <vue-editor class="quill-editor" v-model="ruleForm.description" /> -->
-            <!-- 图片上传 -->
-            <el-upload
-              class="upload-demo"
-              action="http://8.135.106.227:8001/manage/goods/upload"
-              multiple
-              :headers="headerObj"
-              :before-upload="beforethumbUploadImg"
-              :on-success="upload_thumb_successImg"
+          <!-- 图片上传 -->
+          <el-upload
+            class="upload-demo"
+            action="http://8.135.106.227:8001/manage/goods/upload"
+            multiple
+            :headers="headerObj"
+            :before-upload="beforethumbUploadImg"
+            :on-success="upload_thumb_successImg"
+          >
+            <el-button size="small" type="primary">图片上传</el-button>
+            <span class="fwbtit"
+              >支持png、jpg、gif和jpeg的图片格式；最大支持5M</span
             >
-              <el-button size="small" type="primary">图片上传</el-button>
-              <span class="fwbtit">支持png、jpg、gif和jpeg的图片格式；最大支持5M</span>
-            </el-upload>
+          </el-upload>
           <div id="div1" style="z-index: 1"></div>
         </el-form-item>
       </el-row>
@@ -134,12 +162,15 @@
 </template>
 
 <script>
+import Cropper from "@/components/cropper";
 import E from "wangeditor";
 import * as common from "@/util/commonfn.js";
 // import { VueEditor } from "vue2-editor";
 export default {
+  name: "CPXX",
   components: {
     // VueEditor,
+    Cropper,
   },
   data() {
     return {
@@ -149,11 +180,15 @@ export default {
         token: window.localStorage.getItem("token"),
       },
       ruleForm: {
+        thumb: "",
         goodsTypeId: "",
         display: 0,
       },
       rules: {
-        name: [{ required: true, message: "请输入藏品名称", trigger: "blur" },{ max: 32, message: '不能超过32个字', trigger: 'blur' }],
+        name: [
+          { required: true, message: "请输入藏品名称", trigger: "blur" },
+          { max: 32, message: "不能超过32个字", trigger: "blur" },
+        ],
         goodsTypeId: [
           { required: true, message: "请选择藏品分类", trigger: "blur" },
         ],
@@ -194,37 +229,44 @@ export default {
     },
   },
   methods: {
+    // 图片裁剪功能
+    getShopImages(img) {
+      this.ruleForm = { ...this.ruleForm, thumb: img.ossPath };
+      // this.ruleForm.thumb = img.ossPath;
+      // 刷新下页面
+      this.refresh = "刷新了";
+    },
     // 上传图片
-    beforethumbUploadImg (file) {
+    beforethumbUploadImg(file) {
       // console.log(998, file)
       // 限制图片大小和格式
-      const sizeOk = file.size / 1024 / 1024 < 5
+      const sizeOk = file.size / 1024 / 1024 < 5;
       const typeOk =
-        file.type === 'image/png' ||
-        file.type === 'image/jpeg' ||
-        file.type === 'image/gif'
+        file.type === "image/png" ||
+        file.type === "image/jpeg" ||
+        file.type === "image/gif";
 
       return new Promise((resolve, reject) => {
         if (!typeOk) {
-          this.$message.error('照片格式有误！')
-          reject(file)
+          this.$message.error("照片格式有误！");
+          reject(file);
         } else if (!sizeOk) {
-          this.$message.error('照片大小超过5M！')
-          reject(file)
+          this.$message.error("照片大小超过5M！");
+          reject(file);
         } else if (file.name.length > 32) {
-          this.$message.error('照片名字不能超过32个字！')
-          reject(file)
+          this.$message.error("照片名字不能超过32个字！");
+          reject(file);
         } else {
-          resolve(file)
+          resolve(file);
         }
-      })
+      });
     },
-    upload_thumb_successImg (data) {
-     this.$message.success('上传成功')
-      console.log('图片上传成功', data)
+    upload_thumb_successImg(data) {
+      this.$message.success("上传成功");
+      console.log("图片上传成功", data);
       this.editor.txt.append(
         `<img src="${data.data.ossUrl}"  style="max-width:100%" /><p>&emsp;&emsp;</p>`
-      );  
+      );
     },
     quxiao(reload) {
       this.$layer.close(this.layerid);
@@ -236,7 +278,7 @@ export default {
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          if (!this["ruleForm"].thumb) {
+          if (!this["ruleForm"].thumb || !this["ruleForm"].filePath) {
             common.tip("warning", "请上传图片");
             return;
           }
@@ -248,15 +290,8 @@ export default {
       });
     },
     async save() {
-      let {
-        name,
-        id,
-        goodsTypeId,
-        modelUrl,
-        thumb,
-        type,
-        goodsAgeId,
-      } = this.ruleForm;
+      let { name, id, goodsTypeId, modelUrl, thumb, type, goodsAgeId,filePath } =
+        this.ruleForm;
       let data = {
         name,
         id,
@@ -265,8 +300,9 @@ export default {
         thumb,
         type,
         goodsAgeId,
+        filePath
       };
-      data.description=this.editor.txt.html()
+      data.description = this.editor.txt.html();
       let result = await this.$http({
         method: "post",
         data,
@@ -282,31 +318,30 @@ export default {
     handleError() {},
     handleIconSuccess(res) {
       let { data } = res;
-      this.ruleForm.thumb = data.ossPath;
+      this.ruleForm = { ...this.ruleForm, filePath: data.ossPath };
+      // this.ruleForm.thumb = data.ossPath;
       // 刷新下页面
       this.refresh = "刷新了";
     },
     beforeIconUpload(file) {
       // console.log('上传文件前校验', file)
       // 限制图片大小和格式
-      const sizeOk = file.size / 1024 / 1024 < 10
-      const typeOk =
-        file.type === 'image/png' ||
-        file.type === 'image/jpeg' 
+      const sizeOk = file.size / 1024 / 1024 < 10;
+      const typeOk = file.type === "image/png" || file.type === "image/jpeg";
       return new Promise((resolve, reject) => {
         if (!typeOk) {
-          this.$message.error('照片格式有误！')
-          reject(file)
+          this.$message.error("照片格式有误！");
+          reject(file);
         } else if (!sizeOk) {
-          this.$message.error('照片大小超过10M！')
-          reject(file)
-        }else if(file.name.length>32){
-          this.$message.error('照片名字不能超过32个字！')
-          reject(file)
+          this.$message.error("照片大小超过10M！");
+          reject(file);
+        } else if (file.name.length > 32) {
+          this.$message.error("照片名字不能超过32个字！");
+          reject(file);
         } else {
-          resolve(file)
+          resolve(file);
         }
-      })
+      });
     },
     handleChange(file) {
       this.fileList = this.fileList.length === 0 ? this.fileList : [];
@@ -364,7 +399,7 @@ export default {
             this.editor.config.uploadImgShowBase64 = true; //图片地址
             this.editor.config.showLinkVideo = false;
             this.editor.create();
-            this.editor.txt.html(this.iframeData.description)
+            this.editor.txt.html(this.iframeData.description);
           }, 100);
         });
         this.ruleForm = this.iframeData;
@@ -381,6 +416,12 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.myRow {
+  display: flex;
+  /deep/.el-form-item {
+    margin-right: 30px;
+  }
+}
 /deep/.el-upload-list__item-name {
   display: none !important;
 }
@@ -391,7 +432,9 @@ export default {
 .Root {
   padding: 50px;
 }
-
+/deep/.avatar-uploader {
+  max-height: 300px;
+}
 .avatar-uploader .el-upload {
   border: 1px dashed #d9d9d9;
   border-radius: 6px;
@@ -400,12 +443,13 @@ export default {
   overflow: hidden;
   img {
     max-width: 300px;
+    max-height: 300px;
   }
 }
 .avatar-uploader .el-upload:hover {
   border-color: #409eff;
 }
-.avatar-uploader-icon {
+/deep/.avatar-uploader-icon {
   font-size: 28px;
   color: #8c939d;
   width: 178px;

src/pages/leaveMessage/leaveMessageList.vue

@@ -37,7 +37,8 @@
               @click="getInformation(true)"
               >查询</el-button
             >
-            <!-- <el-button type="primary" @click="edit({}, 'add')">新增</el-button> -->
+            <el-button @click="isShowAll(true)">批量显示</el-button>
+            <el-button @click="isShowAll(false)">批量删除</el-button>
           </div>
           <div class="info-right"></div>
         </div>
@@ -49,6 +50,11 @@
           row-key="id"
           style="width: 100%"
         >
+          <el-table-column label="多选" width="100">
+            <template slot-scope="scope">
+              <el-checkbox v-model="scope.row.flagSec"></el-checkbox>
+            </template>
+          </el-table-column>
           <el-table-column
             type="index"
             label="序号"
@@ -59,7 +65,9 @@
           <el-table-column prop="createTime" label="发布时间"></el-table-column>
           <el-table-column label="显示">
             <template slot-scope="scope">
-              <el-switch :active-value="1" :inactive-value="0"
+              <el-switch
+                :active-value="1"
+                :inactive-value="0"
                 v-model="scope.row.display"
                 @change="switchChange(scope.row)"
               >
@@ -69,11 +77,7 @@
 
           <el-table-column label="操作">
             <template slot-scope="scope">
-              <span
-                class="o-span"
-                @click="del(scope.row)"
-                >删除</span
-              >
+              <span class="o-span" @click="del(scope.row)">删除</span>
             </template>
           </el-table-column>
         </el-table>
@@ -116,8 +120,8 @@ export default {
         pageNum: 1,
         pageSize: 10,
         searchKey: "",
-        startTime:"",
-        endTime:""
+        startTime: "",
+        endTime: "",
       },
       total: 0,
     };
@@ -130,6 +134,60 @@ export default {
   mounted() {},
 
   methods: {
+    // 点击批量显示和删除
+   async isShowAll(val) {
+      let temp = [];
+      this.tableData.forEach((v) => {
+        if (v.flagSec) temp.push(v.id);
+      });
+      if (temp.length === 0) return this.$message.warning("至少选中一个");
+      let ids = temp.join(",");
+      // 显示
+      if (val) {
+      let result = await this.$http({
+        method: "get",
+        url: `/manage/comment/displays/${ids}/${1}`,
+      });
+      if (result.code == 0) {
+        common.tip("success", "修改成功");
+        this.getInformation();
+      } else {
+        common.tip("error", "修改失败，请联系管理员");
+      }
+         } else {
+        // 删除
+        this.$confirm("是否确认删除选中的留言？", "提示", {
+          confirmButtonText: "是",
+          cancelButtonText: "否",
+          type: "warning",
+        })
+          .then(() => {
+            this.$http
+              .get(`/manage/comment/removes/${ids}`, {})
+              .then((res) => {
+                if (res.code === 0) {
+                  this.$alert("删除成功", "提示", {
+                    confirmButtonText: "确定",
+                    callback: () => {
+                      this.getInformation();
+                    },
+                  });
+                } else {
+                  this.$notify.error({
+                    title: "错误",
+                    message: res.msg,
+                  });
+                }
+              });
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "已取消删除",
+            });
+          });
+      }
+    },
     indexMethod(index) {
       return (this.params.pageNum - 1) * this.params.pageSize + index + 1;
     },
@@ -140,21 +198,23 @@ export default {
         type: "warning",
       })
         .then(() => {
-          this.$http.get(`/manage/comment/removes/${item.id}`, {}).then((res) => {
-            if (res.code === 0) {
-              this.$alert("删除成功", "提示", {
-                confirmButtonText: "确定",
-                callback: () => {
-                  this.getInformation();
-                },
-              });
-            } else {
-              this.$notify.error({
-                title: "错误",
-                message: res.msg,
-              });
-            }
-          });
+          this.$http
+            .get(`/manage/comment/removes/${item.id}`, {})
+            .then((res) => {
+              if (res.code === 0) {
+                this.$alert("删除成功", "提示", {
+                  confirmButtonText: "确定",
+                  callback: () => {
+                    this.getInformation();
+                  },
+                });
+              } else {
+                this.$notify.error({
+                  title: "错误",
+                  message: res.msg,
+                });
+              }
+            });
         })
         .catch(() => {
           this.$message({
@@ -173,19 +233,21 @@ export default {
     },
     async getInformation(reload = false) {
       if (reload) {
-         if(!this.params.startTime && this.params.endTime){
-          common.tip('error','请选择开始时间')
+        if (!this.params.startTime && this.params.endTime) {
+          common.tip("error", "请选择开始时间");
           return;
         }
-        if(this.params.startTime && !this.params.endTime){
-          common.tip('error','请选择结束时间')
+        if (this.params.startTime && !this.params.endTime) {
+          common.tip("error", "请选择结束时间");
           return;
         }
         this.params.pageNum = 1;
         this.tableData = [];
       }
-      this.params.startTime = this.params.startTime && `${this.params.startTime} 00:00:00` || ""
-      this.params.endTime = this.params.endTime && `${this.params.endTime} 23:59:59` || ""
+      this.params.startTime =
+        (this.params.startTime && `${this.params.startTime} 00:00:00`) || "";
+      this.params.endTime =
+        (this.params.endTime && `${this.params.endTime} 23:59:59`) || "";
       let result = await this.$http({
         method: "post",
         data: this.params,
@@ -195,7 +257,11 @@ export default {
         return;
       }
       this.tableData = result.data.list.map((item) => {
-        return { ...item, switchFlag: item.isIndex ? true : false };
+        return {
+          ...item,
+          switchFlag: item.isIndex ? true : false,
+          flagSec: false,
+        };
       });
       this.total = result.data.total;
     },
@@ -205,7 +271,7 @@ export default {
     async display(item = {}) {
       let result = await this.$http({
         method: "get",
-        url: `/manage/comment/display/${item.id}/${item.display}`,
+        url: `/manage/comment/displays/${item.id}/${item.display}`,
       });
       if (result.code == 0) {
         common.tip("success", "修改成功");

src/pages/news/bookEdit.vue

@@ -32,7 +32,18 @@
       <el-row>
         <el-col :span="24">
           <el-form-item label="书籍图片">
-            <el-upload
+            <Cropper
+              :width="255"
+              :height="255"
+              :fixed-number="[1, 1]"
+              :uploadUrl="uploadUrl"
+              :img="ruleForm.thumb"
+              @clearImg="ruleForm.thumb = ''"
+              @subUploadSucceed="getShopImages"
+            >
+            </Cropper>
+
+            <!-- <el-upload
               class="avatar-uploader"
               ref="upload"
               accept=".jpg,.png"
@@ -52,15 +63,20 @@
                 :key="ruleForm.thumb"
               />
               <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-              <!-- 单纯用来刷新视图的变化的 -->
+              单纯用来刷新视图的变化的
               <el-input v-show="false" v-model="refresh"></el-input>
-            </el-upload>
-            <div>
+            </el-upload> -->
+            <div style="padding-top: 30px">
               <p style="color: #999">格式要求：</p>
               <p style="color: #999; line-height: 1">
                 1、支持png,jpeg的图片格式
+                <br />
+                <br />
+                2、最大可支持10M
+                <br />
+                <br />
+                3、建议上传255 * 255尺寸的图片
               </p>
-              <p style="color: #999">2、最大可支持10M</p>
             </div>
           </el-form-item>
         </el-col>
@@ -92,9 +108,10 @@
 </template>
 
 <script>
+import Cropper from "@/components/cropper";
 import * as common from "@/util/commonfn.js";
 export default {
-  components: {},
+  components: { Cropper },
   data() {
     return {
       refresh: "未刷新",
@@ -102,15 +119,19 @@ export default {
         token: window.localStorage.getItem("token"),
       },
       ruleForm: {
-        thumb:'',
-        name:'',
-        pubDate:null,
-        description:''
+        thumb: "",
+        name: "",
+        pubDate: null,
+        description: "",
       },
       rules: {
-        name: [{ required: true, message: "请输入书籍名称", trigger: "blur" },{ max: 32, message: '不能超过32个字', trigger: 'blur' }],
+        name: [
+          { required: true, message: "请输入书籍名称", trigger: "blur" },
+          { max: 32, message: "不能超过32个字", trigger: "blur" },
+        ],
         description: [
-          { required: true, message: "请输入书籍介绍", trigger: "blur" },{ max: 128, message: '不能超过128个字', trigger: 'blur' }
+          { required: true, message: "请输入书籍介绍", trigger: "blur" },
+          { max: 128, message: "不能超过128个字", trigger: "blur" },
         ],
         pubDate: [
           { required: true, message: "请输入出版时间", trigger: "blur" },
@@ -137,6 +158,14 @@ export default {
     },
   },
   methods: {
+    // 图片裁剪功能
+    getShopImages(img) {
+      // console.log(999999, img)
+      this.ruleForm.thumb = img.ossPath;
+      // 刷新下页面
+      this.refresh = "刷新了";
+    },
+
     quxiao(reload) {
       this.$layer.close(this.layerid);
       //点击取消 不刷新列表   点击确认 保存成功刷新列表
@@ -181,34 +210,32 @@ export default {
     },
     handleError() {},
     handleIconSuccess(res) {
-      console.log('上传图片成功',res);
+      console.log("上传图片成功", res);
       let { data } = res;
       this.ruleForm.thumb = data.ossPath;
-      console.log(9999,this.ruleForm.thumb);
+      console.log(9999, this.ruleForm.thumb);
       // 刷新下页面
       this.refresh = "刷新了";
     },
     beforeIconUpload(file) {
       // console.log('上传文件前校验', file)
       // 限制图片大小和格式
-      const sizeOk = file.size / 1024 / 1024 < 10
-      const typeOk =
-        file.type === 'image/png' ||
-        file.type === 'image/jpeg' 
+      const sizeOk = file.size / 1024 / 1024 < 10;
+      const typeOk = file.type === "image/png" || file.type === "image/jpeg";
       return new Promise((resolve, reject) => {
         if (!typeOk) {
-          this.$message.error('照片格式有误！')
-          reject(file)
+          this.$message.error("照片格式有误！");
+          reject(file);
         } else if (!sizeOk) {
-          this.$message.error('照片大小超过10M！')
-          reject(file)
-        }else if(file.name.length>32){
-          this.$message.error('照片名字不能超过32个字！')
-          reject(file)
+          this.$message.error("照片大小超过10M！");
+          reject(file);
+        } else if (file.name.length > 32) {
+          this.$message.error("照片名字不能超过32个字！");
+          reject(file);
         } else {
-          resolve(file)
+          resolve(file);
         }
-      })
+      });
     },
     handleChange(file) {
       this.fileList = this.fileList.length === 0 ? this.fileList : [];
@@ -225,10 +252,9 @@ export default {
     iframeData: {
       handler: function (newVal) {
         // console.log(998,this.iframeData);
-        if(newVal.source==='0') {
-          console.log('我是新增');
-        }else  this.ruleForm = this.iframeData;
-        
+        if (newVal.source === "0") {
+          console.log("我是新增");
+        } else this.ruleForm = this.iframeData;
       },
       deep: true,
       immediate: true,
@@ -239,7 +265,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-/deep/.el-month-table td.today .cell{
+/deep/.el-month-table td.today .cell {
   color: #606266;
   font-weight: 400;
 }
@@ -258,7 +284,7 @@ export default {
 .avatar-uploader .el-upload:hover {
   border-color: #409eff;
 }
-.avatar-uploader-icon {
+/deep/.avatar-uploader-icon {
   font-size: 28px;
   color: #8c939d;
   width: 178px;

src/util/upload.js

@@ -0,0 +1,157 @@
+import { Message } from 'element-ui'
+
+/**
+ *
+ * @param {file} file 源文件
+ * @desc 限制为图片文件
+ * @retutn 是图片文件返回true否则返回false
+ */
+export const isImageFile = (file, fileTypes) => {
+
+
+  // console.log('上传文件前校验', file)
+  // 限制图片大小和格式
+  const sizeOk = file.size / 1024 / 1024 < 10
+  const typeOk =
+    file.type === 'image/png' ||
+    (file.type === 'image/jpeg' && !file.name.includes('.jfif'))
+  if (!typeOk) {
+    Message.error('照片格式有误！')
+    return false
+  } else if (!sizeOk) {
+    Message.error('照片大小超过10M！')
+    return false
+  } else if (file.name.length > 32) {
+    Message.error('照片名字不能超过32个字！')
+    return false
+  } else {
+    return true
+  }
+
+
+  // console.log('------',file,fileTypes);
+  // if(file.name.indexOf('.jfif')>-1) return false
+  // const types = fileTypes || [
+  //   'image/png',
+  //   // 'image/gif',
+  //   'image/jpeg',
+  //   'image/jpg',
+  //   // 'image/bmp',
+  //   // 'image/x-icon'
+  // ]
+  // const isImage = types.includes(file.type)
+  // if (!isImage) {
+  //   Message.error('格式错误!')
+  //   return false
+  // }
+
+  // return true
+}
+
+/**
+ *
+ * @param {file} file 源文件
+ * @param {number} fileMaxSize  图片限制大小单位（MB）
+ * @desc 限制为文件上传大小
+ * @retutn 在限制内返回true否则返回false
+ */
+export const isMaxFileSize = (file, fileMaxSize = 20) => {
+  const isMaxSize = file.size / 1024 / 1024 < fileMaxSize
+  if (!isMaxSize) {
+    Message.error('上传头像图片大小不能超过 ' + fileMaxSize + 'MB!')
+    return false
+  }
+  return true
+}
+
+/**
+ *
+ * @param {file} file 源文件
+ * @desc 读取图片文件为base64文件格式
+ * @retutn 返回base64文件
+ */
+export const readFile = file => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = e => {
+      const data = e.target.result
+      resolve(data)
+    }
+    reader.onerror = () => {
+      const err = new Error('读取图片失败')
+      reject(err.message)
+    }
+
+    reader.readAsDataURL(file)
+  })
+}
+
+/**
+ *
+ * @param {string} src  图片地址
+ * @desc 加载真实图片
+ * @return 读取成功返回图片真实宽高对象 ag: {width:100,height:100}
+ */
+// export const loadImage = src => {
+//   return new Promise((resolve, reject) => {
+//     const image = new Image()
+//     image.src = src
+//     image.onload = () => {
+//       const data = {
+//         width: image.width,
+//         height: image.height
+//       }
+//       resolve(data)
+//     }
+//     image.onerror = () => {
+//       const err = new Error('加载图片失败')
+//       reject(err)
+//     }
+//   })
+// }
+
+/**
+ *
+ * @param {file} file 源文件
+ * @param {object} props   文件分辨率的宽和高   ag: props={width:100, height :100}
+ * @desc  判断图片文件的分辨率是否在限定范围之内
+ * @throw  分辨率不在限定范围之内则抛出异常
+ *
+ */
+// export const isAppropriateResolution = async (file, props) => {
+//   try {
+//     const { width, height } = props
+//     const base64 = await readFile(file)
+//     const image = await loadImage(base64)
+//     if (image.width !== width || image.height !== height) {
+//       throw new Error('上传图片的分辨率必须为' + width + '*' + height)
+//     }
+//   } catch (error) {
+//     throw error
+//   }
+// }
+
+/**
+ *
+ * @param {file} file 源文件
+ * @param {array} ratio   限制的文件比例 ag:  ratio= [1,1]
+ * @desc 判断图片文件的比列是否在限定范围
+ * @throw  比例不在限定范围之内则抛出异常
+ */
+// export const isAppRatio = async (file, ratio) => {
+//   try {
+//     const [w, h] = ratio
+//     if (h === 0 || w === 0) {
+//       const err = '上传图片的比例不能出现0'
+//       Message.error(err)
+//       throw new Error(err)
+//     }
+//     const base64 = await readFile(file)
+//     const image = await loadImage(base64)
+//     if (image.width / image.height !== w / h) {
+//       throw new Error('上传图片的宽高比例必须为 ' + w + ' : ' + h)
+//     }
+//   } catch (error) {
+//     throw error
+//   }
+// }

vue.config.js

@@ -13,7 +13,7 @@ module.exports = {
   devServer: {
     proxy: {
       '/data': {
-        target: 'http://192.168.0.135:8001',
+        target: 'http://8.135.106.227:8001',
         changeOrigin: true,
         // pathRewrite: {
         //   '^/api': '/api'