|
@@ -20,26 +20,82 @@
|
|
|
<view class="course-item-content">
|
|
|
<view class="course-title">
|
|
|
<text>{{ course.courseName }}</text>
|
|
|
- <image style="width: 25rpx;height: 25rpx;padding-left: 20rpx;"
|
|
|
+ <!-- 1.隐藏收藏功能 -->
|
|
|
+ <!-- <image style="width: 25rpx;height: 25rpx;padding-left: 20rpx;"
|
|
|
:src="course.hasFavi ? `${FILE_URL}/edu-icon/favi-icon.png` : `${FILE_URL}/edu-icon/no-favi-icon.png`"
|
|
|
@click.stop="collectCourse(course.id, index, course.hasFavi)">
|
|
|
- </image>
|
|
|
+ </image> -->
|
|
|
</view>
|
|
|
<view class="course-type">{{ course.courseType }}</view>
|
|
|
<view class="course-teacher">
|
|
|
<u-icon name="account" size="28"></u-icon>
|
|
|
- {{ course.name }}
|
|
|
+ {{ course.lecturer }}
|
|
|
</view>
|
|
|
<view class="course-date">
|
|
|
<u-icon name="clock" size="28"></u-icon>
|
|
|
{{ getDateWeek(course.courseDate) }}
|
|
|
</view>
|
|
|
- <view class="course-price"
|
|
|
+ <!-- <view class="course-price"
|
|
|
v-if=" (course.viewMode === '3') || (isMember && course.viewMode==='2')">
|
|
|
¥{{ isMember ? course.priceMember : course.price }}元
|
|
|
</view>
|
|
|
- <view v-else style="height: 30rpx;width: 100%;"></view>
|
|
|
- <button :class="['button', getButtonClass(course)]">{{ getButtonText(course) }}</button>
|
|
|
+ <view v-else style="height: 30rpx;width: 100%;"></view> -->
|
|
|
+ <!-- 如果没结束 -->
|
|
|
+ <view class="func" v-if="course.status !== '2' && course.status !== '3'">
|
|
|
+ <!-- 如果是免费,直接显示免费 -->
|
|
|
+ <view v-if="course.viewMode==='1'" class="func-box" style="justify-content: flex-end;">
|
|
|
+ <view class="button free">免费</view>
|
|
|
+ </view>
|
|
|
+ <view v-else-if="course.viewMode==='2' && isMember" class="func-box">
|
|
|
+ <view class="price">¥{{ course.price }}元</view>
|
|
|
+ <view class="button member-free">会员免费</view>
|
|
|
+ </view>
|
|
|
+ <view v-else-if="course.viewMode==='2' && !isMember" class="func-box">
|
|
|
+ <view style="flex: 0 0 auto;display: flex;align-items: center;">
|
|
|
+ <view class="member-free">
|
|
|
+ 会员免费
|
|
|
+ </view>
|
|
|
+ <view class="not-member-price">
|
|
|
+ 非会员:¥{{course.price}}元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view :class="['button', course.hasBuy ? 'free' : 'buy']">
|
|
|
+ {{course.hasBuy ? '已购买' : '立即购买'}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-else-if="course.viewMode==='3' && course.price===course.priceMember"
|
|
|
+ class="func-box">
|
|
|
+ <view class="price">¥{{ course.price }}元</view>
|
|
|
+ <view :class="['button', course.hasBuy ? 'free' : 'buy']">
|
|
|
+ {{course.hasBuy ? '已购买' : '立即购买'}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-else-if="course.viewMode==='3' && course.price!==course.priceMember"
|
|
|
+ class="func-box">
|
|
|
+ <view style="flex: 0 0 auto;display: flex;align-items: center;">
|
|
|
+ <view class="member-free">
|
|
|
+ {{`会员:${course.priceMember}元`}}
|
|
|
+ </view>
|
|
|
+ <view class="not-member-price">
|
|
|
+ 非会员:¥{{course.price}}元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view :class="['button', course.hasBuy ? 'free' : 'buy']">
|
|
|
+ {{course.hasBuy ? '已购买' : '立即购买'}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <button :class="['button', getButtonClass(course)]">{{ getButtonText(course) }}</button> -->
|
|
|
+ <!-- 如果课程结束了 -->
|
|
|
+ <view class="func" v-else>
|
|
|
+ <!-- regType: 0 线下 ;1 线上 -->
|
|
|
+ <view v-if="course.regType==='0'" class="func-box" style="justify-content: flex-end;">
|
|
|
+ <view class="button-long over" @click="toPage(course)">已结束,点击查看活动</view>
|
|
|
+ </view>
|
|
|
+ <view v-if="course.regType==='1'" class="func-box" style="justify-content: flex-end;">
|
|
|
+ <view class="button-long over" @click="toAct(course.actId)">已结束,点击查看回放</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<u-line />
|
|
@@ -99,7 +155,7 @@
|
|
|
const loadText = {
|
|
|
loadmore: '点击或上拉加载更多',
|
|
|
loading: '努力加载中',
|
|
|
- nomore: '实在没有了'
|
|
|
+ nomore: '已加载全部数据'
|
|
|
}
|
|
|
// 展示的课程
|
|
|
const filterCourses = ref([]);
|
|
@@ -116,11 +172,14 @@
|
|
|
viewMode: "免费" // 新增字段,标识课程的付费类型
|
|
|
}, ]);
|
|
|
|
|
|
- // 按钮的文字
|
|
|
+ // 列表样式-按钮的文字
|
|
|
function getButtonText(course) {
|
|
|
- const currentDate = new Date();
|
|
|
- const classDate = new Date(course.courseDate);
|
|
|
+ console.log(course)
|
|
|
+ // const currentDate = new Date();
|
|
|
+ // const classDate = new Date(formatDateS(course.courseDate));
|
|
|
+ // if(currentDate > classDate) {
|
|
|
|
|
|
+ // }
|
|
|
if (course.viewMode === '1') {
|
|
|
return "免费";
|
|
|
}
|
|
@@ -128,7 +187,8 @@
|
|
|
if (isMember.value) return "会员免费";
|
|
|
if (!course.hasBuy && !isMember.value) return "会员免费";
|
|
|
if (course.hasBuy) {
|
|
|
- return currentDate < classDate ? "点击查看" : "点击查看回放";
|
|
|
+ // return currentDate < classDate ? "点击查看" : "点击查看回放";
|
|
|
+ return "点击查看";
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -140,8 +200,7 @@
|
|
|
return "error"; // 默认返回
|
|
|
}
|
|
|
|
|
|
-
|
|
|
- // 按钮的样式
|
|
|
+ // 列表样式-按钮的样式
|
|
|
function getButtonClass(course) {
|
|
|
if (courseMember[course.viewMode] === '免费') return 'free';
|
|
|
if (courseMember[course.viewMode] === '会员免费') {
|
|
@@ -155,17 +214,30 @@
|
|
|
return 'error';
|
|
|
}
|
|
|
|
|
|
+ function formatDateS(dateStr) {
|
|
|
+ return dateStr.replace(" ", "T");
|
|
|
+ }
|
|
|
|
|
|
// 日期格式:xxxx年xx月xx日(星期x)
|
|
|
- function getDateWeek(val) {
|
|
|
- const date = new Date(val);
|
|
|
- const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];
|
|
|
- const year = date.getFullYear();
|
|
|
- const month = date.getMonth() + 1; // 注意:月份从0开始
|
|
|
- const day = date.getDate();
|
|
|
- const dayOfWeek = daysOfWeek[date.getUTCDay()];
|
|
|
- // const result = `${year}年${month}月${day}日(星期${dayOfWeek})`
|
|
|
- return `${year}年${month}月${day}日(星期${dayOfWeek})`
|
|
|
+ function getDateWeek(dateStr) {
|
|
|
+ // 将日期字符串转换为 Date 对象
|
|
|
+ const date = new Date(dateStr.replace(/-/g, '/'));
|
|
|
+ // 检查日期是否有效
|
|
|
+ if (isNaN(date.getTime())) {
|
|
|
+ return dateStr; // 如果无效,返回原字符串
|
|
|
+ }
|
|
|
+ // 获取年月日
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
|
+ const day = String(date.getDate()).padStart(2, '0');
|
|
|
+ // 获取星期几
|
|
|
+ const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
|
|
|
+ const weekday = weekdays[date.getDay()];
|
|
|
+ // 获取时分
|
|
|
+ const hours = String(date.getHours()).padStart(2, '0');
|
|
|
+ const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
|
+ // 组合成新格式
|
|
|
+ return `${year}-${month}-${day}(星期${weekday}) ${hours}:${minutes}`;
|
|
|
}
|
|
|
|
|
|
// 切换搜索框下面的tab
|
|
@@ -176,13 +248,13 @@
|
|
|
pageNumber.value = 1
|
|
|
search(searchForm.value.keyword)
|
|
|
}
|
|
|
-
|
|
|
+ // 搜索
|
|
|
function toSearch(e) {
|
|
|
// 搜索时pageNumber为1
|
|
|
pageNumber.value = 1
|
|
|
search(e)
|
|
|
}
|
|
|
- // 搜索
|
|
|
+ // 获取列表数据
|
|
|
function search(e) {
|
|
|
// 如果是全部,则不传courseType这个值
|
|
|
searchForm.value = {
|
|
@@ -226,7 +298,7 @@
|
|
|
courses.value[index].hasFavi = courses.value[index].hasFavi
|
|
|
}
|
|
|
}
|
|
|
- // 初始化
|
|
|
+ // 初始化:获取分类数据和列表数据
|
|
|
async function init() {
|
|
|
const res = await loadCourseCate()
|
|
|
if (res?.data) {
|
|
@@ -238,19 +310,27 @@
|
|
|
search("");
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+ // 跳转到课程详情页
|
|
|
function toPage(course) {
|
|
|
uni.navigateTo({
|
|
|
url: `/pages/goOnEdu/course/courseDetail/courseDetail?id=${course.id}&title=${course.courseName}`
|
|
|
});
|
|
|
}
|
|
|
-
|
|
|
+ // 加载更多
|
|
|
function loadmore() {
|
|
|
if (courses.value.length === total.value) {
|
|
|
return;
|
|
|
}
|
|
|
search(searchForm.value.keyword);
|
|
|
}
|
|
|
+
|
|
|
+ function toAct(actId){
|
|
|
+ // console.log(actId);
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/dynamic/dynamicDetail/dynamicDetail?id=${actId}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
isMember.value = authStore.userInfo.isMember === 1 ? true : false
|
|
|
init();
|
|
@@ -319,53 +399,117 @@
|
|
|
letter-spacing: 2rpx;
|
|
|
}
|
|
|
|
|
|
+ .func {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-end;
|
|
|
+ font-size: $uni-font-size-2;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ view {
|
|
|
+ margin-bottom: 0rpx;
|
|
|
+ }
|
|
|
+ .func-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ text-align: center;
|
|
|
+ width: 130rpx;
|
|
|
+ }
|
|
|
+ .button-long {
|
|
|
+ text-align: center;
|
|
|
+ width: 270rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ color: $uni-color-error;
|
|
|
+ font-size: $uni-title-font-size-2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .not-member-price {
|
|
|
+ font-size: $uni-font-size-3;
|
|
|
+ color: $uni-text-color-grey;
|
|
|
+ text-align: end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .buy {
|
|
|
+ padding: 6rpx 25rpx;
|
|
|
+ background-color: $uni-color-error;
|
|
|
+ border-radius: $uni-card-border-radius;
|
|
|
+ color: $uni-text-color-inverse;
|
|
|
+ }
|
|
|
+
|
|
|
+ .free {
|
|
|
+ padding: 6rpx 25rpx;
|
|
|
+ background-color: $uni-color-primary;
|
|
|
+ border-radius: $uni-card-border-radius;
|
|
|
+ color: $uni-text-color-inverse;
|
|
|
+ }
|
|
|
+ .over{
|
|
|
+ padding: 6rpx 25rpx;
|
|
|
+ border-radius: $uni-card-border-radius;
|
|
|
+ color: $uni-text-color-inverse;
|
|
|
+ background-color: #8f9092;
|
|
|
+ }
|
|
|
+
|
|
|
+ .member-free {
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ @include backgroundImg('http://www.gzrea.org.cn:8543/icon/wxmp/bg-label.png');
|
|
|
+ color: $uni-text-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.button::after {
|
|
|
content: none;
|
|
|
/* 移除内容 */
|
|
|
}
|
|
|
|
|
|
- .button {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- min-width: 80px;
|
|
|
- padding: 0 40rpx;
|
|
|
- white-space: nowrap;
|
|
|
- height: 45rpx;
|
|
|
- line-height: 45rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- /* padding: 0; */
|
|
|
- border-radius: 50rpx;
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- }
|
|
|
-
|
|
|
- .free {
|
|
|
- background-color: #006af4;
|
|
|
- }
|
|
|
-
|
|
|
- .purchase {
|
|
|
- background-color: #fe0000;
|
|
|
- }
|
|
|
-
|
|
|
- .member-free {
|
|
|
- background-color: transparent;
|
|
|
- background-image: url('http://www.gzrea.org.cn:8543/icon/wxmp/bg-label.png');
|
|
|
- background-size: cover;
|
|
|
- background-repeat: no-repeat;
|
|
|
- color: #000;
|
|
|
- height: initial;
|
|
|
- padding: 6rpx 0 3rpx;
|
|
|
- border-radius: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .replay {
|
|
|
- background-color: #006af4;
|
|
|
- }
|
|
|
-
|
|
|
- .purchased {
|
|
|
- background-color: #006af4;
|
|
|
- }
|
|
|
+ // .button {
|
|
|
+ // position: absolute;
|
|
|
+ // right: 0;
|
|
|
+ // bottom: 0;
|
|
|
+ // min-width: 80px;
|
|
|
+ // padding: 0 40rpx;
|
|
|
+ // white-space: nowrap;
|
|
|
+ // height: 45rpx;
|
|
|
+ // line-height: 45rpx;
|
|
|
+ // font-size: 22rpx;
|
|
|
+ // /* padding: 0; */
|
|
|
+ // border-radius: 50rpx;
|
|
|
+ // color: white;
|
|
|
+ // border: none;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .free {
|
|
|
+ // background-color: #006af4;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .purchase {
|
|
|
+ // background-color: #fe0000;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .member-free {
|
|
|
+ // background-color: transparent;
|
|
|
+ // background-image: url('http://www.gzrea.org.cn:8543/icon/wxmp/bg-label.png');
|
|
|
+ // background-size: cover;
|
|
|
+ // background-repeat: no-repeat;
|
|
|
+ // color: #000;
|
|
|
+ // height: initial;
|
|
|
+ // padding: 6rpx 0 3rpx;
|
|
|
+ // border-radius: 0;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .replay {
|
|
|
+ // background-color: #006af4;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .purchased {
|
|
|
+ // background-color: #006af4;
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
</style>
|