154 lines
3.7 KiB
Vue
154 lines
3.7 KiB
Vue
<template>
|
|
<view class="pad-b150">
|
|
<status-nav :ifReturn="false" navBarTitle="资讯" :marginBottom="0"></status-nav>
|
|
<view class="nav-list-bg" :style="{top:newTop+'px'}">
|
|
<nav-tab :list="navTabList" @chooseEv="chooseEv"></nav-tab>
|
|
</view>
|
|
<view class="news-list-bg">
|
|
<pull-list :list="articleList" :collection="0" @toDetail="toArticleDetail"></pull-list>
|
|
</view>
|
|
<!-- 暂无更多内容 -->
|
|
<view class="more-txt" v-if="totalAll == total">暂无更多内容</view>
|
|
<!-- 购物车btn -->
|
|
<enter-cart></enter-cart>
|
|
<!-- 底部tab -->
|
|
<foot-tab current="3"></foot-tab>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import statusNav from '@/components/status-navs/status-nav';
|
|
import navTab from '@/components/nav-tab/nav-tab.vue';
|
|
import pullList from '@/components/pull-list/pull-list.vue';
|
|
import enterCart from '@/components/enter-cart/enter-cart.vue';
|
|
// 底部组件
|
|
import footTab from '@/components/foot-tab/foot-tab.vue';
|
|
import {getCartNum} from '@/jsFile/public-api.js';
|
|
import { mapState } from 'vuex'//引入mapState
|
|
export default {
|
|
components:{
|
|
statusNav,
|
|
navTab,
|
|
pullList,
|
|
enterCart,
|
|
footTab,
|
|
},
|
|
data() {
|
|
return {
|
|
scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
|
|
newWidth:uni.getSystemInfoSync().windowWidth,
|
|
newTop:uni.getSystemInfoSync().statusBarHeight + 50,
|
|
articleList:[], //解答&资讯列表
|
|
navTabList:[], //导航列表
|
|
currentIndex:0, //当前位置
|
|
page:1, //第几页
|
|
size:10, //查询条数
|
|
total:0, //总数
|
|
totalAll:-1,//总数
|
|
}
|
|
},
|
|
computed:{
|
|
...mapState({
|
|
footHeight: state => state.moduleA.footHeight,
|
|
}),
|
|
},
|
|
onLoad() {
|
|
this.getArticleNav();
|
|
},
|
|
onReachBottom(e) {
|
|
if(this.articleList.length<this.total){
|
|
this.page++;
|
|
this.getArticleList();
|
|
}else{
|
|
this.totalAll = this.total;
|
|
return false;
|
|
}
|
|
},
|
|
// 分享到微信
|
|
onShareAppMessage() {
|
|
|
|
},
|
|
// 分享到朋友圈
|
|
onShareTimeline(){
|
|
|
|
},
|
|
methods: {
|
|
// 获取文章栏目
|
|
getArticleNav(){
|
|
this.$requst.get('/api/archives/category').then(res=>{
|
|
if(res.code == 0){
|
|
res.data.forEach(item=>{
|
|
let obj = {
|
|
id:item.id,
|
|
name:item.title
|
|
}
|
|
this.navTabList.push(obj)
|
|
})
|
|
this.articleNavId = this.navTabList[0].id;
|
|
// 获取文章列表
|
|
this.getArticleList();
|
|
}
|
|
})
|
|
},
|
|
// 切换事件
|
|
chooseEv(index,id){
|
|
console.log(index,id,1212121)
|
|
if(this.currentIndex !== index){
|
|
this.articleList = [];
|
|
this.page = 1;
|
|
this.currentIndex = index;
|
|
this.articleNavId = id;
|
|
// 获取文章列表
|
|
this.getArticleList();
|
|
}
|
|
},
|
|
// 获取疑难解答、行业资讯列表
|
|
getArticleList(){
|
|
uni.showLoading();
|
|
let params = {
|
|
page:this.page,
|
|
size:this.size,
|
|
category_id:this.articleNavId
|
|
}
|
|
this.$requst.get('/api/archives/list',params).then(res=>{
|
|
if(res.code == 0){
|
|
this.total = res.data.total;
|
|
let newArr = [];
|
|
res.data.list.forEach(item=>{
|
|
let obj = {
|
|
id:item.id,
|
|
title:item.title,
|
|
time:this.dateFormat(item.published_at),
|
|
src:item.cover
|
|
}
|
|
newArr.push(obj)
|
|
})
|
|
this.articleList = newArr;
|
|
}
|
|
uni.hideLoading();
|
|
})
|
|
},
|
|
// 时间格式转换
|
|
dateFormat (dateData) {
|
|
var date = new Date(dateData)
|
|
var y = date.getFullYear()
|
|
var m = date.getMonth() + 1
|
|
m = m < 10 ? '0' + m : m
|
|
var d = date.getDate()
|
|
d = d < 10 ? '0' + d : d
|
|
const time = y + '.' + m + '.' + d
|
|
return time
|
|
},
|
|
//去文章详情
|
|
toArticleDetail(id){
|
|
uni.navigateTo({
|
|
url:`/pages/tabbar/news/detail?id=${id.id}`
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|