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
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>
|
|
|