饿了么底部栏

 

底部栏

<template>

  <div class="tab">

    <div class="chart">

      <div class="circle">

        <img src="@/assets/SVG/shopping_cart.svg" alt="" @click="changeCart" />

      </div>

    </div>

    <p class="money">￥ {{goodsData}} </p>

    <p class="fee">另需配送费￥4元</p>

    <p class="low">{{paySeic}} </p>

  </div>

</template>

<script>

import bus from "@/eventBus.js";

 

export default {

  name:'TabBar',

  data(){

    return{

      goodsData:0

    }

  },

  methods:{

    changeCart() {

      this.$store.commit("showCart");

     

    },

  },

  created(){

    bus.$on("shareComputed", (val) =>{

      this.goodsData = val;

     

    } );

    bus.$on('totalMony' ,(val) =>{

      this.goodsData = val;

    })

  },

  computed:{

    paySeic(){

      if(this.goodsData === 0){

        return  `￥${20}元起送 `

      }

      else if(this.goodsData < 20){

        let index = 20 - this.goodsData

        return `还差￥${index}元起送 `

        }else{

          return `去结算`

        }

    }

  }

}

</script>

<style lang="less" scoped>

.tab {

  background-color: #141d27;

  height: 50px;

  width: 100%;

  position: fixed;

  bottom: 0;

   color: aliceblue;

   z-index: 61;

  .chart {

    position: absolute;

    top: -12px;

    width: 44px;

    height: 44px;

    left: 18px;

    border-radius: 50%;

    background-color: #141d27;

    .circle {

      position: absolute;

      left: 5px;

      top: 5px;

      width: 36px;

      line-height: 40px;

      text-align: center;

      height: 36px;

      border-radius: 50%;

      background-color: rgba(255, 255, 255, 0.4);

      img {

        width: 20px;

        height: 20px;

    }

    }

  }

  .money{

     position: absolute;

     left: 80px;

     bottom: 20px;

    font-size: 16px;

    font-weight:700;

  }

  .fee{

      width: 100px;

      margin-left: 140px;

      font-size:12px ;

      margin-top:15px ;

     

  }

  .low{

      right: 0;

      bottom: 0;

      height: 50px;

      width:90px ;

      line-height: 50px;

      position: absolute;

      text-align: center;

      background-color:rgba(255, 255, 255, 0.4) ;

  }

}

</style>