first commit
This commit is contained in:
=
@@ -0,0 +1,261 @@
|
||||
<!--#
|
||||
layout("/mobile/platform.html"){
|
||||
#-->
|
||||
<style>
|
||||
|
||||
.van-image {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
background-color: white;
|
||||
padding: 13px;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
}
|
||||
|
||||
.van-tabs {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.van-tab {
|
||||
-webkit-flex: none;
|
||||
}
|
||||
|
||||
.van-tab--active {
|
||||
color: #1867b0;
|
||||
}
|
||||
|
||||
.van-tabs__nav--line {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.van-tabs__content {
|
||||
padding: 13px 13px 50px 13px;
|
||||
background-color: white;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.content_title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pre_text {
|
||||
white-space: break-spaces;
|
||||
padding-left: 7px;
|
||||
/*margin-top: 30px;*/
|
||||
}
|
||||
|
||||
.van-sidebar-item {
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.custable {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.custable td {
|
||||
text-align: center;
|
||||
height: 10px;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
padding: 0 10px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center !important;
|
||||
font-weight: bold;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.custable tr:nth-child(odd) {
|
||||
background-color: #eff1f5;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-top: 1px solid #000000;
|
||||
border-left: 1px solid #000000;
|
||||
border-collapse: collapse; /*设置单元格的边框合并为1*/
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f2f2f2;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #000000;
|
||||
border-right: 1px solid #000000;
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid #000000;
|
||||
border-right: 1px solid #000000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="app" v-cloak>
|
||||
<van-sticky>
|
||||
<van-nav-bar title="活动详情" left-arrow
|
||||
@click-left="location.replace('/platform/mobile/trainSignUpActivity/trainList')"></van-nav-bar>
|
||||
</van-sticky>
|
||||
|
||||
<!--<van-image :height="$(window).height() * 0.28" v-if="this.activity.cover && this.activity.cover.filepath" :src="'${AppFileDomain!}' + this.activity.cover.filepath"></van-image>
|
||||
<van-image :height="$(window).height() * 0.28" v-else src=""></van-image>-->
|
||||
<van-image height="186" src="/assets/mobile/img/3quhtakfd4heeqsk6irqhft60p.png"></van-image>
|
||||
<div class="title">{{activity.activityName}}</div>
|
||||
|
||||
<van-tabs v-model:active="tabActive" shrink>
|
||||
<van-tab title="详细信息" name="a">
|
||||
<!--<div class="content_title">关于{{activity.activityName}}的通知</div>-->
|
||||
<div class="pre_text" v-html="activity.introduce"></div>
|
||||
<!--<div v-for="(value, key, index) in activityMap" style="margin-bottom: 30px">
|
||||
<div class="van-sidebar-item van-sidebar-item--select">
|
||||
{{key}}<span style="color: #1867b0">（左划查看更多）</span>
|
||||
</div>
|
||||
<div style="width: 100%; overflow-x: auto">
|
||||
<table class="custable">
|
||||
<tr>
|
||||
<td>序号</td>
|
||||
<td>{{trainType}}名称</td>
|
||||
<!–<td>课次</td>–>
|
||||
<td>时间</td>
|
||||
<td>{{trainType}}地点</td>
|
||||
<td>{{trainType === '培训班' ? '讲师' : '负责人'}}</td>
|
||||
</tr>
|
||||
<tr v-for="(o, num) in value">
|
||||
<td>{{num + 1}}</td>
|
||||
<td>{{o.courseName}}</td>
|
||||
<!–<td>{{o.courseTimeList.length}}</td>–>
|
||||
<td style="line-height: 26px;">
|
||||
<div v-for="t in o.timeList">{{t}}</div>
|
||||
</td>
|
||||
<td>{{o.courseLocation}}</td>
|
||||
<td>{{o.courseInstructor}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>-->
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<van-button @click="toSign" color="#1867b0" block style="position: fixed; bottom: 0; z-index: 2">去报名</van-button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function getQueryString(name) {
|
||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
if (r != null) return decodeURI(r[2]);
|
||||
return null;
|
||||
}
|
||||
|
||||
const vue = new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
trainType: '培训班',
|
||||
trainTypeList: [],
|
||||
tabActive: 'a',
|
||||
activityId: '',
|
||||
activity: {},
|
||||
activityMap: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async findOne() {
|
||||
const resp = await $.get('/platform/mobile/trainSignUpActivity/findOne', {
|
||||
id: this.activityId,
|
||||
tabIndex: 0
|
||||
})
|
||||
if (resp.code === 0) {
|
||||
this.activity = resp.data
|
||||
const type = this.trainTypeList.find(o => o.code === this.activity.trainType)
|
||||
this.trainType = type ? type.name : '培训班'
|
||||
//将数据按校区分组
|
||||
for (const item of this.activity.courseList) {
|
||||
|
||||
//item.courseName = item.courseName.indexOf('校区') !== -1 ? item.courseName.substr(item.courseName.indexOf('校区') + 2) : item.courseName
|
||||
const key = item.campus
|
||||
if (this.activityMap[key] === undefined) {
|
||||
let array = []
|
||||
array.push(item)
|
||||
this.activityMap[key] = array
|
||||
} else {
|
||||
this.activityMap[key].push(item)
|
||||
}
|
||||
|
||||
let timeArray = []
|
||||
if (item.courseTimeList && item.courseTimeList.length > 0) {
|
||||
for (const time of item.courseTimeList) {
|
||||
const t = this.getWeek(time.courseDate.substr(0, 10)) + ' ' + time.courseStartTime.substr(11, 5) + '~' + time.courseEndTime.substr(11, 5)
|
||||
timeArray.push(t)
|
||||
}
|
||||
item.timeList = Array.from(new Set(timeArray))
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async toSign() {
|
||||
const nowTime = moment().unix()
|
||||
if (nowTime < moment(this.activity.activitySignUpStartTime).unix()) {
|
||||
vant.Dialog.alert({
|
||||
title: '提示',
|
||||
message: '活动报名还未开始',
|
||||
confirmButtonColor: '#1867b0'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (nowTime > moment(this.activity.activitySignUpEndTime).unix()) {
|
||||
vant.Dialog.alert({
|
||||
title: '提示',
|
||||
message: '活动报名已结束',
|
||||
confirmButtonColor: '#1867b0'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (this.activity.activityGroupId != null) {
|
||||
const isExist = await getScopeUser(this.activity.activityGroupId)
|
||||
if (!isExist) {
|
||||
if(this.activity.activityGroupName.indexOf('两癌筛查') !== -1) {
|
||||
vant.Dialog.alert({
|
||||
title: '温馨提示',
|
||||
message: '哇偶，只有年龄满35周岁不足64周岁的女神才可以报名喔',
|
||||
confirmButtonColor: '#1867b0'
|
||||
})
|
||||
}else {
|
||||
vant.Dialog.alert({
|
||||
title: '参加人员范围',
|
||||
message: this.activity.activityGroupName,
|
||||
confirmButtonColor: '#1867b0'
|
||||
})
|
||||
}
|
||||
return
|
||||
}
|
||||
}
|
||||
window.location.href = '/platform/mobile/trainSignUpActivity/trainInfo?activityId=' + this.activity.id + '&endTime=' + this.activity.activitySignUpEndTime
|
||||
},
|
||||
getWeek(dateString) {
|
||||
var dateArray = dateString.split("-");
|
||||
const date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
|
||||
return "周" + "日一二三四五六".charAt(date.getDay());
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
this.trainTypeList = await getDictOptions("trainSignUpType")
|
||||
this.activityId = getQueryString('activityId')
|
||||
this.findOne()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,900 @@
|
||||
<!--#
|
||||
layout("/mobile/platform.html"){
|
||||
#-->
|
||||
<style>
|
||||
.van-card {
|
||||
background: #ffffff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.van-card__thumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.van-card__content > div {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.van-doc-card {
|
||||
margin: 14px;
|
||||
padding: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.van-doc-card-my {
|
||||
margin: 14px;
|
||||
padding: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.train-title {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 16px 16px 10px;
|
||||
min-height: 100px;
|
||||
max-height: 360px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #cccdd1;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-family: -webkit-pictograph, serif;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.popup {
|
||||
width: 90%;
|
||||
max-height: 70%;
|
||||
overflow-y: auto;
|
||||
border-radius: 10px;
|
||||
padding: 2px 10px 12px 10px;
|
||||
}
|
||||
|
||||
.van-card__thumb {
|
||||
width: 35px;
|
||||
height: 38px;
|
||||
margin-right: 20px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.van-card__content {
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.van-card__title {
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.van-dropdown-menu__item {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.van-empty {
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
transform: translate(0%, 50%);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.join {
|
||||
background-color: #0e78c5;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.joinPopup {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f6f7f9;
|
||||
}
|
||||
|
||||
.join_content {
|
||||
padding: 20px;
|
||||
/*height: calc(100% - 40px - 46px - 60px);*/
|
||||
height: calc(100vh - 46px - 50px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.join_submit {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.van-card-header {
|
||||
padding: 14px 20px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
box-sizing: border-box;
|
||||
color: #0e78c5;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.van-card-body {
|
||||
padding: 0px 10px 0px 10px
|
||||
}
|
||||
|
||||
.van-doc-card-two {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
line-height: 25px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
.footer .van-button {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.amap-logo {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.amap-copyright {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.van-tabs__nav--complete {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="app" v-cloak>
|
||||
<van-sticky>
|
||||
<van-nav-bar :title="trainType + '列表'" left-arrow
|
||||
@click-left="pjaxReplace('/platform/mobile/trainSignUpActivity/trainList?type=' + type)"></van-nav-bar>
|
||||
<van-dropdown-menu active-color="#1867b0">
|
||||
<van-dropdown-item @change="tabChange" v-model="activityStatus"
|
||||
:options="activityOptions"></van-dropdown-item>
|
||||
<van-dropdown-item @change="courseChange" v-model="courseType" :options="courseOptions"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
|
||||
<van-tabs v-if="activityStatus != '1' && assortList.length > 0" v-model="assort" type="card" color="#1867B0"
|
||||
style="margin-top: 10px" @click="tabClick">
|
||||
<van-tab v-for="item in assortList" :name="item" :title="item">
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<!--<van-notice-bar
|
||||
left-icon="volume-o"
|
||||
text="温馨提示：每人只能填报一项活动">
|
||||
</van-notice-bar>-->
|
||||
|
||||
<template>
|
||||
<div id="parentDiv" v-model="loading" v-if="tableData.courseList && tableData.courseList.length>0" style="margin-bottom: 60px">
|
||||
|
||||
<template v-for="o in tableData.courseList">
|
||||
<div style="position: relative"
|
||||
:class="activityStatus !== '1' ? 'van-doc-card' : 'van-doc-card-my'">
|
||||
<div>
|
||||
<van-tag type="primary" size="medium">
|
||||
{{getCourseTypeName(o)}}
|
||||
</van-tag>
|
||||
<span style="font-weight: bold; font-size: 14px">
|
||||
{{o.courseName}}
|
||||
<span v-if="activityStatus !== '1'">
|
||||
<span v-html="calcSignUpCount(o)"></span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="train-title">校  区：</span>
|
||||
<span>{{o.campus}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="train-title">活动地点：</span>
|
||||
<span>{{o.courseLocation}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="train-title">联 系 人：</span>
|
||||
<span>{{o.courseInstructor}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="train-title">活动时间：</span>
|
||||
<template v-if="o.courseName.includes('时间待定')">
|
||||
<span style="color: #e5a15e">活动时间另行通知</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="o.courseTimeList && o.courseTimeList.length > 1" @click="trainClick(o)"
|
||||
style="color: #1867b0">点我查看</span>
|
||||
<span @click="trainClick(o)" v-if="o.courseTimeList && o.courseTimeList.length === 1"
|
||||
style="color: #1867b0">
|
||||
{{o.courseTimeList[0].courseStartTime.substring(11, 19) + ' ~ ' + o.courseTimeList[0].courseEndTime.substring(11, 19)}}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
<template v-if="o.courseTimeName">
|
||||
<div>
|
||||
<span class="train-title">报名时段：</span>
|
||||
<span style="color: #1867b0">{{o.courseTimeName}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<span @click.stop="showPic(FILE_DOMAIN + '/fileStreamPreview?id=' + tableData.wechat.id)"
|
||||
v-if="o.isSign === true && tableData.wechat"
|
||||
style="color: #dd6363">点我查看微信群二维码</span>
|
||||
</div>
|
||||
<van-button type="primary" color="#1867b0" round size="mini"
|
||||
v-if="activityStatus !== '1' && o.isSign === false"
|
||||
style="position: absolute; left: 74%; bottom: 10%; width: 74px; height: 28px"
|
||||
@click.stop="signUp(o)">
|
||||
我要报名
|
||||
</van-button>
|
||||
|
||||
<van-button type="primary" color="#dd6363" round size="mini"
|
||||
v-if="o.isSign === true && moment().valueOf() < moment(activity.activitySignUpEndTime).valueOf()"
|
||||
style="position: absolute; left: 74%; bottom: 10%; width: 74px; height: 28px"
|
||||
@click.stop="cancel(o)">
|
||||
取消报名
|
||||
</van-button>
|
||||
|
||||
<image v-if="activityStatus !== '1' && o.isSign === true && moment().valueOf() >= moment(activity.activitySignUpEndTime).valueOf()"
|
||||
style="position: absolute; left: 77%; top: 58%;"
|
||||
src="/assets/mobile/svg/train/sign_up.svg"></image>
|
||||
|
||||
<!-- <div @click="trainClick(o)" v-if="activityStatus === '1'"-->
|
||||
<!-- style="text-align: center; line-height: 40px; width: 40px; height: 40px;display: inline-block; font-size: 14px;-->
|
||||
<!-- position: absolute; right: -10px; top: 8%; background-color: #00c698; border-radius: 7px; color: white">-->
|
||||
<!-- 签到-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<van-empty v-else description="暂无数据"></van-empty>
|
||||
</template>
|
||||
|
||||
<van-popup v-model:show="popupShow" class="popup">
|
||||
<!--<div @click="vant.Dialog.alert({message: '上课前30分钟，下课前30分钟。',theme: 'round-button',confirmButtonColor: '#1867b0'})"
|
||||
style="font-size: 12px; color: grey; text-align: right; position: relative; top: 8px; right: 6px; z-index: 2;">签到规则 ></div>-->
|
||||
|
||||
<div id="map" v-if="course.isMobileSign === true && course.signType === 3"
|
||||
style="width: 100%; height: 250px"></div>
|
||||
|
||||
<van-card
|
||||
:title="item.courseStartTime.substring(0, 10) + '（' +
|
||||
getWeek(item.courseStartTime.substring(0, 10)) + '）'" v-for="(item,index) in qdArray"
|
||||
thumb="/assets/mobile/svg/train/qd1.svg">
|
||||
<template #desc>
|
||||
<div style="margin-top: 7px">
|
||||
{{item.courseStartTime.substring(11, 19) + ' ~ ' + item.courseEndTime.substring(11, 19)}}
|
||||
</div>
|
||||
<div v-if="item.courseLocationCoordinates && item.isMobileSign === true && activityStatus === '1'">
|
||||
<van-button type="primary" color="#1867b0" round size="mini" @click.stop="showQRCode(item, 2)"
|
||||
v-if="(item.isAttend === true && course.giftType === 1 && item.state === 1)
|
||||
|| (moment().unix() > moment(item.courseEndTime).unix() && item.state === 3 && item.isAttend === true && course.giftType === 1)"
|
||||
style="position: absolute; right: 65px; top: 25%; width: 60px; height: 25px">
|
||||
礼品码
|
||||
</van-button>
|
||||
<van-button type="primary" color="#e1e1e1" round size="mini"
|
||||
v-if="(item.isAttend === false && findTime(item) === false && item.state === 1)
|
||||
|| (moment().unix() > moment(item.courseEndTime).unix() && item.state === 3 && item.isAttend === false)"
|
||||
style="position: absolute; right: 0; top: 25%; width: 60px; height: 25px">
|
||||
未签到
|
||||
</van-button>
|
||||
<van-button type="primary" color="#1867b0" round size="mini"
|
||||
v-if="(item.isAttend === false && findTime(item) === true && item.state === 1)
|
||||
|| (moment().unix() > moment(item.courseEndTime).unix() && item.state === 3 && item.isAttend === false)"
|
||||
style="position: absolute; right: 0; top: 25%; width: 60px; height: 25px"
|
||||
@click.stop="signIn(item)">
|
||||
签 到
|
||||
</van-button>
|
||||
<van-button type="primary" color="#61ce98" round size="mini"
|
||||
v-if="(item.isAttend === true && item.state === 1)
|
||||
|| (moment().unix() > moment(item.courseEndTime).unix() && item.state === 3 && item.isAttend === true)"
|
||||
style="position: absolute; right: 0; top: 25%; width: 60px; height: 25px">
|
||||
已签到
|
||||
</van-button>
|
||||
</div>
|
||||
</template>
|
||||
</van-card>
|
||||
|
||||
</van-popup>
|
||||
|
||||
<van-popup class="joinPopup" position="right" v-model:show="joinPopup">
|
||||
<van-nav-bar @click-left="joinPopup = false" fixed left-arrow placeholder title="活动报名"></van-nav-bar>
|
||||
<div class="join_content">
|
||||
<van-form @submit="joinSubmit" :show-error-message="false">
|
||||
<div class="van-doc-card-two" style="margin-bottom: 16px">
|
||||
<div class="van-card-header">
|
||||
活动信息
|
||||
</div>
|
||||
<div class="van-card-body">
|
||||
<van-field label="活动名称" readonly v-model="choose.courseName"></van-field>
|
||||
<van-field label="校区" readonly v-model="choose.campus"></van-field>
|
||||
<van-field label="活动地点" readonly v-model="choose.courseLocation"></van-field>
|
||||
</div>
|
||||
<div class="van-card-header">
|
||||
基础信息
|
||||
</div>
|
||||
<div class="van-card-body">
|
||||
<van-field label="姓名" readonly v-model="formData.userName"></van-field>
|
||||
<van-field label="工号" readonly v-model="formData.loginName"></van-field>
|
||||
<van-field label="所在单位" readonly v-model="formData.unitName"></van-field>
|
||||
<van-field label="所属工会" readonly v-model="formData.unionName"></van-field>
|
||||
<van-field label="性别" readonly v-model="formData.sex"></van-field>
|
||||
<van-field label="联系方式" required :rules="[{ required: true, message: '请填写联系方式' }]"
|
||||
placeholder="请填写联系方式" v-model="formData.mobile"></van-field>
|
||||
<template v-if="this.choose.courseIsLimitApply">
|
||||
<van-field label="报名时段" required :rules="[{ required: true, message: '请选择报名时段' }]"
|
||||
readonly @click="showCoursePicker = true;getCourseTimeSelectList(choose);"
|
||||
placeholder="请选择报名时段" v-model="formData.courseTimeName"></van-field>
|
||||
<van-popup v-model="showCoursePicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="courseTimeSelectList"
|
||||
@confirm="onCourseConfirm"
|
||||
@cancel="showCoursePicker=false"
|
||||
></van-picker>
|
||||
</van-popup>
|
||||
</template>
|
||||
<train-dynamic-form v-model="dynamicColumnsData" ref="trainDynamicForm"></train-dynamic-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<van-button class="join join_submit">提交报名</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
|
||||
<div>
|
||||
<van-tabbar v-model="tarBarActive">
|
||||
<van-tabbar-item icon="home-o" replace @click="pjaxReplace('/platform/mobile/trainSignUpActivity/trainList')">活动报名</van-tabbar-item>
|
||||
<van-tabbar-item icon="manager-o" replace @click="pjaxReplace('/platform/mobile/trainSignUpActivity/trainList?type=my')">我的活动</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let pointArray = []
|
||||
let locations = null
|
||||
let map = null
|
||||
let geolocation = null
|
||||
const vue = new Vue({
|
||||
el: '#app',
|
||||
mixins: [mobileMixins],
|
||||
data() {
|
||||
return {
|
||||
tarBarActive: 0,
|
||||
assort: '',
|
||||
assortList: [],
|
||||
allColumnsData: [],
|
||||
dynamicColumnsData: [],
|
||||
trainType: '培训班',
|
||||
trainTypeList: [],
|
||||
actionShow: false,
|
||||
timeList: [],
|
||||
activityId: '',
|
||||
activityStatus: '0',
|
||||
joinPopup: false,
|
||||
popupShow: false,
|
||||
courseText: '',
|
||||
qdInfoList: [],
|
||||
course: [],
|
||||
qdArray: [],
|
||||
activityOptions: [{text: '全部', value: '0'}, {text: '我报名的', value: '1'}],
|
||||
courseOptions: [],
|
||||
courseType: '0',
|
||||
tempArray: [],
|
||||
activitySignUpStartTime: null,
|
||||
choose: {},
|
||||
activity: '',
|
||||
|
||||
showCoursePicker: false,
|
||||
courseTimeSelectList: [],
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'train-dynamic-form': httpVueLoader('/components/mobile/common/TrainDynamicForm.vue')
|
||||
},
|
||||
methods: {
|
||||
tabClick(name, title) {
|
||||
if(this.courseType === '0' && this.activityStatus !== '1') {
|
||||
this.tableData.courseList = this.tempArray.courseList.filter(o => o.assort === title)
|
||||
} else {
|
||||
this.tableData.courseList = this.tempArray.courseList.filter(o => o.assort === title && o.courseType === this.courseType)
|
||||
}
|
||||
},
|
||||
calcSignUpCount(o) {
|
||||
if(o.reserveMode === 2) {
|
||||
let lave = 0
|
||||
let lave2 = 0
|
||||
if(o.hasRegisterNum < o.coursePeopleNumber) {
|
||||
lave = o.coursePeopleNumber - o.hasRegisterNum
|
||||
lave2 = o.courseReservedNumber
|
||||
} else {
|
||||
lave = 0
|
||||
lave2 = (o.coursePeopleNumber + o.courseReservedNumber) - o.hasRegisterNum
|
||||
}
|
||||
let str = "（<span style='color: red'>余" + lave +"</span>/" + o.coursePeopleNumber + "人"
|
||||
+ "，<span style='color: red'>候补余" + lave2 + "</span>/" + o.courseReservedNumber + "人）"
|
||||
return str
|
||||
} else {
|
||||
let lave = o.coursePeopleNumber - (o.hasRegisterNum + o.courseReservedNumber)
|
||||
return "（<span style='color: red'>余" + lave +"</span>/" + o.coursePeopleNumber + "人）"
|
||||
}
|
||||
},
|
||||
getCourseTypeName(o) {
|
||||
const b = this.courseOptions.find(item => item.value === o.courseType)
|
||||
return b ? b.text : ''
|
||||
},
|
||||
//二维码
|
||||
showQRCode(item, type) {
|
||||
const o = {
|
||||
userId: item.userId,
|
||||
signId: item.id,
|
||||
activityId: item.activityId,
|
||||
activityCourseId: item.activityCourseId,
|
||||
isMobileSign: item.isMobileSign,
|
||||
signType: item.signType,
|
||||
isReceiveGift: item.isReceiveGift,
|
||||
giftType: item.giftType,
|
||||
type: type,
|
||||
}
|
||||
// 生成二维码的 base64 编码
|
||||
const content = jrQrcode.getQrBase64(JSON.stringify(o))
|
||||
vant.ImagePreview([content])
|
||||
},
|
||||
showPic(url) {
|
||||
vant.ImagePreview([url])
|
||||
},
|
||||
findTime(o) {
|
||||
const today = moment().format('YYYY-MM-DD')
|
||||
return o.courseStartTime.substr(0, 10) === today
|
||||
},
|
||||
findQd() {
|
||||
const today = moment().format('YYYY-MM-DD')
|
||||
const day = this.qdInfoList.find(item => {
|
||||
return item.courseStartTime.substr(0, 10) === today
|
||||
})
|
||||
if (day === undefined) {
|
||||
return 3
|
||||
} else {
|
||||
return day.isAttend ? 2 : 1
|
||||
}
|
||||
},
|
||||
async signIn(o) {
|
||||
if (o.signType === 1) {
|
||||
vant.Dialog.alert({message: '功能马上推出，敬请期待！'})
|
||||
return
|
||||
//调相机扫一扫
|
||||
wxScannerQrCode.scanner().then(async res => {
|
||||
if (res) {
|
||||
const course = JSON.parse(res)
|
||||
const resp = await $.post('/platform/mobile/trainSignUpActivity/codeSign', {
|
||||
codeCourseId: course.courseId,
|
||||
clickCourseId: o.courseId,
|
||||
id: o.id,
|
||||
})
|
||||
if(resp.code === 0) {
|
||||
vant.Dialog.alert({message: '签到成功'})
|
||||
await this.pageData()
|
||||
o.isAttend = true
|
||||
} else {
|
||||
vant.Dialog.alert({message: resp.msg})
|
||||
}
|
||||
}
|
||||
}).catch(err => {
|
||||
vant.Dialog.alert({message: err})
|
||||
})
|
||||
}
|
||||
if (o.signType === 2) {
|
||||
this.showQRCode(o, 1)
|
||||
}
|
||||
if (o.signType === 3) {
|
||||
//获取当前时间，年月日
|
||||
const date = new Date()
|
||||
const today = moment().format('YYYY-MM-DD')
|
||||
const time = moment().format('YYYY-MM-DD hh:mm:ss')
|
||||
|
||||
const start = new Date(o.courseStartTime).getTime() - 1000 * 60 * 30
|
||||
//const end = new Date(o.courseStartTime).getTime() + 1000 * 60 * 30
|
||||
const end = new Date(o.courseEndTime).getTime()
|
||||
|
||||
const now = new Date().getTime()
|
||||
if (now < start || now > end) {
|
||||
vant.Toast('请在规定时间签到')
|
||||
return
|
||||
}
|
||||
const that = this
|
||||
geolocation.getCurrentPosition(async function (status, result) {
|
||||
if (status === 'complete') {
|
||||
locations = [result.position.getLng(), result.position.getLat()]
|
||||
//用户当前位置
|
||||
const userPoint = new AMap.LngLat(result.position.getLng(), result.position.getLat())
|
||||
//课程位置
|
||||
const coursePoint = new AMap.LngLat(that.course.courseLocationCoordinates[0], that.course.courseLocationCoordinates[1])
|
||||
const distance = Math.round(userPoint.distance(coursePoint))
|
||||
if (distance > 250) {
|
||||
vant.Toast('请在250米内签到')
|
||||
return
|
||||
}
|
||||
const array = [result.position.getLng(), result.position.getLat()]
|
||||
const resp = await $.post('/platform/mobile/trainSignUpActivity/doQd', {
|
||||
id: o.id,
|
||||
courseId: that.course.id,
|
||||
point: JSON.stringify(array),
|
||||
})
|
||||
if (resp.code === 0) {
|
||||
await that.pageData()
|
||||
}
|
||||
vant.Toast(resp.msg)
|
||||
that.popupShow = false
|
||||
} else {
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
//获取当前坐标点
|
||||
getPoint() {
|
||||
/*return new Promise((resolve, reject) => {
|
||||
window.navigator.geolocation.getCurrentPosition(position => {
|
||||
pointArray = [position.coords.longitude, position.coords.latitude]
|
||||
resolve(pointArray)
|
||||
}, error => {
|
||||
vant.Toast(error.message)
|
||||
pointArray = []
|
||||
reject([])
|
||||
})
|
||||
})*/
|
||||
geolocation.getCurrentPosition(function(status,result){
|
||||
if(status === 'complete'){
|
||||
//alert(result.position)
|
||||
locations = result.position
|
||||
}else{
|
||||
}
|
||||
});
|
||||
},
|
||||
cancel(o) {
|
||||
vant.Dialog.confirm({
|
||||
title: '温馨提示',
|
||||
message: "您确定要<span style='color: red'>取消【" + o.courseName + "】</span>吗？",
|
||||
confirmButtonColor: '#1867b0',
|
||||
}).then(async () => {
|
||||
const resp = await $.post('/platform/mobile/trainSignUpActivity/cancelSignUp', {
|
||||
activityId: o.activityId,
|
||||
courseId: o.id
|
||||
})
|
||||
vant.Toast(resp.msg)
|
||||
if (resp.code === 0) {
|
||||
this.pageData()
|
||||
}
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
async signUp(o) {
|
||||
if (o.courseName.includes('时间待定')) {
|
||||
vant.Dialog.alert({
|
||||
title: '提示',
|
||||
message: '活动报名尚未开始哦，请报名其他活动吧',
|
||||
confirmButtonColor: '#1867b0'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.choose = o
|
||||
const res = await $.post('/platform/mobile/trainSignUpActivity/validateSignUp', {
|
||||
cndId: o.conditionStructureId,
|
||||
courseId: o.id,
|
||||
})
|
||||
|
||||
if (o.courseIsLimitApply) {
|
||||
await this.getCourseTimeSelectList(o)
|
||||
}
|
||||
|
||||
if(res.code !== 0) {
|
||||
vant.Dialog.alert({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
confirmButtonColor: '#1867b0'
|
||||
})
|
||||
if(res.code !== 3) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
this.formData = {
|
||||
userName: "${@shiro.getPrincipalProperty('username')}",
|
||||
loginName: "${@shiro.getPrincipalProperty('loginname')}",
|
||||
mobile: "${@shiro.getPrincipalProperty('mobile')}",
|
||||
sex: "${@shiro.getPrincipalProperty('sex')}",
|
||||
birthday: "${@shiro.getPrincipalProperty('birthday')}",
|
||||
unionName: "${@shiro.getPrincipalProperty('union').getUnionname()}",
|
||||
unitName: "${@shiro.getPrincipalProperty('unit').getName()}",
|
||||
}
|
||||
this.$set(this.formData, "activityId", o.activityId)
|
||||
this.$set(this.formData, "courseId", o.id)
|
||||
|
||||
const column = this.allColumnsData.find(x => x.id === o.courseType)
|
||||
this.dynamicColumnsData = column ? column.trainMobileSignColumnList : []
|
||||
this.dynamicColumnsData.forEach(item => {
|
||||
item.columnValue = ''
|
||||
})
|
||||
this.joinPopup = true
|
||||
},
|
||||
async getCourseTimeSelectList(o) {
|
||||
const resp = await $.post('/platform/mobile/trainSignUpActivity/getCourseTimeSelectList',{courseId: o.id})
|
||||
if (resp.code === 0) {
|
||||
this.courseTimeSelectList = resp.data
|
||||
} else {
|
||||
this.$toast.fail("获取时段信息失败，请联系管理员")
|
||||
}
|
||||
},
|
||||
onCourseConfirm(val){
|
||||
this.formData.activityCourseId = val.value
|
||||
this.$set(this.formData, "activityCourseId", val.value)
|
||||
this.$set(this.formData, "courseTimeName", val.text.substring(0, 12))
|
||||
this.showCoursePicker = false
|
||||
},
|
||||
async joinSubmit() {
|
||||
let valid = false
|
||||
try {
|
||||
await this.$refs.trainDynamicForm.$refs.form.validate()
|
||||
valid = true
|
||||
} catch (e) {
|
||||
valid = false
|
||||
}
|
||||
if (!valid) return
|
||||
//获取家属是多少人
|
||||
let per = 0
|
||||
this.dynamicColumnsData.forEach(item => {
|
||||
if(item.columnCode === 'xdqsrs') {
|
||||
per += Number(item.columnValue)
|
||||
}
|
||||
})
|
||||
const res = await $.post('/platform/mobile/trainSignUpActivity/validateSignUp', {
|
||||
cndId: this.choose.conditionStructureId,
|
||||
courseId: this.choose.id,
|
||||
currentFamilyNumber: per,
|
||||
})
|
||||
if(res.code !== 0) {
|
||||
vant.Dialog.alert({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
confirmButtonColor: '#1867b0'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
let flag = this.choose.courseIsLimitApply
|
||||
if (flag) {
|
||||
const resp = await $.post('/platform/mobile/trainSignUpActivity/validateSourceSignUp',{activityCourseId: this.formData.activityCourseId})
|
||||
if (resp.code !== 0) {
|
||||
vant.Dialog.alert({
|
||||
title: '温馨提示',
|
||||
message: resp.msg,
|
||||
confirmButtonColor: '#1867b0'
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let msg = '您选择了【' + this.choose.courseName + (flag ? this.formData.courseTimeName : '') + '】\n的报名，是否确认？'
|
||||
vant.Dialog.confirm({
|
||||
title: '温馨提示',
|
||||
message: msg,
|
||||
confirmButtonColor: '#1867b0',
|
||||
}).then(async () => {
|
||||
const toast = vant.Toast.loading({
|
||||
duration: 0,
|
||||
forbidClick: true,
|
||||
overlay: true,
|
||||
message: '努力提交中',
|
||||
})
|
||||
const mobileColumnsValue = this.dynamicColumnsData.map(v => {
|
||||
return {
|
||||
columnName: v.columnName,
|
||||
columnValue: v.columnValue,
|
||||
columnCode: v.columnCode,
|
||||
columnFormType: v.columnFormType
|
||||
}
|
||||
})
|
||||
this.formData.mobileColumnsValue = JSON.stringify(mobileColumnsValue)
|
||||
const resp = await $.post('/platform/mobile/trainSignUpActivity/doSignUp', this.formData)
|
||||
vant.Toast(resp.msg)
|
||||
if (resp.code === 0) {
|
||||
this.pageData()
|
||||
this.joinPopup = false
|
||||
}
|
||||
toast.clear()
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
trainClick(o) {
|
||||
this.timeList = o.courseTimeList
|
||||
this.course = o
|
||||
this.qdArray = this.activityStatus === '0' ? o.courseTimeList : this.qdInfoList.filter(item => {
|
||||
return item.courseId === o.id
|
||||
})
|
||||
if (o.signType === 3) {
|
||||
this.initMap(o)
|
||||
}
|
||||
this.popupShow = true
|
||||
},
|
||||
initMap(o) {
|
||||
if (o.courseLocationCoordinates && o.courseLocationCoordinates.length < 2) {
|
||||
return
|
||||
}
|
||||
this.$nextTick(async () => {
|
||||
// 地图初始化应该在地图容器div已经添加到DOM树之后
|
||||
map = new AMap.Map('map', {
|
||||
zoom: 12,
|
||||
center: o.courseLocationCoordinates,
|
||||
resizeEnable: true,
|
||||
scrollWheel: true,
|
||||
})
|
||||
|
||||
AMap.plugin('AMap.Geolocation', function() {
|
||||
geolocation = new AMap.Geolocation({
|
||||
// 是否使用高精度定位，默认：true
|
||||
enableHighAccuracy: true,
|
||||
// 设置定位超时时间，默认：无穷大
|
||||
timeout: 10000,
|
||||
// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
|
||||
buttonOffset: new AMap.Pixel(10, 20),
|
||||
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
|
||||
//zoomToAccuracy: true,
|
||||
// 定位按钮的排放位置, RB表示右下
|
||||
buttonPosition: 'RB',
|
||||
showCircle: false,
|
||||
//showButton: false,
|
||||
})
|
||||
map.addControl(geolocation);
|
||||
})
|
||||
|
||||
// 创建一个 Marker 实例：
|
||||
var marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(o.courseLocationCoordinates[0], o.courseLocationCoordinates[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
||||
title: '签到点'
|
||||
});
|
||||
|
||||
//获取当前坐标点
|
||||
await this.getPoint()
|
||||
|
||||
var circle = new AMap.Circle({
|
||||
center: new AMap.LngLat(o.courseLocationCoordinates[0], o.courseLocationCoordinates[1]), // 圆心位置
|
||||
radius: 250, // 圆半径
|
||||
borderWeight: 1,
|
||||
strokeOpacity: 1,
|
||||
fillOpacity: 0.4,
|
||||
});
|
||||
|
||||
map.add(circle);
|
||||
// 缩放地图到合适的视野级别
|
||||
map.setFitView([circle])
|
||||
|
||||
// 多个点实例组成的数组
|
||||
var markerList = [marker];
|
||||
map.add(markerList);
|
||||
})
|
||||
},
|
||||
async pageData() {
|
||||
const resp = await $.get('/platform/mobile/trainSignUpActivity/findOne', {
|
||||
id: this.activityId,
|
||||
tabIndex: this.activityStatus
|
||||
})
|
||||
if (resp.code === 0) {
|
||||
this.tableData = resp.data
|
||||
this.assortList = Array.from(new Set(this.tableData.courseList.map(o => o.assort).filter(o => o !== '' && o !== undefined)))
|
||||
this.tempArray = clone(this.tableData)
|
||||
if(this.assortList.length > 0 && this.activityStatus !== '1') {
|
||||
this.tableData.courseList = this.tableData.courseList.filter(o => o.assort === this.assortList[0])
|
||||
}
|
||||
const type = this.trainTypeList.find(o => o.code === this.tableData.trainType)
|
||||
this.trainType = type ? type.name : '培训班'
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.loading = false
|
||||
}
|
||||
await this.getQdInfoList()
|
||||
this.courseChange(this.courseType, 1)
|
||||
this.loading = false;
|
||||
},
|
||||
async getQdInfoList() {
|
||||
const resp = await $.get('/platform/mobile/trainSignUpActivity/getQdInfoList', {
|
||||
activityId: this.activityId,
|
||||
})
|
||||
if (resp.code === 0) {
|
||||
this.qdInfoList = resp.data
|
||||
}
|
||||
},
|
||||
getWeek(dateString) {
|
||||
var dateArray = dateString.split("-");
|
||||
const date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
|
||||
return "周" + "日一二三四五六".charAt(date.getDay());
|
||||
},
|
||||
tabChange(val) {
|
||||
this.tabName = val
|
||||
this.startLoading()
|
||||
this.tableData = []
|
||||
this.pageData()
|
||||
this.closeLoading()
|
||||
},
|
||||
async getAllType() {
|
||||
const resp = await $.post('/platform/trainSingUp/manage/type/getAllType', {})
|
||||
this.allColumnsData = resp.data
|
||||
return resp.data
|
||||
},
|
||||
async getCourseText() {
|
||||
const courseArray = await this.getAllType()
|
||||
this.courseOptions = []
|
||||
this.courseOptions.push({text: '全部类型', value: '0'})
|
||||
for (const item of courseArray) {
|
||||
if (item.personMaxRegisterNum > 0) {
|
||||
this.courseText += item.value + '报名最多选' + item.personMaxRegisterNum + '项，'
|
||||
}
|
||||
this.courseOptions.push({text: item.lxname, value: item.id})
|
||||
}
|
||||
this.courseText = this.courseText.substr(0, this.courseText.length - 1)
|
||||
},
|
||||
courseChange(value, item) {
|
||||
if (item === undefined) {
|
||||
this.tableData.courseList = []
|
||||
this.startLoading()
|
||||
}
|
||||
if(this.assortList.length > 0 && this.activityStatus !== '1') {
|
||||
if(value === '0') {
|
||||
this.tableData.courseList = this.tempArray.courseList.filter(o => o.assort === this.assort)
|
||||
} else {
|
||||
this.tableData.courseList = this.tempArray.courseList.filter(item => item.courseType === value && item.assort === this.assort)
|
||||
}
|
||||
} else {
|
||||
this.tableData.courseList = value === '0' ? this.tempArray.courseList : this.tempArray.courseList.filter(item => item.courseType === value)
|
||||
}
|
||||
this.closeLoading()
|
||||
},
|
||||
async getActivity() {
|
||||
const resp = await $.get('/platform/mobile/trainSignUpActivity/findOne', {
|
||||
id: this.activityId,
|
||||
tabIndex: 0
|
||||
})
|
||||
if (resp.code === 0) {
|
||||
this.activity = resp.data
|
||||
}
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.trainTypeList = await getDictOptions("trainSignUpType")
|
||||
this.activityId = GetQueryString('activityId')
|
||||
this.type = GetQueryString('type')
|
||||
const time = GetQueryString('endTime')
|
||||
if (this.type === 'my') {
|
||||
this.activityOptions = [{text: '我报名的', value: '1'}]
|
||||
this.activityStatus = '1'
|
||||
this.tarBarActive = 1
|
||||
} else {
|
||||
this.activityOptions = [{text: '全部', value: '0'}, {text: '我报名的', value: '1'}]
|
||||
this.activityStatus = new Date().getTime() > new Date(time).getTime() ? '1' : '0'
|
||||
}
|
||||
this.activitySignUpStartTime = GetQueryString('activitySignUpStartTime')
|
||||
vant.Toast.setDefaultOptions({duration: 2000});
|
||||
this.startLoading()
|
||||
this.pageData()
|
||||
this.getCourseText()
|
||||
this.getActivity()
|
||||
this.closeLoading()
|
||||
|
||||
//await wxScannerQrCode.initWxConfig(window.location.href)
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,265 @@
|
||||
<!--#
|
||||
layout("/mobile/platform.html"){
|
||||
#-->
|
||||
<style>
|
||||
.van-card {
|
||||
background: #ffffff;
|
||||
margin: 10px auto 0;
|
||||
width: 96%;
|
||||
border-radius: 10px;
|
||||
padding: 14px 12px;
|
||||
}
|
||||
|
||||
.van-card__thumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.van-card__content > div {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.train-title {
|
||||
flex: 0.6;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.van-doc-card {
|
||||
margin: 14px;
|
||||
padding: 12px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.van-divider {
|
||||
margin: 6px 0 5px 0px;
|
||||
border-color: #1867b0;
|
||||
}
|
||||
|
||||
.van-image__img {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.van-image__error, .van-image__loading {
|
||||
height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
background-color: #1867b0;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
top: 1px;
|
||||
border-radius: 6px;
|
||||
right: -8px;
|
||||
padding: 1px 7px;
|
||||
transform: rotate(17deg);
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar title="活动列表" left-arrow placeholder fixed
|
||||
@click-left="pjaxReplace('/mobile/index')"></van-nav-bar>
|
||||
|
||||
<div class="search-fixed">
|
||||
<van-dropdown-menu active-color="#1989fa">
|
||||
<van-dropdown-item v-model="pageForm.year" :options="yearList"
|
||||
@change="formChange"></van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.activityStatus" :options="activityStatusList"
|
||||
@change="formChange"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
<!-- <van-sticky>-->
|
||||
<!-- <van-nav-bar title="活动列表" left-arrow-->
|
||||
<!-- @click-left="location.replace('/mobile/index')"></van-nav-bar>-->
|
||||
<!-- </van-sticky>-->
|
||||
|
||||
<!-- <van-sticky>-->
|
||||
<!-- <van-tabs v-model="pageForm.activityStatus" @change="tabChange">-->
|
||||
<!-- <van-tab title="全部" name="0"></van-tab>-->
|
||||
<!-- <van-tab v-if="type !== 'my'" title="进行中" name="1"></van-tab>-->
|
||||
<!-- <van-tab v-if="type === 'my'" title="进行中" name="3"></van-tab>-->
|
||||
<!-- <van-tab title="已结束" name="2"></van-tab>-->
|
||||
<!-- </van-tabs>-->
|
||||
<!-- </van-sticky>-->
|
||||
|
||||
<div style="margin: 60px auto 80px auto">
|
||||
<van-list :finished="finished" :finished-text="tableData.length>0?'没有更多了':''"
|
||||
v-if="tableData && tableData.length>0"
|
||||
v-model="loading"
|
||||
@load="pageData">
|
||||
<div v-for="o in tableData" class="van-doc-card">
|
||||
<!-- <div class="tag" v-if="moment(o.activitySignUpStartTime).unix() > moment().unix()">即将开始</div>-->
|
||||
<div>
|
||||
<div class="tag" style="background-color: #bc62c5" v-if="o.isDisabled">活动未开启</div>
|
||||
<div class="tag" v-else-if="!o.isDisabled && moment(o.activitySignUpStartTime).valueOf() > moment().valueOf()">未开始报名</div>
|
||||
<div class="tag" v-else-if="!o.isDisabled &&moment(o.activitySignUpEndTime).valueOf() > moment().valueOf() && moment().valueOf() > moment(o.activitySignUpStartTime).valueOf()">报名中</div>
|
||||
<div class="tag" style="background-color: #f14646" v-else-if="!o.isDisabled &&moment(o.activityEndTime).valueOf() < moment().valueOf() && moment().valueOf() < moment(o.activityStartTime).valueOf()">报名结束</div>
|
||||
<div class="tag" v-else-if="!o.isDisabled &&moment(o.activityStartTime).valueOf() < moment().valueOf() && moment().valueOf() < moment(o.activityEndTime).valueOf()">活动进行中</div>
|
||||
<div class="tag" style="background-color: #f14646" v-else-if="!o.isDisabled &&moment().valueOf() > moment(o.activityEndTime).valueOf()">活动结束</div>
|
||||
</div>
|
||||
<div @click="welfareClick(o)">
|
||||
<div>
|
||||
<van-image :src="CREATE_PREVIEW_URL(o.cover.id)"
|
||||
style="display: contents"
|
||||
v-if="o.cover && o.cover.filepath"></van-image>
|
||||
<van-image src=""
|
||||
style="display: contents"
|
||||
v-else></van-image>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-ellipsis" style="margin-top: 6px; font-size: 15px;font-weight: bold;flex: 1">
|
||||
{{o.activityName}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="train-title">
|
||||
<span style="color: grey">年   度：</span>
|
||||
<span>{{o.year}}</span>
|
||||
</div>
|
||||
<div class="train-title">
|
||||
<span style="color: grey">活动对象：</span>
|
||||
<span>{{o.activityGroupName}}</span>
|
||||
</div>
|
||||
<van-divider></van-divider>
|
||||
</div>
|
||||
<div class="train-title">
|
||||
<span style="color: grey">报名时间：</span>
|
||||
<span>{{moment(o.activitySignUpStartTime).format('YYYY-MM-DD HH:mm') + ' ~ ' +
|
||||
moment(o.activitySignUpEndTime).format('YYYY-MM-DD HH:mm')}}</span>
|
||||
</div>
|
||||
<div style="margin-top: 6px">
|
||||
<span style="color: grey">活动时间：</span>
|
||||
<span>{{moment(o.activityStartTime).format('YYYY-MM-DD HH:mm') + ' ~ ' +
|
||||
moment(o.activityEndTime).format('YYYY-MM-DD HH:mm')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<van-empty v-else description="暂无数据"></van-empty>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<van-tabbar v-model="tarBarActive">
|
||||
<van-tabbar-item icon="home-o" replace @click="pjaxReplace('/platform/mobile/trainSignUpActivity/trainList')">活动报名</van-tabbar-item>
|
||||
<van-tabbar-item icon="manager-o" replace @click="pjaxReplace('/platform/mobile/trainSignUpActivity/trainList?type=my')">我的活动</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
const vue = new Vue({
|
||||
el: '#app',
|
||||
mixins: [mobileMixins],
|
||||
data() {
|
||||
return {
|
||||
tarBarActive: 0,
|
||||
type: '',
|
||||
|
||||
pageForm: {
|
||||
year: '',
|
||||
activityStatus: null
|
||||
},
|
||||
activityLevelList: [],
|
||||
activityStatusList: [
|
||||
{text: '全部', value: 1},
|
||||
// {text: '未开启', value: 5},
|
||||
{text: '未开始', value: 6},
|
||||
{text: '报名中', value: 2},
|
||||
{text: '进行中', value: 3},
|
||||
{text: '已结束', value: 4}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formChange() {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.tableData = []
|
||||
this.pageData()
|
||||
},
|
||||
async welfareClick(o) {
|
||||
if (o.isDisabled){
|
||||
this.$toast('活动未开启')
|
||||
return;
|
||||
}
|
||||
if (moment(o.applyStartTime).valueOf() > moment().valueOf()) {
|
||||
this.$toast('活动未开始报名')
|
||||
return;
|
||||
}
|
||||
if (this.type === 'my') {
|
||||
pjaxReplace('/platform/mobile/trainSignUpActivity/trainInfo' +
|
||||
'?activityId=' + o.id + '&endTime=' + o.activitySignUpEndTime + '&type=my' + '&startTime=' + o.activitySignUpStartTime)
|
||||
} else {
|
||||
const scopeUser = await getScopeUser(o.activityGroupId);
|
||||
if (scopeUser === 0) {
|
||||
vant.Dialog.alert({
|
||||
title: '提示',
|
||||
message: '您不在报名人员范围内',
|
||||
confirmButtonColor: '#1867b0'
|
||||
})
|
||||
return
|
||||
}
|
||||
pjaxReplace('/platform/mobile/trainSignUpActivity/trainInfo?activityId=' + o.id + '&endTime=' + o.activitySignUpEndTime)
|
||||
}
|
||||
},
|
||||
async pageData() {
|
||||
this.mLoading = true
|
||||
const resp = await $.post('/platform/mobile/trainSignUpActivity/pageData', this.pageForm)
|
||||
if (resp.code === 0) {
|
||||
if (resp.data.list.length === 0) {
|
||||
this.tableData = []
|
||||
this.loading = false
|
||||
this.finished = true
|
||||
} else {
|
||||
this.tableData = this.tableData.concat(resp.data.list)
|
||||
}
|
||||
if (this.tableData.length === resp.data.totalCount) {
|
||||
this.finished = true
|
||||
} else {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
this.mLoading = false
|
||||
},
|
||||
tabChange(val) {
|
||||
this.tabName = val
|
||||
this.startLoading()
|
||||
this.tableData = []
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageData()
|
||||
this.closeLoading()
|
||||
},
|
||||
async init(){
|
||||
this.$set(this.pageForm, "activityStatus", 1)
|
||||
this.$set(this.pageForm, "year", new Date().getFullYear())
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.init()
|
||||
this.type = GetQueryString('type')
|
||||
if (this.type === 'my') {
|
||||
this.tarBarActive = 1
|
||||
}
|
||||
this.pageForm.type = this.type
|
||||
this.startLoading()
|
||||
// this.pageForm.activityStatus = this.type === 'my' ? '3' : '1'
|
||||
this.pageData()
|
||||
this.closeLoading()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user