health-front/pages_order/product/tabCourse/index.vue

<template>
  <view>
    <!-- 搜索栏 -->
    <view class="search">
      <uv-search 
        v-model="keyword"
        placeholder="请输入要查询的内容"
        placeholderColor="#C6C6C6"
        searchIconColor="#8B8B8B"
        :searchIconSize="40" 
        :inputStyle="{
          'font-family': 'PingFang SC',
          'font-weight': 400,
          'font-size': '28rpx',
          'line-height': 1.4,
          'padding': '12rpx 0',
        }"
        bgColor="#fff" 
        :showAction="false"
        @search="search"
      ></uv-search>
    </view>

    <view class="section">
      <view class="section-header">
        <!-- todo -->
        <sectionHeader :title="`直播 · 05月11日 12:00`" @showAll="jumpToLive"></sectionHeader>
      </view>
      <view style="padding: 0 32rpx;">
        <courseLiveCard v-for="item in liveList" :key="item.id" :data="item"></courseLiveCard>
      </view>
    </view>
    <view class="section">
      <sectionHeader title="推荐课程" @showAll="jumpToRecommendCourse"></sectionHeader>
      <!-- <courseRecommendView></courseRecommendView> -->
      <productCustomView :type="2" :list="list" @categoryChange="onCategoryChange"></productCustomView>
    </view>
    <!-- todo: check -->
    <!-- <view class="section section-custom">
      <sectionHeader title="自选课程" @showAll="jumpToCustomCourse"></sectionHeader>
      <slot name="custom"></slot>
    </view> -->
  </view>
</template>

<script>
	import sectionHeader from '../sectionHeader.vue'
  import courseLiveCard from './courseLiveCard.vue'
  import courseRecommendView from './courseRecommendView.vue'
  import productCustomView from '@/pages_order/product/productCustomView.vue'

  export default {
		components: {
      sectionHeader,
      courseLiveCard,
      courseRecommendView,
      productCustomView,
    },
    data() {
      return {
				keyword: '',
        liveList: [],
        list: [],
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          type: 2, // 产品类型（0营养剂，1预约，2课程）
        },
      }
    },
    created() {
      // todo: fetch
      this.liveList = [
        {
          id: '001',
					url: '', 
          startTime: '2025-07-25 19:30:00',
        },
      ]

      this.getData()
    },
    methods: {
			async getData() {
				try {
          const queryParams = {
            pageNo: 1,
            // todo: check
            pageSize: 6,
            type: 2, // 产品类型（0营养剂，1预约，2课程）
            homeRecommend: 'Y',
          }
					this.list = (await this.$fetch('getProductList', queryParams))?.records || []
				} catch (err) {

				}
			},
      onCategoryChange(e) {
        const { classId } = e || {}

        if (classId) {
          this.queryParams.classId = classId
        } else {
          delete this.queryParams.classId
        }
        
        this.queryParams.pageNo = 1
        this.queryParams.pageSize = 10
        this.getData()

      },
			// 搜素
			search() {
        // todo: check
				uni.navigateTo({
					url: `/pages_order/product/productList?type=2&search=${this.keyword}&title=课程`
				})
				// this.keyword = ''
			},
      jumpToLive() {
        // todo
        return
				uni.navigateTo({
					url: `/pages_order/product/productList?type=2&title=直播`
				})
      },
      jumpToRecommendCourse() {
				uni.navigateTo({
					url: `/pages_order/product/productList?type=2&homeRecommend=Y&title=推荐课程`
				})
      },
      // todo: check
      jumpToCustomCourse() {
				uni.navigateTo({
					url: `/pages_order/product/productList?type=2&title=自选课程`
				})
      },
    },
  }
</script>

<style scoped lang="scss">
  @import '../styles/tab.scss';

</style>