dati/pages/index/index.vue

<template>
	<view>
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left" @tap="$openrul('/pages/auth/choiceSubject/index')">
					<view class="kaoshi-head-kemu">{{subject.subject_name}}</view>
					<view class="iconfont icon-weibiaoti"></view>
				</view>
				<view class="kaoshi-head-right">
					<text class="iconfont icon-sousuo" @tap="gotoSearch"></text>
					<text class="iconfont icon-lingdang" @tap="$openrul('/pages/article/notice')"
						style="margin-left: 12px;"></text>
				</view>
			</view>
		</view>
		<view class="kaoshi-index-content">
			<view class="kaoshi-head-banner">
				<swiper class="swiper" :indicator-dots="swiper_config.indicatorDots" :autoplay="swiper_config.autoplay"
					indicator-active-color="#3c7bfc" :interval="swiper_config.interval"
					:duration="swiper_config.duration">
					<swiper-item v-for="(item, index) in swiper_list" :key="index">
						<view @tap="windowopen(item.url)"><img :src="item.image" /></view>
					</swiper-item>
				</swiper>
			</view>
			<view class="notice" v-if="noticeList.length > 0">
				<an-notice-bar :message_list="noticeList" style="width: 100%;"></an-notice-bar>
			</view>
			<view class="kaoshi-index-nav" v-if="navList && navList.length > 0">
				<view class="kaoshi-index-nav-flex" @tap="windowopen(item.url)" v-for="(item,index) in navList"
					:key="index">
					<image :src="item.image" class="kaoshi-index-nav-img"></image>
					<view class="kaoshi-index-nav-title">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="home-title" v-if="list.length > 0">
			<view class="home-title-l">最新题库</view>
			<navigator open-type="switchTab" url="/pages/questionBank/index" hover-class="none" class="home-title-r">
				<view>更多</view>
				<view class="iconfont icon-arrow"></view>
			</navigator>
		</view>
		<view class="home-box">
			<view v-for="(item, index) in list" :key="index" class="kaoshi-tiku">
				<view class="kaoshi-tiku-content" @tap="goto_detail(item,'1')">
					<view class="kaoshi-tiku-content-flex">
						<view class="kaoshi-tiku-content-top">
							<view>{{item.name}}
								<view v-if="item.is_vip == 1 && !subjectVip" class="vip">
									<image src="../../static/img/vip.png" mode=""></image>
									<view>VIP</view>
								</view>
							</view>
						</view>
					</view>
					<view class="kaoshi-tiku-content-flex">
						<view class="kaoshi-tiku-content-bottom">
							<view class="iconfont icon-dui2"></view>
							<view class="pub-gray">共{{item.total_num}}题</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="home-title" v-if="articleList.length > 0">
			<view class="home-title-l">新闻资讯</view>
			<navigator open-type="switchTab" url="/pages/article/index" hover-class="none" class="home-title-r">
				<view>更多</view>
				<view class="iconfont icon-arrow"></view>
			</navigator>
		</view>
		<view class="home-box">
			<view class="news-content-box" v-if="articleList.length > 0">
				<view class="news-content">
					<view class="news-list" v-for="(item, index) in articleList" :key="index"
						@tap="gotoNoticeDetail(item)">
						<view class="news-flex">
							<image :src="item.image == '' ? '../../static/img/pic.jpg' : item.image"
								class="news-list-img"></image>
							<view class="news-list-r">
								<view class="news-list-title">{{item.title}}</view>
								<view class="news-list-time">
									<view>{{item.noticetime}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 10px;"></view>
		<authVip v-if="showAuthVip" @hideAuthVip="showAuthVip = false"></authVip>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import Error from '@/core/untils/error/index';
	import authVip from '@/components/authVip.vue'

	export default {
		data() {
			return {
				showAuthVip: false, //是否显示认证vip
				swiper_list: [], //轮播图
				swiper_config: {
					indicatorDots: true,
					autoplay: true,
					interval: 2000,
					duration: 500
				},
				list: [], //最新题库
				subList: [], //科目列表
				noticeList: [], //通知公告
				articleList: [], //新闻
				navList: [], //首页导航图标
			};
		},
		async onShow() {
			this.get_lunbo_list();
			if (this.subject.id != undefined) {
				this.get_tiku_list();
				this.canReset && this.getNoticeList()
				this.canReset && this.getArticleList()
				this.canReset = true
			}
			if (this.userinfo.user_id !== undefined) {
				await this.$myUserLogin.getSubvip(this.subject.id)
			}
			// #ifdef MP-WEIXIN
			this.getUpdate()
			// #endif
		},
		onLoad() {
			if (this.subject.id == undefined) {
				this.getSub();
			} else {
				this.getNoticeList()
				this.getArticleList()
			}
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
			// #endif
			this.getNavList()
		},
		computed: {
			...mapState(['subject', 'userinfo', 'subjectVip'])
		},
		components: {
			authVip
		},
		methods: {
			getUpdate() {
				const updateManager = wx.getUpdateManager()

				updateManager.onCheckForUpdate(function(res) {
					// 请求完新版本信息的回调
					console.log(res.hasUpdate)
				})

				updateManager.onUpdateReady(function() {
					wx.showModal({
						title: '更新提示',
						content: '新版本已经准备好，是否重启应用？',
						success(res) {
							if (res.confirm) {
								// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
								updateManager.applyUpdate()
							}
						}
					})
				})

				updateManager.onUpdateFailed(function() {
					// 新版本下载失败
				})
			},
			//首页导航图标
			async getNavList() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.navList,
					data: {},
					needLogin: false,
				})
				if (res.code == 1) {
					this.navList = res.data.data
				}
			},
			//通知公告
			async getNoticeList() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.noticeList,
					data: {
						page: 1,
						limit: 10,
						subject_id: this.subject.id || this.subList[0].id,
						cate_id: 1,
					},
					needLogin: false,
				})
				if (res.code == 1) {
					this.noticeList = res.data.data
				}
			},
			//新闻
			async getArticleList() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.noticeList,
					data: {
						page: 1,
						limit: 10,
						subject_id: this.subject.id || this.subList[0].id,
						cate_id: 2,
					},
					needLogin: false,
				})
				if (res.code == 1) {
					this.articleList = res.data.data
				}
			},
			//获取科目列表
			async getSub() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.subjectList,
					data: {
						page: 1,
						limit: 0
					}
				})
				if (res.code === 1) {
					this.subList = res.data
					this.$store.commit('setSubject', {
						subject: {
							id: this.subList[0].childlist[0].id,
							subject_name: this.subList[0].childlist[0].subject_name
						}
					})
					this.get_tiku_list();
				}
			},
			// 轮播图
			async get_lunbo_list() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.swiper,
					data: {
						searchdb: {
							code: 'shouye'
						}
					}
				});
				if (res.code === 1) {
					let rows = res.data.data || [];
					this.swiper_list = rows;
				}
			},
			// 最新题库
			async get_tiku_list() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.unitList,
					data: {
						subject_id: this.subject.id || this.subList[0].id,
						unit_id: 0,
						page: 1,
						limit: 10
					},
				});
				if (res.code === 1) {
					this.list = res.data.data;
				}
			},
			// 题库跳转
			goto_detail(item, type) {
				if (item.total_num == 0) { //如果目录下没有题目，提示用户
					this.$myUtils.$prompt.showToast({
						icon: 'none',
						title: '当前目录下没有题目，请联系老师'
					});
					return
				}
				if (!this.subjectVip && item.is_vip) {
					if (this.$myUserLogin.getToken()) {
						this.showAuthVip = true
						return
					} else {
						Error.errorNotLoggedIn();
						return
					}
				}
				if (type == '1') {
					if (item.is_last == 0) {
						//非终极栏目，点击进入下级栏目
						this.$openrul('/pages/questionBank/detail/index?id=' + item.id + '&from_type=1' + '&name=' + item
							.name)
					} else if (item.is_last == 1) {
						if (this.$myUserLogin.getToken()) {
							//终极栏目，点击进入答题页
							this.$openrul('/pages/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=1' +
								'&name=' + item.name)
						} else {
							Error.errorNotLoggedIn();
						}
					}
				} else if (type == '2') {
					if (this.$myUserLogin.getToken()) {
						//历年真题都是终极栏目，点击进入答题页
						this.$openrul('/pages/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=2' +
							'&name=' + item.name)
					} else {
						Error.errorNotLoggedIn();
					}
				}
			},
			//跳转前需要登录
			navTo(url) {
				if (this.$myUserLogin.getToken()) {
					this.$openrul(url)
				} else {
					Error.errorNotLoggedIn();
				}
			},
			// 搜索跳转
			gotoSearch() {
				uni.navigateTo({
					url: '/pages/questionSearch/searchList'
				})
			},
			// 新闻跳转
			gotoNoticeDetail(item) {
				if (item.url == '') {
					uni.navigateTo({
						url: '/pages/article/detail?id=' + item.id + '&type=1'
					})
				} else {
					uni.navigateTo({
						url: '/pages/webview/webview?url=' + item.url + '&title=' + item.title
					})
				}
			},
			// 轮播图跳转
			windowopen(url) {
				if (url.startsWith('http')) {
					uni.navigateTo({
						url: '/pages/webview/webview?url=' + url
					})
				} else {
					if (url == '/pages/index/index' || url == '/pages/questionBank/index' || url ==
						'/pages/examination/index' ||
						url == '/pages/article/index' || url == '/pages/my/index') {
						uni.switchTab({
							url
						})
					} else {
						uni.navigateTo({
							url
						})
					}
				}
			}
		}
	};
</script>
<style>
	page {
		background-image: linear-gradient(#026aef 0, #fff 180px, #fff 200px, #f9f9f9 230px, #f9f9f9 100%);
		background-repeat: no-repeat;
		background-color: #f9f9f9;
	}

	/* 首页头部 */
	.kaoshi-head {
		background: none;
		position: relative;
		top: 0;
		border-bottom: none;
	}

	.kaoshi-head-top {
		color: #fff;
		line-height: 58px;
	}

	.kaoshi-head-top .kaoshi-head-left {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.kaoshi-head-top .kaoshi-head-left .icon-weibiaoti {
		padding-left: 4px;
		font-size: 18px;
	}

	.kaoshi-head-top .kaoshi-head-kemu {
		font-size: 16px;
		text-align: center;
	}

	.kaoshi-head-top .kaoshi-head-right {
		width: 18%;
		text-align: right;
	}

	.kaoshi-head-top .kaoshi-head-right .icon-datiqia {
		font-size: 22px;
	}

	.kaoshi-index-content {
		overflow: hidden;
	}

	/* 首页轮播图 */
	.kaoshi-head-banner {
		border-radius: 10px;
		width: 92%;
		margin: 6px auto;
		box-shadow: 0 3px 8px rgb(0 0 0 / 11%);
		margin-bottom: 19px;
	}

	.kaoshi-head-banner img {
		width: 100%;
		height: 140px;
		border-radius: 10px;
	}

	.kaoshi-head-banner .uni-swiper-dot-active::before {
		background: #3c7bfc !important;
	}

	.kaoshi-head-banner .swiper {
		height: 140px !important;
	}

	/* 首页通知 */
	.notice {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 92%;
		margin: 15px auto;
		padding: 0 10px;
		border-radius: 5px;
		line-height: 42px;
		background-color: #d1e5fe;
	}

	/* 首页导航 */
	.kaoshi-index-nav {
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		text-align: center;
		font-size: 14px;
		color: #605d70;
		width: 92%;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 8px;
		padding-bottom: 14px;
	}

	.kaoshi-index-nav .kaoshi-index-nav-flex {
		width: 25%;
		height: 70px;
		padding-top: 14px;
	}

	.kaoshi-index-nav .kaoshi-index-nav-title {
		margin: 7px auto 0;
	}

	.kaoshi-index-nav-img {
		width: 38px;
		height: 38px;
		border-radius: 5px;
	}

	.home-title {
		width: 92%;
		margin: 0 auto;
		padding: 12px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.home-title-l {
		display: flex;
		font-weight: bold;
		font-size: 18px;
	}

	.home-title-r {
		display: flex;
		align-items: center;
		color: #bbb;
		font-size: 14px;
	}

	.home-title-r .iconfont {
		font-size: 11px;
	}

	.home-box {
		width: 92%;
		margin: 0 auto;
		border-radius: 8px;
		overflow: hidden;
		background: #fff;
	}

	.kaoshi-tiku-content {
		width: 92%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		font-size: 14px;
		padding: 10px 0;
		border-bottom: solid 1px #f5f5f5;
	}

	.kaoshi-tiku-content-flex {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: inherit;
	}

	.kaoshi-tiku-content .kaoshi-tiku-content-flex:first-child {
		padding-bottom: 6px;
	}

	.kaoshi-tiku-content .kaoshi-tiku-content-flex:last-child {
		font-size: 14px;
	}

	.kaoshi-tiku-content-top {
		display: flex;
		align-items: center;
		flex: 1;
		font-size: 16px;
	}

	.kaoshi-tiku-content-top img {
		width: 20px;
		height: 22px;
		margin-right: 10px;
	}

	.kaoshi-tiku-content-bottom {
		font-size: 13px;
		display: flex;
		align-items: center;
	}

	.kaoshi-tiku-content-flex .icon-dui2 {
		margin: 2px 2px 0 0;
		color: #3c7bfc;
	}

	/* 新闻资讯 */
	.news-content-box {
		background: #fff;
		padding: 1px 0;
	}

	.news-content {
		width: 94%;
		margin: 0 auto;
	}

	.news-flex {
		display: flex;
		align-items: flex-start;
		margin-bottom: 12px;
	}

	.news-list-img {
		width: 66px;
		height: 66px;
		border-radius: 6px;
		border: solid 1px #f1f1f1;
	}

	.news-list-r {
		margin-left: 10px;
		flex: 1;
		height: 66px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.news-list-title {
		font-size: 16px;
		line-height: 21px;
		padding-top: 4px;

		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -moz-box;
		-moz-line-clamp: 2;
		-moz-box-orient: vertical;
		overflow-wrap: break-word;
		word-break: break-all;
		white-space: normal;
		overflow: hidden;
	}

	.news-list-time {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		color: #999;
		font-size: 13px;
		line-height: 21px;
	}

	.news-list {
		margin-top: 12px;
		border-bottom: solid 1px #f1f1f1;
	}

	.news-content .news-list:last-child {
		margin-bottom: 0;
		border-bottom: none
	}
</style>