renshou/topics/index/index.vue

<template>
	<view class="con">
		<view class="search ddflex">
			<image src="../../static/images/ssico.png" class="ssico"></image>
			<input v-model="searchTitle" @input="inputEvn" placeholder="搜索更多话题" placeholder-class="placeholder" class="ipt fflex" />
		</view>
		<view class="list" v-if="hotTopicList && hotTopicList.length > 0">
			<view :class="'li ' + item.bg" v-for="(item, index) in hotTopicList" :key="index" @click="jumpUrl('/topics/detail/detail?topicId=' + item.id)">
				<view class="topic ddflex">
					<view class="fflex">
						<view class="title"># {{ item.title }}</view>
						<view class="cy">{{ item.participantsNO }}参与</view>
					</view>
					<!-- <view class="gzbtn">+关注</view> -->
				</view>
				<view class="lis ddflex" v-if="item.momentsList && item.momentsList.length > 0" v-for="(it, idx) in item.momentsList" :key="idx">
					<image :src="'../static/images/' + (idx == 0 ? 'ht_jing' : 'ht_li') + '.png'"></image>
					<!-- <view class="fflex tover">{{ removeHtml(it.content) }}</view> -->
					<view class="fflex"><rich-text :nodes="it.content"></rich-text></view>
				</view>
			</view>
		</view>
		<view class="nodata" v-else>
			<image :src="picUrlss + 'empty_jl.png'"></image>
			<text>没有相关话题</text>
		</view>
	</view>
</template>

<script>
const app = getApp();
const req = require('../../utils/request.js');
const util = require('../../utils/util.js');
export default {
	data() {
		return {
			picUrlss: req.public.picUrls,
			isLoad: true,
			form: {
				page: 1,
				limit: 10
			},
			bgList: ['bg1', 'bg2', 'bg3', 'bg4'],
			hotTopicList: [],
			searchTitle: '',
			config: {}
		};
	},
	onLoad() {
		
	},
	onShow() {
		this.isLoad = true
		this.form.page = 1
		this.getHotTopic();
	},

	onReachBottom() {
		this.form.page++;
		this.getHotTopic();
	},

	methods: {
		removeHtml(content) {
			return util.removeHtml(content);
		},
		randomBg() {
			let random = this.bgList[Math.floor(Math.random() * this.bgList.length)];
			return random;
		},

		inputEvn(e) {
			this.form.page = 1;
			this.isLoad = true;
			this.getHotTopic();
		},

		jumpUrl(url) {
			uni.navigateTo({
				url: url
			});
		},
		getHotTopic() {
			var tha = this;
			if (!this.isLoad) return false;
			this.isLoad = false;
			var dataPram = {};
			dataPram.page = this.form.page;
			dataPram.limit = this.form.limit;
			if (this.searchTitle) {
				console.log('关键词====', this.searchTitle);
				dataPram.search = this.searchTitle;
			}
			dataPram.orderType = 1;
			req.getRequest('/api/v3/dialogue/listV2', dataPram, data => {
				if (data && data.length >= this.form.limit) {
					this.isLoad = true;
				}
				if (data) {
					data.map(item => {
						let random = tha.randomBg();
						item.bg = random;
						return item;
					});
				}
				if (this.form.page > 1) {
					data = this.hotTopicList.concat(data);
				}
				this.hotTopicList = data;
			});
		}
	}
};
</script>

<style>
@import './index.css';
</style>