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

<template>
  <div class="wrapper">
    <div class="layout" v-if="!isMobile">
      <div class="list-con">

        <div class="l-h">
          <img :src="`${$cdn}images/icon-story.png`" alt="" />
          <p>{{params.name}}</p>
        </div>

        <div class="l-type">
          
          <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>

        <div class="l-con">

          <template  v-if="list.length>0">
            <Card  @handleItem="handleItem" 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 v-if="total" class="paging" :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 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>{{params.name}}</p>
        </div>

        <div class="l-type">
          <div class="select-block">
            <span class="txt-bold" id="label-block" @click="blockVisible = !blockVisible">楼体 <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-block" v-if="blockVisible">
              <ul>
                <li
                  :class="{ active: item.id === b_active }"
                  v-for="(item, i) in blocks"
                  @click="b_active = item.id; blockVisible = 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>

        <div class="l-con">

          <template  v-if="list.length>0">
            <Card  @handleItem="handleItem" 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 v-if="total" class="paging" :class="{ pagingshow: total }">
          <Paging
            @clickHandle="pageChange"
            :current="currentPage"
            :total="total"
            :equable="pageSize"
          />
        </div> -->
      </div>
    </div>
  </div>
</template>

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

let blocks = [
  {
    name: "东楼",
    id: 1
  },
  {
    name: "西楼",
    id: 2
  }
];

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



export default {
  components: {
    Paging,
    Card
  },
  computed:{
    params(){
      return this.$route.params.id
    }
  },
  data() {
    return {
      isMobile: browser.mobile,
      area,
      blocks,
      list:[],
      a_active: '',
      b_active: 1,
      l_active: '',
      t_active: '',
      total: 100,
      pageSize: 8,
      currentPage: 1,
      type:'roam',
      block: null,
      blockVisible: false,
      areaVisible: false
    };
  },
  methods: {
    pageChange(num) {
      this.currentPage = num
    },
    handleItem(item){
       this.$showBroadcast({
        link: {
          type: 'roam',
          item
        },
      })
    },
    async getList(){
      let res = await this.$http({
        method:'post',
        data:{
          block: this.isMobile ? this.b_active : this.params.id,
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          searchKey: "",
          typeId: '',
          zone: this.a_active
        },
        url:`/api/web/roam/list`
      })
      this.list = res.data.list
      this.total = res.data.total
    },
    refresh(){
      this.currentPage===1?(this.getList()):(this.currentPage = 1)
    }
  },
  watch:{
    a_active(){
      this.refresh()
    },
    b_active(){
      this.refresh()
    },
    l_active(){
      this.refresh()
    },
    t_active(){
      this.refresh()
    },
    currentPage(){
      this.getList()
    }
  },
  mounted(){
    this.getList()
    if(this.isMobile) {
      this.pageSize = this.total;
    }
  }
};
</script>
<style lang="less" scoped>
@import '../../assets/css/globalVars.less';

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.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;
    }
    .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;
  }
}
.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 { // tags to select floors
      text-align: center;
      width: 90%;
      margin: 20px auto 0;
      display: flex;
      justify-content: space-between;
      .area,
      .louti,
      .select-block,
      .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-block {
          position: fixed;
            top: 18vh;
            left: 5vw;
          }
          #select-block {
            top: 21vh;
            left: 5vw;
          }
          #label-area {
            position: fixed;
            top: 18vh;
            left: 25vw;
          }
          #select-area {
            top: 21vh;
            left: 25vw;
          }
      }
    }
    .l-con {
      position: fixed;
      top: 25vh;
      left: 5vw;
      width: 93vw;
      height: 65vh;
      padding: 0;
      box-sizing: border-box;
      text-align: left;
      font-size: 0;
      overflow-y: scroll;
      .no-result {
        margin-top: 150px;
      }
    }
    .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;
  }
}
</style>