6 changed files with 262 additions and 11 deletions
@ -0,0 +1,225 @@ |
|||||||
|
<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"> |
||||||
|
<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 class="knowledge-list"> |
||||||
|
<view class="knowledge-item acea-row" v-for="item in articleList" @click="toDetail(item.id)"> |
||||||
|
<view class="img-box"> |
||||||
|
<image :src="item.imageInput" mode=""></image> |
||||||
|
</view> |
||||||
|
<view class="knowledge-info-box"> |
||||||
|
<view class="title line1">{{item.title}}</view> |
||||||
|
<view class="intro line2">{{item.synopsis}}</view> |
||||||
|
<view class="type-box acea-row"> |
||||||
|
<view class="tip blue">{{item.chargeType == 0 ? '免费' : item.articleCharge}}</view> |
||||||
|
<view class="time">{{item.addTime}}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import WucTab from '@/components/wuc-tab/wuc-tab.vue'; |
||||||
|
import SecondMenu from '../knowledge/components/secondMenu.vue'; |
||||||
|
import { getCategory,getArticle } from '@/api/knowledge'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
TabCur: null, |
||||||
|
tabList: [{categoryName:'七雅',id:10},{categoryName:'武当',id:12},], |
||||||
|
secondMenu:[], |
||||||
|
active:null, |
||||||
|
articleList:[] |
||||||
|
} |
||||||
|
}, |
||||||
|
components: { WucTab,SecondMenu }, |
||||||
|
onLoad() { |
||||||
|
return false |
||||||
|
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) |
||||||
|
if(res.data[0].categoryList.length > 0){ |
||||||
|
this.$set(this, 'active', res.data[0].categoryList[0].id) |
||||||
|
} |
||||||
|
}).then(()=>{ |
||||||
|
this.getArticle() |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
toDetail(id){ |
||||||
|
this.$yrouter.push({ |
||||||
|
path: '/pages/knowledge/detail', |
||||||
|
query: { |
||||||
|
id: id, |
||||||
|
}, |
||||||
|
}) |
||||||
|
}, |
||||||
|
getArticle(){ |
||||||
|
var cid = null; |
||||||
|
this.active == null ? cid = this.TabCur : cid = this.active |
||||||
|
getArticle({cid:cid}).then((res)=>{ |
||||||
|
if(res.success){ |
||||||
|
this.articleList = res.data |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
tabChange(item) { |
||||||
|
if(item.categoryList.length > 0){ |
||||||
|
this.$set(this, 'active', item.categoryList[0].id) |
||||||
|
} |
||||||
|
this.secondMenu = item.categoryList; |
||||||
|
this.TabCur = item.id; |
||||||
|
this.getArticle() |
||||||
|
}, |
||||||
|
secondMenuClick(item){ |
||||||
|
this.active = item.id; |
||||||
|
this.getArticle() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="less"> |
||||||
|
.header-search { |
||||||
|
transition: all linear 0.3s; |
||||||
|
background: #fff; |
||||||
|
.search{ |
||||||
|
border: 2rpx solid #EA533E; |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
.konwledge-index{ |
||||||
|
background: #fff; |
||||||
|
min-height: 100%; |
||||||
|
.content-box{ |
||||||
|
width: 100%; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 0 24rpx; |
||||||
|
} |
||||||
|
.introduce-box{ |
||||||
|
width: 100%; |
||||||
|
height: 328rpx; |
||||||
|
box-shadow: 0px 6rpx 14rpx 8rpx rgba(255,234,231,0.2); |
||||||
|
border-radius: 8px; |
||||||
|
overflow: hidden; |
||||||
|
margin: 30rpx 0; |
||||||
|
.left-box{ |
||||||
|
width: 16rpx; |
||||||
|
height: 100%; |
||||||
|
background: #FAEFED; |
||||||
|
} |
||||||
|
.right-box{ |
||||||
|
width: calc(100% - 16rpx); |
||||||
|
padding: 30rpx 50rpx 0 24rpx; |
||||||
|
font-size: 26rpx; |
||||||
|
color: #999; |
||||||
|
.title-txt{ |
||||||
|
font-size: 36rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #3C464F; |
||||||
|
line-height: 50rpx; |
||||||
|
font-weight: 600; |
||||||
|
margin-bottom: 20rpx; |
||||||
|
} |
||||||
|
.desc{ |
||||||
|
text-indent: 1em; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.knowledge-list{ |
||||||
|
width: 100%; |
||||||
|
.knowledge-item{ |
||||||
|
border-bottom: 1px solid #ECECEC; |
||||||
|
padding-bottom: 20rpx; |
||||||
|
margin-bottom: 20rpx; |
||||||
|
.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; |
||||||
|
} |
||||||
|
.intro{ |
||||||
|
font-size: 28rpx; |
||||||
|
color: #999999; |
||||||
|
line-height: 40rpx; |
||||||
|
margin: 8rpx 0 36rpx; |
||||||
|
} |
||||||
|
.type-box{ |
||||||
|
font-size: 24rpx; |
||||||
|
color: #999; |
||||||
|
.tip{ |
||||||
|
width: 60rpx; |
||||||
|
height: 34rpx; |
||||||
|
line-height: 32rpx; |
||||||
|
text-align: center; |
||||||
|
background: #EDEFF8; |
||||||
|
border-radius: 4rpx; |
||||||
|
border: 1px solid #6E85EB; |
||||||
|
padding: 0 6rpx; |
||||||
|
font-size: 22rpx; |
||||||
|
margin-right: 20rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
.blue{ |
||||||
|
color: #6E85EB; |
||||||
|
background: #EDEFF8; |
||||||
|
border-color: #6E85EB; |
||||||
|
} |
||||||
|
.yellow{ |
||||||
|
color: #F99C10; |
||||||
|
background: #FFEDCC; |
||||||
|
border-color: #F99C10; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.text-black{ |
||||||
|
font-size: 32rpx; |
||||||
|
} |
||||||
|
.text-orange{ |
||||||
|
color: #EB5744; |
||||||
|
font-size: 40rpx !important; |
||||||
|
border-color: #EB5744; |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
Loading…
Reference in new issue