WenWuGuanJia/pages/wenWuPage/wenWuPage.vue

<template>
	<view class="box">
		<u-navbar title="厦门文物" :placeholder="true" bgColor="rgba(255,255,255,0)" :leftIconSize="0" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view class="" style="width: 92%; margin: auto">
			<u-swiper
				:list="swiperList"
				bgColor="transparent"
				keyName="image"
				:height="160"
				:indicator="true"
				radius="5"
				:autoplay="true"
				:circular="true"
				indicatorStyle="bottom: 10px"
				indicatorMode="dot"
				indicatorActiveColor="#fff"
				indicatorInactiveColor="rgba(255, 255, 255, 0.35)"
			></u-swiper>
		</view>

		<view style="width: 92%; margin: auto">
			<!-- 		<view class="ranking_menu">
				<scroll-view scroll-x style="display: flex; white-space: nowrap" class="">
					<view @click="menuTab(index)" v-for="(item, index) in menuList" :key="item.index" class="ranking_item" :class="{ active: tab == index }">
						{{ item.title }}
					</view>
				</scroll-view>
			</view> -->
			<view class="ban_box">
				<!-- 厦门文物 -->
				<view class="">
					<view class="tit_box">
						<view class="tit">厦门文物</view>
						<view class="" style="display: flex; align-items: center">
							<view style="width: 60rpx; margin-right: 20rpx; height: 80rpx; text-align: center; line-height: 80rpx" @click="periphery">
								<uni-icons type="location" size="20"></uni-icons>
							</view>

							<view class="tit2" style="height: 80rpx; line-height: 80rpx" @click="$common.navigateTo('/index_fenbao/GuanLi/gengDuoFC')">查看更多</view>
						</view>
					</view>

					<view class="rw_box" style="">
						<view @click="openBuildingInfo(item.id)" class="zj_box" v-for="item in recommendList" :key="item.id" style="position: relative">
							<view class="tx_box">
								<image style="border-radius: 15rpx; width: 300rpx; height: 185rpx" mode="aspectFill" :src="item.image"></image>
							</view>
							<view>
								<!-- <view style="font-size: 28rpx; color: #444444">{{ item.age }}</view> -->
							</view>
							<view class="ww_tit" style="display: flex; justify-content: space-between; align-items: center">
								<view class="" style="width: 160rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
									{{ item.title }}
								</view>
								<view class="" style="width: 120rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
									{{ item.cr_type_text }}
								</view>
							</view>
							<u-badge type="primary" max="99" :value="item.district" :absolute="true" :offset="[5, 5]"></u-badge>
						</view>
					</view>
				</view>
				<!-- 文物故事 -->
				<view class="">
					<view class="tit_box" @click="$common.navigateTo('/xueYuan_fenbao/wenWu/GengDuoGuShi')">
						<view class="tit">文物故事</view>

						<view class="tit2">查看更多</view>
					</view>

					<view class="gg_box">
						<view @click="$common.navigateTo('/xueYuan_fenbao/wenWu/guShi?id=' + item.id)" class="gg_item" v-for="item in CulturalRelics" :key="item.id">
							<view class="" style="display: flex; align-items: center">
								<image :src="item.image" style="margin-right: 30rpx; width: 128rpx; height: 128rpx; border-radius: 6rpx"></image>
								<view class="">
									<view>
										<view class="rw_tit1">{{ item.title }}</view>
										<!-- <view class="rw_tit2">精彩瞬间</view> -->
										<view class="rw_tit2">精彩故事</view>
									</view>
								</view>
							</view>
							<view class="">
								<image style="width: 40rpx; height: 40rpx" src="/static/img/more.png"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- 人物故事 -->
				<view class="">
					<view class="tit_box" @click="$common.navigateTo('/xueYuan_fenbao/wenWu/GengDuoRenWu')">
						<view class="tit">人物故事</view>
						<view class="tit2">查看更多</view>
					</view>

					<view class="rw_box" style="">
						<view @click="expertDetails(item.id)" class="zj_box" v-for="item in characterList" :key="item.id">
							<view class="tx_box">
								<image style="border-radius: 15rpx; width: 300rpx; height: 210rpx" mode="scaleToFill" :src="item.image"></image>
							</view>
							<view style="width: 95%; display: flex; justify-content: space-between; align-items: center">
								<view class="tiwen">{{ item.title }}</view>
								<view style="font-size: 28rpx; color: #444444">{{ item.age }}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 视频 -->
				<view class="">
					<view class="tit_box" @click="$common.navigateTo('/xueYuan_fenbao/wenWu/GengDuoShiPin')">
						<view class="tit">文物视频</view>
						<view class="tit2">查看更多</view>
					</view>

					<view class="rw_box" style="">
						<view
							@click="$common.navigateTo('/xueYuan_fenbao/wenWu/ShiPin?id=' + item.id)"
							class="zj_box"
							v-for="item in CulturalVideo"
							:key="item.id"
							style="position: relative"
						>
							<view class="before_box">
								<image style="border-radius: 15rpx; width: 300rpx; height: 185rpx" mode="aspectFill" :src="item.image"></image>
								<image src="../../static/img/play.png" style="z-index: 2; position: absolute; top: 56rpx; left: 100rpx; width: 80rpx; height: 80rpx"></image>
							</view>

							<view class="ww_tit">{{ item.title }}</view>
							<u-badge type="primary" max="99" :value="item.region_text" :absolute="true" :offset="[5, 5]"></u-badge>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			tab: 11,
			swiperList: [],
			menuList: [],
			characterList: [] /*人物 */,
			recommendList: [] /* 文物 */,
			CulturalRelics: [] /* 文物故事 */,
			CulturalVideo: [] /* 文物视频 */
		};
	},

	onLoad(option) {
		that = this;
		this.getCategoryOnlyChildList();
		this.getMainBodyColumnContentList();
		this.getContentList();
		this.getrelicList();
		this.loadGlobalFont();
		this.getIndexBanner();
	},
	methods: {
		// 轮播
		getIndexBanner() {
			this.$api.getIndexBanner({ main_body_id: 1 }, function (res) {
				that.swiperList = res.data.filter((item) => {
					return item.title == '厦门文物轮播图';
				});
			});
		},
		getCategoryOnlyChildList() {
			this.$api.getCategoryOnlyChildList({ main_body_id: 1, pid: '5' }, function (res) {
				if (res.code == 1) {
					that.menuList = res.data;
				} else {
					console.log(res);
				}
			});
		},
		// 文物故事视频
		getMainBodyColumnContentList() {
			this.$api.getMainBodyColumnContentList({ main_body_id: 1, model_id: 11 }, function (res) {
				// console.log(res, '文物');
				let foundCulturalStory = false;
				let foundCulturalVideo = false;
				res.data.forEach((item) => {
					if (!foundCulturalStory && item.name === '文物故事') {
						that.CulturalRelics = item.content_list;
						foundCulturalStory = true;
					} else if (!foundCulturalVideo && item.name === '文物视频') {
						that.CulturalVideo = item.content_list;
						foundCulturalVideo = true;
					}

					// 如果两个条件都满足，可以提前结束循环
					if (foundCulturalStory && foundCulturalVideo) {
						return;
					}
				});
			});
		},
		// 人物故事
		getContentList() {
			this.$api.getContentList({ page: 1, pageSize: 4, main_body_id: 1, model_id: 7, main_body_column_id: 39 }, function (res) {
				console.log(res, '人物');
				that.characterList = res.data;
			});
		},
		// 厦门文物
		getrelicList() {
			this.$api.getContentList({ main_body_id: 1, model_id: 1, page: 1, pageSize: '8' }, function (res) {
				// console.log(res, 666666666);
				that.recommendList = [...that.recommendList, ...res.data];
			});
		},
		// 周边文物
		periphery() {
			uni.getLocation({
				type: 'gcj02',
				success: function (res) {
					// console.log('当前位置的经度：' + res.longitude);
					// console.log('当前位置的纬度：' + res.latitude);
					uni.navigateTo({
						url: `/index_fenbao/fuWu/diTu/diTu?longitude=${res.longitude}&latitude=${res.latitude}&pageSize=${'100'}`
					});
				}
			});
		},
		// 人物详情
		expertDetails(id) {
			uni.navigateTo({
				url: '/xueYuan_fenbao/wenWu/renWuXiangQing?id=' + id
			});
		},
		// 文详情
		openBuildingInfo(id) {
			uni.navigateTo({
				url: '/index_fenbao/GuanLi/XiangQing?id=' + id
			});
		},
		menuTab(i) {
			this.tab = i;
		},
		// 加载字体
		loadGlobalFont() {
			try {
				uni.loadFontFace({
					family: 'MyGlobalFont', // 自定义字体名
					source: 'url("https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/songTi.ttf")',
					success() {
						console.log('全局字体加载成功');
					}
				});
			} catch (error) {
				console.error('全局字体加载异常', error);
			}
		}
	}
};
</script>

<style>
.box {
	height: auto;
	width: 100%;
	/* padding-bottom: 50rpx; */
	/* 	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xmww_bgt.png');
	background-repeat: no-repeat;
	background-size: auto; */
	background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/gj_bg.png');
	background-repeat: repeat-y;
	background-size: 100%;
	font-family: 'MyGlobalFont';
}

/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}

.active {
	background-image: url('/static/img/tab.png');
	background-size: 100% 100%;
}
.ranking_item {
	display: inline-block;
	width: 200rpx;
	height: 62rpx;
}
.ranking_menu {
	width: 92%;
	margin: auto;
	margin-top: 40rpx;
	display: flex;
	justify-content: space-around;
	font-size: 30rpx;
	color: rgba(68, 68, 68, 0.6);
	text-align: center;
	line-height: 60rpx;
	font-family: 'MyGlobalFont';
}
.ban_box {
	margin-top: 40rpx;
	/* display: flex;
	justify-content: space-between; */
}
.tit_box {
	height: 60rpx;
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.tit {
	font-size: 36rpx;
	color: #444444;
	font-weight: 600;
	font-family: 'MyGlobalFont';
}
.tit2 {
	font-size: 28rpx;
	color: rgba(68, 68, 68, 0.6);
}
.zj_box {
	margin-top: 20rpx;
}
.tiwen {
	width: 134rpx;
	height: 52rpx;
	font-size: 30rpx;
	color: #444444;
	margin-top: 10rpx;
}
.ww_tit {
	/* width: 260rpx; */
	font-size: 30rpx;
	color: #444444;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gg_box {
	/* width: 670rpx; */
	margin: auto;
	margin-top: 20rpx;
	padding: 20rpx;
	border: 2rpx solid #ebc9a9;
	background-color: #ffffff;
	border-radius: 10rpx;
}
.gg_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 25rpx;
	width: 630rpx;
	/* height: 80rpx; */
}
.rw_tit1 {
	font-size: 30rpx;
	color: #444444;
	line-height: 44rpx;
}
.rw_tit2 {
	font-size: 26rpx;
	color: rgba(68, 68, 68, 0.4);
	line-height: 40rpx;
}
.rw_box {
	width: 100%;
	margin: auto;
	margin-top: 30rpx;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 20rpx;
	justify-content: space-around;
	border-radius: 10rpx;
	border: 2rpx solid #ebc9a9;
	background-color: #ffffff;
}
.before_box {
	position: relative;
	width: 300rpx;
	height: 185rpx;
}
.before_box::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
}
</style>