sociology_app/components/tagTree.vue

<template>
  <view>
    <uni-drawer
      ref="showRight"
      mode="right"
      :width="320"
      @change="changeD($event, 'showRight')"
    >
      <view class="close">
        <view class="zhan" style="width: 100%"></view>
        <u-icon
          name="close"
          @click="closeDrawer('showRight')"
          color="#117e4c"
          size="28"
        ></u-icon>
      </view>
      <view class="proTitle">
        <text>请选择课程分类</text>
      </view>
      <scroll-view class="warp" scroll-y="true" style="max-height: 80vh">
        <uni-collapse
          accordion
          v-if="treeList.length > 0"
          @change="collapseChange"
        >
		<view v-for="(item, index) in treeList" @click.stop="clickCourseInfo(item)" style=" padding: 20rpx;box-sizing: border-box;border-bottom: 1px solid #ebeef5;"> {{  item.title}}</view>
		
        <!--   <uni-collapse-item
            v-for="(item, index) in treeList"
            :key="index"
            :title="item.title"
            :show-animation="true"
			@click.stop="clickCourseInfo(item)"
          >
            <view class="content">
          
              <view class="sub1List">
                <view
                  class="item leve2"
                  @click.stop="clickCourseInfo(item)"
                  v-if="item.isLast == 1"
                >
                  <text class="textss"> 本目录下全部课程</text>
                </view>
                <view
                  :class="['item', 'leve2']"
                  v-for="(item1, index1) in item.children"
                  :key="index1"
                  @click.stop="clickCourseInfo(item1)"
                >
                  <text class="textss"> {{ item1.title }}</text>
                  <view class="sub2List" v-if="item1.children">
                    <view
                      :class="['item', 'leve3']"
                      v-for="(item2, index2) in item1.children"
                      :key="index2"
                      @click.stop="clickCourseInfo(item2)"
                    >
                      <text class="textss">{{ item2.title }}</text>
                      <view
                        class="sub3List"
                        v-if="
                          item2.isLast == 0 &&
                          item2.children &&
                          item2.children.length > 0
                        "
                      >
                       
                        <text
                          class="textss"
                          v-for="(item3, index3) in item2.children"
                          :key="index3"
                          @click.stop="clickCourseInfo(item3)"
                          >{{ item3.title }}</text
                        >
                      
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </uni-collapse-item> -->
        </uni-collapse>
      </scroll-view>
    </uni-drawer>
  </view>
</template>

<script>
export default {
  name: "tagTree",
  // props:['treeList'],
  data() {
    return {
      treeList: [],
    };
  },
  methods: {
    showDrawer(e) {
      this.$refs[e].open();
      // this.videoContext.pause()
      // this.showTemp = true
      console.log("打开抽屉");
    },
    getData() {
      var data = { id: 0 };
      this.$http
        .request({
          url: "sociology/home/getSociologyLabels",
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data,
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })

        .then((res) => {
          if (res.code == 0 && res.labels.length > 0) {
            this.treeList = res.labels;
          } else {
            this.treeList = [];
          }
          this.showDrawer("showRight");
        })
        .catch((e) => {
          console.log(e, "报错");
          uni.showToast({
            title: "获取课程分类失败",
            icon: "none",
          });
        });
    },
    clickCourseInfo(val) {
      this.$emit("clickCourseInfo", val);
      this.closeDrawer("showRight");
    },
    closeDrawer(e) {
      this.$refs[e].close();
    },
    changeD(e, type) {
      // console.log((type === 'showRight' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
      this[type] = e;
      if (!e) {
        console.log("关闭弹窗");
      }
    },
    collapseChange(e) {
      // console.log(e, '折叠面板点击');
      // if (e) {
      // 	this.tagId = this.treeList[e].id
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
// /deep/ uni-drawer{ height: 50vh !important;
// 	.uni-drawer__content{
// 		overflow-y: scroll !important;
// 	}
// }
.sub1List {
  background-color: #f7f7f7;
  // padding-left: 20rpx;
}

.content {
  .item {
    background-color: #fff;
    line-height: 80rpx;
    font-size: 28rpx;
    color: #1b2a32;
    // border-bottom: 1px solid #dae8f0;

    text {
      padding-left: 20rpx;
    }

    .item:last-child {
      border-bottom: 0;
    }
  }

  .item.active {
    // background-color: #aed1ec;
    color: #fff;
    background-image: linear-gradient(
      90deg,
      #3ab3ae 0%,
      #00e1ec 100%
    ) !important;
  }

  .textss {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #ebeef5;
  }

  .leve2 {
    .textss {
      padding-left: 20rpx;
    }
  }

  .leve2 {
    .textss {
      padding-left: 40rpx;
    }
  }

  .leve3 {
    .sub3List {
      border-bottom: 1px solid #ebeef5;
      padding-left: 60rpx;
      .textss {
        background-color: #ebeef5;
        border-radius: 20rpx;
        padding: 10rpx 14rpx !important;
      }
    }
    .textss {
      padding-left: 60rpx;
      display: inline;
      margin-right: 20rpx;
      border: none !important;
    }
  }

  .leve4 {
    .textss {
      padding-left: 80rpx;
    }
  }
}
.proTitle {
  text-align: center;
  padding: 20rpx 0;
  margin-top: 60rpx;
  // margin-bottom: 20rpx;
  color: #888;
  font-size: 28rpx;
}
.close {
  display: flex;
  justify-content: right;
  padding-top: 60rpx;
  padding-right: 20px;
}.uni-collapse-item .uni-collapse-item-header .uni-collapse-item-arrow {
    display: none; /* 隐藏右箭头 */
}
</style>