c-zhouhf1/zhgh_hmc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
c-zhouhf1
2026-04-14 10:29:00 +08:00
parent 5fe73bf0e2
commit e2b6568552
1 changed files with 123 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/views/mobile/train/trainInfo.html
+123 -70
View File
@@ -39,6 +39,42 @@ layout("/mobile/platform.html"){
font-size: 12px; 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 { .train-title {
color: grey; color: grey;
} }
@@ -152,6 +188,7 @@ layout("/mobile/platform.html"){
.van-tabs__nav--complete { .van-tabs__nav--complete {
padding: 0; padding: 0;
} }
.risk-dialog-wrapper { .risk-dialog-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -166,18 +203,18 @@ layout("/mobile/platform.html"){
padding-bottom: 16px; /* 给按钮留点空间 */ padding-bottom: 16px; /* 给按钮留点空间 */
} }
.remark-content{ .remark-content {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
/* height: calc(100vh - 46px - 44px); /* height: calc(100vh - 46px - 44px);
overflow-y: auto;*/ overflow-y: auto;*/
} }
.remark-content *{ .remark-content * {
max-width: 100%!important; max-width: 100% !important;
} }
.table-class{ .table-class {
width: 100%; width: 100%;
margin-top: 10px; margin-top: 10px;
border-radius: 5px; border-radius: 5px;
@@ -186,14 +223,17 @@ layout("/mobile/platform.html"){
font-size: 13px; font-size: 13px;
table-layout: fixed; table-layout: fixed;
border-collapse: collapse; border-collapse: collapse;
th { th {
background-color: #f2f2f2; background-color: #f2f2f2;
border: 1px solid #dddddd; border: 1px solid #dddddd;
} }
tr { tr {
text-align: center; text-align: center;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
} }
td { td {
border: 1px solid #dddddd; border: 1px solid #dddddd;
} }
@@ -209,24 +249,24 @@ layout("/mobile/platform.html"){
:options="activityOptions"></van-dropdown-item> :options="activityOptions"></van-dropdown-item>
<van-dropdown-item @change="courseChange" v-model="courseType" :options="courseOptions"></van-dropdown-item> <van-dropdown-item @change="courseChange" v-model="courseType" :options="courseOptions"></van-dropdown-item>
</van-dropdown-menu> </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-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 <!--<van-notice-bar
left-icon="volume-o" left-icon="volume-o"
text="温馨提示：每人只能填报一项活动"> text="温馨提示：每人只能填报一项活动">
</van-notice-bar>--> </van-notice-bar>-->
<template> <template>
<div id="parentDiv" v-model="loading" v-if="tableData.courseList && tableData.courseList.length>0" style="margin-bottom: 60px"> <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"> <template v-for="o in tableData.courseList">
<div style="position: relative" <div class="train-card"
:class="activityStatus !== '1' ? 'van-doc-card' : 'van-doc-card-my'"> :class="activityStatus !== '1' ? 'van-doc-card' : 'van-doc-card-my'">
<div> <div>
<van-tag type="primary" size="medium"> <van-tag type="primary" size="medium">
@@ -282,29 +322,33 @@ layout("/mobile/platform.html"){
v-if="o.isSign === true && tableData.wechat" v-if="o.isSign === true && tableData.wechat"
style="color: #dd6363">点我查看微信群二维码</span> style="color: #dd6363">点我查看微信群二维码</span>
</div> </div>
<van-button type="primary" color="#1867b0" round size="mini" <div class="train-card-actions"
v-if="activityStatus !== '1' && o.isSign === false" v-if="activityStatus !== '1' || (o.isSign === true && moment().valueOf() < moment(activity.activitySignUpEndTime).valueOf())">
style="position: absolute; left: 74%; bottom: 10%; width: 74px; height: 28px" <van-button type="primary" color="#1867b0" round size="mini"
@click.stop="openRiskText(o)"> class="train-card-button"
我要报名 v-if="activityStatus !== '1' && o.isSign === false"
</van-button> @click.stop="openRiskText(o)">
我要报名
</van-button>
<van-button type="primary" color="#dd6363" round size="mini" <van-button type="primary" color="#dd6363" round size="mini"
v-if="o.isSign === true && moment().valueOf() < moment(activity.activitySignUpEndTime).valueOf()" class="train-card-button"
style="position: absolute; left: 74%; bottom: 10%; width: 74px; height: 28px" v-if="o.isSign === true && moment().valueOf() < moment(activity.activitySignUpEndTime).valueOf()"
@click.stop="cancel(o)"> @click.stop="cancel(o)">
取消报名 取消报名
</van-button> </van-button>
<image v-if="activityStatus !== '1' && o.isSign === true && moment().valueOf() >= moment(activity.activitySignUpEndTime).valueOf()" <div class="train-card-status"
style="position: absolute; left: 77%; top: 58%;" v-if="activityStatus !== '1' && o.isSign === true && moment().valueOf() >= moment(activity.activitySignUpEndTime).valueOf()">
src="/assets/mobile/svg/train/sign_up.svg"></image> <image src="/assets/mobile/svg/train/sign_up.svg"></image>
</div>
</div>
<!-- <div @click="trainClick(o)" v-if="activityStatus === '1'"--> <!-- <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;--> <!-- 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">--> <!-- position: absolute; right: -10px; top: 8%; background-color: #00c698; border-radius: 7px; color: white">-->
<!-- 签到--> <!-- 签到-->
<!-- </div>--> <!-- </div>-->
</div> </div>
</template> </template>
</div> </div>
@@ -383,7 +427,8 @@ layout("/mobile/platform.html"){
<van-field label="联系方式" required :rules="[{ required: true, message: '请填写联系方式' }]" <van-field label="联系方式" required :rules="[{ required: true, message: '请填写联系方式' }]"
placeholder="请填写联系方式" v-model="formData.mobile"></van-field> placeholder="请填写联系方式" v-model="formData.mobile"></van-field>
<template v-if="this.choose.courseIsLimitApply"> <template v-if="this.choose.courseIsLimitApply">
<van-field label="报名时段" required :rules="[{ required: true, message: '请选择报名时段' }]" <van-field label="报名时段" required
:rules="[{ required: true, message: '请选择报名时段' }]"
readonly @click="showCoursePicker = true;getCourseTimeSelectList(choose);" readonly @click="showCoursePicker = true;getCourseTimeSelectList(choose);"
placeholder="请选择报名时段" v-model="formData.courseTimeName"></van-field> placeholder="请选择报名时段" v-model="formData.courseTimeName"></van-field>
<van-popup v-model="showCoursePicker" position="bottom"> <van-popup v-model="showCoursePicker" position="bottom">
@@ -410,17 +455,21 @@ layout("/mobile/platform.html"){
</van-action-sheet>--> </van-action-sheet>-->
<van-popup class="joinPopup" position="right" v-model:show="remarkShow"> <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-nav-bar @click-left="remarkShow = false" fixed left-arrow placeholder
:title="clickCourseRemark.courseName"></van-nav-bar>
<van-tabs v-model="remarkActive" @change="remarkActiveClick"> <van-tabs v-model="remarkActive" @change="remarkActiveClick">
<van-tab title="详细信息"> <van-tab title="详细信息">
<div class="remark-content" v-html="courseRemark" @click="remarkClick"></div> <div class="remark-content" v-html="courseRemark" @click="remarkClick"></div>
</van-tab> </van-tab>
<van-tab title="报名人员"> <van-tab title="报名人员">
<van-dropdown-menu active-color="#1989fa"> <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.unionId" @change="getSignUsers"
<van-dropdown-item v-model="registerForm.sex" @change="getSignUsers" :options="sexList"></van-dropdown-item> :options="unionList"></van-dropdown-item>
<van-dropdown-item v-model="registerForm.sex" @change="getSignUsers"
:options="sexList"></van-dropdown-item>
</van-dropdown-menu> </van-dropdown-menu>
<van-search v-model="registerForm.searchKeyword" placeholder="请输入姓名查询" @search="getSignUsers"></van-search> <van-search v-model="registerForm.searchKeyword" placeholder="请输入姓名查询"
@search="getSignUsers"></van-search>
<table class="table-class" v-if="signUsers && signUsers.length > 0"> <table class="table-class" v-if="signUsers && signUsers.length > 0">
<thead> <thead>
<tr> <tr>
@@ -438,10 +487,10 @@ layout("/mobile/platform.html"){
</tbody> </tbody>
</table> </table>
<van-empty <van-empty
v-else v-else
class="custom-image" class="custom-image"
image="https://img01.yzcdn.cn/vant/custom-empty-image.png" image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
description="暂无报名人员" description="暂无报名人员"
></van-empty> ></van-empty>
</van-tab> </van-tab>
</van-tabs> </van-tabs>
@@ -463,8 +512,12 @@ layout("/mobile/platform.html"){
<div> <div>
<van-tabbar v-model="tarBarActive"> <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="home-o" replace
<van-tabbar-item icon="manager-o" replace @click="pjaxReplace('/platform/mobile/trainSignUpActivity/trainList?type=my')">我的活动</van-tabbar-item> @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> </van-tabbar>
</div> </div>
</div> </div>
@@ -573,24 +626,24 @@ layout("/mobile/platform.html"){
this.signUsers = data this.signUsers = data
}, },
tabClick(name, title) { tabClick(name, title) {
if(this.courseType === '0' &&　this.activityStatus !== '1') { if (this.courseType === '0' && this.activityStatus !== '1') {
this.tableData.courseList = this.tempArray.courseList.filter(o => o.assort === title) this.tableData.courseList = this.tempArray.courseList.filter(o => o.assort === title)
} else { } else {
this.tableData.courseList = this.tempArray.courseList.filter(o => o.assort === title && o.courseType === this.courseType) this.tableData.courseList = this.tempArray.courseList.filter(o => o.assort === title && o.courseType === this.courseType)
} }
}, },
calcSignUpCount(o) { calcSignUpCount(o) {
if(o.reserveMode === 2) { if (o.reserveMode === 2) {
let lave = 0 let lave = 0
let lave2 = 0 let lave2 = 0
if(o.hasRegisterNum < o.coursePeopleNumber) { if (o.hasRegisterNum < o.coursePeopleNumber) {
lave = o.coursePeopleNumber - o.hasRegisterNum lave = o.coursePeopleNumber - o.hasRegisterNum
lave2 = o.courseReservedNumber lave2 = o.courseReservedNumber
} else { } else {
lave = 0 lave = 0
lave2 = (o.coursePeopleNumber + o.courseReservedNumber) - o.hasRegisterNum lave2 = (o.coursePeopleNumber + o.courseReservedNumber) - o.hasRegisterNum
} }
let str = "（<span style='color: red'>余" + lave +"</span>/" + o.coursePeopleNumber + "人" let str = "（<span style='color: red'>余" + lave + "</span>/" + o.coursePeopleNumber + "人"
+ "，<span style='color: red'>候补余" + lave2 + "</span>/" + o.courseReservedNumber + "人）" + "，<span style='color: red'>候补余" + lave2 + "</span>/" + o.courseReservedNumber + "人）"
return str return str
} else { } else {
@@ -598,7 +651,7 @@ layout("/mobile/platform.html"){
return "（<span style='color: #ff8400'>无名额限制</span>/已报<span style='color: red'>" + o.hasRegisterNum + "</span>人）" return "（<span style='color: #ff8400'>无名额限制</span>/已报<span style='color: red'>" + o.hasRegisterNum + "</span>人）"
} else { } else {
let lave = o.coursePeopleNumber - (o.hasRegisterNum + o.courseReservedNumber) let lave = o.coursePeopleNumber - (o.hasRegisterNum + o.courseReservedNumber)
return "（<span style='color: red'>余" + lave +"</span>/" + o.coursePeopleNumber + "人）" return "（<span style='color: red'>余" + lave + "</span>/" + o.coursePeopleNumber + "人）"
} }
} }
}, },
@@ -654,7 +707,7 @@ layout("/mobile/platform.html"){
clickCourseId: o.courseId, clickCourseId: o.courseId,
id: o.id, id: o.id,
}) })
if(resp.code === 0) { if (resp.code === 0) {
vant.Dialog.alert({message: '签到成功'}) vant.Dialog.alert({message: '签到成功'})
await this.pageData() await this.pageData()
o.isAttend = true o.isAttend = true
@@ -725,11 +778,11 @@ layout("/mobile/platform.html"){
reject([]) reject([])
}) })
})*/ })*/
geolocation.getCurrentPosition(function(status,result){ geolocation.getCurrentPosition(function (status, result) {
if(status === 'complete'){ if (status === 'complete') {
//alert(result.position) //alert(result.position)
locations = result.position locations = result.position
}else{ } else {
} }
}); });
}, },
@@ -769,13 +822,13 @@ layout("/mobile/platform.html"){
await this.getCourseTimeSelectList(o) await this.getCourseTimeSelectList(o)
} }
if(res.code !== 0) { if (res.code !== 0) {
vant.Dialog.alert({ vant.Dialog.alert({
title: '提示', title: '提示',
message: res.msg, message: res.msg,
confirmButtonColor: '#1867b0' confirmButtonColor: '#1867b0'
}) })
if(res.code !== 3) { if (res.code !== 3) {
return return
} }
} }
@@ -800,14 +853,14 @@ layout("/mobile/platform.html"){
this.joinPopup = true this.joinPopup = true
}, },
async getCourseTimeSelectList(o) { async getCourseTimeSelectList(o) {
const resp = await $.post('/platform/mobile/trainSignUpActivity/getCourseTimeSelectList',{courseId: o.id}) const resp = await $.post('/platform/mobile/trainSignUpActivity/getCourseTimeSelectList', {courseId: o.id})
if (resp.code === 0) { if (resp.code === 0) {
this.courseTimeSelectList = resp.data this.courseTimeSelectList = resp.data
} else { } else {
this.$toast.fail("获取时段信息失败，请联系管理员") this.$toast.fail("获取时段信息失败，请联系管理员")
} }
}, },
onCourseConfirm(val){ onCourseConfirm(val) {
this.formData.activityCourseId = val.value this.formData.activityCourseId = val.value
this.$set(this.formData, "activityCourseId", val.value) this.$set(this.formData, "activityCourseId", val.value)
this.$set(this.formData, "courseTimeName", val.text.substring(0, 12)) this.$set(this.formData, "courseTimeName", val.text.substring(0, 12))
@@ -825,7 +878,7 @@ layout("/mobile/platform.html"){
//获取家属是多少人 //获取家属是多少人
let per = 0 let per = 0
this.dynamicColumnsData.forEach(item => { this.dynamicColumnsData.forEach(item => {
if(item.columnCode === 'xdqsrs') { if (item.columnCode === 'xdqsrs') {
per += Number(item.columnValue) per += Number(item.columnValue)
} }
}) })
@@ -834,7 +887,7 @@ layout("/mobile/platform.html"){
courseId: this.choose.id, courseId: this.choose.id,
currentFamilyNumber: per, currentFamilyNumber: per,
}) })
if(res.code !== 0) { if (res.code !== 0) {
vant.Dialog.alert({ vant.Dialog.alert({
title: '提示', title: '提示',
message: res.msg, message: res.msg,
@@ -845,7 +898,7 @@ layout("/mobile/platform.html"){
let flag = this.choose.courseIsLimitApply let flag = this.choose.courseIsLimitApply
if (flag) { if (flag) {
const resp = await $.post('/platform/mobile/trainSignUpActivity/validateSourceSignUp',{activityCourseId: this.formData.activityCourseId}) const resp = await $.post('/platform/mobile/trainSignUpActivity/validateSourceSignUp', {activityCourseId: this.formData.activityCourseId})
if (resp.code !== 0) { if (resp.code !== 0) {
vant.Dialog.alert({ vant.Dialog.alert({
title: '温馨提示', title: '温馨提示',
@@ -902,14 +955,14 @@ layout("/mobile/platform.html"){
} }
this.popupShow = true this.popupShow = true
}, },
showRemark(o){ showRemark(o) {
this.remarkShow = true this.remarkShow = true
this.clickCourseRemark = o this.clickCourseRemark = o
this.courseRemark = o.remarks this.courseRemark = o.remarks
}, },
remarkClick(event){ remarkClick(event) {
//如果点击的是图片 //如果点击的是图片
if(event.target.tagName === 'IMG'){ if (event.target.tagName === 'IMG') {
vant.ImagePreview([event.target.src]) vant.ImagePreview([event.target.src])
} }
}, },
@@ -926,7 +979,7 @@ layout("/mobile/platform.html"){
scrollWheel: true, scrollWheel: true,
}) })
AMap.plugin('AMap.Geolocation', function() { AMap.plugin('AMap.Geolocation', function () {
geolocation = new AMap.Geolocation({ geolocation = new AMap.Geolocation({
// 是否使用高精度定位，默认：true // 是否使用高精度定位，默认：true
enableHighAccuracy: true, enableHighAccuracy: true,
@@ -979,7 +1032,7 @@ layout("/mobile/platform.html"){
this.tableData = resp.data this.tableData = resp.data
this.assortList = Array.from(new Set(this.tableData.courseList.map(o => o.assort).filter(o => o !== '' && o !== undefined))) this.assortList = Array.from(new Set(this.tableData.courseList.map(o => o.assort).filter(o => o !== '' && o !== undefined)))
this.tempArray = clone(this.tableData) this.tempArray = clone(this.tableData)
if(this.assortList.length > 0 && this.activityStatus !== '1') { if (this.assortList.length > 0 && this.activityStatus !== '1') {
this.tableData.courseList = this.tableData.courseList.filter(o => o.assort === this.assortList[0]) this.tableData.courseList = this.tableData.courseList.filter(o => o.assort === this.assortList[0])
} }
const type = this.trainTypeList.find(o => o.code === this.tableData.trainType) const type = this.trainTypeList.find(o => o.code === this.tableData.trainType)
@@ -1034,8 +1087,8 @@ layout("/mobile/platform.html"){
this.tableData.courseList = [] this.tableData.courseList = []
this.startLoading() this.startLoading()
} }
if(this.assortList.length > 0 && this.activityStatus !== '1') { if (this.assortList.length > 0 && this.activityStatus !== '1') {
if(value === '0') { if (value === '0') {
this.tableData.courseList = this.tempArray.courseList.filter(o => o.assort === this.assort) this.tableData.courseList = this.tempArray.courseList.filter(o => o.assort === this.assort)
} else { } else {
this.tableData.courseList = this.tempArray.courseList.filter(item => item.courseType === value && item.assort === this.assort) this.tableData.courseList = this.tempArray.courseList.filter(item => item.courseType === value && item.assort === this.assort)
@@ -1054,7 +1107,7 @@ layout("/mobile/platform.html"){
this.activity = resp.data this.activity = resp.data
} }
}, },
async getUnionList(){ async getUnionList() {
const {data} = await $.get("/platform/vi/common/unions") const {data} = await $.get("/platform/vi/common/unions")
data.forEach(v => { data.forEach(v => {
v.text = v.unionname v.text = v.unionname