This commit is contained in:
@jyuhsin
2025-09-16 17:45:35 +08:00
parent eacc8db1b0
commit 6235144a74
9 changed files with 373 additions and 67 deletions
@@ -382,7 +382,16 @@ const basicForm = {
typeList.forEach(item => {
array = array.concat(item.familyMobileSignColumnList)
})
this.typeArray = array
// 根据 columnCode 去重
const uniqueMap = new Map()
array.forEach(item => {
if (item.columnCode) {
uniqueMap.set(item.columnCode, item)
}
})
// 可选:保留没有 columnCode 的项
const withoutCode = array.filter(item => !item.columnCode)
this.typeArray = [...uniqueMap.values(), ...withoutCode]
},
async validNumber(row, old) {
if (GetQueryString("id") === "") {
@@ -11,9 +11,12 @@ layout("/layouts/platform_h5.html"){
text-align: center !important;
}
.info-container {
height: calc(100vh - 46px - 44px);
min-height: calc(100vh - 46px - 44px);
overflow-y: auto;
margin-bottom: 60px;
}
.button {
position: fixed;
bottom: 0;
width: 100%;
}
.info-img {
display: block;
@@ -62,25 +65,27 @@ layout("/layouts/platform_h5.html"){
</template>
</table-list>
<van-popup v-model="infoVisible" position="right" :style="{ width: '100%', height: '100%' }">
<van-nav-bar title="详细信息" left-text="返回" left-arrow @click-left="infoVisible = false" fixed placeholder></van-nav-bar>
<van-action-sheet :close-on-click-overlay="false" title="详细信息" v-model="infoVisible">
<div class="info-container">
<van-image class="info-img" height="186" width="100%" :src="infoRow.cover"></van-image>
<div class="info-title">{{infoRow.activityName}}</div>
<pdf-preview style="height: calc(100vh - 46px - 44px - 186px - 57px)" :content="infoRow.introduce"></pdf-preview>
<div>
<van-image class="info-img" height="186" width="100%" :src="infoRow.cover"></van-image>
<div class="info-title">{{infoRow.activityName}}</div>
<pdf-preview :content="infoRow.introduce"></pdf-preview>
</div>
<div class="button">
<van-button @click="onApply(infoRow)" type="primary" block>
<span v-if="time >= 0">
去报名
</span>
<template v-else>
距离开始
<van-count-down :time="Math.abs(time)" class="count-down" format="DD 天 HH 时 mm 分 ss 秒" @finish="time = 0"></van-count-down>
</template>
</van-button>
</div>
</div>
<van-button @click="onApply(infoRow)" type="primary" block>
<span v-if="time >= 0">
去报名
</span>
<template v-else>
距离开始
<van-count-down :time="Math.abs(time)" class="count-down" format="DD 天 HH 时 mm 分 ss 秒" @finish="time = 0"></van-count-down>
</template>
</van-button>
</van-popup>
</van-action-sheet>
</div>
@@ -3,8 +3,7 @@ const applyForm = {
/*language=HTML*/
`
<div>
<van-popup v-model="visible" position="right" :style="{ width: '100%', height: '100%', 'background-color': '#F7F8FA' }">
<van-nav-bar title="报名信息" left-text="返回" left-arrow @click-left="visible = false" fixed placeholder></van-nav-bar>
<van-action-sheet :close-on-click-overlay="false" title="报名信息" v-model="visible">
<van-form ref="formRef" class="form-container">
<van-cell-group title="活动信息" class="form-section">
<van-field label="活动名称" readonly v-model="row.courseName"></van-field>
@@ -18,21 +17,21 @@ const applyForm = {
<van-field label="所属工会" readonly v-model="formData.unionName"></van-field>
<van-field label="性别" readonly v-model="formData.sex"></van-field>
<template v-if="row.courseIsLimitApply">
<van-field label="报名时段"
required
<van-field label="报名时段"
required
:rules="[{ required: true, message: '请选择报名时段' }]"
readonly
readonly
@click="showCoursePicker = true"
placeholder="请选择报名时段"
placeholder="请选择报名时段"
name="courseTimeName"
v-model="formData.courseTimeName">
</van-field>
<van-popup v-model="showCoursePicker" position="bottom">
<van-picker
show-toolbar
:columns="courseTimeSelectList"
@confirm="onCourseConfirm"
@cancel="showCoursePicker=false"
show-toolbar
:columns="courseTimeSelectList"
@confirm="onCourseConfirm"
@cancel="showCoursePicker=false"
></van-picker>
</van-popup>
</template>
@@ -65,11 +64,11 @@ const applyForm = {
</div>
</van-cell-group>
<div class="form-actions">
<van-button @click="onSubmit" round type="info">提交</van-button>
<div class="button">
<van-button @click="onSubmit" type="info" block>提交</van-button>
</div>
</van-form>
</van-popup>
</van-action-sheet>
</div>
`,
data() {
@@ -329,15 +328,16 @@ const applyForm = {
},
},
style: /*language=CSS*/ `
.form-container {
height: calc(100vh - 46px - 64px - 20px);
overflow-y: auto;
}
.companionList_empty_text {
text-align: center;
padding: 10px 0;
font-size: 14px;
color: grey;
}
.button {
position: fixed;
bottom: 0;
width: 100%;
}
`
}
@@ -83,10 +83,9 @@ layout("/layouts/platform_h5.html"){
</template>
</table-list>
<van-popup v-model="introduceVisible" position="right" :style="{ width: '100%', height: '100%', 'background-color': '#F7F8FA' }">
<van-nav-bar title="详细信息" left-text="返回" left-arrow @click-left="introduceVisible = false" fixed placeholder></van-nav-bar>
<pdf-preview style="height: calc(100vh - 46px)" :content="introduceRow.introduce"></pdf-preview>
</van-popup>
<van-action-sheet :close-on-click-overlay="false" title="详细信息" v-model="introduceVisible" cancel-text="取消">
<pdf-preview :content="introduceRow.introduce"></pdf-preview>
</van-action-sheet>
<times ref="timesRef"></times>
<apply-form ref="formRef" @refresh="refresh"></apply-form>
@@ -11,9 +11,12 @@ layout("/layouts/platform_h5.html"){
text-align: center !important;
}
.info-container {
height: calc(100vh - 46px - 44px);
min-height: calc(100vh - 46px - 44px);
overflow-y: auto;
}
.button {
position: fixed;
bottom: 0;
width: 100%;
}
.info-img {
display: block;
@@ -21,6 +24,170 @@ layout("/layouts/platform_h5.html"){
.van-count-down {
color: #fff;
}
.table-list-container {
padding: 0;
margin-top: 10px;
}
.table-list-container .table-list-item {
background-color: #fff;
border-bottom: 1px solid #eaecef;
padding: 16px;
position: relative;
margin-bottom: 10px;
}
.table-list-container .table-list-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
.table-list-container .table-list-item .item-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
}
.table-list-container .table-list-item .item-title {
font-size: 16px;
font-weight: 500;
color: #1f2f3d;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
padding-right: 10px;
}
.table-list-container .table-list-item .img-container {
width: 100px;
height: 100px;
flex-shrink: 0;
border-radius: 6px;
}
.table-list-container .table-list-item .img-container img {
width: 100%;
height: 100%;
border-radius: 6px;
}
.table-list-container .table-list-item .item-meta {
display: flex;
color: #606266;
font-size: 14px;
margin-bottom: 5px;
padding: 4px 0;
}
.table-list-container .table-list-item .meta-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.table-list-container .table-list-item .meta-item i {
font-size: 14px;
color: #909399;
width: 16px;
text-align: center;
}
.table-list-container .table-list-item .item-content {
color: #606266;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.5;
}
.table-list-container .table-list-item .item-footer {
display: flex;
justify-content: space-between;
margin-top: 12px;
padding-top: 8px;
border-top: 1px dashed #eaecef;
color: #909399;
font-size: 13px;
}
.table-list-container .table-list-item .item-actions {
display: flex;
column-gap: 20px;
justify-content: end;
margin-top: 15px;
padding-top: 12px;
border-top: 1px solid #eaecef;
}
.table-list-container .table-list-item .action-btn {
display: flex;
align-items: center;
justify-content: end;
font-size: 14px;
color: var(--color-primary);
padding: 4px 0;
}
.table-list-container .table-list-item .action-btn i {
margin-right: 6px;
font-size: 16px;
}
.table-list-container .table-list-item .action-btn.delete {
color: #ff0000;
}
.table-list-container .table-list-item .action-btn.review {
color: #67c23a;
}
.table-list-container .empty-state {
text-align: center;
padding: 60px 20px;
color: #909399;
}
.table-list-container .empty-state i {
font-size: 60px;
margin-bottom: 16px;
color: #dcdee0;
}
.table-list-container .empty-state p {
margin-top: 10px;
font-size: 14px;
}
.table-column {
display: flex;
padding: 6px 0;
align-items: center;
}
.label {
color: #333;
font-size: 14px;
flex-shrink: 0;
max-width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.value {
color: #555;
font-size: 14px;
flex-grow: 1; /* 动态占据剩余部分 */
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出的部分 */
text-overflow: ellipsis; /* 省略号 */
}
</style>
<div id="app">
@@ -53,26 +220,66 @@ layout("/layouts/platform_h5.html"){
<template #actions="{index,row}">
<div class="action-btn" @click="onView(row)">
<i class="fa fa-eye"></i>
<span>查看介绍</span>
<span>活动介绍</span>
</div>
<div class="action-btn" @click="onInfo(row)">
<i class="fa fa-eye"></i>
<span>{{row.keyWord}}信息</span>
</div>
<div class="action-btn" @click="onApply(row)">
<i class="fa fa-edit"></i>
<span>查看</span>
<span>操作</span>
</div>
</template>
</table-list>
<van-popup v-model="infoVisible" position="right" :style="{ width: '100%', height: '100%' }">
<van-nav-bar title="详细信息" left-text="返回" left-arrow @click-left="infoVisible = false" fixed placeholder></van-nav-bar>
<van-action-sheet :close-on-click-overlay="false" title="活动详细信息" v-model="infoVisible" cancel-text="取消">
<div class="info-container">
<van-image class="info-img" height="186" width="100%" :src="infoRow.cover"></van-image>
<div class="info-title">{{infoRow.activityName}}</div>
<pdf-preview style="height: calc(100vh - 46px - 44px - 186px - 57px)" :content="infoRow.introduce"></pdf-preview>
<div>
<van-image class="info-img" height="186" width="100%" :src="infoRow.cover"></van-image>
<div class="info-title">{{infoRow.activityName}}</div>
<pdf-preview :content="infoRow.introduce"></pdf-preview>
</div>
</div>
</van-action-sheet>
<van-button @click="onApply(infoRow)" type="primary" block>下一步</van-button>
</van-popup>
<van-action-sheet :close-on-click-overlay="false" title="报名信息" v-model="courseVisible" cancel-text="取消">
<div class="table-list-container">
<div v-for="(row, index) in mineCourses" :key="index" class="table-list-item">
<div class="item-header">
<div class="item-title" style="white-space: normal">{{ row.courseName }}</div>
</div>
<div style="display: flex;column-gap: 10px">
<div class="table-column">
<div class="label">校区:</div>
<div class="value">{{ row.campus }}</div>
</div>
</div>
<div style="display: flex;column-gap: 10px">
<div class="table-column">
<div class="label">地点:</div>
<div class="value">{{ row.courseLocation }}</div>
</div>
</div>
<div style="display: flex;column-gap: 10px">
<div class="table-column">
<div class="label">联系人:</div>
<div class="value">{{ row.courseInstructor }}</div>
</div>
</div>
<div style="display: flex;column-gap: 10px">
<div class="table-column">
<div class="label">家属人数:</div>
<div class="value">
{{ row.mobileColumnsValue ? JSON.parse(row.mobileColumnsValue).length : '暂无' }}
</div>
</div>
</div>
</div>
<div class="item-actions"></div>
</div>
</van-action-sheet>
</div>
@@ -101,6 +308,9 @@ layout("/layouts/platform_h5.html"){
],
infoVisible: false,
infoRow: {},
mineCourses: [],
courseVisible: false,
}
},
methods: {
@@ -111,6 +321,13 @@ layout("/layouts/platform_h5.html"){
onApply(row) {
this.$pjaxReplace('/platform/family/apply/list/h5?id=' + row.id + '&dataType=mine')
},
onInfo(row) {
this.$axios.post('/platform/family/mine/queryMineCourse', {activityId: row.id})
.then((res) => {
this.mineCourses = res.data
this.courseVisible = true
})
},
onReady() {
this.doSearch()
},