瀑布流搜索的bug

packageA/resourceLibrary/index.vue

@@ -1,263 +1,317 @@
 <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 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>
-        <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">
-                <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>
+      </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": ""//发布时间
-                }
+  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,
             },
-            filtrateList: []
-        }
+          },
+        })
+        .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), //选择的范围
+            },
+          ];
+        });
     },
-    onLoad(options) {
-        this.crumbs = [{
-            classname: options.name,
-            parentid: options.id
-        }, {
-            classname: "全部",
-            parentid: ''
-        }]
-        this.getType()
-        this.getList(true)
-        uni.setNavigationBarTitle({
-            title: '装备资源库',
+    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);
+        });
     },
-    onShow() {
-        this.updateList()
+    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);
+          });
+      }
     },
-    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]]] : []
-            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);
-                if (init) this.$refs.waterfallsFlowRef.refresh()
-                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
-            })
+    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)
-        }
-    }
-}
+      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;
+  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;
+  .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;
-        }
+    .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;
+  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 {
+    flex-shrink: 0;
+  }
 
-    }
+  .crumb::after {
+    content: ">";
+    padding: 0 2px;
+  }
 
-    .crumb::after {
-        content: ">";
-        padding: 0 2px;
-    }
+  .crumb:last-child {
+    font-weight: bold;
+  }
 
-    .crumb:last-child {
-        font-weight: bold;
-    }
-
-    .crumb:last-child::after {
-        content: "";
-    }
+  .crumb:last-child::after {
+    content: "";
+  }
 }
 
 .waterfalls {
-    width: 100vw;
-    padding: 10px;
-    box-sizing: border-box;
+  width: 100vw;
+  padding: 10px;
+  box-sizing: border-box;
 
-    &-item {
-        border-radius: 0 !important;
+  &-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;
-        }
+    &-title {
+      text-align: center;
+      line-height: 18.5px;
+      width: 100%;
+      background: #ffffff;
+      font-family: PingFang SC, PingFang SC;
+      font-size: 12px;
+      color: #333333;
     }
-
+  }
 }
 </style>