gaoyixia-pc/src/components/module/to-shoppingCart.vue

<template>
  <div
    class="to-shoppingCart"
    v-if="show"
    @click="$router.push('/product-shopping-cart')"
  >
    <img src="@/assets/icon/gouwuche.png" alt="" />
    <div class="mark" v-if="cartNum > 0">{{ cartNum }}</div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "ToShoppingCart",
  computed: {
    ...mapState({
      cartNum: (state) => state.mark_num.productMarkNum.trolley_num,
    }),
    show() {
      let show_list = ["/product", "/product-details"];
      return (
        !this.$route.meta.children &&
        show_list.includes(this.$route.path) &&
        localStorage.getItem("user_info")
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.to-shoppingCart {
  position: relative;
  img {
    width: 50px;
    height: 50px;
  }
  .mark {
    width: 12px;
    padding: 0 6px;
    background: #ff3535;
    border-radius: 6px;
    position: absolute;
    top: 0;
    left: 30px;
    text-align: center;
    color: white;
  }
}
</style>