project/project1/pages/home/home.vue

<template>
	<view class="home">
		<!-- 搜索框 -->
		<van-search :value="value" placeholder="请输入搜索关键词" />
		<!-- 轮播 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in background" :key="index">
					<image class="pictures" :src="item.imgUrl" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 导航 -->
		<van-grid :border="false">
			<van-grid-item icon="new-arrival-o" text="新品推荐" />
			<van-grid-item icon="underway-o" text="限时特惠" />
			<van-grid-item icon="hot-o" text="每日疯抢" />
			<van-grid-item icon="coupon-o" text="领优惠券" />
		</van-grid>
		<!-- 通知栏 -->
		<van-notice-bar left-icon="volume-o" :scrollable="false">
			<swiper class="list" vertical="true" :autoplay="3000" :show-indicators="false">
				<swiper-item v-for="(item,index) in noticeList" :key="index">
					{{item.title}}
				</swiper-item>
			</swiper>
		</van-notice-bar>
		<!-- 商品列表 -->
		<view class="product" v-for="(item,index) in  prodList" :key="index">
			<view class="title">
				<text>{{item.title}}</text>
				<text>查看更多</text>
			</view>
			<view class="product_list">
				<view class="main" v-for="(item1,index1) in item.productDtoList" :key="index1" @click.native="goDetail(item1)">
						<image :src="item1.pic" mode=""></image>
						<view class="name">
							{{item1.prodName}}
						</view>
						<view class="price">
							￥{{item1.price}}
						</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		banner,
		notice,
		prod
	} from '../../api/home.js';
	export default {
		data() {
			return {
				background: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				noticeList: [],
				prodList: []
			}
		},
		onLoad() {
			banner().then(res => {
				console.log(res, 'res')
				this.background = res;
			})
			notice().then(res => {
				this.noticeList = res.records;
			})
			prod().then(res => {
				this.prodList = res;
				console.log(this.prodList, '商品')
			})
		},
		methods: {
			goDetail(event) {
				uni.navigateTo({
					url:`/pages/detail/detail?id=${event.prodId}`
				})
			}
		}
	}
</script>

<style lang="less">
	.uni-margin-wrap {
		width: 750rpx;
		width: 100%;
	}

	.swiper {
		height: 460rpx;
	}

	.swiper-item {
		// display: block;
		height: 460rpx;
		line-height: 460rpx;
		text-align: center;
	}

	.pictures {
		width: 100%;
		height: 460rpx;
	}

	.van-notice-bar__content {
		width: 648rpx;
	}

	.list {
		height: 40rpx;
		line-height: 40rpx;
	}
	
	.product {
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 10rpx;
			font-size: 28rpx;
		}
		.title text:last-child {
			color: #ccc;
			font-size: 21rpx;
		}
		.product_list {
			display: flex;
			flex-wrap: wrap;
			.main {
				width: 33%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 18rpx 0;
				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 8rpx;
				}
				.name {
					width: 200rpx;
					font-size: 22rpx;
					overflow:hidden; 
					text-overflow:ellipsis;
					display:-webkit-box; 
					-webkit-box-orient:vertical;
					-webkit-line-clamp:2; 
				}
				.price {
					width: 200rpx;
					color: #f00;
				}
			}
		}
	}
</style>