<template> <div class="evaluateDetail"> <div class="nav"> <van-nav-bar title="搜索课程" left-arrow :fixed="true" @click-left="onClickLeft"> <template #right> <div class="searchBtn" @click="searchBox = true"> <van-icon name="apps-o" /> <span>重新筛选</span> </div> </template> </van-nav-bar> </div> <h3 class="searchCont">共搜索到{{ listCount }}个课程</h3> <dl class="condition"> <dd v-for="(n, i) in condition" :key="'100' + i">{{ n }}</dd> </dl> <ul class="list"> <li v-for="(n, i) in list" :key="i" @click="goCourseDetail(n.id)"> <div class="top"> <span class="title">{{ n.baseName }}</span> <span class="lookNum">{{ n.read_count }}人已浏览</span> <img :src="n.coverUrl ? n.coverUrl : require('@/assets/defCoure.jpg')" alt="" /> </div> <div class="bottom"> <h3>{{ n.course_info }}</h3> <!-- <p>“深刻了解江南水乡”</p> --> </div> </li> </ul> <van-empty class="custom-image" image="https://img.yzcdn.cn/vant/custom-empty-image.png" description="暂无课程" v-if="list.length == 0" /> <van-popup v-model="searchBox" position="right"> <div class="searchBox"> <h3>筛选搜索</h3> <p>年龄段</p> <ul class="grades"> <li><span :class="grade.indexOf('一年级') > -1 ? 'active' : ''" @click="selectGrade('一年级', 0)">一年级</span></li> <li><span :class="grade.indexOf('二年级') > -1 ? 'active' : ''" @click="selectGrade('二年级', 0)">二年级</span></li> <li><span :class="grade.indexOf('三年级') > -1 ? 'active' : ''" @click="selectGrade('三年级', 0)">三年级</span></li> <li><span :class="grade.indexOf('四年级') > -1 ? 'active' : ''" @click="selectGrade('四年级', 0)">四年级</span></li> <li><span :class="grade.indexOf('五年级') > -1 ? 'active' : ''" @click="selectGrade('五年级', 0)">五年级</span></li> <li><span :class="grade.indexOf('六年级') > -1 ? 'active' : ''" @click="selectGrade('六年级', 0)">六年级</span></li> <li><span :class="grade.indexOf('初一') > -1 ? 'active' : ''" @click="selectGrade('初一', 0)">初一</span></li> <li><span :class="grade.indexOf('初二') > -1 ? 'active' : ''" @click="selectGrade('初二', 0)">初二</span></li> <li><span :class="grade.indexOf('初三') > -1 ? 'active' : ''" @click="selectGrade('初三', 0)">初三</span></li> <li><span :class="grade.indexOf('高一') > -1 ? 'active' : ''" @click="selectGrade('高一', 0)">高一</span></li> <li><span :class="grade.indexOf('高二') > -1 ? 'active' : ''" @click="selectGrade('高二', 0)">高二</span></li> <li><span :class="grade.indexOf('高三') > -1 ? 'active' : ''" @click="selectGrade('高三', 0)">高三</span></li> </ul> <p>课程分类</p> <ul class="grades"> <li v-for="(n, i) in CourseTypeList" :key="i + '100'"> <span :class="subject.indexOf(n.id) > -1 ? 'active' : ''" @click="selectGrade(n.id, 1, n.courseType)">{{ n.courseType }}</span> </li> </ul> <p>地点</p> <ul class="grades"> <li><span :class="area.indexOf('杭州市') > -1 ? 'active' : ''" @click="selectGrade('杭州市', 2)">杭州</span></li> <li><span :class="area.indexOf('宁波市') > -1 ? 'active' : ''" @click="selectGrade('宁波市', 2)">宁波</span></li> <li><span :class="area.indexOf('温州市') > -1 ? 'active' : ''" @click="selectGrade('温州市', 2)">温州</span></li> <li><span :class="area.indexOf('绍兴市') > -1 ? 'active' : ''" @click="selectGrade('绍兴市', 2)">绍兴</span></li> <li><span :class="area.indexOf('湖州市') > -1 ? 'active' : ''" @click="selectGrade('湖州市', 2)">湖州</span></li> <li><span :class="area.indexOf('嘉兴市') > -1 ? 'active' : ''" @click="selectGrade('嘉兴市', 2)">嘉兴</span></li> <li><span :class="area.indexOf('金华市') > -1 ? 'active' : ''" @click="selectGrade('金华市', 2)">金华</span></li> <li><span :class="area.indexOf('衢州市') > -1 ? 'active' : ''" @click="selectGrade('衢州市', 2)">衢州</span></li> <li><span :class="area.indexOf('台州市') > -1 ? 'active' : ''" @click="selectGrade('台州市', 2)">台州</span></li> <li><span :class="area.indexOf('丽水市') > -1 ? 'active' : ''" @click="selectGrade('丽水市', 2)">丽水</span></li> <li><span :class="area.indexOf('舟山市') > -1 ? 'active' : ''" @click="selectGrade('舟山市', 2)">舟山</span></li> </ul> <div class="btns"> <span @click="btnClick()">重置</span> <span @click="btnClick(1)">确定</span> </div> </div> </van-popup> </div> </template> <script> export default { data() { return { list: '', listCount: 0, userInfo: '', searchBox: true, grade: [], subject: [], area: [], condition: [], CourseTypeList: [], CourseTypeText: [], } }, created() { var userInfo = localStorage.getItem('userInfo') if (userInfo) { this.userInfo = JSON.parse(userInfo) } var id = this.$route.query.id this.GetCourseTypeList() }, mounted() { var box = document.getElementsByClassName('searchBox') box[0].style.height = window.innerHeight + 'px' console.log(window.innerHeight + 'px') }, methods: { goCourseDetail(id) { this.$router.push({ path: '/CourseDetail', query: { id: id } }) }, onClickLeft() { history.back() }, selectGrade(text, type, name) { var that = this var arr = '' if (type == 0) { arr = this.grade } else if (type == 1) { arr = this.subject } else if (type == 2) { arr = this.area } if (arr.indexOf(text) == -1) { arr.push(text) } else { arr.forEach(function (n, i) { if (n == text) { arr.splice(i, 1) } }) } if (name) { if (this.CourseTypeText.indexOf(name) == -1) { this.CourseTypeText.push(name) } else { this.CourseTypeText.forEach(function (n, i) { if (n == name) { that.CourseTypeText.splice(i, 1) } }) } } }, btnClick(t) { if (t) { this.GetCourseList(1) this.searchBox = false this.condition = this.grade.concat(this.CourseTypeText).concat(this.area) } else { this.grade = [] this.subject = [] this.area = [] } }, GetCourseTypeList() { var that = this this.http .GetCourseTypeList({ page: 1, pageSize: 999, }) .then(function (res) { if (res.status == 1) { that.CourseTypeList = res.data.list } }) }, GetCourseList(page) { var that = this this.$toast.loading({ message: '请求中...', }) this.http .GetCourseList({ pageIndex: page, pageSize: 99999, courseType: this.subject.join(','), area: this.area.join(','), suitableAges: this.grade.join(','), }) .then(function (res) { that.$toast.clear() if (res.status == 1) { that.listCount = res.data.count that.list = res.data.items } }) }, }, } </script> <style lang="stylus" scoped> .evaluateDetail{ background-color #FBFBFB position fixed left 0 top 0 right 0 bottom 0 overflow auto } .searchBtn{ color #6BCFAD font-size 1.4rem i{ color #6BCFAD display inline-block vertical-align middle } span{ display inline-block vertical-align middle } } .searchCont{ margin-top 100px font-size 1.2rem padding-left 40px } .condition{ padding 0 40px box-sizing border-box dd{ display inline-block padding 10px 30px border-radius 100px background #B6F3D8 color #02924C margin 0 20px 10px 0 } } .searchBox{ width 600px height 100% overflow auto padding-bottom 200px box-sizing: border-box; h3{ padding-left 40px font-size 1.6rem } p{ padding-left 40px font-size 1.4rem } .grades{ padding 0 20px box-sizing border-box overflow hidden li{ padding 20px float left width 33.33% box-sizing border-box span{ display inline-block width 100% padding 20px 0 text-align center font-size 1.4rem border-radius 6px position relative background-color #EEEEEE } span.active{ background-color #92EFC9 color #0d6e44 } span.active::after{ content 'x' position absolute color white right 6px bottom 0 font-size 1.2rem z-index 100 } span.active::before{ content 'x' position absolute color white right 0 bottom 0 z-index 50 width 0 height 0 border-bottom 40px solid #1CD988 border-left 40px solid transparent } } } .btns{ position absolute bottom 0 left 0 right 0 background-color white text-align center padding 40px 0 box-shadow 0 -6px 10px #EEEEEE span{ display inline-block padding 20px 60px background-color #A6A6A6 border-radius 100px 0 0 100px color white font-size 1.6rem } span:last-child{ background linear-gradient(138deg, #29E576 0%, #14CFB0 100%) border-radius 0 100px 100px 0 } } } .list{ overflow hidden padding 0 40px box-sizing border-box li{ float left width 50% box-sizing border-box margin-bottom 20px margin-top 20px min-height 480px .top{ position relative img{ width 100% height 336px border-radius 20px 20px 0 0 object-fit cover } span{ position absolute background-color rgba(0,0,0,0.5) color white left 20px padding 6px 10px } span.lookNum{ bottom 20px border-radius 100px } span.title{ top 20px } } .bottom{ background-color white border-radius 0 0 10px 10px min-height 130px padding 0 20px box-sizing border-box h3{ word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin 0 font-size 1.6rem } p{ color #0EDBA1 font-size 1.2rem margin 0 padding 10px 0 } } } li:nth-child(2n){ padding-left 20px } li:nth-child(2n+1){ padding-right 20px } } </style>