MinNan/pages/index/index.vue

<template>
	<view class="">
		<view class="box" style="">
			<view class="nabBar">
				<u-navbar title="首页" :placeholder="true" bgColor="rgba(255,255,255,0)" :leftIconSize="0" titleStyle="font-weight:bold;color:#7a5831">
					<view @click="cityShow = true" class="u-nav-slot" slot="left">
						<text>{{ city }}</text>
						<view class="">
							<uni-icons type="bottom" size="20"></uni-icons>
						</view>
					</view>
				</u-navbar>
			</view>
			<!-- 城市选择 -->
			<u-action-sheet
				@select="cityClick"
				:actions="cityList"
				:title="title"
				:show="cityShow"
				:closeOnClickOverlay="true"
				:closeOnClickAction="true"
				@close="close()"
			></u-action-sheet>
			<view class="group_1">
				<view class="group_25 banxin2">
					<u-swiper
						keyName="image"
						:list="mn_swiperList"
						imgMode="aspectFill"
						:height="120"
						:indicator="true"
						:autoplay="true"
						:circular="true"
						indicatorStyle="bottom: 10px"
						@click="bannerClick"
						indicatorMode="dot"
						indicatorActiveColor="#fff"
						indicatorInactiveColor="rgba(255, 255, 255, 0.35)"
					></u-swiper>
				</view>
			</view>
			<view class="block_8">
				<view @click="moreBtn" class="an" style="width: 650rpx; margin: auto; margin-top: 25rpx">
					<u-notice-bar bgColor="#efd9ba" text="欢迎进入闽南魂"></u-notice-bar>
				</view>

				<view class="text-wrapper_17">
					<text lines="1" class="text_32">闽南文化推荐</text>
				</view>

				<view class="grid_2">
					<view class="group_23">
						<view class="box_19" @click="functionBtn(index)" v-for="(item, index) in functionList" :key="item.id" :class="{ mnjs: index == 0 }">
							<image class="box_19_img" :src="item.image"></image>
							<view class="image-text_13" :class="{ mnjs2: index == 0 }">
								<image :src="item.icon" class="image_20"></image>
								<text lines="1" class="text-group_10">{{ item.title }}</text>
							</view>
						</view>
					</view>
					<view class="text-wrapper_18">
						<text lines="1" class="text_23">精彩村史</text>
						<text lines="1" class="text_24" @click="cs_listBtn">查看更多》</text>
					</view>
					<view class="banxin2" style="display: flex; justify-content: space-betweenl; margin-left: 12rpx">
						<view class="" style="width: 305rpx">
							<u-swiper
								keyName="image"
								height="150"
								:autoplay="true"
								circular
								:list="bannerlist1"
								previousMargin="30"
								nextMargin="30"
								radius="5"
								bgColor="#ffffff"
							></u-swiper>
						</view>
						<view class="" style="width: 305rpx; margin-left: 32rpx">
							<u-swiper
								keyName="image"
								height="150"
								:autoplay="true"
								:circular="true"
								:list="bannerlist2"
								previousMargin="30"
								nextMargin="30"
								radius="5"
								bgColor="#ffffff"
							></u-swiper>
						</view>
					</view>
					<view class="text-wrapper_18">
						<text lines="1" class="text_23">精彩推荐</text>
						<!-- <text lines="1" class="text_8">查看更多》</text> -->
					</view>
					<view class="ad">
						<view class="box_22" @click="recommendBtn(index)" v-for="(item, index) in recommendList" :key="item.id">
							<view class="block_5">
								<image style="width: 100%; height: 100%; border-radius: 0 50rpx 0 20rpx" :src="item.thumbnail"></image>

								<view class="tag_1">
									<text lines="1" class="text_9">{{ item.type_text }}</text>
								</view>

								<view class="tag_2">
									<text lines="1" class="text_10">{{ item.title }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<mntabBar footerTab="0" :messageCount="0"></mntabBar>
	</view>
</template>

<script>
import { mapState } from 'vuex';

let that;
export default {
	data() {
		return {
			loadTriggered: false,
			isLoading: false,
			page: '1',
			main_body_id: '' /* 主体id */,
			user: {} /*  用户信息*/,
			city: '厦门' /* 选中城市 */,
			cityShow: false,
			cityList: [],
			functionList: [] /* 首页功能菜单 */,
			recommendList: [],

			mn_swiperList: [],

			bannerlist1: [],
			bannerlist2: []
		};
	},
	/* 页面触底 */
	onReachBottom() {
		if (this.isLoading) {
			return;
		} else {
			this.page++;
			this.getFlagList();
		}
	},
	onLoad(option) {
		that = this;
		this.getCity();
		this.main_body_id = this.$db.get('main_body_id');
		if (this.main_body_id) {
			this.getIndexBanner();
			this.getIndexFunction();
			this.getFlagList();
			this.getHistoryMuseum();
		}
	},

	methods: {
		// 首页轮播
		getIndexBanner() {
			this.$api.getIndexBanner(
				{
					main_body_id: this.main_body_id
				},
				function (res) {
					that.mn_swiperList = res.data;
				}
			);
		},
		// 功能图片
		getIndexFunction() {
			this.$api.getIndexFunction({ main_body_id: this.main_body_id }, function (res) {
				let iconList = ['/static/image/js_icon.png', '/static/image/jz_icon.png', '/static/image/ms_icon.png', '/static/image/fy_icon.png', '/static/image/mn_icon.png'];
				that.functionList = res.data;
				that.functionList.forEach((item, index) => {
					item.icon = iconList[index];
				});
				// console.log(that.functionList, 3333333);
			});
		},
		// 获取城市主体
		getCity() {
			this.$api.getCity({ main_body_id: '' }, function (res) {
				that.cityList = res.data;
				that.cityList.forEach((item) => {
					if (item.isChecked) {
						that.$db.set('main_body_id', item.main_body_id);
						that.main_body_id = item.main_body_id; // 设置 main_body_id
						// 增加这一部分以触发后续请求
						if (!that.loadTriggered) {
							that.loadTriggered = true;
							that.getIndexBanner();
							that.getIndexFunction();
							that.getFlagList();
							that.getHistoryMuseum();
						}
					}
				});
			});
		},
		// 城市切换
		cityClick(e) {
			this.city = e.name;
			this.$db.set('main_body_id', e.main_body_id);
			this.user = this.$common.userInfo();
			let mainBodyUserInfo = this.$db.get('mainBodyUserInfo');
			let id = mainBodyUserInfo.id;
			if (this.user == 'undefined' || this.user == '' || this.user == null) {
				// this.$common.toLogin();
			} else {
				// console.log(id, e.main_body_id, 877878);
				this.$api.refreshUser(
					{
						main_body_id: e.main_body_id,
						main_body_user_id: id
					},
					function (res) {
						// console.log(res, 131313);
						that.user = res.data.user;
						that.$db.set('user', that.user);
						that.$db.set('mainBodyUserInfo', res.data.mainBodyUserInfo);
					}
				);
			}
			// console.log(e, 'index');
			// console.log(user, 'user');
			that.$common.successToShow('切换成功');
		},

		// 功能菜单
		functionBtn(i) {
			uni.navigateTo({
				url: this.functionList[i].page
			});
		},
		// 获取精彩推荐内容
		getFlagList() {
			this.isLoading = true;
			this.$api.getFlagList({ main_body_id: this.main_body_id, page: this.page, pageSize: '10', flag: 'recommend' }, function (res) {
				// console.log(res, 666666666);
				that.isLoading = false;
				that.recommendList = [...that.recommendList, ...res.data];
			});
		},
		// 史馆列表
		getHistoryMuseum() {
			this.$api.getHistoryMuseum({ main_body_id: this.main_body_id }, function (res) {
				const keys = Object.keys(res.data);
				// console.log(keys, 'keys');
				let valuesArray = [];
				keys.forEach((key) => {
					valuesArray.push(res.data[key]);
				});
				// 取前三个和后三个元素
				that.bannerlist1 = valuesArray.slice(0, 3);
				that.bannerlist2 = valuesArray.slice(-3);
				// console.log(that.bannerlist2);
			});
		},
		//精彩推荐内容
		recommendBtn(i) {
			this.$common.navigateTo(this.recommendList[i].page);
		},
		// 闽南文化推荐,
		moreBtn() {
			uni.navigateTo({
				url: '/index_fenbao/mn_wenhua/mn_wenhua'
			});
		},

		// 村史列表
		cs_listBtn() {
			uni.navigateTo({
				url: '/index_fenbao/cs_liebiao/cs_liebiao'
			});
		},
		// 点击轮播
		bannerClick(index) {
			if (this.mn_swiperList[index].page != null) {
				// console.log(this.mn_swiperList[index].page);
				uni.navigateTo({
					url: this.mn_swiperList[index].page
				});
			}
		},
		close() {
			this.cityShow = false;
		}
	}
};
</script>

<style>
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
/deep/.u-reset-button.data-v-b62b882e {
	height: 120rpx !important;
}
/deep/.u-line.data-v-727e452e {
	display: none !important;
}
/deep/.u-notice-bar.data-v-24c07869 {
	width: 650rpx !important;
	margin-left: 50rpx !important;
}
.box {
	height: auto;
	width: 100%;
	background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/index_bg.jpg');
	background-size: 100% 100%;
	background-color: #f8f8f8;
	background-attachment: fixed;

	position: relative;
	display: flex;
	flex-direction: column;
}
/deep/.u-icon__icon.data-v-2ee87dc9 {
	top: 0 !important;
	left: 5rpx !important;
}
.mnjs {
	width: 650rpx !important;
}
.mnjs2 {
	margin: 35rpx 0 0 225rpx !important;
}
.qh_icon {
	position: absolute;
	top: 0;
	left: 0;
}
.banxin {
	width: 100%;
	height: 100rpx;
	margin: auto;
	/* background-color: yellowgreen; */
}
.banxin2 {
	width: 90%;
	margin: auto;
}

.u-nav-slot {
	display: flex;
	margin-left: 20rpx;
}
.nabBar {
	/* height: 200rpx; */
	/* 	background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/shouyeBJ.png');
	background-size: cover; */
}

.group_1 {
	width: 720rpx;
	display: flex;
	margin-top: 130rpx;
	margin-left: 12rpx;
	flex-direction: column;
	justify-content: flex-end;
}
.group_25 {
	margin-top: -120rpx;
	display: flex;
	flex-direction: column;
}
.image_3 {
	width: 696rpx;
	height: 28rpx;
	margin: 13rpx 0 0 29rpx;
}
.nav-bar_4 {
	width: 746rpx;
	height: 81rpx;
	margin-top: 10rpx;
	flex-direction: row;
	display: flex;
}
.group_33 {
	height: 26rpx;
	display: flex;
	flex-direction: column;
	width: 147rpx;
	margin: 23rpx 0 0 32rpx;
}
.group_34 {
	width: 147rpx;
	height: 26rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
}
.text_21 {
	width: 110rpx;
	height: 26rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
}
.label_5 {
	width: 23rpx;
	height: 23rpx;
	margin-top: 1rpx;
}
.text_22 {
	width: 68rpx;
	height: 34rpx;
	overflow-wrap: break-word;
	color: rgba(18, 18, 18, 1);
	font-size: 36rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 36rpx;
	margin: 18rpx 0 0 143rpx;
}
.applet-top-bar_1 {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 28rpx;
	width: 155rpx;
	height: 56rpx;
	border: 1px solid rgba(241, 241, 241, 1);
	flex-direction: row;
	display: flex;
	margin: 7rpx 25rpx 0 176rpx;
}
.image_4 {
	width: 53rpx;
	height: 31rpx;
	margin: 13rpx 0 0 24rpx;
}
.label_1 {
	width: 38rpx;
	height: 38rpx;
	margin: 9rpx 21rpx 0 19rpx;
}

.block_8 {
	width: 750rpx;

	display: flex;
	flex-direction: column;
}

.text_1 {
	width: 319rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: rgba(153, 153, 153, 1);
	font-size: 24rpx;
	font-family: PingFang-SC-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin: 21rpx 281rpx 0 23rpx;
}
.text-wrapper_17 {
	width: 667rpx;
	height: 34rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 35rpx 0 0 51rpx;
}
.text_32 {
	width: 211rpx;
	height: 34rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 36rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 36rpx;
}
.text_33 {
	color: rgba(102, 102, 102, 1);
	font-size: 24rpx;
	line-height: 24rpx;
	margin-top: 7rpx;
}
.grid_2 {
	flex-wrap: wrap;
	display: flex;
	flex-direction: row;
	margin: 27rpx 0 0 42rpx;
}

.group_js {
	height: 166rpx;
	display: flex;
	flex-direction: column;
	margin: 20rpx 27rpx 0rpx 30rpx;
}
.box_js {
	height: 166rpx;
	position: relative;
	display: flex;
	flex-direction: row;
}
.box_19_js {
	width: 100%;
	height: 100%;
	border-radius: 20rpx;
}
.box_19_js ::before {
	content: '';
	display: block;
	position: absolute; /* 设置绝对定位 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2); /* 设置遮罩层颜色和透明度 */
	z-index: 1;
}
.image-text_js {
	width: 233rpx;
	height: 102rpx;
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 35rpx 0 0 250rpx;
	z-index: 2;
}
.image_js {
	width: 75rpx;
	height: 65rpx;
	margin-left: 72rpx;
}
.text-group_js {
	width: 233rpx;
	height: 27rpx;
	overflow-wrap: break-word;
	color: rgba(255, 228, 176, 1);
	font-size: 28rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: center;
	white-space: nowrap;
	line-height: 28rpx;
	margin-top: 10rpx;
}

.group_23 {
	width: 665rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 60rpx 32rpx 6rpx;
}
.box_19 {
	width: 312rpx;
	height: 166rpx;
	position: relative;
	display: flex;
	flex-direction: row;
	margin-top: 20rpx;
}
.box_19_img {
	width: 100%;
	height: 100%;
	border-radius: 20rpx;
}
.box_19_img ::before {
	content: '';
	display: block;
	position: absolute; /* 设置绝对定位 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2); /* 设置遮罩层颜色和透明度 */
	z-index: 1;
}
.image-text_13 {
	width: 233rpx;
	height: 102rpx;
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 35rpx 0 0 45rpx;
	z-index: 2;
}
.image_20 {
	width: 75rpx;
	height: 65rpx;
	margin-left: 76rpx;
}
.text-group_10 {
	width: 233rpx;
	height: 27rpx;
	overflow-wrap: break-word;
	color: rgba(255, 228, 176, 1);
	font-size: 28rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: center;
	white-space: nowrap;
	line-height: 28rpx;
	margin-top: 10rpx;
}
.group_24 {
	border-radius: 20rpx;
	height: 166rpx;
	margin-bottom: 32rpx;
	display: flex;
	flex-direction: column;
	width: 330rpx;
}

.text-group_11 {
	width: 110rpx;
	height: 27rpx;
	overflow-wrap: break-word;
	color: rgba(255, 228, 176, 1);
	font-size: 28rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: center;
	white-space: nowrap;
	line-height: 28rpx;
	margin-top: 10rpx;
}
.group_13 {
	border-radius: 20rpx;
	width: 330rpx;
	height: 166rpx;
	display: flex;
	flex-direction: column;
	margin: 0 27rpx 32rpx 0;
}

.group_14 {
	border-radius: 20rpx;
	height: 166rpx;
	margin-bottom: 32rpx;
	display: flex;
	flex-direction: column;
	width: 330rpx;
}

.image-text_15 {
	width: 193rpx;
	height: 116rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 20rpx 0 0 68rpx;
}
.image_23 {
	width: 93rpx;
	height: 83rpx;
	margin-left: 51rpx;
}
.text-group_6 {
	width: 193rpx;
	height: 27rpx;
	overflow-wrap: break-word;
	color: rgba(255, 228, 176, 1);
	font-size: 28rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: center;
	white-space: nowrap;
	line-height: 28rpx;
	margin-top: 6rpx;
}
.text-wrapper_18 {
	width: 669rpx;
	height: 34rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin-top: 45rpx;
	margin-bottom: 40rpx;
}
.text_23 {
	width: 142rpx;
	height: 34rpx;
	color: #312520;
	font-size: 36rpx;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 36rpx;
}
.text_24 {
	color: rgba(102, 102, 102, 1);
	font-size: 24rpx;
	line-height: 24rpx;
	margin-top: 7rpx;
}

.text_8 {
	color: rgba(102, 102, 102, 1);
	font-size: 24rpx;
	line-height: 24rpx;
	margin-top: 7rpx;
}
.box_22 {
	height: 345rpx;
	display: flex;
	flex-direction: column;
	width: 686rpx;
	margin-bottom: 50rpx;
}
.block_5 {
	position: relative;
	height: 345rpx;
	width: 645rpx;
	display: flex;
	flex-direction: column;
	margin-left: 9rpx;
}

.tag_1 {
	position: absolute;
	background-color: rgba(77, 113, 153, 1);
	border-radius: 9rpx 9rpx 32rpx 0rpx;
	height: 48rpx;
	display: flex;
	flex-direction: column;
	width: 86rpx;
}
.tag_2 {
	position: absolute;
	bottom: 36rpx;
	right: 20rpx;
}
.text_9 {
	width: 47rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin: 12rpx 0 0 19rpx;
}
.text-wrapper_20 {
	width: 147rpx;
	height: 29rpx;
	display: flex;
	flex-direction: row;
	margin: 232rpx 0 36rpx 518rpx;
}
.text_10 {
	width: 147rpx;
	height: 29rpx;
	overflow-wrap: break-word;
	color: #ffffff;
	font-size: 34rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 30rpx;
}
</style>