YXGJ/packageA/resourceLibrary/index.vue

<template>
  <view>
    <view class="head" catchtouchmove="true" @touchmove.stop.prevent="() => {}">
      <My_search :value="content.where.condition" @onSearch="onSearch">
        <view
          class="filtrate"
          v-if="filtrateList.length"
          hover-class="navigator-hover"
          @click="openFiltrate"
        >
          筛选
          <text class="iconfont icon-shaixuan" />
        </view>
      </My_search>
      <view class="crumbs">
        <view class="crumb" v-for="item in crumbs" :key="item.classname">{{
          item.classname
        }}</view>
      </view>
    </view>
    <view style="height: 1px" />
    <filtrate
      ref="Filtrate"
      :filtrateList="filtrateList"
      @onFiltration="onFiltration"
      @onInterrupt="onInterrupt"
    />
    <view style="height: 9px" />
    <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>
</template>

<script>
export default {
  data() {
    return {
      crumbs: [],
      list: [],
      content: {
        isDataAuth: true, //小程序默认传true
        where: {
          condition: "",
          status: "发布",
          type: "", //1:图片，2：视频，3：图文
          sat_sharematerial_classids: [[]],
          begindate_create: "", //创建时间
          enddate_create: "", //创建时间
          begindate: "", //发布时间
          enddate: "", //发布时间
        },
      },
      filtrateList: [],
    };
  },
  onLoad(options) {
    this.crumbs = [
      {
        classname: options.name,
        parentid: options.id,
      },
      {
        classname: "全部",
        parentid: "",
      },
    ];
    this.getType();
    this.getList(true);
    uni.setNavigationBarTitle({
      title: "装备资源库",
    });
  },
  onShow() {
    this.updateList();
  },
  methods: {
    getType() {
      this.$Http
        .basic({
          id: "20221102143202",
          content: {
            pageSize: 9999,
            parentid: this.crumbs[0].parentid,
            where: {
              isenable: 1,
            },
          },
        })
        .then((res) => {
          console.log("获取分类列表", res);
          if (this.cutoff(res.msg)) return;
          this.filtrateList = [
            {
              title: "分类",
              key: "一级分类", //提交时返回的Key
              showKey: "classname", //显示的key
              selected: "sat_sharematerial_classid", //选择时选择的字段
              value: "", //提交时选中的value
              defaultVal: "", //返回的默认值
              isAll: true,
              interrupt: true,
              rang: [
                {
                  classname: "全部",
                  sat_sharematerial_classid: "",
                  children: [],
                },
              ].concat(res.data), //选择的范围
            },
          ];
        });
    },
    getList(init = false) {
      if (this.paging(this.content, init)) return;
      let ids = this.crumbs.map((v) => v.parentid).filter((v) => v);
      this.content.where.sat_sharematerial_classids = ids.length
        ? [[ids[ids.length - 1]]]
        : [];
      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.pageNumber == 1 ? res.data : this.list.concat(res.data);
          this.content = this.$refs.List.paging(this.content, res);
        });
    },
    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);
          });
      }
    },
    wapperClick(e) {
      let url = e.ispicture
        ? "/packageA/resourceLibrary/picture?id="
        : "/packageA/resourceLibrary/detail?id=";
      uni.navigateTo({ url: url + e.sat_sharematerialid });
    },
    openFiltrate() {
      this.$refs.Filtrate.changeShow();
    },
    onSearch(condition) {
      this.content.where.condition = condition;
      this.getList(true);
    },
    onInterrupt({ item, index, option }) {
      let filtrateList = this.$refs.Filtrate.list;
      const i = filtrateList.findIndex((v) => v.title == "下级分类");
      if (option.children.length) {
        const obj = {
          title: "下级分类",
          key: "二级分类",
          showKey: "classname",
          selected: "sat_sharematerial_classid",
          value: "",
          defaultVal: "",
          isAll: true,
          rang: [{ classname: "全部", sat_sharematerial_classid: "" }].concat(
            option.children
          ),
        };
        i == -1 ? filtrateList.push(obj) : (filtrateList[i] = obj);
      } else {
        i == -1 ? "" : filtrateList.pop();
      }
      this.$refs.Filtrate.list = filtrateList || JSON.parse(JSON.stringify());
    },
    onFiltration(e) {
      let crumbs = [this.crumbs[0]];
      crumbs.push({
        classname: e.一级分类.classname,
        parentid: e.一级分类.sat_sharematerial_classid,
      });
      if (e.二级分类)
        crumbs.push({
          classname: e.二级分类.classname,
          parentid: e.二级分类.sat_sharematerial_classid,
        });

      this.crumbs = crumbs;
      this.getList(true);
    },
    statusChange({ name }) {
      this.content.where.status = name == "全部" ? "" : name;
      this.getList(true);
    },
  },
};
</script>

<style lang="scss" scoped >
.head {
  padding: 10px;
  width: 100%;
  background: #fff;
  box-sizing: border-box;

  .filtrate {
    line-height: 30px;
    padding: 0 10px;
    font-family: PingFang SC, PingFang SC;
    font-size: 14px;
    color: #333333;
    border-radius: 3px;
    margin-left: 10px;

    .iconfont {
      margin-left: 3px;
      color: #bbbbbb;
    }
  }
}

.crumbs {
  display: flex;
  line-height: 17px;
  font-family: PingFang SC, PingFang SC;
  font-size: 12px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 10px;

  .crumb {
    flex-shrink: 0;
  }

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

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

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

.waterfalls {
  width: 100vw;
  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>