页面提交

src/components/common/CategoryGrid.vue

@@ -0,0 +1,79 @@
+<template>
+  <view class="category-grid">
+    <view
+      v-for="item in list"
+      :key="item.id"
+      class="category-item"
+      @click="handleClick(item)"
+    >
+      <view class="icon-wrapper">
+        <text class="icon" :class="item.icon"></text>
+      </view>
+      <text class="name">{{ item.name }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { Category } from '@/typings/mall'
+
+interface Props {
+  list: Category[] // 分类列表
+  columns?: number // 列数
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  columns: 4,
+})
+
+const emit = defineEmits<{
+  click: [item: Category]
+}>()
+
+function handleClick(item: Category) {
+  emit('click', item)
+  // 跳转到分类页面
+  uni.navigateTo({
+    url: `/pages/sort/index?categoryId=${item.id}`,
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.category-grid {
+  display: grid;
+  grid-template-columns: repeat(v-bind(columns), 1fr);
+  gap: 24rpx;
+  padding: 24rpx;
+  background: #fff;
+}
+
+.category-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.icon-wrapper {
+  width: 96rpx;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 24rpx;
+  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+
+  .icon {
+    font-size: 48rpx;
+    color: #fff;
+  }
+}
+
+.name {
+  font-size: 24rpx;
+  color: #333;
+  text-align: center;
+}
+</style>