240 lines
8.9 KiB
HTML
240 lines
8.9 KiB
HTML
<!--#
|
||
layout("/mobile/platform.html"){
|
||
#-->
|
||
|
||
<style>
|
||
.activity_img_back {
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
height: 200px;
|
||
width: 100%;
|
||
}
|
||
|
||
.regCell .van-cell__label .van-tag {
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.userActionPopup {
|
||
height: 80%;
|
||
}
|
||
|
||
.userActionPopup .van-cell__value {
|
||
text-align: center;
|
||
}
|
||
|
||
.userActionPopup .addBtn {
|
||
width: 24px;
|
||
}
|
||
|
||
.userActionPopup .van-action-sheet__item {
|
||
position: relative;
|
||
}
|
||
|
||
.userActionPopup .userSelSuccess {
|
||
position: absolute;
|
||
right: 20px;
|
||
}
|
||
</style>
|
||
|
||
<div id="app" v-cloak>
|
||
<van-nav-bar title="分工会报名" left-arrow placeholder fixed @click-left="history.back()"></van-nav-bar>
|
||
|
||
<!--#include("/mobile/activity/unionActivity/common/activityInfo.html"){}#-->
|
||
|
||
<van-cell-group inset class="mt5">
|
||
<van-cell title="报名人员" class="regCell">
|
||
<template #label>
|
||
<div>
|
||
<span v-if="o.userNumberLimit===1">
|
||
本活动限制总报名人数：（{{o.totalUserNumberLimit}}）人
|
||
</span>
|
||
<span v-else-if="o.userNumberLimit===2">
|
||
当前分工会报名限额 <span style="color: orange">（{{o.limitUnion.limitNum}}）人</span>
|
||
</span>
|
||
</div>
|
||
<div class="mt5">
|
||
<div v-if="registerList && registerList.length>0">
|
||
<template v-for="item in registerList">
|
||
<van-tag type="primary" :closeable="tagCloseable" size="medium"
|
||
@close="removeRegUser(item)">
|
||
{{item.userName}}
|
||
</van-tag>
|
||
</template>
|
||
</div>
|
||
<div v-else>
|
||
<div style="text-align: center;margin-top: 20px;">
|
||
无报名人员
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt5" style="text-align: right"
|
||
v-if="moment(o.applyStartTime).valueOf() < moment().valueOf() && moment().valueOf() < moment(o.applyEndTime).valueOf()">
|
||
<van-button v-if="tagCloseable" size="mini" type="info" @click="openUserActionSheet">选择报名人员
|
||
</van-button>
|
||
</div>
|
||
</template>
|
||
</van-cell>
|
||
</van-cell-group>
|
||
|
||
<van-action-sheet v-model="userActionSheet" title="选择报名人员" class="userActionPopup">
|
||
<van-search v-model="searchKey" @search="onSearchUser" placeholder="请输入姓名搜索"></van-search>
|
||
|
||
<!-- <div class="van-hairline--bottom">-->
|
||
<!-- 点击列表中的人员添加到活动人员中-->
|
||
<!-- </div>-->
|
||
|
||
<div class="van-action-sheet__content mt5" v-if="searchUserList && searchUserList.length>0">
|
||
<template v-if="searchLoading">
|
||
<van-loading size="24px" vertical>搜索中...</van-loading>
|
||
</template>
|
||
<template v-if="!searchLoading">
|
||
<template v-for="item in searchUserList" v-if="!registerList.map(v=>v.id).includes(item.id)">
|
||
<button @click="searchUserAdd(item)"
|
||
class="van-action-sheet__item van-hairline--bottom">
|
||
<span class="van-action-sheet__name">{{item.userName}}</span>
|
||
</button>
|
||
</template>
|
||
</template>
|
||
|
||
</div>
|
||
<van-empty v-else style="position:absolute;" description=""></van-empty>
|
||
</van-action-sheet>
|
||
|
||
|
||
<div style="margin: 20px 20px 10px 20px"
|
||
v-if="moment(o.applyStartTime).valueOf() < moment().valueOf() && moment().valueOf() < moment(o.applyEndTime).valueOf()">
|
||
<van-button v-if="tagCloseable" @click="doSave()" style="border-radius: 10px" block type="info"
|
||
:color="themeColor">
|
||
提 交
|
||
</van-button>
|
||
<van-button v-else="!tagCloseable" @click="tagCloseable = true" style="border-radius: 10px" block type="info"
|
||
:color="themeColor">
|
||
修 改
|
||
</van-button>
|
||
</div>
|
||
|
||
<!-- <div style="margin: 20px 20px 10px 20px" v-if="tagCloseable">-->
|
||
<!-- <van-button-->
|
||
<!-- :disabled="moment().valueOf() > moment(o.endTime).valueOf() || moment().valueOf() < moment(o.startTime).valueOf()"-->
|
||
<!-- @click="doSign()" style="border-radius: 10px" block type="info"-->
|
||
<!-- :color="themeColor">-->
|
||
<!-- 立即签到-->
|
||
<!-- </van-button>-->
|
||
<!-- </div>-->
|
||
|
||
</div>
|
||
|
||
<script>
|
||
<!--#include("/mobile/activity/unionActivity/common/initMap.js"){}#-->
|
||
|
||
const vue = new Vue({
|
||
el: '#app',
|
||
mixins: [mobileMixins, self_mixin],
|
||
data() {
|
||
return {
|
||
activityId: '',
|
||
o: {},
|
||
registerList: [],
|
||
userActionSheet: false,
|
||
searchKey: '',
|
||
searchUserList: [],
|
||
tagCloseable: true,
|
||
searchLoading: false
|
||
}
|
||
},
|
||
methods: {
|
||
async getRegisterUser() {
|
||
const resp = await $.get('/mobile/activity/unionActivity/selectRegisterList', {activityId: this.activityId})
|
||
if (resp.code === 0) {
|
||
this.registerList = resp.data
|
||
if (this.registerList.length > 0) {
|
||
this.tagCloseable = false
|
||
}
|
||
}
|
||
},
|
||
openUserActionSheet() {
|
||
this.searchKey = ''
|
||
this.searchUserList = []
|
||
this.userActionSheet = true
|
||
},
|
||
async onSearchUser(val) {
|
||
this.searchLoading = true
|
||
const resp = await $.get('/mobile/activity/unionActivity/searchNoRegisterUser', {
|
||
activityId: this.activityId,
|
||
searchKey: val
|
||
})
|
||
if (resp.code === 0) {
|
||
setTimeout(() => {
|
||
this.searchLoading = false
|
||
this.searchUserList = resp.data.list
|
||
}, 1000)
|
||
} else {
|
||
this.$toast.fail(resp.msg)
|
||
}
|
||
},
|
||
searchUserAdd(item) {
|
||
const {id, userName} = item
|
||
this.registerList.push({id, userName})
|
||
},
|
||
async removeRegUser(item) {
|
||
const confirm = await this.$dialog.confirm({
|
||
title: '提示',
|
||
message: '您确认要移除吗？',
|
||
})
|
||
if (confirm === 'confirm') {
|
||
const index = this.registerList.findIndex(v => v.id === item.id)
|
||
this.registerList.splice(index, 1)
|
||
}
|
||
},
|
||
//保存
|
||
async doSave() {
|
||
if (this.registerList.length === 0) {
|
||
this.$toast('请添加报名人员后再提交！')
|
||
return
|
||
}
|
||
let message = ''
|
||
if (this.o.needSign) {
|
||
message = '此活动开启了签到,需要您活动当天前往签到点位核实活动报名人员后进行签到！'
|
||
}
|
||
const confirm = await this.$dialog.confirm({
|
||
title: '提示',
|
||
message: message + '您确认要报名吗？',
|
||
})
|
||
if (confirm === 'confirm') {
|
||
const loading = this.$toast.loading({
|
||
message: '报名中...',
|
||
forbidClick: true,
|
||
overlay: true,
|
||
duration: 0
|
||
})
|
||
const params = {
|
||
activityId: this.activityId,
|
||
personIds: JSON.stringify(this.registerList.map(v => v.id))
|
||
}
|
||
const resp = await $.post('/mobile/activity/unionActivity/doSaveUnionRegister', params)
|
||
loading.close()
|
||
if (resp.code === 0) {
|
||
await this.getRegisterUser()
|
||
await this.getHasRegUserNum()
|
||
this.$toast.success(resp.msg)
|
||
} else {
|
||
this.$toast.fail(resp.msg)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
const id = GetQueryString("id")
|
||
if (id) {
|
||
this.activityId = id
|
||
this.getActivityInfo()
|
||
this.getRegisterUser()
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<!--#
|
||
}
|
||
#--> |