mall-web-ssr/components/mobile/MobileFooter.vue

<template>
  <div class="mobile-footer">
    <span :class="activeType=='home'?'active':''">
      <nuxt-link to="/">
        <i :class="activeType=='home'?'iconfont icon-shouye':'iconfont icon-shouye1'"></i><p>首页</p>
      </nuxt-link>
    </span>
    <!--<span :class="activeType=='shops'?'active':''">
      <nuxt-link to="/mobile/shop">
        <i :class="activeType=='shops'?'iconfont icon-dianpu':'iconfont icon-dianpu1'"></i><p>店铺</p>
      </nuxt-link>
    </span>-->
    <span class="seek">
      <a>
        <img src="/images/mobile/@2x/applyPurchase/home/seek-footer.png" alt="">
        <p>发布求购</p>
      </a>
    </span>
    <span :class="activeType=='user'?'active':''">
      <a @click="goCollect">
        <i :class="activeType=='user'?'iconfont icon-icon':'iconfont icon-wo'"></i><p>我</p>
      </a>
    </span>
    <a @click="toTop" v-show="!hideToTop"><i class="iconfont icon-arrow-up icon-xlg"></i></a>
    <login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox"></login-box>
    <div class="mobile-modal">
      <div class="mobile-modal-box">
        <div class="mobile-modal-header">发布求购<i class="icon-guanbi iconfont"></i></div>
        <div class="publish-seek">
          <div class="content-line">
            <span><i>*</i>型号：</span>
            <input type="text" placeholder="请勿填中文符号">
          </div>
          <div class="content-line">
            <span><i>*</i>品牌：</span>
            <input type="text" placeholder="请勿填中文符号">
          </div>
          <div class="content-line">
            <span><i>*</i>截止日期：</span>
            <input type="text" placeholder="请勿填中文符号">
          </div>
          <div class="content-line">
            <span>币种：</span>
            <a href="">RMB </a>
          </div>
          <div class="content-line">
            <span>数量：</span>
            <input type="text">
          </div>
          <div class="content-line">
            <span>规格：</span>
            <input type="text">
          </div>
          <a>确认发布</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { scrollTo } from '~utils/scroll'
  import {LoginBox} from '~components/mobile/common'
  export default{
    name: 'MobileFooter',
    data () {
      return {
        hideToTop: true,
        showLoginBox: false
      }
    },
    components: {
      LoginBox
    },
    computed: {
      activeType () {
        return this.$route.path === '/' ? 'home' : this.$route.path === '/mobile/shop' ? 'shops' : this.$route.path === '/mobile/user' ? 'user' : ''
      },
      user () {
        return this.$store.state.option.user
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        window.addEventListener('scroll', this.onScroll)
      })
    },
    methods: {
      onScroll () {
        let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
        if (scrolled > window.screen.availHeight) {
          this.hideToTop = false
        } else {
          this.hideToTop = true
        }
      },
      toTop () {
        scrollTo('body', 300)
      },
      goCollect: function () {
        if (this.user.logged) {
          this.$router.push('/mobile/user')
        } else {
          this.showLoginBox = true
        }
      }
    }
  }
</script>
<style scoped lang="scss">
  .mobile-footer{
    position:fixed;
    bottom:0;
    width:100%;
    height:.98rem;
    text-align: center;
    border-top:.04rem solid #ccc;
    background: #ffffff;
    z-index: 10;
  }
  .mobile-footer > span{
    display: inline-block;
    width: 2rem;
    font-size:.32rem;
    color:#b0b0b0;
    padding-top:.1rem;
  }

  .mobile-footer > span a{
    color:#b0b0b0;
  }

  .mobile-footer > span a i{
    font-size:.45rem;
  }
  .mobile-footer > span a p{
    font-size:.22rem;
  }

  .mobile-footer > span.active a{
    color:#3976f4;
  }
  .mobile-footer > a {
    position: absolute;
    right: .1rem;
    top: -1rem;
    background: rgba(0,0,0,.4);
    color: #fff;
    width: .88rem;
    height: .88rem;
    line-height: .88rem;
    border-radius: 100%;
  }
  .mobile-footer >a i{
    font-size: .46rem;
  }
  .mobile-footer > span.seek {
    width: 3.5rem;
    position: relative;
  }
  .mobile-footer > span.seek img {
    position: absolute;
    width: 1.3rem;
    height: 1.3rem;
    top: -1.3rem;
    right: 1.1rem;
  }
  .mobile-modal {
    .mobile-modal-box {
      .publish-seek {
        background: #fff;
        padding-top: .1rem;
        padding-bottom: .4rem;
        .content-line {
          height: .8rem;
          line-height: .8rem;
          font-size: .26rem;
          text-align: left;
          border-bottom: .01rem solid #b7d5fe;
          input {
            width: 3.49rem;
            height: .52rem;
            padding-left: .19rem;
            border: .01rem solid #7e7e7e;
          }
          span {
            display: inline-block;
            width: 1.76rem;
            text-align: right;
            i {
              color: #ff0000;
              margin-right: .05rem;
              font-style: normal;
            }
          }
        }
        > a {
          display: block;
          width: 5.19rem;
          height: .84rem;
          text-align: center;
          line-height: .84rem;
          font-size: .38rem;
          margin: .3rem auto 0;
          background: #3f84f6;
          color: #fff;
          border-radius: .08rem;
        }
      }
    }
  }
</style>