H5_module/topic/contentList/contentList.vue

<template>
	<view>
		<view class="ban" v-if="bannerList.length>0">
			<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 @click="jumpUrl('/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 h5util = require('../../utils/h5util.js');
	const app = getApp();
	export default {
		data() {
			return {
				title: '',
				swiperCurrent: 0,
				bannerList: [],
				code: '',
				form: {
					page: 1,
					limit: 10
				},
				contentList: [],
				isLoad: true
			};
		},
		onLoad(options) {
			this.title = options.title;
			this.code = options.code;
			uni.setNavigationBarTitle({
				title: options.title
			})
			
		},
		onShow() {
			// this.getBannerList();
			this.getContentList();
		},
		onReachBottom() {
			this.form.page++;
			this.getContentList();
		},

		methods: {
			jumpUrl(url) {
				uni.navigateTo({
					url:url
				})
				// h5util.jumpUrlExternal({url:url})
			},
			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 = this.code;
				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 = "service/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>