feat:组件调整

src/sheep/components/node-tree.vue

@@ -3,17 +3,18 @@
 		<view v-for="item in nodeData" :key="item.id">
 			<view
 				class="tree-item"
-				:style="item.id == selectedNode.id ? { backgroundColor: '#4b93ff', color: '#fff' } : { color: '#000' }"
+				:style="item.id == selectedNode.id ? { borderColor: '#1879ff' } : { color: '#000' }"
 				@click.stop="toCurrentNode(item)"
 			>
+				<image class="tree-item-icon" :src="filePath(item.picUrl)" />
 				<text>{{ item.name }}</text>
 			</view>
 
-			<shop-categary-tree
+			<node-tree
 				v-model="selectedNode"
 				v-if="item.children && item.children.length"
 				:node-data="item.children"
-				:style="{ marginLeft: `${getLevel() * 60}rpx` }"
+				:style="{ marginLeft: `${getLevel(item.level) * 60}rpx` }"
 				@currentNode="(v) => emit('currentNode', v)"
 			/>
 		</view>
@@ -21,14 +22,10 @@
 </template>
 
 <script setup lang="ts">
-import ShopCategaryTree from "./shop-categary-tree.vue"
+import { filePath } from "../utils/file"
+import NodeTree from "./node-tree.vue"
 
-defineProps({
-	nodeData: {
-		type: Array<any>,
-		default: () => [],
-	},
-})
+withDefaults(defineProps<{ nodeData: any[] }>(), { nodeData: () => [] })
 const emit = defineEmits(["currentNode"])
 const selectedNode = defineModel<any>("modelValue")
 
@@ -37,19 +34,26 @@ const toCurrentNode = (item) => {
 	selectedNode.value = item
 }
 
-const getLevel = () => {
-	return 1
+const getLevel = (level) => {
+	return level
 }
 </script>
 
 <style scoped>
 .tree-container {
-	padding: 0 40rpx;
+	overflow: hidden;
 }
 .tree-item {
-	border-bottom: 1rpx solid #e4e7ed;
+	border: 4rpx solid #e4e7ed77;
+	margin-bottom: 16rpx;
 	display: flex;
-	padding: 10rpx 0 10rpx 20rpx;
+	align-items: center;
+	padding: 10rpx 20rpx;
 	border-radius: 10rpx;
 }
+.tree-item-icon {
+	width: 40rpx;
+	height: 40rpx;
+	margin-right: 10rpx;
+}
 </style>

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

@@ -1,9 +1,9 @@
 <template>
-	<view class="max-h-[60vh] overflow-y-auto mb-20rpx">
-		<shop-categary-tree v-model="selectedNode" :node-data="categoryTree" />
-		<view v-if="categoryTree.length === 0" class="text-center text-[#888] py-[40rpx]">暂无数据</view>
+	<view class="mb-20rpx">
+		<node-tree v-model="selectedNode" :node-data="categoryTree" />
+		<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">
+	<view class="px-20rpx py-2 flex justify-between sticky bottom-0 bg-white">
 		<tm-button skin="thin" block @click="emit('cancel')">取消</tm-button>
 		&nbsp;&nbsp;
 		<tm-button block :disabled="!selectedNode" @click="onConfirm">确定</tm-button>
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import { ref } from "vue"
-import ShopCategaryTree from "@/sheep/components/shop-categary-tree.vue"
+import NodeTree from "@/sheep/components/node-tree.vue"
 
 defineProps({
 	categoryTree: {
@@ -31,5 +31,3 @@ function onConfirm() {
 	emit("confirm", { ...selectedNode, categoryId: selectedNode.value.id, categoryName: selectedNode.value.name })
 }
 </script>
-
-<style scoped></style>