yshop-pro-uniapp/pages/user/components/GridCard.vue

<!--
    @name: GridCard
    @author: kahu4
    @date: 2023-11-09 15:09
    @description：GridCard
    @update: 2023-11-09 15:09
-->
<script setup>
import { toRefs } from "vue";
import { useRouter } from "@/hooks/useRouter";
import { useInterface } from "@/hooks/useInterface";

const props = defineProps({
  list: {
    type: Array,
    default: () => ([])
  },
  dotInfo: {
    type: Object
  },
  title: {
    type: String,
    default: () => ''
  },
  buttonText: {
    type: String,
    default: ''
  }
})
const {list, title, buttonText, dotInfo} = toRefs(props)
const emits = defineEmits(['buttonClick'])
const {push} = useRouter();
const {toast} = useInterface();

function toLink(listItem) {
  if (!listItem.path) return toast({title: '😒 暂未开放 😒'})
  push({url: listItem.path}, listItem?.params ?? {})
}
</script>

<template>
  <view class="grid-container">
    <view
        class="title-row"
        v-if="title || buttonText"
    >
      <view>
        {{ title }}
      </view>
      <view
          class="right"
          @click="emits('buttonClick')"
      >
        {{ buttonText }}
        <uv-icon
            v-if="buttonText"
            name="arrow-right"
            color="#ccc"
            size="12"
        />
      </view>
    </view>
    <view class="icon-box">
      <view
          class="icon-item"
          v-for="item in list"
          :key="item"
          @click="toLink(item)"
      >

        <template v-if="item&&item.rightTopDot">
          <view
              class="dot"
              v-if="dotInfo && dotInfo[item.dotField] && dotInfo[item.dotField]>0"
          >
            {{ dotInfo[item.dotField] < 100 ? dotInfo[item.dotField] : `${ dotInfo[item.dotField] }+` }}
          </view>
        </template>
        <image
            class="icon"
            :src="item.icon"
        />
        <view class="text">
          {{ item.label }}
        </view>
      </view>
    </view>
  </view>
</template>

<style
    scoped
    lang="scss"
>
.grid-container {
  width: 100%;
  background: $white-color;
  border-radius: 15rpx;
  margin: 20rpx 0;

  .title-row {
    @include useFlex(space-between, center);
    @include usePadding(30, 30);

    font-size: 32rpx;
    color: #333;
    font-weight: 500;
    border-bottom: 1rpx solid #f5f5f5;

    .right {
      @include useFlex(space-between, center);
      font-size: 24rpx;
      color: $tips-color;
      font-weight: normal;
    }
  }

  .icon-box {
    @include usePadding(30, 20);
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    .icon-item {
      @include useFlex(space-between, center, column);
      width: 100%;
      font-size: 24rpx;
      color: #333333;
      position: relative;

      .dot {
        z-index: 99;
        position: absolute;
        background: red;
        color: #fff;
        right: 20%;
        top: 0;
        transform: translateY(-20%);
        font-size: 22rpx;
        width: 35rpx;
        height: 35rpx;
        text-align: center;
        line-height: 35rpx;
        box-sizing: border-box;
        border-radius: 50%;
      }

      .icon {
        width: 60rpx;
        height: 60rpx;
      }

      .text {
        margin: 14rpx 0;
      }
    }
  }
}
</style>