fix: 分类

pages_home/components/tabs/index.vue

@@ -8,14 +8,35 @@
             }" lineColor="rgba(221, 94, 69, 1)" :current="tabKey" keyName="businessName">
             </up-tabs>
         </view>
-        <view>
-            <view scroll-x class="tabs-scroll">
-                <view v-for="item in childrenList" :key="item.id"
-                    :class="item.id === childrenKey ? 'childern-item item-active' : 'childern-item'"
-                    @click="childernChange(item)">
+        <view scroll-x class="tabs-scroll">
+            <!-- <view v-for="item in childrenList" :key="item.id"
+                :class="item.id === childrenKey ? 'childern-item item-active' : 'childern-item'"
+                @click="childernChange(item)">
+                {{ item.businessName }}
+            </view> -->
+
+            <up-tabs :list="childrenList" @change="childernChange" :activeStyle="{
+                color: 'rgba(221, 94, 69, 1)',
+                fontWeight: 'bold',
+                transform: 'scale(1.05)'
+            }" lineColor="rgba(221, 94, 69, 1)" :current="childrenKey" keyName="businessName">
+            </up-tabs>
+        </view>
+        <view class="tabs-scroll-box">
+            <!-- <view class="tabs-scroll2">
+                <view v-for="item in children2List" :key="item.id"
+                    :class="item.id === children2Key ? 'childern2-item item2-active' : 'childern2-item'"
+                    @click="childern2Change(item)">
                     {{ item.businessName }}
                 </view>
-            </view>
+            </view> -->
+
+            <up-tabs :list="children2List" @change="childern2Change" :activeStyle="{
+                color: 'rgba(221, 94, 69, 1)',
+                fontWeight: 'bold',
+                transform: 'scale(1.05)'
+            }" lineColor="rgba(221, 94, 69, 1)" :current="children2Key" keyName="businessName">
+            </up-tabs>
         </view>
     </view>
 </template>
@@ -36,22 +57,39 @@ import {
 const emits = defineEmits(['change'])
 const tabKey = ref(0);//tab的下标
 const childrenKey = ref(null);//二级的id
+const children2Key = ref(null);//三级的id
+
 const list = ref([])
 
 const childrenList = ref([]);//二级的数据
+const children2List = ref([]);//三级的数据
+
 const handlTabs = (e, index) => {
     console.log('e,index', e, index);
+    childrenList.value = e.children ? [{
+        businessName: '全部',
+        id: e.id
+    }, ...e.children] : []
 
-    childrenList.value = e.children
     tabKey.value = index;//记录下标
-    childrenKey.value = null;
+    childrenKey.value = 0;
+    children2Key.value = 0;
+    children2List.value = [];
     emits('change', e)
 }
-const childernChange = (e) => {
-    childrenKey.value = e.id;
+const childernChange = (e, index) => {
+    children2List.value = e.children ? [{
+        businessName: '全部',
+        id: e.id
+    }, ...e.children] : [];
+    children2Key.value = 0;
+    childrenKey.value = index;
+    emits('change', e)
+}
+const childern2Change = (e, index) => {
+    children2Key.value = index;
     emits('change', e)
 }
-
 onMounted(() => {
 })
 
@@ -88,6 +126,34 @@ onLoad((options) => {
     align-items: center;
     margin-top: 16rpx;
     padding: 0 16rpx;
+}
+
+.tabs-scroll-box {
+    width: 100%;
+    overflow: hidden;
+    overflow-x: auto;
+}
+
+.tabs-scroll2 {
+    margin-top: 16rpx;
+    padding: 0 16rpx;
+    width: max-content;
+    display: flex;
+    align-items: center;
+}
+
+.childern2-item {
+    font-size: 24rpx;
+    font-weight: 400;
+    background-color: #f9fafb;
+    padding: 8rpx 28rpx;
+    margin-right: 16rpx;
+    border-radius: 4rpx;
+    color: #656565;
+}
 
+.item2-active {
+    background: rgba(251, 229, 225, 1);
+    color: rgba(221, 94, 69, 1);
 }
 </style>

pages_home/pages/client/details.vue

@@ -20,8 +20,14 @@
 				<view  class="custom-dropdown">
 					<up-tabs :list="list2" @change="clickList2" class="tabs-content" :current="currentTabs2"
 						keyName="businessName" />
+				</view>
+				<view class="tabs-wrapper">
+					<scroll-view scroll-x class="tabs-scroll">
+						<up-tabs :list="list1" @change="handlTabs" keyName="businessName"
+							class="tabs-content" :current="tabKey"></up-tabs>
+					</scroll-view>
 				</view> -->
-
+	
 				<Tabs :list="list1" @change="handlTabs" ref="tabRef" />
 			</view>