VAVABUY/components/floatButton.vue

<template>
  <up-float-button
    :isMenu="isMenu"
    :list="list"
    :top="top"
    :buttom="buttom"
    :right="right"
    :backgroundColor="backgroundColor"
    :color="color"
    :width="width"
    :height="height"
    :borderColor="borderColor"
    @click="btnClick"
    @item-click="itemClick"
    style="z-index: 997"
  >
    <view class="buttom">
      <view class="carts">
        <image :src="image" class="img"></image>
        <view class="cartNum" v-if="unclaimedNum || cartNum">{{
          unclaimedNum || cartNum
        }}</view>
      </view>
    </view>
  </up-float-button>
</template>
<script setup>
import { computed } from "vue";
import { useShopStore, useTabbarStore } from "@/store";

const useShop = useShopStore();
const useTabbar = useTabbarStore();

const props = defineProps({
  isMenu: Boolean,
  list: {
    type: Array,
    default: () => [],
  },
  backgroundColor: {
    type: String,
    default: "#e1e5ed",
  },
  top: String,
  buttom: String,
  right: {
    type: String,
    default: "30px",
  },
  color: {
    type: String,
    default: "#fff",
  },
  width: {
    type: String,
    default: "100rpx",
  },
  height: {
    type: String,
    default: "100rpx",
  },
  borderColor: {
    type: String,
    default: "",
  },
  image: {
    type: String,
    default: "/static/shop/cart.png",
  },
  unclaimedNum: {
    type: Number,
    default: 0,
  },
});
const emit = defineEmits(["onConfirm", "itemClick"]);

const cartNum = computed(() => useShop.getCartNum);

const btnClick = () => {
  emit("onConfirm");
};
const itemClick = (e) => {
  emit("itemClick", e);
};
</script>

<style lang="less" scoped>
@import url("@/style.less");

/deep/ .u-float-button__main {
  .flex();
}

.buttom {
  background-color: #1e1e1e;
  width: 84rpx;
  height: 84rpx;
  border-radius: 50%;

  .carts {
    width: 100%;
    height: 100%;
    .flex_center();
    position: relative;

    .img {
      width: 40rpx;
      height: 40rpx;
    }

    .cartNum {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 32rpx;
      height: 32rpx;
      border-radius: 50%;
      border: 1px solid var(--light);
      .flex_center();
      color: var(--light);
      background-color: #f56c6c;
      .size(20rpx);
    }
  }
}
</style>