<template>
  <view v-if="quantity >= 1" @click="click" class="fixed-view">
    <view class="fixed-view-icon">
      <uni-icons color="#fff" type="cart-filled" size="35"></uni-icons>
      <uni-badge class="uni-badge-left-margin" :text="quantity" />
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
//购物车是有商品
const quantity = ref(1);
// 购物车跳转
const click = () => {
  uni.navigateTo({
    url: '/pages/index/components/shoppingCart'
  });
};
</script>

<style lang="scss">
.fixed-view {
  position: fixed; // 使用fixed定位使元素固定
  bottom: 20%; // 距离底部的距离，可根据需要调整
  right: 2%; // 距离右侧的距离，可根据需要调整
  z-index: 10; // 确保元素在最上层
  .fixed-view-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1;
    width: 3rem;
    height: 3rem;
    background-color: #000;
    border-radius: 50%;
    .uni-badge-left-margin {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
</style>
