You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
477 lines
12 KiB
477 lines
12 KiB
<template>
|
|
<BaseContainer class="goodsClass" :fixedNav="false">
|
|
<view class="header"
|
|
:style="'padding-top:' + (menutop * 2 + 58 + 38) + 'rpx;'">
|
|
<view class="search"
|
|
@click="getsearch()"
|
|
:style="{background: scrollTop > 10 ? '#f5f5f5' : 'transparent', paddingTop: (menutop * 2) + 'rpx', paddingBottom: '20rpx', height: (menutop * 2 + 58 + 20) + 'rpx'}"
|
|
>
|
|
<view>
|
|
<image class="image_icon" :src="getImgPath('/public/images/icon.png')" mode="aspectFill" />
|
|
<view class="name">
|
|
搜索课程讲师
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<Carousel v-if="bannerList.length > 0" :bannerList="bannerList"></Carousel>
|
|
</view>
|
|
<!--功能菜单-->
|
|
<view v-if="gradeCate.length" class="nav">
|
|
<view class="acea-row nav-list">
|
|
<view class="item" :key="index" v-for="(item, index) in gradeCate" @click="showCateCourse(item)">
|
|
<view class="pictrue">
|
|
<image v-if="item.name !== '全部分类'" :src="item.pic" mode="aspectFit"/>
|
|
<image v-else :src="getImgPath('/static/frontend/more.png')" mode="aspectFit"/>
|
|
</view>
|
|
<view class="text">{{ item.name }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 广告 -->
|
|
<view class="advert">
|
|
<image :src="advertList[0].banner" mode="aspectFill"></image>
|
|
</view>
|
|
|
|
<template v-for="(item, index) in indexMenu">
|
|
<view v-if="specialData[item.key] && specialData[item.key].length > 0" :key="index" class="special-content">
|
|
<view class="special-content-title">
|
|
{{ item.menuName }}
|
|
<text v-if="item.menuName !== '线下课堂'" class="more-special" @click="getsearch(3)">更多 ></text>
|
|
</view>
|
|
<line-style-course v-if="item.menuName === '我的课程'" :specialList="specialData[item.key]" @detail="handleSpecialClick"></line-style-course>
|
|
<square-style-course v-if="item.menuName === '热门课程'" :specialList="specialData[item.key]" @detail="handleSpecialClick"></square-style-course>
|
|
<offline-style-course v-if="item.menuName === '线下课堂'" :specialList="specialData[item.key]" @detail="handleSpecialClick"></offline-style-course>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- <view class="flex-auto pos">
|
|
<scroll-view scroll-y class="abs full" @scrolltolower="getSpecialList">
|
|
<view class="public_list goodList" v-if="updateSpecialList.length">
|
|
<view @click="handleSpecialClick(item)" v-for="item in updateSpecialList" :key="item.id"
|
|
class="item acea-row">
|
|
<view class="pictrue">
|
|
<image :src="item.image" mode="aspectFill" :alt="item.title" />
|
|
<view class="label">{{ item.special_type }}</view>
|
|
</view>
|
|
<view class="text">
|
|
<view class="title acea-row row-middle">
|
|
<view class="name line1">{{ item.title }}</view>
|
|
</view>
|
|
<view class="labelList">
|
|
<text class="labelItem" :key="index" v-for="(label, index) in item.label">{{ label }}</text>
|
|
</view>
|
|
<view class="acea-row row-middle row-between">
|
|
<view>
|
|
<view class="money" v-if="item.money > 0">
|
|
¥<text>{{ item.money }}</text>
|
|
</view>
|
|
<view class="free" v-else>免费</view>
|
|
<text v-if="!item.is_light && item.type != 4" class="total">共{{ item.count }}节</text>
|
|
</view>
|
|
<view class="num">{{ item.browse_count }}人已学习</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="col-12"></view>
|
|
</view>
|
|
<view v-if="loadend && !specialList.length">
|
|
<image class="nothing" :src="getImgPath('/wap/first/zsff/images/no_data_available.png')" />
|
|
</view>
|
|
<view v-else class="loading-line" >
|
|
<text v-if="loading" class="fa fa-spinner loadingpic" style="font-size: 40rpx"></text>
|
|
<text>{{ loadTitle || "加载更多" }}</text>
|
|
</view>
|
|
<view style="height: var(--tab-bar-height)"></view>
|
|
</scroll-view>
|
|
</view> -->
|
|
</BaseContainer>
|
|
</template>
|
|
|
|
<script>
|
|
import { getSpecialList, getSpecialIndexData, } from "@/api/special";
|
|
import Carousel from '@/components/Carousel/index.vue';
|
|
import RecommendPoster from "@/components/RecommendPoster/index.vue";
|
|
import LineStyleCourse from '@/components/Course/lineStyleCourse.vue';
|
|
import SquareStyleCourse from '@/components/Course/squareStyleCourse.vue';
|
|
import OfflineStyleCourse from '@/components/Course/offlineStyleCourse.vue';
|
|
|
|
const app = getApp();
|
|
export default {
|
|
components: {
|
|
Carousel,
|
|
RecommendPoster,
|
|
LineStyleCourse,
|
|
SquareStyleCourse,
|
|
OfflineStyleCourse,
|
|
},
|
|
data() {
|
|
return {
|
|
bannerList: [],
|
|
advertList: [
|
|
{
|
|
"id": 46,
|
|
"title": "广告1",
|
|
"url": "#",
|
|
"banner": "https://mytest101011.oss-cn-shenzhen.aliyuncs.com/d588f202305161726583206.png",
|
|
"sort": "0"
|
|
}
|
|
],
|
|
gradeCate: [],
|
|
specialList: [],
|
|
loadTitle: "",
|
|
page: 1,
|
|
limit: 10,
|
|
loading: false,
|
|
loadend: false,
|
|
count: 0,
|
|
menutop:10,
|
|
indexMenu: [
|
|
{ menuName: '我的课程', key: 'my_course' },
|
|
{ menuName: '热门课程', key: 'hot_course' },
|
|
{ menuName: '线下课堂', key: 'offline_courses' },
|
|
],
|
|
specialData: [],
|
|
scrollTop: 0,
|
|
};
|
|
},
|
|
onLoad() {
|
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
/* #ifdef MP-WEIXIN || MP-KUAISHOU */
|
|
this.menutop = menuButtonInfo.top;
|
|
/* #endif */
|
|
/* #ifdef APP-PLUS */
|
|
let platform = uni.getSystemInfoSync().platform
|
|
if(platform === 'ios'){
|
|
this.menutop = 60;
|
|
}else{
|
|
this.menutop = 40;
|
|
}
|
|
/* #endif */
|
|
/* #ifdef MP-TOUTIAO */
|
|
this.menutop = 10;
|
|
/* #endif */
|
|
|
|
},
|
|
onPageScroll(e) {
|
|
this.scrollTop = e.scrollTop;
|
|
},
|
|
onShow() {
|
|
this.getSpecialIndexData();
|
|
},
|
|
onShareAppMessage() {
|
|
return {};
|
|
},
|
|
onShareTimeline() {
|
|
return {};
|
|
},
|
|
methods: {
|
|
getsearch(key){
|
|
uni.navigateTo({
|
|
url: `/pages/special/search?specialType=${key || ''}`
|
|
})
|
|
},
|
|
showCateCourse(item) {
|
|
if (item.name === '全部分类') {
|
|
|
|
} else {
|
|
uni.navigateTo({
|
|
url: `/pages/special/specialCateCourse?name=${item.name}&gradeId=${item.grade_id}&subjectId=${item.id}`,
|
|
})
|
|
}
|
|
},
|
|
showLoginPage() {
|
|
this.$util.jumpLogin(this)
|
|
},
|
|
handleSpecialClick(item) {
|
|
const url = item.is_light
|
|
? '/pages/special/single_details?id=' + item.id
|
|
: '/pages/special/details?id=' + item.id;
|
|
|
|
// this.$util.checkLogin(() => {
|
|
uni.navigateTo({
|
|
url,
|
|
});
|
|
// }, this.showLoginPage);
|
|
},
|
|
// 课程列表
|
|
async getSpecialList() {
|
|
if (this.loading || this.loadend) {
|
|
return;
|
|
}
|
|
this.loading = true;
|
|
this.loadTitle = "";
|
|
uni.showLoading({
|
|
mask: true,
|
|
});
|
|
try {
|
|
const { data, code, msg } = await getSpecialList({
|
|
grade_id: this.gradeId,
|
|
subject_id: this.subjectId,
|
|
search: this.search,
|
|
page: this.page++,
|
|
limit: this.limit,
|
|
});
|
|
this.loading = false;
|
|
if (code != 200) {
|
|
uni.showModal({
|
|
title: msg,
|
|
});
|
|
} else {
|
|
this.specialList = this.specialList.concat(data);
|
|
this.loadend = this.limit > data.length;
|
|
this.loadTitle = this.loadend ? "已全部加载完" : "上拉加载更多";
|
|
}
|
|
} catch (err) {
|
|
this.loading = false;
|
|
console.log(err);
|
|
}
|
|
uni.hideLoading();
|
|
},
|
|
async getSpecialIndexData() {
|
|
try {
|
|
const { data, code, msg } = await getSpecialIndexData();
|
|
|
|
this.loading = false;
|
|
if (code != 200) {
|
|
uni.showToast({
|
|
title: msg,
|
|
});
|
|
} else {
|
|
console.log(data, 646);
|
|
const { banner, category_list } = data;
|
|
this.bannerList = banner;
|
|
this.gradeCate = category_list;
|
|
// .concat([{
|
|
// grade_id: 0,
|
|
// name: '全部分类',
|
|
// }]);
|
|
this.specialData = { ...data };
|
|
console.log(this.gradeCate);
|
|
}
|
|
} catch (err) {
|
|
this.loading = false;
|
|
console.log(err);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
page{
|
|
background: #F7F8F9;
|
|
}
|
|
|
|
|
|
</style>
|
|
<style lang="scss">
|
|
@import "@/static/style/good.scss";
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.grade-item{
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #7A808A;
|
|
white-space: inherit;
|
|
}
|
|
.grade-item.cur{
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #23272E;
|
|
&.cur {
|
|
&::before {
|
|
width: 32rpx;
|
|
height: 8rpx;
|
|
background: #1D8DFF;
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/ ::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
-webkit-appearance: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.free {
|
|
margin-top: 10rpx;
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
line-height: 38rpx;
|
|
color: #ff6b00;
|
|
}
|
|
|
|
.nothing {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 414rpx;
|
|
height: 336rpx;
|
|
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.goodsClass{
|
|
background: #F4F4F4;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
/* #ifdef MP-WEIXIN */
|
|
::v-deep .base-container{
|
|
background: #F4F4F4;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
/* #endif */
|
|
.goodsClass .header {
|
|
background: linear-gradient(to top, transparent 0%, #f4f4f4 20%, #D3F2FF 40%, #53B2F5 100%);
|
|
z-index: 99;
|
|
width: 100%;
|
|
}
|
|
|
|
.goodsClass .header .search {
|
|
width: 100%;
|
|
font-size: 26rpx;
|
|
color: #aaa;
|
|
padding: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 100;
|
|
>view {
|
|
width: 90%;
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 40rpx;
|
|
height: 100%;
|
|
margin-left: 5%;
|
|
/* #ifdef MP-WEIXIN */
|
|
width: 65%;
|
|
/* #endif */
|
|
}
|
|
.iconfont2,
|
|
.iconfont {
|
|
margin-right: 16rpx;
|
|
font-size: 28rpx;
|
|
;
|
|
line-height: 1;
|
|
color: #aaa;
|
|
}
|
|
|
|
.image_icon {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
margin-left: 28rpx;
|
|
}
|
|
|
|
.name {
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
|
|
.nav {
|
|
margin: 30rpx 30rpx;
|
|
width: 690rpx;
|
|
border-radius: 10rpx;
|
|
padding: 15rpx 16rpx 0;
|
|
}
|
|
.goodsClass .nav .item {
|
|
min-width: 0;
|
|
font-size: 24rpx;
|
|
line-height: 30rpx;
|
|
text-align: center;
|
|
color: #666666;
|
|
word-break: break-all;
|
|
margin-right: 45rpx;
|
|
margin-bottom: 32rpx;
|
|
&:nth-child(4n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.goodsClass .nav .item .text {
|
|
color: #666666;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.goodsClass .nav .item .pictrue {
|
|
width: 124rpx;
|
|
height: 124rpx;
|
|
}
|
|
|
|
.goodsClass .nav .item .pictrue image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
object-fit: cover;
|
|
-webkit-touch-callout: none;
|
|
pointer-events: none;
|
|
}
|
|
.advert {
|
|
background: transparent;
|
|
padding: 0;
|
|
margin: 0 30rpx;
|
|
width: 690rpx;
|
|
>image {
|
|
width: 100%;
|
|
height: 110rpx;
|
|
}
|
|
}
|
|
|
|
.special-content {
|
|
margin-top: 47rpx;
|
|
padding: 0 30rpx;
|
|
&-title {
|
|
padding-left: 23rpx;
|
|
position: relative;
|
|
color: #333;
|
|
font-size: 34rpx;
|
|
line-height: 74rpx;
|
|
margin-bottom: 33rpx;
|
|
&:before {
|
|
content: '';
|
|
background: linear-gradient(0deg, #24a9e1, #0f74bb);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translateY(-50%);
|
|
width: 8rpx;
|
|
height: 26rpx;
|
|
border-radius: 4rpx;
|
|
}
|
|
.more-special {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0;
|
|
transform: translateY(-50%);
|
|
color: #999;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.submit {
|
|
width: 126rpx;
|
|
height: 55rpx;
|
|
background: #1D8DFF;
|
|
border-radius: 34rpx;
|
|
text-align: center;
|
|
line-height: 55rpx;
|
|
}
|
|
.public_list{
|
|
width: 686rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
margin: auto;
|
|
margin-top: 30rpx;
|
|
}
|
|
.goodsClass .goodList{
|
|
padding: 32rpx 0 0 10rpx;
|
|
}
|
|
.col-12{
|
|
height:30rpx;
|
|
}
|
|
</style> |