mdyxgj/packageA/resourceLibrary/index.vue

<template>
  <view>
    <!-- 二级分类 tabs -->
    <view class="tabs2-box" v-if="secondLevelTabs.length">
      <u-tabs :list="secondLevelTabs" :activeStyle="{ fontWeight: 'bold', color: '#C30D23' }" lineColor="#C30D23"
        keyName="classname" @change="changeSecondLevel">
        <template #right>
          <view class="nav-search" hover-class="navigator-hover" @click="changeSearchShow">
            <view class="iconfont icon-sousuo" :style="{ color: searchShow ? '#C30D23' : '#999999' }" />
          </view>
        </template>
      </u-tabs>
    </view>
    <u-transition :show="searchShow">
      <view class="My_search-box">
        <My_search :focus="searchShow" :value="content.where.condition" @onSearch="onSearch">
          <view class="cancel" v-if="content.where.condition" hover-class="navigator-hover"
            @click="onSearch('')">
            取消
          </view>
          <view v-else style="width: 5px;" />
        </My_search>
      </view>
    </u-transition>
    <!-- 三级分类 tabs -->
    <view class="tabs3-box" v-if="thirdLevelTabs.length">
      <u-tabs ref="tabs3" :list="thirdLevelTabs" :current="thirdLevelActive"
        :activeStyle="{ color: '#C30D23', backgroundColor: '#fff', borderRadius: '14px', padding: '8rpx 10px' }"
        :inactiveStyle="{ color: '#fff' }" lineColor="#202E42" keyName="classname" :is-scroll="true"
        @click="changeThirdLevel" />
    </view>
    <view class="list">
      <view class="head">
        <view class="crumbs u-line-1">
          <text class="crumb" v-for="item in crumbs" :key="item.classname">{{ item.classname }}</text>
        </view>
        <view class="total">共{{ total }}个资源</view>
      </view>
      <My_listbox ref="List" @getlist="getList" boxBackground="#fff">
        <view class="waterfalls" v-if="list.length">
          <custom-waterfalls-flow
            ref="waterfallsFlowRef"
            :value="list"
            :column="2"
            :columnSpace="1.5"
            :seat="2"
            @wapperClick="wapperClick"
            @imageClick="wapperClick"
          >
            <!-- #ifdef MP-WEIXIN -->
            <view
              class="waterfalls-item"
              v-for="(item, index) in list"
              :key="index"
              slot="slot{{index}}"
            >
              <view class="waterfalls-item-title u-line-2">{{ item.title }}</view>
            </view>
            <!-- #endif -->
            <!-- #ifndef MP-WEIXIN -->
            <template v-slot:default="item">
              <view class="waterfalls-item">
                <view class="waterfalls-item-title u-line-2">{{
                  item.title
                }}</view>
              </view>
            </template>
            <!-- #endif -->
          </custom-waterfalls-flow>
        </view>
      </My_listbox>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      content: {
        isDataAuth: true, //小程序默认传true
        where: {
          condition: "",
          status: "发布",
          type: "", //1:图片，2：视频，3：图文
          sat_sharematerial_classids: [[]],
          begindate_create: "", //创建时间
          enddate_create: "", //创建时间
          begindate: "", //发布时间
          enddate: "", //发布时间
        },
      },
      secondLevelList: [],
      secondLevelTabs: [],
      thirdLevelTabs: [],
      thirdLevelActive: 0,
      parentid: '',
      searchShow: false,
      searchShowAntiShake: null,
      sat_sharematerial_classid: '',
      crumbs: [],
      total: 0
    };
  },
  onLoad(options) {
    console.log(options)
    this.parentid = options.id
    this.crumbs = [{
      classname: options.name,
      sat_sharematerial_classid: options.id
    }]
    this.sat_sharematerial_classid = options.id
    this.getType()
    this.getList(true)
    uni.setNavigationBarTitle({
      title: options.name
    });
  },
  onShow() {
    this.updateList();
  },
  methods: {
    getType() {
      this.$Http.basic({
        "id": "20221102143202",
        content: {
          pageSize: 9999,
          parentid: this.parentid,
          "where": {
            "isenable": 1
          }
        }
      }).then(res => {
        console.log("获取二级列表", res)
        if (this.cutoff(res.msg)) return;
        this.secondLevelList = res.data
        // 添加"全部"选项
        if (res.data.length && res.data[0].classname != '全部') {
          res.data.unshift({
            classname: "全部",
            sat_sharematerial_classid: this.parentid,
            children: []
          })
        }
        this.secondLevelTabs = res.data
        // 初始化选中第一个
        this.changeSecondLevel(res.data[0])
      })
    },
    changeSecondLevel(item) {
      if (this.sat_sharematerial_classid == item.sat_sharematerial_classid) return;
      this.sat_sharematerial_classid = item.sat_sharematerial_classid;

      // 更新面包屑
      this.crumbs = [this.crumbs[0], item];

      // 处理三级分类
      let children = item.children || []
      if (children.length && children[0].classname != '全部') {
        children.unshift({
          classname: "全部",
          sat_sharematerial_classid: item.sat_sharematerial_classid
        })
      }
      this.thirdLevelTabs = children
      this.thirdLevelActive = 0

      try {
           if (this.thirdLevelTabs.length) {
        setTimeout(() => {
          this.$refs.tabs3?.update()
        }, 100)
      }
      } catch (error) {
        
      }
      this.$refs.List.setHeight();
      this.getList(true)
    },
    changeThirdLevel(e) {
      const { index } = e;
      let item = this.thirdLevelTabs[index];
      if (this.sat_sharematerial_classid == item.sat_sharematerial_classid) return;
      this.sat_sharematerial_classid = item.sat_sharematerial_classid;
      this.thirdLevelActive = index;

      // 更新面包屑
      this.crumbs = [this.crumbs[0], this.crumbs[1], item];
      this.$refs.List.setHeight();
      this.getList(true);
    },
    getList(init = false) {
      if (this.paging(this.content, init)) return;

      // 使用当前选中的分类ID
      this.content.where.sat_sharematerial_classids = this.sat_sharematerial_classid ? [[this.sat_sharematerial_classid]] : []

      if (init) this.list = JSON.parse(JSON.stringify([]));
      this.$Http
        .basic({
          id: 20240407094702,
          content: this.content,
        })
        .then((res) => {
          this.$refs.List.RefreshToComplete();
          console.log("获取装备资源库列表", res);
          if (this.cutoff(res.msg)) return;
          res.data = res.data.map((v) => {
            v.image = v.attinfos.length
              ? this.getSpecifiedImage(
                  v.attinfos.find((s) => s.usetype == "avatar") || v.attinfos[0]
                )
              : "";
            return v;
          });

          this.list =
            res.firstPage ? res.data : this.list.concat(res.data);
          this.content = this.$refs.List.paging(this.content, res);
          this.total = res.total || 0
        });
    },
    updateList() {
      if (this.content.pageNumber && this.content.pageNumber >= 2) {
        let content = this.paging(this.content, true, true);
        this.$Http
          .basic({
            id: "20240407094702",
            content,
          })
          .then((res) => {
            console.log("更新装备资源库列表", res);
            if (this.cutoff(res.msg)) return;
            this.list = res.data;
            this.$refs.List.paging(content, res, true);
            this.total = res.total || 0
          });
      }
    },
    wapperClick(e) {
      let url = e.ispicture
        ? "/packageA/resourceLibrary/picture?id="
        : "/packageA/resourceLibrary/detail?id=";
      uni.navigateTo({ url: url + e.sat_sharematerialid });
    },
    onSearch(condition) {
      if (condition == this.content.where.condition) return;
      this.content.where.condition = condition;
      this.getList(true);
    },
    changeSearchShow() {
      this.searchShow = !this.searchShow;
      clearTimeout(this.searchShowAntiShake);
      this.searchShowAntiShake = setTimeout(() => {
        if (this.$refs.List) {
          this.$refs.List.setHeight();
        }
      }, 350);
    }
  },
};
</script>

<style lang="scss" scoped >
.nav-search {
    display: flex;
    align-items: center;
    padding: 0 15px;
    height: 44px;
    border-radius: 8px;
    margin-right: 5px;
}

.tabs2-box {
    background: #fff;
}

.tabs3-box {

    /deep/ .u-tabs {
        height: 44px;
        background: #202E42;
    }
}

.My_search-box {
    background: #fff;
    width: 100vw;
    padding: 5px;
    padding-left: 10px;
    box-sizing: border-box;

    .cancel {
        line-height: 30px;
        margin-left: 10px;
        padding: 0 10px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 14px;
        color: #666666;
        border-radius: 4px;
    }
}

.list {
    padding: 10px;
    box-sizing: border-box;
    background: #fff;

    .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 17px;
        line-height: 17px;

        .crumbs {
            flex: 1;
            width: 0;

            .crumb {
                flex-shrink: 0;
                font-size: 12px;
                font-family: PingFang SC, PingFang SC;
            }

            .crumb::after {
                content: ">";
                padding: 0 2px;
            }

            .crumb:last-child {
                font-weight: bold;
            }

            .crumb:last-child::after {
                content: "";
            }
        }

        .total {
            flex-shrink: 0;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 12px;
            color: #999999;
            margin-left: 20px;
        }
    }
}

.waterfalls {
  padding: 10px;
  box-sizing: border-box;

  &-item {
    border-radius: 0 !important;

    &-title {
      text-align: center;
      line-height: 18.5px;
      width: 100%;
      background: #ffffff;
      font-family: PingFang SC, PingFang SC;
      font-size: 12px;
      color: #333333;
    }
  }
}
</style>