realtorEasier-webSite/pc/src/page/layout/aside/index.vue

<template>
<div class="login-layout">
  <div class="mask" :style="{maxHeight: openClause ? '100%' : '0'}">
    <div  class="user-clause" :class="{'cart-clause':cluseType==='cart'}">
      <div>
        <div class="clause-img" ref="clause">
          <div ref="clauseImg">
            <img :src="cluseType==='cart'?`${$cdn}images/cluse-long1.jpg`:`${$cdn}images/${language==='en'?'cluse-long-en':'cluse-long'}.jpg`" alt>
            <img v-if="cluseType!=='cart'&&language==='en'" :src="`${$cdn}images/cluse-long-en1.jpg`" alt>
            <img v-if="cluseType!=='cart'&&language==='en'" :src="`${$cdn}images/cluse-long-en2.jpg`" alt>
          </div>
        </div>
        <p>{{languagelAside.xieyi}}</p>
        <div class="cls-btn">
          <span @click="cancel">{{languagelAside.cancel}}</span>
          <span :class="{primary:allreadyRead}" @click="agree">{{languagelAside.comfirm}}</span>
        </div>
      </div>
    </div>
  </div>
  <component :is="login && notEmit ? 'cart' : 'login'" :cp="cp" :active='active'></component>
</div>
</template>

<script>
import {mapState} from 'vuex'
import login from './temp/login'
import cart from './temp/cart'

export default {
  computed: {
    ...mapState({
      login: state => state.user.token,
      language: state => state.language.current,
      languagelAside: state => state.language.home.home.loginAside
    })
  },
  props: ['active', 'cp'],
  components: {
    login,
    cart
  },
  data () {
    return {
      notEmit: true,
      openClause: false,
      allreadyRead: false,
      cluseType: 'cart'
    }
  },
  watch: {
    openClause () {
      this.$refs.clause.scrollTop = 0
      this.allreadyRead = false
    }
  },
  methods: {
    cancel () {
      this.$bus.$emit('isAgree', false)
      this.$bus.$emit('openClause', {
        show: false,
        type: this.cluseType
      })
      this.openClause = false
    },
    agree () {
      if (this.allreadyRead) {
        this.$bus.$emit('isAgree', true)
        this.$bus.$emit('openClause', {
          show: false,
          type: this.cluseType
        })
        this.openClause = false
      }
    },
    sizeHandle: function () {
      let scrollHanlde = () => {
        let ny = this.$refs.clauseImg.offsetHeight
        // console.log(getPosition(this.$refs.clauseImg).y)
        // console.log(this.$refs.clauseImg.offsetHeight)
        if (this.$refs.clause.scrollTop > ny - 700) {
          this.allreadyRead = true
        }
      }
      this.$refs.clause.addEventListener('scroll', scrollHanlde)
    },
    logoutHandle () {
      this.$bus.$emit('hideAside')
      this.openClause = false
    }
  },
  mounted () {
    this.sizeHandle()
    this.$bus.$on('openClause', data => {
      this.openClause = data.show
      this.cluseType = data.type
    })
    this.$bus.$on('hasLogin', () => {
      this.notEmit = false
      setTimeout(() => {
        this.notEmit = true
      }, 700)
    })
  }
}
</script>

<style lang="scss" scoped>
.login-layout {
  $animateType: cubic-bezier(0.77, 0, 0.175, 1);
  .mask {
    transition: max-height 0.7s $animateType;
    max-height: 100%;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba($color: #000000, $alpha: 0.8);
    .user-clause{
      z-index: 100000000;
      width: 70%;
      color: #fff;
      height: 100%;
      position: relative;
      text-align: center;
      margin: 0 auto;
      >div{
        height: 85%;
        position: absolute;
        transform: translate(-50%,-50%);
        left: 50%;
        top: 50%;
        background: #fff;
        padding: 0;
        .clause-img{
          height: 80%;
          overflow-y: auto;
          overflow-x: hidden;
        }
        p{
          margin: 25px 0;
          color: #2d2d2d;
        }
        .cls-btn{
          span{
            display: inline-block;
            background: rgb(226, 226, 226);
            color: #000;
            height: 50px;
            width: 215px;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
            &:first-of-type{
              margin-right: 80px;
            }
          }
          .primary{
            background: #1fe4dc;
          }
        }
      }

    }
    .cart-clause{
      width: calc(100% - 730px);
    }
  }

}
@media screen and (max-width: 1500px) {
  .user-clause{
      >div{
        width: 100%;
        .clause-img{
          margin: 0 auto;
          width: 90%;
          img{
            width: 100%;
          }
        }
      }
    }
}
</style>