120 lines
2.5 KiB
Vue
120 lines
2.5 KiB
Vue
<template>
|
||
<div class="page">
|
||
<p class="title">报名记录（已有<span>{{ list.length }}</span>人报名）</p>
|
||
<div class="user-list">
|
||
<div class="item" v-for="(item, index) in list" :key="index">
|
||
<div class="left">
|
||
<img :src="item.avatar" alt="">
|
||
<span>{{ nameInit(item.partyName) }}</span>
|
||
</div>
|
||
<div class="time">{{ item.signupTime }}</div>
|
||
</div>
|
||
<AiEmpty v-if="!list.length" class="pad-t168"/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
|
||
export default {
|
||
name: "userList",
|
||
data() {
|
||
return {
|
||
id: '',
|
||
list: []
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.id = option.id
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
getList() {
|
||
this.$instance.post(`/app/apppartyreport/signup-info?id=${this.id}`).then(res => {
|
||
if (res.code == 0) {
|
||
this.list = res.data
|
||
if (this.list.length) {
|
||
this.list.map((item) => {
|
||
if (!item.partyName && item.residentName) {
|
||
item.partyName = item.residentName
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
nameInit(name) {
|
||
if (!name) {
|
||
return '-'
|
||
}
|
||
|
||
var newStr;
|
||
if (name.length === 2) {
|
||
newStr = '*' + name.substr(1, 2)
|
||
} else if (name.length > 2) {
|
||
var char = '';
|
||
for (var i = 0, len = name.length - 2; i < len; i++) {
|
||
char += '*';
|
||
}
|
||
newStr = char + name.substr(name.length - 2, name.length);
|
||
} else {
|
||
newStr = name;
|
||
}
|
||
return newStr;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
@import "../../common/common.scss";
|
||
|
||
.page {
|
||
width: 100%;
|
||
background-color: #F3F6F9;
|
||
padding-top: 16px;
|
||
|
||
.title {
|
||
line-height: 96px;
|
||
background-color: #fff;
|
||
padding-left: 32px;
|
||
color: #333;
|
||
font-size: 32px;
|
||
margin-bottom: 4px span {
|
||
color: #D73D3D;
|
||
}
|
||
}
|
||
|
||
.user-list {
|
||
.item {
|
||
width: 100%;
|
||
height: 148px;
|
||
background: #FFFFFF;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 30px;
|
||
padding: 32px;
|
||
box-sizing: border-box;
|
||
box-shadow: 0 8px 34px -8px rgba(213, 213, 213, 0.5);
|
||
|
||
.left {
|
||
color: #2D2D2E;
|
||
line-height: 46px;
|
||
vertical-align: middle;
|
||
|
||
img {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
vertical-align: middle;
|
||
margin-right: 16px;
|
||
}
|
||
}
|
||
|
||
.time {
|
||
color: #999;
|
||
line-height: 80px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|