antissoft / lvqianmeiye_ERP

Blame view

store-pc/src/views/members/index.vue 2.42 KB
Edit Raw Normal View History Permalink
58083915   “wangming”   对门店PC进行设计 
1
2
3
4
5
6
7
8
9
10
11
12
13
 
  <template>
    <div class="members-page">
      <h2 class="page-title">会员管理</h2>
      <el-card>
        <el-form :inline="true" class="search-form">
          <el-form-item>
            <el-input v-model="keyword" placeholder="会员姓名/手机号" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="fetchList">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
20099e65   “wangming”   1111 
14
 
        <el-table :data="list" border size="small" :header-cell-style="{ background:'#f8fafc', color:'#64748b', fontWeight:600 }" v-loading="loading">
58083915   “wangming”   对门店PC进行设计 
15
16
17
18
19
20
21
22
23
24
 
          <el-table-column prop="khmc" label="会员姓名" width="120" />
          <el-table-column prop="sjh" label="手机号" width="140" />
          <el-table-column prop="gsmdName" label="归属门店" width="140" />
          <el-table-column label="操作" width="120" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="viewDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
20099e65   “wangming”   1111 
25
26
 
          background
          layout="total, sizes, prev, pager, next, jumper"
58083915   “wangming”   对门店PC进行设计 
27
 
          :total="total"
20099e65   “wangming”   1111 
28
29
30
31
 
          :page-size="pageSize"
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          @size-change="val => { pageSize = val; handlePageChange(1) }"
58083915   “wangming”   对门店PC进行设计 
32
 
          @current-change="handlePageChange"
20099e65   “wangming”   1111 
33
 
          style="margin-top: 16px; text-align: right;"
58083915   “wangming”   对门店PC进行设计 
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
        />
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Members',
    data() {
      return {
        keyword: '',
        list: [],
        loading: false,
        page: 1,
        pageSize: 10,
        total: 0
      }
    },
    created() {
      this.fetchList()
    },
    methods: {
      fetchList() {
        this.loading = true
        // TODO: 对接会员列表接口
        setTimeout(() => {
          this.list = []
          this.total = 0
          this.loading = false
        }, 300)
      },
      resetSearch() {
        this.keyword = ''
        this.page = 1
        this.fetchList()
      },
      handlePageChange(p) {
        this.page = p
        this.fetchList()
      },
      viewDetail(row) {
        this.$message.info('详情功能待对接')
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .page-title {
    margin: 0 0 20px;
    font-size: 20px;
    color: #303133;
  }
  
  .search-form {
    margin-bottom: 16px;
  }
  </style>