fangliaoxiaochengxv/subPages/course/course.vue

<template>
  <view style="height: 100%; background: #F8F9FA;">
    <van-tabs :active="active" color="#C29556" title-active-color="#C29556" :duration="0.2" :ellipsis="false"  @change="onTabChange" >
      <van-tab v-for="(item, index) in courseTypeList" :key="index" :name="item.id" :title="item.name">
        <view class="common-page"    >
          <view class="huodong-ccontent" v-for="(item2, index2) in courseList" :key="index2"   @click="toDetail(item2)" v-if="active==index" >
            <view class="huodong-ccontent-img">
              <van-image
                  class="huodongText2-img"
                  height="264rpx"
                  :src="item2.cover"
                  width="650rpx"
              />
            </view>
            <view class="course-content">
              <view class="course-title">{{item2.goods_name}}</view>
              <view class="course-date">
                <view style="padding-top: 7rpx;width:28rpx;height: 28rpx ">
                  <van-image
                      class="huodongText2-img"
                      height="28rpx"
                      src="/static/miaoshu.png"
                      width="28rpx"
                      style="display: flex;"
                  />
                </view>
                <span style="padding: 0 16rpx">{{item2.remark}}</span>
              </view>
              <view class="course-price" style="position: relative;">
                <view style="padding-top: 8rpx;width:28rpx;height: 28rpx ">
                  <van-image
                      class="huodongText2-img"
                      height="28rpx"
                      src="/static/baoming.png"
                      width="28rpx"
                      style="display: flex;"
                  />
                </view>
                <span style="padding-left: 16rpx">已报名 &nbsp;{{item2.stock_sales}}</span>
                <span style="position: absolute;right:20rpx;font-size: 22rpx;color:#333333;">￥<span style="font-size: 32rpx;font-weight: bold;">{{item2.price_selling}}</span></span>
              </view>
            </view>
          </view>
        </view>
      </van-tab>
    </van-tabs>
    <van-toast id="van-toast"/>
  </view>
</template>

<script>
import {
  getGoodList,getGoodCate
} from "@/common/api/good.js";
import Toast from "../../wxcomponents/vant/dist/toast/toast";


export default {
  components: {
  },
  data() {
    return {
      page: 1,
      pageSize: 9999,
      active: 0,
      courseTypeList: [],
      courseList: [],
      GoodCateId:0,
    };
  },

  onLoad: function(option) {
    const type = option.type || 0;
    this.active = type * 1;

    this.getGoodCate();
    this.getGoodList();
    console.log(this.courseTypeList);
  },
  onShow() {
    this.$nextTick(() => {});
  },

  onReachBottom() {},
  onShareAppMessage(res) {
    let configs = uni.getStorageSync('configs') || {};
    return {
      title: configs.shop_share_title,
      imageUrl: configs.shop_share_img,
      path: `/subPages/course/course`
    };
  },
  onShareTimeline(res) {
    let configs = uni.getStorageSync('configs') || {};
    return {
      title: configs.shop_share_title,
      imageUrl: configs.shop_share_img,
      path: `/subPages/course/course`
    };
  },
  computed: {},
  watch: {},
  methods: {
    getGoodCate() {
      getGoodCate({ mark:"课程商品" }).then(({ data }) => {
        this.courseTypeList = data;

      });
    },
    toDetail(item) {
      console.log("跳转到详情页");
      uni.navigateTo({url: `/subPages/courseDetail/courseDetail?goods_code=${item.code}`,})

    },
    getGoodList() {
      getGoodList({ page: this.page, pageSize: this.pageSize, cateid: this.GoodCateId, mark:"课程商品" }).then(({ data }) => {
        this.courseList =data.list
        console.log(data);
      });
    },
    leftClick() {
      uni.switchTab({
        url: '/pages/home/index'
      });
    },



    onTabChange(event) {
      console.log(event.detail)
      this.active = event.detail.index; // 更新 active 的值
      this.GoodCateId = event.detail.name; // 更新 active 的值
      this.getGoodList();
    }
  },
};
</script>

<style lang="scss" scoped>
.common-page {
  height: 100%;
  padding: 30rpx;
}

.huodong-ccontent {
  position: relative; /* 相对定位 */
  width: 690rpx;
  padding: 0rpx;
  margin:0 auto;
  margin-bottom: 30rpx;
  background: #FFFFFF;
  padding-bottom: 20rpx;
  border-radius: 16rpx 16rpx 16rpx 16rpx;

  .huodong-ccontent-img{
    height: 284rpxrpx;
    width: 690rpx;
    padding-top: 20rpx;
    padding-left: 20rpx;
  }
}

.course-content {
  margin: 30rpx 0rpx 0rpx 30rpx;

  .course-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    font-weight: bold;
    margin-bottom: 16rpx;
  }

  .course-date {
    font-family: 苹方, 苹方;
    font-size: 26rpx;
    color: #666666;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    font-weight: 400;
    margin-bottom: 10rpx;
    display: flex;
  }
  .course-price {
    height: 44rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    display: flex;
    //align-items: center;
  }
}

/* 分割线样式 */
.separator {
  height: 1px;
  background-color: #e0e0e0;
  margin: 20rpx 0;
}

/* 定义 CSS 变量 */
:root {
  --nav-bar-icon-color: black;
  --nav-bar-arrow-size: 16px;
  --tab-font-size: 28rpx;
}

/* 确保 van-nav-bar 内部的内容能够正确适应新的高度 */
/deep/ .van-nav-bar__title {
  font-family: PingFang SC, PingFang SC !important;
  font-weight: 400 !important;
  font-size: 36rpx !important;
  color: #333333 !important;
  text-align: center;
  // 加粗
  // font-weight: bold;
}
/deep/ .van-nav-bar__content {
  text-align: center;
}

/* 添加 van-tab 标题的字体大小样式 */
/deep/ .van-tab__text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
}
</style>