renshouH5/topic/contentList/contentList.vue

<template>
	<view>
		<view class="top-fixed">
			<view class="search-box ddflex">
				<view class="search-input ddflex fflex">
					<image src="/static/images/ssico.png"></image>
					<input @confirm="searchFn" confirm-type="search" @input="searchFn" v-model="searchVal" class="fflex"
						placeholder="请输入关键词" />
				</view>
			</view>
			<view class="rec-association" v-if="cateList.length>0" style="">
				<view class="dflex">
					<view class="rec-association-nav fflex">
						<scroll-view scroll-x="true" class="rec-association-scroll ddflex">
							<view :class="'rec-association-scroll-item tover '+(cIndex == index?'rec-association-scroll-item-active':'')" @click="getCon(item,index)" v-for="item,index in cateList" :key="index">{{item.name}}</view>
						</scroll-view>
						<view class="rec-association-nav-m"></view>
					</view>
				</view>
			</view>
		</view>
		
		<view :style="cateList.length>0?'height: 180rpx;':'height: 100rpx;'"></view>
		
		<view class="box">
			<!-- <view class="title dflex">{{title}}</view> -->
			<view class="rec" v-if="contentList.length>0">
				<navigator :url="'/topic/content/content?id=' + item.id" hover-class="none" class="li dflex" v-for="(item,index) in contentList" :key="index">
					<view class="flex">
						<view class="rec-tit tovers3">{{item.title}}</view>
						<view class="dflex">
							<!-- <view class="author ddflex"><image src="../../static/pages/images/zbgw.png" mode="aspectFill"></image>欧衡</view> -->
							<view class="rec-time">{{item.createDate}}</view>
						</view>
					</view>
					<image :src="item.pic" mode="aspectFill" class="rec-img"></image>
				</navigator>
			</view>
			<view class="nodata" v-if="!contentList||contentList.length==0">
				<image :src="picUrlss+'empty_zb.png'"></image>
				<text>暂无资讯</text>
			</view>
		</view>
	</view>
</template>

<script>
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
const util = require('../../utils/util.js');
const app = getApp();
export default {
	data() {
		return {
			picUrlss: req.public.picUrls,
			title: '',
			swiperCurrent: 0,
			bannerList: [],
			form: {
				page: 1,
				limit: 10
			},
			contentList: [],
			isLoad: true,
			code:null,
			cid:null,
			cateList:[],
			cIndex:0,
			searchVal:''
		};
	},
	async onLoad(options) {
		this.title = options.title;
		this.code = options.code;
		uni.setNavigationBarTitle({
			title: options.title
		})
		if(this.code)
			await this.getCate()
		this.getContentList();
	},
	onShow() {
	},
	onReachBottom(){
		this.form.page++;
		this.getContentList();
	},

	methods: {
		async getCon(item,index){
			this.cIndex = index;
			this.cid = item.id
			this.form.page = 1
			this.isLoad = true;
			this.getContentList();
		},
		// 获取分类
		getCate(){
			return new Promise((r,j)=>{
				req.getRequest('/api/content/category/list',{parentCode: this.code},res=>{
					this.cateList = res;
					// 如果有二级分类，清处code和noCode
					if(this.cateList&&this.cateList.length>0){
						this.cid = res[0].id
						this.code = null
					}
					r()
				})
			})
		},
		//为您推荐
		getContentList() {
			if (!this.isLoad) return false;
			this.isLoad = false;
			let form = this.form;
			form.code = this.code;
			// 如果有二级分类用分类id查
			if(this.cid){
				form.cid = this.cid
			}
			if(this.searchVal) form.title = this.searchVal
			else form.title = ''
			if(req.getStorage("shareId")){
				form.shareSaleNo = req.getStorage("shareId")
			}
			req.getRequest('/api/content/list', form,res => {
				res = res?res:[]
				if (res && res.length == 10) {
					this.isLoad = true;
				}
				if (this.form.page > 1) {
					res = this.contentList.concat(res);
				}
				this.contentList = res;
			});
		},
		searchFn(){
			this.form.page = 1
			this.isLoad = true;
			this.getContentList();
		}
	}
};
</script>

<style>
	@import "./contentList.css";
</style>