feat: 初始化
This commit is contained in:
George
71
pages/partner/ibTree/index.scss
Normal file
71
pages/partner/ibTree/index.scss
Normal file
@ -0,0 +1,71 @@
|
||||
.container {
|
||||
padding: 0 16px 24px;
|
||||
.swiper {
|
||||
margin: 14px 0 18px;
|
||||
}
|
||||
.title {
|
||||
margin: 14px 0 15px;
|
||||
}
|
||||
.searchWrapper {
|
||||
display: flex;
|
||||
column-gap: 8px;
|
||||
align-items: center;
|
||||
.searchKeyInputWrapper {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
.searchKeyOptionsWrapper {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 40px;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
border: 1px solid #dcdfe6;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.searchBtn {
|
||||
width: 92px;
|
||||
height: 34px;
|
||||
flex: 0 1 92px;
|
||||
}
|
||||
}
|
||||
.infoWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 11px;
|
||||
margin: 17px 0 26px;
|
||||
.ib,
|
||||
.client {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
column-gap: 4px;
|
||||
padding: 4px 8px;
|
||||
box-sizing: border-box;
|
||||
min-width: 112px;
|
||||
height: 32px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.value {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ib {
|
||||
background-color: #0f3675;
|
||||
}
|
||||
.client {
|
||||
background-color: #29bbe4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ibTree {
|
||||
padding-left: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
97
pages/partner/ibTree/index.vue
Normal file
97
pages/partner/ibTree/index.vue
Normal file
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<NavBar />
|
||||
<view class="container">
|
||||
<view class="title">
|
||||
<PageTitle :title="$t('menu.partner')" />
|
||||
</view>
|
||||
<view class="searchWrapper">
|
||||
<uni-easyinput primaryColor="#29BBE4" v-model="searchKey" :placeholder="$t('ibTree.nameOrEmail')" />
|
||||
<button class="primaryButton searchBtn">{{ $t('form.search') }}</button>
|
||||
</view>
|
||||
<view class="infoWrapper">
|
||||
<view class="ib">
|
||||
<image src="/static/partner/ib.png" mode="aspectFit" style="width: 19px; height: 19px"></image>
|
||||
<view class="info">
|
||||
{{ $t('home.ib') }}:
|
||||
<text class="value">{{ ibNum }}</text>
|
||||
{{ $t('common.unit.human') }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="client">
|
||||
<image src="/static/partner/ib.png" mode="aspectFit" style="width: 19px; height: 19px"></image>
|
||||
<view class="info">
|
||||
{{ $t('ib.customer') }}:
|
||||
<text class="value">{{ clientNum }}</text>
|
||||
{{ $t('common.unit.human') }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ibTree">
|
||||
<TreeItem :values="ibTreeData" :searchKey="searchKey" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TreeItem from './treeItem/index.vue';
|
||||
import { getIbtree } from '@/services/partner/myClient.ts';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
searchKey: '',
|
||||
ibTreeData: [],
|
||||
ibNum: 0,
|
||||
clientNum: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
formatTreeData(rawData) {
|
||||
let treeData = [];
|
||||
let tierTemp = 0;
|
||||
const formatFn = (arr, tier) => {
|
||||
return arr.map((item, index) => {
|
||||
if (item.user_type === 1) {
|
||||
this.ibNum += 1;
|
||||
} else if (item.user_type === 2) {
|
||||
this.clientNum += 1;
|
||||
}
|
||||
if (item.children) {
|
||||
return {
|
||||
...item,
|
||||
tier: tier,
|
||||
collapse: false,
|
||||
isLast: index === arr.length - 1,
|
||||
children: formatFn(item.children, tier + 1)
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...item,
|
||||
tier: tier,
|
||||
isLast: index === arr.length - 1,
|
||||
collapse: false
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
treeData = formatFn(rawData, tierTemp, {});
|
||||
return treeData;
|
||||
},
|
||||
async getIbtreeData() {
|
||||
const res = await getIbtree();
|
||||
if (res && res.code === 0) {
|
||||
this.ibTreeData = this.formatTreeData(res.data);
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getIbtreeData();
|
||||
},
|
||||
components: {
|
||||
TreeItem
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
62
pages/partner/ibTree/treeItem/index.scss
Normal file
62
pages/partner/ibTree/treeItem/index.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
79
pages/partner/ibTree/treeItem/index.vue
Normal file
79
pages/partner/ibTree/treeItem/index.vue
Normal file
@ -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>
|
||||
Reference in New Issue
Block a user