FE_IASF_client/src/pages/researchTeam/index.vue

<template>
  <div class="wrap">
    <div class="single-banner single-banner-overview">
      <img class="banner-img"
           :src="modules[0].form.pic"
           alt="">
      <div class="texts">
        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
      </div>
    </div>
    <div class="content">
      <div class="article">
        <div class="left">
          <div class="search">
            <input type="text"
                   placeholder="请输入搜索内容"
                   v-model="title"
                   clearable>
          </div>

          <div class="team-wrap">
            <div class="letter">
              <span v-for="(letter, i) in letters"
                    :key="i"
                    :class="['item', {active: curLetter == letter}]"
                    @click="letterClick(letter)">{{ letter }}</span>
            </div>

            <ul class="teams">
              <li v-for="(item, i) in articles"
                  :key="i"
                  @click="toArtice(item, modules[1].form)">
                <div class="line">
                  <img src="https://new.iasf.ac.cn/images/researchTeam/3.png"
                       alt=""
                       class="icon">
                  <span class="bold">{{ item.title }}</span>
                  <span class="val">/ {{ item.post }}</span>
                </div>
                <div class="line">
                  <img src="https://new.iasf.ac.cn/images/researchTeam/4.png"
                       alt=""
                       class="icon">
                  <span class="text">专业 {{ item.major }}</span>
                </div>
                <div class="line">
                  <img src="https://new.iasf.ac.cn/images/researchTeam/5.png"
                       alt=""
                       class="icon">
                  <span class="text">荣誉 {{ item.honor }}</span>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <RightColumns />
      </div>
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins/page'
import articleMixins from '@/mixins/article';
import Setting from '@/setting'
import Util from '@/libs/util'
import WOW from 'wow.js'
import RightColumns from '@/components/rightColumns'
import { pinyin } from 'pinyin-pro'
export default {
  mixins: [mixins, articleMixins],
  data () {
    return {
      articles: [],
      allList: [],
      title: '',
      searchTimer: null,
      curLetter: '全部',
      letters: ['全部', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    }
  },
  components: {
    RightColumns
  },
  watch: {
    title: function (val) {
      clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(() => {
        this.filter();
      }, 500);
    }
  },
  mounted () {

  },
  methods: {
    // 获取文章详情
    getInfo () {
      // 预览/详情
      this.$post(this.api[this.preview ? 'getRedisCache' : 'findPage'], Util.rsa(this.id)).then(({ data }) => {
        if (data.length) {
          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
          const json = JSON.parse(this.preview ?
            data :
            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
          this.modules = json
          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)

          // 获取文章列表
          const { column } = json[1].form
          if (column.length) {
            this.$post(this.api.queryArticlesByColumnType, Util.rsa(column[column.length - 1])).then(({ data }) => {
              const articles = Util.removeTag(data)
              this.allList = articles
              this.articles = this.sortList(articles)
            }).catch(err => { })
          }
        }
      }).catch(err => { })
    },
    // 筛选列表
    filter () {
      const { title, curLetter } = this
      this.articles = this.allList.filter(e => {
        return (e.title.includes(title) || e.post.includes(title) || e.major.includes(title) || e.honor.includes(title)) && (curLetter === '全部' || (curLetter !== '全部' && curLetter === pinyin(e.title, { toneType: 'none' })[0].toUpperCase()))
      })
    },
    // 列表按首字母拼音排序
    sortList (list) {
      list.forEach(e => {
        e.sortTitle = pinyin(e.title, { toneType: 'none' })[0].toUpperCase()
      })
      this.letters = ['全部', ...this.letters.filter(e => list.find(n => n.sortTitle == e))]
      return list.sort((a, b) => a.sortTitle.charCodeAt(0) - b.sortTitle.charCodeAt(0))
    },
    // 字母点击回调
    letterClick (e) {
      this.curLetter = e
      this.filter()
    }
  }
};
</script>

<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.content {
    width: 1200px;
}
.article {
    display: flex;
    justify-content: space-between;
    .left {
        width: 75%;
        .search {
            display: inline-flex;
            width: 34%;
            input {
                width: 100%;
                height: 38px;
                padding: 0 15px;
                font-size: 14px;
                color: #333;
                background: #f7f7f7;
                border: 0;
                border-top-left-radius: 6px;
                border-bottom-left-radius: 6px;
                &:focus {
                    outline: none;
                }
            }
        }
    }
    .letter {
        display: flex;
        margin: 30px 0;
        border-radius: 4px;
        .item {
            padding: 5px 10px;
            font-size: 1rem;
            text-align: center;
            color: #999;
            cursor: pointer;
            border: 1px solid #dbdbdb;
            border-right: 0;
            &:first-child {
                border-radius: 4px 0px 0px 4px;
            }
            &:last-child {
                border-right: 1px solid #dbdbdb;
                border-radius: 0 4px 4px 0;
            }
            &:hover {
                color: #fff;
                background: #1583ff;
            }
            &.active {
                color: #fff;
                background: #1583ff;
            }
        }
    }
    .teams {
        display: flex;
        flex-wrap: wrap;
        li {
            width: calc((100% - 10px) / 2);
            padding: 20px 30px;
            margin: 0 10px 10px 0;
            background: url(https://new.iasf.ac.cn/images/researchTeam/2.png) 0 0 / cover no-repeat;
            cursor: pointer;
            &:nth-child(even) {
                margin-right: 0;
            }
        }
        .line {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }
        .icon {
            margin-right: 8px;
        }
        .bold {
            margin-right: 5px;
            font-size: 1.1rem;
            color: #333;
        }
        .val {
            font-size: 1rem;
            color: #999;
        }
        .text {
            font-size: 1rem;
            color: #666;
        }
    }
}
@media (max-width: 1200px) {
    .content {
        width: 95%;
    }
    .article {
        flex-direction: column;
        .left,
        .right {
            width: 100%;
        }
        .left {
            margin-bottom: 30px;
        }
    }
}
@media (max-width: 980px) {
    .article {
        .team-wrap {
            display: flex;
            align-items: flex-start;
        }
        .letter {
            flex-direction: column;
            margin: 16px 10px 0 0;
            .item {
                border: 1px solid #dbdbdb;
                border-top: 0;
                &:first-child {
                    border-top: 1px solid #dbdbdb;
                    border-radius: 4px 4px 0 0;
                }
                &:last-child {
                    border-radius: 0 0 4px 4px;
                }
            }
        }
        .teams {
            flex: 1;
        }
    }
}
@media (max-width: 640px) {
    .article {
        .left {
            .search {
                width: 50%;
            }
        }
        .teams {
            flex-direction: column;
            li {
                width: 100%;
            }
        }
    }
}
</style>