GCLS_Page_TC/src/views/teacher-dev/Viewmore.vue

<template>
  <!-- 查看更多 -->
  <div class="Viewmore">
    <div class="header">
      <Header />
      <div class="shade"></div>
    </div>
    <HeaderOne :changeKeycode="changeKeycode" :keycode="keycode" :text="text" />
    <div class="main" v-loading="loading">
      <!-- 
      prefix-icon="el-icon-user "-->
      <div class="select">
        <div
          :class="seleIndex == i ? 'sele' : ''"
          v-for="(item, i) in seleList"
          :key="i + item"
          @click="seletEvent(item, i)"
        >
          <span>
            {{ item.name }}
          </span>
          <img
            v-if="seleIndex != i"
            src="../../assets/teacherdev/updown3.png"
            alt=""
          />
          <img
            v-if="seleIndex == i && item.isUp"
            src="../../assets/teacherdev/updown1.png"
            alt=""
          />
          <img
            v-if="seleIndex == i && !item.isUp"
            src="../../assets/teacherdev/updown2.png"
            alt=""
          />
        </div>
        <div class="selectpeople" @click="selePeople">
          <img src="../../assets/teacherdev/selepeople.png" alt="" />
          <el-autocomplete
            class="inline-input"
            v-model="TeacherName"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            :trigger-on-focus="false"
            @select="handleSelect"
          ></el-autocomplete>
        </div>
      </div>
      <div class="list" v-if="DataList">
        <template v-if="DataList.data">
          <Teaching type="1" :classList="DataList.data" />
          <div class="paging">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :current-page="pageNum"
              :page-size="pageSize"
              :total="DataList.total"
            >
            </el-pagination>
            <span> | </span>
            <span>
              <span class="number">{{ Math.ceil(DataList.total / 10) }}</span>
              页
            </span>
            <span> | </span>
            <span>
             每页
              <span class="number"> {{ pageSize }} </span>
              <span> 个 </span>
            </span>
            <span>|</span>
            <span> 跳转 </span>
            <span>
              <el-input
                @input="toPageChange"
                v-model="gotoPage"
                :maxlength="1"
                class="gotoPage"
                type="text"
              />
            </span>
            <span>页</span>
          </div>
        </template>
        <template v-else>
          <div class="nomore">
            <img src="../../assets/teacherdev/noSeekResult.png" alt="" />
            <p class="p1">对不起，我找不到相关内容。</p>

            <!-- <p class="p2">Try the following keywords</p> -->
            <!-- <div class="keywords">
              <span>live lesson</span>
              <span>live lesson</span>
              <span>live lesson</span>
            </div> -->
          </div>
        </template>
      </div>
      <!-- 
          :total="CourseList.total"
             {{ Math.ceil(CourseList.total / 20) }}
       -->
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "@/components/Header";
import HeaderOne from "@/components/teacher-dev/HeaderOne";
import Teaching from "@/components/teacher-dev/Teaching";
import { materiallist, teacherlist } from "@/api/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Header,
    HeaderOne,
    Teaching,
  },
  props: {},
  data() {
    //这里存放数据
    return {
      seleIndex: null, //筛选索引
      seleList: [
        {
          name: "名称",
          isUp: null, //是不是升序
        },
        {
          name: "发布时间",
          isUp: null, //是不是升序
        },
        {
          name: "浏览次数",
          isUp: null, //是不是升序
        },
      ],
      selePeole: "", //筛选的名字
      gotoPage: "", //前往某一页
      DataList: null,
      pageNum: 1,
      pageSize: 10,
      tag: [],
      SeekSuggest: [
        { value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" },
        {
          value: "Hot honey 首尔炸鸡（仙霞路）",
          address: "上海市长宁区淞虹路661号",
        },
        {
          value: "新旺角茶餐厅",
          address: "上海市普陀区真北路988号创邑金沙谷6号楼113",
        },
        { value: "泷千家(天山西路店)", address: "天山西路438号" },
        {
          value: "胖仙女纸杯蛋糕（上海凌空店）",
          address: "上海市长宁区金钟路968号1幢18号楼一层商铺18-101",
        },
        { value: "贡茶", address: "上海市长宁区金钟路633号" },
        {
          value: "豪大大香鸡排超级奶爸",
          address: "上海市嘉定区曹安公路曹安路1685号",
        },
        {
          value: "茶芝兰（奶茶，手抓饼）",
          address: "上海市普陀区同普路1435号",
        },
        { value: "十二泷町", address: "上海市北翟路1444弄81号B幢-107" },
        { value: "星移浓缩咖啡", address: "上海市嘉定区新郁路817号" },
        { value: "阿姨奶茶/豪大大", address: "嘉定区曹安路1611号" },
        { value: "新麦甜四季甜品炸鸡", address: "嘉定区曹安公路2383弄55号" },
      ],
      keycode: "",
      TeacherName: "",
      orderType: "", // DESC降序 ASC升序
      orderColumn: "", //1 名称  2 发布时间 3 浏览次数
      text: "",
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 模糊查询搜索
    querySearch(queryString, cb) {
      queryString = queryString.trim();
      let results;
      teacherlist({
        pageNum: 1,
        pageSize: 10,
        teacherList: [`${queryString}`],
      })
        .then((res) => {
          if (res.data.data) {
            results = res.data.data;
          } else {
            results = [];
          }
          // 调用 callback 返回建议列表的数据
          cb(results);
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    // 模糊查询选择 根据选择的老师进行查询学习资料  需要把当前页数改成1  因为可能当前不在第一页
    handleSelect(item) {
      this.pageNum = 1;
      this.getdata();
    },
    changeKeycode(val) {
      this.keycode = val;
      this.pageNum = 1;
      this.getdata();
    },
    //   选择名称时间浏览次数排序
    seletEvent(item, i) {
      if (typeof item.isUp == "boolean") {
        if (this.seleIndex != i) {
          item.isUp = false;
        } else {
          item.isUp = !item.isUp;
        }
        this.seleIndex = i;
      } else {
        item.isUp = false;
        this.seleIndex = i;
      }
      switch (item.name) {
        case "名称":
          this.orderColumn = "1";
        case "发布时间":
          this.orderColumn = "2";
        case "浏览次数":
          this.orderColumn = "3";
      }
      if (item.isUp) {
        this.orderType = "ASC";
      } else {
        this.orderType = "DESC";
      }
      this.getdata();
    },
    // 选择作者
    selePeople() {
      this.seleIndex = null;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // 点击跳转到某一页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getdata();
    },
    // 输入跳转到某一页
    toPageChange() {
      this.gotoPage = this.gotoPage.replace(/[^\d]/g, ""); //使用空字符串去替换非数字的字符
      if (this.gotoPage > Math.ceil(this.DataList.total / 10)) {
        return;
      } else if (this.gotoPage != this.pageNum) {
        this.pageNum = this.gotoPage * 1;
        this.getdata();
      }
    },
    getdata() {
      this.loading = true;
      materiallist({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        keyWord: this.keycode,
        tagList: this.tag,
        orderType: this.orderType,
        orderColumn: this.orderColumn,
        teacherList: this.TeacherName ? [`${this.TeacherName}`] : [],
      })
        .then((res) => {
          this.DataList = res.data;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.$route.query.classify) {
      if (this.$route.query.classify == "TEXTBOOK") {
        this.text = "教材";
      }
      if (this.$route.query.classify == "TEACHING") {
        this.text = "教学";
      }
      this.tag.push(this.$route.query.classify);
    }
    if (this.$route.query.keyWord) {
      this.text = "搜索结果";
      this.keycode = this.$route.query.keyWord;
    }
    this.getdata();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.Viewmore {
  .header {
    height: 64px;
    background: url("../../assets/teacherdev/Homebg2.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    .shade {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      color: #fff;
      font-weight: bold;
      font-size: 18px;
      justify-content: space-around;
      align-items: center;
      .el-menu-demo {
        background: rgba(0, 0, 0, 0);
        li:hover {
          background: none;
        }
        li {
          background: none;
        }
      }
    }
  }
  .main {
    background: #e5e5e5;
    min-height: 568px;
    padding-top: 24px;
    padding-bottom: 20px;
    .select {
      width: 1200px;
      margin: 0 auto;
      margin-bottom: 24px;
      display: flex;
      > div {
        cursor: pointer;
        font-size: 16px;
        color: #000000;
        border: 1px solid rgba(0, 0, 0, 0.15);
        background: #fff;
        border-radius: 8px;
        padding: 0 16px;
        height: 40px;
        line-height: 40px;
        margin-right: 24px;
        display: flex;
        align-items: center;
        span {
          margin-right: 8px;
        }
        img {
          width: 24px;
        }
      }
      .selectpeople {
        cursor: default;
        border: none;
        position: relative;
        img {
          position: absolute;
          left: 16px;
        }
      }
      .sele {
        color: #ffffff;
        background: #ff9900;
      }
    }
    .paging {
      // position: fixed;
      // bottom: 0;
      display: flex;
      align-items: center;
      height: 150px;
      padding-left: 170px;
      color: darkgrey;
      .number {
        color: black;
      }
      span {
        margin-left: 10px;
      }
      .gotoPage {
        width: 40px;
        text-align: center;
      }
    }
    .nomore {
      // margin-top: 80px;
      text-align: center;
      .p1 {
        font-weight: 600;
        font-size: 32px;
        color: #2c2c2c;
        margin-top: 20px;
      }
      .p2 {
        font-size: 28px;
        color: #2c2c2c;
        margin-top: 20px;
      }
      .keywords {
        span {
          display: inline-block;
          // width: 129px;
          // height: 55px;
          padding: 16px;
          background: rgba(44, 44, 44, 0.1);
          border-radius: 31px;
          color: rgba(44, 44, 44, 0.5);
          font-size: 18px;
          // line-height: 55px;
          margin: 20px 20px 20px 20px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.selectpeople {
  border: none;
  position: relative;
  .el-input__inner {
    width: 80%;
    margin-left: 30px;
    border: none;
    height: 100%;
  }
}
</style>