资讯页功能完善，点击不同资讯类型获取不同数据，搜索功能实现

Administrator

2021-07-03 5481dc208386de11ae0018d970d483974c8fa497

资讯页功能完善，点击不同资讯类型获取不同数据，搜索功能实现

 pages/article/article.vue

@@ -7,8 +7,8 @@
        </view> -->

        <view class="article-tab">
            <view :class="{'article-tab-title':true,'cccc':index == articleTabNum}" @click="goArticleTab(index)" v-for="(item,index) in articleTabArr"
                :style="articleTabNum==index?'color:#000000':'color:#808080'">{{item}}</view>
            <view :class="{'article-tab-title':true,'cccc':index == articleTabNum}" @click="goArticleTab(index,item.dictKey)" v-for="(item,index) in articleTabArr"
                :style="articleTabNum==index?'color:#000000':'color:#808080'">{{item.dictValue}}</view>
            <image src="../../static/images/article/menu.png"></image>
        </view>
        
@@ -16,7 +16,7 @@
            <view class="search-ico-wapper">
                <image src="../../static/images/search/search.png" class="search-ico" mode=""></image>
            </view>
            <input type="text" value="" placeholder="搜索" class="search-text" maxlength="10" focus/>
            <input type="text" v-on:input ="getKeyword" v-model="keyword" placeholder="搜索" class="search-text" maxlength="10" focus/>
            <view class="search-ico-wapper1">
                <image src="../../static/images/article/microphone.png" class="search-ico-1" mode=""></image>
            </view>
@@ -61,33 +61,78 @@
                isLoadMore: false, //是否加载中
                isFlash: false, //是否刷新
                data: [],
                titleList: ['推荐', '要闻', '新思想'],
                titleNum: 0,
                articleTabArr: ['全部', '视频', '社会', '经济', '热点'],
                articleTabArr: [],
                articleTabNum: 0,
                navbarTopHeight: "10px",
                tabbar:this.$store.state.tabbar
                tabbar:this.$store.state.tabbar,
                tabInfo:"0",
                keyword:''
            }
        },
        mounted() {
            // this.getArtcilePageList();
        },
        onLoad() {
            this.getArtcilePageList();
            uni.stopPullDownRefresh();
            //获取资讯类型
            this.getArticleTypeListInfo();
            //获取新闻数据
            this.getArtcilePageList("0");
			
        },
        //上拉加载更多
        onReachBottom() {
            // 
            if (this.status=='nomore') return;
            this.page = ++this.page;
            setTimeout(() => {
                this.getArtcilePageList();
            }, 2000);
                this.getArtcilePageList(this.tabInfo);
            }, 1000);
        },
        methods: {
            goArticleTab(index) {
            //获取资讯类型信息
            getArticleTypeListInfo(){
                var that = this;
                uni.request({
                    url: this.$store.state.piAPI + '/blade-system/dict-biz/dictionary?code=articleType',
                    method: 'GET',
                    data: {
                        current: this.page,
                        size: this.pagesize
                    },
                    success:(res) =>{
                        if(res.data.code==200){
                            const item = {
                                dictKey:"0",
                                dictValue:"全部"
                            }
                            that.articleTabArr.push(item);
                            //判断长度
                            if(res.data.data.length<=4){
                                res.data.data.forEach((item)=>{
                                    that.articleTabArr.push(item);
                                })
                            }else{
                                //只取前4个
                                that.articleTabArr.push(res.data.data[0]);
                                that.articleTabArr.push(res.data.data[1]);
                                that.articleTabArr.push(res.data.data[2]);
                                that.articleTabArr.push(res.data.data[3]);
                            }
                            console.log(res,111);
                            console.log(that.articleTabArr,222);
                        }
                    },
                })
            },
			
            //根据资讯类型查询数据
            goArticleTab(index,dictKey) {
                this.tabInfo = dictKey;
                this.articleTabNum = index;
                //先清空数据
                this.data=[];
                //查询数据
                this.getArtcilePageList(dictKey);
            },
            goTabDetail(index) {
                this.titleNum = index;
@@ -102,23 +147,39 @@
                    url: './article_detail?detailData=' + JSON.stringify(detail)
                });
            },

            //on input 通过 keyword 关键字查询
            getKeyword(){
                this.getArtcilePageList(this.tabInfo);
            },
            //获取资讯信息
            getArtcilePageList(tab) {
                var that = this;
                var paramData = null;
                if(Number(tab)==""){
                    paramData = {
                        current: this.page,
                        size: this.pagesize,
                        keyword:this.keyword
                    }
                }else{
                    paramData = {
                        current: this.page,
                        size: this.pagesize,
                        keyword:this.keyword,
                        articleType:that.tabInfo
                    }
                }
                uni.request({
                    url: this.$store.state.piAPI + '/article/article/page',
                    method: 'GET',
                    data: {
                        current: this.page,
                        size: this.pagesize
                    },
                    data: paramData,
                    success: (res) => {
                        if (res.data.code == 200) {
                            if (res.data.data.records) {
                                //如果总数小于pageSize,不做其他操作
                                if (res.data.data.total < this.pagesize) {
                                    that.data = res.data.data.records;
                                    that.status='nomore';
                                } else {
                                    if (res.data.data.records.length < this.pagesize) {
                                        //如果数量小于分页数量，则为最后一页