Learnresource

.env.production

@@ -1,3 +1,5 @@
+NODE_ENV = production
+
 # just a flag
 ENV = 'production'
 

src/components/learnCenter/AudioLine.vue

@@ -0,0 +1,458 @@
+<template>
+  <div class="AudioNNPE">
+    <div class="audioLine">
+      <span class="audioName">1.</span>
+      <div class="go-start"></div>
+      <div class="playBox" @click="PlayAudio">
+        <div
+          class="play"
+          :class="[
+            audio.loading ? 'loadBtn' : audio.playing ? 'playBtn' : 'pauseBtn',
+          ]"
+        ></div>
+      </div>
+      <div class="go-end"></div>
+      <div class="play-mode order"></div>
+      <template>
+        <el-slider
+          v-model="playValue"
+          :style="{ width: sliderWidth + 'px', height: '2px' }"
+          :format-tooltip="formatProcessToolTip"
+          @change="changeCurrentTime"
+        />
+        <span
+          ><template v-if="audio.playing">-</template
+          >{{
+            audio.maxTime
+              ? realFormatSecond(audio.maxTime - audio.currentTime)
+              : ""
+          }}</span
+        >
+      </template>
+      <div class="common-btn audio-btn">
+        <img src="../../assets/learncenter/music-list.png" class="music-list" />
+      </div>
+      <div class="common-btn download-btn">
+        <img src="../../assets/learncenter/download.png" class="download" />
+      </div>
+    </div>
+    <audio
+      :ref="audioId"
+      :src="mp3"
+      @loadedmetadata="onLoadedmetadata"
+      @timeupdate="onTimeupdate"
+      @canplaythrough="oncanplaythrough"
+      preload="meta"
+      :id="audioId"
+    />
+  </div>
+</template>
+
+<script>
+// 这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》from ‘《组件路径》';
+export default {
+  // import引入的组件需要注入到对象中才能使用
+  components: {},
+  props: [
+    "mp3",
+    "mp3Source",
+    "getCurTime",
+    "stopAudio",
+    "width",
+    "isRepeat",
+    "themeColor",
+    "hideSlider",
+    "ed",
+    "bg",
+    "audioId",
+    "type",
+  ],
+  data() {
+    // 这里存放数据
+    return {
+      playValue: 0,
+      audio: {
+        // 该字段是音频是否处于播放状态的属性
+        playing: false,
+        // 音频当前播放时长
+        currentTime: 0,
+        // 音频最大播放时长
+        maxTime: 0,
+        isPlaying: false,
+        loading: false,
+      },
+      audioAllTime: null, // 展示总时间
+      duioCurrentTime: null, // 剩余时间
+      count: 0,
+      isClick: false,
+    };
+  },
+  // 计算属性 类似于data概念
+  computed: {
+    sliderWidth() {
+      let width = 0;
+      if (this.width) {
+        width = this.width;
+      } else {
+        width = 662;
+      }
+      return width;
+    },
+  },
+  // 监控data中数据变化
+  watch: {
+    stopAudio: {
+      handler(val, oldVal) {
+        const _this = this;
+        if (val) {
+          _this.$refs[_this.audioId].pause();
+          _this.audio.playing = false;
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
+    "audio.playing": {
+      handler(val) {
+        this.$emit("playChange", val);
+        if (val) this.$emit("handleChangeStopAudio");
+      },
+    },
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let _this = this;
+    let audioId = _this.audioId;
+    _this.$refs[audioId].addEventListener("loadstart", function () {
+      console.log("音频开始加载");
+    });
+    _this.$refs[audioId].addEventListener("play", function () {
+      console.log("音频开始播放了");
+      _this.audio.playing = true;
+      _this.audio.isPlaying = true;
+      _this.audio.loading = false;
+    });
+    _this.$refs[audioId].addEventListener("pause", function () {
+      _this.audio.playing = false;
+      if (_this.hideSlider && _this.audio.currentTime * 1000 + 500 > _this.ed) {
+        _this.$emit("sentPause", true);
+      }
+      _this.$emit("handleListenRead", false);
+    });
+    _this.$refs[audioId].addEventListener("ended", function () {
+      _this.audio.playing = false;
+      _this.audio.isPlaying = false;
+      _this.isClick = false;
+      _this.$emit("handleListenRead", false);
+    });
+
+    this.$nextTick(() => {
+      if (
+        document.getElementsByClassName("el-slider__button-wrapper") &&
+        document.getElementsByClassName("el-slider__button-wrapper")[0]
+      ) {
+        document
+          .getElementsByClassName("el-slider__button-wrapper")[0]
+          .addEventListener("mousedown", function () {
+            _this.$refs[audioId].pause();
+            _this.audio.playing = false;
+          });
+      }
+    });
+  },
+  // 生命周期-挂载之前
+  beforeMount() {},
+  // 生命周期-更新之后
+  updated() {},
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+  // 方法集合
+  methods: {
+    PlayAudio() {
+      let audioId = this.audioId;
+      let audio = document.getElementsByTagName("audio");
+      console.log(audio);
+      audio.forEach((item) => {
+        if (item.src == this.mp3) {
+          if (item.id !== audioId) {
+            item.pause();
+          }
+        } else {
+          item.pause();
+        }
+      });
+
+      if (this.audio.playing) {
+        this.$refs[audioId].pause();
+        this.audio.playing = false;
+        this.$emit("handleListenRead", false);
+        this.isClick = false;
+      } else {
+        if (this.count == 0) {
+          this.audio.loading = true;
+          this.count++;
+        }
+        if (this.hideSlider) {
+          this.$refs[audioId].play();
+          this.onTimeupdateTime(this.bg / 1000);
+        } else {
+          this.$refs[audioId].play();
+        }
+
+        this.$emit("handleChangeStopAudio");
+        this.$emit("handleListenRead", true);
+        this.isClick = true;
+      }
+    },
+    oncanplaythrough() {
+      let _this = this;
+      //setTimeout(() => {
+      console.log("音频加载完成");
+      _this.audio.loading = false;
+      //}, 10000);
+    },
+    // 点击 拖拽播放音频
+    changeCurrentTime(value) {
+      let audioId = this.audioId;
+      this.$refs[audioId].play();
+      this.audio.playing = true;
+      this.$refs[audioId].currentTime = parseInt(
+        (value / 100) * this.audio.maxTime
+      );
+    },
+    mousedown() {
+      let audioId = this.audioId;
+      this.$refs[audioId].pause();
+      this.audio.playing = false;
+    },
+    // 进度条格式化toolTip
+    formatProcessToolTip(index) {
+      index = parseInt((this.audio.maxTime / 100) * index);
+      return this.realFormatSecond(index);
+    },
+    // 音频加载完之后
+    onLoadedmetadata(res) {
+      this.audio.maxTime = parseInt(res.target.duration);
+      this.audioAllTime = this.realFormatSecond(this.audio.maxTime);
+    },
+    // 当音频当前时间改变后，进度条也要改变
+    onTimeupdate(res) {
+      let audioId = this.audioId;
+      this.audio.currentTime = res.target.currentTime;
+      this.getCurTime(res.target.currentTime);
+      this.playValue = (this.audio.currentTime / this.audio.maxTime) * 100;
+      if (this.type == "audioLine") {
+        if (!this.isClick && this.audio.currentTime * 1000 > this.ed) {
+          this.$refs[audioId].pause();
+          this.$emit("emptyEd");
+        }
+      } else {
+        if (this.hideSlider) {
+          if (this.audio.currentTime * 1000 + 500 > this.ed) {
+            this.$refs[audioId].pause();
+          }
+        }
+      }
+    },
+    onTimeupdateTime(res, playFlag) {
+      if (!res && res !== 0) return;
+      let audioId = this.audioId;
+      this.$refs[audioId].currentTime = res;
+      this.playValue = (res / this.audio.maxTime) * 100;
+      if (playFlag) {
+        let audio = document.getElementsByTagName("audio");
+        audio.forEach((item) => {
+          if (item.id !== audioId) {
+            item.pause();
+          }
+        });
+        this.$refs[audioId].play();
+      }
+    },
+    // 将整数转换成 时：分：秒的格式
+    realFormatSecond(value) {
+      let theTime = parseInt(value); // 秒
+      let theTime1 = 0; // 分
+      let theTime2 = 0; // 小时
+      if (theTime > 60) {
+        theTime1 = parseInt(theTime / 60);
+        theTime = parseInt(theTime % 60);
+        if (theTime1 > 60) {
+          theTime2 = parseInt(theTime1 / 60);
+          theTime1 = parseInt(theTime1 % 60);
+        }
+      }
+      let result = String(parseInt(theTime));
+      if (result < 10) {
+        result = "0" + result;
+      }
+      if (theTime1 > 0) {
+        result = String(parseInt(theTime1)) + ":" + result;
+        if (theTime1 < 10) {
+          result = "0" + result;
+        }
+      } else {
+        result = "00:" + result;
+      }
+      if (theTime2 > 0) {
+        result = String(parseInt(theTime2)) + ":" + result;
+        if (theTime2 < 10) {
+          result = "0" + result;
+        }
+      } else {
+        // result = "00:" + result;
+      }
+      return result;
+    },
+  },
+  // 生命周期-创建之前
+  beforeCreated() {},
+  // 生命周期-更新之前
+  beforUpdate() {},
+  // 生命周期-销毁之前
+  beforeDestory() {},
+  // 生命周期-销毁完成
+  destoryed() {},
+};
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.AudioNNPE {
+  width: 100%;
+  .audioLine {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+    background: #ffffff;
+    box-sizing: border-box;
+    border-radius: 8px;
+    .playBox {
+      min-width: 40px;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 7px;
+      cursor: pointer;
+    }
+    .play {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      display: block;
+      &.playBtn {
+        background: url("../../assets/learncenter/pause-24-normal-red.png")
+          no-repeat left top;
+        background-size: 100% 100%;
+      }
+      &.pauseBtn {
+        background: url("../../assets/learncenter/play-24-normal-red.png")
+          no-repeat left top;
+        background-size: 100% 100%;
+      }
+    }
+    .audioName {
+      width: 24px;
+      margin-right: 16px;
+    }
+  }
+  .loadBtn {
+    background: url("../../assets/learncenter/loading-red.png") no-repeat left
+      top;
+    background-size: 100% 100%;
+  }
+  .go-start {
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    display: block;
+    background: url("../../assets/learncenter/go-start.png") no-repeat left top;
+    background-size: 100% 100%;
+    &.disabled {
+      background: url("../../assets/learncenter/go-start-disabled.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+  }
+  .go-end {
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    display: block;
+    background: url("../../assets/learncenter/go-end.png") no-repeat left top;
+    background-size: 100% 100%;
+    &.disabled {
+      background: url("../../assets/learncenter/go-end-disabled.png") no-repeat
+        left top;
+      background-size: 100% 100%;
+    }
+  }
+  .play-mode {
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    display: block;
+    &.order {
+      background: url("../../assets/learncenter/auto-24-disable-black.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+    .roll {
+      background: url("../../assets/learncenter/Repeat-24-disable-Black.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+  }
+  .common-btn {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 8px;
+    &.active {
+      background: #eeeeee;
+    }
+    > img {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+</style>
+<style lang="scss">
+.AudioNNPE {
+  .el-slider__button-wrapper {
+    position: relative;
+    z-index: 0;
+  }
+  .el-slider__button {
+    width: 8px;
+    height: 8px;
+    top: 12px;
+    position: absolute;
+  }
+  .el-slider__runway {
+    margin: 0;
+    padding: 0;
+    background: #e5e5e5;
+    border-radius: 0px;
+    height: 2px;
+  }
+  .el-slider {
+    position: relative;
+  }
+  .el-slider__bar {
+    height: 2px;
+    background: #1890ff;
+  }
+  .el-slider__button {
+    background: #1890ff;
+    border: none;
+  }
+}
+</style>

src/components/learnCenter/Learnresource.vue

@@ -0,0 +1,192 @@
+<template>
+  <!-- 教材 -->
+  <div class="Textbook">
+    <div class="top" v-if="!type">
+      <div class="title">
+        <span>
+          <img src="../../assets/learncenter/listTitleImg2.png" alt="" />
+        </span>
+        <b>学习资源</b>
+      </div>
+      <div class="more" @click="gotolist">
+        <span><!-- 查看更多  -->{{ $t("Key147") }}</span>
+        <img src="../../assets/learncenter/moreImage.png" alt="" />
+      </div>
+    </div>
+    <div class="class_list">
+      <div v-for="(item, i) in classList" :key="i" @click="gotoIntroduce(item)">
+        <div class="listImage">
+          <!-- <el-image lazy :src="item.picture_url" alt=""></el-image> -->
+          <img v-if="item.picture_url" :src="item.picture_url" alt="" />
+          <span v-else> {{ $t("Key323") }}</span>
+        </div>
+        <p class="one_name">{{ item.name }}</p>
+        <p class="price">
+          ￥<span class="price_1" v-html="changePrice(item.price)"></span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { updateWordPack } from "@/utils/i18n";
+export default {
+  props: ["classList", "type"],
+  data() {
+    return {};
+  },
+  methods: {
+    gotolist() {
+      this.$router.push({
+        path: "/learncenter/ListPage",
+        query: { id: "LEARNRESOURCE" },
+      });
+    },
+    // 处理价格
+    // 处理价格
+    changePrice(price) {
+      let str = "";
+      price = price ? price.toString() : "0.00";
+      if (price.indexOf(".") > -1) {
+        let arr = price.split(".");
+        str = `<span style="font-size: 24px;">${arr[0]}</span>.<span style="font-size: 16px;">${arr[1]}</span>`;
+      } else {
+        str = `<span style="font-size: 24px;">${price}</span>.<span  style="font-size: 16px;">00</span>`;
+      }
+
+      return str;
+    },
+    // 需要跳到教材系统的教材详情
+    gotoIntroduce(item) {
+      sessionStorage.setItem("Bookdetail", JSON.stringify(item));
+      let href = `/GCLS-Book/#/GoodsDetail?goods_id=${item.id}&goods_type=101`;
+      window.open(href, "_blank");
+    },
+  },
+  created() {
+    updateWordPack({
+      word_key_list: ["Key44", "Key46"],
+    });
+  },
+};
+</script>
+
+<style lang="scss"  scoped>
+.Textbook {
+  .top {
+    width: 1200px;
+    margin: 0 auto;
+    height: 90px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .title {
+      font-weight: bold;
+      font-size: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span {
+        display: inline-block;
+        width: 42px;
+        height: 42px;
+        border-radius: 50%;
+        background: linear-gradient(28.36deg, #ff7d8a 13.41%, #ff616c 84.14%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          width: 20px;
+          height: 15px;
+        }
+      }
+      b {
+        margin: 0 16px;
+      }
+    }
+    .title2 {
+      font-weight: bold;
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.5);
+      span {
+        color: black;
+      }
+    }
+    .more {
+      cursor: pointer;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      span {
+        opacity: 0.4;
+      }
+      img {
+        width: 25px;
+        height: 19px;
+      }
+    }
+  }
+  .class_list {
+    margin: 0 auto;
+    background: #fff;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    width: 1200px;
+    box-sizing: border-box;
+    padding: 40px 20px 8px;
+    > div {
+      margin: 0 20px 32px 20px;
+      width: 192px;
+      cursor: pointer;
+      .one_name {
+        width: 100%;
+        height: 42px;
+        margin-top: 16px;
+        line-height: 150%;
+        word-break: break-all;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        font-size: 14px;
+        color: #2c2c2c;
+      }
+      .price {
+        margin-top: 8px;
+        font-weight: bold;
+        color: #2c2c2c;
+        font-size: 24px;
+        .price_2 {
+          font-size: 16px;
+        }
+      }
+      p {
+        font-size: 16px;
+      }
+      .listImage {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 256px;
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        box-sizing: border-box;
+        img {
+          max-width: 100%;
+          max-height: 100%;
+        }
+        color: #c0c4cc;
+      }
+      .gray {
+        color: #a3a3a3;
+      }
+      .origin {
+        color: #ff9900;
+      }
+    }
+  }
+}
+</style>

src/permission.js

@@ -44,7 +44,7 @@ router.beforeEach(async (to, from, next) => {
       }
     } else {
       removeToken();
-      console.log(process.env.NODE_ENV)
+
       if (process.env.NODE_ENV == "development") {
         next(`/login?redirect=${to.path}`)
       } else {

src/router/index.js

@@ -48,7 +48,21 @@ const routes = [{
   name: 'learnCenterSeekresult',
   component: () =>
     import('../views/learn-center/Seekresult.vue')
-}
+},
+{
+  path: '/learncenter/Learnresource',
+  name: 'learnCenterLearnresource',
+  component: () =>
+    import('../views/learn-center/Learnresource.vue')
+},
+{
+  path: '/404',
+  component: () =>
+    import('@/views/404'),
+  hidden: true
+},
+// 404 page must be placed at the end !!!
+{ path: '*', redirect: '/', hidden: true }
 ]
 
 

src/views/404.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">404</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Page404",
+  computed: {
+    message() {
+      return "The webmaster said that you can not enter this page...";
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404-container {
+  transform: translate(-50%, -50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  padding: 0 50px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/views/learn-center/Learnresource.vue

@@ -0,0 +1,459 @@
+<template>
+  <!-- 教材详情 -->
+  <div class="TextbookDetail" v-if="TextbookData">
+    <Header />
+
+    <HeaderOne text="123" title="学习资源" :name="TextbookData.name" />
+    <div class="main" v-loading="loading">
+      <div class="bookDetail">
+        <!-- <div class="rightUp">
+          <span>HOT</span>
+        </div> -->
+        <div class="img">
+          <img src="../../assets/learncenter/Rectangle 904.png" alt="" />
+        </div>
+        <div class="text">
+          <div class="name-author">
+            <p class="p1">{{ TextbookData.name }}</p>
+            <p class="author">{{ TextbookData.author }}</p>
+          </div>
+          <div class="operation">
+            <span class="price">
+              $
+              <span
+                class="price_1"
+                v-text="changePrice('1', TextbookData.price)"
+              ></span>
+              <span
+                class="price_2"
+                v-text="changePrice('2', TextbookData.price)"
+              ></span>
+            </span>
+            <button @click="getPurchase" v-if="!IsPurchase" class="get">
+              购买
+            </button>
+            <button @click="getPurchase" v-else class="acquired">去学习</button>
+            <span class="enshrine" @click="enshrineEvent">
+              <img
+                v-if="!enshrine"
+                src="../../assets/learncenter/enshrine3.png"
+                alt=""
+              />
+              <img v-else src="../../assets/learncenter/enshrine1.png" alt="" />
+            </span>
+          </div>
+        </div>
+        <div class="book-open book-open-abs">
+          <img src="@/assets/learncenter/book-open.png" class="book-open-img" />
+          <span class="book-open-text">试读</span>
+        </div>
+      </div>
+      <div class="resource-content">
+        <h2 class="video-title">视频资源</h2>
+        <ul class="video-list">
+          <li>
+            <div class="video-img">
+              <img class="video" />
+              <img src="@/assets/learncenter/play-one.png" class="play-one" />
+            </div>
+            <p class="video-name">Course Introduction</p>
+          </li>
+          <li>
+            <div class="video-img">
+              <img class="video" />
+              <img src="@/assets/learncenter/play-one.png" class="play-one" />
+            </div>
+            <p class="video-name">Course Introduction</p>
+          </li>
+          <li>
+            <div class="video-img">
+              <img class="video" />
+              <img src="@/assets/learncenter/play-one.png" class="play-one" />
+            </div>
+            <p class="video-name">Course Introduction</p>
+          </li>
+          <li>
+            <div class="video-img">
+              <img class="video" />
+              <img src="@/assets/learncenter/play-one.png" class="play-one" />
+            </div>
+            <p class="video-name">Course Introduction</p>
+          </li>
+        </ul>
+      </div>
+      <div class="resource-content">
+        <h2 class="video-title">音频资源</h2>
+        <div class="audio-content">
+          <p class="audio-type">课文资源</p>
+          <div class="audio-line-box">
+            <AudioLine />
+          </div>
+        </div>
+        <div class="audio-content">
+          <p class="audio-type">自学音频</p>
+          <div class="audio-line-box">
+            <AudioLine />
+          </div>
+        </div>
+        <div class="audio-content">
+          <p class="audio-type">资源下载</p>
+          <div class="download">
+            <div class="book-open">
+              <img
+                src="@/assets/learncenter/download.png"
+                class="book-open-img"
+              />
+              <span class="book-open-text">音频</span>
+            </div>
+            <div class="book-open">
+              <img
+                src="@/assets/learncenter/download.png"
+                class="book-open-img"
+              />
+              <span class="book-open-text">互动课件</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import Header from "@/components/Header";
+import HeaderOne from "@/components/learnCenter/HeaderOne";
+import AudioLine from "@/components/learnCenter/AudioLine";
+import { TextbookAPI, LearnWebSI } from "@/api/api";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    Header,
+    HeaderOne,
+    AudioLine,
+  },
+  props: {},
+  data() {
+    //这里存放数据
+    return {
+      enshrine: false,
+      IsPurchase: false,
+      SelectShow: "1", //选择展示课程资源还是下载
+      TextBookId: null,
+      TextbookData: null,
+      loading: false,
+    };
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 选择课程资源还是下载
+    SelectShowEvent(num) {
+      this.SelectShow = num;
+    },
+    // 处理价格
+    changePrice(type, item) {
+      if (item) {
+        item = item + "";
+        if (item.indexOf(".") != -1) {
+          if (type == 1) {
+            return item.split(".")[0];
+          } else if (type == 2) {
+            return "." + item.split(".")[1];
+          }
+        } else {
+          if (type == 1) {
+            return item;
+          }
+        }
+      }
+    },
+    // 收藏
+    enshrineEvent() {
+      this.enshrine = !this.enshrine;
+      if ("收藏") {
+        let Mname = "order-collection_manager-AddMyCollection";
+        let data = {
+          id: this.TextBookId,
+          goods_type: 101,
+          goods_name: this.TextbookData.name,
+          goods_person_name_desc: this.TextbookData.author,
+          goods_picture_id: this.TextbookData.picture_id,
+          goods_price: this.TextbookData.price,
+        };
+        LearnWebSI(Mname, data).then((res) => {});
+      } else {
+      }
+    },
+    // 购买
+    getPurchase() {
+      this.IsPurchase = !this.IsPurchase;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.loading = true;
+    this.TextBookId = this.$route.query.id;
+    let Mname = "book-book_manager-GetBook";
+    // 获取课程详情
+    TextbookAPI(Mname, {
+      id: this.TextBookId,
+    })
+      .then((res) => {
+        console.log(res);
+        this.TextbookData = res;
+        this.loading = false;
+      })
+      .catch((res) => {
+        this.loading = false;
+      });
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  //生命周期-创建之前
+  beforeCreated() {},
+  //生命周期-挂载之前
+  beforeMount() {},
+  //生命周期-更新之前
+  beforUpdate() {},
+  //生命周期-更新之后
+  updated() {},
+  //生命周期-销毁之前
+  beforeDestory() {},
+  //生命周期-销毁完成
+  destoryed() {},
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.TextbookDetail {
+  min-height: 100vh;
+  background: #e5e5e5;
+  .main {
+    min-height: 100%;
+    padding-top: 24px;
+
+    padding-bottom: 20px;
+    .book-open {
+      cursor: pointer;
+      height: 40px;
+      padding: 0 15px;
+      background: #ffffff;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      box-sizing: border-box;
+      border-radius: 8px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      > img {
+        width: 24px;
+        height: 24px;
+        margin-right: 10px;
+      }
+      > span {
+        font-size: 16px;
+        color: #000;
+        line-height: 24px;
+      }
+    }
+
+    .bookDetail {
+      position: relative;
+      width: 1200px;
+      height: 256px;
+      margin: 0 auto;
+      background: #fff;
+      border-radius: 0 8px 8px 0;
+      display: flex;
+      position: relative;
+      overflow: hidden;
+      margin-bottom: 24px;
+      .book-open-abs {
+        position: absolute;
+        right: 24px;
+        bottom: 24px;
+      }
+      .img {
+        img {
+          max-width: 192px;
+          max-height: 256px;
+          height: 256px;
+        }
+      }
+      .rightUp {
+        margin: 0;
+        width: 72px;
+        height: 72px;
+        background: url("../../assets/learncenter/Rectangle903.png");
+        position: absolute;
+        right: 0;
+        top: 0;
+        // text-align: right;
+        span {
+          display: inline-block;
+          color: #fff;
+          transform: rotateZ(45deg);
+          position: absolute;
+          left: 30px;
+          top: 10px;
+        }
+      }
+
+      .text {
+        width: 600px;
+        color: #000;
+        box-sizing: border-box;
+        padding: 24px 32px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: flex-start;
+        p {
+          font-size: 16px;
+          margin: 0;
+        }
+        .p1 {
+          font-size: 30px;
+          font-weight: 600;
+          line-height: 42px;
+          margin-bottom: 17px;
+        }
+        .price {
+          font-size: 24px;
+          .price_2 {
+            font-size: 16px;
+          }
+        }
+        .operation {
+          display: flex;
+          align-items: center;
+          margin-top: 30px;
+        }
+        .get {
+          width: 120px;
+          height: 40px;
+          background: #ff9900;
+          border-radius: 4px;
+          border: none;
+          outline: none;
+          color: white;
+          font-size: 20px;
+          margin-left: 30px;
+          cursor: pointer;
+          font-weight: 600;
+        }
+        .acquired {
+          width: 120px;
+          height: 40px;
+          background: #d5d5d5;
+          border-radius: 4px;
+          border: none;
+          outline: none;
+          color: white;
+          font-size: 16px;
+          margin-left: 30px;
+          cursor: pointer;
+        }
+        .enshrine {
+          margin-left: 30px;
+          img {
+            width: 24px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+    .resource-content {
+      width: 1200px;
+      margin: 0 auto;
+      box-sizing: border-box;
+      padding: 24px 24px 8px;
+      background: #ffffff;
+      border-radius: 8px;
+      margin-bottom: 24px;
+      .video-title {
+        font-size: 24px;
+        line-height: 32px;
+        font-weight: 700;
+        margin-bottom: 40px;
+      }
+      .video-list {
+        padding: 0 16px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        list-style: none;
+        > li {
+          margin: 0 12px 16px 12px;
+          cursor: pointer;
+          .video-img {
+            background: #ff9900;
+            position: relative;
+            width: 256px;
+            height: 144px;
+            border-radius: 8px;
+            margin-bottom: 8px;
+            overflow: hidden;
+            .video-bg {
+              width: 256px;
+              height: 144px;
+              border-radius: 8px;
+            }
+            .play-one {
+              position: absolute;
+              left: 108px;
+              top: 52px;
+              width: 40px;
+              height: 40px;
+              display: block;
+            }
+          }
+          .video-name {
+            font-size: 16px;
+            line-height: 150%;
+            color: #000000;
+            word-break: break-all;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+        }
+      }
+      .audio-content {
+        padding: 0 28px;
+        margin-bottom: 24px;
+        .audio-type {
+          margin-bottom: 10px;
+        }
+        .download {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          .book-open {
+            width: fit-content;
+            margin-right: 16px;
+          }
+        }
+      }
+      .audio-line-box {
+        width: 100%;
+        height: 56px;
+        box-sizing: border-box;
+        padding: 7px 11px;
+        background: #ffffff;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-sizing: border-box;
+        border-radius: 8px;
+      }
+    }
+  }
+}
+</style>

src/views/learn-center/ListPage.vue

@@ -71,6 +71,8 @@ export default {
           return Course;
         case "TEXTBOOK":
           return Textbook;
+        case "LEARNRESOURCE":
+          return Textbook;
         default:
           return null;
       }
@@ -138,6 +140,18 @@ export default {
           this.loading = false;
         });
       }
+
+      if (this.navName == "LEARNRESOURCE") {
+        TextbookAPI("book-book_manager-PageQueryBookList", {
+          page_capacity: this.pageSize + 2,
+          cur_page: this.pageNum,
+          publish_status: 1,
+          is_control_publish_scope: "true",
+        }).then((res) => {
+          this.CourseList = res;
+          this.loading = false;
+        });
+      }
     },
   },
   async created() {
@@ -160,6 +174,10 @@ export default {
     if (this.navName == "TEXTBOOK") {
       this.headerOneTitle = this.$t("Key44");
     }
+    if (this.navName == "LEARNRESOURCE") {
+      this.headerOneTitle = "学习资源"; //this.$t("Key44");
+    }
+
     this.getData();
   },
 };

src/views/learn-center/index.vue

@@ -16,6 +16,7 @@
             ><!-- 课程 -->{{ $t("Key215") }}</el-menu-item
           >
           <el-menu-item index="TEXTBOOK">{{ $t("Key44") }}</el-menu-item>
+          <el-menu-item index="LEARNRESOURCE">学习资源</el-menu-item>
           <!-- <el-menu-item index="LIVE LESSON">LIVE LESSON</el-menu-item>
         <el-menu-item index="VIDEO COURSE">VIDEO COURSE</el-menu-item> -->
         </el-menu>
@@ -52,6 +53,9 @@
         <div id="TEXTBOOK">
           <Textbook :classList="TextbookList" />
         </div>
+        <div id="LEARNRESOURCE">
+          <Learnresource :classList="LearnResourceList" />
+        </div>
         <!-- <div id="LIVE LESSON">
           <Live :classList="classList" />
         </div>
@@ -68,6 +72,7 @@ import { mapGetters } from "vuex";
 import Header from "@/components/Header";
 import Course from "@/components/learnCenter/Course";
 import Textbook from "@/components/learnCenter/Textbook";
+import Learnresource from "@/components/learnCenter/Learnresource";
 import Live from "@/components/learnCenter/Live";
 import VideoCourse from "@/components/learnCenter/VideoCourse";
 import Cookies from "js-cookie";
@@ -79,6 +84,7 @@ export default {
     Header,
     Course,
     Textbook,
+    Learnresource,
     Live,
     VideoCourse,
   },
@@ -90,43 +96,7 @@ export default {
       activeIndex: "COURSE", //默认展示精品课程
       navName: "COURSE",
       buy: false,
-      classList: [
-        {
-          name: "Boardofdireelordsadsadasdsadsadsadsadwqdwqfregdsfasfdsafewafeawfdsfewfewfdsasdfasfd",
-          buy: false,
-          price: "19.9",
-        },
-        {
-          name: "Board of direelor",
-          buy: "$ 298.00",
-          price: "19.9",
-        },
-        {
-          name: "Board of direelor",
-          buy: false,
-          price: "19.9",
-        },
-        {
-          name: "Board of direelor",
-          buy: "$ 298.00",
-          price: "19.9",
-        },
-        {
-          name: "Board of direelor",
-          buy: false,
-          price: "19.9",
-        },
-        {
-          name: "Board of direelor",
-          buy: false,
-          price: "19.9",
-        },
-        {
-          name: "Board of direelor",
-          buy: "$ 298.00",
-          price: "19.9",
-        },
-      ],
+      classList: [],
       disSeekShow: false,
       loading: false,
       ImageList: [
@@ -149,6 +119,7 @@ export default {
       ], //轮播图列表 测试
       courseList: null, //课程列表
       TextbookList: null, //教材列表
+      LearnResourceList: null, //学习资源
       SeekName: "",
     };
   },

vue.config.js

@@ -42,7 +42,7 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       // http://mk.wmjh.cn
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://gcls.utschool.cn`,
+        target: `http://gcls.helxsoft.cn`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''