|
|
@@ -0,0 +1,554 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <!-- 顶部导航 Tab -->
|
|
|
+ <view class="top-nav">
|
|
|
+ <view class="search-cont">
|
|
|
+ <view class="inner">
|
|
|
+ <image class="icon-search" src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/search.png" mode=""></image>
|
|
|
+ <input type="text" @confirm="goSearch" :value="keyword" placeholder="请输入关键字搜索内容" placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
|
|
|
+ </view>
|
|
|
+ <!-- <view class="icon-search">
|
|
|
+ <image @click="showChange(2)" v-if="showType==1" src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/search1.png" mode=""></image>
|
|
|
+ <image @click="showChange(1)" v-if="showType==2" src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/search2.png" mode=""></image>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ <view class="nav-row">
|
|
|
+ <view class="nav-all" :class="{ active: activeId === 'all'}" @tap.stop="onSelectAll" @click.stop="onSelectAll">
|
|
|
+ <text>全部</text>
|
|
|
+ </view>
|
|
|
+ <scroll-view scroll-x class="nav-scroll" :show-scrollbar="false">
|
|
|
+ <view class="nav-inner">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in navList"
|
|
|
+ :key="index"
|
|
|
+ :class="['nav-item', { active: item.id === activeId }]"
|
|
|
+ @tap.stop="onSelectByIndex(index)"
|
|
|
+ @click.stop="onSelectByIndex(index)"
|
|
|
+ >
|
|
|
+ <text>{{ item.categoryName}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 最近学习 内容 -->
|
|
|
+ <scroll-view scroll-y class="scroll-wrap" :show-scrollbar="false">
|
|
|
+ <!-- 有学习记录：按日期分组列表 -->
|
|
|
+ <template v-if="courseList.length > 0">
|
|
|
+ <view class="course-grid">
|
|
|
+ <view
|
|
|
+ v-for="(course, idx) in courseList"
|
|
|
+ :key="idx"
|
|
|
+ class="course-card"
|
|
|
+ @click="onCourseClick(course)"
|
|
|
+ >
|
|
|
+ <view class="card-cover">
|
|
|
+ <image :src="course.cover || '/static/logo.jpg'" mode="aspectFill" class="cover-img"></image>
|
|
|
+ </view>
|
|
|
+ <view class="course-info">
|
|
|
+ <text class="card-title">{{ course.title }}</text>
|
|
|
+ <view class="x-end" style="justify-content: space-between;">
|
|
|
+ <view class="course-meta">
|
|
|
+ <image src="@/static/images/new/renshu.png"></image>
|
|
|
+ <text class="meta-count">{{ course.views }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="btn-watch" @click.stop="onCourseClick(course)">立即观看</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 无学习记录：空态 + 为您精选 -->
|
|
|
+ <template v-else>
|
|
|
+ <view class="empty-state">
|
|
|
+ <!-- <view class="empty-icon"></view> -->
|
|
|
+ <image class="empty-icon" src="@/static/images/new/nodata.png"></image>
|
|
|
+ <text class="empty-text">没有搜索任何内容，换个词试试</text>
|
|
|
+ </view>
|
|
|
+ <view class="recommend-section">
|
|
|
+ <text class="recommend-title">大家都在学习</text>
|
|
|
+ <view class="course-grid" style="padding: 0;">
|
|
|
+ <view
|
|
|
+ v-for="(course, idx) in recommendList"
|
|
|
+ :key="idx"
|
|
|
+ class="course-card"
|
|
|
+ @click="onCourseClick(course)"
|
|
|
+ >
|
|
|
+ <view class="card-cover">
|
|
|
+ <image :src="course.cover || '/static/logo.jpg'" mode="aspectFill" class="cover-img"></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="card-footer">
|
|
|
+ <text class="card-title">{{ course.title }}</text>
|
|
|
+ <view class="x-end" style="justify-content: space-between;">
|
|
|
+ <view class="course-meta">
|
|
|
+ <image src="@/static/images/new/renshu.png"></image>
|
|
|
+ <text class="meta-count">{{ course.views }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="btn-watch" @click.stop="onCourseClick(course)">立即观看</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <view class="bottom-placeholder"></view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
|
|
|
+ tabIndex: 0,
|
|
|
+ activeId:'all',
|
|
|
+ categoryExpand: true,
|
|
|
+ categoryIndex: 0,
|
|
|
+ categories: ['全部', '歌唱艺术', '太极养生', '防骗指南', '手机摄影', '棋牌益智', '用药指导', '膳食营养', '慢病管理'],
|
|
|
+ courseList: [
|
|
|
+ { title: '刘金的《0基础金曲演唱速练课》', views: '9239', cover: '' },
|
|
|
+ { title: '邹方斌讲《毛笔书法修心课》', views: '10.8w', cover: '' },
|
|
|
+ { title: '张斌《元气八段锦》系列课', views: '2.5w', cover: '' },
|
|
|
+ { title: '翔哥精讲摄影课—手机微距拍摄技巧...', views: '100w+', cover: '' },
|
|
|
+ { title: '道家智慧 入门21讲', views: '1.2w', cover: '' },
|
|
|
+ { title: '入门进阶必修 瑜伽呼吸全精讲', views: '3.6w', cover: '' }
|
|
|
+ ],
|
|
|
+ recentList: [
|
|
|
+ {
|
|
|
+ date: '2026-02-08',
|
|
|
+ list: [
|
|
|
+ { title: '歌唱家刘金的《0基础金曲演唱速练课》', progress: 87, cover: '' },
|
|
|
+ { title: '资深编辑邹方斌讲《毛笔书法修心课》', progress: 56, cover: '' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2026-02-01',
|
|
|
+ list: [
|
|
|
+ { title: '张斌《元气八段锦》系列课', progress: 56, cover: '' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ navList:[
|
|
|
+ {id: 37,categoryName: "健康食品"},
|
|
|
+ {id: 35,categoryName: "绿色有机"}
|
|
|
+ ],
|
|
|
+ recommendList: [
|
|
|
+ { title: '刘金的《0基础金曲演唱速练课》', views: '9239', cover: '' },
|
|
|
+ { title: '邹方斌讲《毛笔书法修心课》', views: '10.8w', cover: '' },
|
|
|
+ { title: '张斌《元气八段锦》系列课', views: '2.5w', cover: '' },
|
|
|
+ { title: '翔哥精讲摄影课-手机微距拍摄技巧...', views: '100w+', cover: '' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ // 若无最近学习，可置空 recentList 显示空态
|
|
|
+ // this.recentList = [];
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onSelectAll() {
|
|
|
+ this.$emit('select', { id: 'all', categoryName: '全部' });
|
|
|
+ },
|
|
|
+ onCourseClick(course) {
|
|
|
+ uni.showToast({ title: course.title || '立即观看', icon: 'none' })
|
|
|
+ // uni.navigateTo({ url: '/pages_course/videovip?id=' + (course.id || '') })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ /* 图片箭头旋转类（展开时向上） */
|
|
|
+ .rotate-arrow {
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+.container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #F5F5F5;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+/* 顶部 Tab */
|
|
|
+.top-nav {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: #fff;
|
|
|
+ /* border-bottom: 1rpx solid #f0f0f0; */
|
|
|
+}
|
|
|
+.search-cont{
|
|
|
+ padding: 24rpx 24rpx 40rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ display:flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .inner{
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ height: 72upx;
|
|
|
+ background: #F7F7F7;
|
|
|
+ border-radius: 36upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 30upx;
|
|
|
+ .icon-search{
|
|
|
+ width: 28upx;
|
|
|
+ height: 28upx;
|
|
|
+ margin-right: 20upx;
|
|
|
+ }
|
|
|
+ input{
|
|
|
+ height: 60upx;
|
|
|
+ line-height: 60upx;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .icon-search{
|
|
|
+ margin-left: 10upx;
|
|
|
+ width: 40upx;
|
|
|
+ height: 40upx;
|
|
|
+ image{
|
|
|
+ width: 40upx;
|
|
|
+ height: 40upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+.nav-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 24rpx 24rpx;
|
|
|
+ gap: 30rpx;
|
|
|
+}
|
|
|
+.nav-all {
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: rgba(0,0,0,0.85);
|
|
|
+ line-height: 56rpx;
|
|
|
+}
|
|
|
+.nav-all.active {
|
|
|
+ color: #FF233C;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.nav-scroll {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.nav-inner {
|
|
|
+ display: inline-flex;
|
|
|
+ padding:0;
|
|
|
+ gap: 30rpx;
|
|
|
+}
|
|
|
+.nav-item {
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: rgba(0,0,0,0.85);
|
|
|
+ line-height: 56rpx;
|
|
|
+}
|
|
|
+.nav-item.active {
|
|
|
+ color: #FF233C;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+/* 滚动区 */
|
|
|
+.scroll-wrap {
|
|
|
+ flex: 1;
|
|
|
+ height: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 分类标签 */
|
|
|
+.category-wrap {
|
|
|
+ padding:24rpx 0;
|
|
|
+ border-radius: 0rpx 0rpx 20rpx 20rpx;
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.category-tags {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap:24rpx;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.category-tags.collapsed {
|
|
|
+ max-height: 88rpx;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.tag-item {
|
|
|
+ width: 30%;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background: #f0f0f0;
|
|
|
+}
|
|
|
+.tag-item text {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: rgba(0,0,0,0.85);
|
|
|
+}
|
|
|
+.tag-item.active {
|
|
|
+ background: linear-gradient( 135deg, #FF5267 0%, #FF233C 100%);
|
|
|
+}
|
|
|
+.tag-item.active text {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.expand-btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ width: 166rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ border: 2rpx solid #FF233C;
|
|
|
+}
|
|
|
+.expand-btn text {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #FF233C;
|
|
|
+}
|
|
|
+.expand-btn .arrow {
|
|
|
+ margin-left: 6rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+}
|
|
|
+.expand-btn image{
|
|
|
+ margin-left:10rpx ;
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+}
|
|
|
+/* 课程网格 */
|
|
|
+.course-grid {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding:24rpx;
|
|
|
+ gap: 24rpx 20rpx;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.course-card {
|
|
|
+ display: flex;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 20rpx;
|
|
|
+}
|
|
|
+.course-tag {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ padding: 8rpx 12rpx;
|
|
|
+ background: linear-gradient(transparent, rgba(0,0,0,0.6));
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.course-info {
|
|
|
+ flex: 1;
|
|
|
+ padding-left: 24rpx;
|
|
|
+/* padding: 20rpx 24rpx; */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.course-meta {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ image{
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+.meta-icon {
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-right: 6rpx;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+.meta-count {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #666666;
|
|
|
+}
|
|
|
+.card-cover {
|
|
|
+ position: relative;
|
|
|
+ width: 296rpx;
|
|
|
+ height: 222rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+.cover-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #BB6D6D;
|
|
|
+}
|
|
|
+.card-title {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 50rpx;
|
|
|
+ text-align: justify;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+}
|
|
|
+.card-footer {
|
|
|
+ flex: 1;
|
|
|
+ padding-left: 24rpx;
|
|
|
+ /* padding: 20rpx 24rpx; */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+.card-views {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 44rpx;
|
|
|
+}
|
|
|
+.btn-watch {
|
|
|
+ width: 168rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ text-align: center;
|
|
|
+ background: linear-gradient( 135deg, #FF5267 0%, #FF233C 100%);
|
|
|
+ border-radius: 32rpx;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+
|
|
|
+/* 最近学习 - 按日期分组 */
|
|
|
+.recent-group {
|
|
|
+ padding: 24rpx 24rpx 0;
|
|
|
+}
|
|
|
+.group-date {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+}
|
|
|
+.date-icon {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+}
|
|
|
+.date-text {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 40rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ color: #222222;
|
|
|
+}
|
|
|
+.recent-card {
|
|
|
+ display: flex;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 20rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+}
|
|
|
+.recent-card:last-child{
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+.recent-thumb {
|
|
|
+ position: relative;
|
|
|
+ width: 296rpx;
|
|
|
+ height: 222rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+.thumb-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #BB6D6D;
|
|
|
+}
|
|
|
+.recent-info {
|
|
|
+ flex: 1;
|
|
|
+ padding-left: 24rpx;
|
|
|
+ /* padding: 20rpx 24rpx; */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+.recent-title {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 50rpx;
|
|
|
+ text-align: justify;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+}
|
|
|
+.recent-progress {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: rgba(0,0,0,0.65);
|
|
|
+ line-height: 44rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 空态 */
|
|
|
+.empty-state {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 80rpx 0 48rpx;
|
|
|
+ /* background: linear-gradient(180deg, #fff5f5 0%, #fff 100%); */
|
|
|
+}
|
|
|
+.empty-icon {
|
|
|
+ width: 310rpx;
|
|
|
+ height: 260rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+}
|
|
|
+.empty-text {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: rgba(0,0,0,0.25);
|
|
|
+ line-height: 50rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 为您精选 */
|
|
|
+.recommend-section {
|
|
|
+ padding: 0 24rpx 32rpx;
|
|
|
+}
|
|
|
+.recommend-title {
|
|
|
+ display: block;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 56rpx;
|
|
|
+ padding-bottom: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-placeholder {
|
|
|
+ height: 120rpx;
|
|
|
+}
|
|
|
+</style>
|
