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"
                clear-trigger="always"
                style="width:100%"
            />
        </van-sticky>
        <view class="empty-box" v-if="myClassifyList.length==0&&pubClassifyList.length==0">
          <image
            :src="globalImgUrls.chartEmpty"
            mode="widthFix"
          />
          <view>暂时找不到对应分类，试试别的搜索词吧~</view>
        </view>
        <view class="list-wrap" v-else>
          <block v-if="userInfo.is_inner==1">
          <van-collapse :value="active" @change="change" :border="false">
            <van-collapse-item title="公共图库" name="common" :border="false">
              <view class="list">
                <view 
                  :class="['item',selectId==item.myChartClassifyId?'active':'']" 
                  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"
                  @confirm="myClassifyMoveEnd"
                ></dragSorts>
              </view>
            </van-collapse-item>
          </van-collapse>
          </block>
          <block v-else>
          <view class="list">
            <view 
              :class="['item',selectId==item.myChartClassifyId?'active':'']" 
              v-for="item in pubClassifyList" 
              :key="item.myChartClassifyName"
              @click="handleSelectClassify(item,true)"
            >{{item.myChartClassifyName}}</view>
          </view>
          </block>
        </view>
    </view>
</template>

<script>
import {apiChartClassifyList,apiClassifyMove} 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,false)
    },

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

    // 分类移动
      async myClassifyMoveEnd(e){
        const moveTarget=e.moveRow
        const index=e.moveTo// 拖动后的序号
        const list=e.list//拖动后的列表
        // console.log(moveTarget.myChartClassifyId);
        // console.log(index);
        // console.log(list);
        const PrevClassifyId=list[index-1]&&list[index-1].myChartClassifyId||0
        const NextClassifyId=list[index+1]&&list[index+1].myChartClassifyId||0
        const res=await apiClassifyMove({
          MyChartClassifyId:moveTarget.myChartClassifyId,
          PrevClassifyId:PrevClassifyId,
          NextClassifyId:NextClassifyId
        })
        if(res.code===200){
          this.myClassifyList=list
        }else{
          uni.showToast({
            title: '移动失败',
            icon: 'none'
          })
        }
      },
  }
};
</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;
    }
    .active{
      color: #E3B377;
    }
  }

  .empty-box{
    text-align: center;
    font-size: 32rpx;
    color: #999;
    padding-top: 150rpx;
    image{
      width: 346rpx;
      margin-bottom: 57rpx;
    }
  }
}

</style>