MinNan/index_fenbao/feiyi/feiyi.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="fy_nav_bj">
			<view class="" style="padding: 80rpx 0rpx 0 50rpx">
				<view style="font-size: 36rpx; margin-bottom: 20rpx">闽南非遗</view>
				<view style="font-size: 24rpx">推进制度化建设，打造非遗活态传承新机制</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="banxin">
			<u-swiper
				indicatorMode="dot"
				indicatorStyle="bottom: 10rpx"
				:list="list1"
				height="180rpx"
				:indicator="true"
				:autoplay="true"
				:circular="true"
				keyName="image"
			></u-swiper>
		</view>
		<u-picker :show="show" @close="show = false" :closeOnClickOverlay="true" :columns="columns" @cancel="show = false" @confirm="yf_isok"></u-picker>
		<view class="banxin" style="margin-top: 40rpx">
			<!-- 选择城市 -->
			<view class="" style="display: flex">
				<view @click="show = true" class="fy_cs">
					<uni-icons type="location" size="20"></uni-icons>
					<text style="margin: 0 10rpx 0 10rpx">{{ columnsItem }}</text>
					<uni-icons type="bottom" size="20"></uni-icons>
				</view>
				<!-- 选择城市end -->
				<view class="">
					<u-tabs
						:list="tabList"
						:lineWidth="0"
						:activeStyle="{
							border: '1px solid #dac1a1',
							color: '#dac1a1'
						}"
					></u-tabs>
				</view>
			</view>
			<!-- 滑动模式 -->
			<!-- <view class="" style="margin-left: 200rpx">
				<scroll-view scroll-x style="display: flex; white-space: nowrap" class="">
					<view @click="fyTab(item)" v-for="item in tabList" :key="item.id" class="fy_tab_item" :class="{ active: tabactive == item.id }">
						{{ item.name }}
					</view>
				</scroll-view>
			</view> -->
		</view>
		<!-- 内容 -->
		<view class="sh_xs banxin">
			<view @click="detailsBtn(index)" class="sh_xs_item" v-for="(item, index) in projectList" :key="item">
				<view class="" style="width: 325rpx; height: 180rpx; border-radius: 10rpx">
					<image style="width: 100%; height: 100%" :src="item.thumbnail"></image>
				</view>
				<view class="">{{ item.title }}</view>
				<view class="ms_dianzan">
					<view class="">
						<uni-icons type="star-filled" color="#4e7198" size="20"></uni-icons>
						<text>{{ item.collects }}</text>
					</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>{{ item.likes }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			isLoading: false, // 节流阀 默认为关闭状态
			main_body_id: '',
			page: '1',
			main_body_id: '',
			show: false,
			columns: [['厦门', '泉州', '福州']],
			columnsItem: '厦门' /* 选中的城市 */,
			tabactive: 0,
			list1: [
				{
					image: 'https://feicheng.16fw.cn:1443/uploads/20230403/f394190a0e3fc5873644beadead1cc3f.jpg'
				},
				{
					image: 'https://feicheng.16fw.cn:1443/uploads/20230403/00885f0245196beebe66ca79aebe5656.jpg'
				},
				{
					image: 'https://feicheng.16fw.cn:1443/uploads/20230403/1cf5f3c9c6b28fcbd3a983068f06d257.jpg'
				}
			],
			tabList: [],
			projectList: []
		};
	},
	onLoad(o) {
		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: {
		fyTab(item) {
			this.tabactive = item.id;
			console.log(item);
		},
		// 选择城市
		yf_isok(e) {
			console.log(e);
			this.columnsItem = e.value;
			this.show = false;
		},
		detailsBtn(i) {
			uni.navigateTo({
				url: this.projectList[i].page
			});
		},
		getColumnList(id) {
			this.$api.getColumnList(
				{
					model_id: id,
					main_body_id: this.main_body_id
				},
				function (res) {
					let a = {
						diyname: 'crzx',
						id: '',
						image: '',
						name: '全部'
					};
					that.tabList = res.data;
					that.tabList.unshift(a);
				}
			);
		},
		// 栏目内容列表
		getContentList(id) {
			// 打开节流阀
			this.isLoading = true;

			this.$api.getContentList(
				{
					model_id: this.model_id,
					main_body_id: this.main_body_id,
					page: this.page,
					pageSize: '10'
				},
				function (res) {
					console.log(res, '内容列表');
					// 关闭节流阀
					that.isLoading = false;
					that.projectList = [...that.projectList, ...res.data];
				}
			);
		}
	}
};
</script>

<style>
.body2 {
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	background-color: #efefef;
	padding-bottom: 50rpx;
	background-color: #efefef;
}
.banxin {
	margin: 0 32rpx 0 32rpx;
}
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.fy_nav_bj {
	width: 100%;
	height: 220rpx;
	color: #ffffff;
	margin-bottom: 25rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/fy_navbj.png');
	background-size: 100% 100%;
}
.active {
	border: 1px solid #dac1a1;
}
.fy_tab_item {
	line-height: 45rpx;
	text-align: center;
	margin-right: 30rpx;
	width: 170rpx;
	height: 50rpx;
	display: inline-block;
	background-color: #fffcf3;
}
.sh_xs {
	margin-top: 50rpx;
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}
.ms_dianzan {
	width: 245rpx;
	display: flex;
	justify-content: space-between;
	margin-top: 10rpx;
}
.sh_xs_item {
	border-radius: 10rpx;
	background: #ffffff;
	margin-bottom: 35rpx;
}
.fy_cs {
	display: flex;
	align-items: center;
	height: 50rpx;
	margin-top: 20rpx;
	/* background-color: antiquewhite; */
}
</style>