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