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

<template>
  <div class="page">
    <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无家庭成员">
      <el-table-column label="序号" width="70">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <!-- <el-table-column prop="xxx" label="善行少年编号"></el-table-column> -->
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="idCard" label="身份证"></el-table-column>
      <el-table-column prop="volunteerNo" label="义工号"></el-table-column>
      <el-table-column prop="age" label="年龄">
        <template slot-scope="scope">{{ scope.row.age||0 }}岁</template>
      </el-table-column>
      <el-table-column prop="gender" label="性别">
        <template slot-scope="scope">{{ genderDict[scope.row.gender] }}</template>
      </el-table-column>
      <el-table-column prop="currentSchool" label="就读学校"></el-table-column>
      <el-table-column label="所属渠道">
        <template slot-scope="scope">{{ scope.row.channelNames || '-' }}</template>
      </el-table-column>
      <el-table-column prop="xxx" label="义工时长">
        <template slot-scope="scope">{{ scope.row.volunteerHours||0 }}h</template>
      </el-table-column>
      <el-table-column prop="welfareCount" 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 {
  props: ['userId'],
  data () {
    return {
      queryParams: {
        userId: '',
        page: 1,
        limit: 10
      },
      dataList: [],
      total: 0,
      loading: false,
      genderDict: {
        0: '男',
        1: '女',
        2: '保密'
      }
    }
  },
  mounted () {
    this.queryParams.userId = this.userId
    this.getList()
  },
  methods: {
    getList () {
      this.loading = true
      this.$http.get('/core/family/member/page', { params: this.queryParams }).then(({ data: res }) => {
        if (res.code === 0) {
          this.dataList = res.data.list
          this.dataList.forEach(d => {
            d.age = this.getAge(d.idCard)
            d.idCard = d.idCard && d.idCard.replace(/^(\d{6})\d{8}(\w{4})$/, '$1********$2')
          })
          this.total = res.data.total
        }
        this.loading = false
      })
    },
    isValid (idCard) {
      const regex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
		  return typeof idCard === 'string' && regex.test(idCard)
    },
    getAge (idCard) {
      if (!this.isValid(idCard)) return 0
      const birthDateStr = idCard.substring(6, 14)
      const birthYear = parseInt(birthDateStr.substring(0, 4), 10)
      const birthMonth = parseInt(birthDateStr.substring(4, 6), 10)
      const birthDay = parseInt(birthDateStr.substring(6, 8), 10)
      const today = new Date()
      const currentYear = today.getFullYear()
      const currentMonth = today.getMonth() + 1
      const currentDay = today.getDate()
      // 计算周岁
      let age = currentYear - birthYear
      // 如果当前月份小于出生月份，或者月份相同但日期小于出生日期，说明今年的生日还没过
      if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDay < birthDay)) {
        age--
      }
      return age < 0 ? 0 : age
    },
    pageSizeChangeHandle (val) {
      this.queryParams.limit = val
      this.getList()
    },
    pageCurrentChangeHandle (val) {
      this.queryParams.page = val
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
</style>