1

src/components/pages/addCourse.vue

@@ -158,7 +158,13 @@
                     <div class="bInfo_title" style="margin-top: 0 !important">
                       课程封面
                     </div>
-
+                    <div
+                      class="uploadFm"
+                      @click="choosePicVisible = true"
+                      v-if="cover.length == 0"
+                    >
+                      <img src="../../assets/icon/addPoster.png" alt="" />
+                    </div>
                     <el-upload
                       :class="{ disUoloadSty: noneBtnImg }"
                       class="upCss"
@@ -174,6 +180,7 @@
                       accept="image/*"
                       :limit="1"
                       :on-exceed="onExceed"
+                      v-else
                     >
                       <i class="el-icon-plus"></i>
                     </el-upload>
@@ -506,7 +513,18 @@
           <div class="rightBox" v-if="this.steps == 3">
             <div class="basic_box">
               <div
-                style="display: flex; flex-direction: row; align-items: center;position: sticky;top: 0;background: #fff;z-index: 99;width: 100%;padding: 0 20px 0 20px;box-sizing: border-box;"
+                style="
+                  display: flex;
+                  flex-direction: row;
+                  align-items: center;
+                  position: sticky;
+                  top: 0;
+                  background: #fff;
+                  z-index: 99;
+                  width: 100%;
+                  padding: 0 20px 0 20px;
+                  box-sizing: border-box;
+                "
               >
                 <div class="cru_selectBox">
                   <div
@@ -532,7 +550,7 @@
               </div>
 
               <div
-                style="margin: 0 0 40px 0;padding: 0 20px 0 20px;"
+                style="margin: 0 0 40px 0; padding: 0 20px 0 20px"
                 v-for="(item, index) in unitJson[unitIndex].chapterInfo"
                 :key="index"
               >
@@ -2474,6 +2492,101 @@
         <el-button type="primary" @click="addAnswer">确 定</el-button>
       </span>
     </el-dialog>
+    <el-dialog
+      title="上传图片"
+      :visible.sync="choosePicVisible"
+      :append-to-body="true"
+      width="500px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <div>
+        <div class="fileCss">
+          <div>选择本地文件</div>
+          <div>选择系统文件</div>
+        </div>
+        <div class="fileCss" style="padding-top: 20px">
+          <div>
+            <button class="info_btn" @click="addImg($event)">
+              选择本地文件
+              <input
+                type="file"
+                accept="image/*"
+                style="display: none"
+                @change="beforeUpload1"
+              />
+            </button>
+          </div>
+          <div>
+            <el-button
+              @click="getAllBanner"
+              v-if="isSysPic == false && cover.length == 0"
+              >选择系统文件</el-button
+            >
+            <div class="isSysPic" v-if="isSysPic == true && cover.length > 0">
+              <img :src="cover[0].url" alt="" />
+              <div class="deletePic" @click="deleteSysPic">
+                <img src="../../assets/icon/delete.png" alt="" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="choosePicVisible = false">取 消</el-button>
+        <el-button type="primary" @click="choosePicVisible = false"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="选择系统文件"
+      :visible.sync="sysPicVisible"
+      :append-to-body="true"
+      width="700px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <div class="cru_selectBox" style="margin:0;">
+        <div
+          @click="getChoosePic(1)"
+          class="cru_select"
+          :class="chooseType == 1 ? 'cru_selected' : ''"
+        >
+          绘画
+        </div>
+        <div
+          @click="getChoosePic(2)"
+          class="cru_select"
+          :class="chooseType == 2 ? 'cru_selected' : ''"
+        >
+          科技
+        </div>
+        <div
+          @click="getChoosePic(3)"
+          class="cru_select"
+          :class="chooseType == 3 ? 'cru_selected' : ''"
+        >
+          人文
+        </div>
+        <div
+          @click="getChoosePic(4)"
+          class="cru_select"
+          :class="chooseType == 4 ? 'cru_selected' : ''"
+        >
+          艺术
+        </div>
+      </div>
+      <div class="sysPicBox">
+        <div v-for="(sys, sysIndex) in sysPic" :key="sysIndex" class="sysPic">
+          <img :src="sys.poster" alt="" @click="chooseSysPic(sys.poster)" />
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="sysPicVisible = false">取 消</el-button>
+        <el-button type="primary">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -2489,8 +2602,10 @@ export default {
   data() {
     return {
       checkAll: false,
+      chooseType: 1,
       checkedCities: [],
       isIndeterminate: true,
+      isSysPic: false,
       steps: 1,
       nbOrder: 0,
       courseId: "",
@@ -2502,6 +2617,7 @@ export default {
         },
       ],
       line: "",
+      sysPic: [],
       lineCount: 0,
       lineType: 0,
       chapCount: 0,
@@ -2509,6 +2625,8 @@ export default {
       isTeacherSee: true,
       courseText: "",
       formLabelWidth: "100px",
+      choosePicVisible: false,
+      sysPicVisible: false,
       uploadLoading1: false,
       noneBtnImg: false,
       updateBoolean2: false,
@@ -2721,7 +2839,6 @@ export default {
             // this.courseId = this.cid;
           })
           .catch((err) => {
-            // this.$message.error("修改失败");
             this.$message.error("网络不佳");
             console.error(err);
           });
@@ -3030,7 +3147,6 @@ export default {
           this.unitIndex = this.unitIndex - 1;
         })
         .catch((err) => {
-          // this.$message.error("修改失败");
           this.$message.error("网络不佳");
           console.error(err);
         });
@@ -3095,6 +3211,7 @@ export default {
         this.cover = _tmp;
       }
       this.noneBtnImg = _tmp.length >= 1;
+      this.isSysPic = false;
     },
     addImg(e) {
       var el = e.currentTarget;
@@ -3132,7 +3249,7 @@ export default {
     },
     beforeUpload1(event, type) {
       const loading = this.openLoading();
-      var file = event.file;
+      var file = event.target.files[0];
       var credentials = {
         accessKeyId: "AKIATLPEDU37QV5CHLMH",
         secretAccessKey: "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",
@@ -3179,11 +3296,21 @@ export default {
                 uid: file.uid,
               });
               _this.imgChange1(null, null, 1, null);
+              _this.choosePicVisible = false;
               console.log(data.Location);
             }
           });
       }
     },
+    chooseSysPic(p) {
+      this.cover.push({
+        name: "系统图片.png",
+        url: p,
+      });
+      this.imgChange1(null, null, 1, null);
+      this.isSysPic = true;
+      this.sysPicVisible = false;
+    },
     beforeUpload(data) {
       this.$refs.upload1.uploadFiles;
       this.uploadLoading1 = true;
@@ -3666,7 +3793,6 @@ export default {
           this.islogin = true;
         })
         .catch((err) => {
-          // this.$message.error("新增失败");
           this.$message.error("网络不佳");
           console.error(err);
         });
@@ -3735,7 +3861,6 @@ export default {
           this.courseId = this.cid;
         })
         .catch((err) => {
-          // this.$message.error("修改失败");
           this.$message.error("网络不佳");
           console.error(err);
         });
@@ -3830,7 +3955,6 @@ export default {
           this.courseId = this.cid;
         })
         .catch((err) => {
-          // this.$message.error("修改失败");
           this.$message.error("网络不佳");
           console.error(err);
         });
@@ -4627,7 +4751,6 @@ export default {
           }, 1000);
         })
         .catch((err) => {
-          // this.$message.error("修改失败");
           this.$message.error("网络不佳");
           console.error(err);
         });
@@ -4779,6 +4902,28 @@ export default {
       );
       this.$forceUpdate();
     },
+    getChoosePic(t) {
+      this.chooseType = t;
+      this.getAllBanner();
+    },
+    getAllBanner() {
+      this.sysPicVisible = true;
+      let params = {
+        t: this.chooseType,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectAllBanner", params)
+        .then((res) => {
+          this.sysPic = res.data[0];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    deleteSysPic() {
+      this.cover = [];
+      this.isSysPic = false;
+    },
     setEListStar() {
       this.$forceUpdate();
     },
@@ -6568,4 +6713,59 @@ ol {
   width: 50px;
   object-fit: cover;
 }
+.uploadFm {
+  border: 1px dashed #ccc;
+  width: 202px;
+  height: 102px;
+  position: relative;
+  cursor: pointer;
+}
+.uploadFm > img {
+  position: absolute;
+  top: 25px;
+  left: 35%;
+  width: 50px;
+}
+.fileCss {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+  align-items: center;
+}
+.sysPicBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  height: 435px;
+  overflow: auto;
+}
+.sysPic {
+  width: 200px;
+  height: 115px;
+  margin: 0 20px 20px 0;
+  cursor: pointer;
+}
+.sysPic > img,
+.isSysPic > img,
+.deletePic > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.isSysPic {
+  width: 200px;
+  height: 115px;
+  position: relative;
+}
+.deletePic {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+}
 </style>

src/components/pages/banner.vue

@@ -31,7 +31,7 @@
           :header-cell-style="{ background: '#f1f1f1', fontSize: '17px' }"
           :row-class-name="tableRowClassName"
         >
-          <el-table-column label="图片" min-width="80" align="center">
+          <el-table-column label="图片" min-width="60" align="center">
             <template slot-scope="scope">
               <el-image
                 style="width: 200px; height: 100px; cursor: pointer"
@@ -41,6 +41,19 @@
               ></el-image>
             </template>
           </el-table-column>
+          <el-table-column prop="type" label="分类" min-width="20">
+            <template slot-scope="scope">
+              {{
+                scope.row.type == 1
+                  ? "绘画"
+                  : scope.row.type == 2
+                  ? "科技"
+                  : scope.row.type == 3
+                  ? "人文"
+                  : "艺术"
+              }}
+            </template>
+          </el-table-column>
           <el-table-column label="操作" min-width="20">
             <template slot-scope="scope">
               <el-button
@@ -94,6 +107,17 @@
         <div class="dialogBox" style="color: #bebebe; margin: 10px 0 0 0">
           注:适宜上传banner尺寸为1218×300
         </div>
+        <div class="cTypeCss">
+          <div>分类：</div>
+          <el-select v-model="cType" placeholder="请选择分类">
+            <el-option
+              v-for="(t, tIndex) in typeList"
+              :key="tIndex"
+              :label="t.label"
+              :value="t.value"
+            ></el-option>
+          </el-select>
+        </div>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
@@ -118,6 +142,25 @@ export default {
       formLabelWidth: "100px",
       tableData: [],
       fileList: [],
+      typeList: [
+        {
+          value: 1,
+          label: "绘画",
+        },
+        {
+          value: 2,
+          label: "科技",
+        },
+        {
+          value: 3,
+          label: "人文",
+        },
+        {
+          value: 4,
+          label: "艺术",
+        },
+      ],
+      cType: "",
       dialogVisible: false,
       noneBtnImg: false,
       dialogImageUrl: "",
@@ -164,7 +207,7 @@ export default {
     },
     handleCurrentChange(val) {
       this.page = val;
-      this.getStudent();
+      this.getBannerList();
     },
     handlePictureCardPreviewA(url) {
       this.dialogImageUrl1 = url;
@@ -286,6 +329,7 @@ export default {
         let params = [
           {
             url: list[0].url,
+            t: this.cType,
           },
         ];
         this.ajax
@@ -296,6 +340,7 @@ export default {
               type: "success",
             });
             this.dialogVisible = false;
+            this.cType = "";
             this.getBannerList();
             this.init();
           })
@@ -529,4 +574,12 @@ export default {
 .dialogBox span {
   margin: 0 20px;
 }
+.cTypeCss {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-top: 20px;
+}
 </style>