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.
 
 
 
 

225 lines
5.0 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">
<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>