You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

316 lines
7.7 KiB

<template>
<view class="konwledge-index index">
<view class="header header-search acea-row row-center-wrapper">
<view @click="goGoodSearch()" class="search acea-row row-middle">
<text class="iconfont icon-xiazai5"></text>
搜索商品
</view>
<!-- #ifndef H5 -->
<view class="qr" @click="startQr()" v-if="$deviceType !== 'weixin'">
<image :src="`${$VUE_APP_RESOURCES_URL}/images/qr.png`" />
</view>
<!-- #endif -->
</view>
<view class="content-box">
<view class="tab-box">
<wuc-tab :tab-list="tabList" :tabCur.sync="TabCur" @change="tabChange"
tab-class="text-center text-black bg-white" select-class="text-orange text-xl">
</wuc-tab>
<SecondMenu :menuList="secondMenu" :active.sync="active" @secondMenuClick="secondMenuClick">
</SecondMenu>
</view>
<view class="bangdan-box">
<view class="bangdan-list">
<scroll-view class="scroll-view_H" scroll-x="true">
<view class="bangdan-item"
:class="index%2 !== 0 ? 'bgR' : ''"
v-for="(item,index) in 6" :key="index"
@click="toStudyDetail(item.id)">
<view>连续11天打卡站桩</view>
<view class="time">2021.5.28-2021.6.18</view>
<view class="acea-row row-between-wrapper">
<view class="jifen">30积分</view>
<view class="signin-btn">报名参加</view>
</view>
</view>
</scroll-view>
</view>
</view>
<view class="knowledge-list">
<view class="active-word">{{categoryTitle}}</view>
<view class="knowledge-item acea-row" v-for="item in courseList" @click="toDetail(item.id)">
<view class="img-box">
<image :src="item.imageArr[0]" mode=""></image>
</view>
<view class="knowledge-info-box">
<view class="title line1">{{item.courseName}}</view>
<view class="time">{{utils.spl(item.courseStartTime)[0]}}~{{utils.spl(item.courseEndTime)[0]}}</view>
<view class="address">{{item.coursePlace}}</view>
<view class="type-box acea-row row-between row-middle">
<view class="price">¥{{item.courseCharge}}</view>
<view class="signin-btn red">去报名</view>
</view>
</view>
</view>
<!-- <view class="knowledge-item acea-row">
<view class="img-box">
<image src="../../static/img1.png" mode=""></image>
</view>
<view class="knowledge-info-box">
<view class="title line1">《阴阳五行》一个人的阴阳五的阴阳五行…</view>
<view class="time">2021-5-31-6.3 8:30-18:30</view>
<view class="address">中国 武汉</view>
<view class="type-box acea-row row-between row-middle">
<view class="price">¥3000</view>
<view class="signin-btn red" @click="toDetail(1)">去报名</view>
</view>
</view>
</view> -->
</view>
</view>
</view>
</template>
<script module="utils" lang="wxs" src="../../utils/subutil.wxs"></script>
<script>
import WucTab from '@/components/wuc-tab/wuc-tab.vue';
import SecondMenu from '../knowledge/components/secondMenu.vue';
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import {
getCategory,
getArticle,
getStudyList,
getCourses
} from '@/api/knowledge';
export default {
computed: mapGetters(['userInfo']),
data() {
return {
TabCur: null,
tabList: [],
secondMenu: [],
active: null,
courseList: [],
studyList:[],
categoryTitle:'',
}
},
components: {
WucTab,
SecondMenu
},
onShow() {
getCategory().then((res) => {
this.tabList = res.data
this.$set(this, 'tabList', res.data)
this.$set(this, 'secondMenu', res.data[0].categoryList)
this.$set(this, 'TabCur', res.data[0].id)
this.categoryTitle = res.data[0].categoryName;
if (res.data[0].categoryList.length > 0) {
this.$set(this, 'active', res.data[0].categoryList[0].id)
this.categoryTitle = this.categoryTitle +'·'+res.data[0].categoryList[0].categoryName
}
}).then(() => {
this.getStudyList()
this.getCourses()
})
},
methods: {
toStudyDetail(id) {
this.$yrouter.push({
path: '/pages/study/detail',
query: {
id: id,
},
})
},
toDetail(id) {
this.$yrouter.push({
path: '/pages/course/detail',
query: {
id: id,
},
})
},
getStudyList() {
var cid = null;
this.active == null ? cid = this.TabCur : cid = this.active
getStudyList({categoryId: cid,listState:0}).then((res) => {
if (res.success) {
this.studyList = res.data
}
})
},
getCourses() {
var cid = null;
this.active == null ? cid = this.TabCur : cid = this.active
getCourses({categoryId: cid,listState:0,uid:this.userInfo.uid}).then((res) => {
if (res.success) {
this.courseList = res.data
}
})
},
tabChange(item) {
this.categoryTitle = item.categoryName;
if (item.categoryList.length > 0) {
this.$set(this, 'active', item.categoryList[0].id)
this.categoryTitle = item.categoryList[0].categoryName;
}
this.secondMenu = item.categoryList;
this.TabCur = item.id;
this.getStudyList()
this.getCourses()
},
secondMenuClick(item) {
this.active = item.id;
this.categoryTitle = item.categoryName;
this.getStudyList()
this.getCourses()
}
}
}
</script>
<style scoped lang="less">
.header-search {
transition: all linear 0.3s;
background: #fff;
.search {
border: 2rpx solid #EA533E;
background-color: #fff;
}
}
.content-box{
width: 100%;
box-sizing: border-box;
.tab-box{
box-shadow: 0px 6px 12px 0px rgba(227,227,227,0.29);
}
/deep/.second-menu-box{
padding: 30rpx 32rpx;
}
}
.bangdan-box{
width: 100%;
box-sizing: border-box;
padding-left: 30rpx;
.scroll-view_H{
white-space: nowrap;
width: 100%;
}
.bangdan-item{
width: 514rpx;
height: 234rpx;
box-sizing: border-box;
padding: 20rpx;
color: #fff;
display: inline-block;
background: linear-gradient(165deg, #3ABFB8 0%, #7CE1DD 100%);
border-radius: 10rpx;
font-size: 34rpx;
margin-right: 20rpx;
.time{
font-size: 24rpx;
color: #FFFFFF;
line-height: 40rpx;
margin:10rpx 0 18rpx;
}
.jifen{
font-size: 46rpx;
font-weight: 500;
}
.signin-btn{
width: 180rpx;
height: 68rpx;
background: #FFFFFF;
border-radius: 40rpx;
text-align: center;
line-height: 68rpx;
color: #222222;
font-size: 26rpx;
}
}
.bgR{
background: linear-gradient(165deg, #FF7563 0%, #FEABA0 100%);
}
}
.konwledge-index {
min-height: 100%;
width: 100%;
background: #fff;
.knowledge-list {
width: 100%;
padding:0 32rpx;
margin-top: 50rpx;
.knowledge-item {
background: #fff;
padding: 32rpx 0;
border-bottom: 1px solid #ECECEC;
.img-box {
width: 204rpx;
height: 200rpx;
margin-right: 30rpx;
image {
width: 100%;
height: 100%;
}
}
.knowledge-info-box {
width: calc(100% - 234rpx);
.title {
font-size: 28rpx;
color: #333;
font-size: 500;
line-height: 40rpx;
}
.time,.address{
color: #999;
font-size: 24rpx;
margin-top: 5rpx;
line-height: 34rpx;
}
.intro {
font-size: 28rpx;
color: #999999;
line-height: 40rpx;
margin: 8rpx 0 36rpx;
}
.type-box {
font-size: 24rpx;
color: #999;
margin-top: 28rpx;
.price{
font-size: 36rpx;
color: #EA533E;
font-weight: 600;
}
.signin-btn{
width: 156rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
background: #FFEAE7;
border-radius: 12rpx;
font-size: 32rpx;
}
.red{
background: #FFEAE7;
color: #EE7060;
}
.blue {
color: #6E85EB;
background: #ECEFFD;
}
.yellow {
color: #F99C10;
background: #FFEDCC;
}
}
}
}
}
}
</style>