houyi-uniapp/pages/index/index.vue

<template>
	<view>
		<u-navbar :fixed="false" title="首页" leftIcon=" " :autoBack="false"></u-navbar>
		<view class="p-30">
			<u-swiper
				:list="banner"
				@click="bannerChange"
				keyName="cover"
				height="300rpx"
				:autoplay="false"
				radius="5"
				bgColor="#ffffff"
				indicator
				indicatorMode="line"
				circular
			></u-swiper>
		</view>
		<view class="home_tab">
			<navigator :url="item.url" class="home_tab_view" v-for="(item, index) in tab_list" :key="index">
				<image :src="item.img" class="shadow_img"></image>
				<view>{{ item.name }}</view>
			</navigator>
		</view>

		<view class="home_notice">
			<view class="home_notice_title">
				<view>系统公告</view>
				<view style="font-size: 28rpx; display: flex; align-items: center" @click="changeTab">
					更多
					<u-icon name="arrow-right" color="#333" size="14"></u-icon>
				</view>
			</view>
			<navigator :url="`/pages/article/detail?id=${item.id}`" class="home_notice_view" v-for="(item, index) in articleItems" :key="index" v-if="index <= 2">
				<view>{{ item.title }}</view>
			</navigator>
		</view>

		<view style="height: 20rpx"></view>
		<view class="u-flex u-flex-x-center">
			<u--image :showLoading="true" src="/static/img/goods_hot_icon.png" width="308rpx" height="44rpx"></u--image>
		</view>
		<view style="height: 20rpx"></view>
		<view class="u-flex u-flex-wrap u-flex-between p-30">
			<navigator
				v-for="(item, index) in goodsItems"
				:key="index"
				:url="`/pages/goods/detail?id=${item.id}`"
				style="background-color: #ffffff; width: 335rpx; margin-bottom: 30rpx; border-radius: 10rpx"
			>
				<u--image width="335rpx" height="335rpx" :src="item.cover[0]" radius="6rpx"></u--image>
				<u-line></u-line>
				<view style="padding: 20rpx">
					<view style="color: #232323; font-size: 28rpx">{{ item.name }}</view>
					<view style="height: 10rpx"></view>
					<view class="u-flex u-flex-between u-flex-y-center">
						<view style="color: #ff1a1a; font-size: 28rpx">￥{{ item.current_price }}</view>
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			banner: [],
			tab_list: [
				{
					img: '/static/home/tab2.png',
					name: '资产包',
					url: '/pages/resourceBundle/resourceBundle'
				},
				{
					img: '/static/home/tab4.png',
					name: '账单',
					url: '/pages/wallet/list'
				},
				{
					img: '/static/home/tab3.png',
					name: '团队',
					url: '/pages/team/index'
				},
				// {
				// 	img: '/static/home/tab1.png',
				// 	name: '活动',
				// 	url: '/pages/activity/index'
				// }
			],
			articleItems: [],
			goodsItems: []
		};
	},
	onLoad() {
		this.getAds();
		this.aryicleList();
		this.getGoodsItems()
	},
	methods: {
		getGoodsItems() {
			this.$http.get('/shop/v10/goods/items').then(({ data }) => {
				this.goodsItems = data;
			});
		},
		bannerChange(e) {
			if (!this.banner[e].path) {
				return;
			}
			uni.navigateTo({ url: this.banner[e].path });
		},
		getAds() {
			this.$http.get('/shop/v10/ads/items').then(({ data }) => {
				this.banner = data;
			});
		},
		// 公告
		aryicleList() {
			this.$http
				.get('/shop/v10/article/items', {
					page: 1,
					cid: 1
				})
				.then(({ data, success }) => {
					if (success) {
						this.articleItems = data.data;
					}
				});
		},
		changeTab(){
			uni.switchTab({
				url:'/pages/article/index'
			})
		}
	}
};
</script>

<style lang="scss">
.grid_flex {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.home_tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 80rpx;

	&_view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		letter-spacing: 10rpx;
		text-indent: 10rpx;
		text-align: center;

		image {
			width: 98rpx;
			height: 98rpx;
			margin-bottom: 10rpx;
		}

		view {
			width: 100%;
		}
	}
}
.home_notice {
	background-color: #fff;
	border-radius: 25rpx;
	padding: 30rpx 40rpx;
	margin: 0 30rpx 15rpx;

	&_title {
		font-size: 32rpx;
		font-weight: bold;
		color: #1d65aa;
		text-align: center;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	&_view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;

		view {
			max-width: 600rpx;
			white-space: nowrap;
			/*超出的空白区域不换行*/
			overflow: hidden;
			/*超出隐藏*/
			text-overflow: ellipsis;
			/*文本超出显示省略号*/
		}
	}
}
</style>