sz-kjsxy-wx-new/pages/index/index.vue

<template>
	<view class="container">
		<view class="container-top">
			<u-navbar :is-back="false" :is-fixed="false" :height="topNavHeight" :background="topbg" title-color="#fff"
				title-size="32" :border-bottom="false" title="苏州科技商学院"></u-navbar>

			<view v-if="showWx" class="container-wx">
				<u-icon name="close" color="#fff" @click="showWx=false"></u-icon>
				<view>
					点击“<text></text><text class="container-wx-big"></text><text></text>”添加到我的小程序，下次访问更快捷
				</view>
			</view>

			<view class="container-swiper">
				<swiper @change="changeCurrent" circular :current="current_swiper" :autoplay="false">
					<swiper-item v-for="item in course_list" @click="toCourse(item.id)">
						<image :src="item.image?item.image.url:''"/>
						<view class="course_name">{{item.name}}</view>
					</swiper-item>
				</swiper>
				
				<view class="container-swiper_current">
					<image src="../../static/index_swiper_left.png" alt=""/>
						<text class="bigFont">{{show_current_swiper}}</text>
						<text>/{{course_list.length}}</text>
						<image src="../../static/index_swiper_right.png" alt=""/>
				</view>
			</view>
		</view>
		<view class="container-content">
			<image src="../../static/index_bg.png" width="100%" height="100%"></image>

			<view class="container-content-icons">
				<view @click="tourl(1)">
					<image src="../../static/index_icon2.png"></image>
				</view>
				<view @click="tourl(2)">
					<image src="../../static/index_icon3.png"></image>
				</view>
				<view @click="tourl(3)">
					<image src="../../static/index_icon4.png"></image>
				</view>
			</view>

			<view class="container-content-info">
				<view class="container-content-info_title">
					<view>资讯</view>
					<view @click="tourl(4)">查看全部</view>
				</view>
				<view class="container-content-info_swiper">
					<swiper circular :current="info_index" @change="changeInfo" next-margin="340rpx">
						<swiper-item v-for="(item,index) in notices_list" @click="tourl(5,item.titleurl)">
							<view class="imgwrap" :class="{'active':info_index===index}">
								<image :src="item.titlepic"></image>
							</view>
							<view class="title">
								<view class="title-name">
									{{item.title}}
								</view>
								<view class="title-time">
									{{item.newstime}}
								</view>
							</view>

						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<tabbar :currentPage="0"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue';
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				topNavHeight: 40,
				topbg: {
					backgroundColor: 'transparent'
				},
				showWx: true,
				current_swiper: 0,
				show_current_swiper: 1,
				info_index: 0,
				course_list:[],
				notices_list:[]
			}
		},
		onLoad() {
			let menuButtonObject = uni.getMenuButtonBoundingClientRect();
			this.topNavHeight = menuButtonObject.height + 8
			let token = uni.getStorageSync('stbc_lifeData') ? uni.getStorageSync('stbc_lifeData').vuex_token : ''
			if (this.base.isNull(token)) {
				this.getToken()
			}
			this.getCourseList()
			this.getNoticesList()
			
		},
		methods: {
			changeCurrent(e) {
				this.show_current_swiper = e.detail.current + 1
			},
			changeInfo(e) {
				this.info_index = e.detail.current

			},
			async getToken() {
				await uni.login({
					provider: 'weixin',
					success: (res) => {
						this.$u.api.login({
							code: res.code
						}).then(res => {
							this.$u.vuex('token', res.token)
							this.$u.api.user().then(res => {
								this.$u.vuex('vuex_user', res)
							})
						}).catch(err => {
							console.log('login-error:', JSON.stringify(err))
						})
					},
					fail: (res) => {
						console.log("errtoken", JSON.stringify(res))
					}
				});
			},
			async getCourseList(){
				const res = await this.$u.api.courseIndex({
					page:1,
					page_size:5
				})
				this.course_list = res.data
			},
			toCourse(id){
				uni.navigateTo({
					url:'/packages/course/detail?id='+id
				})
			},
			async getNoticesList(){
				const res = await this.$u.api.courseNews({
					page:1,
					page_size:5,
				})
				this.notices_list = res.rows
				
			},
			tourl(type,url){
				if(type===1){
					uni.navigateTo({
						url:'/packages/webview/index?type=1'
					})
				}else if(type===2){
					uni.switchTab({
						url:'/pages/course/index'
					})
				}else if(type===3){
					uni.switchTab({
						url:'/pages/book/index'
					})
				}else if(type===4){
					// 资讯列表
					uni.navigateTo({
						url:'/packages/webview/index?type=2'
					})
				}else if(type===5){
					// 资讯详情
					uni.navigateTo({
						url:'/packages/webview/index?type=3&url='+url
					})
				}
			}
		}

	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #fff;
		width: 100%;
		min-height: 100vh;
		padding-bottom: 80rpx;

		&-top {
			width: 100%;
			height: 570rpx;
			background: url(../../static/index_top_bg.png) no-repeat;
			background-size: 100% 100%;
		}

		&-wx {
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 24rpx;
			width: 100%;
			background-color: #271f8e;
			padding: 15rpx 0;
			margin-top: 20rpx;

			::v-deep .u-icon {
				margin: 0 30rpx;
			}

			text {
				width: 10rpx;
				height: 10rpx;
				border-radius: 10rpx;
				background-color: #fff;
				margin: 0 5rpx;
				display: inline-block;
			}

			&-big {
				width: 20rpx !important;
				height: 20rpx !important;
				border-radius: 20rpx !important;
				vertical-align: middle;
			}
		}

		&-swiper {
			width: 680rpx;
			margin: 0 auto;
			font-size: 0;
			margin-top: 30rpx;
			position: relative;
			z-index: 99;

			swiper {
				width: 100%;
				height: 380rpx;

				swiper-item {
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			.course_name{
				    font-size: 32rpx;
				    color: #ba9676;
				    position: absolute;
				    top: 20rpx;
				    left: 20rpx;
			}
			&_current {
				font-size: 28rpx;
				text-align: center;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 28rpx;

				image {
					width: 28rpx;
					height: 11rpx;
					margin: 0 20rpx;
				}

				text {
					margin-top: 10rpx;
				}

				.bigFont {
					color: #b08c6c;
					font-size: 40rpx;
					margin-top: 0rpx;
					margin-right: 10rpx;
				}
			}
		}

		&-content {
			width: 100%;
			position: relative;
			position: relative;
			padding-top: 260rpx;

			&>image {
				width: 100%;
				height: 100%;
				position: absolute;
				top: -40rpx;
				left: 0;
			}

			&-icons {
				display: flex;
				justify-content: space-around;
				align-items: center;
				position: relative;
				padding-bottom: 130rpx;

				image {
					width: 200rpx;
					height: 195rpx;
				}
			}

			&-info {
				position: relative;
				padding-top: 130rpx;

				&_title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 680rpx;
					margin: 0 auto;
					font-size: 28rpx;
					color: #666;
					margin-bottom: 40rpx;

					view:first-child {
						font-size: 42rpx;
						color: #333;
					}
				}

				&_swiper {
					margin-left: 20rpx;
					height: 780rpx;

					swiper {
						height: 100%;

						swiper-item {
							.imgwrap {
								padding: 10rpx;
								border-radius: 10rpx;
								width: 390rpx;
								margin-bottom: 20rpx;

								image {
									width: 370rpx;
									height: 460rpx;
								}
							}

							.imgwrap.active {
								background-color: #fff;
							}

							.title {
								font-size: 24rpx;
								width: 390rpx;
								padding: 10rpx;

								&-name {
									line-height: 1.5;
									color: #333333;
									margin-bottom: 30rpx;
								}

								&-time {
									color: #666666;
								}
							}
						}
					}
				}
			}
		}
	}
</style>