From e2b6568552febbc38c1e182cb640955b29591276 Mon Sep 17 00:00:00 2001
From: zhouhefeng <zhouhefeng915@163.com>
Date: Tue, 14 Apr 2026 10:29:00 +0800
Subject: [PATCH] commit

---
 .../views/mobile/train/trainInfo.html         | 193 +++++++++++-------
 1 file changed, 123 insertions(+), 70 deletions(-)

diff --git a/src/main/resources/views/mobile/train/trainInfo.html b/src/main/resources/views/mobile/train/trainInfo.html
index 8bddc2c..e7b6351 100644
--- a/src/main/resources/views/mobile/train/trainInfo.html
+++ b/src/main/resources/views/mobile/train/trainInfo.html
@@ -39,6 +39,42 @@ layout("/mobile/platform.html"){
         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;
     }
@@ -152,6 +188,7 @@ layout("/mobile/platform.html"){
     .van-tabs__nav--complete {
         padding: 0;
     }
+
     .risk-dialog-wrapper {
         display: flex;
         flex-direction: column;
@@ -166,18 +203,18 @@ layout("/mobile/platform.html"){
         padding-bottom: 16px; /* 给按钮留点空间 */
     }
 
-    .remark-content{
+    .remark-content {
         width: 100%;
         max-width: 100%;
-       /* height: calc(100vh - 46px - 44px);
-        overflow-y: auto;*/
+        /* height: calc(100vh - 46px - 44px);
+         overflow-y: auto;*/
     }
 
-    .remark-content *{
-        max-width: 100%!important;
+    .remark-content * {
+        max-width: 100% !important;
     }
 
-    .table-class{
+    .table-class {
         width: 100%;
         margin-top: 10px;
         border-radius: 5px;
@@ -186,14 +223,17 @@ layout("/mobile/platform.html"){
         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;
         }
@@ -209,24 +249,24 @@ layout("/mobile/platform.html"){
                                :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-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">
+        <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 style="position: relative"
+                <div class="train-card"
                      :class="activityStatus !== '1' ? 'van-doc-card' : 'van-doc-card-my'">
                     <div>
                         <van-tag type="primary" size="medium">
@@ -282,29 +322,33 @@ layout("/mobile/platform.html"){
                               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="openRiskText(o)">
-                        我要报名
-                    </van-button>
+                    <div class="train-card-actions"
+                         v-if="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"
-                                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>
+                        <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>
 
-                    <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 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 @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>
@@ -383,7 +427,8 @@ layout("/mobile/platform.html"){
                         <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: '请选择报名时段' }]"
+                            <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">
@@ -410,17 +455,21 @@ layout("/mobile/platform.html"){
     </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-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-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>
+                <van-search v-model="registerForm.searchKeyword" placeholder="请输入姓名查询"
+                            @search="getSignUsers"></van-search>
                 <table class="table-class" v-if="signUsers && signUsers.length > 0">
                     <thead>
                     <tr>
@@ -438,10 +487,10 @@ layout("/mobile/platform.html"){
                     </tbody>
                 </table>
                 <van-empty
-                    v-else
-                    class="custom-image"
-                    image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
-                    description="暂无报名人员"
+                        v-else
+                        class="custom-image"
+                        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
+                        description="暂无报名人员"
                 ></van-empty>
             </van-tab>
         </van-tabs>
@@ -463,8 +512,12 @@ layout("/mobile/platform.html"){
 
     <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-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>
@@ -573,24 +626,24 @@ layout("/mobile/platform.html"){
                 this.signUsers = data
             },
             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)
                 } else {
                     this.tableData.courseList = this.tempArray.courseList.filter(o => o.assort === title && o.courseType === this.courseType)
                 }
             },
             calcSignUpCount(o) {
-                if(o.reserveMode === 2) {
+                if (o.reserveMode === 2) {
                     let lave = 0
                     let lave2 = 0
-                    if(o.hasRegisterNum < o.coursePeopleNumber) {
+                    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 + "人"
+                    let str = "（<span style='color: red'>余" + lave + "</span>/" + o.coursePeopleNumber + "人"
                         + "，<span style='color: red'>候补余" + lave2 + "</span>/" + o.courseReservedNumber + "人）"
                     return str
                 } else {
@@ -598,7 +651,7 @@ layout("/mobile/platform.html"){
                         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 + "人）"
+                        return "（<span style='color: red'>余" + lave + "</span>/" + o.coursePeopleNumber + "人）"
                     }
                 }
             },
@@ -654,7 +707,7 @@ layout("/mobile/platform.html"){
                                 clickCourseId: o.courseId,
                                 id: o.id,
                             })
-                            if(resp.code === 0) {
+                            if (resp.code === 0) {
                                 vant.Dialog.alert({message: '签到成功'})
                                 await this.pageData()
                                 o.isAttend = true
@@ -725,11 +778,11 @@ layout("/mobile/platform.html"){
                         reject([])
                     })
                 })*/
-                geolocation.getCurrentPosition(function(status,result){
-                    if(status === 'complete'){
+                geolocation.getCurrentPosition(function (status, result) {
+                    if (status === 'complete') {
                         //alert(result.position)
                         locations = result.position
-                    }else{
+                    } else {
                     }
                 });
             },
@@ -769,13 +822,13 @@ layout("/mobile/platform.html"){
                     await this.getCourseTimeSelectList(o)
                 }
 
-                if(res.code !== 0) {
+                if (res.code !== 0) {
                     vant.Dialog.alert({
                         title: '提示',
                         message: res.msg,
                         confirmButtonColor: '#1867b0'
                     })
-                    if(res.code !== 3) {
+                    if (res.code !== 3) {
                         return
                     }
                 }
@@ -800,14 +853,14 @@ layout("/mobile/platform.html"){
                 this.joinPopup = true
             },
             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) {
                     this.courseTimeSelectList = resp.data
                 } else {
                     this.$toast.fail("获取时段信息失败，请联系管理员")
                 }
             },
-            onCourseConfirm(val){
+            onCourseConfirm(val) {
                 this.formData.activityCourseId = val.value
                 this.$set(this.formData, "activityCourseId", val.value)
                 this.$set(this.formData, "courseTimeName", val.text.substring(0, 12))
@@ -825,7 +878,7 @@ layout("/mobile/platform.html"){
                 //获取家属是多少人
                 let per = 0
                 this.dynamicColumnsData.forEach(item => {
-                    if(item.columnCode === 'xdqsrs') {
+                    if (item.columnCode === 'xdqsrs') {
                         per += Number(item.columnValue)
                     }
                 })
@@ -834,7 +887,7 @@ layout("/mobile/platform.html"){
                     courseId: this.choose.id,
                     currentFamilyNumber: per,
                 })
-                if(res.code !== 0) {
+                if (res.code !== 0) {
                     vant.Dialog.alert({
                         title: '提示',
                         message: res.msg,
@@ -845,7 +898,7 @@ layout("/mobile/platform.html"){
 
                 let flag = this.choose.courseIsLimitApply
                 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) {
                         vant.Dialog.alert({
                             title: '温馨提示',
@@ -902,14 +955,14 @@ layout("/mobile/platform.html"){
                 }
                 this.popupShow = true
             },
-            showRemark(o){
+            showRemark(o) {
                 this.remarkShow = true
                 this.clickCourseRemark = o
                 this.courseRemark = o.remarks
             },
-            remarkClick(event){
+            remarkClick(event) {
                 //如果点击的是图片
-                if(event.target.tagName === 'IMG'){
+                if (event.target.tagName === 'IMG') {
                     vant.ImagePreview([event.target.src])
                 }
             },
@@ -926,7 +979,7 @@ layout("/mobile/platform.html"){
                         scrollWheel: true,
                     })
 
-                    AMap.plugin('AMap.Geolocation', function() {
+                    AMap.plugin('AMap.Geolocation', function () {
                         geolocation = new AMap.Geolocation({
                             // 是否使用高精度定位，默认：true
                             enableHighAccuracy: true,
@@ -979,7 +1032,7 @@ layout("/mobile/platform.html"){
                     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') {
+                    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)
@@ -1034,8 +1087,8 @@ layout("/mobile/platform.html"){
                     this.tableData.courseList = []
                     this.startLoading()
                 }
-                if(this.assortList.length > 0 && this.activityStatus !== '1') {
-                    if(value === '0') {
+                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)
@@ -1054,7 +1107,7 @@ layout("/mobile/platform.html"){
                     this.activity = resp.data
                 }
             },
-            async getUnionList(){
+            async getUnionList() {
                 const {data} = await $.get("/platform/vi/common/unions")
                 data.forEach(v => {
                     v.text = v.unionname