exam/exam-06173-uni/pages/index/index.vue

<template>
	<view class="container">
		
		<view style="background: #fff;">
			<yf-carsousel :img-list="imgList"></yf-carsousel>
		</view>
		
	
		<view @tap="navtoNotice(notice.id)" v-if="notice && notice.id">
			<uni-notice-bar  single="true" showIcon="true" :text="notice.title"></uni-notice-bar>
		</view>
		

		<!-- 一般用法 -->
		<view style="padding: 15px; background: #fcfcfc;">
		<view class="uni-flex uni-row" style="flex-wrap: wrap;">
			<view class="flex-item" @click="navigateToCourse" >
				<view class="item-box" style="border-radius: 0px 5px 15px 5px; ">
					<image src="../../static/nav/nav01.png" mode="heightFix"></image>
					<text class="tt2">课程学习</text>
				</view>
			</view>
			
			<view class="flex-item" @click="navigateToExam">
				<view class="item-box" style="border-radius: 5px 0px 5px 15px;">
					<image src="../../static/nav/nav02.png" mode="heightFix"></image>
					<text class="tt2">在线考试</text>
				</view>
			</view>
			<view class="flex-item" @click="navigateToRepo">
				<view class="item-box" style="border-radius: 5px 15px 5px 0px;">
					<image src="../../static/nav/nav03.png" mode="heightFix"></image>
					<text class="tt2">题库训练</text>
				</view>
			</view>
			
			<view class="flex-item"  @click="navigateToPaper">
				<view class="item-box" style="border-radius: 15px 5px 0px 5px;">
					<image src="../../static/nav/nav04.png" mode="heightFix"></image>
					<text class="tt2">我的成绩</text>
				</view>
			</view>
			
		</view>
		
		</view>
		
	</view>
</template>

<script>

	import { noticePaging } from '@/api/notice.js'
	export default {
		data() {
			return {
				fileUrl: '',
				items: ['我的考试', '训练进度', '消息通知'],
				current: 0,

				more: 'loading',
				query: {
					current: 1,
					size: 5,
					params: {
						title: ''
					}
				},
				notice: {
					id: '',
					title: ''
				},
				imgList: [
				{
					url: 'https://cdn.yfhl.net/static/banner/ob1.jpg',
					id: 3
				},
				{
					url: 'https://cdn.yfhl.net/static/banner/ob2.jpg',
					id: 3
				}, {
					url: 'https://cdn.yfhl.net/static/banner/ob3.jpg',
					id: 4
				}]
				// imgList: [
				// {
				// 	url: 'https://cdn.yfhl.net/static/banner/2.png',
				// 	id: 3
				// },
				// {
				// 	url: 'https://cdn.yfhl.net/static/banner/3.png',
				// 	id: 3
				// }, {
				// 	url: 'https://cdn.yfhl.net/static/banner/4.png',
				// 	id: 4
				// }, {
				// 	url: 'https://cdn.yfhl.net/static/banner/5.png',
				// 	id: 5
				// }]
			}
		},

		onShow() {
			if(uni.getStorageSync('token')){
				this.fetchNoticePaging();
			}else{
				getApp().loginCallBack = () => {
					this.fetchNoticePaging()
				}
			}
		},

		methods: {

			swiperChange(e) {
				this.current = e.detail.current
			},

			fetchNoticePaging() {
				noticePaging({
					size: 1,
					current: 1,
					params: {
						state: 0
					}
				}).then(data => {
					//打印请求返回的数据
					this.notice = data.records[0]
				}, error => {
					console.log(error);
				})
			},



			// 考试详情页
			navtoDetail(id) {
				uni.navigateTo({
					url: '/pages/exam/detail?id=' + id
				});
			},
			
			navigateToCourse(){
				
				uni.switchTab({
					url: '/pages/course/index'
				});
			},

			navigateToExam() {
				uni.switchTab({
					url: '/pages/exam/index'
				});
			},

			navigateToRepo() {
				uni.switchTab({
					url: '/pages/repo/index'
				});
			},

			navigateToPaper() {
				uni.navigateTo({
					url: '/pages/paper/index'
				});
			},

			navigateHistory() {
				uni.navigateTo({
					url: '/pages/repo/history'
				});
			},
			
			navigateToBattle(){
				uni.navigateTo({
					url: '/pages/battle/battle'
				});
			},


			selectedBanner(item, index) {
				console.log('🥒', item, index)
			},

			// 考试详情页
			navtoNotice(id) {
				uni.navigateTo({
					url: '/pages/notice/detail?id=' + id
				});
			},
			
			navitoVideo(){
				uni.navigateTo({
					url: '/pages/video/video'
				});
			}
			
			
		}
	}
</script>

<style>
	
	.flex-item{
		flex: 0 0 50%;
	}
	.item-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px 30px 20px 30px;
		border: #E9F3FF 1px solid;
		border-radius: 5px;
		margin: 10px;
		box-shadow: 3px 3px 6px #DEEDFF;
		color: #ccc;
	}
	
	.item-box image {
		height: 40px;
	}
	
	.item-box .tt2 {
		color: #333;
		font-weight: 700;
		padding-top: 12px;
	}

	.notice {

		display: flex;
		align-items: center;
		border-top: #efefef 1px solid;
		border-bottom: #efefef 10px solid;
		padding: 10px 20px 10px 20px;
	}

	.notice .tt {
		font-weight: bold;
		color: #ff0000;
		border-right: #eee 2px solid;
		padding-right: 10px;
	}

	.notice .cc {
		flex-grow: 1;
		padding-left: 10px;
		color: #555;
	}

	.exam-item {
		display: flex;
		align-items: center;
		line-height: 25px;
		border-bottom: #f5f5f5 1px solid;
		margin-bottom: 10px;
	}

	.exam-item .left {
		text-align: left;
		flex-grow: 1;
	}

	.desc {
		color: #888;
	}

	.exam-item .left .icons {
		display: flex;
		align-items: center;
		color: #666;
	}

	.exam-item .right {
		text-align: right;
	}

	.nav {
		display: flex;
		align-items: center;
		align-content: space-around;
		line-height: 50px;
		color: #666;
		padding: 20px 0px 0px 0px;
	}

	.nav .item {
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;
		width: 25%;
	}

	.nav .item image {
		width: 32px;
		height: 32px;
	}

	.nav .item text {
		color: #666;
	}

	.tab {
		display: flex;
		align-items: center;
		padding: 10px 20px 10px 20px;
		border-bottom: #efefef 1px solid;
	}

	.tab .item {
		border-bottom: #fff 2px solid;
		color: #666;
		margin-right: 15px;
		padding-bottom: 5px;
	}

	.tab .active {
		border-bottom: #007AFF 2px solid;
		color: #007AFF;
	}
</style>