yzf/pages/index/notice.vue

<template>
	<view class="container">
		<view v-if="noticeList.length == 0" class="no-data">——暂无数据——</view>
		<view class="listBox" v-else v-for="item,index in noticeList" :key="index" @click="notice(item)">
			<view class="listTpl">
				<view class="name">{{item.title}}</view>
				<view class="time">{{item.add_time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getArtList} from '@/api/notice.js';
	export default {
		data() {
			return {
				noticeList:[]
			};
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			//获取公告列表数据
			async loadData() {
				let obj = this;
				getArtList('1').then(function(e) {
					obj.noticeList = e.data
					console.log(obj.noticeList,'obj.noticeList');
				})
			},
			//公告详情
			notice(item){
				let id = item.id;
				uni.navigateTo({
					url: `/pages/index/noticeDetails?id=${id}`
				});
			}
		}
	};
</script>

<style lang="scss">
	.container{
		width: 100%;
		color: #FFFFFF;
		background-color: #051137;
	}
	.listBox{
		background-color: #1F2A4A;
		.listTpl{
			border-bottom: 1rpx solid #919295;
			padding: 25rpx 25rpx;
			.name{
				font-size: 28rpx;
				color: #FFFFFF;
			}
			.time{
				font-size: 22rpx;
				color: #999999;
				padding-top: 15rpx;
			}
		}
	}
	.no-data{
		color:#A2A5B8;
		font-size: 26rpx;
		padding: 25rpx 0rpx;
		width: 100%;
		text-align: center;
		background-color: #051137;
	}
</style>