WenWuGuanJia/index_fenbao/fuWu/zuZhi/XueYuan.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="文保学院" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view style="width: 90%; margin: auto">
			<u-swiper
				:list="swiperList"
				imgMode="aspectFill"
				:height="160"
				:indicator="true"
				radius="0"
				:autoplay="true"
				:circular="true"
				indicatorStyle="bottom: 10px"
				indicatorMode="dot"
				indicatorActiveColor="#fff"
				indicatorInactiveColor="rgba(255, 255, 255, 0.35)"
			></u-swiper>
		</view>
		<view class="box_menu">
			<view @click="menuBtn(index)" v-for="(item, index) in menuList" :key="item.index" class="menu_item">{{ item.title }}</view>
		</view>
		<view class="map_tit" style="margin-left: 90rpx; margin-top: 0">
			<image style="width: 211rpx; height: 52rpx" src="/static/img/right_img.png"></image>
			<view class="">专家推荐</view>
			<image style="width: 211rpx; height: 52rpx" src="/static/img/left_img.png"></image>
		</view>
		<scroll-view v-if="expertList.length > 0" @scrolltolower="LoadMoress" scroll-x style="display: flex; white-space: nowrap" class="">
			<view class="" style="display: flex; justify-content: space-between; width: 90%; margin: auto">
				<view @click="expertDetails(item.id)" class="zj_box" v-for="item in expertList" :key="item">
					<view class="tx_box">
						<image
							style="width: 148rpx; height: 152rpx; border-radius: 200rpx"
							:src="item.image ? item.image : 'https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/gj_wxstx.png'"
						></image>
					</view>
					<view>
						<view style="font-size: 28rpx; color: #444444">文史专家</view>
						<view class="">
							<uni-icons v-for="item in 5" :key="item" color="#ca5642" type="star-filled" size="12"></uni-icons>
						</view>
					</view>
					<view class="tiwen">{{ item.title }}</view>
				</view>
			</view>
		</scroll-view>
		<u-empty v-else text="暂无专家" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		<view class="map_tit" style="margin-left: 90rpx" @click="onRedirect('course-home')">
			<image style="width: 211rpx; height: 52rpx" src="/static/img/right_img.png"></image>
			<view class="">课程推荐</view>
			<image style="width: 211rpx; height: 52rpx" src="/static/img/left_img.png"></image>
		</view>
		<view class="" v-if="state.course_list.length > 0">
			<course-item v-for="(item, index) in state.course_list" :key="index" :item="item"></course-item>
		</view>
		<u-empty v-else text="暂无课程" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			isLoading: false,
			page: 1,
			state: null,
			expertList: [],
			menuList: [
				{
					title: '政策法规',
					path: '/index_fenbao/fuWu/FaLv/FaLv'
				},
				{
					title: '专家课程',
					path: '/xueYuan_fenbao/keCheng/keCheng'
				},
				// {
				// 	title: '厦门文物',
				// 	path: '/xueYuan_fenbao/wenWu/wenWu'
				// },
				{
					title: '自我测验',
					path: '/pages/user/learn'
				}
			],
			swiperList: ['https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xy_lbt.jpg']
		};
	},
	onLoad() {
		that = this;
		this.getHomeData();
		this.getContentList();
		this.loadGlobalFont();
	},
	methods: {
		menuBtn(i) {
			uni.navigateTo({
				url: this.menuList[i].path
			});
		},
		// 专家列表
		getContentList() {
			this.isLoading = true;
			this.$api.getContentList({ page: this.page, pageSize: 10, main_body_id: 1, model_id: 7, main_body_column_id: 41 }, function (res) {
				console.log(res, '人物');
				let index = res.data.findIndex((item) => item.id == '235');
				// 只有找到匹配项时才进行删除操作
				if (index !== -1) {
					res.data.splice(index, 1);
				}
				that.isLoading = false;
				that.expertList = [...that.expertList, ...res.data];
			});
		},
		LoadMoress() {
			if (this.isLoading) {
				return;
			} else {
				this.page++;
				this.getContentList();
			}
		},

		// 专家详情
		expertDetails(id) {
			uni.navigateTo({
				url: '/xueYuan_fenbao/zhuangJia/zhuangJia?id=' + id
			});
		},
		// 课程
		getHomeData() {
			this.$api.getHomeData({}, function (res) {
				console.log(res, 1010);
				// this.hasLoad = true
				// this.loadingType = -1
				that.state = res.data;
				console.log(that.state, 1010);
			});
		},
		// 更多课程
		onRedirect(type) {
			console.log('onRedirect', type);
			var pages = {
				'course-home': '/pages/course/index',
				'schedule-home': '/pages/schedule/index'
			};
			var page = pages[type] || '';
			if (page) {
				if (type === 'course-home' || type === 'schedule-home') {
					uni.navigateTo({
						url: page
					});
				} else {
					uni.navigateTo({
						url: page
					});
				}
			}
		},
		// 加载字体
		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/minnanhun/image/gj_bg.png');
	background-repeat: repeat-y;
	background-size: cover;
	font-family: 'MyGlobalFont';
}
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.box_menu {
	width: 90%;
	margin: auto;
	margin-top: 20rpx;
	display: flex;
	justify-content: space-around;
	flex-flow: wrap;
}
.menu_item {
	width: 107rpx;
	height: 278rpx;
	padding-top: 35rpx;
	line-height: 92rpx;
	color: #272727;
	font-weight: 600;
	font-size: 32rpx;
	letter-spacing: 8rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xy_menu.png');
	background-size: 100% 100%;
	writing-mode: vertical-lr;
	writing-mode: tb-lr;
}
.zj_box {
	/* width: 197rpx;
	height: 292rpx; */
	text-align: center;
	padding-top: 30rpx;
}
.tiwen {
	width: 134rpx;
	height: 52rpx;
	text-align: center;
	line-height: 52rpx;
	font-size: 24rpx;
	color: #ffffff;
	margin-left: 32rpx;
	margin-top: 10rpx;
	background-color: #c46354;
}
.tx_box {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-right: 16rpx;
	width: 196rpx;
	height: 188rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/tx_bg.png');
	background-size: 100% 100%;
}
.map_tit {
	display: flex;
	align-items: center;
	margin-left: 60rpx;
	margin-top: 40rpx;
	font-size: 40rpx;
	font-family: 'MyGlobalFont';
	font-weight: 900;
	line-height: 52rpx;
	color: #444444;
}
.kc_box {
	padding: 30upx;
	display: flex;
	align-items: center;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 20rpx 15px -6rpx, rgba(0, 0, 0, 0.05) 0px 8rpx 12rpx -4rpx;
}
.b-main {
	flex: 1;
	margin-left: 20upx;
}
.text_23 {
	color: #272727;
	font-size: 30rpx;
	margin-top: 10rpx;
	font-weight: 600;
}
.b-main .b-price {
	display: flex;
	align-items: center;
}
.button_6 {
	background-color: rgba(202, 86, 66, 1);
	color: rgba(248, 226, 175, 1);
	font-size: 24rpx;
	line-height: 45rpx;
	height: 42rpx;
	width: 137rpx;
	text-align: center;
	margin: 62rpx 0 0 160rpx;
}
.text_25 {
	font-size: 26rpx;
	color: #727070;
	margin-top: 10rpx;
	font-weight: 400;
}

.b-cover {
	width: 307rpx;
	height: 171rpx;
}
</style>