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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user