huaqiaocheng-h5/src/views/office.vue

<!-- home -->
<template>
  <div class="office-index">
    <pure-image :bg-image="require('@/assets/office/1.png')"></pure-image>
    <office-image class="office-navi" @goto="handleGoto" />
    <div v-for="(item, index) in list" :key="item.image">
      <yz-modal :visible="visible[index]" class="office-modal">
        <pure-image :bg-image="item.image"></pure-image>
        <div class="back-sign" @click="cancelShow(index)">
          <img :src="item.backSign" alt />
        </div>
      </yz-modal>
    </div>
    <yz-modal :visible="visible[2]" class="apartment-modal">
      <swiper-image :list="featureList"></swiper-image>
      <div class="back-sign" @click="cancelShow(2)">
        <img :src="backSignImg" alt />
      </div>
    </yz-modal>
    <yz-modal :visible="visible[3]" class="apartment-modal">
      <swiper-image :list="houseList"></swiper-image>
      <div class="back-sign" @click="cancelShow(3)">
        <img :src="backSignImg" alt />
      </div>
    </yz-modal>
    <div class="back-sign index-back" @click="handleGotoIndex(index)">
      <img :src="backSignImg" alt />
    </div>
  </div>
</template>

<script>
import { share } from '@/utils/wx'

const backSignImg = require('@/assets/office/1-2.png')
const backSignImg2 = require('@/assets/images/apartment/backSign-2.png')

const shareImg = `${location.origin}${location.pathname}wx_share.jpg`

export default {
  components: {
    PureImage: () => import('./components/PureImage.vue'),
    SwiperImage: () => import('./components/SwiperImage.vue'),
    // ApartmentNavi: () => import('./components/ApartmentNavi.vue'),
    OfficeImage: () => import('./components/OfficeImage.vue')
  },
  data() {
    return {
      backSignImg,
      backSignImg2,
      visible: Array(5).fill(false),
      list: [
        {
          image: require('@/assets/office/2-1.png'),
          color: '#f0f0f0',
          backSign: backSignImg
        },
        {
          image: require('@/assets/office/3-1.png'),
          color: '#f0f0f0',
          backSign: backSignImg2
        },
        {
          image: require('@/assets/office/4-1.png'),
          color: '#f0f0f0',
          backSign: backSignImg
        },
        {
          image: require('@/assets/office/5-1.png'),

          color: '#f0f0f0',
          backSign: backSignImg
        },
        {
          image: require('@/assets/office/6-1.png'),

          color: '#f0f0f0',
          backSign: backSignImg
        }
      ],
      houseList: [
        {
          image: require('@/assets/office/5-1.png'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/office/5-2.png'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/office/5-3.png'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/office/5-4.png'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/office/5-5.png'),
          color: '#f0f0f0'
        }
      ],
      featureList: [
        {
          image: require('@/assets/office/4-1.png'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/office/4-2.png'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/office/4-3.png'),
          color: '#f0f0f0'
        }
      ]
    }
  },

  mounted() {
    share({ title: '华侨城欢乐滨江可售物业', link: window.location.href, imgUrl: shareImg })
  },

  methods: {
    handleGoto(inx) {
      // inx 是从1开始的
      this.$set(this.visible, inx - 1, true)
    },
    cancelShow(inx) {
      this.$set(this.visible, inx, false)
    },
    handleGotoIndex(inx) {
      this.$router.push({ path: '/' })
    }
  }
}
</script>

<style lang="scss" scoped>
.office-index {
  height: 100%;
  position: relative;
  overflow: hidden;

  .office-modal {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
  }

  .office-navi {
    position: absolute;
    width: 100%;
    height: 40%;
    bottom: 0;
    left: 0;
  }

  .back-sign {
    position: absolute;
    z-index: 500;
    right: 10px;
    bottom: -10px;
    width: 76px;
    height: 68px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>