xiaoyou-h5/index.vue

<template>
	<view class="">
		<view class="bg">

		</view>

		<view class="content position">

			<view class="top_banner">
				<u-swiper :list="course_list" height='280' @click="on_banner"></u-swiper>
			</view>
			<view class="news_wrap">
				<view class="news_title first">
					<view class="title">资讯中心
						<text class="shadow">NEW</text>
					</view>
					<view class="title_right" @click="to_newList">
						<text>前往查看</text>
						<image src="../../static/images/arrow-right.png" mode=""></image>
					</view>
				</view>
				<view class="empty" v-if="news_list== undefined||active_list.length == 0" >
					<u-empty text="没有内容哦!" mode="list">
					</u-empty>
				</view>
				<view class="news_item" v-for="(item,index) in news_list" :key="index" @click="to_new_detail(item.id)">
					<view class="item_left">
						<!-- <image :src="item.cover_resource==null?url:item.cover_resource.url" mode=""></image> -->
						<view class="image"
							:style="{backgroundImage:'url('+ (item.cover_resource==null?'':item.cover_resource.url) +')'}">

						</view>
					</view>
					<view class="item_right">
						<view class="item_title">
							{{item.title}}
						</view>
						<view class="item_num">
							<text>{{item.created_at}}</text>
							<text>阅读 {{item.view_count}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="active">
				<view class="news_title">
					<view class="title">校友活动
						<text class="shadow1">ACTIVITY</text>
					</view>
					<view class="title_right" @click="to_active">
						<text>前往查看</text>
						<image src="../../static/images/arrow-right.png" mode=""></image>
					</view>
				</view>
				<view class="active_wrap">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view class="empty1" v-if="active_list== undefined||active_list.length == 0" >
							<u-empty text="没有内容哦!" mode="list">
							</u-empty>
						</view>
						
						<view class='active_item' v-for="(item,index) in active_list" :key="index"
							@click="to_active_detail(item.id)">
							<view class="top">
								<!-- <image :src="item.cover_resource==null?url:item.cover_resource.url" mode=""></image> -->
								<view class="image"
									:style="{backgroundImage:'url('+ (item.cover_resource==null?'':item.cover_resource.url) +')'}">

								</view>
							</view>
							<view class="active_item_text">
								<text class="title">{{item.title}}</text>
								<view class="wrap">
									<view class="item_day">
										<text>{{item.short}}</text>
										<!-- <text>{{item.start_time}}--{{item.end_time}}</text> -->
										<text>{{getTime(item.start_time)}}-{{getTime(item.end_time)}}</text>
									</view>
									<view class="btn" v-if="item.state.status == 1">
										活动进行中
									</view>
									<view class="btn_over" v-else-if="item.state.status == 3">
										{{item.state.status_text}}
									</view>
									<view class="btn_check" v-else>
										{{item.state.status_text}}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="student">
				<view class="news_title">
					<view class="title">校友风采
						<text class="shadow2">DEMEANOR</text>
					</view>
					<view class="title_right" @click="to_style">
						<text>前往查看</text>
						<image src="../../static/images/arrow-right.png" mode=""></image>
					</view>
				</view>
				<scroll-view class="stu_scroll" scroll-x="true">
					<u-empty v-if="stu_list== undefined||stu_list.length == 0" text="没有活动哦!" mode="list"></u-empty>
					<view class='stu_item' v-for="(item,index) in stu_list" :key="index" @click="to_stu_detail(item)">
						 <!-- @click="to_stu_detail(item)" -->
						<!-- <image :src="item.cover_resource==null?url:item.cover_resource.url" mode=""></image> -->
						<view class="image"
							:style="{backgroundImage:'url('+ (item.cover_resource==null?'':item.cover_resource.url) +')'}">

						</view>
						<view class="stu_item_text">
							{{item.title}}
						</view>
					</view>
				</scroll-view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: '../../static/images/new_default.png',
				start_time: '',
				end_time: '',
				course_list: [
				],
				news_list: [
				],
				active_list: [
				],
				stu_list: [
				],
				banner_list: []
			}
		},
		computed: {

		},
		onShow() {
		
			this.get_all()

		},
		onLoad() {
			// this.get_all()
		},
		methods: {
			

			to_style() {
				uni.navigateTo({
					// url: '../organization/tabs?index='+3
					url: 'stu_list'
				})
			},
			to_newList() {
				uni.navigateTo({
					// url:'../organization/tabs?index='+0
					url: 'new_list'
				})
			},
			to_active() {
				console.log(1111111)
				uni.navigateTo({
					url: '../activity/index'
				})
			},
			to_new_detail(id) {
				uni.navigateTo({
					url: 'news_detail?id=' + id
				})
			},
			to_active_detail(id) {
				uni.navigateTo({
					url: '../activity/active_detail?id=' + id
				})
			},
			to_stu_detail(item) {
				// let item = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: 'alumni_detail?id=' + item.id
				})
			},
			// 列表
			get_all() {
				this.$u.get('/page/home').then(res => {
					console.log(res, '首页列表')
					this.course_list = []
					this.news_list = res.data.news
					this.active_list = res.data.activities
					// this.active_list = this.active_list.map(item=>{
					// 	item.start_time = item.start_time.slice(0,10)
					// 	item.end_time = item.end_time.slice(0,10)
					// 	return item
					// })
					this.stu_list = res.data.miens
					this.banner_list = res.data.banners
					res.data.banners.forEach((item, index) => {
						this.course_list.push({
							image: item.cover_resource.url
						})
					})
					
				})
			},
			getTime(time) {
				if(time){
					let time1 = time.split(' ')
					// console.log(time1, 'tiome')
					let time2 = time1[0]
					return time2.replace(/\-/g, '.')
				}else{
					return 0
				}
				
			},
			//点击轮播图
			on_banner(e) {
				console.log(e, 'lunbotu')
				if (this.banner_list[e] != undefined) {
					if (this.banner_list[e].click_type == "Link") {
						//跳转到h5链接
						location.href = this.banner_list[e].click_body
					}
				}

			},
		}
	}
</script>

<style lang="scss">
	page {
		// background: url(../../static/images/bg.png) no-repeat;
		// background-position: top;
		// background-position-y: 180px;
		background-color: #F9F9FB;
	}

	.content {
		margin: 10px auto 0;
		// font-family: PingFang SC;


		.top_banner {
			border-radius: 12px;
			overflow: hidden;
			padding: 0 16px;
		}

		.news_title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30px;
			padding: 0 16px 0 0;

			.title {
				font-size: 15px;
				font-weight: bold;
				color: #282828;
				position: relative;
			}

			.shadow {
				display: block;
				position: absolute;
				width: 28px;
				height: 17px;
				font-size: 12px;
				// font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: #84705E;
				opacity: 0.24;
				bottom: -4px;
				left: 14px;
			}
			.shadow1 {
				display: block;
				position: absolute;
				width: 28px;
				height: 17px;
				font-size: 12px;
				// font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: #84705E;
				opacity: 0.24;
				bottom: -4px;
				left: 2px;
			}
			.shadow2 {
				display: block;
				position: absolute;
				width: 28px;
				height: 17px;
				font-size: 12px;
				// font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: #84705E;
				opacity: 0.24;
				bottom: -4px;
				left: -5px;
			}

			.title_right {
				text {
					font-size: 13px;
					// font-family: Graphit;
					font-weight: 500;
					line-height: 20px;
					color: rgba(0, 0, 0, 0.3)
				}

				image {
					width: 7px;
					height: 7px;
					margin-left: 6px;
					margin-bottom: 2px;
				}
			}
		}

		.first {
			padding: 0;
		}

		.news_wrap {
			padding: 0 16px;

			.news_item {
				background-color: #fff;
				display: flex;
				align-items: center;
				padding: 10px 8px;
				margin-top: 20px;
				box-shadow: 0px 8px 12px rgba(12, 20, 61, 0.06);
				border-radius: 4px;

				.item_left {
					width: 92px;
					height: 76px;
					overflow: hidden;
					flex-shrink: 0;
					margin-right: 8px;
					border-radius: 4px;

					.image {
						width: 92px;
						height: 76px;
						background-size: cover;
						background-position: center;
						background-repeat: no-repeat;
					}
				}

				.item_right {
					width: 100%;

					.item_title {
						overflow: hidden;
						-webkit-line-clamp: 2;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						font-size: 15px;
						font-family: Graphit;
						font-weight: 500;
						line-height: 20px;
						color: #282828;
					}

					.item_num {
						margin-top: 10px;
						font-size: 14px;
						// font-family: PingFang HK;
						font-weight: 400;
						color: #B2B2B2;

						text {
							display: inline-block;
							width: 50%;
							overflow: hidden;

							&:last-child {
								text-align: right;
							}
						}


					}
				}
			}
		}

		.active {
			padding: 0 0 0 16px;

			// background-color: #F9F9FB;
			.active_wrap {
				width: 100%;
				margin-top: 20px;
				.empty{
					margin-top: 45%;
				}
				.empty1{
					// margin-top: 45%;
				}
				.scroll-view_H {
					width: 100%;
					height: 180px;
					overflow: hidden;
					white-space: nowrap;
					margin-bottom: -14px;

					.active_item {
						background-color: #fff;
						width: 234px;
						height: 162px;
						display: inline-block;
						overflow: hidden;
						margin-right: 10px;
						padding: 8px;
						box-shadow: 0px 8px 12px rgba(12, 20, 61, 0.06);
						border-radius: 10px;

						.top {
							width: 217px;
							height: 74px;
							overflow: hidden;
							border-radius: 6px;

							.image {
								width: 215px;
								height: 74px;
								background-position: center;
								background-repeat: no-repeat;
								background-size: cover;;
							}
						}

						.active_item_text {
							margin-top: 12px;

							.title {
								display: inline-block;
								width: 210px;
								font-size: 16px;
								// font-family: Graphit;
								font-weight: 500;
								color: #282828;
								// margin-bottom: 8px;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}

							.wrap {
								display: flex;
								align-items: center;

								.item_day {

									text {
										display: block;
										width: 128px;
										overflow: hidden;
										white-space: nowrap;
										text-overflow: ellipsis;
										font-size: 13px;
										// font-family: Graphit;
										font-weight: 500;
										color: rgba(0, 0, 0, 0.26);

										&:last-child {
											font-size: 12px;
											// font-family: Graphit;
											font-weight: 300;
											color: #B2B2B2;
											margin-top: 2px;
										}
									}
								}

								.btn {
									flex: 0 0 80px;
									width: 80px;
									height: 26px;
									background: #79573D;
									border-radius: 6px;
									font-size: 12px;
									font-family: PingFang HK;
									font-weight: 400;
									line-height: 26px;
									color: #FFFFFF;
									text-align: center;
								}

								.btn_over {
									flex: 0 0 80px;
									width: 80px;
									height: 26px;
									background: #A0A0A0;
									border-radius: 6px;
									font-size: 12px;
									font-family: PingFang HK;
									font-weight: 400;
									line-height: 26px;
									color: #FFFFFF;
									text-align: center;
								}

								.btn_check {
									flex: 0 0 80px;
									width: 80px;
									height: 26px;
									background: #fff;
									border-radius: 6px;
									font-size: 12px;
									font-family: PingFang HK;
									font-weight: 400;
									line-height: 26px;
									color: #79573D;
									text-align: center;
									border: 1px solid #79573D;
								}
							}
						}
					}
				}
			}
		}

		.student {
			padding: 0 0 20px 16px;

			// background-color: #F9F9FB;
			.stu_scroll {
				padding-top: 20px;
				width: 100%;
				overflow: hidden;
				white-space: nowrap;

				.stu_item {
					width: 271px;
					height: 133px;
					overflow: hidden;
					border-radius: 6px;
					position: relative;
					display: inline-block;
					margin-right: 10px;
					background-color: #FFFFFF;

					.image {
						width: 271px;
						height: 133px;
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
					}

					.stu_item_text {
						position: absolute;
						bottom: 0;
						width: 100%;
						height: 27px;
						background-color: rgba(25, 19, 19, 0.53);
						font-size: 12px;
						// font-family: Graphit;
						font-weight: 500;
						line-height: 27px;
						color: #FFFFFF;
						text-align: center;
					}
				}
			}
		}

	}
</style>