change
This commit is contained in:
@@ -3,79 +3,448 @@ layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.list-card {
|
||||
border-radius: 0;
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.list-card-body {
|
||||
/* width: calc(100% - 140px);
|
||||
display: flex;*/
|
||||
width: calc(100% - 140px);
|
||||
.culture-activity-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.culture-activity-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.culture-activity-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.culture-activity-page .van-nav-bar .van-icon,
|
||||
.culture-activity-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.culture-activity-content {
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.culture-activity-hero {
|
||||
position: relative;
|
||||
height: 134px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
background-color: #247fe8;
|
||||
box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
|
||||
}
|
||||
|
||||
.culture-activity-hero__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.culture-activity-hero__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 64%;
|
||||
height: 100%;
|
||||
padding-left: 16px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(90deg, rgba(22, 112, 232, .98) 0%, rgba(22, 112, 232, .88) 52%, rgba(22, 112, 232, 0) 100%);
|
||||
}
|
||||
|
||||
.culture-activity-hero__title {
|
||||
font-size: 25px;
|
||||
line-height: 34px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0 2px 6px rgba(17, 86, 182, .18);
|
||||
}
|
||||
|
||||
.culture-activity-hero__subtitle {
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: .5px;
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.culture-activity-sticky {
|
||||
padding: 10px 0 1px;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.van-sticky--fixed .culture-activity-sticky {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.culture-activity-search {
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.culture-activity-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.culture-activity-search .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.culture-activity-search .van-field__control::placeholder {
|
||||
color: #a7b0bf;
|
||||
}
|
||||
|
||||
.culture-activity-filter {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
transition: border-radius .18s ease;
|
||||
}
|
||||
|
||||
.culture-activity-filter.is-open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-dropdown-menu__bar {
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-dropdown-menu__item {
|
||||
min-width: 0;
|
||||
flex: 1 1 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-dropdown-menu__item:last-child {
|
||||
flex-grow: 1.35;
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-dropdown-menu__title {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 0 15px 0 4px;
|
||||
overflow: hidden;
|
||||
color: #66758a;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-dropdown-menu__title::after {
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-dropdown-menu__title--active,
|
||||
.culture-activity-filter .van-dropdown-item__option--active,
|
||||
.culture-activity-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-dropdown-menu__title--down::after {
|
||||
border-color: transparent transparent #1989fa #1989fa;
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-dropdown-item__option {
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
color: #46566c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-cell::after {
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.culture-activity-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.list-card-body .title {
|
||||
.culture-activity-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.culture-activity-card__cover,
|
||||
.culture-activity-card__cover-state {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background-color: #edf4fc;
|
||||
}
|
||||
|
||||
.culture-activity-card__cover {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.culture-activity-card__cover-state {
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
color: #8da1ba;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.culture-activity-card__cover-state .van-icon {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.culture-activity-card__cover-state.is-error {
|
||||
color: #c27b75;
|
||||
background-color: #fff3f1;
|
||||
}
|
||||
|
||||
.culture-activity-card__body {
|
||||
padding: 12px 38px 14px 14px;
|
||||
}
|
||||
|
||||
.culture-activity-card__title {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: #303846;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.culture-activity-card__time {
|
||||
margin-top: 4px;
|
||||
color: #98a2b2;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.culture-activity-card__meta {
|
||||
margin-top: 10px;
|
||||
padding-top: 9px;
|
||||
border-top: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.culture-activity-card__address {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
color: #69788d;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.culture-activity-card__address .van-icon {
|
||||
margin: 2px 5px 0 0;
|
||||
flex: none;
|
||||
color: #6c9ff8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.culture-activity-card__address span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.1em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.list-card-body .time {
|
||||
color: #9a9696;
|
||||
line-height: 20px;
|
||||
.culture-activity-card__tags {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.list-card-body .footer {
|
||||
text-align: right;
|
||||
.culture-activity-card__tag {
|
||||
display: inline-flex;
|
||||
padding: 3px 8px;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.list-card-body .footer .tag {
|
||||
border: 1px solid transparent;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
.culture-activity-card__tag-label {
|
||||
margin-right: 4px;
|
||||
color: #8aa7cf;
|
||||
}
|
||||
.list-card-img img{
|
||||
width: 100%;
|
||||
|
||||
.culture-activity-card__arrow {
|
||||
position: absolute;
|
||||
top: 164px;
|
||||
right: 14px;
|
||||
color: #b4bdca;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.culture-activity-empty {
|
||||
display: flex;
|
||||
min-height: 260px;
|
||||
padding: 26px 18px 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.culture-activity-empty img {
|
||||
display: block;
|
||||
width: 82%;
|
||||
max-width: 280px;
|
||||
height: auto;
|
||||
border-radius: 12px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.culture-activity-empty__title {
|
||||
margin-top: 14px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.culture-activity-empty__hint {
|
||||
margin-top: 5px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.culture-activity-page .van-list__finished-text,
|
||||
.culture-activity-page .van-list__loading {
|
||||
color: #9aa7b8;
|
||||
font-size: 13px;
|
||||
line-height: 44px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar title="活动列表" @click-left="historyBack" left-arrow left-text="返回" placeholder fixed></van-nav-bar>
|
||||
<van-sticky offset-top="46px">
|
||||
<van-dropdown-menu>
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item :options="stateList" @change="doSearch" v-model="pageForm.state"></van-dropdown-item>
|
||||
<van-dropdown-item :options="isEnrolledOptions" @change="doSearch" v-model="pageForm.isEnrolled"></van-dropdown-item>
|
||||
<van-dropdown-item :options="activityTypeOptions" @change="doSearch" v-model="pageForm.activity_type"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
<table-list api="/platform/activity/culture/applyUser/pageData"
|
||||
:page_form.sync="pageForm"
|
||||
ref="tableListRef"
|
||||
title="name"
|
||||
img="cover"
|
||||
@ready="onReady"
|
||||
>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="报名开始时间">
|
||||
{{$moment(row.startTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
<table-column label="报名结束时间">
|
||||
{{$moment(row.endTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<template v-if="$moment().isBefore($moment(row.endTime))">
|
||||
<div class="action-btn" @click="openDetail(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>去报名</span>
|
||||
<div class="culture-activity-page">
|
||||
<van-nav-bar title="文化活动" @click-left="historyBack" left-arrow left-text="返回" placeholder fixed></van-nav-bar>
|
||||
|
||||
<div class="culture-activity-content">
|
||||
<section class="culture-activity-hero">
|
||||
<img class="culture-activity-hero__image" src="/assets/mobile/img/activity/hero/culture-hero-v3.png" alt="文化活动插画">
|
||||
<div class="culture-activity-hero__copy">
|
||||
<div class="culture-activity-hero__title">文化活动</div>
|
||||
<div class="culture-activity-hero__subtitle">丰富生活 · 乐享校园</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</table-list>
|
||||
</section>
|
||||
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="culture-activity-sticky">
|
||||
<van-search
|
||||
v-model="searchKeyword"
|
||||
class="culture-activity-search"
|
||||
placeholder="搜索文化活动"
|
||||
shape="round"
|
||||
clearable
|
||||
@search="doSearch"
|
||||
@clear="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu class="culture-activity-filter" :class="{'is-open': filterOpened}" active-color="#1989fa">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item :options="stateList" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.state"></van-dropdown-item>
|
||||
<van-dropdown-item :options="isEnrolledOptions" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.isEnrolled"></van-dropdown-item>
|
||||
<van-dropdown-item :options="activityTypeOptions" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.activity_type"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list v-model="loading" :finished="finished" @load="onLoad">
|
||||
<div class="culture-activity-list">
|
||||
<div v-for="row in tableData" :key="row.id" class="culture-activity-card" @click="openDetail(row)">
|
||||
<img
|
||||
v-if="hasCover(row) && !imageLoadErrors[row.id]"
|
||||
class="culture-activity-card__cover"
|
||||
:src="row.cover"
|
||||
:alt="row.name"
|
||||
@error="handleImageError(row)"
|
||||
>
|
||||
<div v-else class="culture-activity-card__cover-state" :class="{'is-error': hasCover(row)}">
|
||||
<van-icon name="photo-o"></van-icon>
|
||||
<span>{{ hasCover(row) ? '图片加载失败' : '暂无图片' }}</span>
|
||||
</div>
|
||||
<div class="culture-activity-card__body">
|
||||
<div class="culture-activity-card__title">{{ row.name }}</div>
|
||||
<div class="culture-activity-card__time" v-if="row.applyStartTime && row.applyEndTime">
|
||||
报名时间：{{ $moment(row.applyStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.applyEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="culture-activity-card__time" v-if="row.startTime && row.endTime">
|
||||
活动时间：{{ $moment(row.startTime).format('MM/DD HH:mm') }}~{{ $moment(row.endTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="culture-activity-card__meta" v-if="row.address || row.projectTypeName || formatSignUpMethod(row.signUpMethod)">
|
||||
<div class="culture-activity-card__address" v-if="row.address">
|
||||
<van-icon name="location-o"></van-icon>
|
||||
<span>{{ row.address }}</span>
|
||||
</div>
|
||||
<div class="culture-activity-card__tags" v-if="row.projectTypeName || formatSignUpMethod(row.signUpMethod)">
|
||||
<span class="culture-activity-card__tag" v-if="row.projectTypeName">
|
||||
<span class="culture-activity-card__tag-label">活动类型</span>{{ row.projectTypeName }}
|
||||
</span>
|
||||
<span class="culture-activity-card__tag" v-if="formatSignUpMethod(row.signUpMethod)">
|
||||
<span class="culture-activity-card__tag-label">报名方式</span>{{ formatSignUpMethod(row.signUpMethod) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<van-icon class="culture-activity-card__arrow" name="arrow"></van-icon>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<div v-if="!loading && tableData.length === 0" class="culture-activity-empty">
|
||||
<img src="/assets/mobile/img/activity/culture-empty.png" alt="文化活动空状态插画">
|
||||
<div class="culture-activity-empty__title">暂无文化活动</div>
|
||||
<div class="culture-activity-empty__hint">当前筛选条件下暂时没有可展示的活动</div>
|
||||
</div>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-popup :style="{ height: '100%',width: '100%'}" position="right" v-model="viewShow">
|
||||
<mobile-culture-apply-user :id="viewData.id" @back="back" @submit_back="submit_back" ref="viewInfo"></mobile-culture-apply-user>
|
||||
@@ -92,10 +461,14 @@ layout("/layouts/platform_h5.html"){
|
||||
finished: false,
|
||||
loading: false,
|
||||
refreshing: false,
|
||||
searchKeyword: "",
|
||||
imageLoadErrors: {},
|
||||
filterOpened: false,
|
||||
pageForm: {
|
||||
state: 2,
|
||||
isEnrolled: 0,
|
||||
year: new Date().getFullYear(),
|
||||
name: "",
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
totalCount: 0,
|
||||
@@ -128,6 +501,47 @@ layout("/layouts/platform_h5.html"){
|
||||
onReady() {
|
||||
this.doSearch()
|
||||
},
|
||||
hasCover(row) {
|
||||
return !!(row && row.cover && String(row.cover).trim())
|
||||
},
|
||||
handleImageError(row) {
|
||||
this.$set(this.imageLoadErrors, row.id, true)
|
||||
},
|
||||
formatSignUpMethod(value) {
|
||||
return {
|
||||
1: "个人报名",
|
||||
2: "组队报名",
|
||||
3: "分工会报名"
|
||||
}[Number(value)] || ""
|
||||
},
|
||||
onLoad() {
|
||||
if (!this.finished) this.loadActivities(false)
|
||||
},
|
||||
onRefresh() {
|
||||
this.loadActivities(true)
|
||||
},
|
||||
loadActivities(reset) {
|
||||
if (reset) {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.tableData = []
|
||||
this.finished = false
|
||||
this.imageLoadErrors = {}
|
||||
}
|
||||
this.loading = true
|
||||
this.$axios.post("/platform/activity/culture/applyUser/pageData", this.pageForm).then((res) => {
|
||||
if (res.code === 0) {
|
||||
const list = res.data && res.data.list ? res.data.list : []
|
||||
this.tableData = this.pageForm.pageNumber === 1 ? list : this.tableData.concat(list)
|
||||
this.pageForm.totalCount = res.data && res.data.totalCount ? res.data.totalCount : 0
|
||||
this.finished = this.tableData.length >= this.pageForm.totalCount
|
||||
if (!this.finished) this.pageForm.pageNumber++
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
this.refreshing = false
|
||||
})
|
||||
},
|
||||
|
||||
openDetail(row) {
|
||||
this.$axios.post('/platform/activity/basic/scope/getScopeUser',{activityGroupId:row.groupId}).then(res=>{
|
||||
@@ -216,11 +630,8 @@ layout("/layouts/platform_h5.html"){
|
||||
.catch(() => {})
|
||||
},
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
this.pageForm.name = this.searchKeyword.trim()
|
||||
this.loadActivities(true)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
@@ -3,44 +3,168 @@ layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.title {
|
||||
padding: 10px;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
background: #ffffff;
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.culture-detail-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(78px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.culture-detail-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.culture-detail-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.culture-detail-page .van-nav-bar .van-icon,
|
||||
.culture-detail-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.culture-detail-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.culture-detail-overview,
|
||||
.notice,
|
||||
.block,
|
||||
.form-create-h5 {
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.culture-detail-cover {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 216px;
|
||||
background-color: #edf4fc;
|
||||
}
|
||||
|
||||
.culture-detail-cover img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.culture-detail-cover-state {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
color: #8da1ba;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.culture-detail-cover-state .van-icon {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.culture-detail-summary {
|
||||
padding: 15px 14px 14px;
|
||||
}
|
||||
|
||||
.culture-detail-title {
|
||||
color: #23344a;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.culture-detail-tags {
|
||||
display: flex;
|
||||
margin-top: 9px;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.culture-detail-tag {
|
||||
display: inline-flex;
|
||||
padding: 3px 9px;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 11px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.culture-detail-info {
|
||||
margin-top: 13px;
|
||||
padding-top: 3px;
|
||||
border-top: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 15px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
column-gap: 10px;
|
||||
background: #ffffff;
|
||||
min-height: 46px;
|
||||
padding: 10px 0;
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.info-item__content {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-item__label {
|
||||
color: #8b98aa;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.info-item__value {
|
||||
margin-top: 2px;
|
||||
color: #34445a;
|
||||
font-size: 13px;
|
||||
line-height: 19px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.left-tag-title::before {
|
||||
content: "";
|
||||
width: 5px;
|
||||
background: var(--color-primary);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
top: 3px;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.users {
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid #e8e0e0;
|
||||
padding: 14px;
|
||||
margin-top: 12px;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.users-title {
|
||||
font-size: 1.1em;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
padding-left: 11px;
|
||||
color: #263548;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.users-content {
|
||||
@@ -64,60 +188,133 @@ layout("/layouts/platform_h5.html"){
|
||||
}
|
||||
|
||||
.block {
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid #e8e0e0;
|
||||
background: #ffffff;
|
||||
padding: 15px 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.notice {
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid #e8e0e0;
|
||||
background: #ffffff;
|
||||
margin-top: 12px;
|
||||
padding: 15px 14px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.notice-title {
|
||||
font-size: 1.1em;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
padding: 0 0 10px 11px;
|
||||
border-bottom: 1px solid #edf1f6;
|
||||
color: #263548;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
padding: 10px;
|
||||
padding: 10px 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.notice-content,
|
||||
.notice-content div,
|
||||
.notice-content p,
|
||||
.notice-content span,
|
||||
.notice-content li {
|
||||
color: #3f4c5e !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.8 !important;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.notice-content h1,
|
||||
.notice-content h2,
|
||||
.notice-content h3,
|
||||
.notice-content h4,
|
||||
.notice-content h5,
|
||||
.notice-content h6 {
|
||||
margin: 16px 0 10px !important;
|
||||
color: #1f2f43 !important;
|
||||
font-size: 19px !important;
|
||||
line-height: 1.5 !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.notice-content > :first-child,
|
||||
.notice-content > rich-text > :first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.notice-content p {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.notice-content img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.notice-content table {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
background: #ffffff;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
min-height: 64px;
|
||||
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid #e8eef6;
|
||||
background: rgba(255, 255, 255, .97);
|
||||
box-shadow: 0 -6px 18px rgba(36, 65, 102, .08);
|
||||
}
|
||||
|
||||
.footer .bottom-button {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
height: 46px;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgb(255, 255, 255);
|
||||
height: 100%;
|
||||
border-radius: 23px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
box-shadow: 0 6px 16px rgba(25, 137, 250, .2);
|
||||
}
|
||||
|
||||
.footer .bottom-button.is-primary {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.footer .bottom-button.is-danger {
|
||||
color: #fff;
|
||||
border: 1px solid #ee5a5a;
|
||||
background-color: #ee5a5a;
|
||||
box-shadow: 0 6px 16px rgba(238, 90, 90, .2);
|
||||
}
|
||||
|
||||
.footer .bottom-button.is-disabled {
|
||||
color: #8b98aa;
|
||||
background-color: #eef2f7;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-create-h5 {
|
||||
background-color: #ffffff;
|
||||
margin-top: 10px;
|
||||
padding: 10px 10px 56px 10px;
|
||||
margin-top: 12px;
|
||||
padding: 15px 14px;
|
||||
}
|
||||
|
||||
.form-create-h5 .el-form {
|
||||
@@ -159,58 +356,132 @@ layout("/layouts/platform_h5.html"){
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.block .el-select {
|
||||
width: calc(100% - 88px);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.block > .el-button,
|
||||
.block > div > .el-button {
|
||||
margin-top: 12px;
|
||||
border-color: var(--color-primary);
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.block .el-input__inner {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.block .el-table {
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
color: #566579;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.block .text-primary {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
color: #7b8ba1;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar @click-left="historyBack" placeholder fixed left-arrow left-text="返回" placeholder
|
||||
title="活动详情"></van-nav-bar>
|
||||
<div class="culture-detail-page">
|
||||
<van-nav-bar @click-left="historyBack" fixed left-arrow left-text="返回" placeholder title="活动详情"></van-nav-bar>
|
||||
|
||||
<div style="background: #ededed; padding-bottom: 56px">
|
||||
<van-image :src="viewData.cover"></van-image>
|
||||
<div class="title">{{viewData.name}}</div>
|
||||
<div class="info">
|
||||
<main class="culture-detail-content">
|
||||
<section class="culture-detail-overview">
|
||||
<van-image class="culture-detail-cover" :src="viewData.cover" fit="cover">
|
||||
<template #loading>
|
||||
<div class="culture-detail-cover-state">
|
||||
<van-loading type="spinner" color="#1989fa"></van-loading>
|
||||
<span>图片加载中</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #error>
|
||||
<div class="culture-detail-cover-state">
|
||||
<van-icon name="photo-o"></van-icon>
|
||||
<span>{{ viewData.cover ? '图片加载失败' : '暂无图片' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</van-image>
|
||||
<div class="culture-detail-summary">
|
||||
<div class="culture-detail-title">{{viewData.name}}</div>
|
||||
<div class="culture-detail-tags">
|
||||
<span class="culture-detail-tag" v-if="viewData.projectTypeName">{{viewData.projectTypeName}}</span>
|
||||
<span class="culture-detail-tag" v-if="viewData.signUpMethod===1">个人报名</span>
|
||||
<span class="culture-detail-tag" v-else-if="viewData.signUpMethod===2">组队报名</span>
|
||||
<span class="culture-detail-tag" v-else-if="viewData.signUpMethod===3">分工会报名</span>
|
||||
</div>
|
||||
<div class="culture-detail-info">
|
||||
<div class="info-item">
|
||||
<van-icon name="underway-o"></van-icon>
|
||||
<div>{{viewData.startTime}}至{{viewData.endTime}}</div>
|
||||
<div class="info-item__content">
|
||||
<div class="info-item__label">活动时间</div>
|
||||
<div class="info-item__value">
|
||||
{{viewData.startTime ? $moment(viewData.startTime).format('YYYY-MM-DD HH:mm') : '待定'}}
|
||||
至
|
||||
{{viewData.endTime ? $moment(viewData.endTime).format('YYYY-MM-DD HH:mm') : '待定'}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item" v-if="viewData.applyStartTime || viewData.applyEndTime">
|
||||
<div class="info-item__content">
|
||||
<div class="info-item__label">报名时间</div>
|
||||
<div class="info-item__value">
|
||||
{{viewData.applyStartTime ? $moment(viewData.applyStartTime).format('YYYY-MM-DD HH:mm') : '待定'}}
|
||||
至
|
||||
{{viewData.applyEndTime ? $moment(viewData.applyEndTime).format('YYYY-MM-DD HH:mm') : '待定'}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<van-icon name="location-o"></van-icon>
|
||||
<div>{{viewData.address}}</div>
|
||||
<div class="info-item__content">
|
||||
<div class="info-item__label">活动地点</div>
|
||||
<div class="info-item__value">{{viewData.address || '待定'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item" v-if="viewData.userNumberLimit===1">
|
||||
<van-icon name="location-o"></van-icon>
|
||||
活动限制人数
|
||||
<span>{{viewData.totalUserNumberLimit}}人</span>
|
||||
<div class="info-item__content">
|
||||
<div class="info-item__label">活动限制人数</div>
|
||||
<div class="info-item__value">{{viewData.totalUserNumberLimit}}人</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item" v-if="viewData.userNumberLimit===2">
|
||||
<van-icon name="location-o"></van-icon>
|
||||
本工会限制名额
|
||||
<span>{{viewData.unionLimitNum}}人</span>
|
||||
<div class="info-item__content">
|
||||
<div class="info-item__label">本工会限制名额</div>
|
||||
<div class="info-item__value">{{viewData.unionLimitNum}}人</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<van-icon name="location-o"></van-icon>
|
||||
报名方式：
|
||||
<span v-if="viewData.signUpMethod===1" style="color: var(--color-primary)">个人报名</span>
|
||||
<span v-if="viewData.signUpMethod===2" style="color: var(--color-primary)">组队报名</span>
|
||||
<span v-if="viewData.signUpMethod===3" style="color: var(--color-primary)">分工会报名</span>
|
||||
<div class="info-item__content">
|
||||
<div class="info-item__label">报名方式</div>
|
||||
<div class="info-item__value">
|
||||
<span v-if="viewData.signUpMethod===1">个人报名</span>
|
||||
<span v-else-if="viewData.signUpMethod===2">组队报名</span>
|
||||
<span v-else-if="viewData.signUpMethod===3">分工会报名</span>
|
||||
<span v-else>无需报名</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item" v-if="viewData.signUpMethod==3">
|
||||
<van-icon name="location-o"></van-icon>
|
||||
组队人数：
|
||||
<span style="color: var(--color-primary)">{{viewData.teamNum}}</span>
|
||||
人
|
||||
<div class="info-item__content">
|
||||
<div class="info-item__label">组队人数</div>
|
||||
<div class="info-item__value">{{viewData.teamNum}}人</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="info-item" v-if="viewData.signUpMethod==1">-->
|
||||
<!-- <van-icon name="location-o"></van-icon>-->
|
||||
<!-- 报名人数：-->
|
||||
<!-- <span style="color: var(--color-primary)">2</span>-->
|
||||
<!-- 人-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="notice">
|
||||
<div class="notice-title left-tag-title">活动详情</div>
|
||||
<rich-text :value="viewData.activityContent" :height="300"></rich-text>
|
||||
<div class="notice-content">
|
||||
<rich-text :value="viewData.activityContent" :height="300"></rich-text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 个人报名 啥也不要-->
|
||||
@@ -327,27 +598,31 @@ layout("/layouts/platform_h5.html"){
|
||||
<form-create :value.sync="dynamicFormData" v-model="fapi" :rule="formCreateRule"
|
||||
:option="formCreateOption"></form-create>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="footer">
|
||||
<div class="bottom-button" style="background: var(--color-primary)" v-if="!isSignUp && inApplyTime"
|
||||
@click="onConfirm">
|
||||
<span>立即报名</span>
|
||||
<span style="font-size: 12px; margin-top: 5px">{{viewData.applyEndTime}}截止报名</span>
|
||||
<div class="footer">
|
||||
<div class="bottom-button is-primary" v-if="!isSignUp && inApplyTime" @click="onConfirm">
|
||||
<span>立即报名</span>
|
||||
<span>{{viewData.applyEndTime ? $moment(viewData.applyEndTime).format('MM-DD HH:mm') : ''}}截止报名</span>
|
||||
</div>
|
||||
|
||||
<div class="bottom-button is-primary" v-if="isSignUp && inApplyTime" @click="onConfirmAgain">
|
||||
<span>重新提交</span>
|
||||
<span>{{viewData.applyEndTime ? $moment(viewData.applyEndTime).format('MM-DD HH:mm') : ''}}截止报名</span>
|
||||
</div>
|
||||
|
||||
<div class="bottom-button is-danger" v-if="isSignUp && inApplyTime" @click="onCancel">
|
||||
<span>取消报名</span>
|
||||
<span>{{viewData.applyEndTime ? $moment(viewData.applyEndTime).format('MM-DD HH:mm') : ''}}截止报名</span>
|
||||
</div>
|
||||
|
||||
<div class="bottom-button is-disabled"
|
||||
v-if="viewData.applyEndTime && $moment(viewData.applyEndTime).valueOf() < $moment().valueOf() && $moment(viewData.endTime).valueOf() >= $moment().valueOf()">
|
||||
已过报名时间
|
||||
</div>
|
||||
|
||||
<div class="bottom-button is-disabled" v-if="$moment(viewData.endTime).valueOf() < $moment().valueOf()">活动已结束</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-button" style="background: var(--color-primary)" v-if="isSignUp && inApplyTime"
|
||||
@click="onConfirmAgain">
|
||||
<span>重新提交</span>
|
||||
<span style="font-size: 12px; margin-top: 5px">{{viewData.applyEndTime}}截止报名</span>
|
||||
</div>
|
||||
|
||||
<div class="bottom-button" style="background: red" v-if="isSignUp && inApplyTime" @click="onCancel">
|
||||
<span>取消报名</span>
|
||||
<span style="font-size: 12px; margin-top: 5px">{{viewData.applyEndTime}}截止报名</span>
|
||||
</div>
|
||||
|
||||
<div class="bottom-button" v-if="$moment(viewData.endTime).valueOf() < $moment().valueOf()">活动已结束</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,112 +2,572 @@
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style scoped>
|
||||
.info-title {
|
||||
font-weight: bold;
|
||||
background-color: white;
|
||||
padding: 13px;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
text-align: center !important;
|
||||
<style>
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
.info-container {
|
||||
margin-bottom: 60px;
|
||||
|
||||
.family-activity-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
.button {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
.family-activity-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
.info-img {
|
||||
display: block;
|
||||
|
||||
.family-activity-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
.van-count-down {
|
||||
|
||||
.family-activity-page .van-nav-bar .van-icon,
|
||||
.family-activity-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.family-activity-content {
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.family-activity-hero {
|
||||
position: relative;
|
||||
height: 134px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
background-color: #247fe8;
|
||||
box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
|
||||
}
|
||||
.item-header .van-tag {
|
||||
|
||||
.family-activity-hero__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: left center;
|
||||
}
|
||||
|
||||
.family-activity-hero__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 64%;
|
||||
height: 100%;
|
||||
padding-left: 16px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(90deg, rgba(22, 112, 232, .98) 0%, rgba(22, 112, 232, .88) 52%, rgba(22, 112, 232, 0) 100%);
|
||||
}
|
||||
|
||||
.family-activity-hero__title {
|
||||
font-size: 25px;
|
||||
line-height: 34px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0 2px 6px rgba(17, 86, 182, .18);
|
||||
}
|
||||
|
||||
.family-activity-hero__subtitle {
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: .5px;
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.family-activity-sticky {
|
||||
padding: 10px 0 1px;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.van-sticky--fixed .family-activity-sticky {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-activity-search {
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.family-activity-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.family-activity-filter {
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
transition: border-radius .18s ease;
|
||||
}
|
||||
|
||||
.family-activity-filter.is-open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.family-activity-filter .van-dropdown-menu__bar {
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.family-activity-filter .van-dropdown-menu__title {
|
||||
color: #66758a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.family-activity-filter .van-dropdown-menu__title--active,
|
||||
.family-activity-filter .van-dropdown-item__option--active,
|
||||
.family-activity-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.family-activity-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-activity-list .table-list-container {
|
||||
display: flex;
|
||||
margin-top: 0 !important;
|
||||
padding: 0 !important;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.family-activity-list .table-list-item {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
border: 0 !important;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.family-activity-list .table-list-item .item-header {
|
||||
display: block !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.family-activity-list .table-list-item .item-actions:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.family-activity-card__cover,
|
||||
.family-activity-card__cover-state {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background-color: #edf4fc;
|
||||
}
|
||||
|
||||
.family-activity-card__cover {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.family-activity-card__cover-state {
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
color: #8da1ba;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.family-activity-card__cover-state .van-icon {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.family-activity-card__cover-state.is-error {
|
||||
color: #c27b75;
|
||||
background-color: #fff3f1;
|
||||
}
|
||||
|
||||
.family-activity-card__body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 12px 38px 14px 14px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.family-activity-card__title {
|
||||
overflow: hidden;
|
||||
color: #303846;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.family-activity-card__time {
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
color: #98a2b2;
|
||||
font-size: 12px;
|
||||
padding: 3px 6px;
|
||||
border-radius: 6px;
|
||||
line-height: 17px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.family-activity-card__meta {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
padding-top: 9px;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
border-top: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.family-activity-card__tag {
|
||||
display: inline-flex;
|
||||
padding: 3px 8px;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.family-activity-card__tag-label {
|
||||
margin-right: 4px;
|
||||
color: #8aa7cf;
|
||||
}
|
||||
|
||||
.family-activity-card__arrow {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 14px;
|
||||
color: #b4bdca;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.family-activity-empty {
|
||||
display: flex;
|
||||
min-height: 260px;
|
||||
padding: 26px 18px 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-activity-empty img {
|
||||
width: 82%;
|
||||
max-width: 280px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.family-activity-empty__title {
|
||||
margin-top: 14px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.family-activity-empty__hint {
|
||||
margin-top: 5px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.family-intro-popup,
|
||||
.family-intro-page {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.family-intro-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.family-intro-scroll {
|
||||
height: calc(100vh - 46px);
|
||||
padding: 12px 12px calc(92px + env(safe-area-inset-bottom));
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-intro-hero {
|
||||
display: flex;
|
||||
min-height: 82px;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
|
||||
box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-intro-hero__icon {
|
||||
display: flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
flex: 0 0 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 11px;
|
||||
color: #2d7eea;
|
||||
background-color: rgba(255, 255, 255, .92);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.family-intro-hero__title {
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.family-intro-hero__subtitle {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.family-intro-card {
|
||||
margin-top: 12px;
|
||||
padding: 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.family-intro-card .content {
|
||||
padding: 0 !important;
|
||||
color: #3f4c5e !important;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.family-intro-card .content div,
|
||||
.family-intro-card .content p,
|
||||
.family-intro-card .content span,
|
||||
.family-intro-card .content li {
|
||||
color: #3f4c5e !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.8 !important;
|
||||
white-space: normal !important;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.family-intro-card .content h1,
|
||||
.family-intro-card .content h2,
|
||||
.family-intro-card .content h3,
|
||||
.family-intro-card .content h4 {
|
||||
margin: 16px 0 9px !important;
|
||||
color: #1f2f43 !important;
|
||||
font-size: 18px !important;
|
||||
line-height: 1.5 !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.family-intro-card .content > :first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.family-intro-card .content p {
|
||||
margin: 0 0 8px !important;
|
||||
}
|
||||
|
||||
.family-intro-card .content ul,
|
||||
.family-intro-card .content ol {
|
||||
margin: 8px 0 !important;
|
||||
padding-left: 22px !important;
|
||||
}
|
||||
|
||||
.family-intro-card .content img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
margin: 8px auto !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.family-intro-card .content table {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.family-intro-empty {
|
||||
display: flex;
|
||||
min-height: 180px;
|
||||
margin-top: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
border-radius: 12px;
|
||||
color: #9aa7b8;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.family-intro-empty .van-icon {
|
||||
color: #83b5f4;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.family-intro-footer {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid #edf1f6;
|
||||
background-color: rgba(255, 255, 255, .96);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-intro-footer .van-button {
|
||||
height: 42px;
|
||||
border: 0;
|
||||
border-radius: 21px;
|
||||
font-size: 15px;
|
||||
background-color: #1989fa;
|
||||
box-shadow: 0 6px 16px rgba(25, 137, 250, .22);
|
||||
}
|
||||
|
||||
.family-intro-footer .van-button--disabled {
|
||||
color: #8b98aa !important;
|
||||
background-color: #eef2f7 !important;
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.family-intro-footer .van-count-down {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app">
|
||||
<van-nav-bar title="亲子活动" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
<div id="app" v-cloak>
|
||||
<div class="family-activity-page">
|
||||
<van-nav-bar title="亲子活动" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
|
||||
<van-sticky offset-top="46px">
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
|
||||
<table-list api="/platform/family/apply/activityPageData"
|
||||
:page_form.sync="pageForm"
|
||||
ref="tableListRef"
|
||||
img="cover"
|
||||
@ready="onReady"
|
||||
>
|
||||
<template #header="{index,row}">
|
||||
<div class="item-header">
|
||||
<div class="item-title">{{ row.activityName }}</div>
|
||||
<div>
|
||||
<van-tag type="primary" v-if="$moment().isBefore($moment(row.activitySignUpStartTime))">
|
||||
即将开始
|
||||
</van-tag>
|
||||
<van-tag type="success" v-if="$moment().isAfter($moment(row.activitySignUpStartTime)) && $moment().isBefore($moment(row.activitySignUpEndTime))">
|
||||
进行中
|
||||
</van-tag>
|
||||
<van-tag class="grey" v-if="$moment().isAfter($moment(row.activitySignUpEndTime))">
|
||||
已结束
|
||||
</van-tag>
|
||||
<div class="family-activity-content">
|
||||
<section class="family-activity-hero">
|
||||
<img class="family-activity-hero__image" src="/assets/mobile/img/activity/hero/family-hero-v3.png" alt="亲子活动插画">
|
||||
<div class="family-activity-hero__copy">
|
||||
<div class="family-activity-hero__title">亲子活动</div>
|
||||
<div class="family-activity-hero__subtitle">温馨陪伴 · 快乐成长</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="family-activity-sticky">
|
||||
<van-search v-model="pageForm.searchKeyword" class="family-activity-search" placeholder="搜索亲子活动"
|
||||
shape="round" clearable @search="doSearch" @clear="doSearch"></van-search>
|
||||
<van-dropdown-menu class="family-activity-filter" :class="{'is-open': filterOpened}" active-color="#1989fa">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false"
|
||||
@change="doSearch" @open="filterOpened = true" @close="filterOpened = false"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<table-list class="family-activity-list" api="/platform/family/apply/activityPageData"
|
||||
:page_form.sync="pageForm" ref="tableListRef" @ready="onReady">
|
||||
<template #empty>
|
||||
<div class="family-activity-empty">
|
||||
<img src="/assets/mobile/img/activity/family-empty.png" alt="亲子活动空状态插画">
|
||||
<div class="family-activity-empty__title">暂无亲子活动</div>
|
||||
<div class="family-activity-empty__hint">当前筛选条件下暂时没有可展示的活动</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #header="{index,row}">
|
||||
<img v-if="hasCover(row) && !imageLoadErrors[row.id]" class="family-activity-card__cover"
|
||||
:src="row.cover" :alt="row.activityName" @error="handleImageError(row)" @click="onView(row)">
|
||||
<div v-else class="family-activity-card__cover-state" :class="{'is-error': hasCover(row)}" @click="onView(row)">
|
||||
<van-icon name="photo-o"></van-icon>
|
||||
<span>{{ hasCover(row) ? '图片加载失败' : '暂无图片' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="面向对象">{{row.activityGroupName}}</table-column>
|
||||
<table-column label="报名时间">
|
||||
{{$moment(row.activitySignUpStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activitySignUpEndTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
<table-column label="活动时间">
|
||||
{{$moment(row.activityStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activityEndTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<template v-if="$moment().isBefore($moment(row.activitySignUpEndTime))">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>查看介绍</span>
|
||||
<div class="family-activity-card__body" @click="onView(row)">
|
||||
<div class="family-activity-card__title">{{ row.activityName }}</div>
|
||||
<div class="family-activity-card__time" v-if="row.activitySignUpStartTime && row.activitySignUpEndTime">
|
||||
报名时间：{{ $moment(row.activitySignUpStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activitySignUpEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="action-btn" @click="onApply(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>去报名</span>
|
||||
<div class="family-activity-card__time" v-if="row.activityStartTime && row.activityEndTime">
|
||||
活动时间：{{ $moment(row.activityStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activityEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
</template>
|
||||
<div class="family-activity-card__meta" v-if="row.activityGroupName || row.trainType">
|
||||
<span class="family-activity-card__tag" v-if="row.activityGroupName"><span class="family-activity-card__tag-label">面向对象</span>{{row.activityGroupName}}</span>
|
||||
<span class="family-activity-card__tag" v-if="row.trainType"><span class="family-activity-card__tag-label">活动类型</span>{{row.trainType}}</span>
|
||||
</div>
|
||||
<van-icon class="family-activity-card__arrow" name="arrow"></van-icon>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-action-sheet :close-on-click-overlay="false" title="详细信息" v-model="infoVisible">
|
||||
|
||||
<div class="info-container">
|
||||
<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>
|
||||
<van-popup class="family-intro-popup" :style="{height: '100%', width: '100%'}" position="right" safe-area-inset-bottom v-model="infoVisible">
|
||||
<div class="family-intro-page">
|
||||
<van-nav-bar title="活动介绍" left-text="返回" left-arrow @click-left="infoVisible = false"></van-nav-bar>
|
||||
<div class="family-intro-scroll">
|
||||
<div class="family-intro-hero">
|
||||
<div class="family-intro-hero__icon"><van-icon name="description"></van-icon></div>
|
||||
<div>
|
||||
<div class="family-intro-hero__title">亲子活动报名须知</div>
|
||||
<div class="family-intro-hero__subtitle">请仔细阅读活动安排与报名要求</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="family-intro-card" v-if="infoRow.introduce">
|
||||
<pdf-preview :content="infoRow.introduce"></pdf-preview>
|
||||
</div>
|
||||
<div v-else class="family-intro-empty">
|
||||
<van-icon name="description"></van-icon>
|
||||
<span>暂无活动介绍</span>
|
||||
</div>
|
||||
</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>
|
||||
<div class="family-intro-footer">
|
||||
<van-button v-if="canApply(infoRow)" @click="onApply(infoRow)" type="primary" block round>进入报名</van-button>
|
||||
<van-button v-else-if="time < 0" @click="onApply(infoRow)" type="primary" block round>
|
||||
距离开始
|
||||
<van-count-down :time="Math.abs(time)" format="DD 天 HH 时 mm 分 ss 秒" @finish="time = 0"></van-count-down>
|
||||
</van-button>
|
||||
<van-button v-else disabled block round>{{ registrationStatusText(infoRow) }}</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
</van-popup>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -136,17 +596,48 @@ layout("/layouts/platform_h5.html"){
|
||||
],
|
||||
infoVisible: false,
|
||||
infoRow: {},
|
||||
imageLoadErrors: {},
|
||||
filterOpened: false,
|
||||
|
||||
id: GetQueryString('id')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hasCover(row) {
|
||||
return !!(row && row.cover && String(row.cover).trim())
|
||||
},
|
||||
handleImageError(row) {
|
||||
this.$set(this.imageLoadErrors, row.id, true)
|
||||
},
|
||||
isRegistrationClosed(row) {
|
||||
return !!(row && row.activitySignUpEndTime && !this.$moment().isBefore(this.$moment(row.activitySignUpEndTime)))
|
||||
},
|
||||
canApply(row) {
|
||||
if(!row || !row.activitySignUpStartTime || !row.activitySignUpEndTime) {
|
||||
return false
|
||||
}
|
||||
const now = Date.now()
|
||||
return now >= this.$moment(row.activitySignUpStartTime).valueOf()
|
||||
&& now <= this.$moment(row.activitySignUpEndTime).valueOf()
|
||||
},
|
||||
registrationStatusText(row) {
|
||||
if(!row || !row.activitySignUpStartTime || !row.activitySignUpEndTime) {
|
||||
return '当前不可报名'
|
||||
}
|
||||
if(Date.now() < this.$moment(row.activitySignUpStartTime).valueOf()) {
|
||||
return '报名未开始'
|
||||
}
|
||||
return '已过报名时间'
|
||||
},
|
||||
onView(row) {
|
||||
this.infoRow = row
|
||||
this.time = this.$moment().diff(this.$moment(row.activitySignUpStartTime), 'milliseconds')
|
||||
this.infoVisible = true
|
||||
},
|
||||
onApply(row) {
|
||||
if(this.isRegistrationClosed(row)) {
|
||||
return
|
||||
}
|
||||
if(this.$moment().isBefore(this.$moment(row.activitySignUpStartTime))) {
|
||||
this.onView(row)
|
||||
return
|
||||
|
||||
@@ -3,8 +3,9 @@ const times = {
|
||||
/*language=HTML*/
|
||||
`
|
||||
<div>
|
||||
<van-action-sheet v-model="visible" title="时间段" cancel-text="取消">
|
||||
<button v-for="(item,index) in row?.courseTimes" type="button" class="van-action-sheet__item">
|
||||
<van-action-sheet class="family-course-times-sheet" :style="{height: '78%'}" :close-on-click-overlay="true" v-model="visible" title="时间段" cancel-text="取消">
|
||||
<div class="family-course-times-list">
|
||||
<button v-for="(item,index) in row?.courseTimes" :key="index" type="button" class="van-action-sheet__item family-course-time-item">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<div>
|
||||
<div class="van-action-sheet__name">
|
||||
@@ -21,6 +22,7 @@ const times = {
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
<van-popup round :safe-area-inset-bottom="true"
|
||||
@@ -84,6 +86,84 @@ const times = {
|
||||
},
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
|
||||
.family-course-times-sheet {
|
||||
overflow: hidden;
|
||||
border-radius: 16px 16px 0 0;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.family-course-times-sheet /deep/ .van-action-sheet__header {
|
||||
height: 48px;
|
||||
color: #1f2f43;
|
||||
background-color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.family-course-times-sheet /deep/ .van-action-sheet__close {
|
||||
top: 13px;
|
||||
color: #b5bdc9;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.family-course-times-list {
|
||||
height: calc(100% - 98px);
|
||||
padding: 10px 12px 0;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-course-times-sheet /deep/ .family-course-time-item {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
padding: 14px;
|
||||
border-radius: 10px;
|
||||
color: #263548;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 6px 18px rgba(55, 85, 126, .07);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-course-times-sheet /deep/ .van-action-sheet__name {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.family-course-times-sheet /deep/ .van-action-sheet__subname {
|
||||
margin-top: 5px;
|
||||
color: #98a2b2;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.family-course-times-sheet /deep/ .sign_button .van-button {
|
||||
min-width: 48px;
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
color: #fff;
|
||||
background-color: #1989fa;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
box-shadow: 0 4px 10px rgba(25, 137, 250, .18);
|
||||
}
|
||||
|
||||
.family-course-times-sheet /deep/ .sign_button .van-button--disabled {
|
||||
color: #8b98aa;
|
||||
background-color: #eef2f7;
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.family-course-times-sheet /deep/ .van-action-sheet__cancel {
|
||||
height: 50px;
|
||||
color: #66758a;
|
||||
background-color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ const applyForm = {
|
||||
/*language=HTML*/
|
||||
`
|
||||
<div>
|
||||
<van-action-sheet :close-on-click-overlay="false" title="报名信息" v-model="visible">
|
||||
<van-action-sheet class="family-course-form-sheet" :style="{height: '78%'}" :close-on-click-overlay="true" 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>
|
||||
@@ -39,16 +39,20 @@ const applyForm = {
|
||||
|
||||
<van-cell-group class="form-section">
|
||||
<template #title>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<div class="family-member-section-title">
|
||||
<div>{{activity.keyWord}}信息</div>
|
||||
<div>
|
||||
<van-tag @click="delFamily" size="large" type="primary" color="#ff3b30">删除{{activity.keyWord}}</van-tag>
|
||||
<van-tag @click="addFamily" size="large" type="primary" color="#1867b0">添加{{activity.keyWord}}</van-tag>
|
||||
<div class="family-member-actions">
|
||||
<button type="button" class="family-member-action family-member-action--delete" :aria-label="'删除' + activity.keyWord" @click="delFamily">
|
||||
<van-icon name="delete-o"></van-icon>
|
||||
</button>
|
||||
<button type="button" class="family-member-action family-member-action--add" :aria-label="'添加' + activity.keyWord" @click="addFamily">
|
||||
<van-icon name="plus"></van-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="formData.mobileColumnsValue && formData.mobileColumnsValue.length > 0" class="mt10">
|
||||
<van-tabs v-model="familyActive" type="card" color="#0e78c5" animated>
|
||||
<van-tabs v-model="familyActive" color="#1989fa" title-active-color="#1989fa" animated>
|
||||
<van-tab v-for="item, index in formData.mobileColumnsValue"
|
||||
:name="index + ''"
|
||||
:title="activity.keyWord + (index + 1)"
|
||||
@@ -328,16 +332,117 @@ const applyForm = {
|
||||
},
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
.family-course-form-sheet {
|
||||
overflow: hidden;
|
||||
border-radius: 16px 16px 0 0;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-action-sheet__header {
|
||||
height: 48px;
|
||||
color: #1f2f43;
|
||||
background-color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-action-sheet__close {
|
||||
top: 13px;
|
||||
color: #b5bdc9;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .form-container {
|
||||
height: calc(100% - 48px);
|
||||
padding: 10px 12px 72px;
|
||||
overflow-y: auto;
|
||||
background-color: #f3f7fd;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .form-section {
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 6px 18px rgba(55, 85, 126, .07);
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-cell-group__title {
|
||||
padding: 12px 14px 8px;
|
||||
color: #263548;
|
||||
background-color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-cell-group__title::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-cell {
|
||||
padding: 11px 14px;
|
||||
color: #263548;
|
||||
background-color: #fff;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-field__label {
|
||||
color: #66758a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-tabs__nav--card {
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
background-color: #eef3f9;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-tabs__nav--card .van-tab {
|
||||
border-right: 0;
|
||||
color: #66758a;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-tabs__nav--card .van-tab--active {
|
||||
color: #1989fa;
|
||||
background-color: #e7f2ff;
|
||||
}
|
||||
|
||||
/deep/ .companionList_empty_text {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
font-size: 14px;
|
||||
color: grey;
|
||||
}
|
||||
/deep/ .button {
|
||||
position: fixed;
|
||||
|
||||
.family-course-form-sheet /deep/ .button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: auto;
|
||||
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid #edf1f6;
|
||||
background-color: rgba(255, 255, 255, .96);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .button .van-button {
|
||||
height: 42px;
|
||||
border: 0;
|
||||
border-radius: 21px;
|
||||
color: #fff;
|
||||
background-color: #1989fa;
|
||||
font-size: 15px;
|
||||
box-shadow: 0 6px 16px rgba(25, 137, 250, .22);
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -2,296 +2,475 @@
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style scoped>
|
||||
.info-title {
|
||||
font-weight: bold;
|
||||
background-color: white;
|
||||
padding: 13px;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
text-align: center !important;
|
||||
}
|
||||
.info-container {
|
||||
|
||||
}
|
||||
.button {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.info-img {
|
||||
display: block;
|
||||
}
|
||||
.van-count-down {
|
||||
color: #fff;
|
||||
}
|
||||
.table-list-container {
|
||||
padding: 0;
|
||||
margin-top: 10px;
|
||||
<style>
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item {
|
||||
.family-mine-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.family-mine-page .van-nav-bar {
|
||||
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 {
|
||||
.family-mine-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #1f2f3d;
|
||||
}
|
||||
|
||||
.family-mine-page .van-nav-bar .van-icon,
|
||||
.family-mine-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.family-mine-content {
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.family-mine-hero {
|
||||
position: relative;
|
||||
height: 134px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
padding-right: 10px;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
background: linear-gradient(115deg, #347eea 0%, #5b9cf4 58%, #cfe3ff 100%);
|
||||
box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
|
||||
}
|
||||
|
||||
.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%;
|
||||
.family-mine-hero__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 67%;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
object-position: right center;
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
|
||||
mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
|
||||
}
|
||||
|
||||
|
||||
.table-list-container .table-list-item .item-meta {
|
||||
.family-mine-hero__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
padding: 4px 0;
|
||||
height: 100%;
|
||||
padding-left: 16px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
.family-mine-hero__title {
|
||||
font-size: 25px;
|
||||
line-height: 34px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .meta-item i {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
.family-mine-hero__subtitle {
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: .5px;
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .item-content {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
.family-mine-sticky {
|
||||
padding: 10px 0 1px;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.van-sticky--fixed .family-mine-sticky {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-mine-search {
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
line-height: 1.5;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .item-footer {
|
||||
.family-mine-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.family-mine-search .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.family-mine-filter {
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
transition: border-radius .18s ease;
|
||||
}
|
||||
|
||||
.family-mine-filter.is-open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.family-mine-filter .van-dropdown-menu__bar {
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.family-mine-filter .van-dropdown-menu__title {
|
||||
width: auto;
|
||||
max-width: calc(100% - 24px);
|
||||
padding: 0 12px 0 0;
|
||||
color: #66758a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.family-mine-filter .van-dropdown-menu__title::after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.family-mine-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-mine-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 12px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px dashed #eaecef;
|
||||
color: #909399;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.family-mine-card {
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.family-mine-card__cover,
|
||||
.family-mine-card__cover-state {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #edf4fc;
|
||||
}
|
||||
|
||||
.family-mine-card__cover {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.family-mine-card__cover-state {
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
color: #8da1ba;
|
||||
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;
|
||||
.family-mine-card__cover-state .van-icon {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.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;
|
||||
.family-mine-card__cover-state.is-error {
|
||||
color: #c27b75;
|
||||
background-color: #fff3f1;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .action-btn i {
|
||||
margin-right: 6px;
|
||||
font-size: 16px;
|
||||
.family-mine-card__body {
|
||||
padding: 12px 14px 14px;
|
||||
}
|
||||
|
||||
.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;
|
||||
.family-mine-card__title {
|
||||
overflow: hidden;
|
||||
color: #303846;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #555;
|
||||
.family-mine-card__time {
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
color: #98a2b2;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.family-mine-card__meta {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
padding-top: 9px;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
border-top: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.family-mine-card__tag {
|
||||
display: inline-flex;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.family-mine-card__tag-label {
|
||||
margin-right: 4px;
|
||||
color: #8aa7cf;
|
||||
}
|
||||
|
||||
.family-mine-card__actions {
|
||||
display: flex;
|
||||
padding: 12px 14px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
border-top: 1px solid #edf1f6;
|
||||
background-color: #f8fbff;
|
||||
}
|
||||
|
||||
.family-mine-card__action {
|
||||
display: inline-flex;
|
||||
min-width: 82px;
|
||||
height: 32px;
|
||||
padding: 0 14px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 13px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-mine-card__action .van-icon {
|
||||
margin-right: 6px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.family-mine-card__action.is-primary {
|
||||
color: #fff;
|
||||
background-color: #1989fa;
|
||||
box-shadow: 0 5px 12px rgba(25, 137, 250, .18);
|
||||
}
|
||||
|
||||
.family-mine-empty {
|
||||
display: flex;
|
||||
min-height: 260px;
|
||||
padding: 26px 18px 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.family-mine-empty img {
|
||||
width: 82%;
|
||||
max-width: 280px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.family-mine-empty__title {
|
||||
margin-top: 14px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.family-mine-empty__hint {
|
||||
margin-top: 5px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.family-mine-intro-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.family-mine-intro-scroll {
|
||||
height: calc(100vh - 46px);
|
||||
padding: 12px;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-mine-intro-hero {
|
||||
display: flex;
|
||||
min-height: 82px;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
|
||||
box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-mine-intro-hero__icon {
|
||||
display: flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 44px;
|
||||
border-radius: 11px;
|
||||
color: #2d7eea;
|
||||
background-color: rgba(255, 255, 255, .92);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.family-mine-intro-hero__title {
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.family-mine-intro-hero__subtitle {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.family-mine-intro-card {
|
||||
margin-top: 12px;
|
||||
padding: 18px 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
color: #3f4c5e;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
font-size: 14px;
|
||||
flex-grow: 1; /* 动态占据剩余部分 */
|
||||
white-space: nowrap; /* 防止换行 */
|
||||
overflow: hidden; /* 隐藏溢出的部分 */
|
||||
text-overflow: ellipsis; /* 省略号 */
|
||||
line-height: 1.8;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.family-mine-intro-card img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app">
|
||||
<van-nav-bar title="亲子活动-我的报名" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
<div id="app" v-cloak>
|
||||
<div class="family-mine-page">
|
||||
<van-nav-bar title="亲子活动-我的报名" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
|
||||
<van-sticky offset-top="46px">
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
|
||||
<table-list api="/platform/family/apply/activityPageData"
|
||||
:page_form.sync="pageForm"
|
||||
ref="tableListRef"
|
||||
title="activityName"
|
||||
img="cover"
|
||||
@ready="onReady"
|
||||
>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="面向对象">{{row.activityGroupName}}</table-column>
|
||||
<table-column label="报名时间">
|
||||
{{$moment(row.activitySignUpStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activitySignUpEndTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
<table-column label="活动时间">
|
||||
{{$moment(row.activityStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activityEndTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
|
||||
<van-action-sheet :close-on-click-overlay="false" title="活动详细信息" v-model="infoVisible" cancel-text="取消">
|
||||
|
||||
<div class="info-container">
|
||||
<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-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 class="family-mine-content">
|
||||
<section class="family-mine-hero">
|
||||
<img class="family-mine-hero__image" src="/assets/mobile/img/activity/hero/family-hero-v3.png" alt="亲子活动插画">
|
||||
<div class="family-mine-hero__copy">
|
||||
<div class="family-mine-hero__title">我的报名</div>
|
||||
<div class="family-mine-hero__subtitle">亲子活动 · 报名记录</div>
|
||||
</div>
|
||||
<div style="display: flex;column-gap: 10px">
|
||||
<div class="table-column">
|
||||
<div class="label">校区：</div>
|
||||
<div class="value">{{ row.campus }}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="family-mine-sticky">
|
||||
<van-search v-model="pageForm.searchKeyword" class="family-mine-search" placeholder="搜索已报名活动" shape="round" clearable @search="doSearch" @clear="doSearch"></van-search>
|
||||
<van-dropdown-menu class="family-mine-filter" :class="{'is-open': filterOpened}" active-color="#1989fa">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</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 : '暂无' }}
|
||||
</van-sticky>
|
||||
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list v-model="loading" :finished="finished" :immediate-check="false" @load="onLoad">
|
||||
<div class="family-mine-list">
|
||||
<div v-for="row in tableData" :key="row.id" class="family-mine-card">
|
||||
<img v-if="hasCover(row) && !imageLoadErrors[row.id]" class="family-mine-card__cover" :src="row.cover" :alt="row.activityName" @error="handleImageError(row)">
|
||||
<div v-else class="family-mine-card__cover-state" :class="{'is-error': hasCover(row)}">
|
||||
<van-icon name="photo-o"></van-icon>
|
||||
<span>{{ hasCover(row) ? '图片加载失败' : '暂无图片' }}</span>
|
||||
</div>
|
||||
<div class="family-mine-card__body">
|
||||
<div class="family-mine-card__title">{{ row.activityName }}</div>
|
||||
<div class="family-mine-card__time" v-if="row.activitySignUpStartTime && row.activitySignUpEndTime">
|
||||
报名时间：{{ $moment(row.activitySignUpStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activitySignUpEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="family-mine-card__time" v-if="row.activityStartTime && row.activityEndTime">
|
||||
活动时间：{{ $moment(row.activityStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activityEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="family-mine-card__meta" v-if="row.activityGroupName || row.trainType">
|
||||
<span class="family-mine-card__tag" v-if="row.activityGroupName"><span class="family-mine-card__tag-label">面向对象</span>{{ row.activityGroupName }}</span>
|
||||
<span class="family-mine-card__tag" v-if="row.trainType"><span class="family-mine-card__tag-label">活动类型</span>{{ row.trainType }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="family-mine-card__actions">
|
||||
<button type="button" class="family-mine-card__action" @click="onView(row)"><van-icon name="eye-o"></van-icon>查看介绍</button>
|
||||
<button type="button" class="family-mine-card__action is-primary" @click="onApply(row)"><van-icon name="edit"></van-icon>查看报名</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<div v-if="!loading && tableData.length === 0" class="family-mine-empty">
|
||||
<img src="/assets/mobile/img/activity/family-empty.png" alt="亲子活动报名空状态插画">
|
||||
<div class="family-mine-empty__title">暂无报名记录</div>
|
||||
<div class="family-mine-empty__hint">当前筛选条件下暂时没有已报名活动</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-actions"></div>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
</div>
|
||||
|
||||
<van-popup :style="{height: '100%', width: '100%'}" position="right" v-model="infoVisible">
|
||||
<div class="family-mine-intro-page">
|
||||
<van-nav-bar title="活动介绍" left-text="返回" left-arrow @click-left="infoVisible = false"></van-nav-bar>
|
||||
<div class="family-mine-intro-scroll">
|
||||
<div class="family-mine-intro-hero">
|
||||
<div class="family-mine-intro-hero__icon"><van-icon name="description"></van-icon></div>
|
||||
<div>
|
||||
<div class="family-mine-intro-hero__title">亲子活动报名须知</div>
|
||||
<div class="family-mine-intro-hero__subtitle">请仔细阅读活动安排与报名要求</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="infoRow.introduce" class="family-mine-intro-card" v-html="infoRow.introduce"></div>
|
||||
<div v-else class="family-mine-intro-card">暂无活动介绍</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
components: {
|
||||
"pdf-preview": httpVueLoader("/components/plugins/sysFilePreview/PdfIndex.vue?v=" + new Date().getTime())
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
refreshing: false,
|
||||
imageLoadErrors: {},
|
||||
filterOpened: false,
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
@@ -308,12 +487,15 @@ layout("/layouts/platform_h5.html"){
|
||||
],
|
||||
infoVisible: false,
|
||||
infoRow: {},
|
||||
|
||||
mineCourses: [],
|
||||
courseVisible: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hasCover(row) {
|
||||
return !!(row && row.cover && String(row.cover).trim())
|
||||
},
|
||||
handleImageError(row) {
|
||||
this.$set(this.imageLoadErrors, row.id, true)
|
||||
},
|
||||
onView(row) {
|
||||
this.infoRow = row
|
||||
this.infoVisible = true
|
||||
@@ -321,24 +503,45 @@ 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
|
||||
})
|
||||
onLoad() {
|
||||
if(!this.finished) {
|
||||
this.loadActivities(false)
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.doSearch()
|
||||
onRefresh() {
|
||||
this.loadActivities(true)
|
||||
},
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
loadActivities(reset) {
|
||||
if(reset) {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$refs.tableListRef.doSearch()
|
||||
this.tableData = []
|
||||
this.finished = false
|
||||
this.imageLoadErrors = {}
|
||||
}
|
||||
this.loading = true
|
||||
this.$axios.post('/platform/family/apply/activityPageData', this.pageForm).then((res) => {
|
||||
if(res.code === 0) {
|
||||
const list = res.data && res.data.list ? res.data.list : []
|
||||
this.tableData = this.pageForm.pageNumber === 1 ? list : this.tableData.concat(list)
|
||||
this.pageForm.totalCount = res.data && res.data.totalCount ? res.data.totalCount : 0
|
||||
this.finished = this.tableData.length >= this.pageForm.totalCount
|
||||
if(!this.finished) {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
this.refreshing = false
|
||||
})
|
||||
},
|
||||
doSearch() {
|
||||
this.loadActivities(true)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadActivities(true)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@@ -2,53 +2,682 @@
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
.van-tag--default {
|
||||
background-color: #f1f1f1 !important;
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.sports-activity-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.sports-activity-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.sports-activity-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sports-activity-page .van-nav-bar .van-icon,
|
||||
.sports-activity-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.sports-activity-content {
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.sports-activity-hero {
|
||||
position: relative;
|
||||
height: 134px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
background-color: #247fe8;
|
||||
box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
|
||||
}
|
||||
|
||||
.sports-activity-hero__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.sports-activity-hero__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 64%;
|
||||
height: 100%;
|
||||
padding-left: 16px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(90deg, rgba(22, 112, 232, .98) 0%, rgba(22, 112, 232, .88) 52%, rgba(22, 112, 232, 0) 100%);
|
||||
}
|
||||
|
||||
.sports-activity-hero__title {
|
||||
font-size: 25px;
|
||||
line-height: 34px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0 2px 6px rgba(17, 86, 182, .18);
|
||||
}
|
||||
|
||||
.sports-activity-hero__subtitle {
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: .5px;
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.sports-activity-sticky {
|
||||
padding: 10px 0 1px;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.van-sticky--fixed .sports-activity-sticky {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sports-activity-search {
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.sports-activity-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.sports-activity-search .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sports-activity-search .van-field__control::placeholder {
|
||||
color: #a7b0bf;
|
||||
}
|
||||
|
||||
.sports-activity-filter {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
transition: border-radius .18s ease;
|
||||
}
|
||||
|
||||
.sports-activity-filter.is-open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.sports-activity-filter .van-dropdown-menu__bar {
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.sports-activity-filter .van-dropdown-menu__title {
|
||||
color: #66758a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sports-activity-filter .van-dropdown-menu__title--active,
|
||||
.sports-activity-filter .van-dropdown-item__option--active,
|
||||
.sports-activity-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.sports-activity-filter .van-dropdown-menu__title--down::after {
|
||||
border-color: transparent transparent #1989fa #1989fa;
|
||||
}
|
||||
|
||||
.sports-activity-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
}
|
||||
|
||||
.sports-activity-filter .van-dropdown-item__option {
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
color: #46566c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sports-activity-filter .van-cell::after {
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.sports-activity-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sports-activity-card {
|
||||
display: flex;
|
||||
min-height: 74px;
|
||||
padding: 14px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.sports-activity-card {
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sports-activity-card__icon {
|
||||
display: flex;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
margin-right: 12px;
|
||||
flex: 0 0 38px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 9px;
|
||||
color: #4d91ef;
|
||||
background-color: #edf4ff;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.sports-activity-card__body {
|
||||
min-width: 0;
|
||||
padding: 12px 38px 14px 14px;
|
||||
box-sizing: border-box;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.sports-activity-card__cover {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
margin: 0;
|
||||
flex: 0 0 150px;
|
||||
object-fit: cover;
|
||||
border-radius: 0;
|
||||
background-color: #edf4ff;
|
||||
}
|
||||
|
||||
.sports-activity-card__cover-state {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
flex: 0 0 150px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
color: #8da1ba;
|
||||
background-color: #edf4fc;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sports-activity-card__cover-state .van-icon {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.sports-activity-card__cover-state.is-error {
|
||||
color: #c27b75;
|
||||
background-color: #fff3f1;
|
||||
}
|
||||
|
||||
.sports-activity-card > .sports-activity-card__icon {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
margin: 0;
|
||||
flex: 0 0 150px;
|
||||
border-radius: 0;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.sports-activity-card__title {
|
||||
color: #303846;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.sports-activity-card__title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sports-activity-card__time {
|
||||
margin-top: 4px;
|
||||
color: #98a2b2;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sports-activity-card__meta {
|
||||
margin-top: 10px;
|
||||
padding-top: 9px;
|
||||
border-top: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.sports-activity-card__address {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
color: #69788d;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.sports-activity-card__address .van-icon {
|
||||
margin: 2px 5px 0 0;
|
||||
flex: none;
|
||||
color: #6c9ff8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sports-activity-card__address span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sports-activity-card__tags {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.sports-activity-card__tag {
|
||||
display: inline-flex;
|
||||
padding: 3px 8px;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.sports-activity-card__tag-label {
|
||||
margin-right: 4px;
|
||||
color: #8aa7cf;
|
||||
}
|
||||
|
||||
.sports-activity-card__arrow {
|
||||
position: absolute;
|
||||
top: 164px;
|
||||
right: 14px;
|
||||
color: #b4bdca;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sports-activity-empty-illustration {
|
||||
display: flex;
|
||||
min-height: 250px;
|
||||
padding: 24px 18px 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sports-activity-empty-illustration img {
|
||||
display: block;
|
||||
width: 82%;
|
||||
max-width: 280px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.sports-activity-empty-illustration__title {
|
||||
margin-top: -8px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sports-activity-empty-illustration__hint {
|
||||
margin-top: 6px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.activity-notification-popup,
|
||||
.activity-notification-page {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.activity-notification-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.activity-notification-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.activity-notification-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.activity-notification-page .van-nav-bar .van-icon,
|
||||
.activity-notification-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.activity-notification-scroll {
|
||||
height: calc(100vh - 46px);
|
||||
padding: 12px 12px calc(92px + env(safe-area-inset-bottom));
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.activity-notification-hero {
|
||||
display: flex;
|
||||
min-height: 82px;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
|
||||
box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
|
||||
}
|
||||
|
||||
.activity-notification-hero__icon {
|
||||
display: flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
flex: 0 0 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 11px;
|
||||
color: #2d7eea;
|
||||
background-color: rgba(255, 255, 255, .92);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.activity-notification-hero__title {
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.activity-notification-hero__subtitle {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.activity-notification-card {
|
||||
margin-top: 12px;
|
||||
padding: 18px 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.activity-notification-content,
|
||||
.activity-notification-content div,
|
||||
.activity-notification-content p,
|
||||
.activity-notification-content span,
|
||||
.activity-notification-content li {
|
||||
color: #3f4c5e !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.8 !important;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.activity-notification-content h1,
|
||||
.activity-notification-content h2,
|
||||
.activity-notification-content h3 {
|
||||
margin: 16px 0 10px !important;
|
||||
color: #1f2f43 !important;
|
||||
font-size: 19px !important;
|
||||
line-height: 1.5 !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.activity-notification-content > :first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.activity-notification-content p {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.activity-notification-content img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.activity-notification-content table {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.activity-notification-empty {
|
||||
display: flex;
|
||||
min-height: 180px;
|
||||
margin-top: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
border-radius: 12px;
|
||||
color: #9aa7b8;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.activity-notification-empty .van-icon {
|
||||
color: #83b5f4;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.activity-notification-footer {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid #edf1f6;
|
||||
background-color: rgba(255, 255, 255, .96);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.activity-notification-footer .van-button {
|
||||
height: 42px;
|
||||
border: 0;
|
||||
font-size: 15px;
|
||||
background-color: #1989fa;
|
||||
box-shadow: 0 6px 16px rgba(25, 137, 250, .22);
|
||||
}
|
||||
|
||||
.activity-notification-footer .van-button.is-disabled,
|
||||
.activity-notification-footer .van-button--disabled {
|
||||
color: #8b98aa !important;
|
||||
background-color: #eef2f7 !important;
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar title="活动列表" @click-left="()=>this.$pjaxReplace('/platform/home')" left-arrow left-text="返回" placeholder fixed></van-nav-bar>
|
||||
<van-sticky offset-top="46px">
|
||||
<van-dropdown-menu>
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item :options="stateList" @change="doSearch"
|
||||
v-model="pageForm.isActivity"></van-dropdown-item>
|
||||
<van-dropdown-item :options="applyStatusOptions" @change="doSearch"
|
||||
v-model="pageForm.applyStatus"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
<div class="sports-activity-page">
|
||||
<van-nav-bar
|
||||
title="体育活动"
|
||||
left-arrow
|
||||
left-text="返回"
|
||||
fixed
|
||||
placeholder
|
||||
@click-left="goBack"
|
||||
></van-nav-bar>
|
||||
|
||||
<table-list api="/platform/activity/apply/h5/activityData"
|
||||
:page_form.sync="pageForm"
|
||||
ref="tableListRef"
|
||||
title="NAME"
|
||||
img="image"
|
||||
@ready="onReady"
|
||||
>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="报名时间">
|
||||
{{$moment(row.applyStartTime).format('MM/DD HH:mm') + '~' + $moment(row.applyEndTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
<table-column label="活动时间">
|
||||
{{$moment(row.startTime).format('MM/DD HH:mm') + '~' + $moment(row.endTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<template v-if="$moment().isBefore($moment(row.applyEndTime))">
|
||||
<div class="action-btn" @click="openView(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>去报名</span>
|
||||
<div class="sports-activity-content">
|
||||
<section class="sports-activity-hero">
|
||||
<img
|
||||
class="sports-activity-hero__image"
|
||||
src="/assets/mobile/img/activity/hero/sports-hero-v2.png"
|
||||
alt="体育活动插画"
|
||||
>
|
||||
<div class="sports-activity-hero__copy">
|
||||
<div class="sports-activity-hero__title">体育活动</div>
|
||||
<div class="sports-activity-hero__subtitle">强健体魄 · 运动同行</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</table-list>
|
||||
</section>
|
||||
|
||||
<activity_event_notification
|
||||
:event_notification="viewData.eventNotification"
|
||||
:id="viewData.id"
|
||||
ref="eventNotification"
|
||||
></activity_event_notification>
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="sports-activity-sticky">
|
||||
<van-search
|
||||
v-model="searchKeyword"
|
||||
class="sports-activity-search"
|
||||
placeholder="搜索体育活动"
|
||||
shape="round"
|
||||
clearable
|
||||
@search="doSearch"
|
||||
@clear="doSearch"
|
||||
></van-search>
|
||||
|
||||
<van-dropdown-menu
|
||||
class="sports-activity-filter"
|
||||
:class="{'is-open': filterOpened}"
|
||||
active-color="#1989fa"
|
||||
>
|
||||
<year-van-dropdown-item
|
||||
:num="5"
|
||||
v-model="pageForm.year"
|
||||
@change="doSearch"
|
||||
@open="filterOpened = true"
|
||||
@close="filterOpened = false"
|
||||
></year-van-dropdown-item>
|
||||
<van-dropdown-item
|
||||
v-model="pageForm.isActivity"
|
||||
:options="stateList"
|
||||
@change="doSearch"
|
||||
@open="filterOpened = true"
|
||||
@close="filterOpened = false"
|
||||
></van-dropdown-item>
|
||||
<van-dropdown-item
|
||||
v-model="pageForm.applyStatus"
|
||||
:options="applyStatusOptions"
|
||||
@change="doSearch"
|
||||
@open="filterOpened = true"
|
||||
@close="filterOpened = false"
|
||||
></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<div class="sports-activity-list">
|
||||
<div
|
||||
v-for="row in activityList"
|
||||
:key="row.id"
|
||||
class="sports-activity-card"
|
||||
@click="openView(row)"
|
||||
>
|
||||
<img
|
||||
v-if="hasActivityImage(row) && !imageLoadErrors[row.id]"
|
||||
class="sports-activity-card__cover"
|
||||
:src="row.image"
|
||||
:alt="row.NAME || row.name"
|
||||
@error="handleImageError(row)"
|
||||
>
|
||||
<div
|
||||
v-else
|
||||
class="sports-activity-card__cover-state"
|
||||
:class="{'is-error': hasActivityImage(row)}"
|
||||
>
|
||||
<van-icon name="photo-o"></van-icon>
|
||||
<span>{{ hasActivityImage(row) ? '图片加载失败' : '暂无图片' }}</span>
|
||||
</div>
|
||||
<div class="sports-activity-card__body">
|
||||
<div class="sports-activity-card__title">{{ row.NAME || row.name }}</div>
|
||||
<div class="sports-activity-card__time" v-if="row.applyStartTime && row.applyEndTime">
|
||||
报名时间：{{ $moment(row.applyStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.applyEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="sports-activity-card__time" v-if="row.startTime && row.endTime">
|
||||
活动时间：{{ $moment(row.startTime).format('MM/DD HH:mm') }}~{{ $moment(row.endTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="sports-activity-card__meta" v-if="row.address || formatGameStyle(row.gameStyle) || formatApplyType(row.applyType) || formatApplyWay(row.applyWay)">
|
||||
<div class="sports-activity-card__address" v-if="row.address">
|
||||
<van-icon name="location-o"></van-icon>
|
||||
<span>{{ row.address }}</span>
|
||||
</div>
|
||||
<div class="sports-activity-card__tags" v-if="formatGameStyle(row.gameStyle) || formatApplyType(row.applyType) || formatApplyWay(row.applyWay)">
|
||||
<span class="sports-activity-card__tag" v-if="formatGameStyle(row.gameStyle)">
|
||||
<span class="sports-activity-card__tag-label">竞赛方式</span>{{ formatGameStyle(row.gameStyle) }}
|
||||
</span>
|
||||
<span class="sports-activity-card__tag" v-if="formatApplyType(row.applyType)">
|
||||
<span class="sports-activity-card__tag-label">活动类型</span>{{ formatApplyType(row.applyType) }}
|
||||
</span>
|
||||
<span class="sports-activity-card__tag" v-if="formatApplyWay(row.applyWay)">
|
||||
<span class="sports-activity-card__tag-label">报名方式</span>{{ formatApplyWay(row.applyWay) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<van-icon class="sports-activity-card__arrow" name="arrow"></van-icon>
|
||||
</div>
|
||||
|
||||
<div v-if="activityList.length === 0" class="sports-activity-empty-illustration">
|
||||
<img src="/assets/mobile/img/activity/sports-empty.png" alt="体育活动空状态插画">
|
||||
<div class="sports-activity-empty-illustration__title">{{ emptyText }}</div>
|
||||
<div class="sports-activity-empty-illustration__hint">{{ emptyHint }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<activity_event_notification
|
||||
:event_notification="viewData.eventNotification"
|
||||
:id="viewData.id"
|
||||
:apply_start_time="viewData.applyStartTime"
|
||||
:apply_end_time="viewData.applyEndTime"
|
||||
ref="eventNotification"
|
||||
></activity_event_notification>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
@@ -57,52 +686,106 @@ layout("/layouts/platform_h5.html"){
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
finished: false,
|
||||
loading: false,
|
||||
activityList: [],
|
||||
searchKeyword: "",
|
||||
imageLoadErrors: {},
|
||||
filterOpened: false,
|
||||
pageForm: {
|
||||
isActivity: 2,
|
||||
applyStatus: 1,
|
||||
year: new Date().getFullYear(),
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
totalCount: 0
|
||||
year: new Date().getFullYear()
|
||||
},
|
||||
yearList: [],
|
||||
stateList: [
|
||||
{value: 1, text: "全部活动"},
|
||||
{value: 2, text: "报名中"},
|
||||
{value: 3, text: "报名已结束"}
|
||||
],
|
||||
applyStatusOptions: [
|
||||
{value: 1, text: "未报名"},
|
||||
{value: 2, text: "已报名"}
|
||||
],
|
||||
stateList: [
|
||||
{value: 1, text: "全部"},
|
||||
{value: 2, text: "报名中"},
|
||||
{value: 3, text: "报名已结束"}
|
||||
],
|
||||
subLoading: false,
|
||||
viewShow: false,
|
||||
viewData: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
emptyText() {
|
||||
if (this.searchKeyword.trim()) return "未找到相关体育活动"
|
||||
if (this.pageForm.isActivity === 3) return "暂无已结束的体育活动"
|
||||
if (this.pageForm.isActivity === 2) return "暂无报名中的体育活动"
|
||||
return "暂无体育活动"
|
||||
},
|
||||
emptyHint() {
|
||||
return this.searchKeyword.trim() ? "请尝试更换搜索关键词" : "当前筛选条件下暂时没有活动"
|
||||
}
|
||||
},
|
||||
components: {
|
||||
activity_event_notification: ACTIVITY_EVENT_NOTIFICATION
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
this.$pjaxReplace("/platform/home")
|
||||
},
|
||||
openView(row) {
|
||||
this.viewData = row
|
||||
this.$refs.eventNotification.viewShow = true
|
||||
},
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$refs.tableListRef.doSearch()
|
||||
this.$refs.eventNotification.viewShow = true
|
||||
})
|
||||
},
|
||||
onReady() {
|
||||
this.doSearch()
|
||||
doSearch() {
|
||||
this.loadActivities()
|
||||
},
|
||||
hasActivityImage(row) {
|
||||
return !!(row && row.image && String(row.image).trim())
|
||||
},
|
||||
handleImageError(row) {
|
||||
this.$set(this.imageLoadErrors, row.id, true)
|
||||
},
|
||||
formatGameStyle(value) {
|
||||
return {
|
||||
1: "竞赛类",
|
||||
2: "非竞赛类"
|
||||
}[Number(value)] || ""
|
||||
},
|
||||
formatApplyType(value) {
|
||||
return {
|
||||
1: "单一团体赛",
|
||||
2: "综合赛",
|
||||
3: "个人赛"
|
||||
}[Number(value)] || ""
|
||||
},
|
||||
formatApplyWay(value) {
|
||||
if (value === null || value === undefined || value === "") return ""
|
||||
let values = value
|
||||
if (typeof values === "string") {
|
||||
try {
|
||||
values = JSON.parse(values)
|
||||
} catch (e) {
|
||||
values = values.split(",")
|
||||
}
|
||||
}
|
||||
if (!Array.isArray(values)) values = [values]
|
||||
const labels = {
|
||||
1: "个人报名",
|
||||
2: "分工会报名",
|
||||
3: "小程序报名"
|
||||
}
|
||||
return values.map(item => labels[Number(item)]).filter(Boolean).join("、")
|
||||
},
|
||||
loadActivities() {
|
||||
this.activityList = []
|
||||
this.imageLoadErrors = {}
|
||||
const queryForm = Object.assign({}, this.pageForm, {
|
||||
searchKeyword: this.searchKeyword.trim()
|
||||
})
|
||||
this.$axios.post("/platform/activity/apply/h5/activityData", queryForm).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.activityList = res.data && res.data.list ? res.data.list : []
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadActivities()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,8 +1,567 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.sports-event-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.sports-event-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.sports-event-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sports-event-page .van-nav-bar .van-icon,
|
||||
.sports-event-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.sports-event-summary {
|
||||
display: flex;
|
||||
min-height: 82px;
|
||||
margin: 12px 12px 0;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
|
||||
box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
|
||||
}
|
||||
|
||||
.sports-event-summary__icon {
|
||||
display: flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
overflow: hidden;
|
||||
flex: 0 0 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 11px;
|
||||
color: #2d7eea;
|
||||
background-color: rgba(255, 255, 255, .92);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.sports-event-summary__body {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sports-event-summary__title {
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sports-event-summary__subtitle {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.sports-event-sticky {
|
||||
padding: 10px 0 8px;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.sports-event-search {
|
||||
margin: 0 12px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sports-event-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 13px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(55, 85, 126, .07);
|
||||
}
|
||||
|
||||
.sports-event-search .van-field__control {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sports-event-list-head {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin: 16px 0 0;
|
||||
padding: 0 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sports-event-list-head__title {
|
||||
color: #263548;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sports-event-list-head__count {
|
||||
color: #8d9aad;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.sports-event-list-head__tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sports-event-view-toggle {
|
||||
display: inline-flex;
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
color: #397de0;
|
||||
background-color: #eaf3ff;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.sports-event-view-toggle i {
|
||||
margin-right: 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sports-event-page .sports-event-card-list {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card {
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.sports-event-page .table-card > .van-image,
|
||||
.sports-event-page .table-card > .van-image img {
|
||||
display: block;
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .van-cell {
|
||||
padding: 9px 16px;
|
||||
color: #566579;
|
||||
font-size: 13px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .van-cell:first-of-type {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .van-cell::after {
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
border-color: #edf1f6;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .van-cell__title {
|
||||
color: #66758a;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .van-cell__value,
|
||||
.sports-event-page .table-card .van-cell__right-icon {
|
||||
color: #263548;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .font-size3 {
|
||||
color: #23344a;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .van-tag {
|
||||
padding: 3px 7px;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .sports-event-status-tag.is-pending {
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .sports-event-status-tag.is-success {
|
||||
color: #35a86b;
|
||||
background-color: #eaf8f1;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .sports-event-status-tag.is-rejected {
|
||||
color: #df5b59;
|
||||
background-color: #fff1f0;
|
||||
}
|
||||
|
||||
.sports-event-card__body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.sports-event-card__title-row {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sports-event-card__title {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
color: #23344a;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sports-event-card__status {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sports-event-card__activity {
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
align-items: center;
|
||||
color: #78879a;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.sports-event-card__activity .van-icon {
|
||||
margin-right: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sports-event-card__tags,
|
||||
.sports-event-card__config {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.sports-event-card__tag,
|
||||
.sports-event-card__config-tag {
|
||||
display: inline-flex;
|
||||
min-height: 24px;
|
||||
padding: 3px 8px;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sports-event-card__tag-label {
|
||||
margin-right: 4px;
|
||||
color: #7f9fc9;
|
||||
}
|
||||
|
||||
.sports-event-card__stats {
|
||||
display: grid;
|
||||
margin-top: 12px;
|
||||
padding: 12px 0;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
border-top: 1px solid #edf1f6;
|
||||
border-bottom: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.sports-event-card__stat {
|
||||
min-width: 0;
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sports-event-card__stat:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.sports-event-card__stat:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.sports-event-card__stat + .sports-event-card__stat {
|
||||
border-left: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.sports-event-card__stat-label {
|
||||
color: #7b899b;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.sports-event-card__stat-value {
|
||||
margin-top: 3px;
|
||||
overflow: hidden;
|
||||
color: #33445a;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sports-event-card__config-tag {
|
||||
color: #66758a;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.sports-event-card__extra {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.sports-event-card__extra-row {
|
||||
display: flex;
|
||||
padding: 4px 0;
|
||||
align-items: flex-start;
|
||||
color: #66758a;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.sports-event-card__extra-row .van-icon {
|
||||
margin: 2px 6px 0 0;
|
||||
flex: 0 0 auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sports-event-card__extra-label {
|
||||
margin-right: 8px;
|
||||
flex: 0 0 auto;
|
||||
color: #7b899b;
|
||||
}
|
||||
|
||||
.sports-event-card__extra-value {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
color: #33445a;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .table-card-footer {
|
||||
min-height: 56px;
|
||||
margin-top: 4px;
|
||||
padding: 12px 16px;
|
||||
align-items: center;
|
||||
border-top: 1px solid #edf1f6;
|
||||
background-color: #f8fbff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .table-card-footer::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sports-event-card__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.sports-event-card__footer > div {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .table-card-footer .van-cell__value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card-footer .van-button {
|
||||
min-width: 78px;
|
||||
height: 32px;
|
||||
padding: 0 14px;
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card-footer .van-button i {
|
||||
margin-right: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card-footer .sports-event-apply-button {
|
||||
width: 108px;
|
||||
min-width: 108px;
|
||||
height: 32px;
|
||||
color: #fff !important;
|
||||
border-color: #1989fa !important;
|
||||
background-color: #1989fa !important;
|
||||
box-shadow: 0 5px 12px rgba(25, 137, 250, .18);
|
||||
}
|
||||
|
||||
.sports-event-page .table-card-footer .sports-event-cancel-button {
|
||||
width: 108px;
|
||||
min-width: 108px;
|
||||
height: 32px;
|
||||
color: #fff !important;
|
||||
border-color: #e84d4f !important;
|
||||
background-color: #e84d4f !important;
|
||||
box-shadow: 0 5px 12px rgba(232, 77, 79, .16);
|
||||
}
|
||||
|
||||
.sports-event-page .table-card-footer .van-button__content {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sports-event-compact-list {
|
||||
margin: 0 12px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.sports-event-compact-item {
|
||||
display: flex;
|
||||
min-height: 68px;
|
||||
padding: 12px 14px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #edf1f6;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.sports-event-compact-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.sports-event-compact-item__name {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
color: #23344a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sports-event-compact-item__action {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.sports-event-page .sports-event-compact-list .sports-event-compact-button.van-button {
|
||||
min-width: 0;
|
||||
height: 28px !important;
|
||||
padding: 0 10px !important;
|
||||
border: 0 !important;
|
||||
border-radius: 14px;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.sports-event-compact-button i {
|
||||
margin-right: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sports-event-page .sports-event-compact-list .sports-event-compact-button--apply.van-button {
|
||||
color: #397de0 !important;
|
||||
background: #edf5ff !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.sports-event-page .sports-event-compact-list .sports-event-compact-button--cancel.van-button {
|
||||
color: #df5b59 !important;
|
||||
background: #fff1f0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.sports-event-compact-button .van-button__content {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sports-event-page .van-list__finished-text,
|
||||
.sports-event-page .van-list__loading {
|
||||
color: #9aa7b8;
|
||||
font-size: 13px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.sports-event-refresh {
|
||||
min-height: calc(100vh - 226px);
|
||||
}
|
||||
|
||||
.sports-event-empty {
|
||||
display: flex;
|
||||
min-height: 300px;
|
||||
padding: 28px 18px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sports-event-empty img {
|
||||
display: block;
|
||||
width: 82%;
|
||||
max-width: 300px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.sports-event-empty__title {
|
||||
margin-top: -8px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sports-event-empty__hint {
|
||||
margin-top: 6px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<div class="sports-event-page">
|
||||
<van-sticky>
|
||||
<van-nav-bar
|
||||
@click-left="historyBack"
|
||||
@@ -13,99 +572,176 @@ layout("/layouts/platform_h5.html"){
|
||||
></van-nav-bar>
|
||||
</van-sticky>
|
||||
|
||||
<div class="sports-event-summary">
|
||||
<div class="sports-event-summary__icon">
|
||||
<van-icon name="award-o"></van-icon>
|
||||
</div>
|
||||
<div class="sports-event-summary__body">
|
||||
<div class="sports-event-summary__title">体育活动项目</div>
|
||||
<div class="sports-event-summary__subtitle">选择适合的项目，参与健康运动</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="sports-event-sticky">
|
||||
<van-search
|
||||
v-model="pageForm.searchKeyword"
|
||||
class="sports-event-search"
|
||||
placeholder="搜索项目名称"
|
||||
shape="round"
|
||||
clearable
|
||||
@search="doSearch"
|
||||
@clear="doSearch"
|
||||
></van-search>
|
||||
|
||||
<div class="sports-event-list-head">
|
||||
<button type="button" class="sports-event-view-toggle" @click="toggleViewMode">
|
||||
<i :class="viewMode === 'card' ? 'fa fa-list' : 'fa fa-th-large'"></i>
|
||||
<span>{{ viewMode === 'card' ? '列表' : '卡片' }}</span>
|
||||
</button>
|
||||
<div class="sports-event-list-head__count" v-if="pageForm.totalCount">共 {{ pageForm.totalCount }} 项</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<van-pull-refresh class="sports-event-refresh" v-model="refreshing" @refresh="onRefresh">
|
||||
<div>
|
||||
<van-list :finished="finished" @load="pageData" finished-text="没有更多了" v-if="tableData.length>0"
|
||||
v-model="loading">
|
||||
<div class="table-list">
|
||||
<div class="sports-event-card-list" v-if="viewMode === 'card'">
|
||||
<div :key="row.id" class="table-card" v-for="row in tableData">
|
||||
<van-image :src="row.image" fit="cover" height="200" v-if="row.image" width="100%"></van-image>
|
||||
<van-cell>
|
||||
<template slot="title">
|
||||
<div class="flex-align">
|
||||
<span class="font-size3 bold">{{row.allName}}</span>
|
||||
<div class="sports-event-card__body">
|
||||
<div class="sports-event-card__title-row">
|
||||
<div class="sports-event-card__title">{{row.allName}}</div>
|
||||
<div class="sports-event-card__status">
|
||||
<template v-if="row.status&&row.applyWay.length===1&&row.applyWay.includes(1)">
|
||||
<van-tag class="sports-event-status-tag is-pending" v-if="row.status===1">待审核</van-tag>
|
||||
<van-tag class="sports-event-status-tag is-success" v-if="row.status===2">已成功报名</van-tag>
|
||||
<van-tag class="sports-event-status-tag is-rejected" v-if="row.status===3">审核不通过</van-tag>
|
||||
</template>
|
||||
<template v-else>
|
||||
<van-tag class="sports-event-status-tag is-pending" v-if="row.status2===0">待审核</van-tag>
|
||||
<van-tag class="sports-event-status-tag is-success" v-if="row.status2===2">已成功报名</van-tag>
|
||||
<van-tag class="sports-event-status-tag is-rejected" v-if="row.status2===3">审核不通过</van-tag>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template #right-icon>
|
||||
<div style="display: flex; justify-content: flex-end"
|
||||
v-if="row.status&&row.applyWay.length===1&&row.applyWay.includes(1)">
|
||||
<van-tag type="primary" v-if="row.status===1">待审核</van-tag>
|
||||
<van-tag type="success" v-if="row.status===2">已成功报名</van-tag>
|
||||
<van-tag type="danger" v-if="row.status===3">审核不通过</van-tag>
|
||||
</div>
|
||||
<div class="sports-event-card__activity" v-if="row.name">
|
||||
<van-icon name="flag-o"></van-icon>
|
||||
<span>{{row.name}}</span>
|
||||
</div>
|
||||
<div class="sports-event-card__tags">
|
||||
<span class="sports-event-card__tag" v-if="row.eveProjectType"><span class="sports-event-card__tag-label">项目</span>{{row.eveProjectType == 2 ? '团体' : '单项'}}</span>
|
||||
<span class="sports-event-card__tag"><span class="sports-event-card__tag-label">性别</span>{{row.isMenWomen == 1 ? '男子' : row.isMenWomen == 2 ? '女子' : '不限'}}</span>
|
||||
<span class="sports-event-card__tag" v-if="row.isInterest">趣味项目</span>
|
||||
<span class="sports-event-card__tag" v-if="row.registrationWays"><span class="sports-event-card__tag-label">报名</span>{{row.registrationWays == 2 ? '双人' : '单人'}}</span>
|
||||
<span class="sports-event-card__tag" v-if="row.applyType"><span class="sports-event-card__tag-label">活动</span>{{row.applyType == 2 ? '综合类' : '单一类'}}</span>
|
||||
<span class="sports-event-card__tag" v-if="row.applyWay && row.applyWay.includes(1)">个人报名</span>
|
||||
<span class="sports-event-card__tag" v-if="row.applyWay && row.applyWay.includes(2)">分工会报名</span>
|
||||
<span class="sports-event-card__tag" v-if="row.applyWay && row.applyWay.includes(3)">小程序报名</span>
|
||||
</div>
|
||||
<div class="sports-event-card__stats">
|
||||
<div class="sports-event-card__stat">
|
||||
<div class="sports-event-card__stat-label">可报队数</div>
|
||||
<div class="sports-event-card__stat-value">{{row.eveProjectType == 2 && row.restrictTotalTeam != null ? row.restrictTotalTeam + '队' : '不适用'}}</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: flex-end" v-else>
|
||||
<van-tag type="primary" v-if="row.status2===0">待审核</van-tag>
|
||||
<van-tag type="success" v-if="row.status2===2">已成功报名</van-tag>
|
||||
<van-tag type="danger" v-if="row.status2===3">审核不通过</van-tag>
|
||||
<div class="sports-event-card__stat">
|
||||
<div class="sports-event-card__stat-label">运动员人数</div>
|
||||
<div class="sports-event-card__stat-value" v-if="row.athletesMinNum != null && row.athletesMaxNum != null">{{row.athletesMinNum}}-{{row.athletesMaxNum}}人</div>
|
||||
<div class="sports-event-card__stat-value" v-else-if="row.athletesMaxNum != null">最多{{row.athletesMaxNum}}人</div>
|
||||
<div class="sports-event-card__stat-value" v-else>暂无限制</div>
|
||||
</div>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="可报队数" v-if="row.eveProjectType==='2'">
|
||||
<template #right-icon>{{ row.restrictTotalTeam }}队</template>
|
||||
</van-cell>
|
||||
<van-cell title="每队可报人数" v-if="row.athletesMaxNum<=99">
|
||||
<template #right-icon>
|
||||
<span v-if="row.athletesMaxNum">{{ row.athletesMaxNum }}人</span>
|
||||
<span v-else-if="row.applyType===1">{{ row.athletesMaxNum * row.restrictTotalTeam}}人</span>
|
||||
<span v-else-if="row.applyType===2&&row.eveProjectType==='1'">{{row.athletesMaxNum}}人</span>
|
||||
<span v-else-if="row.applyType===2&&row.eveProjectType==='2'">
|
||||
{{(row.restrictGirlNum ? row.restrictGirlNum : 0) + (row.restrictBoyNum ? row.restrictBoyNum : 0)}}人
|
||||
</span>
|
||||
<span v-else>暂无</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
<!-- <van-cell title="已报名总人数">-->
|
||||
<!-- <template #right-icon>-->
|
||||
<!-- <span v-if="row.successUserApply>0&&row.applyType!==3">{{ row.successUserApply }}人</span>-->
|
||||
<!-- <span v-else-if="JSON.parse(row.applyWay).length===2&&row.applyWay.includes(1)">{{row.totalApplyNum}}人</span>-->
|
||||
<!-- <span v-else-if="row.totalApplyNum>0&&row.applyType===3">{{ row.totalApplyNum }}人</span>-->
|
||||
<!-- <span v-else>0人</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </van-cell>-->
|
||||
<van-cell title="暂保存人数">
|
||||
<template #right-icon>
|
||||
<span v-if="row.apply_num_bc>0">已保存（{{row.apply_num_bc}}）人</span>
|
||||
<span v-else>暂无已保存人数</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="已报名人员" v-if="JSON.parse(row.applyWay).length===1">
|
||||
<template #right-icon>
|
||||
<span @click="openApplyUser(row)" v-if="row.userApplyNames">{{ row.userApplyNames}}</span>
|
||||
<span v-else>暂无</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell class="table-card-footer">
|
||||
<div class="sports-event-card__stat">
|
||||
<div class="sports-event-card__stat-label">每人限报</div>
|
||||
<div class="sports-event-card__stat-value">{{row.restrictRegNumber != null ? row.restrictRegNumber + '项' : '暂无限制'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sports-event-card__config" v-if="row.restrictBoyNum != null || row.restrictGirlNum != null || row.coachNum != null || row.leanderNum != null || row.substituteNum != null || row.isLeader || row.isManGirlNum">
|
||||
<span class="sports-event-card__config-tag" v-if="row.restrictBoyNum != null">男子 {{row.restrictBoyNum}}人</span>
|
||||
<span class="sports-event-card__config-tag" v-if="row.restrictGirlNum != null">女子 {{row.restrictGirlNum}}人</span>
|
||||
<span class="sports-event-card__config-tag" v-if="row.coachNum != null">教练 {{row.coachNum}}人</span>
|
||||
<span class="sports-event-card__config-tag" v-if="row.leanderNum != null">领队 {{row.leanderNum}}人</span>
|
||||
<span class="sports-event-card__config-tag" v-if="row.substituteNum != null">替补 {{row.substituteNum}}人</span>
|
||||
<span class="sports-event-card__config-tag" v-if="row.isLeader">仅报领队</span>
|
||||
<span class="sports-event-card__config-tag" v-if="row.isManGirlNum">男女不限</span>
|
||||
</div>
|
||||
<div class="sports-event-card__extra">
|
||||
<div class="sports-event-card__extra-row" v-if="row.startAgeDate || row.endAgeDate"><van-icon name="calendar-o"></van-icon><span class="sports-event-card__extra-label">出生日期</span><span class="sports-event-card__extra-value">{{row.startAgeDate || '不限'}} 至 {{row.endAgeDate || '不限'}}</span></div>
|
||||
<div class="sports-event-card__extra-row" v-if="row.activityTeamName"><van-icon name="friends-o"></van-icon><span class="sports-event-card__extra-label">当前小队</span><span class="sports-event-card__extra-value">{{row.activityTeamName}}</span></div>
|
||||
<div class="sports-event-card__extra-row" v-if="row.userApplyNames"><van-icon name="contact-o"></van-icon><span class="sports-event-card__extra-label">已报名人员</span><span class="sports-event-card__extra-value" @click="openApplyUser(row)">{{row.userApplyNames}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-card-footer sports-event-card__footer">
|
||||
<div v-if="row.applyWay.length===1&&row.applyWay.includes(1)">
|
||||
<van-button :loading="subLoading" @click="signUpUser(row)" round
|
||||
<van-button class="sports-event-apply-button" :loading="subLoading" @click="signUpUser(row)" round
|
||||
size="small"
|
||||
type="primary" v-if="activityData.applyWay.includes(1)&&row.userApply===0">
|
||||
报 名
|
||||
<i class="fa fa-sign-in"></i>
|
||||
我要报名
|
||||
</van-button>
|
||||
<van-button :loading="subLoading" @click="cancelApply(row)" round
|
||||
<van-button class="sports-event-cancel-button" :loading="subLoading" @click="cancelApply(row)" round
|
||||
size="small"
|
||||
color="#dd6363"
|
||||
type="primary" v-if="activityData.applyWay.includes(1)&&row.userApply>0">
|
||||
<i class="fa fa-trash"></i>
|
||||
取消报名
|
||||
</van-button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<van-button :loading="subLoading" @click="signUpUser(row)" round
|
||||
<van-button class="sports-event-apply-button" :loading="subLoading" @click="signUpUser(row)" round
|
||||
size="small"
|
||||
type="primary" v-if="activityData.applyWay.includes(1)&&row.userApply2===0">
|
||||
报 名
|
||||
<i class="fa fa-sign-in"></i>
|
||||
我要报名
|
||||
</van-button>
|
||||
<van-button :loading="subLoading" @click="cancelApply(row)" round
|
||||
<van-button class="sports-event-cancel-button" :loading="subLoading" @click="cancelApply(row)" round
|
||||
size="small"
|
||||
color="#dd6363"
|
||||
type="primary" v-if="activityData.applyWay.includes(1)&&row.userApply2>0">
|
||||
<i class="fa fa-trash"></i>
|
||||
取消报名
|
||||
</van-button>
|
||||
</div>
|
||||
</van-cell>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sports-event-compact-list" v-else>
|
||||
<div :key="row.id" class="sports-event-compact-item" v-for="row in tableData">
|
||||
<div class="sports-event-compact-item__name">{{ row.allName }}</div>
|
||||
<div class="sports-event-compact-item__action">
|
||||
<div v-if="row.applyWay.length===1&&row.applyWay.includes(1)">
|
||||
<van-button class="sports-event-compact-button sports-event-compact-button--apply" :loading="subLoading" @click="signUpUser(row)" round
|
||||
size="small" type="default"
|
||||
v-if="activityData.applyWay.includes(1)&&row.userApply===0">
|
||||
<i class="fa fa-sign-in"></i>我要报名
|
||||
</van-button>
|
||||
<van-button class="sports-event-compact-button sports-event-compact-button--cancel" :loading="subLoading" @click="cancelApply(row)" round
|
||||
size="small" type="default"
|
||||
v-if="activityData.applyWay.includes(1)&&row.userApply>0">
|
||||
<i class="fa fa-trash"></i>取消报名
|
||||
</van-button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<van-button class="sports-event-compact-button sports-event-compact-button--apply" :loading="subLoading" @click="signUpUser(row)" round
|
||||
size="small" type="default"
|
||||
v-if="activityData.applyWay.includes(1)&&row.userApply2===0">
|
||||
<i class="fa fa-sign-in"></i>我要报名
|
||||
</van-button>
|
||||
<van-button class="sports-event-compact-button sports-event-compact-button--cancel" :loading="subLoading" @click="cancelApply(row)" round
|
||||
size="small" type="default"
|
||||
v-if="activityData.applyWay.includes(1)&&row.userApply2>0">
|
||||
<i class="fa fa-trash"></i>取消报名
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<van-empty image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据"
|
||||
v-else></van-empty>
|
||||
<div class="sports-event-empty" v-else>
|
||||
<img src="/assets/mobile/img/activity/sports-empty.png" alt="体育活动项目空状态插画">
|
||||
<div class="sports-event-empty__title">暂无可报名项目</div>
|
||||
<div class="sports-event-empty__hint">当前活动暂未发布可报名项目</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -118,18 +754,24 @@ layout("/layouts/platform_h5.html"){
|
||||
tableData: [],
|
||||
finished: false,
|
||||
loading: false,
|
||||
refreshing: false,
|
||||
pageForm: {
|
||||
activityId: GetQueryString("activityId"),
|
||||
searchKeyword: "",
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
totalCount: 0
|
||||
},
|
||||
subLoading: false,
|
||||
activityData: {}
|
||||
activityData: {},
|
||||
viewMode: "card"
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
methods: {
|
||||
toggleViewMode() {
|
||||
this.viewMode = this.viewMode === "card" ? "list" : "card"
|
||||
},
|
||||
openApplyUser() {
|
||||
},
|
||||
cancelApply(row) {
|
||||
@@ -201,9 +843,13 @@ layout("/layouts/platform_h5.html"){
|
||||
this.tableKey = new Date().getTime()
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.finished = false
|
||||
this.tableData = []
|
||||
this.pageData()
|
||||
},
|
||||
onRefresh() {
|
||||
this.doSearch()
|
||||
},
|
||||
pageData() {
|
||||
this.loading = true
|
||||
this.$axios.post("/platform/activity/apply/h5/pageData", {data: JSON.stringify(this.pageForm)}).then((res) => {
|
||||
@@ -214,7 +860,9 @@ layout("/layouts/platform_h5.html"){
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
this.pageForm.totalCount = res.data.totalCount
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
this.refreshing = false
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
@@ -1,16 +1,47 @@
|
||||
let ACTIVITY_EVENT_NOTIFICATION = {
|
||||
template: `
|
||||
<div>
|
||||
<van-popup :style="{ height: '100%',width: '100%'}" position="right" safe-area-inset-bottom v-model="viewShow">
|
||||
<van-sticky>
|
||||
<van-nav-bar @click-left="viewShow=false" left-arrow left-text="返回" title="活动通知"></van-nav-bar>
|
||||
</van-sticky>
|
||||
<div style="height: calc(100vh - 44px); overflow-y: auto">
|
||||
<div v-html="event_notification"class="paddingX10" style="padding-bottom: 44px;white-space: pre-wrap;overflow-x: hidden" v-if="event_notification"></div>
|
||||
<div v-else>暂无</div>
|
||||
<van-button @click="openReg" block style="position: fixed; bottom: 0;"
|
||||
type="primary">进入报名
|
||||
</van-button>
|
||||
<div class="activity-notification-component">
|
||||
<van-popup
|
||||
v-model="viewShow"
|
||||
class="activity-notification-popup"
|
||||
:style="{ height: '100%', width: '100%' }"
|
||||
position="right"
|
||||
safe-area-inset-bottom
|
||||
>
|
||||
<div class="activity-notification-page">
|
||||
<van-sticky>
|
||||
<van-nav-bar
|
||||
title="活动通知"
|
||||
left-arrow
|
||||
left-text="返回"
|
||||
@click-left="viewShow = false"
|
||||
></van-nav-bar>
|
||||
</van-sticky>
|
||||
|
||||
<div class="activity-notification-scroll">
|
||||
<div class="activity-notification-hero">
|
||||
<div class="activity-notification-hero__icon">
|
||||
<van-icon name="description"></van-icon>
|
||||
</div>
|
||||
<div>
|
||||
<div class="activity-notification-hero__title">活动报名须知</div>
|
||||
<div class="activity-notification-hero__subtitle">请仔细阅读活动安排与报名要求</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article v-if="event_notification" class="activity-notification-card">
|
||||
<div class="activity-notification-content" v-html="event_notification"></div>
|
||||
</article>
|
||||
<div v-else class="activity-notification-empty">
|
||||
<van-icon name="description"></van-icon>
|
||||
<span>暂无活动通知</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="activity-notification-footer">
|
||||
<van-button v-if="inApplyTime" type="primary" round block @click="openReg">进入报名</van-button>
|
||||
<van-button v-else class="is-disabled" disabled round block>{{ applyStatusText }}</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
@@ -21,6 +52,12 @@ let ACTIVITY_EVENT_NOTIFICATION = {
|
||||
},
|
||||
id: {
|
||||
value: { type: String, default: "暂无" }
|
||||
},
|
||||
apply_start_time: {
|
||||
value: { type: String, default: "" }
|
||||
},
|
||||
apply_end_time: {
|
||||
value: { type: String, default: "" }
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -28,9 +65,189 @@ let ACTIVITY_EVENT_NOTIFICATION = {
|
||||
viewShow: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 详情页统一控制报名入口状态，活动列表仅负责进入详情。
|
||||
inApplyTime() {
|
||||
if (!this.apply_start_time || !this.apply_end_time) return false
|
||||
const now = Date.now()
|
||||
return now >= this.$moment(this.apply_start_time).valueOf()
|
||||
&& now <= this.$moment(this.apply_end_time).valueOf()
|
||||
},
|
||||
applyStatusText() {
|
||||
if (!this.apply_start_time || !this.apply_end_time) return "当前不可报名"
|
||||
if (Date.now() < this.$moment(this.apply_start_time).valueOf()) return "报名未开始"
|
||||
return "已过报名时间"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openReg() {
|
||||
this.$pjaxReplace("/platform/activity/apply/h5/eventList?activityId=" + this.id)
|
||||
}
|
||||
}
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
.activity-notification-popup {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.activity-notification-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.activity-notification-page /deep/ .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.activity-notification-page /deep/ .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.activity-notification-page /deep/ .van-nav-bar .van-icon,
|
||||
.activity-notification-page /deep/ .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.activity-notification-scroll {
|
||||
height: calc(100vh - 46px);
|
||||
padding: 12px 12px calc(92px + env(safe-area-inset-bottom));
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.activity-notification-hero {
|
||||
display: flex;
|
||||
min-height: 82px;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
|
||||
box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
|
||||
}
|
||||
|
||||
.activity-notification-hero__icon {
|
||||
display: flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
flex: 0 0 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 11px;
|
||||
color: #2d7eea;
|
||||
background-color: rgba(255, 255, 255, .92);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.activity-notification-hero__title {
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.activity-notification-hero__subtitle {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.activity-notification-card {
|
||||
margin-top: 12px;
|
||||
padding: 18px 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.activity-notification-content {
|
||||
color: #3f4c5e;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.activity-notification-content /deep/ h1,
|
||||
.activity-notification-content /deep/ h2,
|
||||
.activity-notification-content /deep/ h3 {
|
||||
margin: 0 0 12px !important;
|
||||
color: #1f2f43 !important;
|
||||
font-size: 20px !important;
|
||||
line-height: 1.5 !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.activity-notification-content /deep/ p {
|
||||
margin: 0 0 8px !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.8 !important;
|
||||
}
|
||||
|
||||
.activity-notification-content /deep/ img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.activity-notification-content /deep/ table {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.activity-notification-empty {
|
||||
display: flex;
|
||||
min-height: 180px;
|
||||
margin-top: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
border-radius: 12px;
|
||||
color: #9aa7b8;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.activity-notification-empty /deep/ .van-icon {
|
||||
color: #83b5f4;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.activity-notification-footer {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid #edf1f6;
|
||||
background-color: rgba(255, 255, 255, .96);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.activity-notification-footer /deep/ .van-button {
|
||||
height: 42px;
|
||||
border: 0;
|
||||
font-size: 15px;
|
||||
background-color: #1989fa;
|
||||
box-shadow: 0 6px 16px rgba(25, 137, 250, .22);
|
||||
}
|
||||
|
||||
.activity-notification-footer /deep/ .van-button.is-disabled,
|
||||
.activity-notification-footer /deep/ .van-button--disabled {
|
||||
color: #8b98aa !important;
|
||||
background-color: #eef2f7 !important;
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
@@ -2,93 +2,621 @@
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style scoped>
|
||||
.info-title {
|
||||
font-weight: bold;
|
||||
background-color: white;
|
||||
padding: 13px;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
text-align: center !important;
|
||||
<style>
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
.info-container {
|
||||
margin-bottom: 60px;
|
||||
|
||||
.brand-activity-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
.button {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
.brand-activity-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
.info-img {
|
||||
display: block;
|
||||
|
||||
.brand-activity-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
.van-count-down {
|
||||
|
||||
.brand-activity-page .van-nav-bar .van-icon,
|
||||
.brand-activity-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.brand-activity-content {
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.brand-activity-hero {
|
||||
position: relative;
|
||||
height: 134px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
background-color: #247fe8;
|
||||
box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
|
||||
}
|
||||
|
||||
.brand-activity-hero__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.brand-activity-hero__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 64%;
|
||||
height: 100%;
|
||||
padding-left: 16px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(90deg, rgba(22, 112, 232, .98) 0%, rgba(22, 112, 232, .88) 52%, rgba(22, 112, 232, 0) 100%);
|
||||
}
|
||||
|
||||
.brand-activity-hero__title {
|
||||
font-size: 25px;
|
||||
line-height: 34px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0 2px 6px rgba(17, 86, 182, .18);
|
||||
}
|
||||
|
||||
.brand-activity-hero__subtitle {
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: .5px;
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.brand-activity-sticky {
|
||||
padding: 10px 0 1px;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.van-sticky--fixed .brand-activity-sticky {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-activity-search {
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.brand-activity-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.brand-activity-search .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.brand-activity-search .van-field__control::placeholder {
|
||||
color: #a7b0bf;
|
||||
}
|
||||
|
||||
.brand-activity-filter {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
transition: border-radius .18s ease;
|
||||
}
|
||||
|
||||
.brand-activity-filter.is-open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.brand-activity-filter .van-dropdown-menu__bar {
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.brand-activity-filter .van-dropdown-menu__item {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.brand-activity-filter .van-dropdown-menu__title {
|
||||
width: auto;
|
||||
max-width: calc(100% - 24px);
|
||||
padding: 0 12px 0 0;
|
||||
overflow: hidden;
|
||||
color: #66758a;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-activity-filter .van-dropdown-menu__title::after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.brand-activity-filter .van-dropdown-menu__title--active,
|
||||
.brand-activity-filter .van-dropdown-item__option--active,
|
||||
.brand-activity-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.brand-activity-filter .van-dropdown-menu__title--down::after {
|
||||
border-color: transparent transparent #1989fa #1989fa;
|
||||
}
|
||||
|
||||
.brand-activity-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
}
|
||||
|
||||
.brand-activity-filter .van-dropdown-item__option {
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
color: #46566c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.brand-activity-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.brand-activity-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.brand-activity-card__cover,
|
||||
.brand-activity-card__cover-state {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background-color: #edf4fc;
|
||||
}
|
||||
|
||||
.brand-activity-card__cover {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.brand-activity-card__cover-state {
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
color: #8da1ba;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.brand-activity-card__cover-state .van-icon {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.brand-activity-card__cover-state.is-error {
|
||||
color: #c27b75;
|
||||
background-color: #fff3f1;
|
||||
}
|
||||
|
||||
.brand-activity-card__body {
|
||||
padding: 12px 38px 14px 14px;
|
||||
}
|
||||
|
||||
.brand-activity-card__title {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: #303846;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.brand-activity-card__time {
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
color: #98a2b2;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.brand-activity-card__meta {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
padding-top: 9px;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
border-top: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.brand-activity-card__tag {
|
||||
display: inline-flex;
|
||||
padding: 3px 8px;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.brand-activity-card__tag-label {
|
||||
margin-right: 4px;
|
||||
color: #8aa7cf;
|
||||
}
|
||||
|
||||
.brand-activity-card__arrow {
|
||||
position: absolute;
|
||||
top: 164px;
|
||||
right: 14px;
|
||||
color: #b4bdca;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.brand-activity-empty {
|
||||
display: flex;
|
||||
min-height: 260px;
|
||||
padding: 26px 18px 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.brand-activity-empty img {
|
||||
display: block;
|
||||
width: 82%;
|
||||
max-width: 280px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.brand-activity-empty__title {
|
||||
margin-top: 14px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.brand-activity-empty__hint {
|
||||
margin-top: 5px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.brand-activity-page .van-list__loading {
|
||||
color: #9aa7b8;
|
||||
font-size: 13px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.brand-intro-popup,
|
||||
.brand-intro-page {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.brand-intro-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.brand-intro-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.brand-intro-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.brand-intro-page .van-nav-bar .van-icon,
|
||||
.brand-intro-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.brand-intro-scroll {
|
||||
height: calc(100vh - 46px);
|
||||
padding: 12px 12px calc(92px + env(safe-area-inset-bottom));
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-intro-hero {
|
||||
display: flex;
|
||||
min-height: 82px;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
|
||||
box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
|
||||
}
|
||||
|
||||
.brand-intro-hero__icon {
|
||||
display: flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
flex: 0 0 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 11px;
|
||||
color: #2d7eea;
|
||||
background-color: rgba(255, 255, 255, .92);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.brand-intro-hero__title {
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.brand-intro-hero__subtitle {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.brand-intro-card {
|
||||
margin-top: 12px;
|
||||
padding: 18px 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.brand-intro-content,
|
||||
.brand-intro-content div,
|
||||
.brand-intro-content p,
|
||||
.brand-intro-content span,
|
||||
.brand-intro-content li {
|
||||
color: #3f4c5e !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.8 !important;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.brand-intro-content h1,
|
||||
.brand-intro-content h2,
|
||||
.brand-intro-content h3 {
|
||||
margin: 16px 0 10px !important;
|
||||
color: #1f2f43 !important;
|
||||
font-size: 19px !important;
|
||||
line-height: 1.5 !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.brand-intro-content > :first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.brand-intro-content p {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.brand-intro-content img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.brand-intro-content table {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.brand-intro-empty {
|
||||
display: flex;
|
||||
min-height: 180px;
|
||||
margin-top: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
border-radius: 12px;
|
||||
color: #9aa7b8;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.brand-intro-empty .van-icon {
|
||||
color: #83b5f4;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.brand-intro-footer {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid #edf1f6;
|
||||
background-color: rgba(255, 255, 255, .96);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-intro-footer .van-button {
|
||||
height: 42px;
|
||||
border: 0;
|
||||
border-radius: 21px;
|
||||
font-size: 15px;
|
||||
background-color: #1989fa;
|
||||
box-shadow: 0 6px 16px rgba(25, 137, 250, .22);
|
||||
}
|
||||
|
||||
.brand-intro-footer .van-button--disabled {
|
||||
color: #8b98aa !important;
|
||||
background-color: #eef2f7 !important;
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.brand-intro-footer .van-count-down {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app">
|
||||
<van-nav-bar title="品牌活动" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
<div id="app" v-cloak>
|
||||
<div class="brand-activity-page">
|
||||
<van-nav-bar title="品牌活动" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
|
||||
<van-sticky offset-top="46px">
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
|
||||
<table-list api="/platform/trainSignUp/apply/activityPageData"
|
||||
:page_form.sync="pageForm"
|
||||
ref="tableListRef"
|
||||
title="activityName"
|
||||
img="cover"
|
||||
@ready="onReady"
|
||||
>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="面向对象">{{row.activityGroupName}}</table-column>
|
||||
<table-column label="报名时间">
|
||||
{{$moment(row.activitySignUpStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activitySignUpEndTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
<table-column label="活动时间">
|
||||
{{$moment(row.activityStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activityEndTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<template v-if="$moment().isBefore($moment(row.activitySignUpEndTime))">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>查看介绍</span>
|
||||
<div class="brand-activity-content">
|
||||
<section class="brand-activity-hero">
|
||||
<img class="brand-activity-hero__image" src="/assets/mobile/img/activity/hero/brand-hero-v2.png" alt="品牌活动插画">
|
||||
<div class="brand-activity-hero__copy">
|
||||
<div class="brand-activity-hero__title">品牌活动</div>
|
||||
<div class="brand-activity-hero__subtitle">品牌引领 · 成长同行</div>
|
||||
</div>
|
||||
<div class="action-btn" @click="onApply(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>去报名</span>
|
||||
</section>
|
||||
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="brand-activity-sticky">
|
||||
<van-search
|
||||
v-model="pageForm.searchKeyword"
|
||||
class="brand-activity-search"
|
||||
placeholder="搜索品牌活动"
|
||||
shape="round"
|
||||
clearable
|
||||
@search="doSearch"
|
||||
@clear="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu class="brand-activity-filter" :class="{'is-open': filterOpened}" active-color="#1989fa">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</table-list>
|
||||
</van-sticky>
|
||||
|
||||
<van-action-sheet :close-on-click-overlay="false" title="详细信息" v-model="infoVisible">
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list v-model="loading" :finished="finished" :immediate-check="false" @load="onLoad">
|
||||
<div class="brand-activity-list">
|
||||
<div v-for="row in tableData" :key="row.id" class="brand-activity-card" @click="onView(row)">
|
||||
<img
|
||||
v-if="hasCover(row) && !imageLoadErrors[row.id]"
|
||||
class="brand-activity-card__cover"
|
||||
:src="row.cover"
|
||||
:alt="row.activityName"
|
||||
@error="handleImageError(row)"
|
||||
>
|
||||
<div v-else class="brand-activity-card__cover-state" :class="{'is-error': hasCover(row)}">
|
||||
<van-icon name="photo-o"></van-icon>
|
||||
<span>{{ hasCover(row) ? '图片加载失败' : '暂无图片' }}</span>
|
||||
</div>
|
||||
<div class="brand-activity-card__body">
|
||||
<div class="brand-activity-card__title">{{ row.activityName }}</div>
|
||||
<div class="brand-activity-card__time" v-if="row.activitySignUpStartTime && row.activitySignUpEndTime">
|
||||
报名时间：{{ $moment(row.activitySignUpStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activitySignUpEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="brand-activity-card__time" v-if="row.activityStartTime && row.activityEndTime">
|
||||
活动时间：{{ $moment(row.activityStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activityEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="brand-activity-card__meta" v-if="row.activityGroupName || row.trainType">
|
||||
<span class="brand-activity-card__tag" v-if="row.activityGroupName">
|
||||
<span class="brand-activity-card__tag-label">面向对象</span>{{ row.activityGroupName }}
|
||||
</span>
|
||||
<span class="brand-activity-card__tag" v-if="row.trainType">
|
||||
<span class="brand-activity-card__tag-label">活动类型</span>{{ row.trainType }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<van-icon class="brand-activity-card__arrow" name="arrow"></van-icon>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<div v-if="!loading && tableData.length === 0" class="brand-activity-empty">
|
||||
<img src="/assets/mobile/img/activity/culture-empty.png" alt="品牌活动空状态插画">
|
||||
<div class="brand-activity-empty__title">暂无品牌活动</div>
|
||||
<div class="brand-activity-empty__hint">当前筛选条件下暂时没有可展示的活动</div>
|
||||
</div>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-container">
|
||||
<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>
|
||||
<van-popup class="brand-intro-popup" :style="{height: '100%', width: '100%'}" position="right" safe-area-inset-bottom v-model="infoVisible">
|
||||
<div class="brand-intro-page">
|
||||
<van-sticky>
|
||||
<van-nav-bar title="活动介绍" left-text="返回" left-arrow @click-left="infoVisible = false"></van-nav-bar>
|
||||
</van-sticky>
|
||||
<div class="brand-intro-scroll">
|
||||
<div class="brand-intro-hero">
|
||||
<div class="brand-intro-hero__icon">
|
||||
<van-icon name="description"></van-icon>
|
||||
</div>
|
||||
<div>
|
||||
<div class="brand-intro-hero__title">活动报名须知</div>
|
||||
<div class="brand-intro-hero__subtitle">请仔细阅读活动安排与报名要求</div>
|
||||
</div>
|
||||
</div>
|
||||
<article v-if="infoRow.introduce" class="brand-intro-card">
|
||||
<div class="brand-intro-content" v-html="infoRow.introduce"></div>
|
||||
</article>
|
||||
<div v-else class="brand-intro-empty">
|
||||
<van-icon name="description"></van-icon>
|
||||
<span>暂无活动介绍</span>
|
||||
</div>
|
||||
</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>
|
||||
<div class="brand-intro-footer">
|
||||
<van-button v-if="canApply(infoRow)" @click="onApply(infoRow)" type="primary" block round>进入报名</van-button>
|
||||
<van-button v-else-if="time < 0" @click="onApply(infoRow)" type="primary" block round>
|
||||
距离开始
|
||||
<van-count-down :time="Math.abs(time)" format="DD 天 HH 时 mm 分 ss 秒" @finish="time = 0"></van-count-down>
|
||||
</van-button>
|
||||
<van-button v-else disabled block round>{{ registrationStatusText(infoRow) }}</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
</van-popup>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
@@ -96,11 +624,16 @@ layout("/layouts/platform_h5.html"){
|
||||
el: "#app",
|
||||
store,
|
||||
components: {
|
||||
"pdf-preview": httpVueLoader("/components/plugins/sysFilePreview/PdfIndex.vue?v=" + new Date().getTime())
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time: 0,
|
||||
tableData: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
refreshing: false,
|
||||
imageLoadErrors: {},
|
||||
filterOpened: false,
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
@@ -121,12 +654,41 @@ layout("/layouts/platform_h5.html"){
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hasCover(row) {
|
||||
return !!(row && row.cover && String(row.cover).trim())
|
||||
},
|
||||
handleImageError(row) {
|
||||
this.$set(this.imageLoadErrors, row.id, true)
|
||||
},
|
||||
isRegistrationClosed(row) {
|
||||
return !!(row && row.activitySignUpEndTime && !this.$moment().isBefore(this.$moment(row.activitySignUpEndTime)))
|
||||
},
|
||||
canApply(row) {
|
||||
if(!row || !row.activitySignUpStartTime || !row.activitySignUpEndTime) {
|
||||
return false
|
||||
}
|
||||
const now = Date.now()
|
||||
return now >= this.$moment(row.activitySignUpStartTime).valueOf()
|
||||
&& now <= this.$moment(row.activitySignUpEndTime).valueOf()
|
||||
},
|
||||
registrationStatusText(row) {
|
||||
if(!row || !row.activitySignUpStartTime || !row.activitySignUpEndTime) {
|
||||
return '当前不可报名'
|
||||
}
|
||||
if(Date.now() < this.$moment(row.activitySignUpStartTime).valueOf()) {
|
||||
return '报名未开始'
|
||||
}
|
||||
return '已过报名时间'
|
||||
},
|
||||
onView(row) {
|
||||
this.infoRow = row
|
||||
this.time = this.$moment().diff(this.$moment(row.activitySignUpStartTime), 'milliseconds')
|
||||
this.infoVisible = true
|
||||
},
|
||||
onApply(row) {
|
||||
if(this.isRegistrationClosed(row)) {
|
||||
return
|
||||
}
|
||||
if(this.$moment().isBefore(this.$moment(row.activitySignUpStartTime))) {
|
||||
this.onView(row)
|
||||
return
|
||||
@@ -151,22 +713,47 @@ layout("/layouts/platform_h5.html"){
|
||||
}
|
||||
})
|
||||
},
|
||||
onReady() {
|
||||
this.doSearch()
|
||||
if(this.id) {
|
||||
this.fetchOne()
|
||||
onLoad() {
|
||||
if(!this.finished) {
|
||||
this.loadActivities(false)
|
||||
}
|
||||
},
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
onRefresh() {
|
||||
this.loadActivities(true)
|
||||
},
|
||||
loadActivities(reset) {
|
||||
if(reset) {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$refs.tableListRef.doSearch()
|
||||
this.tableData = []
|
||||
this.finished = false
|
||||
this.imageLoadErrors = {}
|
||||
}
|
||||
this.loading = true
|
||||
this.$axios.post('/platform/trainSignUp/apply/activityPageData', this.pageForm).then((res) => {
|
||||
if(res.code === 0) {
|
||||
const list = res.data && res.data.list ? res.data.list : []
|
||||
this.tableData = this.pageForm.pageNumber === 1 ? list : this.tableData.concat(list)
|
||||
this.pageForm.totalCount = res.data && res.data.totalCount ? res.data.totalCount : 0
|
||||
this.finished = this.tableData.length >= this.pageForm.totalCount
|
||||
if(!this.finished) {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
this.refreshing = false
|
||||
})
|
||||
},
|
||||
doSearch() {
|
||||
this.loadActivities(true)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
created() {
|
||||
this.loadActivities(true)
|
||||
if(this.id) {
|
||||
this.fetchOne()
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -3,9 +3,10 @@ const times = {
|
||||
/*language=HTML*/
|
||||
`
|
||||
<div>
|
||||
<van-action-sheet v-model="visible" title="时间段" cancel-text="取消">
|
||||
<div id="mapContainer" v-if="row?.isMobileSign === true && row?.signType === 3" style="width: 100%; height: 250px"></div>
|
||||
<button v-for="(item,index) in row?.courseTimes" type="button" class="van-action-sheet__item">
|
||||
<van-action-sheet class="brand-course-times-sheet" :style="{height: '78%'}" :close-on-click-overlay="true" v-model="visible" title="时间段" cancel-text="取消">
|
||||
<div class="brand-course-times-list">
|
||||
<div id="mapContainer" v-if="row?.isMobileSign === true && row?.signType === 3" class="brand-course-times-map"></div>
|
||||
<button v-for="(item,index) in row?.courseTimes" :key="index" type="button" class="van-action-sheet__item brand-course-time-item">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<div>
|
||||
<div class="van-action-sheet__name">
|
||||
@@ -22,6 +23,7 @@ const times = {
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
<van-popup round :safe-area-inset-bottom="true"
|
||||
@@ -215,6 +217,70 @@ const times = {
|
||||
},
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
|
||||
.brand-course-times-sheet {
|
||||
overflow: hidden;
|
||||
border-radius: 16px 16px 0 0;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.brand-course-times-sheet /deep/ .van-action-sheet__header {
|
||||
height: 48px;
|
||||
color: #1f2f43;
|
||||
background-color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.brand-course-times-sheet /deep/ .van-action-sheet__close {
|
||||
top: 13px;
|
||||
color: #b5bdc9;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.brand-course-times-list {
|
||||
height: calc(100% - 98px);
|
||||
padding: 10px 12px 0;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-course-times-map {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.brand-course-times-sheet /deep/ .brand-course-time-item {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
padding: 14px;
|
||||
border-radius: 10px;
|
||||
color: #263548;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 6px 18px rgba(55, 85, 126, .07);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-course-times-sheet /deep/ .van-action-sheet__name {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.brand-course-times-sheet /deep/ .van-action-sheet__subname {
|
||||
margin-top: 5px;
|
||||
color: #98a2b2;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.brand-course-times-sheet /deep/ .van-action-sheet__cancel {
|
||||
height: 50px;
|
||||
color: #66758a;
|
||||
background-color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ const applyForm = {
|
||||
/*language=HTML*/
|
||||
`
|
||||
<div>
|
||||
<van-action-sheet :close-on-click-overlay="false" title="报名信息" v-model="visible">
|
||||
<van-action-sheet class="brand-course-form-sheet" :style="{height: '78%'}" :close-on-click-overlay="true" 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>
|
||||
@@ -150,10 +150,90 @@ const applyForm = {
|
||||
},
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
/deep/ .button {
|
||||
position: fixed;
|
||||
.brand-course-form-sheet {
|
||||
overflow: hidden;
|
||||
border-radius: 16px 16px 0 0;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .van-action-sheet__header {
|
||||
height: 48px;
|
||||
color: #1f2f43;
|
||||
background-color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .van-action-sheet__close {
|
||||
top: 13px;
|
||||
color: #b5bdc9;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .form-container {
|
||||
height: calc(100% - 48px);
|
||||
padding: 10px 12px 72px;
|
||||
overflow-y: auto;
|
||||
background-color: #f3f7fd;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .form-section {
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 6px 18px rgba(55, 85, 126, .07);
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .van-cell-group__title {
|
||||
padding: 12px 14px 8px;
|
||||
color: #263548;
|
||||
background-color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .van-cell-group__title::before {
|
||||
width: 3px;
|
||||
top: 12px;
|
||||
bottom: 8px;
|
||||
border-radius: 2px;
|
||||
background-color: #1989fa;
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .van-cell {
|
||||
padding: 11px 14px;
|
||||
color: #263548;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .van-field__label {
|
||||
color: #66758a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid #edf1f6;
|
||||
background-color: rgba(255, 255, 255, .96);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .button .van-button {
|
||||
height: 42px;
|
||||
border: 0;
|
||||
border-radius: 21px;
|
||||
color: #fff;
|
||||
background-color: #1989fa;
|
||||
font-size: 15px;
|
||||
box-shadow: 0 6px 16px rgba(25, 137, 250, .22);
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -2,91 +2,475 @@
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style scoped>
|
||||
.info-title {
|
||||
font-weight: bold;
|
||||
background-color: white;
|
||||
padding: 13px;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
text-align: center !important;
|
||||
<style>
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
.info-container {
|
||||
|
||||
.brand-mine-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
.button {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
.brand-mine-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
.info-img {
|
||||
display: block;
|
||||
|
||||
.brand-mine-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
.van-count-down {
|
||||
|
||||
.brand-mine-page .van-nav-bar .van-icon,
|
||||
.brand-mine-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.brand-mine-content {
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.brand-mine-hero {
|
||||
position: relative;
|
||||
height: 134px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
background: linear-gradient(115deg, #347eea 0%, #5b9cf4 58%, #cfe3ff 100%);
|
||||
box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
|
||||
}
|
||||
|
||||
.brand-mine-hero__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 67%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: right center;
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
|
||||
mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
|
||||
}
|
||||
|
||||
.brand-mine-hero__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-left: 16px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-mine-hero__title {
|
||||
font-size: 25px;
|
||||
line-height: 34px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.brand-mine-hero__subtitle {
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: .5px;
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.brand-mine-sticky {
|
||||
padding: 10px 0 1px;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.van-sticky--fixed .brand-mine-sticky {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-mine-search {
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.brand-mine-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.brand-mine-search .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.brand-mine-filter {
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
transition: border-radius .18s ease;
|
||||
}
|
||||
|
||||
.brand-mine-filter.is-open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.brand-mine-filter .van-dropdown-menu__bar {
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.brand-mine-filter .van-dropdown-menu__title {
|
||||
width: auto;
|
||||
max-width: calc(100% - 24px);
|
||||
padding: 0 12px 0 0;
|
||||
color: #66758a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.brand-mine-filter .van-dropdown-menu__title::after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.brand-mine-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-mine-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.brand-mine-card {
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.brand-mine-card__cover,
|
||||
.brand-mine-card__cover-state {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #edf4fc;
|
||||
}
|
||||
|
||||
.brand-mine-card__cover {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.brand-mine-card__cover-state {
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
color: #8da1ba;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.brand-mine-card__cover-state .van-icon {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.brand-mine-card__cover-state.is-error {
|
||||
color: #c27b75;
|
||||
background-color: #fff3f1;
|
||||
}
|
||||
|
||||
.brand-mine-card__body {
|
||||
padding: 12px 14px 14px;
|
||||
}
|
||||
|
||||
.brand-mine-card__title {
|
||||
overflow: hidden;
|
||||
color: #303846;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.brand-mine-card__time {
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
color: #98a2b2;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.brand-mine-card__meta {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
padding-top: 9px;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
border-top: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.brand-mine-card__tag {
|
||||
display: inline-flex;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.brand-mine-card__tag-label {
|
||||
margin-right: 4px;
|
||||
color: #8aa7cf;
|
||||
}
|
||||
|
||||
.brand-mine-card__actions {
|
||||
display: flex;
|
||||
padding: 12px 14px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
border-top: 1px solid #edf1f6;
|
||||
background-color: #f8fbff;
|
||||
}
|
||||
|
||||
.brand-mine-card__action {
|
||||
display: inline-flex;
|
||||
min-width: 82px;
|
||||
height: 32px;
|
||||
padding: 0 14px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 13px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-mine-card__action .van-icon {
|
||||
margin-right: 6px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.brand-mine-card__action.is-primary {
|
||||
color: #fff;
|
||||
background-color: #1989fa;
|
||||
box-shadow: 0 5px 12px rgba(25, 137, 250, .18);
|
||||
}
|
||||
|
||||
.brand-mine-empty {
|
||||
display: flex;
|
||||
min-height: 260px;
|
||||
padding: 26px 18px 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.brand-mine-empty img {
|
||||
width: 82%;
|
||||
max-width: 280px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.brand-mine-empty__title {
|
||||
margin-top: 14px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.brand-mine-empty__hint {
|
||||
margin-top: 5px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.brand-mine-intro-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.brand-mine-intro-scroll {
|
||||
height: calc(100vh - 46px);
|
||||
padding: 12px;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-mine-intro-hero {
|
||||
display: flex;
|
||||
min-height: 82px;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
|
||||
box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-mine-intro-hero__icon {
|
||||
display: flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 44px;
|
||||
border-radius: 11px;
|
||||
color: #2d7eea;
|
||||
background-color: rgba(255, 255, 255, .92);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.brand-mine-intro-hero__title {
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.brand-mine-intro-hero__subtitle {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.brand-mine-intro-card {
|
||||
margin-top: 12px;
|
||||
padding: 18px 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
color: #3f4c5e;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.brand-mine-intro-card img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app">
|
||||
<van-nav-bar title="品牌活动-我的报名" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
<div id="app" v-cloak>
|
||||
<div class="brand-mine-page">
|
||||
<van-nav-bar title="品牌活动-我的报名" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
|
||||
<van-sticky offset-top="46px">
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
<div class="brand-mine-content">
|
||||
<section class="brand-mine-hero">
|
||||
<img class="brand-mine-hero__image" src="/assets/mobile/img/home/v4/feature-activity.png" alt="品牌活动插画">
|
||||
<div class="brand-mine-hero__copy">
|
||||
<div class="brand-mine-hero__title">我的报名</div>
|
||||
<div class="brand-mine-hero__subtitle">品牌活动 · 报名记录</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<table-list api="/platform/trainSignUp/apply/activityPageData"
|
||||
:page_form.sync="pageForm"
|
||||
ref="tableListRef"
|
||||
title="activityName"
|
||||
img="cover"
|
||||
@ready="onReady"
|
||||
>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="面向对象">{{row.activityGroupName}}</table-column>
|
||||
<table-column label="报名时间">
|
||||
{{$moment(row.activitySignUpStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activitySignUpEndTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
<table-column label="活动时间">
|
||||
{{$moment(row.activityStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activityEndTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>查看介绍</span>
|
||||
</div>
|
||||
<div class="action-btn" @click="onApply(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>查看</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="brand-mine-sticky">
|
||||
<van-search v-model="pageForm.searchKeyword" class="brand-mine-search" placeholder="搜索已报名活动" shape="round" clearable @search="doSearch" @clear="doSearch"></van-search>
|
||||
<van-dropdown-menu class="brand-mine-filter" :class="{'is-open': filterOpened}" active-color="#1989fa">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<van-action-sheet :close-on-click-overlay="false" title="活动详细信息" v-model="infoVisible" cancel-text="取消">
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list v-model="loading" :finished="finished" :immediate-check="false" @load="onLoad">
|
||||
<div class="brand-mine-list">
|
||||
<div v-for="row in tableData" :key="row.id" class="brand-mine-card">
|
||||
<img v-if="hasCover(row) && !imageLoadErrors[row.id]" class="brand-mine-card__cover" :src="row.cover" :alt="row.activityName" @error="handleImageError(row)">
|
||||
<div v-else class="brand-mine-card__cover-state" :class="{'is-error': hasCover(row)}">
|
||||
<van-icon name="photo-o"></van-icon>
|
||||
<span>{{ hasCover(row) ? '图片加载失败' : '暂无图片' }}</span>
|
||||
</div>
|
||||
<div class="brand-mine-card__body">
|
||||
<div class="brand-mine-card__title">{{ row.activityName }}</div>
|
||||
<div class="brand-mine-card__time" v-if="row.activitySignUpStartTime && row.activitySignUpEndTime">
|
||||
报名时间：{{ $moment(row.activitySignUpStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activitySignUpEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="brand-mine-card__time" v-if="row.activityStartTime && row.activityEndTime">
|
||||
活动时间：{{ $moment(row.activityStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activityEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="brand-mine-card__meta" v-if="row.activityGroupName || row.trainType">
|
||||
<span class="brand-mine-card__tag" v-if="row.activityGroupName"><span class="brand-mine-card__tag-label">面向对象</span>{{ row.activityGroupName }}</span>
|
||||
<span class="brand-mine-card__tag" v-if="row.trainType"><span class="brand-mine-card__tag-label">活动类型</span>{{ row.trainType }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-mine-card__actions">
|
||||
<button type="button" class="brand-mine-card__action" @click="onView(row)"><van-icon name="eye-o"></van-icon>查看介绍</button>
|
||||
<button type="button" class="brand-mine-card__action is-primary" @click="onApply(row)"><van-icon name="edit"></van-icon>查看报名</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<div v-if="!loading && tableData.length === 0" class="brand-mine-empty">
|
||||
<img src="/assets/mobile/img/activity/culture-empty.png" alt="品牌活动报名空状态插画">
|
||||
<div class="brand-mine-empty__title">暂无报名记录</div>
|
||||
<div class="brand-mine-empty__hint">当前筛选条件下暂时没有已报名活动</div>
|
||||
</div>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-container">
|
||||
<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>
|
||||
<van-popup :style="{height: '100%', width: '100%'}" position="right" v-model="infoVisible">
|
||||
<div class="brand-mine-intro-page">
|
||||
<van-nav-bar title="活动介绍" left-text="返回" left-arrow @click-left="infoVisible = false"></van-nav-bar>
|
||||
<div class="brand-mine-intro-scroll">
|
||||
<div class="brand-mine-intro-hero">
|
||||
<div class="brand-mine-intro-hero__icon"><van-icon name="description"></van-icon></div>
|
||||
<div>
|
||||
<div class="brand-mine-intro-hero__title">活动报名须知</div>
|
||||
<div class="brand-mine-intro-hero__subtitle">请仔细阅读活动安排与报名要求</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="infoRow.introduce" class="brand-mine-intro-card" v-html="infoRow.introduce"></div>
|
||||
<div v-else class="brand-mine-intro-card">暂无活动介绍</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
</van-popup>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
components: {
|
||||
"pdf-preview": httpVueLoader("/components/plugins/sysFilePreview/PdfIndex.vue?v=" + new Date().getTime())
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
refreshing: false,
|
||||
imageLoadErrors: {},
|
||||
filterOpened: false,
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
@@ -106,6 +490,12 @@ layout("/layouts/platform_h5.html"){
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hasCover(row) {
|
||||
return !!(row && row.cover && String(row.cover).trim())
|
||||
},
|
||||
handleImageError(row) {
|
||||
this.$set(this.imageLoadErrors, row.id, true)
|
||||
},
|
||||
onView(row) {
|
||||
this.infoRow = row
|
||||
this.infoVisible = true
|
||||
@@ -113,17 +503,45 @@ layout("/layouts/platform_h5.html"){
|
||||
onApply(row) {
|
||||
this.$pjaxReplace('/platform/trainSignUp/apply/list/h5?id=' + row.id + '&dataType=mine')
|
||||
},
|
||||
onReady() {
|
||||
this.doSearch()
|
||||
onLoad() {
|
||||
if(!this.finished) {
|
||||
this.loadActivities(false)
|
||||
}
|
||||
},
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
onRefresh() {
|
||||
this.loadActivities(true)
|
||||
},
|
||||
loadActivities(reset) {
|
||||
if(reset) {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$refs.tableListRef.doSearch()
|
||||
this.tableData = []
|
||||
this.finished = false
|
||||
this.imageLoadErrors = {}
|
||||
}
|
||||
this.loading = true
|
||||
this.$axios.post('/platform/trainSignUp/apply/activityPageData', this.pageForm).then((res) => {
|
||||
if(res.code === 0) {
|
||||
const list = res.data && res.data.list ? res.data.list : []
|
||||
this.tableData = this.pageForm.pageNumber === 1 ? list : this.tableData.concat(list)
|
||||
this.pageForm.totalCount = res.data && res.data.totalCount ? res.data.totalCount : 0
|
||||
this.finished = this.tableData.length >= this.pageForm.totalCount
|
||||
if(!this.finished) {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
this.refreshing = false
|
||||
})
|
||||
},
|
||||
doSearch() {
|
||||
this.loadActivities(true)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadActivities(true)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user