MinNan/pages/xueYuan/xueYuan.vue

<template>
	<view class="">
		<view class="box">
			<view class="group_1">
				<u-navbar title="学院" :placeholder="true" bgColor="rgba(255,255,255,0)" :leftIconSize="0" titleStyle="font-weight:bold;color:#7a5831"></u-navbar>
				<view class="block_2">
					<view class="an" style="margin-top: 20rpx; margin-bottom: 20rpx">
						<u-notice-bar text="系统消息提示"></u-notice-bar>
					</view>
					<view class="image_16" @click="zhengCe">
						<image style="width: 100%; height: 100%" src="https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_tp.png" class=""></image>
					</view>

					<view class="group_2">
						<view
							@click="coursesBtn"
							class="box_1"
							style="background: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_wb.png'); background-size: 100% 100%"
						>
							<view class="text-wrapper_1">
								<text lines="1" class="text_3">学习课程</text>
							</view>
						</view>
						<view class="box_2">
							<view class="block_3">
								<view
									@click="huodong"
									class="block_4"
									style="background: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_ms.png'); background-size: 100% 100%"
								>
									<view class="text-wrapper_2">
										<text lines="1" class="text_4">名师在线</text>
									</view>
								</view>
								<view
									@click="scheduleBtn"
									class="text-wrapper_3"
									style="background: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_cj.png'); background-size: 100% 100%"
								>
									<text lines="1" class="text_5">产教融合</text>
								</view>
							</view>
							<button
								@click="learnBtn"
								class="button_1"
								style="background: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_zw.png'); background-size: 100% 100%"
							>
								<view class="text-wrapper_4">
									<text lines="1" class="text_6">自我测验</text>
								</view>
							</button>
						</view>
					</view>
					<view class="text-wrapper_5">
						<text lines="1" class="text_7">名家推荐</text>
						<text lines="1" class="text_8" @click="ceshiBtn">查看更多》</text>
					</view>
					<view class="group_3">
						<view class="group_4" v-for="item in mingJiaList" :key="item" @click="expertBtn(item)">
							<view class="image-wrapper_1">
								<image :src="item.img" class="single-avatar_1"></image>
							</view>
							<view class="block_5">
								<view class="text-group_1">
									<text lines="1" class="text_9">{{ item.name }}</text>
									<!-- <text lines="1" class="text_10">职称</text> -->
								</view>
							</view>
							<view class="block_6">
								<view class="image-text_1">
									<text lines="1" decode="true" class="text-group_2">&nbsp;教学指数</text>
									<uni-icons color="#ca5642" type="star-filled" size="18"></uni-icons>
									<uni-icons color="#ca5642" type="star-filled" size="18"></uni-icons>
									<uni-icons color="#ca5642" type="star-filled" size="18"></uni-icons>
									<uni-icons color="#ca5642" type="star-filled" size="18"></uni-icons>
									<uni-icons color="#ca5642" type="star-filled" size="18"></uni-icons>
								</view>
							</view>
							<view class="block_7">
								<button bindtap="onClick" class="button_2">
									<text lines="1" class="text_11">详情</text>
								</button>
							</view>
						</view>
					</view>
					<!-- 
					<view class="text-wrapper_6">
						<text lines="1" class="text_21">推荐课程</text>
						<text lines="1" class="text_22">查看更多》</text>
					</view> -->
					<!-- 
					<view class="group_13" v-for="item in tjkcList" :key="item" @click="kcBtn">
						<image :src="item.img" class="image_12"></image>
						<view class="group_14">
							<view class="text-group_9">
								<text lines="1" class="text_23">课程标题</text>
								<text lines="1" class="text_24">课程附标题</text>
							</view>
							<view class="text-wrapper_7">
								<text lines="1" class="text_25">会员价</text>
								<text lines="1" class="text_26">￥99</text>
							</view>
						</view>
						<button bindtap="onClick" class="button_6">
							<text lines="1" class="text_27">立即报名</text>
						</button>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 文保课程 -->
		<view class="box">
			<view class="box-head">
				<view class="text-wrapper_6">
					<text lines="1" class="text_21">推荐课程</text>
					<text lines="1" class="text_22" @click="onRedirect('course-home')">查看更多》</text>
				</view>
			</view>
			<view class="box-main course-list">
				<course-item v-for="(item, index) in state.course_list" :key="index" :item="item"></course-item>
			</view>
		</view>

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

<script>
import { mapState } from 'vuex';
let that;
export default {
	components: {},
	data() {
		return {
			state: null,

			mingJiaList: [
				{
					img: 'https://feicheng.16fw.cn:1443/uploads/20230602/5ee294b117a1f6d134245dc074152b3b.jpg',
					id: 1,
					name: '李向群老师'
				},
				{
					img: 'https://feicheng.16fw.cn:1443/uploads/20230602/7957d5904f92e16f6fdc9559768edf7b.jpg',
					id: 2,
					name: '黄国富老师'
				}
			],
			bannerlist: [],

			tjkcList: [
				{
					img: 'https://i1.hdslb.com/bfs/archive/acffcc28ff54120aa48199faba07f0409fc07110.jpg'
				},
				{
					img: 'https://img1.baidu.com/it/u=1515823842,2345646418&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=256'
				}
			]
		};
	},
	onLoad(option) {
		that = this;
		// this.getBannerList();
		this.getHomeData();
	},
	computed: {
		...mapState(['ceShi'])
	},
	methods: {
		// 新版活动临时跳转
		huodong() {
			uni.navigateTo({
				url: '/xueyuan_fenbao/kcXiangQing/huoDong'
			});
		},
		// 省级政策临时跳转
		zhengCe() {
			uni.navigateTo({
				url: '/xueyuan_fenbao/kcXiangQing/zhengCe'
			});
		},
		ceshiBtn() {
			uni.navigateTo({
				url: '/xueyuan_fenbao/jiGou/jiGou'
			});
		},
		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
					});
				}
			}
		},
		// 合并的教育小程序方法end
		// 学习课程
		coursesBtn() {
			uni.navigateTo({
				url: '/pages/course/index'
			});
		},
		// 产教融合
		scheduleBtn() {
			uni.navigateTo({
				url: '/pages/schedule/index'
			});
		},
		// 自我检验
		learnBtn() {
			uni.navigateTo({
				url: '/pages/user/learn'
			});
		},

		// 专家介绍
		expertBtn(item) {
			console.log(item);
			uni.navigateTo({
				url: `/xueyuan_fenbao/zhuangJia/zhuangJia?id=${item.id}`
			});
		},
		// 课程详情
		kcBtn() {
			uni.navigateTo({
				url: '/xueyuan_fenbao/kcXiangQing/kcXiangQing'
			});
		},
		getBannerList() {
			this.$api.getBannerList({ block: 'home' }, function (res) {
				// console.log(res);
				if (res.code > 0) {
					that.bannerlist = [];
					for (var i = 0; i < res.data.length; i++) {
						if (res.data[i].type == 'banner') {
							that.bannerlist.push({
								title: res.data[i].title,
								url: that.$config.baseUrl + res.data[i].image,
								page: res.data[i].url
							});
						}
					}
				}
			});
		}
	}
};
</script>

<style>
.box {
	height: auto;
	width: 100%;
	background-color: #f8f8f8;
	background-attachment: fixed;
	border-radius: 16px 16px 0 0;
	position: relative;
	display: flex;
	flex-direction: column;
}

.group_1 {
	position: relative;
	width: 750rpx;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
}

.block_2 {
	position: relative;
	width: 750rpx;
	margin-bottom: 10rpx;
	display: flex;
	flex-direction: column;
}

.text_2 {
	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;
}
.image_3 {
	width: 650rpx;
	height: 240rpx;
	margin: 52rpx 0 0 52rpx;
}
.group_2 {
	width: 686rpx;
	height: 362rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 10rpx 0 0 32rpx;
}
.box_1 {
	height: 362rpx;

	display: flex;
	flex-direction: column;
	width: 179rpx;
}
.text-wrapper_1 {
	width: 179rpx;
	height: 362rpx;

	display: flex;
	flex-direction: column;
}
.text_3 {
	width: 117rpx;
	height: 28rpx;
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 30rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 30rpx;
	margin: 167rpx 0 0 31rpx;
}
.box_2 {
	width: 479rpx;
	height: 358rpx;
	margin-top: 3rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.block_3 {
	/* width: 686rpx; */
	height: 440rpx;
	flex-direction: row;
	display: flex;
	/* justify-content: space-between; */
}
.block_4 {
	height: 238rpx;
	background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psac2t2wtcm0h8semihka78i97rgy3z0k9d0vxy3322c323xr5f050ebd-fda6-4691-8385-e2c10199e339) 100% no-repeat;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	width: 225rpx;
}
.text-wrapper_2 {
	height: 238rpx;
	background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/ps6gz05f11kuxiggb90g6bbl0ya23uwhfrthp4zs0v1hdgf1or45037c24-24f9-4599-ad7f-a6f45ff324f0) 100% no-repeat;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	width: 225rpx;
}
.text_4 {
	width: 117rpx;
	height: 29rpx;
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 30rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 30rpx;
	margin: 104rpx 0 0 53rpx;
}
.text-wrapper_3 {
	height: 238rpx;
	/* background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/ps5k0mpe16d8bvgqfrqxr3q4pqkie5qaor6ga6dg9pyyrgrpb96ba7e5d9-a3dc-4877-a3b6-f0818f0b8455) 100% no-repeat; */
	/* background-size: 100% 100%; */
	display: flex;
	flex-direction: column;
	width: 225rpx;
	margin-left: 30rpx;
}
.text_5 {
	width: 118rpx;
	height: 29rpx;
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 30rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 30rpx;
	margin: 104rpx 0 0 53rpx;
}
.button_1 {
	height: 120rpx;
	/* background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psua2f69ld98fzjjor2xu0ehhq2vwe9udidkige5zsdf91kyb9813eb2ef-246e-4904-898c-23cc6da2b558) 100% no-repeat;
	background-size: 100% 100%; */
	/* margin-top: 28rpx; */
	display: flex;
	flex-direction: column;
	width: 479rpx;
}
.text-wrapper_4 {
	height: 92rpx;
	background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/pssewpti4kxwasjornjm2vyq8r467p66r8k2ra76301pxpqfr3b9eaf00-08f2-40bd-887f-0ebafa6a232e) 100% no-repeat;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	width: 479rpx;
}
.text_6 {
	width: 114rpx;
	height: 29rpx;
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 30rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 20rpx;
	margin: 33rpx 0 0 183rpx;
}
.text-wrapper_5 {
	width: 650rpx;
	height: 28rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 32rpx 0 32rpx 49rpx;
}
.text_7 {
	width: 110rpx;
	height: 28rpx;
	overflow-wrap: break-word;
	color: rgba(18, 18, 18, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
}
.text_8 {
	color: rgba(102, 102, 102, 1);
	font-size: 24rpx;
	line-height: 24rpx;
	margin-top: 7rpx;
}
.group_3 {
	/* width: 686rpx; */
	display: flex;
	flex-flow: wrap;
	margin-left: 30rpx;
	/* margin: 33rpx 0 0 32rpx; */
}
.group_4 {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 10rpx;
	height: 440rpx;
	width: 330rpx;
	display: flex;
	margin-bottom: 25rpx;
	margin-right: 25rpx;
	flex-direction: column;
}
.image-wrapper_1 {
	width: 140rpx;
	height: 140rpx;
	display: flex;
	flex-direction: row;

	margin: 38rpx 0 0 95rpx;
}
.single-avatar_1 {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.block_5 {
	width: 118rpx;
	height: 62rpx;
	display: flex;
	flex-direction: row;
	margin: 26rpx 0 0 80rpx;
}
.text-group_1 {
	width: 118rpx;
	height: 62rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.text_9 {
	width: 118rpx;
	height: 30rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 30rpx;
}
.text_10 {
	width: 47rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: rgba(102, 102, 102, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin: 9rpx 0 0 34rpx;
}
.block_6 {
	width: 245rpx;
	height: 24rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin-left: 42rpx;
}
.image-text_1 {
	width: 163rpx;
	height: 24rpx;
	flex-direction: row;
	align-items: center;
	display: flex;
	justify-content: space-between;
}
.text-group_2 {
	width: 95rpx;
	height: 22rpx;
	overflow-wrap: break-word;
	color: rgba(102, 102, 102, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-ExtraLight;
	font-weight: 250;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin-top: 2rpx;
}

.block_7 {
	width: 156rpx;
	height: 45rpx;
	display: flex;
	flex-direction: row;
	margin: 23rpx 0 59rpx 87rpx;
}
.button_2 {
	background-color: rgba(202, 86, 66, 1);
	border-radius: 10rpx;
	height: 45rpx;
	display: flex;
	flex-direction: column;
	width: 156rpx;
}
.text_11 {
	width: 46rpx;
	height: 22rpx;
	overflow-wrap: break-word;
	color: rgba(248, 226, 175, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin: 11rpx 0 0 25rpx;
}
.text-wrapper_6 {
	width: 651rpx;
	height: 28rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 20rpx 0 0 48rpx;
}
.text_21 {
	width: 111rpx;
	height: 28rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
}
.text_22 {
	color: rgba(102, 102, 102, 1);
	font-size: 24rpx;
	line-height: 24rpx;
	margin-top: 7rpx;
}
.group_13 {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 10rpx;
	width: 686rpx;
	height: 170rpx;
	flex-direction: row;
	display: flex;
	margin: 28rpx 0 0 32rpx;
}
.image_12 {
	width: 307rpx;
	height: 171rpx;
}
.group_14 {
	width: 130rpx;
	height: 122rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 29rpx 0 0 20rpx;
}
.text-group_9 {
	width: 111rpx;
	height: 61rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.text_23 {
	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;
	margin-left: 1rpx;
}
.text_24 {
	width: 107rpx;
	height: 21rpx;
	overflow-wrap: break-word;
	color: rgba(102, 102, 102, 1);
	font-size: 22rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 22rpx;
	margin-top: 14rpx;
}
.text-wrapper_7 {
	width: 125rpx;
	height: 22rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 39rpx 0 0 5rpx;
}
.text_25 {
	width: 60rpx;
	height: 20rpx;
	overflow-wrap: break-word;
	color: rgba(202, 86, 66, 1);
	font-size: 20rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 20rpx;
	margin-top: 2rpx;
}
.text_26 {
	width: 56rpx;
	height: 22rpx;
	overflow-wrap: break-word;
	color: rgba(202, 86, 66, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
}
.button_6 {
	background-color: rgba(202, 86, 66, 1);
	border-radius: 10rpx;
	height: 44rpx;
	display: flex;
	flex-direction: column;
	width: 129rpx;
	margin: 115rpx 18rpx 0 82rpx;
}
.text_27 {
	color: rgba(248, 226, 175, 1);
	font-size: 24rpx;
	white-space: nowrap;
	line-height: 45rpx;
	margin-left: -10rpx;
}

.image_16 {
	width: 686rpx;
	height: 240rpx;
	margin: 0 auto;
}
</style>