HM21St_Page_User/src/views/search/searchDetail.vue

<template>
  <div class="search-detail" v-loading="loading">
    <Header
      :headerBg="'#299772'"
      :headerBorder="'#30A47D'"
      :userBg="'rgba(0, 0, 0, 0.08)'"
      :LoginNavIndex="-1"
    />
    <div class="banner">
      <a class="goback" @click="$router.go(-1)"
        ><i class="el-icon-arrow-left"></i>返回</a
      >
      <div class="banner-inner">
        <img src="../../assets/icon-search-small.png" />
        <SearchInput
          class="search-compent"
          :searchQuery="searchQuery"
          :selectIndex="selectIndex"
          @changeSelectIndex="changeSelectIndex"
        />
      </div>
    </div>
    <div class="main">
      <!-- <ul class="typelist">
            <li class="typeitem" :class="[typeIndex===indexT?'active':'']" v-for="(itemT,indexT) in typeList" :key="indexT" @click="handleTypeIndex('typeIndex',indexT)">
                <svg-icon :icon-class="itemT.img" className="icon-img"></svg-icon>
                <span class="OPPOSans">{{itemT.name}}</span>
                <b class="OPPOSans">{{itemT.value}}</b>
            </li>
        </ul> -->
      <div class="main-inner">
        <!-- <ul v-if="typeList && typeList.length > 0" class="gradelist">
          <li
            :class="['gradeitem', indeG === typeIndex ? 'active' : '']"
            v-for="(itemG, indeG) in typeList"
            :key="indeG"
            @click="handleTypeIndex('typeIndex', indeG)"
          >
            {{ itemG.name + " " + itemG.value }}
          </li>
        </ul> -->
        <ul v-if="gradeList && gradeList.length > 0" class="gradelist">
          <li
            :class="['gradeitem', itemG.id === gradeIndex ? 'active' : '']"
            v-for="(itemG, indeG) in gradeList"
            :key="indeG"
            @click="handleTypeIndex('gradeIndex', itemG.id)"
          >
            {{ itemG.name }}
          </li>
        </ul>
        <ul v-if="yearList && yearList.length > 0" class="gradelist">
          <li
            :class="['gradeitem', itemG.value === yearIndex ? 'active' : '']"
            v-for="(itemG, indeG) in yearList"
            :key="indeG"
            @click="handleTypeIndex('yearIndex', itemG.value)"
          >
            {{ itemG.label }}
          </li>
        </ul>
        <p class="timeconsume">
          {{ courseTotal }}条结果，耗时
          {{ takeTime >= 1000 ? takeTime / 1000 + "s" : takeTime + "ms" }}。
        </p>
        <div class="searchChangebox">
          <div
            class="searchChange"
            :class="[item.sortName == sortField ? 'active' : '']"
            v-for="(item, indexC) in changeList"
            :key="indexC"
          >
            <span>
              {{ item.name }}
            </span>
            <div :class="['sort']">
              <div>
                <svg-icon
                  icon-class="up"
                  className="icon-up"
                  :class="[item.sort == 'up' ? 'active' : '']"
                  @click="SortEvent('up', item.name, item.sortName)"
                ></svg-icon>
              </div>
              <div>
                <svg-icon
                  icon-class="down"
                  className="icon-down"
                  :class="[item.sort == 'down' ? 'active' : '']"
                  @click="SortEvent('down', item.name, item.sortName)"
                ></svg-icon>
              </div>
            </div>
          </div>
        </div>
        <template v-if="searchList && searchList.length > 0">
          <div
            class="search-item"
            v-for="(itemS, indexS) in searchList"
            :key="indexS"
            @click="handleLink(itemS)"
          >
            <el-image :src="itemS.iss_cover_url" :fit="'cover'"> </el-image>
            <div class="search-inner">
              <div class="top">
                <h2 v-html="itemS.title"></h2>
                <span v-html="itemS.author"></span>
              </div>
              <div class="content" v-html="itemS.content"></div>
              <div class="bottom">
                <span v-if="itemS.iss_no">{{ itemS.iss_no }}</span>
                <span v-if="itemS.study_phase_name">{{
                  itemS.study_phase_name
                }}</span>
                <span v-if="itemS.wc">长度：{{ itemS.wc }}</span>
                <span v-if="itemS.wdc">词数：{{ itemS.wdc }}</span>
              </div>
            </div>
          </div>
          <el-pagination
            background
            :current-page="currentPage"
            :page-size="page_capacity"
            :page-sizes="[10, 20, 30, 40, 50]"
            :total="courseTotal"
            layout="sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </template>
        <div class="nodata" v-else>
          <img src="../../assets/nodata.png" />
          <p>找不到文件</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../components/Header.vue";
import SearchInput from "./components/SearchInput.vue";
import BookCard from "@/components/common/BookCard.vue";
import { getLogin } from "@/api/ajax";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, SearchInput, BookCard },
  props: {},
  data() {
    //这里存放数据
    return {
      searchQuery: this.$route.query.content ? this.$route.query.content : "",
      config: this.$route.query.headerConfig
        ? decodeURIComponent(this.$route.query.headerConfig)
        : "",
      LoginNavIndex: 0,
      userBg: "rgba(0, 0, 0, 0.24)",
      headerBorder: "#5C5C5C",
      headerBg: "#1F1F1F",
      selectIndex: this.$route.query.selectIndex
        ? this.$route.query.selectIndex * 1
        : 0,
      typeIndex: 0,
      gradeList: [
        {
          name: "全部",
          id: null,
        },
      ],
      yearList: [
        {
          label: "全部",
          value: null,
        },
      ],
      gradeIndex: null,
      yearIndex: null,
      sortType: 0,
      sortField: "",
      changeList: [
        {
          name: "长度",
          sort: "",
          sortName: "wc",
        },
        {
          name: "词数",
          sort: "",
          sortName: "wdc",
        },
      ],
      searchList: [],
      currentPage: 1, // 当前页码
      page_capacity: 10, // 每页条数
      courseTotal: 0, // 数据总条数
      timer: null,
      takeTime: 0, //耗时
      loading: false,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {
    searchQuery: {
      handler(val, oldVal) {
        if (val !== oldVal) {
          this.currentPage = 1;
          this.searchArticle();
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  //方法集合
  methods: {
    handleTypeIndex(type, index) {
      this[type] = index;
      this.currentPage = 1;
      this.searchArticle();
    },
    SortEvent(type, name, sortName) {
      let sort = "";
      this.changeList.forEach((item) => {
        if (item.name == name) {
          item.sort = type;
          sort = type;
        } else {
          item.sort = "";
        }
      });
      if (sort == "down") {
        this.sortType = 1;
      } else {
        this.sortType = 0;
      }
      this.sortField = sortName;
      this.currentPage = 1;
      this.searchArticle();
    },
    // 跳转文章
    handleLink(item) {
      let url = this.config + "&&&搜索";
      this.$router.push({
        path: "/articleDetail",
        query: {
          headerConfig: encodeURIComponent(url),
          iss_id: item.iss_id,
          id: item.art_id,
        },
      });
    },
    // 切换每页条数
    handleSizeChange(val) {
      this.currentPage = 1;
      this.page_capacity = val;
      this.searchArticle();
    },
    // 切换页码
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchArticle();
    },

    // 查询搜索内容
    searchArticle() {
      this.loading = true;
      this.takeTime = 0;
      this.timer = setInterval(() => {
        this.takeTime += 20;
      }, 20);
      let orderObj = null;
      if (this.sortField) {
        orderObj = {
          name: this.sortField,
          asc: !this.sortType,
        };
      }
      let MethodName = "/PaperServer/Client/Search/SearchArticle";
      let data = {
        word: this.searchQuery,
        page_size: this.page_capacity,
        page_no: this.currentPage,
        only_my_bought: this.selectIndex,
        study_phase: this.gradeIndex,
        release_year: this.yearIndex,
        order_bys: orderObj ? [orderObj] : [],
      };
      getLogin(MethodName, data)
        .then((res) => {
          clearInterval(this.timer);
          this.loading = false;
          if (res.status === 1) {
            this.courseTotal = res.data.total;
            this.searchList = res.data.results;
            this.yearList = [
              {
                value: null,
                label: "全部",
              },
            ];
            let yearList = [];
            if (res.data.exData && res.data.exData.years) {
              res.data.exData.years.forEach((nowYear) => {
                let obj = {
                  value: nowYear,
                  label: nowYear,
                };
                yearList.push(obj);
              });
            }
            this.yearList = this.yearList.concat(yearList);
            if (res.data.exData && res.data.exData.studyPhases) {
              let gradeList = [
                {
                  id: null,
                  name: "全部",
                },
              ];
              this.gradeList = gradeList.concat(res.data.exData.studyPhases);
            }
          }
        })
        .catch(() => {
          this.loading = false;
          clearInterval(this.timer);
        });
    },
    changeSelectIndex(val) {
      this.selectIndex = val;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.config) {
      let arr = this.config.split("&&&");
      this.LoginNavIndex = arr[0] * 1;
      this.userBg = arr[1];
      this.headerBorder = arr[2];
      this.headerBg = arr[3];
    }
    this.searchArticle();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {
    clearInterval(this.timer);
  },
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.search-detail {
  width: 100%;
  .banner {
    width: 100%;
    height: 88px;
    background: #299772;
    position: relative;
    .goback {
      position: absolute;
      left: 24px;
      top: 24px;
      width: 96px;
      height: 40px;
      display: block;
      text-align: center;
      cursor: pointer;
      color: #ffffff;
      line-height: 40px;
      .el-icon-arrow-left {
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        margin: 0 4px;
      }
    }
    .banner-inner {
      width: 868px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      position: relative;
      > img {
        width: 40px;
        margin-right: 24px;
        position: absolute;
        left: 50%;
        top: 24px;
        margin-left: -434px;
      }
      .search-compent {
        position: absolute;
        top: 16px;
      }
    }
  }
  .main {
    width: 100%;
    background: #ffffff;
    max-height: calc(100vh - 160px);
    overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    .typelist {
      margin: 32px 0;
      padding: 0;
      list-style: none;
      display: flex;
      justify-content: space-between;
      li {
        width: 200px;
        height: 48px;
        border-radius: 30px;
        padding: 12px 24px;
        display: flex;
        align-items: center;
        cursor: pointer;
        border: 1px solid #e5e6eb;
        &.active {
          border-color: #3459d2;
          background: #eef3ff;
          .icon-img,
          span {
            color: #175dff;
          }
          b {
            color: #ed5f00;
          }
        }
        svg {
          width: 24px;
          height: 24px;
          margin-right: 16px;
        }
        span {
          color: #2f3742;
          font-weight: 700;
          font-size: 16px;
          line-height: 24px;
          flex: 1;
        }
        b {
          color: #929ca8;
          font-weight: 700;
          font-size: 16px;
          line-height: 24px;
        }
      }
    }
    .main-inner {
      width: 1200px;
      margin: 0 auto;
      // border-radius: 8px;
      padding: 34px 40px;
      ul {
        list-style: none;
        display: flex;
        flex-flow: wrap;
        padding: 0;
        margin: 0;
        li {
          padding: 8px 15px;
          cursor: pointer;
          margin: 6px 16px 6px 0;
          font-weight: 400;
          font-size: 16px;
          line-height: 22px;
          color: #2f3742;
          &.active {
            background: #e7eeff;
            border-radius: 4px;
            color: #175dff;
          }
        }
      }
      .searchChangebox {
        margin-top: 13px;
        display: flex;
        > div {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 8px 15px;
          height: 38px;
          margin-right: 16px;
          border-radius: 4px;
          &.active {
            background: #e7eeff;
            > span {
              color: #175dff;
            }
            .sort {
              > div {
                svg {
                  &.active {
                    color: #175dff;
                  }
                }
              }
            }
          }
          > span {
            font-weight: 400;
            font-size: 16px;
            line-height: 22px;
            color: #2f3742;
            margin-right: 8px;
          }
          .sort {
            cursor: pointer;
            height: 20px;
            > div {
              font-size: 0;
              svg {
                width: 11px;
                height: 11px;
                color: #c2c2c2;
                padding: 3px 2px 2px 2px;
                &.icon-down {
                  height: 9px;
                  padding: 0 2px 2px 2px;
                }
              }
            }
          }
        }
      }
      .timeconsume {
        margin: 21px 0 0;
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        color: rgba(0, 0, 0, 0.4);
      }
      .search-item {
        margin: 24px 0 50px 0;
        width: 100%;
        display: flex;
        cursor: pointer;
        .el-image {
          width: 110px;
          height: 110px;
          margin-right: 24px;
        }
        .search-inner {
          flex: 1;
          .top {
            display: flex;
            h2 {
              font-weight: 700;
              font-size: 16px;
              line-height: 24px;
              color: #2f3742;
              margin: 0 16px 0 0;
              font-family: "Rubik";
            }
            span {
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #929ca8;
            }
          }
          .content {
            margin: 8px 0;
            word-break: break-word;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* 超出几行省略 */
            overflow: hidden;
            color: #2f3742;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            height: 48px;
          }
          .bottom {
            span {
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #929ca8;
              margin-right: 16px;
            }
          }
        }
      }
      .search-list {
        display: flex;
        flex-flow: wrap;
        width: 100%;
        .search-items {
          width: 200px;
          margin: 24px 30px 24px 0;
          flex-shrink: 0;
          &.margin0 {
            margin-right: 0;
          }
          .el-image {
            width: 200px;
            height: 280px;
            flex-shrink: 0;
            margin: 0;
          }
          .periodicalNumber {
            font-weight: 400;
            font-size: 14px;
            line-height: 22px;
            color: #2f3742;
            margin: 12px 12px 4px 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .date {
            font-size: 12px;
            line-height: 20px;
            color: #929ca8;
            margin: 0 12px 12px 12px;
          }
          .price {
            margin: 0 12px;
            align-items: flex-end;
            display: flex;
            :nth-child(1) {
              font-weight: 700;
              font-size: 14px;
              line-height: 22px;
              color: #ec5e41;
            }
            :nth-child(2) {
              font-weight: 400;
              font-size: 12px;
              line-height: 20px;
              text-decoration-line: line-through;
              color: #929ca8;
              margin-left: 8px;
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.search-detail {
  .lightbg {
    background: #fff500;
  }
}
</style>