lxwx_front/pages/index/index.vue

<template>
<view class="index">
	<view class="status_bar"><!-- 这里是状态栏 --></view>
	<view class="contentContainer">
		<view class="title">
			首页
		</view>
		<u-swiper radius="0" :list="bannerList" @click="bannerHandle" :circular="true" height="190"></u-swiper>
		<view class="gridContent">
			<u-grid
				:border="false"
				col="4"
			>
				<u-grid-item
					v-for="(listItem,listIndex) in list"
					:key="listItem.id"
					@click="click(listItem)"
					class="gridItem"
				>
					<view class="item">
						<image :src="baseUrl+listItem.menuimage" mode="widthFix" class="gridPic"></image>
						<view class="grid-text">{{listItem.name}}</view>
					</view>
					
				</u-grid-item>
			</u-grid>
		</view>
		<view class="msg">
			<view class="msgTitle">
				<image src="../../static/titleflag.png" mode="widthFix"></image>
				<text>相关资讯</text>
			</view>
			<view class="msgContent">
				<view class="msgItem" v-for="(item,index) in msgList" :key="index" @click="godetails(item)">
					<view class="left">
						<image :src="baseUrl+item.listimage" mode="widthFix"></image>
					</view>
					<view class="right">
						<u--text :lines="2" color="#222222" :bold="true"  :text="item.title"></u--text>
						<u--text :lines="1" color="#999999"size="12" :text="item.sectitle"></u--text>
						<view class="timeContent">
							<view class="tag">
								<!-- {{item.zc}} -->
								留学政策
							</view>
							<view class="time">
								{{getFormatDate(item.createtime)}}
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
	import { getBanner,indexNav,articalList } from '@/common/api.js';
	export default {
		data() {
			return {
				bannerList: [],
				list: [
				],
				msgList:[
				],
				bannerAdvList:[]
			}
		},
		onLoad() {
			this.getBanner()
			this.indexNavHandle()
			this.getarticalList()
		},
		methods: {
			bannerHandle(index){
				console.log(index)
				window.location.href = this.bannerAdvList[index].advurl
			},
			click(name) {
				uni.navigateTo({
					url:'/pages/index/searchPage?id='+name.id+'&typedata='+name.typedata
				})
			},
			getarticalList(){
				articalList().then(res=>{
					this.msgList = res.rows;
				})
			},
			godetails(item){
				uni.navigateTo({
					// url:'/pages/detail/detail?id='+item.id
					url:'/pages/detail/detail?id='+item.wx_category_id
				})
			},
			getFormatDate(time) {
			    let d = new Date(time*1000);
			    let Y = d.getFullYear();
			    let M = d.getMonth() + 1; // 月份获取是0-11，所以+1
			    let D = d.getDate();
			    let h = d.getHours();
			    let m = d.getMinutes();
			    let s = d.getSeconds();
				return Y+'-'+M+'-'+D+' '+h+':'+m+':'+s;
			},
			getBanner(){
				getBanner().then(res => {
					this.bannerAdvList = res.rows
					this.bannerList = res.rows.map(item=>{
						return this.baseUrl+item.advimage
					})
				})
			},
			indexNavHandle(){
				let params={
					sort:'weigh',
					// order:'desc'
				}
				indexNav(params, {
					custom: { auth: true },
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
				  }).then(res=>{
					this.list = res.rows
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.index{
	.gridContent{
		background-color: #ffffff;
		padding:32upx 0 8upx 0;
	}
	.gridPic{
		width:120upx;
		height:120upx;
	}
	.grid-text{
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
		text-align: center;
		margin-top: -8upx;
		line-height: 28upx;
		
	}
	.gridItem{
		margin-bottom:30upx;
		text-align: center;
		.item{
			width:120upx;
		}
	}
	/deep/.u-grid{
		align-items: flex-start;
	}
	.msg{
		.msgTitle{
			display: flex;
			align-items: center;
			padding:24upx 0;
			&>image{
				width:10upx;
			}
			&>text{
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
				margin-left:15upx;
			}
		}
		.msgContent{
			.msgItem{
				background-color: #ffffff;
				padding:29upx 24upx;
				display: flex;
				margin-bottom:20upx;
				.left{
					width: 180upx;
					height: 180upx;
					background: #E4E7EB;
					border-radius: 20upx;
					overflow: hidden;
					&>image{
						width:100%;
					}
				}
				.right{
					flex: 1;
					margin-left: 10px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.timeContent{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.tag{
							padding:9upx;
							font-size: 24upx;
							color: #0076F6;
							background: #EDF6FF;
							border-radius: 10upx;
						}
						.time{
							font-size: 24upx;
							color: #999999;
						}
					}
				}
			}
		}
	}
}
</style>