vant版本分页页面

标签 bo-tag

 <div class="list-tag lst-tag-c">
              <van-tag
                plain
                v-for="(itemTag, tagI) in item['insResTag'] || []"
                :key="tagI"
                type="danger"
                >{{ itemTag }}</van-tag
              >
            </div>

{wmkey}-page（修改resType、bt-insurance-resource、ResType）

<template>
  <div class="g-pb insurance-resource-page">
    <bs-back title="资源|列表" left-text="返回" left-arrow> </bs-back>

    <van-sticky>
      <van-cell class="page-progress">
        <template #default>
          {{
            `总记录${used.paging.totalCount || 0}条,总页数${
              used.paging.totalPage || 0
            }页,完成${used.paging.pageIndex || 0}页。`
          }}
          <!-- :pivot-text="`总记录${used.paging.totalCount}条,总页数${used.paging.totalPage},完成${used.paging.pageIndex}页,记录比${used.paging.currentRate || 0}%`" -->
          <van-progress
            stroke-width="10"
            :percentage="used.paging.currentRate || 0"
          ></van-progress>
        </template>
      </van-cell>
      <bo-search
        ref="boSname"
        :placeholder="`输入关键字后回车`"
        v-model="filter.word"
        @change="handleSearchRemote"
        :right-slot="true"
      >
        <template slot="right-slot">
          <van-button
            type="primary"
            size="small"
            v-if="(userActions || []).includes('add')"
            @click.prevent="handleToAdd({ insResId: 0 })"
            >添加</van-button
          >
        </template>
      </bo-search>
    </van-sticky>
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <!--  @refresh="onPullToBottomRefresh" -->
      <van-empty
        v-if="used.data.length === 0"
        :image="searchImg"
        :description="descriptionEmpty"
      ></van-empty>
      <van-list
        v-else
        v-model="pullToBottom.loading"
        :finished="pullToBottom.finished"
        :finished-text="pullToBottom.finishedText"
        :error.sync="pullToBottom.error"
        :error-text="pullToBottom.errotText"
        @load="onPullToBottomLoad"
      >
        <!-- :num="num" -->
        <van-card
          v-for="(item, i) in used.data"
          :key="i"
          :id="`${scrollId}scroll${i}`"
          :desc="(item.resType || {}).name"
          :title="item.insResName"
          :thumb="item.imgUrl || $appConfig.empty.noimgdata"
        >
          <template #tags>
            <div class="list-tag lst-tag-c">
              <van-tag
                plain
                v-for="(itemTag, tagI) in item['insResTag'] || []"
                :key="tagI"
                type="danger"
                >{{ itemTag }}</van-tag
              >
            </div>
          </template>
          <template #footer>
            <!-- icon="add-o" -->
            <van-button
              size="mini"
              v-if="num > 0"
              type="default"
              @click="handleToDetail(item)"
              >明细</van-button
            >
            <van-button
              size="mini"
              type="warning"
              v-if="(userActions || []).includes('edit')"
              @click="handleToEdit(item)"
              >修改</van-button
            >
          </template>
        </van-card>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<style></style>

<script>
/* eslint-disable no-unused-vars */
require(`./style.scss`);
import method from "./method";
export default {
  //商城主页面
  name: "insurance-resource-page",
  routerUsed: {
    path: "/insurance-resource/page/:filterInsResIdCP",
    name: "insurance-resource-page",
    meta: {
      keepAlive: true,
      name: "insurance-resource-page",
    },
    component: (r) => require.ensure([], () => r(require("./index")), "bt-bs"),
  },
  data() {
    return {
      num: 3,
      footConfig: {
        selected: "insurance-resource-page",
      },
      //公共必须参数 start
      firsted: false,
      userActions: [],
      scrollId: "",
      value: {},
      rootMeta: {
        mkey: "bt-insurance-resource",
        field: "manager",
      },
      filter: {
        _menuId: "bt-t-deve-bt-20200-0b751e07-854f-434",
        _nodejs: "common-data",
        pageIndex: 1,
        pageSize: 4,
      },
      pullToBottom: {
        loading: true,
        finished: false,
        error: false,
        errorText: "请求失败，点击重新加载",
        finishedText: "没有更多了",
      },
      //公共参数 end
      //===========公共部分  start

      //"数据加载中"
      descriptionEmpty: null,
      firstLoad: true,
      loading: false,
      merc: {
        data: [],
        value: null,
      },
      used: {
        data: [],
        paging: {},
      },
      //===========公共部分 end
    };
  },
  created() {
    //===========公共部分  start
    this.scrollId = this.$crypto.md5(this.$route.fullPath);
    method.init(this);
    //===========公共部分 end
    let that = this;
    //加载功能信息 start
    that.$bsAjax
      .getUserFunction({
        menuId: that.filter._menuId,
      })
      .then((res) => {
        that.userActions = (((res || {}).data || {}).data || {}).actions || [];
      });
    //加载功能信息 end
  },
  computed: {
    //===========公共部分  start
    searchImg: () => {
      // <van-empty slot="empty" :image="searchImg" description="暂无数据" ></van-empty>
      return window.$appConfig.empty.search;
    },
    //===========公共部分 end
  },
  methods: {
    onPullToBottomLoad() {
      // debugger;
      let that = this;
      if (that.filter.pageIndex < that.used.paging.totalPage) {
        that.onPullToBottomRefresh();
      } else {
        that.loading = false;
      }
    },
    onPullToBottomRefresh() {
      let that = this;
      // 清空列表数据
      that.pullToBottom.finished = false;
      that.pullToBottom.loading = true;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      if (that.filter.pageIndex < that.used.paging.totalPage) {
        that.filter.pageIndex = that.filter.pageIndex + 1;
        method.loadDataComm(that);
      } else {
        that.pullToBottom.finished = true;
        that.pullToBottom.loading = false;
        that.loading = false;
      }
    },
    onRefresh() {
      let that = this;
      // if (that.firsted === true) {
      that.filter.pageIndex = 1;
      that.used.data = [];
      that.used.paging = {};
      method.loadDataComm(that);
      // }
    },
    handleSearchRemote(v) {
      this.filter.remoteName = v;
      this.$emit("on-remote-search", this.filter.remoteName);
    },
    handleToEdit(item) {
      this.$link.toLinkUrl(
        `/insurance-resource/edit/${item["insResId"]}`,
        this,
        {
          query: { insResId: item["insResId"] },
        }
      );
    },
    handleToAdd(item) {
      this.$link.toLinkUrl(
        `/insurance-resource/add/${item["insResId"]}`,
        this,
        {
          query: { insResId: item["insResId"] },
        }
      );
    },
    handleToDetail(item) {
      this.$link.toLinkUrl(
        `/insurance-resource/detail/${item["insResId"]}`,
        this,
        {
          query: { insResId: item["insResId"] },
        }
      );
    },
    onSubmitModify(item) {
      method.onSubmitModify(this, item);
    },
    onSubmitDel(item) {
      method.onSubmitDel(this, item);
    },
  },
  watch: {
    "$route.params.filterInsResIdCP": function (to, from) {
      let that = this;
      if (to && to !== from) {
        let that = this;
        method.loadDataComm(that);
        //console.log("page");
        setTimeout(() => {
          that.loading = false;
        }, 1500);
      }
    },
  },
  components: {},
};
</script>