renshou/topic/contentList/contentList.vue

<template>
	<view>
		<view class="ban">
			<swiper class="swiper" @change="swiperChange" autoplay="true" interval="5000" duration="300">
				<block v-for="(item, index) in bannerList" :key="index">
					<swiper-item @click="clickBanner(item)"><image lazy-load="true" :src="item.pic" mode="aspectFill"></image></swiper-item>
				</block>
			</swiper>
			<view class="dots ddflex">
				<block v-for="(item, index) in bannerList" :key="index"><view :class="['dot', index == swiperCurrent ? 'active' : '']"></view></block>
			</view>
		</view>
		<view class="box">
			<!-- <view class="title dflex">{{title}}</view> -->
			<view class="rec">
				<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 tovers">{{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>
	</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 {
			title: '',
			swiperCurrent: 0,
			bannerList: [],
			form: {
				page: 1,
				limit: 10
			},
			contentList: [],
			isLoad: true
		};
	},
	onLoad(options) {
		this.title = options.title;
		uni.setNavigationBarTitle({
			title: options.title
		})
	},
	onShow() {
		this.getBannerList();
		this.getContentList();
	},
	onReachBottom(){
		this.form.page++;
		this.getContentList();
	},

	methods: {
		swiperChange(e) {
			this.swiperCurrent = e.detail.current;
		},
		getBannerList() {
			let that = this;
			req.getRequest('/api/banner', {
				groupId: '1196269897935630415'
			}, data => {
				that.bannerList = data;
			});
		},
		//为您推荐
		getContentList() {
			if (!this.isLoad) return false;
			this.isLoad = false;
			let form = this.form;
			form.code = '001';
			req.getRequest('/api/content/list', form,res => {
				if (res && res.length == 10) {
					this.isLoad = true;
				}
				if (this.form.page > 1) {
					res = this.contentList.concat(res);
				}
				this.contentList = res;
			});
		},
		clickBanner(item) {
			let url = '';
			if (item.type * 1 == 2 && item.content != "") {
				url = "product/detail/detail?id=" + item.content;
			} else if (item.type * 1 == 5) {
				url = "product/coupon/coupon";
			} else if (item.type * 1 == 6) {
				url = "pages/live/live";
			} else if (item.type * 1 == 9 && item.content != "") {
				url = "product/list/list?id=" + item.content;
			} else if (item.type * 1 == 10) {
				url = "plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=" + item.content;
				// console.log(
				// url); // url=`plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${dt.content}`
			} else if (item.type * 1 == 19 && item.content != "") {//文章内容
					url = "topic/content/content?id=" + item.content;//1为普通文章内容
			} else {
				url = "";
			}
		
			if (item.type * 1 == 6) app.globalData.switchTab(url);
			else app.globalData.openPage(url);
		},
	}
};
</script>

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