会员查询相关页面静态完成

src/router/index.js

@@ -34,7 +34,8 @@ export const moduleRoutes = {
   children: [
     { path: '/home', component: () => import('@/views/modules/home'), name: 'home', meta: { title: '首页', isTab: true } },
     { path: '/activityAdd', component: () => import('@/views/modules/activity/add'), name: 'activityAdd' },
-    { path: '/activityApplyInfo', component: () => import('@/views/modules/activity/info'), name: 'activityApplyInfo' }
+    { path: '/activityApplyInfo', component: () => import('@/views/modules/activity/info'), name: 'activityApplyInfo' },
+    { path: '/memberDetail', component: () => import('@/views/modules/member/detail'), name: 'memberDetail' }
   ]
 }
 

src/views/modules/member/components/activityRecord.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="page">
+    <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无活动记录">
+      <el-table-column prop="xxx" label="序号">
+        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+      </el-table-column>
+      <el-table-column prop="xxx" label="活动ID"></el-table-column>
+      <el-table-column prop="xxx" label="活动类型"></el-table-column>
+      <el-table-column prop="xxx" label="活动名称"></el-table-column>
+      <el-table-column prop="xxx" label="公益支持内容"></el-table-column>
+      <el-table-column prop="xxx" label="活动时间"></el-table-column>
+      <el-table-column prop="xxx" label="活动地点"></el-table-column>
+      <el-table-column prop="xxx" label="活动状态">
+        <template slot-scope="scope"></template>
+      </el-table-column>
+      <el-table-column prop="xxx" label="捐献爱心值"></el-table-column>
+      <el-table-column prop="xxx" label="操作">
+        <template slot-scope="scope">
+          <el-button type="text">查看档案</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :current-page="queryParams.page"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="queryParams.limit"
+      :total="total"
+      layout="total, sizes, prev, pager, next, jumper"
+      @size-change="pageSizeChangeHandle"
+      @current-change="pageCurrentChangeHandle">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      queryParams: {
+        memberId: this.$route.query.memberId || '',
+        page: 1,
+        limit: 10
+      },
+      dataList: [],
+      total: 0,
+      loading: false
+    }
+  },
+  methods: {
+    getList () {
+      this.loading = true
+      this.$http.get('/xxx', { params: this.queryParams }).then(({ data: res }) => {
+        if (res.code === 200) {
+          this.dataList = res.data.list
+          this.total = res.data.total
+        }
+        this.loading = false
+      })
+    },
+    pageSizeChangeHandle (val) {
+      this.queryParams.limit = val
+      this.getList()
+    },
+    pageCurrentChangeHandle (val) {
+      this.queryParams.page = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/modules/member/components/familyMember.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="page">
+    <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无家庭成员">
+      <el-table-column prop="xxx" label="善行少年编号"></el-table-column>
+      <el-table-column prop="xxx" label="姓名"></el-table-column>
+      <el-table-column prop="xxx" label="身份证">
+        <template slot-scope="scope"></template>
+      </el-table-column>
+      <el-table-column prop="xxx" label="义工号"></el-table-column>
+      <el-table-column prop="xxx" label="年龄">
+        <template slot-scope="scope"></template>
+      </el-table-column>
+      <el-table-column prop="xxx" label="性别">
+        <template slot-scope="scope"></template>
+      </el-table-column>
+      <el-table-column prop="xxx" label="就读学校"></el-table-column>
+      <el-table-column prop="xxx" label="义工时长">
+        <template slot-scope="scope"></template>
+      </el-table-column>
+      <el-table-column prop="xxx" label="参与活动次数"></el-table-column>
+    </el-table>
+    <el-pagination
+      :current-page="queryParams.page"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="queryParams.limit"
+      :total="total"
+      layout="total, sizes, prev, pager, next, jumper"
+      @size-change="pageSizeChangeHandle"
+      @current-change="pageCurrentChangeHandle">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      queryParams: {
+        memberId: this.$route.query.memberId || '',
+        page: 1,
+        limit: 10
+      },
+      dataList: [],
+      total: 0,
+      loading: false
+    }
+  },
+  methods: {
+    getList () {
+      this.loading = true
+      this.$http.get('/xxx', { params: this.queryParams }).then(({ data: res }) => {
+        if (res.code === 200) {
+          this.dataList = res.data.list
+          this.total = res.data.total
+        }
+        this.loading = false
+      })
+    },
+    pageSizeChangeHandle (val) {
+      this.queryParams.limit = val
+      this.getList()
+    },
+    pageCurrentChangeHandle (val) {
+      this.queryParams.page = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/modules/member/components/heartRecorrd.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="page">
+    <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无爱心值记录">
+      <el-table-column prop="xxx" label="序号">
+        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+      </el-table-column>
+      <el-table-column prop="xxx" label="订单编号"></el-table-column>
+      <el-table-column prop="xxx" label="操作时间"></el-table-column>
+      <el-table-column prop="xxx" label="爱心值数值">
+        <template slot-scope="scope"></template>
+      </el-table-column>
+      <el-table-column prop="xxx" label="类型"></el-table-column>
+      <el-table-column prop="xxx" label="状态">
+        <template slot-scope="scope"></template>
+      </el-table-column>
+      <el-table-column prop="xxx" label="操作人员"></el-table-column>
+      <el-table-column prop="xxx" label="备注"></el-table-column>
+    </el-table>
+    <el-pagination
+      :current-page="queryParams.page"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="queryParams.limit"
+      :total="total"
+      layout="total, sizes, prev, pager, next, jumper"
+      @size-change="pageSizeChangeHandle"
+      @current-change="pageCurrentChangeHandle">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      queryParams: {
+        memberId: this.$route.query.memberId || '',
+        page: 1,
+        limit: 10
+      },
+      dataList: [],
+      total: 0,
+      loading: false
+    }
+  },
+  methods: {
+    getList () {
+      this.loading = true
+      this.$http.get('/xxx', { params: this.queryParams }).then(({ data: res }) => {
+        if (res.code === 200) {
+          this.dataList = res.data.list
+          this.total = res.data.total
+        }
+        this.loading = false
+      })
+    },
+    pageSizeChangeHandle (val) {
+      this.queryParams.limit = val
+      this.getList()
+    },
+    pageCurrentChangeHandle (val) {
+      this.queryParams.page = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/modules/member/components/onlySelfTicket.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="page">
+    <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无专享券">
+      <el-table-column prop="xxx" label="序号">
+        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+      </el-table-column>
+      <el-table-column prop="xxx" label="指定活动"></el-table-column>
+      <el-table-column prop="xxx" label="渠道方"></el-table-column>
+      <el-table-column prop="xxx" label="专享券状态">
+        <template slot-scope="scope"></template>
+      </el-table-column>
+      <el-table-column prop="xxx" label="使用时间"></el-table-column>
+      <el-table-column prop="xxx" label="备注"></el-table-column>
+    </el-table>
+    <el-pagination
+      :current-page="queryParams.page"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="queryParams.limit"
+      :total="total"
+      layout="total, sizes, prev, pager, next, jumper"
+      @size-change="pageSizeChangeHandle"
+      @current-change="pageCurrentChangeHandle">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      queryParams: {
+        memberId: this.$route.query.memberId || '',
+        page: 1,
+        limit: 10
+      },
+      dataList: [],
+      total: 0,
+      loading: false
+    }
+  },
+  methods: {
+    getList () {
+      this.loading = true
+      this.$http.get('/xxx', { params: this.queryParams }).then(({ data: res }) => {
+        if (res.code === 200) {
+          this.dataList = res.data.list
+          this.total = res.data.total
+        }
+        this.loading = false
+      })
+    },
+    pageSizeChangeHandle (val) {
+      this.queryParams.limit = val
+      this.getList()
+    },
+    pageCurrentChangeHandle (val) {
+      this.queryParams.page = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/modules/member/detail.vue

@@ -0,0 +1,397 @@
+<template>
+    <div class="adffc" style="height: calc(100vh - 80px);">
+        <el-card shadow="never" class="aui-card--fill">
+            <div class="mod-home">
+                <div class="top adfac">
+                    <div class="back adfac" @click="handleBack">
+                        <img src="@/assets/img/back.png">
+                        <span>返回</span>
+                    </div>
+                    <div class="line"></div>
+                    <div class="text">会员详情</div>
+                </div>
+                <div class="title">基础资料</div>
+                <div class="info adfacjb">
+                    <div class="info-left adffcac">
+                        <img src="@/assets/img/member_avatar.png">
+                        <el-button type="primary" @click="handleEdit">编辑资料</el-button>
+                    </div>
+                    <div class="info-right adf">
+                        <div class="info-right-pre adf" style="margin-top: 0;">
+                            <div class="info-right-pre-title">会员姓名：</div>
+                            <div class="info-right-pre-content">{{ '周飒然' }}</div>
+                        </div>
+                        <div class="info-right-pre adf" style="margin-top: 0;">
+                            <div class="info-right-pre-title">会员手机：</div>
+                            <div class="info-right-pre-content">{{ '187 **** 9876' }}</div>
+                        </div>
+                        <div class="info-right-pre adf" style="margin-top: 0;">
+                            <div class="info-right-pre-title">善行少年编号：</div>
+                            <div class="info-right-pre-content">{{ 'SXSN-PAB-20250001' }}</div>
+                        </div>
+                        <div class="info-right-pre adf">
+                            <div class="info-right-pre-title">会员性别：</div>
+                            <div class="info-right-pre-content">{{ '女' }}</div>
+                        </div>
+                        <div class="info-right-pre adf">
+                            <div class="info-right-pre-title">会员年龄：</div>
+                            <div class="info-right-pre-content">{{ '46' }}</div>
+                        </div>
+                        <div class="info-right-pre adf">
+                            <div class="info-right-pre-title">微信昵称：</div>
+                            <div class="info-right-pre-content">{{ '妮可妮可' }}</div>
+                        </div>
+                        <div class="info-right-pre adf">
+                            <div class="info-right-pre-title">渠道方：</div>
+                            <div class="info-right-pre-content">{{ '平安银行' }}</div>
+                        </div>
+                        <div class="info-right-pre adf">
+                            <div class="info-right-pre-title">成为会员时间：</div>
+                            <div class="info-right-pre-content">{{ '2025-06-30 13:00:08' }}</div>
+                        </div>
+                        <div class="info-right-pre adf">
+                            <div class="info-right-pre-title">家庭公益口号：</div>
+                            <div class="info-right-pre-content">{{ '心中有爱，温暖你我他' }}</div>
+                        </div>
+                        <div class="info-right-pre adf">
+                            <div class="info-right-pre-title">家庭公益名称：</div>
+                            <div class="info-right-pre-content">{{ '善意行' }}</div>
+                        </div>
+                        <div class="info-right-pre adf">
+                            <div class="info-right-pre-title">身份证号：</div>
+                            <div class="info-right-pre-content">{{ '342221 ******** 9898' }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </el-card>
+        <el-card shadow="never" class="aui-card--fill">
+            <div class="mod-home">
+                <div class="title" style="margin-top: 0;">会员资产</div>
+                <div class="nums adf">
+                    <div class="nums-pre adffcac">
+                        <p>累计捐献爱心值</p>
+                        <p class="num">{{ 8000 }}</p>
+                    </div>
+                    <div class="nums-pre adffcac">
+                        <p>家庭累计义工时长</p>
+                        <p class="num">{{ 180 }}h</p>
+                    </div>
+                    <div class="nums-pre adffcac">
+                        <p>会员等级</p>
+                        <p class="num">Lv.{{ 3 }}</p>
+                    </div>
+                    <div class="nums-pre adffcac">
+                        <p>剩余爱心值</p>
+                        <p class="num">{{ 10000 }}</p>
+                    </div>
+                </div>
+            </div>
+        </el-card>
+        <el-card shadow="never" class="aui-card--fill" style="flex: 1;">
+            <div class="mod-home">
+                <div class="tab adfac">
+                    <div class="tab-pre" v-for="(item,index) in tabList" :key="index" :class="{'active':tabIndex===index}" @click="changeTab(index)">{{ item }}</div>
+                </div>
+                <div class="table">
+                    <activity-record v-if="tabIndex===0"></activity-record>
+                    <heart-recorrd v-else-if="tabIndex===1"></heart-recorrd>
+                    <only-self-ticket v-else-if="tabIndex===2"></only-self-ticket>
+                    <family-member v-else></family-member>
+                </div>
+            </div>
+        </el-card>
+        <el-dialog width="800px" :visible.sync="show" title="编辑会员资料" @close="cancel">
+          <el-form ref="memberRef" :model="form" :rules="rules" label-width="120px" style="width: 70%;margin: 0 auto;">
+            <el-form-item label="会员昵称" prop="nickName">
+              <el-input v-model="form.nickName" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="善行少年编号" prop="uniqueNo">
+              <el-input v-model="form.uniqueNo" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="渠道方" prop="channelId">
+              <el-select v-model="form.channelId" placeholder="请选择" style="width: 100%;"></el-select>
+            </el-form-item>
+            <el-form-item label="姓名" prop="xxx">
+              <el-input v-model="form.xxx" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="家庭公益名称" prop="welfareName">
+              <el-input v-model="form.welfareName" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="家庭公益口号" prop="welfareSlogan">
+              <el-input v-model="form.welfareSlogan" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="累计捐献爱心值" prop="totalInvoicedAmount">
+              <el-input type="number" v-model="form.totalInvoicedAmount" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="剩余爱心值" prop="loveValue">
+              <el-input type="number" v-model="form.loveValue" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="参与公益次数" prop="welfareCount">
+              <el-input type="number" v-model="form.welfareCount" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="会员等级" prop="userLevel">
+              <el-input type="number" v-model="form.userLevel" placeholder="请输入"></el-input>
+            </el-form-item>
+          </el-form>
+          <div class="demo-drawer__footer" style="display: flex;justify-content: end;margin-top: 30px;">
+            <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
+            <el-button @click="cancel" style="margin-right: 5%;">取 消</el-button>
+          </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import ActivityRecord from './components/activityRecord.vue'
+import HeartRecorrd from './components/heartRecorrd.vue'
+import OnlySelfTicket from './components/onlySelfTicket.vue'
+import FamilyMember from './components/familyMember.vue'
+export default {
+  components: {
+    ActivityRecord,
+    HeartRecorrd,
+    OnlySelfTicket,
+    FamilyMember
+  },
+  data () {
+    return {
+      tabIndex: 0,
+      tabList: ['活动记录', '爱心值记录', '专享券', '家庭成员'],
+      show: false,
+      buttonLoading: false,
+      form: {
+        id: '',
+        nickName: '',
+        uniqueNo: '',
+        channelId: '',
+        xxx: '',
+        welfareName: '',
+        welfareSlogan: '',
+        totalInvoicedAmount: 0,
+        loveValue: 0,
+        welfareCount: 0,
+        userLevel: 0
+      },
+      rules: {
+        nickName: [
+          { required: true, message: '请输入会员昵称', trigger: 'blur' }
+        ],
+        uniqueNo: [
+          { required: true, message: '请输入善行少年编号', trigger: 'blur' }
+        ],
+        channelId: [
+          { required: true, message: '请选择渠道方', trigger: 'change' }
+        ],
+        xxx: [
+          { required: true, message: '请输入姓名', trigger: 'blur' }
+        ],
+        welfareName: [
+          { required: true, message: '请输入家庭公益名称', trigger: 'blur' }
+        ],
+        welfareSlogan: [
+          { required: true, message: '请输入家庭公益口号', trigger: 'blur' }
+        ],
+        totalInvoicedAmount: [
+          { required: true, type: 'number', message: '请输入累计捐献爱心值', trigger: 'change' }
+        ],
+        loveValue: [
+          { required: true, type: 'number', message: '请输入剩余爱心值', trigger: 'change' }
+        ],
+        welfareCount: [
+          { required: true, type: 'number', message: '请输入参与公益次数', trigger: 'change' }
+        ],
+        userLevel: [
+          { required: true, type: 'number', message: '请输入会员等级', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleBack () {
+      this.$router.push({ name: 'member-query' })
+    },
+    changeTab (index) {
+      this.tabIndex = index
+    },
+    handleEdit () {
+      this.show = true
+    },
+    submitForm () {
+      this.$refs['memberRef'].validate((valid) => {
+        if (valid) {
+          console.log('submit!')
+        } else {
+          return false
+        }
+      })
+    },
+    cancel () {
+      this.form = {
+        id: '',
+        nickName: '',
+        uniqueNo: '',
+        channelId: '',
+        xxx: '',
+        welfareName: '',
+        welfareSlogan: '',
+        totalInvoicedAmount: 0,
+        loveValue: 0,
+        welfareCount: 0,
+        userLevel: 0
+      }
+      this.$refs['memberRef'].resetFields()
+      this.show = false
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.top {
+    padding-bottom: 13px;
+    box-shadow: inset 0px -1px 0px 0px #F0F1F7;
+    .back {
+        cursor: pointer;
+        img {
+          width: 22px;
+          height: 22px;
+        }
+        span {
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: bold;
+            font-size: 14px;
+            color: #00AE57;
+            line-height: 20px;
+            margin-left: 6px;
+        }
+    }
+    .line {
+        width: 1px;
+        height: 16px;
+        background: #F0F1F7;
+        margin-left: 14px;
+    }
+    .text {
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        font-size: 14px;
+        color: #657588;
+        line-height: 20px;
+        margin-left: 10px;
+    }
+}
+
+.title{
+  font-family: PingFang-SC, PingFang-SC;
+  font-weight: bold;
+  font-size: 16px;
+  color: #252525;
+  line-height: 22px;
+  margin-top: 20px;
+}
+
+.info{
+    margin-top: 20px;
+    &-left{
+        width: 135px;
+        img{
+            width: 64px;
+            height: 64px;
+            margin-bottom: 26px;
+        }
+    }
+    &-right{
+        width: calc(100% - 135px);
+        flex-wrap: wrap;
+        &-pre{
+            width: calc(100% / 3);
+            margin-top: 20px;
+            &-title{
+                width: 140px;
+                padding-right: 12px;
+                box-sizing: border-box;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                font-size: 14px;
+                color: #646464;
+                line-height: 16px;
+                text-align: right;
+            }
+            &-content{
+                width: calc(100% - 140px);
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                font-size: 14px;
+                color: #393939;
+                line-height: 16px;
+            }
+        }
+    }
+}
+
+.nums{
+    margin-top: 16px;
+    padding-bottom: 10px;
+    .nums-pre{
+        width: 25%;
+        p{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 14px;
+            color: #646464;
+            line-height: 16px;
+            text-align: center;
+            margin: 0;
+            &.num{
+                font-family: D-DINExp, D-DINExp;
+                font-weight: bold;
+                font-size: 24px;
+                color: #252525;
+                line-height: 24px;
+                margin-top: 12px;
+            }
+        }
+    }
+}
+
+.tab{
+    padding-bottom: 18px;
+    box-shadow: inset 0px -1px 0px 0px #F0F1F7;
+    &-pre{
+        position: relative;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        font-size: 14px;
+        color: #252525;
+        line-height: 16px;
+        margin-left: 64px;
+        cursor: pointer;
+        &:first-child{
+            margin-left: 0;
+        }
+        &.active{
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: bold;
+            font-size: 16px;
+            color: #252525;
+            line-height: 16px;
+            &::after{
+                content: '';
+                width: 48px;
+                height: 4px;
+                background: #00AE57;
+                border-radius: 2px;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: -18px;
+            }
+        }
+    }
+}
+
+.table{
+    margin-top: 18px;
+}
+</style>

src/views/modules/member/query.vue

@@ -1,7 +1,73 @@
 <template>
     <el-card shadow="never" class="aui-card--fill">
         <div class="mod-home">
-            <h3>会员查询</h3>
+          <div class="title">会员查询</div>
+          <div class="query">
+            <div class="query-left">
+              <el-form :inline="true" :model="queryParams" @keyup.enter.native="getList">
+                <el-form-item label="善行少年编号" style="margin-right: 50px;">
+                  <el-input v-model="queryParams.memberId" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="用户名" style="margin-right: 50px;">
+                  <el-input v-model="queryParams.memberName" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="渠道方">
+                  <el-select v-model="queryParams.channelId" placeholder="请选择渠道方" class="select-box">
+                      <el-option v-for="item in channelOptions" :key="item.id" :label="item.channelName" :value="item.id"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-form>
+            </div>
+            <div class="query-right">
+              <div class="form-btns">
+                <el-button type="primary" @click="getList">查询</el-button>
+                <el-button type="default" @click="reset" style="margin-left: 24px;">重置</el-button>
+              </div>
+            </div>
+          </div>
+          <div class="table-title adfacjb">
+            <div class="table-title-left">会员列表共（{{ total }}）人</div>
+            <div class="table-title-right">
+              <el-button type="primary" icon="el-icon-plus">新增会员</el-button>
+              <el-button type="default">导出Excel</el-button>
+            </div>
+          </div>
+          <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无会员" style="margin-top: 22px;">
+            <el-table-column prop="xxx" label="会员信息">
+              <template #default="scope"></template>
+            </el-table-column>
+            <el-table-column prop="xxx" label="善行少年编号"></el-table-column>
+            <el-table-column prop="xxx" label="渠道方"></el-table-column>
+            <el-table-column prop="xxx" label="姓名"></el-table-column>
+            <el-table-column prop="xxx" label="手机号"></el-table-column>
+            <el-table-column prop="xxx" label="家庭公益名称"></el-table-column>
+            <el-table-column prop="xxx" label="家庭公益口号"></el-table-column>
+            <el-table-column prop="xxx" label="累计捐献爱心值"></el-table-column>
+            <el-table-column prop="xxx" label="剩余爱心值"></el-table-column>
+            <el-table-column prop="xxx" label="参与公益次数">
+              <template #default="scope"></template>
+            </el-table-column>
+            <el-table-column prop="xxx" label="会员等级">
+              <template #default="scope"></template>
+            </el-table-column>
+            <el-table-column label="操作" width="300" fixed="right">
+              <template #default="scope">
+                  <el-button link type="text" @click="handleEdit(scope.row)">编辑</el-button>
+                  <el-button link type="text" @click="handleDetail(scope.row)">会员详情</el-button>
+                  <el-button link type="text" @click="handleCreateCode(scope.row)">生成邀请码</el-button>
+                  <el-button link type="text" @click="handleDelete(scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination
+            :current-page="queryParams.page"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="queryParams.limit"
+            :total="total"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="pageSizeChangeHandle"
+            @current-change="pageCurrentChangeHandle">
+          </el-pagination>
         </div>
     </el-card>
 </template>
@@ -10,15 +76,82 @@
 export default {
   data () {
     return {
-
+      queryParams: {
+        page: 1,
+        limit: 10,
+        memberId: '',
+        memberName: '',
+        channelId: ''
+      },
+      total: 999,
+      channelOptions: [
+        { id: 1, channelName: '渠道方1' }
+      ],
+      dataList: [1],
+      loading: false
     }
   },
   methods: {
+    getList () {
+
+    },
+    reset () {
+
+    },
+    handleEdit (row) {
+      this.$router.push({ name: 'memberDetail', query: { id: row.id } })
+    },
+    handleDetail (row) {
+
+    },
+    handleCreateCode (row) {
 
+    },
+    handleDelete (row) {
+
+    },
+    pageSizeChangeHandle (val) {
+      this.queryParams.limit = val
+      this.getList()
+    },
+    pageCurrentChangeHandle (val) {
+      this.queryParams.page = val
+      this.getList()
+    }
   }
 }
 </script>
 
 <style scoped lang="scss">
+.title{
+  font-family: PingFang-SC, PingFang-SC;
+  font-weight: bold;
+  font-size: 16px;
+  color: #252525;
+  line-height: 22px;
+}
 
+.query{
+  margin-top: 14px;
+  display: flex;
+  justify-content: space-between;
+  &-right{
+    .form-btns{
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+
+.table-title{
+  margin-top: 10px;
+  &-left{
+    font-family: PingFang-SC, PingFang-SC;
+    font-weight: bold;
+    font-size: 16px;
+    color: #252525;
+    line-height: 22px;
+  }
+}
 </style>