SxsnPC/src/views/modules/activity/info.vue

<template>
    <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">
                <div class="info-pre adf">
                    <div class="info-pre-title adf"><span>*</span>活动名称：</div>
                    <div class="info-pre-content">{{ activityInfo.activityName || '' }}</div>
                </div>
                <div class="info-pre adf">
                    <div class="info-pre-title adf"><span>*</span>活动时间：</div>
                    <div class="info-pre-content">{{ activityInfo.activityStartTime || '' }} - {{ activityInfo.activityEndTime || '' }}</div>
                </div>
                <div class="info-pre adf">
                    <div class="info-pre-title adf"><span>*</span>渠道方：</div>
                    <div class="info-pre-content">{{ activityInfo.channelName || '' }}</div>
                </div>
                <div class="info-pre adf">
                    <div class="info-pre-title adf"><span>*</span>活动地址：</div>
                    <div class="info-pre-content">{{ provinceName || '' }}{{ cityName || '' }}{{ districtName || '' }}{{ activityInfo.address || '' }}</div>
                </div>
                <div class="info-pre adf">
                    <div class="info-pre-title adf"><span>*</span>会员等级：</div>
                    <div class="info-pre-content">{{ activityInfo.userLevel?`Lv.${activityInfo.userLevel} 级以上`:'无限制' }}</div>
                </div>
                <div class="info-pre adf">
                    <div class="info-pre-title adf"><span>*</span>举办方：</div>
                    <div class="info-pre-content">{{ activityInfo.organizerName || '' }}</div>
                </div>
                <div class="info-pre adf">
                    <div class="info-pre-title adf"><span>*</span>报名人数：</div>
                    <div class="info-pre-content">{{ activityInfo.recruitmentNow || 0 }}/{{ activityInfo.recruitmentMax || '无限制' }}</div>
                </div>
                <div class="info-pre adf">
                    <div class="info-pre-title adf"><span>*</span>公益支持：</div>
                    <div class="info-pre-content" v-if="activityInfo.activityLimit!=3">{{ (activityInfo.valueLimit||'-') }} {{ activityLimitCfg[activityInfo.activityLimit]||'-' }}</div>
                    <div class="info-pre-content" v-else>免费</div>
                </div>
                <div class="info-pre adf">
                    <div class="info-pre-title adf"><span>*</span>公益支持内容：</div>
                    <div class="info-pre-content">{{ activityInfo.loveValueContent || '' }}</div>
                </div>
            </div>
            <div class="title adfacjb">
                活动报名信息
                <el-button type="primary" @click="handleExcel">导出Excel</el-button>
            </div>
            <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无活动报名信息" style="margin-top: 16px;">
                <el-table-column prop="id" label="善行少年编号" width="200"></el-table-column>
                <el-table-column prop="welfareName" label="家庭名称" width="150"></el-table-column>
                <el-table-column prop="contactPhoneJM" label="手机号码" width="150"></el-table-column>
                <el-table-column prop="channelName" label="渠道方" width="200"></el-table-column>
                <el-table-column prop="name" label="姓名" width="150"></el-table-column>
                <el-table-column prop="idCardJM" label="身份证号" width="300"></el-table-column>
                <el-table-column prop="volunteerNo" label="义工号" width="100"></el-table-column>
                <el-table-column prop="gender" label="性别" width="100">
                    <template slot-scope="scope">{{ genderDict[scope.row.gender] || '' }}</template>
                </el-table-column>
                <el-table-column prop="age" label="年龄" width="100">
                    <template slot-scope="scope">{{ scope.row.age||0 }}岁</template>
                </el-table-column>
                <!-- <el-table-column prop="xxx" label="参会情况" width="120"></el-table-column> -->
                <el-table-column prop="currentSchool" label="就读学校" width="200">
                    <template slot-scope="scope">{{ scope.row.currentSchool || '/' }}</template>
                </el-table-column>
                <el-table-column prop="createDate" label="报名时间" width="240"></el-table-column>
                <el-table-column prop="signupState" label="状态" width="150" fixed="right">
                    <template slot-scope="scope"><div :class="{'statered':scope.row.signupState==-1}">{{ statusCfg[scope.row.signupState] || '--' }}</div></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>

<script>
import Cookies from 'js-cookie'
import qs from 'qs'
export default {
  data () {
    return {
      provinceName: '',
      cityName: '',
      districtName: '',
      activityInfo: null,
      activityLimitCfg: {
        1: '爱心值',
        2: '专享券',
        3: '免费'
      },
      genderDict: {
        0: '男',
        1: '女',
        2: '保密'
      },
      loading: false,
      queryParams: {
        activityId: this.$route.query.id,
        page: 1,
        limit: 10
      },
      statusCfg: {
        '-1': '已取消',
        1: '已报名',
        2: '已签到',
        3: '已填档案'
      }
    }
  },
  mounted () {
    this.getDetail(this.$route.query.id)
    this.getList()
  },
  methods: {
    handleBack () {
      this.$router.push({ name: 'activity-list' })
    },
    getSSQ (code, key) {
      this.$http.get('/sys/region/' + code).then(({ data: res }) => {
        if (res.code !== 0) return this.$message.error(res.msg)
        this[key] = res.data.name
      })
    },
    getDetail (id) {
      this.$http.get('/core/activity/' + id).then(({ data: res }) => {
        if (res.code !== 0) return this.$message.error(res.msg)
        this.activityInfo = res.data
        this.getSSQ(res.data.provinceId, 'provinceName')
        this.getSSQ(res.data.cityId, 'cityName')
        this.getSSQ(res.data.districtId, 'districtName')
      })
    },
    getList () {
      this.loading = true
      this.$http.get('/core/activity/signup/getSignupList', { params: this.queryParams }).then(({ data: res }) => {
        if (res.code !== 0) return this.$message.error(res.msg)
        this.dataList = res.data.list
        this.dataList.forEach(d => {
          d.contactPhoneJM = d.contactPhone.replace(/^(.{3})(?:\d+)(.{4})$/, '$1****$2')
          d.idCardJM = d.idCard.replace(/^(\d{6})(\d{8})(\d{3}[\dX])$/i, '$1********$3')
          d.age = this.getAge(d.idCard)
        })
        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()
    },
    handleExcel () {
      let newDataForm = Object.assign({}, this.queryParams)
      var params = qs.stringify({
        'token': Cookies.get('token'),
        ...newDataForm
      })
      window.location.href = `${window.SITE_CONFIG['apiURL']}/core/activity/signup/export?${params}`
    }
  }
}
</script>

<style scoped lang="scss">
.statered{
  color: #F4657A;
}

.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: #393939;
    line-height: 22px;
    margin-top: 20px;
}

.info{
    background: #F5F8FC;
    border-radius: 8px;
    margin-top: 10px;
    padding: 0 16px 20px;
    display: flex;
    flex-wrap: wrap;
    &-pre{
        width: calc(100% / 3);
        margin-top: 20px;
        &-title{
            width: 130px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #646464;
            line-height: 20px;
            text-align: right;
            letter-spacing: 1px;
            justify-content: flex-end;
            padding-right: 4px;
            box-sizing: border-box;
            span{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #FB5454;
                line-height: 20px;
                margin-right: 6px;
            }
        }
        &-content{
            width: calc(100% - 130px);
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 14px;
            color: #252525;
            line-height: 20px;
        }
    }
}
</style>