zhishifufei_uniapp/pages/course/special_cate.vue

<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>