feat:商品管理

src/sheep/components/shop-categary-picker.vue

@@ -1,19 +1,6 @@
 <template>
 	<view class="max-h-[60vh] overflow-y-auto mb-20rpx">
-		<view
-			class="flex items-center p-2 bg-#eeeeee mb-2 mx-4 rounded-2 sub-text-26"
-			v-for="(item, index) in categoryTree"
-			:key="item.id"
-			:class="{ 'bg-#0779fd! c-white!': selectedCategary && selectedCategary.id === item.id }"
-			@click="onSelect(item)"
-		>
-			<view v-if="item.children.length" class="w-40rpx mr-2 text-center">
-				<!-- <text>{{ expandedIds.has(item.id) ? "▾" : "▸" }}</text> -->
-				<text>▾</text>
-			</view>
-			<view v-else class="w-40rpx mr-2" />
-			<view>{{ item.name }}</view>
-		</view>
+		<shop-categary-tree :node-data="categoryTree" @currentNode="currentNode" />
 		<view v-if="categoryTree.length === 0" class="text-center text-[#888] py-[40rpx]">暂无数据</view>
 	</view>
 	<view class="px-[20rpx] py-2 flex justify-between sticky bottom-0 bg-white">
@@ -25,6 +12,7 @@
 
 <script setup lang="ts">
 import { ref } from "vue"
+import ShopCategaryTree from "./shop-categary-tree.vue"
 
 defineProps({
 	categoryTree: {
@@ -32,12 +20,13 @@ defineProps({
 		default: () => [],
 	},
 })
-
 const emit = defineEmits(["confirm", "cancel"])
 
 const selectedCategary = ref<any>({})
 
-const onSelect = (item: any) => {
+const currentNode = (item) => {
+	console.log(item)
+
 	selectedCategary.value = item
 }
 

src/sheep/components/shop-categary-tree.vue

@@ -0,0 +1,52 @@
+<template>
+	<view class="tree-container">
+		<view v-for="item in nodeData" :key="item.id">
+			<view class="tree-item" @click.stop="toCurrentNode(item)">
+				<text>{{ item.name }}</text>
+			</view>
+
+			<shop-categary-tree
+				v-if="item.children && item.children.length"
+				:node-data="item.children"
+				:style="{ marginLeft: `${getLevel() * 60}rpx` }"
+				@currentNode="(v) => emit('currentNode', v)"
+			/>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import ShopCategaryTree from "./shop-categary-tree.vue"
+
+defineProps({
+	nodeData: {
+		type: Array<any>,
+		default: () => [],
+	},
+})
+const emit = defineEmits(["currentNode"])
+
+const toCurrentNode = (item) => {
+	emit("currentNode", item)
+}
+
+const getLevel = () => {
+	return 1
+}
+</script>
+
+<style scoped>
+.tree-container {
+	padding: 0 40rpx;
+}
+.tree-item {
+	border-bottom: 1rpx solid #e4e7ed;
+	display: flex;
+	padding: 10rpx 0 10rpx 20rpx;
+}
+.tree-item:hover {
+	background-color: #4b93ff;
+	border-radius: 10rpx;
+	color: #fff;
+}
+</style>