From d1edf3a8fa8f0bb5e1f4d4b2d50ce1824c6e5304 Mon Sep 17 00:00:00 2001
From: jqtmviyu <jqtmviyu@gmail.com>
Date: Thu, 24 Apr 2025 18:18:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/category/category.vue               | 263 ++++++++++-
 .../category/components/PageSkeleton.vue      | 417 ++++++++++++++++++
 src/services/category.ts                      |  13 +
 3 files changed, 690 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/category/components/PageSkeleton.vue
 create mode 100644 src/services/category.ts

diff --git a/src/pages/category/category.vue b/src/pages/category/category.vue
index 9e22b13..eec36d5 100644
--- a/src/pages/category/category.vue
+++ b/src/pages/category/category.vue
@@ -1,7 +1,264 @@
 <template>
-  <view class="">test</view>
+  <PageSkeleton v-if="isLoading" />
+  <view class="viewport" v-else>
+    <!-- 搜索框 -->
+    <view class="search">
+      <view class="input">
+        <text class="icon-search">女靴</text>
+      </view>
+    </view>
+    <!-- 分类 -->
+    <view class="categories">
+      <!-- 左侧：一级分类 -->
+      <scroll-view class="primary" scroll-y>
+        <view
+          v-for="(item, index) in categoryList"
+          :key="item.id"
+          class="item"
+          :class="{ active: index === activeIndex }"
+          @tap="activeIndex = index"
+        >
+          <text class="name"> {{ item.name }} </text>
+        </view>
+      </scroll-view>
+      <!-- 右侧：二级分类 -->
+      <scroll-view class="secondary" scroll-y :scroll-top="scrollTop" @scroll="handlerScrool">
+        <!-- 焦点图 -->
+        <JbcSwiper class="banner" :list="bannerList" />
+        <!-- 内容区域 -->
+        <view class="panel" v-for="item in childCategoryList" :key="item.id">
+          <view class="title">
+            <text class="name">{{ item.name }}</text>
+            <!-- <navigator class="more" hover-class="none">全部</navigator> -->
+          </view>
+          <view class="section">
+            <navigator
+              v-for="goods in item.goods"
+              :key="goods.id"
+              class="goods"
+              hover-class="none"
+              :url="`/pages/goods/goods?id=${goods.id}`"
+            >
+              <image class="image" :src="goods.picture"></image>
+              <view class="name ellipsis"> {{ goods.name }} </view>
+              <view class="price">
+                <text class="symbol">¥</text>
+                <text class="number"> {{ goods.price }} </text>
+              </view>
+            </navigator>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import JbcSwiper from '@/components/JbcSwiper.vue'
+import { getHomeBannerAPI } from '@/services/home'
+import type { BannerItem } from '@/types/home'
+import { onLoad } from '@dcloudio/uni-app'
+import { computed, ref, watch, nextTick } from 'vue'
+import { getCategoryTopAPI } from '@/services/category'
+import type { CategoryTopItem } from '@/types/category'
+import PageSkeleton from './components/PageSkeleton.vue'
 
-<style lang="scss"></style>
+// 获取轮播图
+const bannerList = ref<BannerItem[]>([])
+const getBannerList = async () => {
+  const res = await getHomeBannerAPI(2)
+  bannerList.value = res.result
+}
+
+// 获取分类
+// 一级分类
+const categoryList = ref<CategoryTopItem[]>([])
+const activeIndex = ref(0)
+const getCategoryAPIList = async () => {
+  const res = await getCategoryTopAPI()
+  categoryList.value = res.result
+}
+
+// 二级分类
+const childCategoryList = computed(() => {
+  return categoryList.value[activeIndex.value]?.children || []
+})
+
+// 切换分类时，滚动到顶部
+const scrollTop = ref(0)
+// 记录滚动位置, 保存到另一个变量
+// 切换分页的时候,先还原scrollTop的旧值,然后在视图渲染后,再设置scrollTop等于0触发还原
+const scroolTopOld = ref(0)
+
+type ScrollEvent = {
+  detail: {
+    scrollTop: number
+    scrollLeft: number
+    scrollHeight: number
+    scrollWidth: number
+    deltaX: number
+    deltaY: number
+  }
+  [key: string]: any
+}
+const handlerScrool = (e: ScrollEvent) => {
+  scroolTopOld.value = e.detail.scrollTop
+}
+
+watch(activeIndex, () => {
+  scrollTop.value = scroolTopOld.value
+  nextTick(() => {
+    scrollTop.value = 0
+  })
+})
+
+// 骨架屏
+const isLoading = ref(true)
+
+// 页面加载
+onLoad(async () => {
+  await Promise.all([getBannerList(), getCategoryAPIList()])
+  isLoading.value = false
+})
+</script>
+
+<style lang="scss">
+page {
+  height: 100%;
+  overflow: hidden;
+}
+.viewport {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.search {
+  padding: 0 30rpx 20rpx;
+  background-color: #fff;
+  .input {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 64rpx;
+    padding-left: 26rpx;
+    color: #8b8b8b;
+    font-size: 28rpx;
+    border-radius: 32rpx;
+    background-color: #f3f4f4;
+  }
+}
+.icon-search {
+  &::before {
+    margin-right: 10rpx;
+  }
+}
+/* 分类 */
+.categories {
+  flex: 1;
+  min-height: 400rpx;
+  display: flex;
+}
+/* 一级分类 */
+.primary {
+  overflow: hidden;
+  width: 180rpx;
+  flex: none;
+  background-color: #f6f6f6;
+  .item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 96rpx;
+    font-size: 26rpx;
+    color: #595c63;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      left: 42rpx;
+      bottom: 0;
+      width: 96rpx;
+      border-top: 1rpx solid #e3e4e7;
+    }
+  }
+  .active {
+    background-color: #fff;
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 8rpx;
+      height: 100%;
+      background-color: #27ba9b;
+    }
+  }
+}
+.primary .item:last-child::after,
+.primary .active::after {
+  display: none;
+}
+/* 二级分类 */
+.secondary {
+  background-color: #fff;
+  .carousel {
+    height: 200rpx;
+    margin: 0 30rpx 20rpx;
+    border-radius: 4rpx;
+    overflow: hidden;
+  }
+  .panel {
+    margin: 0 30rpx 0rpx;
+  }
+  .title {
+    height: 60rpx;
+    line-height: 60rpx;
+    color: #333;
+    font-size: 28rpx;
+    border-bottom: 1rpx solid #f7f7f8;
+    .more {
+      float: right;
+      padding-left: 20rpx;
+      font-size: 24rpx;
+      color: #999;
+    }
+  }
+  .more {
+    &::after {
+      font-family: 'erabbit' !important;
+      content: '\e6c2';
+    }
+  }
+  .section {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 20rpx 0;
+    .goods {
+      width: 150rpx;
+      margin: 0rpx 30rpx 20rpx 0;
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
+      image {
+        width: 150rpx;
+        height: 150rpx;
+      }
+      .name {
+        padding: 5rpx;
+        font-size: 22rpx;
+        color: #333;
+      }
+      .price {
+        padding: 5rpx;
+        font-size: 18rpx;
+        color: #cf4444;
+      }
+      .number {
+        font-size: 24rpx;
+        margin-left: 2rpx;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/category/components/PageSkeleton.vue b/src/pages/category/components/PageSkeleton.vue
new file mode 100644
index 0000000..70ec50b
--- /dev/null
+++ b/src/pages/category/components/PageSkeleton.vue
@@ -0,0 +1,417 @@
+<template name="skeleton">
+  <view class="sk-container">
+    <view class="viewport viewport">
+      <view class="search search">
+        <view class="input input">
+          <text class="icon-search sk-transparent sk-text-14-2857-658 sk-text">女靴</text>
+        </view>
+      </view>
+      <view class="categories categories">
+        <scroll-view :scroll-y="true" class="primary primary">
+          <view class="item active sk-pseudo sk-pseudo-circle">
+            <text class="name sk-transparent sk-text-14-2857-317 sk-text">居家</text>
+          </view>
+          <view class="item sk-pseudo sk-pseudo-circle">
+            <text class="name sk-transparent sk-text-14-2857-470 sk-text">美食</text>
+          </view>
+          <view class="item sk-pseudo sk-pseudo-circle">
+            <text class="name sk-transparent sk-text-14-2857-656 sk-text">服饰</text>
+          </view>
+          <view class="item sk-pseudo sk-pseudo-circle">
+            <text class="name sk-transparent sk-text-14-2857-571 sk-text">母婴</text>
+          </view>
+          <view class="item sk-pseudo sk-pseudo-circle">
+            <text class="name sk-transparent sk-text-14-2857-54 sk-text">个护</text>
+          </view>
+          <view class="item sk-pseudo sk-pseudo-circle">
+            <text class="name sk-transparent sk-text-14-2857-314 sk-text">严选</text>
+          </view>
+          <view class="item sk-pseudo sk-pseudo-circle">
+            <text class="name sk-transparent sk-text-14-2857-77 sk-text">数码</text>
+          </view>
+          <view class="item sk-pseudo sk-pseudo-circle">
+            <text class="name sk-transparent sk-text-14-2857-585 sk-text">运动</text>
+          </view>
+          <view class="item sk-pseudo sk-pseudo-circle">
+            <text class="name sk-transparent sk-text-14-2857-96 sk-text">杂项</text>
+          </view>
+        </scroll-view>
+        <scroll-view :scroll-y="true" class="secondary secondary" scroll-top="0">
+          <view is="components/JbcSwiper" class="banner banner">
+            <view class="carousel JbcSwiper--carousel">
+              <swiper :circular="true" :current="0" :interval="3000" :autoplay="false">
+                <swiper-item
+                  style="
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    transform: translate(0%, 0px) translateZ(0px);
+                  "
+                >
+                  <navigator class="navigator JbcSwiper--navigator" hover-class="none">
+                    <image class="image JbcSwiper--image sk-image" mode="aspectFill"></image>
+                  </navigator>
+                </swiper-item>
+                <swiper-item
+                  style="
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    transform: translate(100%, 0px) translateZ(0px);
+                  "
+                >
+                  <navigator class="navigator JbcSwiper--navigator" hover-class="none">
+                    <image class="image JbcSwiper--image sk-image" mode="aspectFill"></image>
+                  </navigator>
+                </swiper-item>
+              </swiper>
+              <view class="indicator JbcSwiper--indicator">
+                <text class="dot JbcSwiper--dot active JbcSwiper--active"></text>
+                <text class="dot JbcSwiper--dot"></text>
+                <text class="dot JbcSwiper--dot"></text>
+                <text class="dot JbcSwiper--dot"></text>
+                <text class="dot JbcSwiper--dot"></text>
+              </view>
+            </view>
+          </view>
+          <view class="panel panel">
+            <view class="title title">
+              <text class="name sk-transparent sk-text-27-2727-635 sk-text">居家生活用品</text>
+            </view>
+            <view class="section section">
+              <navigator class="goods goods" hover-class="none">
+                <image class="image sk-image"></image>
+                <view class="name ellipsis sk-transparent sk-text-14-2857-313 sk-text"
+                  >钻石陶瓷涂层多用锅18cm 小奶锅</view
+                >
+                <view class="price price">
+                  <text class="symbol sk-transparent sk-opacity">¥</text>
+                  <text class="number sk-transparent sk-text-14-2857-254 sk-text">149.00</text>
+                </view>
+              </navigator>
+              <navigator class="goods goods" hover-class="none">
+                <image class="image sk-image"></image>
+                <view class="name ellipsis sk-transparent sk-text-14-2857-51 sk-text"
+                  >极光限定 珠光蓝珐琅锅</view
+                >
+                <view class="price price">
+                  <text class="symbol sk-transparent sk-opacity">¥</text>
+                  <text class="number sk-transparent sk-text-14-2857-645 sk-text">199.00</text>
+                </view>
+              </navigator>
+            </view>
+          </view>
+          <view class="panel panel">
+            <view class="title title">
+              <text class="name sk-transparent sk-text-27-2727-249 sk-text">收纳</text>
+            </view>
+            <view class="section section">
+              <navigator class="goods goods" hover-class="none">
+                <image class="image sk-image"></image>
+                <view class="name ellipsis sk-transparent sk-text-14-2857-70 sk-text"
+                  >给衣柜减减肥，真空防潮压缩袋</view
+                >
+                <view class="price price">
+                  <text class="symbol sk-transparent sk-opacity">¥</text>
+                  <text class="number sk-transparent sk-text-14-2857-442 sk-text">79.00</text>
+                </view>
+              </navigator>
+              <navigator class="goods goods" hover-class="none">
+                <image class="image sk-image"></image>
+                <view class="name ellipsis sk-transparent sk-text-14-2857-343 sk-text"
+                  >爆款明星好物，抽屉式透明储物柜</view
+                >
+                <view class="price price">
+                  <text class="symbol sk-transparent sk-opacity">¥</text>
+                  <text class="number sk-transparent sk-text-14-2857-258 sk-text">129.00</text>
+                </view>
+              </navigator>
+              <navigator class="goods goods" hover-class="none">
+                <image class="image sk-image"></image>
+                <view class="name ellipsis sk-transparent sk-text-14-2857-321 sk-text"
+                  >衣柜省空间神器，棉麻涤·收纳挂袋</view
+                >
+                <view class="price price">
+                  <text class="symbol sk-transparent sk-opacity">¥</text>
+                  <text class="number sk-transparent sk-text-14-2857-693 sk-text">55.00</text>
+                </view>
+              </navigator>
+              <navigator class="goods goods" hover-class="none">
+                <image class="image sk-image"></image>
+              </navigator>
+              <navigator class="goods goods" hover-class="none">
+                <image class="image sk-image"></image>
+              </navigator>
+              <navigator class="goods goods" hover-class="none">
+                <image class="image sk-image"></image>
+              </navigator>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style>
+.sk-transparent {
+  color: transparent !important;
+}
+.sk-text-14-2857-658 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 38.0435rpx;
+  position: relative !important;
+}
+.sk-text {
+  background-origin: content-box !important;
+  background-clip: content-box !important;
+  background-color: transparent !important;
+  color: transparent !important;
+  background-repeat: repeat-y !important;
+}
+.sk-text-14-2857-317 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 35.5072rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-470 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 35.5072rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-656 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 35.5072rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-571 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 35.5072rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-54 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 35.5072rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-314 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 35.5072rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-77 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 35.5072rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-585 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 35.5072rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-96 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 35.5072rpx;
+  position: relative !important;
+}
+.sk-text-27-2727-635 {
+  background-image: linear-gradient(
+    transparent 27.2727%,
+    #eeeeee 0%,
+    #eeeeee 72.7273%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 59.7826rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-313 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 30.4348rpx;
+  position: relative !important;
+}
+.sk-opacity {
+  opacity: 0 !important;
+}
+.sk-text-14-2857-254 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 32.971rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-51 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 30.4348rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-645 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 32.971rpx;
+  position: relative !important;
+}
+.sk-text-27-2727-249 {
+  background-image: linear-gradient(
+    transparent 27.2727%,
+    #eeeeee 0%,
+    #eeeeee 72.7273%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 59.7826rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-70 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 30.4348rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-442 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 32.971rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-343 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 30.4348rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-258 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 32.971rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-321 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 30.4348rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-693 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 32.971rpx;
+  position: relative !important;
+}
+.sk-image {
+  background: #efefef !important;
+}
+.sk-pseudo::before,
+.sk-pseudo::after {
+  background: #efefef !important;
+  background-image: none !important;
+  color: transparent !important;
+  border-color: transparent !important;
+}
+.sk-pseudo-rect::before,
+.sk-pseudo-rect::after {
+  border-radius: 0 !important;
+}
+.sk-pseudo-circle::before,
+.sk-pseudo-circle::after {
+  border-radius: 50% !important;
+}
+.sk-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: transparent;
+}
+</style>
diff --git a/src/services/category.ts b/src/services/category.ts
new file mode 100644
index 0000000..6e706a8
--- /dev/null
+++ b/src/services/category.ts
@@ -0,0 +1,13 @@
+import type { CategoryTopItem } from '@/types/category'
+import { http } from '@/utils/http'
+
+/**
+ * 获取分类数据
+ * @returns 分类数据
+ */
+export const getCategoryTopAPI = () => {
+  return http<CategoryTopItem[]>({
+    url: '/category/top',
+    method: 'GET',
+  })
+}