|
|
|
|
@ -3,18 +3,42 @@
|
|
|
|
|
<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
|
|
|
|
|
<!-- <view> -->
|
|
|
|
|
<scroll-view :scroll-y="true" @scrolltolower="scrollGet" class="list">
|
|
|
|
|
<topBanner :banner_list="banner_list"></topBanner>
|
|
|
|
|
<topBanner v-if="banner_list.length>0" :banner_list="banner_list"></topBanner>
|
|
|
|
|
<view v-if="hasData" style="padding-bottom: 200rpx;">
|
|
|
|
|
<!-- 10进行中 40已结束 -->
|
|
|
|
|
<view class="list-item" :class="{'list-end':item.sign_status===40}" v-for="item in course_list">
|
|
|
|
|
<view class="list-item-wrap">
|
|
|
|
|
<view class="list-item-wrap-time">
|
|
|
|
|
<view>
|
|
|
|
|
<view class="list-item-wrap-time-date">
|
|
|
|
|
<view>{{convertToChineseMonth(item.sign_start_date).month}}</view>
|
|
|
|
|
<view class="bigFont">{{convertToChineseMonth(item.sign_start_date).day}}</view>
|
|
|
|
|
<view>{{convertToChineseMonth(item.sign_start_date).year}}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view>
|
|
|
|
|
<view class="list-item-wrap-time-date" v-if="item.start_date">
|
|
|
|
|
<!-- 没有结束时间 或开始结束相等 -->
|
|
|
|
|
<block v-if="convertToChineseMonth(item.start_date,item.end_date).noend">
|
|
|
|
|
<view>{{convertToChineseMonth(item.start_date,item.end_date).month}}</view>
|
|
|
|
|
<view class="bigFont">
|
|
|
|
|
{{convertToChineseMonth(item.start_date,item.end_date).day}}</view>
|
|
|
|
|
<view>{{convertToChineseMonth(item.start_date,item.end_date).year}}</view>
|
|
|
|
|
</block>
|
|
|
|
|
<block v-else>
|
|
|
|
|
<view class="flexbetween">
|
|
|
|
|
<text>{{convertToChineseMonth(item.start_date,item.end_date).month}}</text>
|
|
|
|
|
<text>{{convertToChineseMonth(item.start_date,item.end_date).endmonth}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="bigFont flexbetween">
|
|
|
|
|
<text>{{convertToChineseMonth(item.start_date,item.end_date).day}}</text>
|
|
|
|
|
<text>-</text>
|
|
|
|
|
<text>{{convertToChineseMonth(item.start_date,item.end_date).endday}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view>
|
|
|
|
|
<text>{{convertToChineseMonth(item.start_date,item.end_date).year}}</text>
|
|
|
|
|
<!-- <text>{{convertToChineseMonth(item.start_date,item.end_date).endyear}}</text> -->
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
</block>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="list-item-wrap-time-date" v-else>
|
|
|
|
|
<view class="bigFont" style="font-size: 36rpx;">开课</view>
|
|
|
|
|
<view class="bigFont" style="font-size: 36rpx;">待定</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="list-item-wrap-time-status">报名{{item.sign_date_status}}</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
@ -22,10 +46,13 @@
|
|
|
|
|
<view class="list-item-wrap-status-type">
|
|
|
|
|
<text>{{item.is_fee===1?'付费':'公益'}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="list-item-wrap-status-title">{{item.name}}</view>
|
|
|
|
|
<view class="list-item-wrap-status-title">
|
|
|
|
|
<text v-if="item.type">{{item.type_detail?item.type_detail.name+' | ':''}}</text>
|
|
|
|
|
{{item.name}}
|
|
|
|
|
</view>
|
|
|
|
|
<view class="list-item-wrap-status-label">
|
|
|
|
|
<text v-if="item.sign_status===10" @click="toDetail(item)">我要报名</text>
|
|
|
|
|
<text v-else @click="toDetail(item)">查看详情</text>
|
|
|
|
|
<text v-else @click="toDetail(item)">查看详情</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
@ -146,23 +173,52 @@
|
|
|
|
|
}
|
|
|
|
|
this.course_list.push(...res.data)
|
|
|
|
|
},
|
|
|
|
|
convertToChineseMonth(dateString, dateStatus) {
|
|
|
|
|
// 解析日期字符串
|
|
|
|
|
const dateParts = dateString.split('-');
|
|
|
|
|
const year = parseInt(dateParts[0], 10);
|
|
|
|
|
const monthNumber = parseInt(dateParts[1], 10);
|
|
|
|
|
const day = parseInt(dateParts[2], 10);
|
|
|
|
|
|
|
|
|
|
// 定义中文月份
|
|
|
|
|
const chineseMonths = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
|
|
|
|
|
|
|
|
|
|
// 获取中文月份
|
|
|
|
|
const chineseMonth = chineseMonths[monthNumber - 1];
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
year: year,
|
|
|
|
|
month: chineseMonth,
|
|
|
|
|
day: day
|
|
|
|
|
convertToChineseMonth(startDate, endDate) {
|
|
|
|
|
// 解析日期字符串
|
|
|
|
|
const dateParts = startDate.split('-');
|
|
|
|
|
const year = parseInt(dateParts[0], 10);
|
|
|
|
|
const monthNumber = parseInt(dateParts[1], 10);
|
|
|
|
|
const day = parseInt(dateParts[2], 10);
|
|
|
|
|
|
|
|
|
|
// 定义中文月份
|
|
|
|
|
let chineseMonths = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
|
|
|
|
|
// 获取中文月份
|
|
|
|
|
const chineseMonth = chineseMonths[monthNumber - 1];
|
|
|
|
|
// 结束时间为空 只显示开始时间
|
|
|
|
|
if (this.base.isNull(endDate)) {
|
|
|
|
|
return {
|
|
|
|
|
year: year,
|
|
|
|
|
month: chineseMonth,
|
|
|
|
|
day: day,
|
|
|
|
|
noend: true
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
// 开始结束时间相等 只显示开始时间
|
|
|
|
|
if (startDate == endDate) {
|
|
|
|
|
return {
|
|
|
|
|
year: year,
|
|
|
|
|
month: chineseMonth,
|
|
|
|
|
day: day,
|
|
|
|
|
noend: true
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
|
|
const enddateParts = endDate.split('-');
|
|
|
|
|
const endyear = parseInt(enddateParts[0], 10);
|
|
|
|
|
const endmonthNumber = parseInt(enddateParts[1], 10);
|
|
|
|
|
const endday = parseInt(enddateParts[2], 10);
|
|
|
|
|
console.log(endmonthNumber, chineseMonths)
|
|
|
|
|
const endchineseMonth = chineseMonths[endmonthNumber - 1];
|
|
|
|
|
return {
|
|
|
|
|
year: year,
|
|
|
|
|
month: chineseMonth,
|
|
|
|
|
day: day,
|
|
|
|
|
noend: false,
|
|
|
|
|
endyear: endyear,
|
|
|
|
|
endmonth: endchineseMonth,
|
|
|
|
|
endday: endday,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 报名
|
|
|
|
|
@ -207,12 +263,12 @@
|
|
|
|
|
async getBannerList() {
|
|
|
|
|
const res = await this.$u.api.otherBanner({
|
|
|
|
|
position: 2,
|
|
|
|
|
})
|
|
|
|
|
if(res.length>0){
|
|
|
|
|
this.banner_list = res.sort((a,b)=>{a.sort-b.sort})
|
|
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
this.banner_list = [{}]
|
|
|
|
|
})
|
|
|
|
|
if (res.length > 0) {
|
|
|
|
|
this.banner_list = res.sort((a, b) => {
|
|
|
|
|
a.sort - b.sort
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
@ -262,6 +318,7 @@
|
|
|
|
|
&-wrap {
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
&-time {
|
|
|
|
|
padding: 30rpx;
|
|
|
|
|
background: linear-gradient(to bottom, #5e5fbc, #0d0398);
|
|
|
|
|
@ -271,29 +328,39 @@
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 0rpx;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
&>view {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
width:100%;
|
|
|
|
|
padding:25rpx;
|
|
|
|
|
>view{
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 25rpx;
|
|
|
|
|
|
|
|
|
|
>view {
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bigFont {
|
|
|
|
|
font-size: 50rpx;
|
|
|
|
|
font-size: 42rpx;
|
|
|
|
|
// border-bottom: 1rpx solid #ddd;
|
|
|
|
|
}
|
|
|
|
|
&-date{
|
|
|
|
|
padding-bottom:15rpx;
|
|
|
|
|
border-bottom: 1rpx solid #fff;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
&-status{
|
|
|
|
|
padding-top:10rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.flexbetween {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-date {
|
|
|
|
|
padding-bottom: 15rpx;
|
|
|
|
|
border-bottom: 1rpx solid #fff;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-status {
|
|
|
|
|
padding-top: 10rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -378,14 +445,14 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-label {
|
|
|
|
|
text{
|
|
|
|
|
&:before {
|
|
|
|
|
content: " ";
|
|
|
|
|
background: #efa36e;
|
|
|
|
|
}
|
|
|
|
|
&-label {
|
|
|
|
|
text {
|
|
|
|
|
&:before {
|
|
|
|
|
content: " ";
|
|
|
|
|
background: #efa36e;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
