340 lines
13 KiB
HTML
340 lines
13 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;
|
||
}
|
||
|
||
.van-search__action {
|
||
background-color: #edf0ff
|
||
}
|
||
</style>
|
||
|
||
<div id="app" v-cloak>
|
||
<van-nav-bar :title="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" v-loading="tagCloseable">
|
||
<div v-if="registerList && registerList.length>0">
|
||
<template v-for="item in registerList">
|
||
<van-tag type="primary" :closeable="tagCloseable" size="medium"
|
||
:color="themeColor"
|
||
@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" :color="themeColor">选择报名人员
|
||
</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" show-action
|
||
placeholder="请输入姓名搜索">
|
||
<template #action>
|
||
<div @click="onSearchUser(searchKey)">搜索</div>
|
||
</template>
|
||
|
||
</van-search>
|
||
|
||
<!-- <div class="van-hairline--bottom">-->
|
||
<!-- 点击列表中的人员添加到活动人员中-->
|
||
<!-- </div>-->
|
||
<template v-if="searchLoading">
|
||
<van-loading size="24px" vertical>搜索中...</van-loading>
|
||
</template>
|
||
|
||
<div class="van-action-sheet__content mt5"
|
||
v-else-if="searchUserList && searchUserList.length>0">
|
||
|
||
<template>
|
||
<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}}（{{item.loginName}}）</span>
|
||
</button>
|
||
</template>
|
||
<!--<van-empty description="没有更多了" style="position:absolute;height: 70%"
|
||
v-else></van-empty>-->
|
||
</template>
|
||
|
||
</div>
|
||
<van-empty description="暂无数据" style="position:absolute;height: 70%"
|
||
v-else-if="searchUserList.length===0"></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 {
|
||
title: "",
|
||
userId: "${@shiro.getPrincipalProperty('id')}",
|
||
userName: "${@shiro.getPrincipalProperty('username')}",
|
||
activityId: '',
|
||
o: {},
|
||
registerList: [],
|
||
addRegisterList: [],
|
||
userActionSheet: false,
|
||
searchKey: '',
|
||
searchUserList: [],
|
||
tagCloseable: true,
|
||
searchLoading: false
|
||
}
|
||
},
|
||
methods: {
|
||
async getRegisterUser() {
|
||
const resp = await $.get('/mobile/activity/myActivity/selectRegisterList', {activityId: this.activityId})
|
||
if (resp.code === 0) {
|
||
if (this.o.signUpMethod === 3) {
|
||
this.registerList = resp.data.filter(v => v.applyUserId === this.userId)
|
||
} else {
|
||
this.registerList = resp.data
|
||
}
|
||
this.addRegisterList = resp.data
|
||
if (this.registerList.length > 0) {
|
||
this.tagCloseable = false
|
||
}
|
||
}
|
||
},
|
||
openUserActionSheet() {
|
||
this.searchKey = ''
|
||
this.searchUserList = []
|
||
this.userActionSheet = true
|
||
},
|
||
async onSearchUser(val) {
|
||
if (!val) {
|
||
this.$toast.fail("请输入搜索条件")
|
||
return
|
||
}
|
||
this.searchLoading = true
|
||
const resp = await $.get('/mobile/activity/unionActivity/searchNoRegisterUser', {
|
||
activityId: this.activityId,
|
||
searchKey: val
|
||
})
|
||
if (resp.code === 0) {
|
||
this.searchLoading = false
|
||
this.searchUserList = resp.data.list
|
||
|
||
} else {
|
||
this.$toast.fail(resp.msg)
|
||
}
|
||
},
|
||
searchUserAdd(item) {
|
||
const {id, userName} = item
|
||
this.registerList.push({id, userName})
|
||
},
|
||
async removeRegUser(item) {
|
||
if (this.userId === item.id) {
|
||
this.$toast.fail("自己不能删除")
|
||
return
|
||
}
|
||
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
|
||
}
|
||
if (this.o.signUpMethod === 3) {
|
||
if (this.registerList.length !== this.o.teamNum) {
|
||
vant.Dialog.alert({
|
||
title: '温馨提示',
|
||
message: '此活动是双人报名模式您需要报名' + this.o.teamNum + '人！',
|
||
}).then(() => {
|
||
|
||
});
|
||
return
|
||
}
|
||
if (!this.registerList.map(v => v.id).includes(this.userId)) {
|
||
vant.Dialog.alert({
|
||
title: '温馨提示',
|
||
message: '此活动是组队模式请您找' + this.o.teamNum + '朋友一起报名！',
|
||
}).then(() => {
|
||
|
||
});
|
||
return
|
||
}
|
||
// await this.getRegisterUser()
|
||
const resp = await $.get('/mobile/activity/myActivity/selectRegisterList', {activityId: this.activityId})
|
||
this.addRegisterList = resp.data
|
||
let arr = []
|
||
if (this.addRegisterList && this.addRegisterList.length > 0) {
|
||
this.addRegisterList.forEach(v => {
|
||
this.registerList.forEach(r => {
|
||
if (v.id === r.id && v.applyUserId !== this.userId) {
|
||
arr.push(r.userName)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
if (arr && arr.length > 0) {
|
||
vant.Dialog.alert({
|
||
title: '温馨提示',
|
||
message: '【' + arr.toString() + '】已成功报名您无需再报名！',
|
||
}).then(() => {
|
||
|
||
});
|
||
return
|
||
}
|
||
|
||
/* if (this.addRegisterList.map(v => v.id).includes(this.userId)) {
|
||
vant.Dialog.alert({
|
||
title: '温馨提示',
|
||
message: '您已报名无需再报名！',
|
||
}).then(() => {
|
||
|
||
});
|
||
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)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
async created() {
|
||
const id = GetQueryString("id")
|
||
if (id) {
|
||
this.activityId = id
|
||
await this.getActivityInfo()
|
||
await this.getRegisterUser()
|
||
if (this.o.signUpMethod === 3 && this.registerList.length === 0) {
|
||
this.registerList.push({id: this.userId, userName: this.userName})
|
||
}
|
||
this.title = (this.o.signUpMethod === 2 ? '分工会报名' : '组队报名')
|
||
if (moment(this.o.applyStartTime).valueOf() < moment().valueOf() && moment().valueOf() > moment(this.o.applyEndTime).valueOf()) {
|
||
this.$toast.fail("不在活动范围内")
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<!--#
|
||
}
|
||
#--> |