151 lines
3.5 KiB
Vue
151 lines
3.5 KiB
Vue
<template>
|
|
<div class="collspseBox">
|
|
<van-row class="collspse_item" v-for="(item, index) in data" :key="index" @click.stop="open(item, index)">
|
|
<van-col span="23" class="left">
|
|
<image src="@/static/bthgIcon/project_icon12.png" mode=""></image>
|
|
<view class="title">
|
|
{{ item.classificationName }}
|
|
<text>({{ item.children && item.children.length > 0 ? '支部数量' : '党员数量'}}:{{ item.children && item.children.length > 0 ? item.children.length : item.userCount ? item.userCount : 0}})</text>
|
|
</view>
|
|
</van-col>
|
|
<van-col span="1" class="icon"><van-icon v-if="item.children && item.children.length > 0"
|
|
:name="item.active ? 'arrow-down' : 'arrow'" color="#878D99" /></van-col>
|
|
<van-col span="24" class="content" v-if="item.children && item.children.length > 0"
|
|
:style="{ height: item.active ? 'auto' : '0' }">
|
|
<RecursiveCollapse :data="item.children" />
|
|
</van-col>
|
|
</van-row>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
// import RecursiveCollapse from "@/components/recursive-collapse/index.vue";
|
|
export default {
|
|
name: "RecursiveCollapse",
|
|
components: {
|
|
RecursiveCollapse: () =>
|
|
import("@/components/recursive-collapse/index.vue"),
|
|
},
|
|
/** 需要传进来的参数 */
|
|
props: {
|
|
data: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
activeNames: ["1"],
|
|
active: false,
|
|
};
|
|
},
|
|
components: {},
|
|
methods: {
|
|
open(item, index) {
|
|
/** 有下一级则继续展开，否则跳转详情 */
|
|
if (item.children && item.children.length > 0) {
|
|
/** 给当前 item 增加一个状态 */
|
|
this.$set(this.data[index], "active", !this.data[index].active);
|
|
} else {
|
|
/** 这里的逻辑按需求修改 */
|
|
// this.$router.push("/subjectTwo/" + item.id);
|
|
uni.navigateTo({
|
|
url: "/pages/projectEnd/guidancePartyBuilding/organizationalBuild/index?partyConstructionOrganizationId=" +
|
|
item.id
|
|
})
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.collspseBox {
|
|
// padding: 14px 10px;
|
|
|
|
.collspse_item {
|
|
background-color: #fff;
|
|
padding: 30rpx 24rpx;
|
|
// border-radius: 8px;
|
|
overflow: hidden;
|
|
// margin-bottom: 10px;
|
|
// box-shadow: 0 0px 6px rgba(100, 101, 102, 0.1);
|
|
|
|
.icon {
|
|
text-align: right;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
|
|
>.van-icon {
|
|
font-size: 40rpx !important;
|
|
color: #2f8ff3 !important;
|
|
}
|
|
}
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
>image {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
}
|
|
|
|
>view {
|
|
margin-left: 20rpx;
|
|
|
|
>text {
|
|
color: #9f9f9f;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
color: #2f3541;
|
|
white-space: nowrap;
|
|
text-wrap: nowrap;
|
|
word-break: keep-all;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-weight: bold;
|
|
font-family: "PingFang SC";
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
transition: all 0.5s;
|
|
|
|
.collspseBox {
|
|
padding: 0;
|
|
|
|
.collspse_item {
|
|
padding: 32rpx 0 0 24rpxpx;
|
|
margin-bottom: 0;
|
|
box-shadow: none;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
color: #2f3541;
|
|
font-family: "PingFang SC";
|
|
font-weight: 400;
|
|
position: relative;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
// .title::before {
|
|
// content: "";
|
|
// position: absolute;
|
|
// top: calc(50% - 1px);
|
|
// left: 0;
|
|
// width: 2px;
|
|
// height: 2px;
|
|
// background-color: #2f3541;
|
|
// border-radius: 2px;
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |