MinNan/index_fenbao/jianzhu/jianzhu.vue

<template>
	<view class="body2">
		<u-navbar :autoBack="true" title="建筑文化" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="jz_swiper">
			<u-swiper
				:list="list1"
				height="335rpx"
				:indicator="true"
				:autoplay="true"
				indicatorMode="dot"
				indicatorActiveColor="#fff"
				indicatorInactiveColor="rgba(255, 255, 255, 0.35)"
				:circular="true"
				indicatorStyle="bottom: 10px"
			></u-swiper>
		</view>
		<view class="" style="margin: 30rpx 0 0 0">
			<u-tabs
				:duration="200"
				:list="listTab"
				:lineWidth="25"
				:lineHeight="12"
				lineColor="#4E7198"
				:lineColor="`url(${tabImg}) 100% 100%`"
				:activeStyle="{
					color: '#4E7198',
					fontSize: '34rpx'
				}"
			></u-tabs>
		</view>
		<view class="banxin">
			<view style="margin-bottom: 30rpx" v-for="(item, index) in jianZhuList" :key="item">
				<view @click="buildBtn(index)" class="jz_item">
					<image style="width: 100%; height: 100%" :src="item.thumbnail"></image>
				</view>
				<view class="" style="width: 650rpx; display: flex; justify-content: space-between">
					<view>{{ item.title }}</view>
					<view class="" style="display: flex; align-items: center; justify-content: space-evenly">
						<uni-icons type="heart-filled" color="#ca5642" size="20"></uni-icons>
						<text style="font-size: 28rpx">{{ item.likes }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			isLoading: false, // 节流阀 默认为关闭状态
			main_body_id: '',
			page: '1',
			model_id: '',
			tabImg: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tab.png',
			list1: [
				'https://img1.baidu.com/it/u=3551075903,1493549593&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
				'https://img0.baidu.com/it/u=1667631211,245764236&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=357',
				'https://img1.baidu.com/it/u=2554021422,1871009309&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=500'
			],
			listTab: [
				{
					name: '全部',
					tabid: 1
				},
				{
					name: '民居大厝',
					tabid: 2
				},
				{
					name: '宫殿建筑',
					tabid: 3
				},
				{
					name: '礼制性祭祀建筑',
					tabid: 4
				},
				{
					name: '百家争鸣',
					tabid: 5
				}
			],
			jianZhuList: []
		};
	},
	onLoad(o) {
		console.log(o, 'ooooooooo');
		that = this;
		this.model_id = o.id;
		this.main_body_id = this.$db.get('main_body_id');
		this.getColumnList(o.id);
		this.getContentList(o.id);
	},

	onReachBottom() {
		if (this.isLoading) {
			return;
		} else {
			// 每次触发上拉触底 请求的页码 自加一
			this.page++;

			// 重新请求数据
			this.getContentList();
		}
	},
	methods: {
		// 栏目列表
		getColumnList(id) {
			this.$api.getColumnList(
				{
					model_id: 1,
					main_body_id: this.main_body_id
				},
				function (res) {
					let a = {
						diyname: 'crzx',
						id: '',
						image: '',
						name: '全部'
					};
					that.listTab = res.data;
					that.listTab.unshift(a);
					// console.log(that.listTab, '全部');
				}
			);
		},
		// 栏目内容列表
		getContentList(id) {
			this.isLoading = true;
			this.$api.getContentList(
				{
					model_id: 1,
					main_body_id: this.main_body_id,
					page: this.page,
					pageSize: '10'
				},
				function (res) {
					// 关闭节流阀
					that.isLoading = false;
					// console.log(res, '内容列表');
					that.jianZhuList = [...that.jianZhuList, ...res.data];
				}
			);
		},

		// 建筑详情
		buildBtn(i) {
			uni.navigateTo({
				url: this.jianZhuList[i].page
			});
		}
	}
};
</script>

<style>
.body2 {
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	background-color: #efefef;
	padding-bottom: 50rpx;
}
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
/deep/.u-tabs__wrapper__nav__item.data-v-48634e29 {
	padding: 0 40rpx !important;
}
/deep/.u-tabs__wrapper__nav__line.data-v-48634e29 {
	bottom: 16rpx !important;
}
/deep/.u-tabs__wrapper__nav__item.data-v-48634e29 {
	align-items: end !important;
}
.banxin {
	margin: 0 32rpx 0 32rpx;
}
.jz_swiper {
}
.jz_item {
	width: 686rpx;
	height: 345rpx;
	border-radius: 26rpx 26rpx 0rpx 0rpx;
}
</style>