boying/pages/index/list.vue

<template>
	<view class="container">
		<view v-if="list.length > 0" class="list-box flex_item" v-for="(ls,index) in list" :key='index' @click="nav(index)">
			<image :src="baseURL + ls.coverimage"></image>
			<view class="list-item">
				<view class="title ellipsis">{{ls.title}}</view>
				<view class="time">{{ls.time}}</view>
			</view>
		</view>
		<!-- <view class="empty-box" v-show="list.length === 0"><u-empty></u-empty></view> -->
	</view>
</template>
<script>
import { article } from '@/api/index.js';
import { mapState, mapMutations } from 'vuex';
import { getTime } from '@/utils/rocessor.js';
export default {
	data() {
		return {
			list:''
		};
	},
	onLoad(option){
		uni.setNavigationBarTitle({
			title:this.$t('foo.tglb')
		})
		this.loadData();
	},
	onShow() {
		
	},
	computed: {
		...mapState(['baseURL']),
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
	},
	methods: {
		// 请求载入数据
		async loadData() {
			let obj = this;
			article({
				page:1,
				limit:10000,
				category_id: 14
			}).then(({ data }) => {
				console.log(data)
				data.list.forEach(e =>{
					console.log(e)
					e.time = getTime(e.updatetime)
				})
				obj.list = data.list;
			});
		},
		nav(index){
			uni.navigateTo({
				url: '/pages/index/article?id=' + this.list[index].id
			})
		},
	}
};
</script>

<style lang="scss">
page {
	min-height: 100%;
	.container {
		width: 100%;
		padding: 25rpx 27rpx;
		
	}
}
.empty-box{
	margin-top: 100rpx;
	width: 100%;
	height: 500rpx;
}
.list-box{
	border-bottom: 1rpx solid #E3E3E3;
	margin-bottom: 25rpx;
	padding-bottom: 25rpx;
	image{
		width: 200rpx;
		height: 160rpx;
		border-radius: 15rpx;
	}
	.list-item{
		padding-left: 16rpx;
		width: 80%;
		.title{
			height: 80rpx;
			color: #FFFFFF;
			font-size: 30rpx;
			font-weight: 500;
		}
		.time{
			padding-top: 40rpx;
			color: #999999;
			font-size: 24rpx;
		}
	}
}
</style>