feat: 初始化

pages/partner/ibTree/treeItem/index.scss

@@ -0,0 +1,62 @@
+.treeItemWrapper {
+	&:last-child > .treeItem {
+		.line.vertical:nth-last-child(3) {
+			position: relative;
+			bottom: 9.5px;
+			height: 20px;
+		}
+		.line.vertical:nth-last-child(4) {
+			position: relative;
+			bottom: 9.5px;
+			height: 20px;
+		}
+	}
+	.treeItem {
+		display: flex;
+		align-items: center;
+		&.active {
+			background-color: #ddf3fb;
+		}
+		.line {
+			flex-shrink: 0;
+			width: 16px;
+			height: 1px;
+			background-color: #000;
+			&.transparent {
+				background-color: transparent;
+			}
+			&.vertical {
+				width: 1px;
+				height: 38px;
+				&.transparent {
+					background-color: transparent;
+				}
+			}
+		}
+		.collapseBtn {
+			flex-shrink: 0;
+			margin: 0px 8px;
+			width: 20px;
+			height: 20px;
+		}
+		.labelWrapper {
+			padding: 6px 0px;
+			.label {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				column-gap: 12px;
+				padding: 4px 15px;
+				height: 26px;
+				box-sizing: border-box;
+				color: #fff;
+				font-size: 12px;
+				background-color: #1dc0e4;
+				white-space: nowrap;
+				&.ib {
+					background-color: #0f3675;
+				}
+			}
+		}
+	}
+}

pages/partner/ibTree/treeItem/index.vue

@@ -0,0 +1,79 @@
+<template>
+	<view class="treeItemWrapper" v-for="item in formatedValues" :key="item.id">
+		<view :class="['treeItem', item.user_code === searchKey ? 'active' : '']">
+			<view v-for="i in item.tier" :key="item.user_code + i" style="display: flex; align-items: center">
+				<view :class="['line', 'vertical', item.lineConfig[i - 1] ? '' : 'transparent']"></view>
+				<view class="line transparent" :style="{ width: '36px' }"></view>
+			</view>
+			<view class="line vertical"></view>
+			<view class="line"></view>
+			<image
+				:src="`/static/partner/${item.collapse ? 'unfold' : 'collapse'}.png`"
+				mode="aspectFill"
+				class="collapseBtn"
+				v-if="item.children"
+				@click="() => toogleItemCollapse(item)"
+			></image>
+			<view class="labelWrapper">
+				<view :class="['label', isIb(item) ? 'ib' : '']">
+					<image :src="`/static/partner/${isIb(item) ? 'ib' : 'client'}.png`" mode="aspectFit" style="width: 19px; height: 19px"></image>
+					{{ `${item.user_code}(${item.id})` }}
+				</view>
+			</view>
+		</view>
+		<TreeItem v-if="item.children && !item.collapse" :values="item.children" :lineConfig="item.lineConfig" :searchKey="searchKey" :isLast="item.isLast" />
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'TreeItem',
+	props: {
+		values: {
+			type: Object,
+			required: true,
+			default: () => ({})
+		},
+		lineConfig: {
+			type: Array,
+			required: false,
+			default: () => []
+		},
+		searchKey: {
+			type: String,
+			required: false,
+			default: ''
+		},
+		isLast: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	methods: {
+		isIb(item) {
+			return item.user_type === 1;
+		},
+		toogleItemCollapse(item) {
+			item.collapse = !item.collapse;
+		}
+	},
+	computed: {
+		formatedValues() {
+			const tempValues = [...this.values];
+			tempValues?.forEach((item, index, arr) => {
+				if (index !== arr.length - 1 && arr.length > 1 && item.tier >= 1) {
+					item.lineConfig = [...this.lineConfig, true];
+				} else {
+					item.lineConfig = [...this.lineConfig, false];
+				}
+			});
+			return tempValues;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>