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>
|