封装剥离

src/components/sidebar-view/index.vue

@@ -0,0 +1,48 @@
+<script setup>
+import {reactive} from "vue";
+const props = defineProps({
+  categories: {
+    type: Array,
+    default: () => []
+  }
+})
+const ctx = reactive({
+  current: 0,
+})
+
+function switchCategory(index) {
+  ctx.current = index
+}
+</script>
+
+<template>
+  <view class="flex w-full h-full">
+    <view class="w-1/4 h-full bg-gray-100">
+      <scroll-view class="h-full bg-gray-100">
+        <view v-for="(category, index) in props.categories" :key="index"
+              @click="switchCategory(index)"
+              :class="{'bg-white': index === ctx.current, 'bg-gray-100': index!== ctx.current}"
+              class="text-center p-4 rounded">
+          <text>{{ category.name }}</text>
+        </view>
+      </scroll-view>
+    </view>
+
+    <view class="w-3/4 p-2 bg-white flex flex-col h-full">
+      <view class="flex-grow-0 flex flex-col h-full">
+        <view class="my-1">
+          <slot name="title" :current="ctx.current"></slot>
+        </view>
+
+        <scroll-view scroll-y class="flex-grow-0 min-h-0">
+          <slot name="default"></slot>
+        </scroll-view>
+      </view>
+
+    </view>
+  </view>
+</template>
+
+<style scoped>
+
+</style>

src/pages.json

@@ -51,6 +51,14 @@
         "navigationBarTitleText": "设备信息",
         "enablePullDownRefresh": false
       }
+    },
+    {
+      "path": "pages/commodity/commodity",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "商品页",
+        "enablePullDownRefresh": false
+      }
     }
   ],
   "globalStyle": {

src/pages/category/category.vue

@@ -1,5 +1,6 @@
 <script setup>
 import {reactive} from "vue";
+import SideBarView from "@/components/sidebar-view/index.vue";
 import Item from "./components/item.vue";
 const ctx = reactive({
   current: 0,
@@ -49,34 +50,20 @@ function switchCategory(index) {
 </script>
 
 <template>
-  <view class="flex w-full h-full">
+  <SideBarView :categories="ctx.categories">
-    <view class="w-1/4 h-full bg-gray-100">
+    <template #title="{current}">
-      <scroll-view class="h-full bg-gray-100">
+                <text>
-        <view v-for="(category, index) in ctx.categories" :key="index"
+                  {{ctx.categories[current].name}}
-              @click="switchCategory(index)"
+                </text>
-              :class="{'bg-white': index === ctx.current, 'bg-gray-100': index!== ctx.current}"
+    </template>
-              class="text-center p-4 rounded">
-          <text>{{ category.name }}</text>
-        </view>
-      </scroll-view>
-    </view>
 
-    <view class="w-3/4 p-2 bg-white flex flex-col h-full">
+    <scroll-view scroll-y class="flex-grow-0 min-h-0">
-      <view class="flex-grow-0 flex flex-col h-full">
+      <Item v-for="i in 10" :key="i" img="https://www.httpbin.org/image/png"
-        <view class="my-1">
+            title="测试商品测试商品测试商品测试商品测试商品测试商品测试商品" price="9999.99"/>
-          <text>
+      <Item v-for="i in 20" :key="i" img="https://www.httpbin.org/image/png" title="测试商品" price="9999.99"
-            {{ctx.categories[ctx.current].name}}
+            oldPrice="8888.88"/>
-          </text>
+    </scroll-view>
-        </view>
+  </SideBarView>
-
-        <scroll-view scroll-y class="flex-grow-0 min-h-0">
-            <Item v-for="i in 10" :key="i" img="https://www.httpbin.org/image/png" title="测试商品测试商品测试商品测试商品测试商品测试商品测试商品" price="9999.99"/>
-            <Item v-for="i in 20" :key="i" img="https://www.httpbin.org/image/png" title="测试商品" price="9999.99" oldPrice="8888.88"/>
-        </scroll-view>
-      </view>
-
-    </view>
-  </view>
 </template>
 
 <style scoped>

src/pages/commodity/commodity.vue

@@ -0,0 +1,14 @@
+<template>
+  <view>
+
+  </view>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+
+<style scoped lang="scss">
+
+</style>

src/pages/index/components/banner/index.vue

@@ -37,11 +37,11 @@ function previewImage(item) {
         <category-item src="https://www.httpbin.org/image/png" title="汽车票"></category-item>
         <category-item src="https://www.httpbin.org/image/png" title="宠物"></category-item>
 
-        <category-item src="https://www.httpbin.org/image/png" title="美食"></category-item>
+        <category-item src="https://www.httpbin.org/image/jpeg" title="美食"></category-item>
-        <category-item src="https://www.httpbin.org/image/png" title="汽车票"></category-item>
+        <category-item src="https://www.httpbin.org/image/jpeg" title="汽车票"></category-item>
-        <category-item src="https://www.httpbin.org/image/png" title="宠物"></category-item>
+        <category-item src="https://www.httpbin.org/image/jpeg" title="宠物"></category-item>
-        <category-item src="https://www.httpbin.org/image/png" title="汽车票"></category-item>
+        <category-item src="https://www.httpbin.org/image/jpeg" title="汽车票"></category-item>
-        <category-item src="https://www.httpbin.org/image/png" title="宠物"></category-item>
+        <category-item src="https://www.httpbin.org/image/jpeg" title="宠物"></category-item>
       </view>
     </swiper-item>
 

vite.config.js

@@ -1,4 +1,5 @@
 import path from "path";
+import {fileURLToPath, URL} from 'node:url'
 import { defineConfig } from 'vite'
 import uni from '@dcloudio/vite-plugin-uni'
 import { UnifiedViteWeappTailwindcssPlugin as uvwt } from "weapp-tailwindcss/vite";
@@ -32,4 +33,9 @@ export default defineConfig({
       ]
     },
   },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
 })