SH_museum/sh_museum/src/pages/list/index.vue

<template>
  <div class="wrapper">
    <div class="mobileLayout" v-if="isMobile">
      <img class="back-icon" @click="$router.push({path:'/'})" :src="`${$cdn}images/back-icon.png`" alt="">
      <div class="list-con">
        <div class="l-h">
          <img :src="`${$cdn}images/icon-story.png`" alt="" />
          <p>部件赏析</p>
        </div>
        <div class="l-type">



          <div class="louti">
            <span class="txt-bold" id="label-louti" @click="loutiVisible = !loutiVisible">楼体 <svg viewBox='0 0 140 140' width='12' height='12' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg></span>
            <div class="select-box" id="select-louti" v-if="loutiVisible">
              <ul>
                <li
                  :class="{ active: item.id === l_active }"
                  v-for="(item, i) in louti"
                  @click="l_active = item.id; loutiVisible = false"
                  :key="i"
                >
                  {{ item.name }}
                </li>
              </ul>
            </div>
          </div>

          <div class="area">
            <span class="txt-bold" id="label-area" @click="areaVisible = !areaVisible">区域 <svg viewBox='0 0 140 140' width='12' height='12' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg></span>
            <div class="select-box" id="select-area" v-if="areaVisible">
              <ul>
                <li
                  :class="{ active: item.id === a_active }"
                  v-for="(item, i) in area"
                  @click="a_active = item.id; areaVisible = false"
                  :key="i"
                >
                  {{ item.name }}
                </li>
              </ul>
            </div>
          </div>

          <div class="types">
            <span class="txt-bold" id="label-types" @click="typesVisible = !typesVisible">类型 <svg viewBox='0 0 140 140' width='12' height='12' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg></span>
            <div class="select-box" id="select-types" v-if="typesVisible">
              <ul>
                <li
                  :class="{ active: item.id == t_active }"
                  @click="t_active = item.id; typesVisible = false"
                  v-for="(item, i) in types"
                  :key="i"
                >
                  {{ item.name }}
                </li>
              </ul>
            </div>
          </div>



        </div>
        <div class="l-con">
          <template  v-if="list.length>0">
            <Card @handleItem="handleItem(item)" v-for="(item, i) in list" :item="item" :key="i" />
          </template>
          <template v-else>
            <div class="no-result">
              <img :src="`${$cdn}images/search-icon.png`" alt />
              <span>暂时没有内容呢~</span>
            </div>
          </template>
        </div>
        
      </div>
      
    </div>

    <div class="layout"  v-if="!isMobile">
      <div class="list-con">
        <div class="l-h">
          <img :src="`${$cdn}images/icon-story.png`" alt="" />
          <p>部件赏析</p>
        </div>
        <div class="l-type">
          <div class="louti">
            <span class="txt-bold">楼体：</span>
            <ul>
              <li
                :class="{ active: item.id === l_active }"
                v-for="(item, i) in louti"
                @click="l_active = item.id"
                :key="i"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <div class="area">
            <span class="txt-bold">区域：</span>
            <ul>
              <li
                :class="{ active: item.id === a_active }"
                v-for="(item, i) in area"
                @click="a_active = item.id"
                :key="i"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <div class="types">
            <span class="txt-bold">类型：</span>
            <ul>
              <li
                :class="{ active: item.id == t_active }"
                @click="t_active = item.id"
                v-for="(item, i) in types"
                :key="i"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
        </div>
        <div class="l-con">
          <template  v-if="list.length>0">
            <Card @handleItem="handleItem(item)" v-for="(item, i) in list" :item="item" :key="i" />
          </template>
          <template v-else>
            <div class="no-result">
              <img :src="`${$cdn}images/search-icon.png`" alt />
              <span>暂时没有内容呢~</span>
            </div>
          </template>
        </div>
        <div class="paging" v-if="total" :class="{ pagingshow: total }">
          <Paging
            @clickHandle="pageChange"
            :current="currentPage"
            :total="total"
            :equable="pageSize"
          />
        </div>
      </div>
      <div class="qihuan" @click="$router.push({path:'/story'})">
        <img :src="`${$cdn}images/qh-icon.png`" alt />
        <p>海报模式</p>
      </div>
    </div>
  </div>
</template>

<script>
import browser from "@/utils/browser.js";
import Paging from "@/components/paging";
import Card from "@/components/card";

let area = [
  {
    name: "全部",
    id:  '',
  },
  {
    name: "室内",
    id: 'in',
  },
  {
    name: "室外",
    id: 'out',
  }
];

let louti = [
  {
    name: "全部",
    id:  '',
  },
  {
    name: "东楼",
    id: 1,
  },
  {
    name: "西楼",
    id: 2,
  },
  {
    name: "钟楼",
    id: 3,
  }
];

let list = [
  {
    name: "全部",
    id: "",
  },
  {
    name: "墙饰面",
    id: "",
  },
  {
    name: "廊道构件",
    id: "",
  },
  {
    name: "栏柱构件",
    id: "",
  },
  {
    name: "雕饰构件",
    id: "",
  },
  {
    name: "墙面构件",
    id: "",
  },
  {
    name: "楼梯构件",
    id: "",
  },
  {
    name: "楼梯构件",
    id: "",
  },
];

export default {
  components: {
    Paging,
    Card
  },
  data() {
    return {
      isMobile: browser.mobile,
      area,
      types:[],
      list,
      louti,
      a_active: '',
      l_active: '',
      t_active: this.$route.query.id ||'',
      total: 100,
      pageSize: 8,
      currentPage: 1,
      type:'part',
      loutiVisible: false,
      areaVisible: false,
      typesVisible: false
    };
  },
  methods: {
    handleItem(){
      this.$router.push({
        name:'Parts',
        query:{
          block: this.l_active,
          typeId: this.t_active,
          zone: this.a_active
        }
      })
    },
    pageChange(num) {
      this.currentPage = num
    },
    async getType(){
      let res = await this.$http({
        type:'get',
        url:`/api/web/nav/${this.type}`
      })
      res.data.unshift({
        id:'',
        name:'全部'
      })
      this.types = res.data
    },
    async getList(){
      let res = await this.$http({
        method:'post',
        data:{
          block: this.l_active,
          pageNum: this.currentPage,
          pageSize: this.isMobile ? 100 : this.pageSize,
          searchKey: "",
          typeId: this.t_active,
          zone: this.a_active
        },
        url:`/api/web/part/list`
      })
      this.list = res.data.list
      this.total = res.data.total

      console.log(this.pageSize);
    },
    refresh(){
      this.currentPage===1?(this.getList()):(this.currentPage = 1)
    }
  },
  watch:{
    a_active(){
      this.refresh()
    },
    l_active(){
      this.refresh()
    },
    t_active(){
      this.refresh()
    },
    currentPage(){
      this.getList()
    }
  },
  mounted(){
    this.getType()
    this.getList()
  }
};
</script>
<style lang="less" scoped>
@import '../../assets/css/globalVars.less';

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mobileLayout {
  width: 100%;
  position: relative;
  .back-icon {
    position: fixed;
    top: 40px;
    left: 20px;
  }
  .list-con {
    width: 100%;
    padding-top: 5vh;
    text-align: center;
    .l-h {
      color: @theme;
      font-family: "SY-bold";
      font-weight: bolder;
      font-size: 0;
      img {
        width: 110px;
      }
      p {
        font-size: 32px;
      }
    }
    .l-type {
      text-align: left;
      width: 50%;
      margin: 20px 5vw 0;
      display: flex;
      justify-content: space-between;
      .area,
      .louti,
      .types {
        margin-bottom: 20px;
        display: flex;
        align-items: baseline;
        .select-box {
          position: fixed;
          background-color: #f5ede2;
          border-radius: 8px;
          z-index: 10;
          ul {
            display: block;
            font-size: 0;
            li {
              display: block;
              padding: 2px 6px;
              // margin: 0 6px;
              cursor: pointer;
              text-align: left;
              color: #382e2c;
              font-size: 16px;
            }
            .active {
              background: @theme;
              color: #c9a27b;
            }
          }
        }
        #label-louti {
          position: fixed;
          top: 18vh;
          left: 5vw;
        }
        #label-area {
          position: fixed;
          top: 18vh;
          left: 25vw;
        }
        #label-types {
          position: fixed;
          top: 18vh;
          left: 45vw;
        }
        #select-louti {
          top: 21vh;
          left: 5vw;
        }
        #select-area {
          top: 21vh;
          left: 25vw;
        }
        #select-types {
          top: 21vh;
          left: 45vw;
        }
      }
    }
    .l-con {
      position: fixed;
      top: 25vh;
      left: 5vw;
      width: 93vw;
      height: 55vh;
      padding: 0;
      box-sizing: border-box;
      text-align: left;
      font-size: 0;
      overflow-y: scroll;
    }
    .paging {
      // border-left: #e5e5e5 1px solid;
      height: 100%;
      margin-bottom: 40px;
      transition: all 0.4s ease;
      & /deep/ .p-layout {
        text-align: center;
        margin-top: 10px;
      }
      & /deep/ .p-layout a:not(:last-child) {
        margin: 10px 14px;
        display: inline-block;
        font-weight: 500;
        cursor: pointer;
        user-select: none;
        position: relative;
        transition: color 0.3s;
        color: @theme;
        font-size: 16px;
      }
      & /deep/ .p-layout a:last-child {
        position: relative;
        top: -5px;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-align: center;
        align-items: center;
        height: 22px;
        padding: 0 9px;
      }
      & /deep/ .p-layout a:last-child::before,
      & /deep/ .p-layout a:last-child::after {
        content: "";
        display: inline-block;
        will-change: transform;
        transition: transform 0.3s;
      }

      & /deep/ .p-layout a:not(:last-child).active::after,
      & /deep/ .p-layout a:not(:last-child).active,
      & /deep/ .p-layout a:not(:last-child):hover,
      & /deep/ .p-layout a:not(:last-child):hover::after {
        color: @sub-theme;
        transform: scaleX(1);
        text-align: center;
      }

      & /deep/ .p-layout a:not(:last-child).active{
        position: relative;
        width: 29px;
        font-size: 14px;
          &::after{
          position: absolute;
          bottom: -2px;
          right: 0;
          content: '';
          width: 100%;
          height: 40px;
          background: url('@{cdn}page-active.png') no-repeat center center;
          z-index: -1;
        }
      }
    }
  }
  .qihuan{
    position: fixed;
    right: 250px;
  }
}

.layout {
  width: calc(100% - 200px);
  position: relative;
  .list-con {
    width: 100%;
    padding-top: 80px;
    text-align: center;
    .l-h {
      color: @theme;
      font-family: "SY-bold";
      font-weight: bolder;
      font-size: 0;
      img {
        width: 110px;
      }
      p {
        font-size: 32px;
      }
    }
    .l-type {
      text-align: center;
      width: 76%;
      margin: 20px auto 0;
      display: flex;
      justify-content: space-between;
      .area,
      .louti,
      .types {
        margin-bottom: 20px;
        display: flex;
        align-items: baseline;
        ul {
          display: inline-block;
          font-size: 0;
          li {
            display: inline-block;
            padding: 2px 6px;
            margin: 0 6px;
            cursor: pointer;
            text-align: center;
            color: #382e2c;
            font-size: 16px;
          }
          .active {
            background: @theme;
            color: #c9a27b;
          }
        }
      }
    }
    .l-con {
      width: 76%;
      margin: 40px auto 0;
      box-sizing: border-box;
      text-align: left;
      font-size: 0;
      min-height: 58vh;

    }
    .paging {
      // border-left: #e5e5e5 1px solid;
      height: 100%;
      margin-bottom: 40px;
      transition: all 0.4s ease;
      & /deep/ .p-layout {
        text-align: center;
        margin-top: 10px;
      }
      & /deep/ .p-layout a:not(:last-child) {
        margin: 10px 14px;
        display: inline-block;
        font-weight: 500;
        cursor: pointer;
        user-select: none;
        position: relative;
        transition: color 0.3s;
        color: @theme;
        font-size: 16px;
      }
      & /deep/ .p-layout a:last-child {
        position: relative;
        top: -5px;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-align: center;
        align-items: center;
        height: 22px;
        padding: 0 9px;
      }
      & /deep/ .p-layout a:last-child::before,
      & /deep/ .p-layout a:last-child::after {
        content: "";
        display: inline-block;
        will-change: transform;
        transition: transform 0.3s;
      }

      & /deep/ .p-layout a:not(:last-child).active::after,
      & /deep/ .p-layout a:not(:last-child).active,
      & /deep/ .p-layout a:not(:last-child):hover,
      & /deep/ .p-layout a:not(:last-child):hover::after {
        color: @sub-theme;
        transform: scaleX(1);
        text-align: center;
      }

      & /deep/ .p-layout a:not(:last-child).active{
        position: relative;
        width: 29px;
        font-size: 14px;
          &::after{
          position: absolute;
          bottom: -2px;
          right: 0;
          content: '';
          width: 100%;
          height: 40px;
          background: url('@{cdn}page-active.png') no-repeat center center;
          z-index: -1;
        }
      }
    }
  }
  .qihuan{
    position: fixed;
    right: 250px;
  }
}

@media screen and (min-width: 500px) and (max-width: 1400px) {
.layout{
    .list-con{
       .l-type {
          text-align: center;
          width: 90%;
          display: block;
          margin: 10px auto 0;
          .area,
          .louti,
          .types {
            margin-bottom: 5px;
            display: flex;
            align-items: baseline;
            ul {
              display: inline-block;
              font-size: 0;
              li {
                display: inline-block;
                padding: 2px 6px;
                margin: 0 6px;
                cursor: pointer;
                text-align: center;
                color: #382e2c;
                font-size: 16px;
              }
              .active {
                background: @theme;
                color: #c9a27b;
              }
            }
          }
        }
        .l-con{
          width: 90%;
          margin: 30px auto 0;
        }
    }
  }
}

@media screen and (max-width: 500px) {
  .item {
    width: 42.4vw;
    margin-right: 5vw;
    margin-bottom: 5vw;
    &:nth-of-type(2n) {
      margin-right: 0;
    }
    // &:nth-of-type(4n){
    //   margin-right: @margin;
    // }
  }
}
</style>