|
|
<template>
|
|
|
<view class="container">
|
|
|
<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
|
|
|
<!-- <view> -->
|
|
|
<scroll-view :scroll-y="true" @scrolltolower="scrollGet" class="list">
|
|
|
<!-- <topBanner v-if="banner_list.length>0" :banner_list="banner_list"></topBanner> -->
|
|
|
<!-- <image class="list-top" :src="base.imgHost('course-top1.png')"></image> -->
|
|
|
<view class="list-top-text">
|
|
|
<view class="list-top-text-title">课程体系</view>
|
|
|
<view class="list-top-text-swiper swiper-with-arrows">
|
|
|
<swiper
|
|
|
:autoplay="false"
|
|
|
:indicator-dots="false"
|
|
|
:circular="true"
|
|
|
:interval="5000"
|
|
|
:duration="400"
|
|
|
previous-margin="0rpx"
|
|
|
next-margin="80rpx"
|
|
|
:current="swiperCurrent"
|
|
|
@change="onSwiperChange"
|
|
|
style="width:100%;height:614rpx;margin-left: 30rpx;"
|
|
|
>
|
|
|
<swiper-item v-for="(img, idx) in bannerImages" :key="'banner-'+idx">
|
|
|
<image :src="img" style="width:632rpx;height:614rpx;border-radius:20rpx;" mode="aspectFill" />
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
<!-- 左右箭头 -->
|
|
|
<view class="arrow arrow-left" @click="prevSlide">‹</view>
|
|
|
<view class="arrow arrow-right" @click="nextSlide">›</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- <image mode="widthFix" @click="goCourse" class="list-img" :src="base.imgHost('course-top.png')"></image> -->
|
|
|
<view v-if="hasData" style="padding-bottom: 200rpx;">
|
|
|
<!-- 10进行中 40已结束 -->
|
|
|
<view class="list-item" :class="{'list-end':item.sign_status===40}" v-for="(item, index) in course_list" :key="item.id || item.course_id || index">
|
|
|
<view class="list-item-wrap">
|
|
|
<view class="list-item-wrap-time">
|
|
|
<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 class="flexbetween"
|
|
|
v-if="convertToChineseMonth(item.start_date,item.end_date).hasEndYear">
|
|
|
<text>{{convertToChineseMonth(item.start_date,item.end_date).year}}</text>
|
|
|
<text>{{convertToChineseMonth(item.start_date,item.end_date).endyear}}</text>
|
|
|
</view>
|
|
|
<!-- 不跨年 -->
|
|
|
<view v-else class="flexbetween" style="justify-content: center;">
|
|
|
<text>{{convertToChineseMonth(item.start_date,item.end_date).year}}</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>
|
|
|
<view class="list-item-wrap-status">
|
|
|
<view class="list-item-wrap-status-type">
|
|
|
<text>{{item.is_fee===1?'付费':'公益'}}</text>
|
|
|
</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>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
<view class="nodata" v-else>
|
|
|
<u-empty text="当前没有课程" mode="data"></u-empty>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
|
|
|
<tabbar :currentPage="1"></tabbar>
|
|
|
<view class="modal">
|
|
|
<u-popup v-model="showRegister" mode="bottom">
|
|
|
<view>
|
|
|
<view class="modal-tip">提示</view>
|
|
|
<view class="modal-content">
|
|
|
<view>如您已是我方校友，请先绑定账号</view>
|
|
|
<view @click="goBind" class="modal-bind">
|
|
|
去绑定
|
|
|
</view>
|
|
|
<view>如您还不是我方校友，请先注册</view>
|
|
|
<view @click="toRegister" class="modal-register">
|
|
|
去注册
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- <view class="modal-btn">
|
|
|
<view @click="goBind" class="modal-btn-bind">
|
|
|
去绑定
|
|
|
</view>
|
|
|
<view @click="toRegister" class="modal-btn-register">
|
|
|
去注册
|
|
|
</view>
|
|
|
</view> -->
|
|
|
</view>
|
|
|
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import tabbar from '@/components/tabbar/tabbar.vue';
|
|
|
import topBanner from '@/components/topBanner.vue'
|
|
|
export default {
|
|
|
components: {
|
|
|
tabbar,
|
|
|
topBanner
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
showRegister: false,
|
|
|
banner_list: [],
|
|
|
bannerImages: [
|
|
|
this.base.imgHost('type1.png'),
|
|
|
this.base.imgHost('type2.png'),
|
|
|
this.base.imgHost('type3.png'),
|
|
|
this.base.imgHost('type4.png')
|
|
|
],
|
|
|
swiperCurrent: 0,
|
|
|
hasMobile: false,
|
|
|
go_course_id: '',
|
|
|
hasData: true,
|
|
|
current_page: 1,
|
|
|
total_page: 0,
|
|
|
load_status: '',
|
|
|
course_list: [],
|
|
|
}
|
|
|
},
|
|
|
onShareAppMessage() {
|
|
|
return {
|
|
|
title: "苏州科技商学院",
|
|
|
imageUrl: "/static/share.jpg"
|
|
|
}
|
|
|
},
|
|
|
onShareTimeline() {
|
|
|
return {
|
|
|
title: "苏州科技商学院",
|
|
|
imageUrl: "/static/share.jpg"
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
// this.getBannerList()
|
|
|
|
|
|
this.getCourseList()
|
|
|
},
|
|
|
onShow() {
|
|
|
this.showRegister = false
|
|
|
let user = uni.getStorageSync("stbc1_lifeData") ? uni.getStorageSync("stbc1_lifeData").vuex_user : {}
|
|
|
if (!this.base.isNull(user.mobile)) {
|
|
|
this.hasMobile = true
|
|
|
} else {
|
|
|
this.hasMobile = false
|
|
|
}
|
|
|
},
|
|
|
onReachBottom() {
|
|
|
// console.log("this.onReachBottom", this.current_page, this.total_page)
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
onSwiperChange(e){
|
|
|
this.swiperCurrent = e.detail.current || 0
|
|
|
},
|
|
|
prevSlide(){
|
|
|
const total = this.bannerImages.length
|
|
|
this.swiperCurrent = (this.swiperCurrent - 1 + total) % total
|
|
|
},
|
|
|
nextSlide(){
|
|
|
const total = this.bannerImages.length
|
|
|
this.swiperCurrent = (this.swiperCurrent + 1) % total
|
|
|
},
|
|
|
goCourse() {
|
|
|
uni.navigateTo({
|
|
|
url: '/packages/mycourse/index'
|
|
|
})
|
|
|
},
|
|
|
scrollGet() {
|
|
|
if (!this.hasData) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
if (this.current_page > this.total_page) {
|
|
|
this.base.toast('没有更多了')
|
|
|
return
|
|
|
}
|
|
|
this.current_page = this.current_page + 1
|
|
|
this.getCourseList()
|
|
|
},
|
|
|
async getCourseList() {
|
|
|
this.load_status = 'loading'
|
|
|
const res = await this.$u.api.courseIndex({
|
|
|
page: this.current_page,
|
|
|
page_size: 10,
|
|
|
status: 1
|
|
|
})
|
|
|
this.total_page = res.last_page
|
|
|
if (res.data.length === 0 && this.current_page === 1) {
|
|
|
this.hasData = false
|
|
|
}
|
|
|
this.course_list.push(...res.data)
|
|
|
},
|
|
|
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];
|
|
|
let hasEndYear = false
|
|
|
if (endyear > year) {
|
|
|
hasEndYear = true
|
|
|
}
|
|
|
return {
|
|
|
year: year,
|
|
|
month: chineseMonth,
|
|
|
day: day,
|
|
|
noend: false,
|
|
|
endyear: endyear,
|
|
|
endmonth: endchineseMonth,
|
|
|
endday: endday,
|
|
|
hasEndYear: hasEndYear
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// 报名
|
|
|
toDetail(item) {
|
|
|
uni.navigateTo({
|
|
|
url: '/packages/course/detail?id=' + item.id
|
|
|
})
|
|
|
return
|
|
|
this.go_course_id = item.id
|
|
|
// 收费的不限制报名人数 total没值也不限制
|
|
|
|
|
|
// 免费的限制报名人数
|
|
|
if (!item.is_fee && (item.total && item.total > 0)) {
|
|
|
// 报名人数已满
|
|
|
if (item.course_signs_count >= item.total) {
|
|
|
this.base.toast("当前报名人数已满")
|
|
|
return
|
|
|
}
|
|
|
}
|
|
|
if (!this.hasMobile) {
|
|
|
this.showRegister = true
|
|
|
return
|
|
|
} else {
|
|
|
uni.navigateTo({
|
|
|
url: '/packages/apply/index?id=' + this.go_course_id
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
// 去绑定登录
|
|
|
goBind() {
|
|
|
console.log("qwe")
|
|
|
uni.navigateTo({
|
|
|
url: '/packages/register/login?id=' + this.go_course_id
|
|
|
})
|
|
|
},
|
|
|
// 去注册
|
|
|
toRegister() {
|
|
|
uni.navigateTo({
|
|
|
url: '/packages/register/index?id=' + this.go_course_id
|
|
|
})
|
|
|
},
|
|
|
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
|
|
|
})
|
|
|
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.container {
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
overflow: hidden;
|
|
|
|
|
|
.cbg {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
}
|
|
|
|
|
|
.swiper-with-arrows {
|
|
|
position: relative;
|
|
|
}
|
|
|
.arrow {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
width: 56rpx;
|
|
|
height: 56rpx;
|
|
|
line-height: 56rpx;
|
|
|
text-align: center;
|
|
|
border-radius: 56rpx;
|
|
|
background: rgba(0,0,0,0.3);
|
|
|
color: #fff;
|
|
|
z-index: 10;
|
|
|
font-size: 40rpx;
|
|
|
}
|
|
|
.arrow-left { left: 10rpx; }
|
|
|
.arrow-right { right: 10rpx; }
|
|
|
|
|
|
|
|
|
|
|
|
.list {
|
|
|
height: 100vh;
|
|
|
padding: 30rpx 0;
|
|
|
position: relative;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
overflow: scroll;
|
|
|
|
|
|
.nodata {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
&-top{
|
|
|
width: 95%;
|
|
|
display: block;
|
|
|
margin-bottom: 30rpx;
|
|
|
&-text{
|
|
|
margin-bottom: 40rpx;
|
|
|
&-title{
|
|
|
color:#97714c;
|
|
|
margin:30rpx;
|
|
|
margin-top:0;
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
&-img {
|
|
|
width: calc(100% - 60rpx);
|
|
|
height: 125rpx;
|
|
|
display: block;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
&-item {
|
|
|
margin: 30rpx;
|
|
|
background-color: #fff;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
box-shadow: 0 -1rpx 20rpx #bed2ec;
|
|
|
border-radius: 10rpx;
|
|
|
|
|
|
&-wrap {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
|
|
|
&-time {
|
|
|
padding: 30rpx;
|
|
|
background: linear-gradient(to bottom, #5e5fbc, #0d0398);
|
|
|
border-radius: 10rpx 0 0 10rpx;
|
|
|
color: #fff;
|
|
|
width: 170rpx;
|
|
|
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;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.bigFont {
|
|
|
font-size: 42rpx;
|
|
|
// border-bottom: 1rpx solid #ddd;
|
|
|
}
|
|
|
|
|
|
.flexbetween {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
&-date {
|
|
|
padding-bottom: 15rpx;
|
|
|
border-bottom: 1rpx solid #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
&-status {
|
|
|
padding-top: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-status {
|
|
|
// border-right: 1px solid #ddd;
|
|
|
width: calc(100% - 170rpx);
|
|
|
padding: 30rpx;
|
|
|
position: relative;
|
|
|
|
|
|
&-type {
|
|
|
text-align: right;
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
&>text {
|
|
|
border-radius: 28rpx 0 28rpx 28rpx;
|
|
|
color: #fff;
|
|
|
padding: 5rpx 15rpx;
|
|
|
background: linear-gradient(to right, #5e5fbc, #0d0398, );
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
&-title {
|
|
|
height: 80rpx;
|
|
|
overflow: hidden;
|
|
|
margin-bottom: 20rpx;
|
|
|
display: -webkit-box;
|
|
|
-webkit-box-orient: vertical;
|
|
|
-webkit-line-clamp: 2;
|
|
|
/* 定义文本的行数 */
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
&-label {
|
|
|
text-align: right;
|
|
|
|
|
|
text {
|
|
|
display: inline-block;
|
|
|
padding: 5rpx 20rpx;
|
|
|
border: 1px solid #cfcfcf;
|
|
|
border-radius: 30rpx;
|
|
|
display: inline-block;
|
|
|
position: relative;
|
|
|
|
|
|
&:before {
|
|
|
content: " ";
|
|
|
background: #00b318;
|
|
|
display: inline-block;
|
|
|
width: 10rpx;
|
|
|
height: 10rpx;
|
|
|
top: -5rpx;
|
|
|
position: relative;
|
|
|
// top: -2rpx;
|
|
|
margin-right: 14rpx;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
// 已结束
|
|
|
&-end {
|
|
|
.list-item-wrap {
|
|
|
width: 100%;
|
|
|
|
|
|
&-time {
|
|
|
background: linear-gradient(to bottom, #e4cdb4, #c69c6d);
|
|
|
}
|
|
|
|
|
|
&-status {
|
|
|
border-right: none;
|
|
|
|
|
|
&-type {
|
|
|
&>text {
|
|
|
background: linear-gradient(to right, #e4cdb4, #c69c6d);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-label {
|
|
|
text {
|
|
|
&:before {
|
|
|
content: " ";
|
|
|
background: #efa36e;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.list-item-btn {
|
|
|
display: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.modal {
|
|
|
::v-deep .u-drawer-bottom {
|
|
|
border-radius: 40rpx;
|
|
|
}
|
|
|
|
|
|
&-tip {
|
|
|
text-align: center;
|
|
|
padding: 30rpx;
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
|
|
|
&-content {
|
|
|
height: 450rpx;
|
|
|
padding: 0 30rpx;
|
|
|
font-size: 32rpx;
|
|
|
text-align: center;
|
|
|
|
|
|
&>view {
|
|
|
margin: 30rpx auto;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-bind {
|
|
|
width: 45%;
|
|
|
text-align: center;
|
|
|
margin: 0 auto;
|
|
|
color: #fff;
|
|
|
border-radius: 30rpx;
|
|
|
padding: 20rpx;
|
|
|
background: linear-gradient(to right, #e4cdb4, #c69c6d);
|
|
|
}
|
|
|
|
|
|
&-register {
|
|
|
width: 45%;
|
|
|
text-align: center;
|
|
|
margin: 0 auto;
|
|
|
color: #fff;
|
|
|
border-radius: 30rpx;
|
|
|
padding: 20rpx;
|
|
|
background: linear-gradient(to right, #5e5fbc, #0d0398);
|
|
|
}
|
|
|
|
|
|
&-btn {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
padding: 30rpx;
|
|
|
|
|
|
&>view {
|
|
|
width: 45%;
|
|
|
text-align: center;
|
|
|
margin: 0 auto;
|
|
|
color: #fff;
|
|
|
border-radius: 30rpx;
|
|
|
padding: 20rpx;
|
|
|
}
|
|
|
|
|
|
&-bind {
|
|
|
background: linear-gradient(to right, #e4cdb4, #c69c6d);
|
|
|
}
|
|
|
|
|
|
&-register {
|
|
|
background: linear-gradient(to right, #5e5fbc, #0d0398);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
