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

Posted 2023-05-06 ThisCall

<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">
      <!-- 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";

// 状态关联关键词*
export default 
  data () 
    return 
      tableData: [],//列表初始化数据
      page: 
        index: 0,
        size: 10,
        total: null,
      ,

    ;
  ,
  created () 

  ,
  // 页面销毁生命周期方法
  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 抛出来;
    ,

    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: 50px;


.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>

 

打印无序的子页列表（无标题）

<?php wp_list_pages("child_of={$post->ID}&title_li="); ?>