MinNan/index_fenbao/minsu/minsu.vue

<template>
	<view class="body" style="background-color: #efefef">
		<u-navbar :autoBack="true" title="民俗宗教" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view>
			<u-swiper :list="list1" height="335rpx" :indicator="true" :autoplay="true" :circular="true" keyName="image" showTitle></u-swiper>
		</view>

		<!-- 生活习俗 -->
		<view class="sh_xs banxin">
			<view class="text-wrapper_7" v-for="(item, index) in customList" :key="item.id">
				<view @click="getContentList(index)" class="gebg_Duo" style="">
					<text lines="1" class="text_4">{{ item.name }}</text>
					<text lines="1" class="text_5">查看更多》</text>
				</view>
				<view class="sh_xs_box">
					<view class="sh_xs_item" v-for="(item2, index1) in customList[index].content_list" :key="item.id">
						<view @click="detailsBtn(index, index1)" class="img_box">
							<image class="img" :src="item2.thumbnail"></image>
						</view>
						<view class="">{{ item2.title }}</view>
						<view class="ms_dianzan">
							<view class="">
								<uni-icons type="star-filled" color="#4e7198" size="20"></uni-icons>
								<text>{{ item2.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>{{ item2.likes }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			id: '',
			main_body_id: '',
			list1: [
				{
					image: 'https://img0.baidu.com/it/u=1541281845,960690765&fm=253&fmt=auto&app=138&f=JPEG?w=758&h=500',
					title: '山里乡民祭妈祖'
				},
				{
					image: 'https://img1.baidu.com/it/u=4153166350,2319982730&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=424',
					title: '初九拜天公'
				},
				{
					image: 'https://img1.baidu.com/it/u=3003350307,572069045&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500',
					title: '福建茶乡古礼祭茶神'
				}
			],
			// 生活习俗
			customList: []
		};
	},
	onShow() {
		this.getMainBodyColumnContentList(this.id);
	},
	onLoad(o) {
		that = this;
		this.id = o.id;
		this.main_body_id = this.$db.get('main_body_id');
		this.getColumnList(o.id);
		this.getMainBodyColumnContentList(o.id);
	},
	methods: {
		detailsBtn(i, is) {
			// console.log(i, '55555555555');
			// console.log(is, '6666666666');
			// console.log(this.customList[i].content_list[is].id, '75555558');
			uni.navigateTo({
				url: '/index_fenbao/minsu/ms_wenZhang?id=' + this.customList[i].content_list[is].id
			});
		},
		// 模型的主体栏目列表
		getColumnList(id) {
			this.$api.getColumnList(
				{
					model_id: id,
					main_body_id: this.main_body_id
				},
				function (res) {
					// console.log(res, 'res');
				}
			);
		},
		// 查看更多
		getContentList(i) {
			uni.navigateTo({
				url: `/index_fenbao/minsu/geng_duo?id=${this.id}&main_body_id=${this.main_body_id}&main_body_column_id=${this.customList[i].id}`
			});
		},
		// 主体栏目默认内容列表
		getMainBodyColumnContentList(id) {
			this.$api.getMainBodyColumnContentList(
				{
					model_id: id,
					main_body_id: this.main_body_id
				},
				function (res) {
					// console.log(res, '内容列表默认');
					that.customList = res.data;
				}
			);
		}
	}
};
</script>

<style>
.banxin {
	margin: 0 32rpx 0 32rpx;
}
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
/* 去除轮播图标题遮罩背景色 */
/* .u-swiper__wrapper__item__wrapper__title {
	background-color: transparent !important;
} */
.sh_xs {
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}
.ms_dianzan {
	width: 245rpx;
	display: flex;
	justify-content: space-between;
	margin-top: 10rpx;
	margin-bottom: 10rpx;
}
.sh_xs_item {
	border-radius: 10rpx;
	background: #ffffff;
	margin-left: 30rpx;
}
.text-wrapper_7 {
	width: 651rpx;

	margin: 33rpx 15rpx 25rpx 5rpx;
}
.text_4 {
	width: 112rpx;
	height: 27rpx;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-weight: 700;
	white-space: nowrap;
	line-height: 28rpx;
}
.text_5 {
	width: 89rpx;
	height: 20rpx;
	color: rgba(18, 18, 18, 1);
	font-size: 22rpx;
	white-space: nowrap;
	line-height: 20rpx;
	margin-top: 3rpx;
}
.sh_xs_box {
	display: flex;
	justify-content: space-around;
}
.img {
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}
.img_box {
	width: 330rpx;
	height: 185rpx;
	margin-bottom: 10rpx;
}
.gebg_Duo {
	height: 60rpx;
	display: flex;
	justify-content: space-between;
}
</style>