feat:树形分类的新增和修改

src/sheep/api/prosperityShop.ts

@@ -78,4 +78,27 @@ export default {
 			data,
 		})
 	},
+	// 删除商品分类
+	delCategary: (id: any): Promise<any> => {
+		return request({
+			url: `/supermarket/app/mall/merchant/category/${id}`,
+			method: "DELETE",
+		})
+	},
+	// 新增商品分类
+	addCategary: (data: any): Promise<any> => {
+		return request({
+			url: `/supermarket/app/mall/merchant/category/create`,
+			method: "POST",
+			data,
+		})
+	},
+	// 编辑商品分类
+	editCategary: (data: any): Promise<any> => {
+		return request({
+			url: `/supermarket/app/mall/merchant/category/update`,
+			method: "PUT",
+			data,
+		})
+	},
 }

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

@@ -1,6 +1,6 @@
 <template>
 	<view class="max-h-[60vh] overflow-y-auto mb-20rpx">
-		<shop-categary-tree :node-data="categoryTree" @currentNode="currentNode" />
+		<shop-categary-tree v-model="selectedNode" :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">
@@ -22,19 +22,18 @@ defineProps({
 })
 const emit = defineEmits(["confirm", "cancel"])
 
+const selectedNode = ref<any>({})
 const selectedCategary = ref<any>({})
 
 const currentNode = (item) => {
-	console.log(item)
-
 	selectedCategary.value = item
 }
 
 function onConfirm() {
-	if (!selectedCategary.value) {
+	if (!selectedNode.value) {
 		return uni.showToast({ title: "请选择分类", icon: "none" })
 	}
-	emit("confirm", { categoryId: selectedCategary.value.id, categoryName: selectedCategary.value.name })
+	emit("confirm", { ...selectedNode, categoryId: selectedNode.value.id, categoryName: selectedNode.value.name })
 }
 </script>
 

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

@@ -1,11 +1,12 @@
 <template>
 	<view class="tree-container">
 		<view v-for="item in nodeData" :key="item.id">
-			<view class="tree-item" @click.stop="toCurrentNode(item)">
+			<view class="tree-item" :style="{ backgroundColor: item.id == selectedNode.id ? '#4b93ff' : '' }" @click.stop="toCurrentNode(item)">
 				<text>{{ item.name }}</text>
 			</view>
 
 			<shop-categary-tree
+				v-model="selectedNode"
 				v-if="item.children && item.children.length"
 				:node-data="item.children"
 				:style="{ marginLeft: `${getLevel() * 60}rpx` }"
@@ -25,9 +26,11 @@ defineProps({
 	},
 })
 const emit = defineEmits(["currentNode"])
+const selectedNode = defineModel<any>("modelValue")
 
 const toCurrentNode = (item) => {
-	emit("currentNode", item)
+	// emit("currentNode", item)
+	selectedNode.value = item
 }
 
 const getLevel = () => {
@@ -43,10 +46,6 @@ const getLevel = () => {
 	border-bottom: 1rpx solid #e4e7ed;
 	display: flex;
 	padding: 10rpx 0 10rpx 20rpx;
-}
-.tree-item:hover {
-	background-color: #4b93ff;
 	border-radius: 10rpx;
-	color: #fff;
 }
 </style>