1168 lines
48 KiB
HTML
1168 lines
48 KiB
HTML
<!--#
|
||
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-card {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.train-card-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.train-card-button {
|
||
width: 74px;
|
||
height: 28px;
|
||
}
|
||
|
||
.train-card-status {
|
||
width: 74px;
|
||
text-align: right;
|
||
line-height: 1;
|
||
}
|
||
|
||
.train-card-status image {
|
||
width: 52px;
|
||
height: auto;
|
||
}
|
||
|
||
.train-list-wrapper {
|
||
/* 给底部固定 tabbar 和安全区预留空间，避免最后一张卡片被遮挡 */
|
||
padding-bottom: calc(80px + env(safe-area-inset-bottom));
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.risk-dialog-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
max-height: 70vh; /* 限制 ActionSheet 最大高度，避免全屏 */
|
||
padding: 16px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.remark-scrollable {
|
||
flex: 1;
|
||
overflow-y: auto; /* 内容超出时滚动 */
|
||
padding-bottom: 16px; /* 给按钮留点空间 */
|
||
}
|
||
|
||
.remark-content {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
/* height: calc(100vh - 46px - 44px);
|
||
overflow-y: auto;*/
|
||
}
|
||
|
||
.remark-content * {
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
.table-class {
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
border-radius: 5px;
|
||
overflow: hidden;
|
||
line-height: 1.5rem;
|
||
font-size: 13px;
|
||
table-layout: fixed;
|
||
border-collapse: collapse;
|
||
|
||
th {
|
||
background-color: #f2f2f2;
|
||
border: 1px solid #dddddd;
|
||
}
|
||
|
||
tr {
|
||
text-align: center;
|
||
border-bottom: 1px solid #dddddd;
|
||
}
|
||
|
||
td {
|
||
border: 1px solid #dddddd;
|
||
}
|
||
}
|
||
|
||
</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-tabs v-if="activityStatus != '1' && assortList.length > 0" v-model="assort" color="#1867B0"
|
||
@click="tabClick">
|
||
<van-tab v-for="item in assortList" :name="item" :title="item">
|
||
</van-tab>
|
||
</van-tabs>
|
||
</van-sticky>
|
||
<!--<van-notice-bar
|
||
left-icon="volume-o"
|
||
text="温馨提示：每人只能填报一项活动">
|
||
</van-notice-bar>-->
|
||
|
||
<template>
|
||
<div id="parentDiv" class="train-list-wrapper" v-model="loading"
|
||
v-if="tableData.courseList && tableData.courseList.length>0">
|
||
|
||
<template v-for="o in tableData.courseList">
|
||
<div class="train-card"
|
||
: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.stop="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>
|
||
<template v-if="o.remarks">
|
||
<div>
|
||
<span class="train-title">详细信息：</span>
|
||
<span @click.stop="showRemark(o)" style="color: #1867b0">点我查看</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>
|
||
<div class="train-card-actions"
|
||
v-if="o.isOpen !== false && (activityStatus !== '1' || (o.isSign === true && moment().valueOf() < moment(activity.activitySignUpEndTime).valueOf()))">
|
||
<van-button type="primary" color="#1867b0" round size="mini"
|
||
class="train-card-button"
|
||
v-if="activityStatus !== '1' && o.isSign === false"
|
||
@click.stop="openRiskText(o)">
|
||
我要报名
|
||
</van-button>
|
||
|
||
<van-button type="primary" color="#dd6363" round size="mini"
|
||
class="train-card-button"
|
||
v-if="o.isSign === true && moment().valueOf() < moment(activity.activitySignUpEndTime).valueOf()"
|
||
@click.stop="cancel(o)">
|
||
取消报名
|
||
</van-button>
|
||
|
||
<div class="train-card-status"
|
||
v-if="activityStatus !== '1' && o.isSign === true && moment().valueOf() >= moment(activity.activitySignUpEndTime).valueOf()">
|
||
<image src="/assets/mobile/svg/train/sign_up.svg"></image>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <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>
|
||
|
||
<!--<van-action-sheet v-model="remarkShow" title="详情" >
|
||
<div class="remark-content" v-html="courseRemark" @click="remarkClick"></div>
|
||
</van-action-sheet>-->
|
||
|
||
<van-popup class="joinPopup" position="right" v-model:show="remarkShow">
|
||
<van-nav-bar @click-left="remarkShow = false" fixed left-arrow placeholder
|
||
:title="clickCourseRemark.courseName"></van-nav-bar>
|
||
<van-tabs v-model="remarkActive" @change="remarkActiveClick">
|
||
<van-tab title="详细信息">
|
||
<div class="remark-content" v-html="courseRemark" @click="remarkClick"></div>
|
||
</van-tab>
|
||
<van-tab title="报名人员">
|
||
<van-dropdown-menu active-color="#1989fa">
|
||
<van-dropdown-item v-model="registerForm.unionId" @change="getSignUsers"
|
||
:options="unionList"></van-dropdown-item>
|
||
<van-dropdown-item v-model="registerForm.sex" @change="getSignUsers"
|
||
:options="sexList"></van-dropdown-item>
|
||
</van-dropdown-menu>
|
||
<van-search v-model="registerForm.searchKeyword" placeholder="请输入姓名查询"
|
||
@search="getSignUsers"></van-search>
|
||
<table class="table-class" v-if="signUsers && signUsers.length > 0">
|
||
<thead>
|
||
<tr>
|
||
<th>姓名</th>
|
||
<th>性别</th>
|
||
<th>所属工会</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(item,index) in signUsers" :key="index">
|
||
<td>{{ item.username }}</td>
|
||
<td>{{ item.sex }}</td>
|
||
<td>{{ item.unionname }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<van-empty
|
||
v-else
|
||
class="custom-image"
|
||
image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
|
||
description="暂无报名人员"
|
||
></van-empty>
|
||
</van-tab>
|
||
</van-tabs>
|
||
</van-popup>
|
||
|
||
<van-action-sheet v-model="riskTextDialogVisible" closeable :close-on-click-overlay="false"
|
||
title="风险告知书">
|
||
<div class="risk-dialog-wrapper">
|
||
<div class="remark-scrollable">
|
||
<div class="remark-content" v-html="activity.riskText"></div>
|
||
</div>
|
||
<van-button :color="themeColor" @click="riskTextDialogVisible=false;signUp(choose)"
|
||
block style="border-radius: 10px; margin-top: 16px;"
|
||
type="info" :disabled="submitDisabled">
|
||
{{ seconds <= 0 ? '去报名' :(seconds+'秒后去报名') }}
|
||
</van-button>
|
||
</div>
|
||
</van-action-sheet>
|
||
|
||
<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 {
|
||
registerForm: {
|
||
searchKeyword: '',
|
||
searchName: 'u.username',
|
||
unionId: '',
|
||
sex: null
|
||
},
|
||
unionList: [],
|
||
sexList: [
|
||
{text: '全部性别', value: null},
|
||
{text: '男', value: '男'},
|
||
{text: '女', value: '女'}
|
||
],
|
||
remarkActive: 0,
|
||
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: [],
|
||
|
||
remarkShow: false,
|
||
courseRemark: '',
|
||
|
||
clickCourseRemark: {},
|
||
signUsers: [],
|
||
|
||
riskTextDialogVisible: false,
|
||
submitDisabled: false,
|
||
seconds: 0,
|
||
interval: null
|
||
}
|
||
},
|
||
components: {
|
||
'train-dynamic-form': httpVueLoader('/components/mobile/common/TrainDynamicForm.vue')
|
||
},
|
||
methods: {
|
||
openRiskText(o) {
|
||
this.choose = o
|
||
if (this.activity.riskText) {
|
||
this.openInterval()
|
||
return
|
||
}
|
||
this.signUp(o)
|
||
},
|
||
openInterval() {
|
||
this.seconds = 3
|
||
this.submitDisabled = true
|
||
this.riskTextDialogVisible = true
|
||
|
||
this.$nextTick(() => {
|
||
this.interval = setInterval(() => {
|
||
this.seconds--
|
||
if (this.seconds <= 0) {
|
||
this.seconds = 0
|
||
this.submitDisabled = false
|
||
clearInterval(this.interval)
|
||
this.interval = null
|
||
}
|
||
}, 1000)
|
||
})
|
||
},
|
||
async remarkActiveClick(name, title) {
|
||
if (name === 1) {
|
||
//获取报名人员
|
||
await this.getSignUsers()
|
||
}
|
||
},
|
||
async getSignUsers() {
|
||
this.registerForm.courseId = this.clickCourseRemark.id
|
||
const {data} = await $.get('/platform/trainSingUp/manage/userAdjust/registerUserList', this.registerForm)
|
||
this.signUsers = data
|
||
},
|
||
// 未开启的课程排到最后，其余课程保持原有顺序不变
|
||
sortCourseList(courseList) {
|
||
return (courseList || []).map((item, index) => {
|
||
return {
|
||
item: item,
|
||
index: index
|
||
}
|
||
}).sort((a, b) => {
|
||
const aOrder = a.item.isOpen === false ? 1 : 0
|
||
const bOrder = b.item.isOpen === false ? 1 : 0
|
||
if (aOrder !== bOrder) {
|
||
return aOrder - bOrder
|
||
}
|
||
return a.index - b.index
|
||
}).map(v => v.item)
|
||
},
|
||
tabClick(name, title) {
|
||
if (this.courseType === '0' && this.activityStatus !== '1') {
|
||
this.tableData.courseList = this.sortCourseList(this.tempArray.courseList.filter(o => o.assort === title))
|
||
} else {
|
||
this.tableData.courseList = this.sortCourseList(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 {
|
||
if (Number(o.coursePeopleNumber) >= 1000) {
|
||
return "（<span style='color: #ff8400'>无名额限制</span>/已报<span style='color: red'>" + o.hasRegisterNum + "</span>人）"
|
||
} 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的报名，是否确认？'
|
||
if (this.choose.id === "76619f05ae904324930747087c408b5e") {
|
||
msg = "本人已认真阅读本次活动《安全告知书》，并确认自身身体状况可以参与活动方案提示的相关内容"
|
||
}
|
||
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
|
||
},
|
||
showRemark(o) {
|
||
this.remarkShow = true
|
||
this.clickCourseRemark = o
|
||
this.courseRemark = o.remarks
|
||
},
|
||
remarkClick(event) {
|
||
//如果点击的是图片
|
||
if (event.target.tagName === 'IMG') {
|
||
vant.ImagePreview([event.target.src])
|
||
}
|
||
},
|
||
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.tableData.courseList = this.sortCourseList(this.tableData.courseList)
|
||
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.sortCourseList(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.sortCourseList(this.tempArray.courseList.filter(o => o.assort === this.assort))
|
||
} else {
|
||
this.tableData.courseList = this.sortCourseList(this.tempArray.courseList.filter(item => item.courseType === value && item.assort === this.assort))
|
||
}
|
||
} else {
|
||
this.tableData.courseList = value === '0'
|
||
? this.sortCourseList(this.tempArray.courseList)
|
||
: this.sortCourseList(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 getUnionList() {
|
||
const {data} = await $.get("/platform/vi/common/unions")
|
||
data.forEach(v => {
|
||
v.text = v.unionname
|
||
v.value = v.id
|
||
})
|
||
data.unshift({text: "全部工会", value: ''})
|
||
this.unionList = data
|
||
},
|
||
},
|
||
async created() {
|
||
this.getUnionList()
|
||
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>
|
||
<!--#
|
||
}
|
||
#-->
|