hongze_yb_xcx/pages-chart/allTypes.vue

<template>
    <view class="chart-alltype-page">
        <van-sticky style="background: #fff;width:100%">
            <van-search
                shape="round"
                :value="searchVal"
                placeholder="图表分类搜索"
                @change="searchValChange"
                @search="onSearch"
                @clear="onClearSearch"
                style="width:100%"
            />
        </van-sticky>
        <view class="list-wrap">
          <van-collapse :value="active" @change="change" :border="false">
            <van-collapse-item title="公共图库" name="common" :border="false">
              <view class="list">
                <view 
                  class="item" 
                  v-for="item in pubClassifyList" 
                  :key="item.myChartClassifyName"
                  @click="handleSelectClassify(item,true)"
                >{{item.myChartClassifyName}}</view>
              </view>
            </van-collapse-item>
            <van-collapse-item title="我的图库" name="mine" :border="false" custom-class="self-wrap">
              <view class="list" v-if="myClassifyList.length>0">
                <dragSorts
                  :list="myClassifyList"
                  :selectId="selectId"
                  :rowHeight="rowHeight"
                  :listHeight="classifyListHeight+20"
                  @onclick="myClassifyClick"
                ></dragSorts>
              </view>
            </van-collapse-item>
          </van-collapse>
        </view>
    </view>
</template>

<script>
import {apiChartClassifyList} from '@/api/chart'
import dragSorts from '@/components/chartClassifyItem/HM-dragSorts.vue'
export default {
  components: {
    dragSorts
  },
  data () {
    return {
      searchVal:'',
      active:['common','mine'],
      selectId:0,
      myClassifyList:[],
      pubClassifyList:[],

      classifyListHeight:0,//我的分类默认高度
      rowHeight:44,
    }
  },
  onLoad(options) {
    this.selectId=options.selectId
    this.getList()
  },
  methods: {
    // 搜索关键词变化
    searchValChange(e){
      this.searchVal=e.detail
    },

    onSearch(){
      this.getList()
    },

    onClearSearch(){
      this.searchVal=''
      this.getList()
    },


    change(e){
      this.active=e.detail
    },

    // 获取分类数据
    async getList(){
      const res=await apiChartClassifyList({Keywords:this.searchVal})
      if(res.code===200){
        this.myClassifyList=res.data.private_classify||[]
        this.pubClassifyList=res.data.public_classify||[]
        this.classifyListHeight=this.rowHeight*this.myClassifyList.length
      }
    },

    // 点击我的分类项
    myClassifyClick(e){
      this.handleSelectClassify(e.value.myChartClassifyId,false)
    },

    handleSelectClassify(item,isPublic){
      this.selectId=item.myChartClassifyId
      uni.$emit('classifyPageSelect', {selectId:this.selectId,isPublic:isPublic})
      uni.navigateBack()
    }
  }
};
</script>

<style lang="scss">
.chart-alltype-page{  
  .list-wrap{
    .van-cell__title, .van-cell__value{
      flex: none !important;
    }
    .van-cell:after{
      border: none !important;
    }
    .van-collapse-item__content{
      padding: 0;
    }
    .van-cell__title{
      font-size: 16px;
      font-weight: bold;
    }
    .van-hairline--top:after{
      border-top-width: 0 !important;
    }
    .self-wrap{
      margin-top: 60rpx;
    }
  }
  
  .list{
    .item{
      &:first-child{
        border-top: 1px solid #E5E5E5;
      }
      padding: 20rpx 34rpx;
      border-bottom: 1px solid #E5E5E5;
      color: #1F243A;
      font-size: 14px;
    }
  }
}

</style>