ソースを参照

修改未来小学标签和banner

zengyicheng 2 年 前
コミット
10b3b1c332

+ 342 - 8
src/components/pages/Ttype.vue

@@ -56,12 +56,20 @@
                   <span style="color: rgb(15, 126, 255)">分类列表</span>
                 </el-breadcrumb-item>
               </el-breadcrumb>
-              <el-button
-                size="small"
-                type="primary"
-                @click="dialogVisible2 = true"
-                >添加分类</el-button
-              >
+              <div>
+                <el-button
+                  size="small"
+                  type="primary"
+                  @click="dialogVisible6 = true"
+                  >添加图片</el-button
+                >
+                <el-button
+                  size="small"
+                  type="primary"
+                  @click="dialogVisible2 = true"
+                  >添加分类</el-button
+                >
+              </div>
             </div>
             <div v-if="step == 2" class="student_search1">
               <el-breadcrumb
@@ -108,7 +116,11 @@
           <el-table-column prop="date" label="操作" min-width="30">
             <template slot-scope="scope">
               <div class="pb_buttonBox">
-                <el-button size="mini" type="primary" @click="selectType(scope.row.id)">
+                <el-button
+                  size="mini"
+                  type="primary"
+                  @click="selectType(scope.row.id)"
+                >
                   查看分类
                 </el-button>
                 <el-button
@@ -361,6 +373,98 @@
         <el-button type="primary" @click="updateStype">确 定</el-button>
       </span>
     </el-dialog>
+    <el-dialog
+      title="添加图片"
+      :visible.sync="dialogVisible6"
+      width="500px"
+      :before-close="handleClose"
+      class="dialog_diy"
+      center
+    >
+      <div>
+        <div class="dialogBox">
+          <span>添加图片</span>
+
+          <el-upload
+            :class="{ disUoloadSty: noneBtnImg }"
+            action="#"
+            list-type="picture-card"
+            :on-preview="handlePictureCardPreview"
+            :on-remove="handleRemove"
+            v-loading="uploadLoading"
+            :http-request="beforeUpload"
+            ref="upload"
+            :show-file-list="true"
+            :limit="1"
+            accept="image/*"
+          >
+            <i class="el-icon-plus"></i>
+          </el-upload>
+        </div>
+        <div class="dialogBox" style="color: #bebebe; margin: 10px 0 0 0">
+          注:适宜上传banner尺寸为1218×300
+        </div>
+        <div class="dialogBox" style="margin: 10px 0 0 0">
+          <span>Banner课程链接</span>
+          <span style="max-width: 160px">{{ bannerCourse.title }}</span>
+          <el-button type="primary" size="medium" @click="addBannerUrlPop"
+            >选择课程</el-button
+          >
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible6 = false">取 消</el-button>
+        <el-button type="primary" @click="addBanner">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="imgVisible">
+      <img width="100%" :src="dialogImageUrl" alt="" />
+    </el-dialog>
+    <el-dialog
+      title="添加链接"
+      :visible.sync="dialogVisible7"
+      width="500px"
+      :before-close="handleClose"
+      class="dialog_diy"
+      style="text-align: center"
+      center
+    >
+      <div>
+        <el-card class="box-card">
+          <div slot="header" class="cardHead">
+            <el-input
+              v-model="searchClassName"
+              placeholder="请输入需要添加的课程"
+              @keypress.native.enter="Search"
+            ></el-input>
+            <el-button type="text" style="margin: 0 0 0 20px" @click="Search"
+              >搜索</el-button
+            >
+          </div>
+          <div class="cardList">
+            <div v-for="item in courseList" :key="item.courseId">
+              <el-popover placement="top-start" trigger="hover">
+                <p style="max-width: 380px">课程名称: {{ item.title }}</p>
+                <p style="max-width: 380px">简介: {{ item.brief }}</p>
+                <el-radio
+                  :label="item"
+                  slot="reference"
+                  v-model="checkBannerCourse"
+                  ><span>课程名称:</span
+                  ><span>{{ item.title }}</span></el-radio
+                >
+              </el-popover>
+            </div>
+            <!-- </el-checkbox-group> -->
+            <div v-if="courseList.length == 0">暂无数据</div>
+          </div>
+        </el-card>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible7 = false">取 消</el-button>
+        <el-button type="primary" @click="setBannerUrl">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -374,9 +478,15 @@ export default {
       tableData: [],
       tableData1: [],
       tableData2: [],
+      fileList: [],
       schoolName: "",
       typeName: "",
+      bannerCourse: "",
       sTypeName: "",
+      searchClassName: "",
+      checkBannerCourse: "",
+      noneBtnImg: false,
+      isBanner: false,
       page: 1,
       total: 0,
       page1: 1,
@@ -390,10 +500,17 @@ export default {
       dialogVisible2: false,
       dialogVisible3: false,
       dialogVisible4: false,
-      updateOid:"",
+      updateOid: "",
       dialogVisible5: false,
+      dialogVisible6: false,
+      dialogVisible7: false,
       step: 0,
       pid: "",
+      imgVisible: false,
+      dialogImageUrl: "",
+      uploadLoading: false,
+      checkList: [],
+      courseList: [],
     };
   },
   mounted() {
@@ -418,6 +535,20 @@ export default {
     goTo(path) {
       this.$router.push(path);
     },
+    time() {
+      if (!this.now) {
+        this.now = new Date().getTime();
+        return true;
+      } else {
+        let time = new Date().getTime();
+        if (time - this.now > 3000) {
+          this.now = time;
+          return true;
+        } else {
+          return false;
+        }
+      }
+    },
     tableRowClassName({ row, rowIndex }) {
       if ((rowIndex + 1) % 2 === 0) {
         return "even_row";
@@ -428,6 +559,25 @@ export default {
     handleClose(done) {
       done();
     },
+    imgChange(file, fileList) {
+      var _tmp = this.fileList;
+      this.noneBtnImg = _tmp.length >= 1;
+    },
+    handleRemove(file) {
+      var _tmp = this.fileList;
+      for (var i = 0, len = _tmp.length; i < len; i++) {
+        if (_tmp[i].uid == file.uid) {
+          _tmp.splice(i, 1);
+          break;
+        }
+        this.fileList = _tmp;
+      }
+      this.noneBtnImg = _tmp.length >= 1;
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = this.fileList[0].url;
+      this.imgVisible = true;
+    },
     handleCurrentChange(val) {
       this.page = val;
       this.selectSchool();
@@ -440,6 +590,118 @@ export default {
       this.page2 = val;
       this.selectSType();
     },
+    beforeUpload(data) {
+      this.$refs.upload.uploadFiles;
+      this.uploadLoading = true;
+      var file = data.file;
+      var credentials = {
+        accessKeyId: "AKIATLPEDU37QV5CHLMH",
+        secretAccessKey: "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",
+      }; //秘钥形式的登录上传
+      window.AWS.config.update(credentials);
+      window.AWS.config.region = "cn-northwest-1"; //设置区域
+
+      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+      var _this = this;
+
+      if (file) {
+        var params = {
+          Key:
+            file.name.split(".")[0] +
+            new Date().getTime() +
+            "." +
+            file.name.split(".")[1],
+          ContentType: file.type,
+          Body: file,
+          "Access-Control-Allow-Credentials": "*",
+          ACL: "public-read",
+        }; //key可以设置为桶的相抵路径,Body为文件, ACL最好要设置
+        var options = {
+          partSize: 2048 * 1024 * 1024,
+          queueSize: 2,
+          leavePartsOnError: true,
+        };
+        bucket
+          .upload(params, options)
+          .on("httpUploadProgress", function (evt) {
+            //这里可以写进度条
+            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+          })
+          .send(function (err, data) {
+            _this.uploadLoading = false;
+            if (err) {
+              var a = _this.$refs.upload.uploadFiles;
+              a.splice(a.length - 1, a.length);
+              _this.$message.error("上传失败");
+            } else {
+              //上传成功处理
+              _this.fileList.push({
+                name: file.name,
+                url: data.Location,
+                uid: file.uid,
+              });
+              console.log(data.Location);
+              _this.imgChange();
+            }
+          });
+      }
+    },
+    addBanner() {
+      if (this.isBanner == true) {
+        this.$confirm(
+          "您已经添加过Banner了,如果您再提交将覆盖上次提交的Banner!",
+          "提示",
+          {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          }
+        )
+          .then(() => {
+            var list = this.fileList;
+            if (list.length == 0) {
+              this.$message.error("请上传需要添加的banner");
+              return;
+            } else if (this.bannerCourse === "") {
+              this.$message.error("请填写选择banner的链接");
+              return;
+            }
+            if (this.time()) {
+              let params = [
+                {
+                  p: list[0].url,
+                  url: this.bannerCourse.courseId,
+                  uid: this.userid,
+                  oid: this.updateOid,
+                },
+              ];
+              this.ajax
+                .post(this.$store.state.api + "addBanner", params)
+                .then((res) => {
+                  this.$message({
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.dialogVisible6 = false;
+                  this.init();
+                })
+                .catch((err) => {
+                  this.$message.error("添加失败");
+                  console.error(err);
+                });
+            }
+          })
+          .catch(() => {});
+      }
+    },
+    setBannerUrl() {
+      if (this.checkBannerCourse == "") {
+        this.$message.error("请选择作为banner链接的课程");
+        return;
+      }
+      this.bannerCourse = this.checkBannerCourse;
+      this.dialogVisible7 = false;
+    },
     selectSchool() {
       this.isLoading = true;
       let params = {
@@ -552,6 +814,24 @@ export default {
         .then((res) => {
           this.total1 = res.data[0].length > 0 ? res.data[0][0].num : 0;
           this.tableData1 = res.data[0];
+          this.selectBanner();
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    selectBanner() {
+      let params = {
+        oid: this.updateOid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectBannerByOid", params)
+        .then((res) => {
+          if (res.data[0].length > 0) {
+            this.isBanner = true;
+          } else {
+            this.isBanner = false;
+          }
         })
         .catch((err) => {
           console.error(err);
@@ -686,6 +966,35 @@ export default {
           console.error(err);
         });
     },
+    //打开添加弹窗
+    addBannerUrlPop() {
+      this.dialogVisible7 = true;
+      this.searchClassName = "";
+      this.Search();
+    },
+    init() {
+      this.searchClassName = "";
+      this.checkList = [];
+      this.courseList = [];
+      this.fileList = [];
+      this.$refs.upload ? (this.$refs.upload.uploadFiles.length = 0) : "";
+      this.noneBtnImg = false;
+      this.dialogImageUrl = "";
+      this.bannerCourse = "";
+      this.checkBannerCourse = "";
+    },
+    Search() {
+      this.checkList = [];
+      let params = { t: this.searchClassName, oid: this.updateOid };
+      this.ajax
+        .get(this.$store.state.api + "getSearchCourseByoid", params)
+        .then((res) => {
+          this.courseList = res.data[0];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
     deleteStype(id) {
       let params = {
         tid: id,
@@ -736,6 +1045,17 @@ export default {
 .student_page {
   margin: 10px 0 0 45px;
 }
+.disUoloadSty >>> .el-upload--picture-card {
+  display: none; /* 上传按钮隐藏 */
+}
+.dialogBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dialogBox span {
+  margin: 0 20px;
+}
 .student_head {
   margin-top: 10px;
   padding-bottom: 15px;
@@ -823,4 +1143,18 @@ export default {
   padding: 0 90px 0px 0px;
   box-sizing: border-box;
 }
+.cardList {
+  font-size: 14px;
+  height: 360px;
+  overflow: auto;
+}
+.cardList div {
+  margin-bottom: 18px;
+}
+.cardList div:last-child {
+  margin-bottom: 0;
+}
+.cardHead {
+  display: flex;
+}
 </style>

+ 5 - 0
src/components/pages/addCourse.vue

@@ -4302,6 +4302,11 @@ export default {
             if (!this.cid) {
               this.courseTypeId[res.data[0][i].id] = "";
             }
+            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
+              if (res.data[0][i].name == "栏目") {
+                this.CourseType[0][i].name = "主题";
+              }
+            }
             for (var j = 0; j < res.data[1].length; j++) {
               if (res.data[0][i].id == res.data[1][j].pid) {
                 if (!this.CourseTypeJson[res.data[0][i].id]) {

+ 5 - 0
src/components/pages/course.vue

@@ -476,6 +476,11 @@ export default {
             if (!this.cid) {
               this.courseTypeId[res.data[0][i].id] = "";
             }
+            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
+              if (res.data[0][i].name == "栏目") {
+                this.CourseType[0][i].name = "主题";
+              }
+            }
             for (var j = 0; j < res.data[1].length; j++) {
               if (res.data[0][i].id == res.data[1][j].pid) {
                 if (!this.CourseTypeJson[res.data[0][i].id]) {