zycp-demo/src/views/index/index.vue

<template>
	<div class="content main-content">
		<!-- 头部 -->
		<div :class="{ header: true, 'scroll white': isScrollTop }">
			<div class="back"></div>
			<div class="header-title">首页</div>
		</div>
		<!-- 轮播图 -->
		<div class="banner-wrap">
			<div class="swiper-container" ref="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img :src="host + bannerSrc" />
					</div>
				</div>
				<div class="swiper-pagination" ref="swiper-pagination"></div>
			</div>
		</div>
		<!-- 领取咨询卡 -->
		<div class="index-receive" @click="goPage('/information')" v-if="consult_amount == 0">
			<img src="../../assets/images/home/index/receive.jpg" />
			<span>完善信息，立即领取免费咨询卡(1小时)</span>
		</div>
		<!-- 专家 -->
		<div class="index-expert section">
			<div class="index-title">
				<h2>专家<em>团队</em></h2>
				<span @click="goPage('/expert')">查看更多</span>
			</div>
			<ul class="index-expert-list">
				<li v-for="(item, index) in expertData" :key="index">
					<div class="expert-img">
						<img :src="host + item.avatar"/>
					</div>
					<div class="expert-name">
						{{item.name}}<span>{{item.work_time}}</span>
					</div>
					<div class="expert-honor">
						<span>{{item.home_keywords_list[0]}}</span>
						<span>{{item.home_keywords_list[1]}}</span>
					</div>
				</li>
			</ul>
		</div>
		<!-- 计划 -->
		<div class="index-plan">
			<ul class="index-plan-list">
				<li>
					<img src="../../assets/images/home/index/plan-01.png"/>
					<p>强基计划</p>
				</li>
				<li>
					<img src="../../assets/images/home/index/plan-02.png"/>
					<p>综合评价</p>
				</li>
				<li>
					<img src="../../assets/images/home/index/plan-03.png"/>
					<p>专项计划</p>
				</li>
			</ul>
		</div>
		<!-- 测评 -->
		<div class="index-evaluation section">
			<div class="index-title">
				<h2>专业<em>测评</em></h2>
				<span @click="goPage('/evaluation')">查看更多</span>
			</div>
			<ul class="index-evaluation-list">
				<li>
					<div class="evaluation-img">
						<img src="../../assets/images/home/index/evaluation-01.png"/>
					</div>
					<p>霍兰德职业兴趣测评</p>
					<div class="evaluation-btn" @click="toEvaluation()">进入测评</div>
				</li>
				<li>
					<div class="evaluation-img">
						<img src="../../assets/images/home/index/evaluation-02.png"/>
					</div>
					<p>MBIT职业性格测试</p>
					<div class="evaluation-btn" @click="toEvaluation()">进入测评</div>
				</li>
			</ul>
		</div>
		<!-- 直播 -->
		<div class="index-live section">
			<div class="index-title">
				<h2>有谱<em>直播</em></h2>
				<span>查看更多</span>
			</div>
			<ul class="index-live-list">
				<li>
					<a href="https://h5.dingtalk.com/live/video_lesson.htm?itemId=aed09721-d784-4c70-8219-5466246ae2a9&dd_nav_bgcolor=FF2C2D2F&feedProperty=1&feedId=aed09721-d784-4c70-8219-5466246ae2a9&mcnId=9428021620221302755#/live"><img src="../../assets/images/home/index/live-01.png"/></a>
				</li>
				<li>
					<a href="https://mp.weixin.qq.com/s/v5NEPtYRj9Ijwm3tk9g-yg"><img src="../../assets/images/home/index/live-02.png"/></a>
				</li>
			</ul>
		</div>
		<!-- 头条 -->
		<div class="index-headlines section">
			<div class="index-title">
				<h2>有谱<em>头条</em></h2>
				<span>查看更多</span>
			</div>
			<ul class="index-headlines-list">
				<li @click="goPage('/text01')">
					<p>如何让孩子找到有幸福感的专业方向和职业目标？</p>
					<!-- <span>{{ item.time }}</span> -->
				</li>
				<li @click="goPage('/text02')">
					<p>生涯规划师的服务伦理，以及处理与客户价值判断不一致的方法探讨</p>
					<!-- <span>{{ item.time }}</span> -->
				</li>
				<li @click="goPage('/text03')">
					<p>升学规划师能力的“冰山结构”</p>
					<!-- <span>{{ item.time }}</span> -->
				</li>
				<li @click="goPage('/text04')">
					<p>双减政策，减“教”不减“学”；生涯规划的目标是点燃学生求学热情，真正体现教育情怀</p>
					<!-- <span>{{ item.time }}</span> -->
				</li>
				<li @click="goPage('/text05')">
					<p>强基计划、综合评价报名材料如何准备</p>
					<!-- <span>{{ item.time }}</span> -->
				</li>
				<li @click="goPage('/text06')">
					<p>数字化生涯规划师：获权威认证，服务钉钉千万考生与家长</p>
					<!-- <span>{{ item.time }}</span> -->
				</li>
			</ul>
		</div>
		<tabbar :current="1"></tabbar>
	</div>
</template>

<script>
	import tabbar from "../../components/tabbar.vue";
	export default {
		name: "index",
		components: {
			tabbar,
		},
		data() {
			return {
				isScrollTop: false,
				consult_amount: 0, //是否完善资料
				bannerSrc: "",
				expertData: [], //专家列表
				headlinesData: [{
						title: "全国各省市最好大学+王牌专业盘点",
						time: "2022年2月12日"
					},
					{
						title: "批次、批次线、大类招生到底是什么？？20个名词帮 你快速了解",
						time: "2022年2月12日",
					},
					{
						title: "教育部公布2021年度全国高等学校名单，共计3012所",
						time: "2022年2月12日",
					},
					{
						title: "人民日报权威解读：热门专业和相似专业如何区分！",
						time: "2022年2月12日",
					},
					{
						title: "比普通批低100多分！从高一准备到高三报考，2022 年强基计划最新报考指南",
						time: "2022年2月12日",
					},
				],
			};
		},
		created() {
			this.isScroll = true;
			window.addEventListener("scroll", this.eventScrollTop);
			this.consult_amount = (JSON.parse(localStorage.getItem("centerUserData"))).consult_amount;
			console.log(this.consult_amount,3636)
		},
		mounted() {
			this.getBanner();
			this.getExpertData();
		},
		computed: {},
		methods: {
			// 测试跳转
			toEvaluation() {
				this.$router.push({
					path: "/evaluation",
				});
			},
			
			// 获取banner
			getBanner() {
				let that = this;
				this.axios
					.post(this.HOME + "/api/dictionary/get-slide-list", {
						position: "h5_home_banner",
					})
					.then(function(res) {
						that.bannerSrc = res.data.data[0].src;
					});
			},
			
			
			// 获取专家列表
			getExpertData() {
				let that = this;
				this.axios
					.post(this.HOME + "/api/consumer/expert-list", {
						page: "1",
						size: "3",
						is_home: 1,
					})
					.then(function(res) {
						let list = res.data.data.list;
						console.log(list,123)
						let newArray = [];
						list.forEach(item=>{
						  let obj = {
							id: item.id,
							work_time:item.work_time,
							avatar: item.avatar,
							name: item.name,
							keywords_list: item.keywords_list,
							home_keywords_list: item.home_keywords_list
						  }
						  newArray.push(obj);
						})
						that.expertData = newArray;
					});
			},
			
			// 跳转页面
			goPage(path){
				this.$router.push(path);
			},
			
			// 滚动显示头部
			eventScrollTop() {
				let scrollTop =
					document.body.scrollTop || document.documentElement.scrollTop;
				if (scrollTop >= 5) {
					if (this.isScroll) {
						this.isScroll = false;
						this.isScrollTop = true;
					}
				} else {
					if (!this.isScroll) {
						this.isScroll = true;
						this.isScrollTop = false;
					}
				}
			},
		},
	};
</script>

<style scoped>
</style>