zhengzhou_university/web/src/views/collection/pc.vue

<template>
  <div class="collection" v-show="hasLoad">
    <img class="bg" :src="require('@/assets/images/collect_bg.png')">
    <img class="close" @click="$bus.$emit('toggleCollect',false)" :src="require('@/assets/images/icon/close.png')">
    <div class="bar1">
      <div class="search-con">
          <input v-model="key" @keyup.enter="getCollection" placeholder="搜索文物" type="text">
          <img class="shugang" :src="require('@/assets/images/icon/shugeng.png')" alt="">
          <img @click="getCollection" :src="require('@/assets/images/search_w.png')" alt="">
      </div>
    </div>

    <ul class="typelist">
      <li  :class="{active:typeActive==''}"  @click="typeActive=''">全部</li>
      <li :class="{active:item.id==typeActive.id}" @click="typeActive=item" :key="i" v-for="(item,i) in typeLi">{{item.name}}</li>
    </ul>
    <collection :data="list" @toggle="handleToggle"/>
    <div v-if="list.length" class="paging">
          <Paging
            v-if="paging.total"
            style="text-align: center;"
            :paging="paging"
            @changeCurrent="pageChange"
          />
    </div>
  </div>
</template>

<script>
import collection from '@/components/collection';
import Paging from "@/components/pagination";

let W = window.innerWidth

export default {
  components:{
    collection,
    Paging
  },
  props:['seachKey'],
  data(){
    return {
      isShowDraw:false,
      isShow:true,
      key:this.seachKey,
      paging: {
        pageSize: W>1400?8:6,
        pageNum: 1,
        total: 0,
        showSize: W>1400?8:6,
        current: 1
      },
      typeLi:[
        {
          id:1,
          name:'第一展区  序厅'
        },
        {
          id:2,
          name:'第二展区  历史沿革厅'
        },
        {
          id:3,
          name:'第三展区  亲切关怀厅'
        },
        {
          id:4,
          name:'第四展区  光辉历程厅'
        },
        {
          id:5,
          name:'第五展区  将星闪耀厅'
        },
        {
          id:6,
          name:'第六展区  丰碑永铸厅'
        }
      ],
      typeActive:'',
      list:[],
      hasLoad:false
    }
  },
  computed:{
    
  },
  watch:{
    typeActive(){
      this.getCollection()
    },
    paging:{
      deep:true,
      handler:function () {
        this.getCollection()
      }
    }
  },
  methods:{
    async getTypeLi(){
      let result = await this.$http({
        method: 'get',
        url: '/api/web/zoneList'
      })
      if (result.code != 0) {
        return this.$showAlert({
                    tips:'获取展区列表失败'
                })
      }
      this.typeLi = result.data
      this.getCollection()
    },
    async getCollection() {
      let params = {
          pageNum:this.paging.current,
          pageSize: this.paging.pageSize,
          searchKey: this.key,
          zoneId:this.typeActive&&this.typeActive.id
      }

      let result = await this.$http({
        method: 'post',
        data: params,
        url: '/api/web/goodsList'
      })
      if (result.code != 0) {
        return this.$showAlert({
                    tips:'获取文物列表失败'
                })
      }
      this.list = result.data.list
      this.paging.total = result.data.total
      this.hasLoad = true
    },
    handleToggle(data){
      this.isShow = data
    },
    pageChange(val){
      console.log(val);
      this.paging.current = val
    }
  },
  mounted(){
    this.getTypeLi()
  }
}
</script>

<style lang="less" scoped>
.collection{
  margin: 136px auto 0;
  width: 80%;
  min-height: 74vh;
  padding: 40px 80px;
  position: relative;
  .bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .close{
    position: absolute;
    bottom: 50px;
    right: 50px;
    width: 20px;
    cursor: pointer;
    z-index: 9999;
  }
  .bar1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: -70px;
    left: 0;
    width: 100%;
    text-align: center;
    .search-con{
        padding: 10px;
        background: rgba(0, 0, 0, 0.6);
        position: relative;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 6px;
        margin-top: 10px;
        margin: 0 auto;
        width: 40%;
        >input{
            background:none;  
            outline:none;  
            border:none;
            text-align: center;
            width: calc(100% - 20px);
            &::placeholder{
                color: rgba(255, 255, 255, 0.55);
            }
        }
        .shugang{
          width: 1px;
          height: 100%;
          cursor: auto;
        }
        >img{
            width: 20px;
            margin-left: 10px;
            cursor: pointer;
        }
    }
  }
  .typelist{
    display: flex;
    align-items: center;
    width: 100%;
    overflow-x: auto;
    overflow: hidden;
    >li{
      margin-right: 20px;
      padding-right: 20px;
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      border-right: 1px solid rgba(255, 255, 255, 0.55);
      &:last-of-type{
        border-right: none;
        padding-right: 0;
        margin-right: 0;
      }
    }
    .active{
      color: rgba(252, 214, 123, 1);
    }
  }
  .con{
    width: 100%;
    margin-top: 30px;
    max-height: 57vh;
    height: 57vh;
    overflow-y: auto;
  }
  .paging{
    margin-top: 20px;
  }
}

</style>