增加长图，方图分类上传功能

2025-03-12 16:44:12 +08:00
parent cc744ec5fb
commit eadd2a83be
7 changed files with 105 additions and 16 deletions
--- a/config/index.js
+++ b/config/index.js
@@ -23,7 +23,7 @@ module.exports = {
    },

    // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
+    host: '192.168.110.160', // can be overwritten by process.env.HOST
    port: 8001, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: true,
    errorOverlay: true,
--- a/src/views/modules/course/course-add-or-update.vue
+++ b/src/views/modules/course/course-add-or-update.vue
@@ -32,7 +32,7 @@
        </el-switch>
      </el-form-item>
      <el-form-item
-        label="课程图"
+        label="课程长图"
        prop="image"
        :class="fileList.length > 0 ? 'isUpload' : ''"
      >
@@ -45,7 +45,6 @@
          }"
          :action="baseUrl + '/oss/fileoss'"
          list-type="picture-card"
-          :on-preview="handlePictureCardPreview"
          :file-list="fileList"
          :on-success="handlePicSuccess"
          accept=".jpeg,.jpg,.gif,.png"
@@ -54,7 +53,32 @@
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
-          <img width="100%" :src="dataForm.image" alt="" />
+          <img width="100%" height="40px" :src="dataForm.image" alt="" />
+        </el-dialog>
+      </el-form-item>
+      <el-form-item
+        label="课程方图"
+        prop="squareImage"
+        :class="fileList2.length > 0 ? 'isUpload2' : ''"
+      >
+        <el-upload
+          :limit="1"
+          class="el-uploadfeng2"
+          :class="{
+            uoloadSty: dataForm.showBtnDealImg2,
+            disUoloadSty: dataForm.noneBtnImg2
+          }"
+          :action="baseUrl + '/oss/fileoss'"
+          list-type="picture-card"
+          :file-list="fileList2"
+          :on-success="handlePicSuccess2"
+          accept=".jpeg,.jpg,.gif,.png"
+          :on-remove="handleRemove2"
+        >
+          <i class="el-icon-plus"></i>
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
+          <img width="100%" :src="dataForm.squareImage" alt="" />
        </el-dialog>
      </el-form-item>
      <div v-if="relationProducts && relationProducts.length > 0" style="margin-bottom:20px">
@@ -242,6 +266,7 @@ export default {
      author: "",
      publisherList: [],
      fileList: [],
+      fileList2: [],
      fileListNovel: [],
      dialogImageUrl: "",
      dialogVisible: false,
@@ -419,6 +444,7 @@ export default {
              }else{
                this.relationProducts = []
              }
+              //长图
              if (data.image != "" && data.image != null) {
                var img = {
                  name: "",
@@ -428,6 +454,17 @@ export default {
                attr.push(img);
                this.fileList = attr;
              }
+              //方图
+              if (data.squareImage != "" && data.squareImage != null) {
+                var img = {
+                  name: "",
+                  url: data.squareImage
+                };
+                var attr = [];
+                attr.push(img);
+                this.fileList2 = attr;
+              }
+
              data.canzk = data.canzk == '1' ? true : false
              this.dataForm = { ...data };
            }
@@ -473,6 +510,7 @@ export default {
              canzk: this.dataForm.canzk ? '1' : '0', // 是否可以自考 0/ 1  0 否 1 是
              sort: this.dataForm.sort,
              image: this.dataForm.image,
+              squareImage: this.dataForm.squareImage,
              content: this.dataForm.content,
              etitle: this.dataForm.etitle,
              titleAbbr: this.dataForm.titleAbbr,
@@ -503,6 +541,7 @@ export default {
        }
      });
    },
+    //长图
    handlePicSuccess(res, file) {
      // console.log(res,'res')
      if (res.msg == "success") {
@@ -517,20 +556,46 @@ export default {
        this.$message.error("上传失败");
      }
    },
+    //方图
+    handlePicSuccess2(res, file){
+      if (res.msg == "success") {
+        this.dataForm.squareImage = res.url;
+        this.fileList2.push({
+          name: file.name,
+          url: res.url
+        });
+        this.$message.success("上传成功");
+      } else {
+        this.$message.error("上传失败");
+      }
+    },
+    //删除长图
    handleRemove(file, fileList) {
      this.dataForm.image = "";
      this.fileList = [];
      this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
    },
+    //删除方图
+    handleRemove2(file, fileList) {
+      this.dataForm.squareImage = "";
+      this.fileList2 = [];
+      this.dataForm.noneBtnImg2 = fileList.length >= this.dataForm.limitCountImg2;
+    },
+    //放大长图
    handlePictureCardPreview(file) {
      this.dataForm.image = file.url;
      this.dialogVisible = true;
    },
+    //放大方图
+    handlePictureCardPreview2(file) {
+      this.dataForm.squareImage = file.url;
+      this.dialogVisible = true;
+    },
    handleDownload(file) {
      console.log(file);
    },
    handlereset() {
-      (this.fileList = []), (this.fileListNovel = []), (this.visible = false);
+      (this.fileList = []), (this.fileList2 = []), (this.fileListNovel = []), (this.visible = false);
      this.$emit('pclose')
      this.relationProducts = []
      this.courseId = undefined
@@ -583,3 +648,16 @@ export default {
  }
 }
 </style>
+
+<style>
+.isUpload .el-uploadfeng {
+  display: flex;
+}
+.isUpload .el-upload-list--picture-card .is-success{
+  display: flex;
+  align-items: center;
+}
+.isUpload .el-upload-list--picture-card .el-upload-list__item-thumbnail{
+  height:58px;
+}
+</style>
--- a/src/views/modules/course/courseList.vue
+++ b/src/views/modules/course/courseList.vue
@@ -80,7 +80,7 @@
        </template>
      </el-table-column>
      <el-table-column
-        label="课程图"
+        label="课程长图"
        header-align="center"
        align="center"
        width="100"
@@ -91,7 +91,23 @@
            style="width:100%;display: flex;
          align-items: center;justify-content: center;"
          >
-            <img :src="scope.row.image" alt="" width="40px" height="40px" />
+            <img :src="scope.row.image" alt="" width="60px" height="30px" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="课程方图"
+        header-align="center"
+        align="center"
+        width="100"
+      >
+        <template slot-scope="scope">
+          <div
+            v-if="scope.row.image"
+            style="width:100%;display: flex;
+          align-items: center;justify-content: center;"
+          >
+            <img :src="scope.row.squareImage" alt="" width="40px" height="40px" />
          </div>
        </template>
      </el-table-column>
--- a/src/views/modules/shop/commonMedicineTags/shopproduct.vue
+++ b/src/views/modules/shop/commonMedicineTags/shopproduct.vue
@@ -457,7 +457,7 @@ this.$emit('delete',[row])
        console.log("🚀 ~ getAssociatedGoodsList ~ form:", form)
      }
      else if (this.currentType == "bookMarketId") {
-        form.medicineMarketId = this.currentId;
+        form.psycheMarketId = this.currentId;
        console.log("🚀 ~ getAssociatedGoodsList ~ form:", form)
      }
      
--- a/src/views/modules/shop/commonMedicineTags/shopproductTable.vue
+++ b/src/views/modules/shop/commonMedicineTags/shopproductTable.vue
@@ -188,7 +188,7 @@ export default {
        form.medicineLabelId = this.currentId;
        console.log("🚀 ~ getAssociatedGoodsList ~ form:", form);
      } else if (this.currentType == "bookMarketId") {
-        form.medicineMarketId = this.currentId;
+        form.psycheMarketId = this.currentId;
        console.log("🚀 ~ getAssociatedGoodsList ~ form:", form);
      }
      this.dataListLoading = true;
--- a/static/config/index-prod.js
+++ b/static/config/index-prod.js
@@ -5,8 +5,8 @@
  window.SITE_CONFIG = {};

  // api接口请求地址
-  // window.SITE_CONFIG['baseUrl'] = 'http://59.110.212.44:9100/pb';
  window.SITE_CONFIG['baseUrl'] = 'https://api.nuttyreading.com';
+  //window.SITE_CONFIG['baseUrl'] = 'http://192.168.110.100:9200/pb';

  // cdn地址 = 域名 + 版本号
  window.SITE_CONFIG['domain']  = './'; // 域名
--- a/static/config/index.js
+++ b/static/config/index.js
@@ -5,13 +5,8 @@
  window.SITE_CONFIG = {};

  // api接口请求地址
-  // window.SITE_CONFIG['baseUrl'] = 'http://192.168.110.100:9200/pb';//张川川
-  // window.SITE_CONFIG['baseUrl'] = 'http://59.110.212.44:9200/pb';
-  // window.SITE_CONFIG['baseUrl'] = 'https://testapi.nuttyreading.com';         // 线上测试环境11
  window.SITE_CONFIG['baseUrl'] = 'https://api.nuttyreading.com';         // 线上正式环境
-  // window.SITE_CONFIG['baseUrl'] = 'http://192.168.110.110:9200/pb';//磊哥
-  // window.SITE_CONFIG['baseUrl'] = 'http://59.110.212.44:9200/pb';
-  // window.SITE_CONFIG['baseUrl'] = 'http://192.168.110.100:9200/pb';
+  //window.SITE_CONFIG['baseUrl'] = 'http://192.168.110.100:9200/pb';  //本地

  // cdn地址 = 域名 + 版本号
  window.SITE_CONFIG['domain'] = './'; // 域名