app列表页（无筛选 有搜索）

<template>
  <div class="wh main bxs">
    <div class="header bxs w">
      <van-row>
        <van-col @click="backFn" span="8" class="f18 corm pl10"
          ><van-icon name="arrow-left" class="corm" />返回</van-col
        >
        <van-col span="8" class="tc f20">用户管理</van-col>
        <van-col span="8" class="tr f16 pr10 corm">
          <span @click="addFn">新增</span>
        </van-col>
      </van-row>
    </div>
    <div class="wh bxs content">
      <div class="contentSea bxs w">
        <van-search
          v-model="bizTitle"
          placeholder="输入用户名/登录账号/身份证号搜索"
          @search="onSearch"
        />
      </div>
      <!-- main.js 引入注册 -->
      <scroller
        :on-infinite="infinite"
        :noDataText="noDataText"
        class="bxs p10 h"
        ref="myscroller"
      >
        <div class="contentList bxs w ptnew">
          <van-swipe-cell v-for="(item, i) of tableData" :key="i">
            <div class="w p10 list bxs mb10" @click="detailFn(item)">
              <div class="list-item">
                <div class="f16 titleInfo flex">
                  <span class="text_1">{{ item.nickName }}</span>
                </div>
                <div class="f12 mt5">
                  {{ item.userName }}
                </div>
                <div class="list-item-lf bxs p10 bgcm">
                  <div class="wh flexca">
                    <van-icon name="manager" size="25" />
                  </div>
                </div>
                <div class="list-item-rt bxs p10 bgf f12">
                  <div class="h flexca" style="color: #2e7cf9">
                    <span>
                      <i class="iconfont icon-ticket_renlianshibie"> </i>
                      信息登记</span
                    >
                    <span class="ml10 f13"
                      ><van-icon name="more-o" class="f16" /> 操作</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <template #right>
              <van-button
                square
                style="margin-left: 1px"
                type="info"
                text="删除"
                class="delete-button"
                @click="deleteFn(item)"
              />
            </template>
          </van-swipe-cell>
        </div>
      </scroller>
    </div>
  </div>
</template>
<script>
import {
  getUserQueryList,
  delByUserIds,
} from "@/api/mine_userManage";
import {
  getDictTypeList,
} from "@/api/sys";
// 状态关联关键词*
export default {
  data () {
    return {
      bizTitle: "",//搜索参数
      tableData: [],//列表初始化数据
      page: {
        index: 0,
        size: 10,
        total: null,
      },

    };
  },
  created () {
    this.employeeId = JSON.parse(localStorage.getItem("employeeId"));
    this.departmentId = localStorage.getItem("departmentId");
  },
  // 页面销毁生命周期方法
  beforeDestroy () {
    this.$toast.clear();
  },
  methods: {
    // 删除
    async deleteFn (item) {
      const res = await delByUserIds(item.userId);
      if (res.code == 200) {
        this.$toast.success("刪除成功");
        this.page.index = 0;
        this.tableData = [];
        this.getData();
      }
    },
    // 详情跳转
    detailFn (item) {
      this.$router
        .push({
          name: "userManageDetail",
          params: {
            userId: item.userId,
            item: item,
          },
        })
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        }); //把error 抛出来;
    },
    // 新增
    addFn () {
      this.$router
        .push({ name: "userMessAdd" })
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        }); //把error 抛出来;
    },
    // 搜索
    onSearch () {
      this.page = {
        index: 0,
        size: 10,
        total: null,
      };
      console.log(this.page);
      this.$refs.myscroller.finishInfinite(false);
      this.tableData = [];
    },
    infinite (done) {
      setTimeout(() => {
        this.page.index++;
        this.getData(done);
      }, 500);
    },
    // 初始化数据
    async getData (done) {
      let datVal = {
        keyword: this.bizTitle,
        ...this.formSearch,
        pageNum: this.page.index,
        pageSize: this.page.size,
      };
      console.log(this.page.index, "index");
      const result = await getUserQueryList(datVal);
      if (this.$refs.myscroller) {
        this.$refs.myscroller.finishInfinite(true);
      }
      if (result.data.length < 10) {
        this.noDataText = this.noDataTextEnd;
      }
      if (result.data && result.data.length > 0) {
        if (typeof done == "function") {
          done();
        }
        this.tableData = this.tableData.concat(result.data);
        console.log(this.tableData, result.data);
        if (result.pageNum) {
          this.page.index = result.pageNum;
        }
        this.page.total = result.total;
      }
    },
    backFn () {
      this.$router.back();
    },



  },
};
</script>
<style lang="scss" scoped>
.contentList.ptnew {
  padding-top: 105px;
}
.search_condition {
  position: absolute;
  top: 15px;
  right: 15px;
  display: inline-block;
  padding: 3px 8px;
  background-color: #fff;
  border-radius: 5px;
  z-index: 999;
}

.main {
  position: relative;
  .header {
    height: 50px;
    line-height: 50px;
    position: fixed;
    background: #fff;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .content {
    background: #f5f8f8;
    padding-top: 105px;
    .contentSea {
      position: fixed;
      top: 50px;
      left: 0;
      background: #fff;
      z-index: 100;
    }
    .contentList {
      .list {
        background: #fff;
        position: relative;
        border-radius: 4px;
        .list-item {
          width: 100%;
          box-sizing: border-box;
          position: relative;
          padding-left: 50px;
        }
        .list-item-lf {
          position: absolute;
          left: 0;
          top: 0;
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        .list-item-rt {
          position: absolute;
          right: 0;
          top: 0;
        }
        // div:nth-child(1) {
        //   width: 80%;
        // }
        // .flotDiv {
        //   position: absolute;
        //   top: 10px;
        //   right: 0;
        //   background: #cc0000;
        //   color: #fff;
        // }
      }
    }
  }
}
.delete-button {
  height: 100%;
}
.filter-btm-btn {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
  box-sizing: border-box;
  padding-top: 10px;
  .btn {
    display: inline-block;
    width: 40%;
    height: 40px;
    line-height: 40px;
    background-color: #8a8a8a;
    color: #fff;
    text-align: center;
  }
  .btn_l {
    border-radius: 20px 0 0 20px;
  }
  .btn_r {
    border-radius: 0 20px 20px 0;
    background-color: #2e7cf9;
  }
}
</style>