WenWuGuanJia/index_fenbao/XuanJiangYuan/activity-review-list.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="精彩回顾" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view class="fiex_top">
			<view class="" style="border: 1px solid #eba869; width: 670rpx; margin: auto; margin-top: 32rpx">
				<u-search
					bgColor="transparent"
					v-model="val"
					shape="square"
					:showAction="true"
					actionText="搜索"
					@custom="searchBtn"
					:actionStyle="{ color: '#985741', fontSize: '28rpx', fontWeight: 'bold', backgroundColor: '#fff9e9' }"
				></u-search>
			</view>
		</view>
		<scroll-view v-if="list.length" style="height: 1200rpx; margin-left: 6rpx" scroll-y="true" @scrolltolower="LoadMore">
			<view class="wenwu_box">
				<view @click="detailsBtn(item.id)" class="" v-for="(item, index) in list" :key="item.id">
					<view class="gc_item">
						<view class="gc_box" style="">
							<image style="width: 100%; height: 100%; border-radius: 15rpx" :src="item.thumbnail"></image>
						</view>
						<view class="tit">{{ item.title }}</view>
						<!-- <view class="bg_box">湖里区</view> -->
						<!-- <u-badge type="primary" max="99" :value="item.district" :absolute="true" :offset="[10, 5]"></u-badge> -->
					</view>
				</view>
			</view>
		</scroll-view>
		<view v-else><u-empty mode="data" text="暂无数据"></u-empty></view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			val: '',
			page: 1,
			list: [],
			isLoading: false
		};
	},

	onLoad() {
		that = this;
		this.getContentList();
	},
	methods: {
		detailsBtn(id) {
			uni.navigateTo({
				url: '/index_fenbao/XuanJiangYuan/activity-review-details?id=' + id
			});
		},
		getContentList(id) {
			this.isLoading = true;
			this.$api.getContentList(
				{
					page: this.page,
					pageSize: '10',
					model_id: 15, 
					main_body_column_id: 186 ,
					keywords: this.val
				},
				data => {
					that.isLoading = false;
					that.list = [...that.list, ...data.data];
				}
			);
		},
		searchBtn() {
			this.page = 1;
			this.list = [];
			this.getContentList();
		},
		LoadMore() {
			if (this.isLoading) {
				return;
			} else {
				this.page++;
				this.getContentList();
			}
		},
		clear() {
			this.val = '';
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xbg_2.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	height: auto;
}

.fiex_top {
	/* margin-bottom: 20rpx; */
}
.top_box {
	display: flex;
	width: 90%;
	margin: auto;
	justify-content: space-between;
}
.tit_box {
	display: flex;
	align-items: center;
	text-align: center;
	width: 215rpx;
	height: 56rpx;
	justify-content: space-around;
	border: 2rpx solid #eba869;
}
.tit {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wenwu_box {
	width: 92%;
	margin: auto;
	margin-top: 20rpx;
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}
.gc_item {
	position: relative;
	width: 324rpx;
	color: #444444;
	/* font-weight: 900; */
	font-size: 32rpx;
	margin-top: 20rpx;
	font-family: 'MyGlobalFont';
}
.gc_box {
	width: 333rpx;
	height: 280rpx;
}

.bg_box {
	width: 184rpx;
	height: 62rpx;
	margin: auto;
	margin-top: 20rpx;
	line-height: 62rpx;
	color: #fef3e1;
	font-size: 28rpx;
	font-weight: 500;
	background-image: url('/static/img/tab.png');
	background-size: 100% 100%;
}
.u-search__action--active.data-v-0a306a29 {
	height: 60rpx !important;
	line-height: 60rpx !important;
}
.u-search__action--active.data-v-2d141374 {
	height: 60rpx !important;
	line-height: 60rpx !important;
}
</style>