学习资料

src/App.vue

@@ -1,7 +1,12 @@
 <template>
   <div
     id="app"
-    :class="{appNoWidth:$route.path == '/data' || $route.path == '/note' || $route.path == '/works'}"
+    :class="{
+      appNoWidth:
+        $route.path == '/data' ||
+        $route.path == '/note' ||
+        $route.path == '/works',
+    }"
   >
     <!-- <div class="app_head" :class="{stuWidth:$route.path == '/student'}"> -->
     <!-- <div class="logo" @click="goTo('/course')"></div>
@@ -27,17 +32,23 @@
     </div>-->
     <!-- </div> -->
     <div
-      :class="{gHeight: $route.path == '/Grid'}"
-      style="width:100%;height:100%"
-      :style="{overflow: $route.path == '/liveRoom'?'hidden':''}"
+      :class="{ gHeight: $route.path == '/Grid' }"
+      style="width: 100%; height: 100%"
+      :style="{ overflow: $route.path == '/liveRoom' ? 'hidden' : '' }"
     >
       <!-- main 内容 -->
       <keep-alive v-if="$route.meta.keepAlive">
         <!-- 这里是会被缓存的视图组件 -->
-        <router-view v-if="$route.meta.keepAlive" :class="{ pb_body: isShowNav }" />
+        <router-view
+          v-if="$route.meta.keepAlive"
+          :class="{ pb_body: isShowNav }"
+        />
       </keep-alive>
       <!-- 这里是不被缓存的视图组件 -->
-      <router-view v-if="!$route.meta.keepAlive" :class="{ pb_body: isShowNav }" />
+      <router-view
+        v-if="!$route.meta.keepAlive"
+        :class="{ pb_body: isShowNav }"
+      />
 
       <!-- 底部导航 -->
       <!-- <footer-nav
@@ -68,7 +79,8 @@ export default {
         "/library",
         "/classRoom",
         "/liveRoom",
-		"/addPPt",
+        "/addPPt",
+        "/studyLibrary",
         // "/course/addCourse",
         // "/ask",
         // "/ask/askList",

src/components/pages/studyLibrary.vue

@@ -0,0 +1,523 @@
+<template>
+  <div
+    class="pb_content"
+    style="background: #fff; width: 98%; height: 95%; margin: 20px"
+  >
+    <div class="pb_head top">
+      <span>学习资料</span>
+      <div @click="addImg($event)">
+        <input
+          type="file"
+          style="display: none"
+          @change="beforeUpload1($event, 1)"
+        />
+        <div class="uploadThing">上传资料</div>
+      </div>
+    </div>
+    <div class="pb_content_body" style="height: 70%">
+      <div class="student_head">
+        <div class="three">
+          <div :class="choose == 0 ? 'choose' : ''" @click="sMtl(0)">
+            第一天
+          </div>
+          <div :class="choose == 1 ? 'choose' : ''" @click="sMtl(1)">
+            第二天
+          </div>
+          <div :class="choose == 2 ? 'choose' : ''" @click="sMtl(2)">
+            第三天
+          </div>
+          <div :class="choose == 3 ? 'choose' : ''" @click="sMtl(3)">
+            第四天
+          </div>
+          <div :class="choose == 4 ? 'choose' : ''" @click="sMtl(4)">
+            第五天
+          </div>
+          <div :class="choose == 5 ? 'choose' : ''" @click="sMtl(5)">
+            第六天
+          </div>
+          <div :class="choose == 6 ? 'choose' : ''" @click="sMtl(6)">
+            第七天
+          </div>
+        </div>
+      </div>
+      <div class="student_table">
+        <div
+          style="
+            padding: 15px 0;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: flex-start;
+          "
+        >
+          <div
+            class="out_box"
+            v-for="(item, index) in chapInfoNew"
+            :key="index"
+          >
+            <div class="tup" v-if="item.fileT == 0">
+              <img
+                :src="
+                  item.file.chapdataInfo
+                    ? JSON.parse(item.file.chapdataInfo).url
+                    : mtp
+                "
+                alt=""
+                @click="
+                  handlePictureCardPreview(
+                    JSON.parse(item.file.chapdataInfo).url
+                  )
+                "
+              />
+              <div class="deleteWord" @click="deleteM(item.file.id)">
+                <img src="../../assets/icon/delete.png" alt="" />
+              </div>
+            </div>
+            <div class="tup" v-if="item.fileT == 1">
+              <img
+                src="../../assets/icon/stuVedio.png"
+                alt=""
+                @click="
+                  handlePictureCardPreview(
+                    JSON.parse(item.file.chapdataInfo).url
+                  )
+                "
+              />
+              <div class="deleteWord" @click="deleteM(item.file.id)">
+                <img src="../../assets/icon/delete.png" alt="" />
+              </div>
+            </div>
+            <div class="tup" v-if="item.fileT == 2">
+              <img
+                src="../../assets/icon/stuFile.png"
+                alt=""
+                @click="
+                  handlePictureCardPreview(
+                    JSON.parse(item.file.chapdataInfo).url
+                  )
+                "
+              />
+              <div class="deleteWord" @click="deleteM(item.file.id)">
+                <img src="../../assets/icon/delete.png" alt="" />
+              </div>
+            </div>
+            <div class="bottom_box">
+              <div>
+                {{
+                  item.file.chapdataInfo
+                    ? JSON.parse(item.file.chapdataInfo).name
+                    : "图片暂无名称"
+                }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- <div v-if="this.choose == 1" style="padding: 15px 5px; display: flex">
+          <div class="out_box" v-for="(item, index) in chapInfo" :key="index">
+            <div class="tup">
+              <img
+                :src="msp"
+                alt=""
+                @click="
+                  handlePictureCardPreview1(JSON.parse(item.chapdataInfo).url)
+                "
+              />
+              <div class="deleteWord" @click="deleteM(item.id)">
+                <img src="../assets/icon/deleteL.png" alt="" />
+              </div>
+            </div>
+            <div class="bottom_box">
+              <div>
+                {{
+                  item.chapdataInfo
+                    ? JSON.parse(item.chapdataInfo).name
+                    : "图片暂无名称"
+                }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="this.choose == 2" style="padding: 15px 5px; display: flex">
+          <div class="out_box" v-for="(item, index) in chapInfo" :key="index">
+            <div class="tup">
+              <img
+                :src="mfj"
+                alt=""
+                @click="downFile(JSON.parse(item.chapdataInfo).url)"
+              />
+              <div class="deleteWord" @click="deleteM(item.id)">
+                <img src="../assets/icon/deleteL.png" alt="" />
+              </div>
+            </div>
+            <div class="bottom_box">
+              <div>
+                {{
+                  item.chapdataInfo
+                    ? JSON.parse(item.chapdataInfo).name
+                    : "图片暂无名称"
+                }}
+              </div>
+            </div>
+          </div>
+        </div> -->
+      </div>
+      <div class="student_page">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :page-size="10"
+          :total="total"
+          v-if="page"
+          @current-change="handleCurrentChange"
+        >
+        </el-pagination>
+      </div>
+    </div>
+    <el-dialog :visible.sync="pictureDialog" size="tiny">
+      <img width="100%" :src="dialogImageUrl" alt="" />
+    </el-dialog>
+    <el-dialog :visible.sync="vedioDialog" size="tiny">
+      <video-player
+        class="video-player vjs-custom-skin"
+        ref="videoPlayer"
+        :playsinline="true"
+        :options="playerO"
+        @play="onPlayerPlay($event)"
+        style="width: 100%; height: 100%"
+      ></video-player>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      choose: 0,
+      chapInfo: [],
+      chapInfoNew: [],
+      cImgInfo: [],
+      isLoading: false,
+      noneBtnImg: false,
+      mtp: require("../../assets/sp1.png"),
+      //   msp: require("../../assets/sp1.png"),
+      //   mfj: require("../../assets/yp1.png"),
+      page: 1,
+      total: 0,
+      dialogImageUrl: "",
+      userid: this.$route.query.userid,
+      pictureDialog: false,
+      vedioDialog: false,
+      playerOptions: {
+        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+        autoplay: false, //如果true,浏览器准备好时开始回放。
+        muted: false, // 默认情况下将会消除任何音频。
+        loop: false, // 导致视频一结束就重新开始。
+        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+        language: "zh-CN",
+        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+        sources: [
+          {
+            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
+            src: "", //url地址require("../../assets/media/aaa.mp4")
+          },
+        ],
+        // poster: require("../../assets/tu31.png"), //你的封面地址
+        // poster: dataRes.imgUrl, //你的封面地址
+        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        controlBar: {
+          timeDivider: true, //当前时间和持续时间的分隔符
+          durationDisplay: true, //显示持续时间
+          remainingTimeDisplay: false, //是否显示剩余时间功能
+          fullscreenToggle: true, //全屏按钮
+        },
+      },
+      playerO: {},
+    };
+  },
+  methods: {
+    handleCurrentChange(val) {
+      this.page = val;
+      this.selectMtl();
+    },
+    addImg(e) {
+      var el = e.currentTarget;
+      el.getElementsByTagName("input")[0].click();
+    },
+    imgChange(file, fileList, type) {
+      var _tmp = this.chapInfo;
+      this.noneBtnImg = _tmp.length >= 1;
+    },
+    downFile(url) {
+      window.open(url);
+    },
+    beforeUpload1(event, type) {
+      var file = event.target.files[0];
+      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) {
+            if (err) {
+              var a = _this.$refs.upload1.uploadFiles;
+              a.splice(a.length - 1, a.length);
+              _this.$message.error("上传失败");
+            } else {
+              _this.cImgInfo.push({
+                name: file.name,
+                url: data.Location,
+              });
+              _this.addMtl();
+              _this.cImgInfo = [];
+              _this.selectMtl();
+              _this.imgChange(null, null, type);
+              console.log(data.Location);
+            }
+          });
+      }
+    },
+    handlePictureCardPreview(url) {
+      this.dialogImageUrl = url;
+      this.pictureDialog = true;
+    },
+    handlePictureCardPreview1(url) {
+      this.playerO = {};
+      this.playerOptions.poster = "";
+      this.playerOptions.sources[0].src = url;
+      this.playerO = this.playerOptions;
+      // this.dialogImageUrl = url;
+      this.vedioDialog = true;
+    },
+    addMtl() {
+      let params = {
+        cInfo: this.cImgInfo[0],
+        t: this.choose,
+        cBy: this.userid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "addStuMtl", params)
+        .then((res) => {
+          this.$message.success("上传素材成功");
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    sMtl(type) {
+      this.choose = type;
+      this.selectMtl();
+    },
+    selectMtl() {
+      this.isLoading = true;
+      this.chapInfo = [];
+      this.chapInfoNew = [];
+      let params = {
+        t: parseInt(this.choose),
+        page: this.page,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectStuMtl", params)
+        .then((res) => {
+          this.isLoading = false;
+          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.chapInfo = res.data[0];
+          var a = ["BMP", "JPG", "JPEG", "PNG", "GIF"];
+          var b = [
+            "MP4",
+            "MOV",
+            "AVI",
+            "WMV",
+            "MPG",
+            "MPEG",
+            "RM",
+            "RAM",
+            "SWF",
+            "FLV",
+          ];
+          var c = ["PPT", "PPTX", "PDF", "XLSX", "XLS", "DOC", "DOCX"];
+          for (var i = 0; i < this.chapInfo.length; i++) {
+            var d = JSON.parse(this.chapInfo[i].chapdataInfo).url;
+            if (
+              a.indexOf(
+                d.split(".")[d.split(".").length - 1].toLocaleUpperCase()
+              ) != -1
+            ) {
+              this.chapInfoNew.push({ file: this.chapInfo[i], fileT: 0 });
+            } else if (
+              b.indexOf(
+                d.split(".")[d.split(".").length - 1].toLocaleUpperCase()
+              ) != -1
+            ) {
+              this.chapInfoNew.push({ file: this.chapInfo[i], fileT: 1 });
+            } else if (
+              c.indexOf(
+                d.split(".")[d.split(".").length - 1].toLocaleUpperCase()
+              ) != -1
+            ) {
+              this.chapInfoNew.push({ file: this.chapInfo[i], fileT: 2 });
+            }
+          }
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    deleteM(id) {
+      this.isLoading = true;
+      let params = {
+        id: id,
+      };
+      this.ajax
+        .get(this.$store.state.api + "deleteStuM", params)
+        .then((res) => {
+          this.isLoading = false;
+          this.$message.success("删除成功");
+          this.selectMtl();
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    onPlayerPlay() {},
+  },
+  created() {
+    this.selectMtl();
+  },
+};
+</script>
+
+<style scoped>
+.student_head >>> .el-button--primary {
+  background-color: #2268bc;
+}
+.student_head {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.three {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 30px;
+}
+
+.three > div {
+  cursor: pointer;
+  margin-right: 20px;
+}
+
+.choose {
+  border-bottom: 5px solid #3994fd;
+}
+
+.student_table {
+  width: 100%;
+  height: 100%;
+  margin-top: 10px;
+}
+
+.tup {
+  width: 200px;
+  height: 191px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.tup:hover .deleteWord {
+  display: block;
+}
+
+.deleteWord {
+  width: 25px;
+  height: 25px;
+  position: absolute;
+  right: -25px;
+  top: -10px;
+  cursor: pointer;
+  display: none;
+}
+
+.tup > img,
+.deleteWord > img {
+  width: 100%;
+  height: 100%;
+}
+
+.out_box {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  width: 250px;
+  padding: 10px 0;
+  background: #fff;
+}
+
+.bottom_box {
+  display: flex;
+  text-align: center;
+  margin: 0 auto;
+  padding: 10px 0 5px 0;
+}
+.bottom_box > div:nth-child(1) {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  width: 200px;
+}
+.uploadThing {
+  background: #2268bc;
+  width: 90px;
+  height: 35px;
+  color: #fff;
+  font-size: 12px;
+  text-align: center;
+  line-height: 35px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+.student_page {
+  margin-top: 30px;
+}
+</style>

src/components/tools/leftBar.vue

@@ -113,6 +113,15 @@
             </div>
             <span slot="title">添加备课</span>
           </el-menu-item>
+          <el-menu-item index="/studyLibrary">
+            <div class="img" v-if="path == '/studyLibrary'">
+              <img src="../../assets/icon/new-active.svg" alt="" />
+            </div>
+            <div class="img" v-else>
+              <img src="../../assets/icon/notice.png" alt="" />
+            </div>
+            <span slot="title">学习资料</span>
+          </el-menu-item>
           <!-- <el-menu-item index="/ask">
             <div class="img" v-if="path == '/ask'">
               <img

src/router/index.js

@@ -20,6 +20,7 @@ import demo from '@/components/pages/demo'
 import classRoom from '@/components/pages/classRoom'
 import liveRoom from '@/components/pages/liveRoom'
 import addPPt from '@/components/pages/addPPt'
+import studyLibrary from '@/components/pages/studyLibrary'
 
 Vue.use(Router).use(ElementUI)
 
@@ -174,6 +175,14 @@ export default new Router({
             meta: {
                 requireAuth: '' // 不需要鉴权
             }
-        }
+        },
+        {
+            path: '/studyLibrary',
+            name: 'studyLibrary',
+            component: studyLibrary,
+            meta: {
+                requireAuth: '' // 不需要鉴权
+            }
+        },
     ]
 })