zc_saas_h5/pages5/scan/goodsTopic_jj.vue

<template>
  <view class="container">
	   <nav-bar title="考前专题" class="navbar"></nav-bar>
    <!-- 顶部宣传横幅 -->
    <view class="banner">
		<!-- 轮播图组件 -->
		     <swiper 
		       class="banner-swiper" 
		       :indicator-dots="true" 
		       :autoplay="true" 
		       :interval="5000" 
		       :duration="500"
		       indicator-color="rgba(255,255,255,0.5)"
		       indicator-active-color="#ffffff"
		       circular
		     >
		       <swiper-item v-for="(item, index) in bannerList" :key="index">
		         <image 
		           :src="item.bimgUrl" 
		           class="banner-img" 
		           mode="widthFix"
				   @click="goToCourse(item,0)"
		         ></image>
		       </swiper-item>
		     </swiper>
    </view>

    <!-- 课程主体内容 -->
    <view class="course-container">
		  <view class="titles">
		                        <image class="timg" src="@/static/topic/icon_left.png" alt="" />
		                        <text class="scheme">进击取证</text>
		                        <image class="timg" src="@/static/topic/icon_right.png" alt="" />
		                    </view>
		                    <view class="min_title">一站式解决方案，领跑新考季</view>
      <view class="course-row">
        <!-- 课程卡片 -->
        <view 
          class="course-col" 
          v-for="(course, index) in filteredCourseList" 
          :key="index"
        >
          <view class="course-card" :class="`type-${course.typeId}`">
            <view class="course-img-box">
              <image :src="course.imgUrl" :alt="course.name" class="course-img" mode="aspectFill"></image>
              <view class="course-tag" :style="{ backgroundColor: `var(--theme-color)` }">
                <text>{{ course.tagText }}</text>
              </view>
              <view class="course-stats">
                <text><i class="mdi mdi-account"></i> {{ course.learnCount }}</text>
                <text><i class="mdi mdi-star"></i> {{ course.rating }}</text>
              </view>
            </view>
            <view class="course-content">
              <view class="course-title" :style="{ color: `var(--theme-color)` }">
                <i :class="course.iconClass"></i>
                <text>{{ course.name }}</text>
                <text style="margin-left: 5px;">{{ course.cname }}</text>
              </view>
              <view class="specialty-tags">
                <view class="specialty-tag" v-for="(item, idx) in course.specialties" :key="idx">
                  <text>{{ item }}</text>
                </view>
              </view>
              <view class="course-footer">
                <view class="course-price" :style="{ color: `var(--theme-color)` }">
                  <text>全科&nbsp;¥{{ course.price }}</text>
                  <text class="original-price">¥{{ course.originalPrice }}</text>
                </view>
                <button class="course-btn" :style="{ backgroundColor: `var(--theme-color)` }" @click="goToCourse(course,1)">
                  立即报名
                </button>
              </view>
              <view class="course-footer"  v-if="course.price2">
                <view class="course-price" :style="{ color: `var(--theme-color)` }">
                  <text>单科实务&nbsp;¥{{ course.price2 }}</text>
                  <text class="original-price">¥{{ course.originalPrice2 }}</text>
                </view>
                <button class="course-btn" :style="{ backgroundColor: `var(--theme-color)` }" @click="goToCourse(course,2)">
                  立即报名
                </button>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 无匹配课程提示 -->
        <view class="empty-col" v-if="filteredCourseList.length === 0">
          <view class="empty-view">
            <text class="empty-text">未找到匹配的课程，请尝试其他关键词</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 回到顶部按钮 -->
    <view 
      class="back-to-top" 
      :class="{ visible: isScrolled }"
      @click="backToTop"
    >
      <i class="mdi mdi-arrow-up"></i>
    </view>

  
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 滚动状态
      isScrolled: false,
      // 搜索关键词
      searchKeyword: '',
      // 选中的课程类型
      selectedCourseType: '',
      // picker索引
      pickerIndex: 0,
	   // 轮播图数据（800:768比例）
	        bannerList: [],
      // 课程类型列表
      courseTypes: [
        '一级建造师', '二级建造师', '监理工程师', '注册安全工程师',
        // '水利质量检测员', 
		'中级经济师', '社会工作者（初级）', 
        '社会工作者（中级）',
		 // '社区工作者'
      ],
      // 课程数据
      courseList: [
        {
          typeId: 1,
          name: '一级建造师',
              cname:'精英优享班',
          imgUrl: require("@/static/topic/course_yj.png"),
          bimgUrl: require("@/static/topic/banner_yj.png"),
              topath0:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1813',
              topath1:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1813',
              topath2:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1813',
          tagText: '热门',
          learnCount: '12.8万人学习',
          rating: '98%好评',
          price: 3580,
                        originalPrice: 4380,
                        price2: 1080,
                        originalPrice2: 1980,
          iconClass: 'mdi mdi-account-hard-hat',
          specialties: ['管理', '法规', '经济', '建筑', '市政', '机电', '公路', '水利', '港口与航道']
        },
        {
          typeId: 2,
          name: '二级建造师',
              cname:'精英优享班',
          imgUrl:  require("@/static/topic/course_ej.png"),
          bimgUrl:  require("@/static/topic/banner_ej.png"),
              topath0:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1814',
              topath1:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1814',
              topath2:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1814',
          tagText: '推荐',
          learnCount: '15.6万人学习',
          rating: '97%好评',
          price: 2280,
                        originalPrice: 3280,
                        price2: 980,
                        originalPrice2: 1680,
          iconClass: 'mdi mdi-account-tie',
          specialties: ['管理', '法规', '建筑', '市政', '机电', '公路', '水利']
        },
        {
          typeId: 3,
          name: '监理工程师',
              cname:'精英优享班',
          imgUrl: require("@/static/topic/course_jl.png"),
          bimgUrl: require("@/static/topic/banner_jl.png"),
              topath0:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1818',
              topath1:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1818',
              topath2:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1818',
          tagText: '精品',
          learnCount: '8.2万人学习',
          rating: '96%好评',
          price: 2580,
                        originalPrice: 3380,
                        price2: 1080,
                        originalPrice2: 1880,
          iconClass: 'mdi mdi-clipboard-check',
          specialties: ['管理', '概论', '土建三控', '土建案例', '交通三控', '交通案例', '水利三控', '水利案例']
        },
        {
          typeId: 4,
          name: '注册安全工程师',
              cname:'精英优享班',
          imgUrl:  require("@/static/topic/course_aq.png"),
          bimgUrl:  require("@/static/topic/banner_aq.png"),
              topath0:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1815',
              topath1:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1815',
              topath2:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1815',
          tagText: '必学',
          learnCount: '9.5万人学习',
          rating: '95%好评',
          price: 3680,
                        originalPrice: 4580,
                        price2: 1280,
                        originalPrice2: 2080,
          iconClass: 'mdi mdi-shield-check',
          specialties: ['管理', '法规', '技术基础', '其他安全', '化工安全', '建筑施工安全', '矿山安全', '金属冶炼安全', '煤矿安全', '道路运输安全']
        },
        // {
        //   typeId: 5,
        //   name: '水利质量检测员',
        //   imgUrl: require("@/static/topic/course_sl.png"),
        //   tagText: '新课',
        //   learnCount: '4.3万人学习',
        //   rating: '99%好评',
        //   price: 2580,
        //       originalPrice: 3580,
        //   iconClass: 'mdi mdi-water',
        //   specialties: ['基础知识', '混凝土工程', '岩土工程', '金属结构', '机械电气', '量测']
        // },
        {
          typeId: 6,
          name: '中级经济师',
              cname:'精英优享班',
          imgUrl: require("@/static/topic/course_jj.png"),
          bimgUrl: require("@/static/topic/banner_jj.png"),
              topath0:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1812',
              topath1:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1812',
              topath2:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1812',
          tagText: '特惠',
          learnCount: '10.1万人学习',
          rating: '97%好评',
          price: 2280,
                        originalPrice: 3380,
                        price2: 1280,
                        originalPrice2: 2080,
          iconClass: 'mdi mdi-currency-cny',
          specialties: ['经济基础', '工商管理', '人力资源', '金融专业', '财政税收', '建筑与房地产', '知识产权', '保险经济', '运输经济', '旅游经济', '农业经济']
        },
        {
          typeId: 7,
          name: '社会工作者（初级）',
              cname:'通过无忧班', 
          imgUrl: require("@/static/topic/course_sg1.png"),
          bimgUrl: require("@/static/topic/banner_sg1.png"),
              topath0:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1816',
              topath1:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1816',
          tagText: '入门',
          learnCount: '7.8万人学习',
          rating: '98%好评',
          price: 1280,
                        originalPrice: 2280,
          iconClass: 'mdi mdi-humanitarian',
          specialties: ['综合能力', '实务']
        },
        {
          typeId: 8,
          name: '社会工作者（中级）',
              cname:'通过无忧班', 
          imgUrl: require("@/static/topic/course_sg2.png"),
          bimgUrl: require("@/static/topic/banner_sg2.png"),
              topath0:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1817',
              topath1:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1817',
          tagText: '进阶',
          learnCount: '6.5万人学习',
          rating: '96%好评',
          price: 1580,
                        originalPrice: 2580,
          iconClass: 'mdi mdi-human-male-female',
          specialties: ['综合能力', '法规与政策', '实务']
        },
        // {
        //   typeId: 9,
        //   name: '社区工作者',
        //   imgUrl: require("@/static/topic/course_sq.png"),
        //   tagText: '基础',
        //   learnCount: '5.7万人学习',
        //   rating: '99%好评',
        //   price: 1580,
        //   originalPrice: 2580,
        //   iconClass: 'mdi mdi-home-group',
        //   specialties: ['基础知识', '职业技能']
        // }
      ],
      // 筛选后的课程列表
      filteredCourseList: []
    }
  },
  onReady() {
    // 初始化课程列表
    this.filteredCourseList = [...this.courseList]
	  this.filteredCourseList.forEach(item=>{
	          if(item.bimgUrl){
	          this.bannerList.push(item);
	          }
	        })
			console.log("as",this.bannerList)
    // 监听滚动事件
    uni.onWindowResize(this.handleScroll)
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 0
    })
    // 欢迎提示
    // uni.showToast({
    //   title: '欢迎来到建工教育',
    //   icon: 'success'
    // })
  },
  onShow() {
    // 监听页面滚动
    // uni.onPageScroll((e) => {
    //   this.isScrolled = e.scrollTop > 100
    // })
  },
  onHide() {
    // 移除滚动监听
    // uni.offPageScroll()
  },
  methods: {
    // 处理滚动
    handleScroll() {
      uni.getSystemInfo({
        success: (res) => {
          this.screenHeight = res.windowHeight
        }
      })
    },
    // 回到顶部
    backToTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 500
      })
      uni.showToast({
        title: '已回到顶部',
        icon: 'success'
      })
    },
    // 筛选课程
    filterCourses() {
      let result = [...this.courseList]
      
      // 按类型筛选
      if (this.selectedCourseType) {
        result = result.filter(course => course.name === this.selectedCourseType)
      }
      
      // 按关键词筛选
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase()
        result = result.filter(course => {
          const nameMatch = course.name.toLowerCase().includes(keyword)
          const specialtyMatch = course.specialties.some(s => s.toLowerCase().includes(keyword))
          return nameMatch || specialtyMatch
        })
      }
      
      this.filteredCourseList = result
      
      // 无结果提示
      if (this.searchKeyword && result.length === 0) {
        uni.showToast({
          title: '未找到匹配课程',
          icon: 'none'
        })
      }
    },
    // 选择课程类型
    handleTypeChange(e) {
      const index = e.detail.value
      this.pickerIndex = index
      this.selectedCourseType = index === 0 ? '' : this.courseTypes[index - 1]
      this.filterCourses()
    },
    // 重置筛选
    resetFilter() {
      this.searchKeyword = ''
      this.selectedCourseType = ''
      this.pickerIndex = 0
      this.filteredCourseList = [...this.courseList]
      uni.showToast({
        title: '筛选条件已重置',
        icon: 'info'
      })
    },
    // 课程报名
    goToCourse(item,type) {
		// var url1=(type==1?item.topath1:type==2?item.topath2:item.topath0).substring(22);
		// console.log("asd",url1)
		//   uni.redirectTo({
		//     url:(type==1?item.topath1:type==2?item.topath2:item.topath0).substring(22),
		//   })
	     window.open(type==1?item.topath1:type==2?item.topath2:item.topath0, "_self");
    },
    // 登录/注册
    gotoLogin() {
      uni.showToast({
        title: '登录/注册功能开发中',
        icon: 'none'
      })
    },
    // 我的课程
    gotoMyCourse() {
      uni.showToast({
        title: '我的课程功能开发中',
        icon: 'none'
      })
    },
  }
}
</script>

<style scoped>
	/* 顶部轮播Banner */
	.banner {
	  position: relative;
	  overflow: hidden;
	  margin-bottom: 30px;
	  /* 按800:768比例计算高度（宽度100%，高度=宽度*768/800） */
	  height: 0;
	  padding-bottom: 96%; /* 768/800 = 0.96 = 96% */
	}
	.banner-swiper {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}
	.banner-img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	}

/* 课程容器 */
.course-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 50px;
  
}
.titles {
                text-align: center;
            }
               .titles .timg {
                    width: 32rpx;
                    height: 20rpx;
                }
               .titles .scheme {
                    font-size: 48rpx;
                    font-weight: bold;
                    color: #363543;
                    margin: 0px 40rpx;
                }
            .min_title {
				    text-align: center;
                margin: 13rpx 0px 50rpx;
                font-size: 28rpx;
                font-weight: 500;
                color: #363543;
            }
.course-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.course-col {
  flex: 1;
  min-width: 300px;
  max-width: calc(33.333% - 16px);
}
.empty-col {
  width: 100%;
  padding: 50rpx 0;
  text-align: center;
}
.empty-view {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.empty-img {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}
.empty-text {
  font-size: 16px;
  color: #999;
}

/* 课程卡片 */
.course-card {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-bottom: 24px;
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.course-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
.course-img-box {
  height: 180px;
  overflow: hidden;
  position: relative;
}
.course-img {
  width: 100%;
  height: 100%;
  transition: all 0.6s ease;
}
.course-card:hover .course-img {
  transform: scale(1.08);
}
.course-tag {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 2;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}
.course-stats {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 15px;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

/* 课程内容 */
.course-content {
  padding: 20rpx;
}
.course-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}
.course-title i {
  margin-right: 8px;
  font-size: 22px;
}
.specialty-tags {
  display: flex;
  flex-wrap: wrap;
  margin: 15px 0;
}
.specialty-tag {
  margin: 0 8px 8px 0;
  padding: 4px 10px;
  border-radius: 4px;
  background-color: #f0f2f5;
  color: #666;
  font-size: 12px;
  transition: all 0.2s ease;
}
.specialty-tag:hover {
  background-color: var(--theme-color);
  color: white;
  transform: translateY(-2px);
}
.course-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #f0f2f5;
}
.course-price {
  font-size: 18px;
  font-weight: bold;
}
.original-price {
  font-size: 14px;
  color: #999;
  font-weight: normal;
  margin-left: 8px;
  text-decoration: line-through;
}
.course-btn {
  background-color: var(--theme-color);
  color: white;
  border: none;
  padding: 0rpx 16rpx;
  border-radius: 4rpx;
  transition: all 0.3s ease;
}
.course-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* 回到顶部 */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #1989fa;
  color: white;
  text-align: center;
  line-height: 48px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(25, 137, 250, 0.3);
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}
.back-to-top:hover {
  background-color: #0e6ecd;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(25, 137, 250, 0.4);
}


/* 响应式适配 */
@media (max-width: 768px) {
  .banner-title {
    font-size: 28px;
  }
  .course-col {
    max-width: 100%;
  }
  .filter-row {
    flex-direction: column;
  }
  .filter-col-10, .filter-col-8, .filter-col-6 {
    flex: 100%;
    width: 100%;
  }
  .footer-content {
    flex-direction: column;
  }
  .footer-col {
    padding-right: 0;
  }
}

	/* 全局样式 */
	* {
	  margin: 0;
	  padding: 0;
	  box-sizing: border-box;
	}
	body {
	  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
	  background-color: #f5f7fa;
	  scroll-behavior: smooth;
	}
	
	/* 课程类型主题色 */
	.type-1 { --theme-color: #1989fa; }
	.type-2 { --theme-color: #52c41a; }
	.type-3 { --theme-color: #faad14; }
	.type-4 { --theme-color: #f5222d; }
	.type-5 { --theme-color: #40a9ff; }
	.type-6 { --theme-color: #722ed1; }
	.type-7 { --theme-color: #13c2c2; }
	.type-8 { --theme-color: #fa8c16; }
	.type-9 { --theme-color: #eb2f96; }
	
	/* 引入MDI图标 */
	@import url('https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css');
</style>