商品页

shims-uni.d.ts

@@ -1,10 +1,14 @@
 /// <reference types='@dcloudio/types' />
 import 'vue'
-
+import TabView from "@/components/tab-view/index.vue";
 declare module '@vue/runtime-core' {
     type Hooks = App.AppInstance & Page.PageInstance;
 
     interface ComponentCustomOptions extends Hooks {
 
     }
+
+    export interface GlobalComponents {
+        TabView: typeof TabView
+    }
 }

src/components/tab-view/index.vue

@@ -0,0 +1,74 @@
+<script setup>
+import {reactive} from "vue";
+import {onLoad} from "@dcloudio/uni-app";
+import SidebarView from "@/components/sidebar-view/index.vue"
+const props = defineProps({
+  tabs: {
+    type: Array,
+    default: () => [],
+    required: true
+  }
+})
+
+const ctx = reactive({
+  current: -1,
+  categories: [
+    {
+      name: "外卖外送",
+      value: "takeaway"
+    },
+    {
+      name: "优选",
+      value: "optimization"
+    },
+    {
+      name: "餐饮",
+      value: "catering"
+    }]
+})
+
+function changeCurrent(index){
+  ctx.current = index
+}
+
+function isCurrent(index){
+  return ctx.current === index
+}
+
+function swiperChange(e){
+  ctx.current = e.detail.current
+}
+
+onLoad(() => {
+  ctx.current = props.tabs.length > 0 ? 0 : -1;
+})
+</script>
+
+<template>
+  <view class="w-full h-full">
+    <view class="w-full h-full flex flex-col" v-if="props.tabs && props.tabs.length > 0">
+      <view class="text-left p-2">
+        <view class="inline-block mx-2" v-for="(item, index) in props.tabs" :key="index"
+              :class="{'font-bold': isCurrent(index)}"
+              @tap="changeCurrent(index)">
+          {{ item.name }}
+
+          <view class="mt-0.5 mx-auto w-[80%] h-[2px] bg-[#1296DB]" v-show="isCurrent(index)"></view>
+        </view>
+      </view>
+
+      <swiper class="flex-grow min-h-0" :current="ctx.current" @change="swiperChange">
+        <swiper-item v-for="(item, index) in props.tabs" :key="index" class="h-full">
+          <SidebarView :categories="ctx.categories">
+            <view class="bg-orange-100 h-full"> {{ item.name }}</view>
+          </SidebarView>
+        </swiper-item>
+      </swiper>
+    </view>
+
+  </view>
+</template>
+
+<style scoped>
+
+</style>

src/pages/commodity/commodity.vue

@@ -1,5 +1,6 @@
 <template>
-  <view class="w-full h-full">
+  <view class="w-full h-full flex flex-col">
+    <view>
       <view class="-z-20 absolute top-0 left-0 w-full h-full">
         <image src="https://cn.bing.com/th?id=OHR.TajMahalReflection_ZH-CN7498774173_1024x768.jpg" class="w-full h-32"></image>
       </view>
@@ -7,21 +8,39 @@
       <view class="pt-12 bg-black bg-opacity-10">
         <ShopTitle />
       </view>
+    </view>
 
-    <view class="text-center">
-      商品页
+
+    <view class="text-center flex flex-col flex-grow min-h-0">
+      <TabView :tabs="ctx.tabs" class="flex-grow min-h-0">
+        <view class="" v-for="item in ctx.tabs"></view>
+      </TabView>
     </view>
   </view>
 </template>
 
-<script setup lang="ts">
+<script setup>
+import {reactive} from "vue";
 import {onLoad} from "@dcloudio/uni-app";
 import ShopTitle from "./components/shop-title.vue";
-
+import TabView from "@/components/tab-view/index.vue";
 
 onLoad((query)=>{
   console.log(query)
 })
+
+const ctx = reactive({
+  tabs: [
+    {
+      name: "点菜",
+      value: "menu"
+    },
+    {
+      name: "评价",
+      value: "comments"
+    }
+  ]
+})
 </script>