learning-system-portal/src/views/grateful/GratefulHomePage.vue

<template>
  <div>
    <!-- 教师赋能 -->
    <div class="xindex-content">
      <div class="modules xcontent2">
        <div class="xcontent2-main">
          <div class="gratefulNav">
            <div class="navImg">
              <img src="../../assets/images/grateful/famousTeacher.png" alt="">
            </div>
            <div class="navNotice">
              <div id="fixd-box">
                <div class="portal-ranking ranking-bg">
                  <div style="display: flex;justify-content: space-between;">
                    <p class="ranking-title">通知</p>
                    <router-link to="/grateful/gratefulNotice" style="font-size: 14px;">查看更多</router-link>
                  </div>
                  <ul class="ranking-data">
                    <li v-for="(item, index) in 6" :key="index"
                      style="cursor: pointer;margin-top:10px;line-height: 22px;">
                      <router-link :to="'/case/detail?id=' + item.id" style="display: flex;align-items: center;">
                        <span class="portal-right-text blue-one">
                          <img :src="getPic(index)" alt="">
                        </span>
                        <div class="portal-title-desc"
                          style="flex: 1;font-size: 14px;display: flex;justify-content: space-between;">
                          <span class="title-line-ellipsis " style="width: 130px;">哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
                          <span>2023-09-09</span>
                        </div>
                      </router-link>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="navTool">
              <div id="fixd-box">
                <div class="portal-ranking ranking-bg1">
                  <div style="display: flex;justify-content: space-between;">
                    <p class="ranking-title">工具下载</p>
                    <router-link to="/grateful/toolDown" style="font-size: 14px;">查看更多</router-link>
                  </div>
                  <ul class="ranking-data">
                    <li v-for="(item, index) in 6" :key="index" style="cursor: pointer;margin-top:10px;line-height: 22px;"
                      class="title-line-ellipsis">
                      <router-link :to="'/case/detail?id=' + item.id">
                        <span class="portal-right-text orange-one" v-if="index == 0">
                          <img :src="`${webBaseUrl}/images/list-01.png`" alt="">
                        </span>
                        <span class="portal-right-text orange-tow" v-if="index == 1">
                          <img :src="`${webBaseUrl}/images/list02.png`" alt="">
                        </span>
                        <span class="portal-right-text orange-three" v-if="index == 2">
                          <img :src="`${webBaseUrl}/images/list03.png`" alt="">
                        </span>
                        <span class="portal-right-text" v-if="index == 3">
                          <img :src="`${webBaseUrl}/images/list04.png`" alt="">
                        </span>
                        <span class="portal-right-text" v-if="index == 4">
                          <img :src="`${webBaseUrl}/images/list05.png`" alt="">
                        </span>
                        <span class="portal-right-text" v-if="index == 5">
                          <img :src="`${webBaseUrl}/images/listblue06.png`" alt="">
                        </span>
                        <span class="portal-title-desc" style="font-size: 14px;">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
                      </router-link>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 教师赋能 -->
    <div class="xindex-content">
      <div class="modules xcontent2">
        <div class="xcontent2-main">
          <!--内容块-->
          <div class="modules-title xindex-main">
            <span class="modules-text">教师赋能</span>
            <span class="more">
              <router-link to="/grateful/teacherEmpowerment">查看更多</router-link>
            </span>
          </div>
          <div class="modules-list">
            <!--内容列表内容-->
            <div v-for="(course, ccidx) in courseList.list" :key="'cc' + ccidx" class="xindex-course"
              style="position: relative">
              <div style="position: absolute; right: 25px; bottom: 72px">
                <interactBar nodeWidth="20px" :courseExclusive="true" :type="1" :data="course" :comments="false"
                  :praises="false" :shares="false" :views="false">
                </interactBar>
              </div>
              <a @click="toCourseDetail(course)">
                <div class="xindex-course-image">
                  <course-image :course="course"></course-image>
                  <span v-if="course.type == 20 || 10" class="course-type">录播课</span>
                </div>
                <div style="width: 80%" :title="course.name" class="course-title portal-title-tow two-line-ellipsis">
                  {{ course.name }}
                </div>
                <div class="course-author">
                  <div class="course-author-left">
                    {{ course.authorInfo.name }}

                    <span class="study-num">{{ formatNum(course.studys) }}人学习</span>
                  </div>
                  <div style="display: flex">
                    <div v-if="course.score">
                      <span class="course-score-value" style="margin-left: 10px">{{ toScore(course.score) }}分</span>
                    </div>
                    <div v-else class="course-score-no">未评分</div>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="float-tools" @click="() => (gratefulVisible = !gratefulVisible)">
      <div class="content">
        <img src="../../assets/images/grateful/suggestion.png" alt="" />
        <span>给点意见</span>
      </div>
    </div>
    <!-- 意见 -->
    <el-dialog :close-on-click-modal="false" :visible.sync="gratefulVisible" :append-to-body="true" @closed="closeDlg"
      title="感谢您百忙之中给我们提交您宝贵的意见~">
      <div class="dialogContent">
        <el-form :model="form">
          <el-form-item>
            <el-input type="textarea" placeholder="请输入内容......" v-model="form.textarea" class="textarea"></el-input>
          </el-form-item>
          <el-form-item>
            <div style="display: flex; justify-content: center">
              <el-button style="width: 100px;" @click="closeDlg">取消</el-button>
              <el-button style="width: 100px;" type="primary">确认</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import apiCourseStudy from "@/api/modules/courseStudy.js";
import portalFloatTools from "@/components/PortalFloatTools.vue";
import apiCourse from "@/api/modules/coursePortal.js";
import interactBar from "@/components/Portal/interactBar.vue";
import courseImage from "@/components/Course/courseImage.vue";
import { toScore, formatUserNumber } from "@/utils/tools.js";
import apiIndex from "@/api/phase2/index.js";
export default {
  name: "Grateful",
  components: {
    portalFloatTools,
    interactBar,
    courseImage,
  },
  data() {
    return {
      form: {
        textarea: "",
      },
      gratefulVisible: false,
      formatNum: formatUserNumber,
      isNext: true,
      toScore,
      // 列表
      courseList: {
        num: 12,
        orderType: 2,
        list: [],
      }
    };
  },
  mounted() {
    this.getCourseData(1);
  },
  computed: {
    ...mapGetters(["userInfo", "studyTaskCount"]),
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  methods: {
    getPic(index) {
      return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
    },
    closeDlg() {
      this.gratefulVisible = false
    },
    toCourseDetail(item) {
      //二期调整，直接改成一个地址
      //return this.webBaseUrl + '/course/detail?id=' + item.id;
      let $this = this;
      if (item.type == 10) {
        //return this.webBaseUrl + "/course/studyindex?id=" + item.id;
        //console.log("直接进入学习页面");
        this.$router.push("/course/studyindex?id=" + item.id);
      } else if (item.type == 20) {
        apiCourseStudy.hasSignup(item.id).then((rs) => {
          if (rs.status == 200) {
            //return $this.webBaseUrl + "/course/studyindex?id=" + item.id;
            this.$router.push("/course/studyindex?id=" + item.id);
          } else {
            //return $this.webBaseUrl + "/course/detail?id=" + item.id;
            this.$router.push("/course/detail?id=" + item.id);
          }
        });
        //return $this.webBaseUrl + "/course/detail?id=" + item.id;
      }
    },
    getCourseData(pageIndex) {
      this.isNext = false;
      let { orderType, num } = this.courseList;
      let course = {
        pageSize: 6,
        device: 1,
        orderField: orderType == 1 ? "" : "studys",
        orderAsc: false,
        topOrder: true,
        pageIndex: pageIndex,
      };

      apiIndex.courselist(course).then((res) => {
        if (res.status == 200 && res.result.length > 0) {
          let courseIds = [];
          res.result.forEach((item) => {
            item.authorInfo = {
              aid: "",
              name: "",
              orgInfo: "",
              avatar: "",
              code: "",
              sex: null,
            };
            courseIds.push(item.id);
          });
          this.loadCouserTeacher(res.result, courseIds);
          this.courseList.list = res.result;
        } else {
          console.log("加载课程信息失败:" + res.error);
        }
      });
    },
    loadCouserTeacher(list, ids) {
      // 先查课程关联教师iD
      apiCourse.getTeacherByCourseIDs(ids).then((cres) => {
        if (cres.status == 200) {
          let userIds = [];
          list.forEach((item, index) => {
            cres.result.some((courseTeahcer) => {
              if (courseTeahcer.courseId == item.id) {
                if (courseTeahcer.teacherIds) {
                  userIds.push(courseTeahcer.teacherIds[0]);
                  item.authorInfo.aid = courseTeahcer.teacherIds[0];
                  item.authorInfo.name = courseTeahcer.names[0];
                  if (item.authorInfo.name == "BOE教师") {
                    item.authorInfo.name = "";
                  }
                }
                return true;
              } else {
                return false;
              }
            });
          });
          //that.loadCourseAuthorInfo(list, userIds);
        }
      });
    }
  },
};
</script>

<style scoped lang="scss">
.title-line-ellipsis {
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  box-sizing: border-box;
  word-break: break-all;
  overflow: hidden;
}

.gratefulNav {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-gap: 60px;

  .navImg {
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.textarea {
  width: 100%;

  ::v-deep .el-textarea__inner {
    min-height: 300px !important;
  }
}

.team {
  display: grid;

  .teamImg {
    width: 749px;
    height: 478px;
  }
}

.float-tools {
  position: fixed;
  right: 0;
  bottom: 50%;
  z-index: 999;

  .content {
    width: 152px;
    height: 55px;
    display: flex;
    align-items: center;
    background: linear-gradient(86deg, #00c8ff 0%, #167cff 100%);
    border-radius: 100px 0px 0px 100px;
    padding: 20px;

    img {
      width: 20px;
      height: 20px;
    }

    span {
      margin-left: 10px;
      color: #fff;
      font-size: 20px;
    }
  }
}

.xindex-course-image:hover {
  transform: scale(1.3) translateY(-15px);
  transition: all 0.6s;
}

.bannbox {
  width: 100%;
  height: 520px;
  text-align: center;
  filter: blur(5px);
  z-index: -1;
  background-size: 100% 100%;
}

::v-deep.swiper-slide .games .swiper-slide-active {
  text-align: center !important;
}

#container {
  position: absolute;
  height: 520px;
  top: 0;
  width: 100%;
}

.banner-img {
  height: 520px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: (-50%, -50%);
}

.course-banner {
  height: 520px;

  .swiper-button-prev {
    height: 38px;
    padding: 0 16px;
    background: rgba($color: #000000, $alpha: 0.8) url("../../assets/images/icon/ban-left.png") no-repeat;
    background-size: 12px 18px;
    background-position: 16px 10px;
    bottom: 66px;
    border-radius: 19px 0 0 19px;
  }

  .swiper-button-next {
    height: 38px;
    // right: 52.65%;
    bottom: 66px;
    top: auto;
    padding: 0 16px;
    background: rgba($color: #000000, $alpha: 0.1) url("../../assets/images/icon/ban-right.png") no-repeat;
    background-size: 12px 18px;
    background-position: 6px 10px;
    border-radius: 0 19px 19px 0;
  }

  .swiper-pagination-bullets {
    // background: #000;
    left: 60px;
    bottom: 66px;
  }

  ::v-deep .swiper-pagination {
    line-height: 25px;
    height: 32px;
    border-radius: 19px;
    //  background: rgba($color: #000000, $alpha: 0.1);
    width: auto;
    left: 45%;
    padding: 0 20px;
    border-radius: 19px;

    .swiper-pagination-bullet {
      position: relative;
      width: 25px;
      height: 5px;
      margin-top: 10px;
      background: #fff;
      opacity: 1 !important;
      // background: rgba($color: #fff, $alpha: 0.5);
      border-radius: 2px;
    }

    .swiper-pagination-bullet::before {
      content: "";
      position: absolute;
      top: -20px;
      bottom: -20px;
      left: -2px;
      right: -2px;
    }

    .swiper-pagination-bullet-active {
      height: 5px;
      opacity: 1 !important;
      margin-top: 10px;
      width: 25px;
      background: #387df7;
      // background: rgba($color: #fff, $alpha: 0.8);
      border-radius: 2px;
    }

    .swiper-container {
      // background-color: rgba($color: #000000, $alpha: 0.2);
    }
  }
}

.three-line-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  -webkit-line-clamp: 3;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.two-line-ellipsis {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  box-sizing: border-box;
}

.one-line-ellipsis {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  box-sizing: border-box;
}

.course-card {
  padding-bottom: 22px;
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;

  .course-image-box {
    position: relative;

    .course-type {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 60px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      background-color: #f99000;
      border-radius: 2px 4px 2px 14px;
      font-size: 12px;
      color: #ffffff;
      -moz-user-select: none;
      /*火狐*/
      -webkit-user-select: none;
      /*webkit浏览器*/
      -ms-user-select: none;
      /*IE10*/
      -khtml-user-select: none;
      /*早期浏览器*/
      user-select: none;
    }

    .course-type-title {
      position: absolute;
      top: 5px;
      right: 0px;
      width: 90px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #ffffff;
      -moz-user-select: none;
      /*火狐*/
      -webkit-user-select: none;
      /*webkit浏览器*/
      -ms-user-select: none;
      /*IE10*/
      -khtml-user-select: none;
      /*早期浏览器*/
      user-select: none;
    }

    .course-flag {
      height: 26px;
      position: absolute;
      top: 15px;
      right: 0;
    }

    .course-tip {
      width: 100%;
      height: 26px;
      position: absolute;
      bottom: 0;
      padding: 0 10px;
      color: #fff;
      font-size: 14px;

      .course-study-count {
        float: left;
      }

      .course-time {
        float: right;
      }
    }
  }

  .course-title {
    margin: 16px 0 16px 0;
    height: 44px;
    -moz-user-select: none;
    /*火狐*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /*早期浏览器*/
    user-select: none;
  }

  .course-title-box {
    display: flex;
  }

  .course-author {
    display: flex;
    justify-content: space-between;

    .course-author-left {
      font-size: 14px;
      color: #6e7b84;
      -moz-user-select: none;
      /*火狐*/
      -webkit-user-select: none;
      /*webkit浏览器*/
      -ms-user-select: none;
      /*IE10*/
      -khtml-user-select: none;
      /*早期浏览器*/
      user-select: none;
    }
  }

  .study-num {
    font-size: 14px;
    color: #6e7b84;
    // margin-left: 12px;
    -moz-user-select: none;
    /*火狐*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /*早期浏览器*/
    user-select: none;
  }

  .course-score {
    padding: 10px 15px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .course-score-star {
      flex: 1;
    }
  }
}

// 内容部分
.modules {
  margin-top: 20px;
  display: flex;

  .modules-title {
    .modules-text {
      height: 28px;
      font-size: 20px;
      font-family: PingFangSC-Semibold-, PingFangSC-Semibold;
      font-weight: 700;
      color: #333333;
    }

    .recommend {
      vertical-align: text-bottom;
      height: 26px;
    }

    .quyer-tag {
      margin-left: 15px;

      a {
        color: #333333;
        font-size: 14px;
        margin: 0 15px;
        display: inline-block;
        text-decoration: none;
        outline: none;
      }

      .current {
        width: 44px;
        height: 26px;
        background: #387df7;
        border-radius: 4px;
        color: #fff;
        line-height: 26px;
        text-align: center;
      }
    }

    .more {
      float: right;
      margin-top: 7px;
      margin-right: 30px;
      color: #333333;
      font-size: 14px;
    }
  }

  .modules-list {
    margin-top: 30px;

    .case-card {
      margin-bottom: 15px;

      .case-info-image-box {
        position: relative;

        .case-info {
          width: 385px;

          .case-info-title {
            font-size: 18px;
            color: #343434;
            margin-bottom: 5px;

            .case-info-time {
              font-size: 12px;
              color: #999999;
              float: right;
              margin-top: 8px;
            }
          }

          .case-info-summary {
            font-size: 12px;
            color: #666666;
            height: 82px;
            line-height: 18px;
          }
        }

        img {
          width: 160px;
          height: 105px;
          position: absolute;
          top: 5px;
          right: 0;
        }
      }

      .case-info-box {
        .case-info {
          .case-info-title {
            font-size: 18px;
            color: #343434;
            margin-bottom: 5px;

            .case-info-time {
              font-size: 12px;
              color: #999999;
              float: right;
              margin-top: 8px;
            }
          }

          .case-info-summary {
            font-size: 12px;
            color: #666666;
            height: 82px;
            line-height: 18px;
          }
        }
      }

      .case-other-info {
        height: 40px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
      }
    }

    .article-card {
      background: #fff;
      border-radius: 8px;

      .article-card-left {
        .article-card-box {
          .article-info-image-box {
            border-radius: 4px;

            .article-info {
              height: 400px;

              .article-info-title {
                font-size: 16px;
                color: #00253e;
                font-weight: 500;
                margin-bottom: 5px;
                margin-top: 5px;
              }

              .article-info-summary {
                font-size: 14px;
                color: #6e7b84;
                height: 160px;
                line-height: 22px;
              }
            }

            img {
              width: 470px;
              height: 330px;
            }
          }
        }
      }

      .article-card-right {
        flex: 1;
        margin-left: 28px;

        .article-card-box {
          margin-bottom: 16px;
          padding-bottom: 16px;

          &:last-child {
            margin-bottom: 0px;
            padding-bottom: 0px;
          }

          .article-info-box {
            .article-info {
              display: flex;

              .article-image {
                width: 140px;
                height: 105px;
                margin-top: 10px;
                margin-left: 20px;
              }

              .article-body {
                flex: 1;

                .article-info-title {
                  font-size: 18px;
                  color: #343434;
                  margin-bottom: 5px;

                  .article-info-time {
                    font-size: 12px;
                    color: #999999;
                    float: right;
                    margin-top: 8px;
                    font-weight: 500;
                  }
                }

                .article-info-summary {
                  padding-top: 9px;
                  font-size: 14px;
                  color: #666666;
                  height: 43px;
                  line-height: 18px;
                  font-weight: 500;
                  margin-bottom: 20px;
                }
              }
            }
          }
        }

        .article-card-box:not(:last-child) {
          border-bottom: 1px solid #ededed;
        }
      }

      .article-other-info {
        display: flex;
      }
    }

    .qa-card {
      box-sizing: border-box;
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
      border-radius: 8px;
      background: #fff;

      &:last-child {
        margin-right: 0;
      }

      .qa-top {
        & span:first-child {
          height: 24px;
          background: rgba($color: #387df7, $alpha: 0.05);
          border-radius: 4px;
          font-size: 12px;
          color: #387df7;
        }

        span {
          color: #6e7b84;
        }
      }

      .qa-center {
        position: relative;
        background: rgba($color: #04243c, $alpha: 0.04);
        border-radius: 4px;

        .qa-views {
          position: absolute;
          color: #6e7b84;
        }
      }

      .qa-char {
        display: flex;
      }
    }
  }
}
</style>