4dkankan_official/src/page/cases/index.vue

<template>
<div :style="{minHeight:scene.length>0?'none':'95vh'}">
  <div class="case-con" :style="{paddingLeft:(split-260)+ 'px'}">
    <div class="case-header">
      <img src="@/assets/images/3dcase_img_tit.png" alt="">
      <div class="case-nav">
        <div class="nav-con">
          <vcenter>
            <div class="list-nav" :style="{width:language==='en'?'800px':'605px'}">
              <div class="list-txt b-title">{{caseType}}</div>
              <router-link class="sub-list b-title" :to="item.to" v-for="(item,i) in navs" :key="i">{{langCases.typeName[item.name]}}</router-link>
            </div>
            <div class="lists">
              <ul class="list-navs">
                <li :class="{active:sortActive===item.id}" v-for="(item,index) in langCases.sort.items" :key="index" @click="sortActive = item.id">
                  <span class="b-label">{{item.name}}</span>
                </li>
              </ul>
              <div class="select" ref="mbMenu">
                <span @click="selectActive=!selectActive" :class="{active:selectActive}">{{langCases.sceneSelected[selected]}}</span>
                <ul :style="{maxHeight:selectActive?'200px':'0',padding:selectActive?'15px 0':'0'}">
                  <li @click="selected= item.id" v-for="(item,i) in langCases.selectType" :key="i">{{item.name}}</li>
                </ul>
              </div>
            </div>
          </vcenter>
        </div>
      </div>
    </div>
  </div>
  <div class="case-body" :style="{marginLeft:(split-(isWide?380:329))+ 'px'}">
    <div class="card" :class="{card_active:scene.length>0}" :style="{animationDelay:`${0.1*(i)}s`}" v-for="(item,i) in scene" :key="i">
      <card :data="item" :style="{marginRight:(i+1)%(isWide?4:3)===0?'0':'50px'}"></card>
    </div>
  </div>
  <div class="paging" v-if="total">
    <vcenter>
      <Paging @clickHandle="pageChange" :current="currentPage" :total="total" :equable="pageSize" />
    </vcenter>
  </div>
</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import {mapState} from 'vuex'
import vcenter from '@/components/vcenter'
import card from '@/components/card'
import Paging from '@/components/Paging'

let typeArr = {
  '房地产': 2,
  '博物馆': 1,
  '家居': 5,
  '餐饮': 4,
  '其他': 0
}

let sceneSTYpe = {
  '全部': null,
  '四维看看 Lite': 1,
  '四维看看 Pro': 4
}

let nav = [
  {
    name: '其他',
    to: {name: 'cases', params: {id: '其他'}}
  },
  {
    name: '餐饮',
    to: {name: 'cases', params: {id: '餐饮'}}
  },
  {
    name: '家居',
    to: {name: 'cases', params: {id: '家居'}}
  },
  {
    name: '博物馆',
    to: {name: 'cases', params: {id: '博物馆'}}
  },
  {
    name: '房地产',
    to: {name: 'cases', params: {id: '房地产'}}
  }
]

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    vcenter,
    card,
    Paging
  },
  data () {
    // 这里存放数据
    return {
      selectActive: false,
      total: 0,
      pageSize: 12,
      currentPage: 1,
      sortActive: 1,
      scene: [],
      isWide: Math.round(devicePixelRatio * 100) === 100 ? window.innerWidth > 1697 : !(Math.round(devicePixelRatio * 100) >= 120),
      selected: '筛选设备',
      caseType: null
    }
  },
  // 监听属性 类似于data概念
  computed: {
    ...mapState({
      langCases: state => state.language.home.cases,
      language: state => state.language.current,
      split: state => state.ui.navDivision
    }),
    navs () {
      let temp = []
      nav.map(item => {
        if (item.name !== this.$route.params.id) {
          temp.push(item)
        }
      })
      return temp
    }
  },
  // 监控data中的数据变化
  watch: {
    currentPage () {
      this.getData()
    },
    selected () {
      this.selectActive = false
      this.getData()
    },
    sortActive () {
      this.currentPage = 1
      this.selectActive = false
      this.getData()
    },
    langCases (newVal) {
      this.caseType = newVal.typeName[this.$route.params.id]
    },
    '$route.params.id': {
      deep: true,
      immediate: true,
      handler (newVal) {
        this.currentPage = 1
        this.caseType = this.langCases.typeName[newVal]
        this.selectActive = false
        this.getData()
      }
    }
  },
  // 方法集合
  methods: {
    pageChange (data) {
      this.currentPage = data
    },
    async getData () {
      window.scrollTo(0, 0)
      let params = {
        pageSize: this.pageSize,
        sceneType: typeArr[this.caseType],
        sceneInterest: this.sortActive,
        pageNum: this.currentPage,
        sceneScheme: sceneSTYpe[this.selected]
      }
      let result = await this.$http({
        method: 'post',
        data: params,
        url: '/scene/loadScene'
      })
      let data = result.data.data
      this.scene = []
      setTimeout(() => {
        this.scene = data.list
      }, 0)
      this.total = data.total
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    document.addEventListener('click', (e) => {
      if (this.$refs.mbMenu) {
        if (!this.$refs.mbMenu.contains(e.target)) {
          this.selectActive = false
        }
      }
    })
    window.addEventListener('resize', () => {
      let DPR = Math.round(devicePixelRatio * 100)
      let grt120 = DPR >= 120
      this.isWide = DPR === 100 ? window.innerWidth > 1697 : !grt120
    })
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>