hfysite/components/supportCom/downloads.vue

<template>
  <div class="content">
    <div class="downloads">
      <div class="download-types noScroll">
        <div class="searchType">
          <input type="text" placeholder="在此处搜索文件" v-model="searchKey" @input="filterTypeChangeHandle" >
          <span class="close" @click="clearSearchText" >
            x
          </span>
        </div>
        <div class="d-type"
             v-for="item in filterTypes"
              :key="item.key"
              @click="switchType(item.key)"
        >
          {{item.title}}
        </div>
      </div>
      <div class="download-type-items">
        <div class="title">
          <span class="text-m text-b">[</span>
          <span class="mark-gold">{{nowTitle}}</span>
          <span class="text-b">]</span>
          资料下载
        </div>
        <div class="d-type-item"
             v-for="(item,i) in subItems"
             :key="nowKey+'_'+i"
        >
          <a :href="item.src" target="_blank">
            <span class="file">
              <svg-icon class="icon" :icon-class="item.icon?item.icon:'unknownFile'"></svg-icon>
              {{item.title}}
            </span>
            <span class="time">
              {{timestampToTime(item.add_time)}}
            </span>
          </a>
        </div>
      </div>

    </div>
    <div class="downloads-more">
      <div class="more-text">
        没有找到您需要的资料？
        请联系我们，我们将竭诚为您服务。
      </div>
    </div>
  </div>
</template>

<script>
import langMap from "@/map/langMap";
import {timestampToTime} from "@/until/time";

export default {
  name: "downloads",
  props: {
    lang:{
      default: langMap.lang.cn
    },
    downloads:{
      default: []
    }
  },
  data(){
    return {
      langType: langMap.lang,
      searchKey: '',
      filterTypes: [],
      subItems: [],
      nowTitle: '',
      nowKey: '',
      waitTimer: null,
    }
  },
  created(){
    this.filterTypes = this.downloads;
    this.switchType(this.downloads[0].key);
  },
  watch:{
    downloads(){
      this.filterTypeChangeHandle();
    }
  },
  methods:{
    timestampToTime(){
      return timestampToTime(...arguments);
    },
    switchType(key){
      if (this.nowKey !== key){
        this.nowKey = key;
        let items = this.downloads.find(item=>item.key === key);
        this.subItems = items?items.subItems:[];
        this.nowTitle = `${items?items.title:''}`;
      }
    },
    filterTypeChangeHandle(){
      // 等待700毫秒,防抖
      if (this.waitTimer){
        clearTimeout(this.waitTimer);
      }
      this.waitTimer = setTimeout(()=>{
        this.waitTimer = null;
        let key = this.searchKey;
        if (key){
          // 忽略大小写
          // key = key.toLowerCase();
          this.filterTypes = this.downloads.filter(item=> item.title.indexOf(key) !== -1);
        }else{
          this.filterTypes = this.downloads;
        }
      },700);

    },
    clearSearchText(){
      this.searchKey = '';
      this.filterTypeChangeHandle();
    }
  },

}
</script>

<style scoped>
.downloads{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.download-types{
  width: 20%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-right: 1px solid #e5e5e5;
  overflow: auto;
}
.download-types .searchType{
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 0.95rem;
}
.download-types .searchType input{
  width: 100%;
  height: 30px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  padding: 0 10px;
  outline: none;
  position: relative;
}
.download-types .searchType .close{
  width: 20px;
  height: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  cursor: pointer;
  position: absolute;
  right: 10px;
  color: #c54949;
}
.download-types .searchType .close:hover{
  color: #ff0000;
  font-size: 1.15rem;

}

.d-type{
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
}
.d-type:hover{
  background-color: #f5f5f5;
}
.download-type-items{
  width: 80%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px;
}
.download-type-items .title{
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #333333;
}
.download-type-items .d-type-item{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.download-type-items .d-type-item a{
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  text-decoration: none;
  color: #333333;
  cursor: pointer;
  padding: 0 10px;
  box-sizing: border-box;
}
.download-type-items .d-type-item a:hover{
  background-color: #ce5e5e;
  color: #ffffff;
}
.download-type-items .d-type-item a .file{
  width: calc(100% - 200px);
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.download-type-items .d-type-item a .file .icon{
  width: 20px;
  height: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.download-type-items .d-type-item a .time{
  width: 200px;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
</style>