list.vue

<!-- 主内容 -->
<template>
  <div class="container-fluid">
    <div class="page page-order-time">
      <div class="page-breadcrumb">
        <ol class="breadcrumb">
          <li><a>会员管理</a></li>
        </ol>
      </div>

      <div class="page-body">
        <div class="main">

          <div class="tab-content">
            <!--商品库存-->
            <div role="tabpanel" class="tab-pane active pt-4 pb-4" id="tab-mem-record">
              <el-form ref="form" :model="form" label-width="50">

                <el-select v-model="form.storeId" filterable placeholder="商家" :maxlength="10"
                           style="margin-left: 20px;">
                  <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
                <el-date-picker
                  v-model="form.createTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>

                <el-select v-model="form.isValid" filterable placeholder="用户状态" :maxlength="10"
                           style="margin-left: 20px;">
                  <el-option v-for="item in isValid" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <el-input v-model="form.keyword" placeholder="搜索昵称/姓名/手机号" :maxlength="10"
                          style="width: 170px;margin-left: 20px;"></el-input>
                <span class="mem-form">
                  <button @click.prevent="submitForm()" class="btn btn-default">查询</button>
                  <button @click.prevent="resetForm()" class="btn btn-default">重置</button>
                </span>
              </el-form>
              <table class="table table-striped table-hover table-record mb-77" align="center" border="0">
                <thead>
                <tr>
                  <th>用户编号</th>
                  <th>昵称</th>
                  <th>姓名</th>
                  <th>手机号</th>
                  <th>余额</th>
                  <th v-if="show==1">实体卡号</th>
                  <th v-if="show==1">会员卡余额</th>
                  <th>加入时间</th>
                  <th v-if="show==0">用户状态</th>
                  <th v-if="show==1">会员状态</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in pageList.list">
                  <td>{{item.userId}}</td>
                  <td>{{item.nickName}}</td>
                  <td>{{item.realName}}</td>
                  <td>{{item.phone}}</td>
                  <td>{{item.balance}}</td>
                  <td v-if="show==1">{{item.cardNo}}</td>
                  <td v-if="show==1">{{item.amount}}</td>
                  <td>{{item.createTime}}</td>
                  <td v-if="show==0">{{item.status | getStatus}}</td>
                  <td v-if="show==1">{{item.status | getStatusOfVip}}</td>
                  <td>
                    <router-link v-bind:to="'/user/detail/'+ item.userId" class="js-do">查看</router-link>
                    <a class="js-do" @click.prevent="authentication(1,item.userId)"
                       v-if="item.identifyStatue!=null&& item.identifyStatue==0">认证通过</a>
                    <a class="js-do" @click.prevent="authentication(2,item.userId)"
                       v-if="item.identifyStatue!=null && item.identifyStatue==0">认证拒绝</a>
                  </td>
                </tr>

                </tbody>
              </table>
              <pagination size="md"
                          :total-rows="pageList.totalRecord"
                          :per-page="pageList.pageSize"
                          v-model="currentPage">
              </pagination>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
  import pagination from "@/components/bootstrap/pagination"
  import breadcrumb from "@/components/bootstrap/breadcrumb"

  export default {
    data() {
      return {
        form: {
          createTime: [],
          isValid: '',
          keyword: '',
          storeId: '',
        },
        pageList: {
          pageSize: 1,
          pageIndex: 1,
          totalRecord: 0,
          totalPage: 1,
          list: [],
        },
        currentPage: 0,
        isValid: isValid,
        storeList: [],
        show: 0,
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
      }
    },
    components: {
      pagination: pagination,
      breadcrumb: breadcrumb,
    },
    created: function () {
      this.getDataList();
      this.getStoreList();
    },
    mounted: function () {

    },
    updated: function () {
    },
    destroyed: function () {
    },
    filters: {
      getStatus: function (value) {
        return value == 1 ? "有效" : "无效";
      },
      getStatusOfVip: function (value) {
        return value == 1 ? "正常" : "到期";
      },
    },
    methods: {
      getStoreList() {
        var self = this;
        self.ajax({
          url: api.storeManage.list.url,
          success: function (res) {
            self.storeList = res.data.list;
          }
        });
      },
      getDataList(data) {
        var self = this;
        self.ajax({
          type: 'GET',
          url: api.user.list.url,
          data: data,
          success: function (res) {
            console.log(res.data.list)
            self.pageList = res.data;
            self.currentPage = res.data.pageIndex;
          }
        });
      },
      //认证
      authentication(value, id) {
        var self = this;
        if (value == 1) {
          self.ajax({
            type: 'GET',
            url: api.user.identifyPass(id),
            success: function (res) {
              self.$message({
                type: 'success',
                message: res.message,
                duration: 2000,
                onClose: (function () {
                  self.getDataList();
                })
              });
            }
          });
        }
        if (value == 2) {
          self.ajax({
            type: 'GET',
            url: api.user.identifyRefuse(id),
            success: function (res) {
              self.$message({
                type: 'success',
                message: res.message,
                duration: 2000,
                onClose: (function () {
                  self.getDataList();
                })
              });
            }
          });
        }
      },
      //搜索
      submitForm() {
        var self = this;
        if (self.form.storeId != "") {
          self.show = 1;
        }
        if (self.form.createTime.length > 0) {
          var a = new Date(self.form.createTime[0]);
          var startTime = a.getFullYear() + '-' + (a.getMonth() + 1) + '-' + a.getDate() + ' ' + a.getHours() + ':' + a.getMinutes() + ':' + a.getSeconds();
          var d = new Date(self.form.createTime[1]);
          var endTime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
        }
        var data = {
          keyword: self.form.keyword,
          startTime: startTime,
          endTime: endTime,
          isValid: self.form.isValid,
          storeId: self.form.storeId
        };
        self.getDataList(data);
      },
      //重置
      resetForm() {
        var self = this;
        self.show = 0;
        self.form.createTime = "";
        self.form.isValid = "";
        self.form.keyword = "";
        self.form.storeId = "";
      },
    },
    watch: {
      currentPage: function (newData) {
        var self = this;
        var query = {
          pageIndex: newData
        }
        self.getDataList(query);
      },
    }
  }
</script>