VIP26/shop/pages/home/home.vue

<template>
	<view class="home">
		<!-- 搜索框 -->
		<van-search :value="value" placeholder="请输入搜索关键词" />
		<!-- <Test></Test>> -->
		<!-- 轮播图 -->
		<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 bannerList" :key="index">
					<image class="pictures" :src="item.imgUrl" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 商品分类 -->
		<van-grid>
		  <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="noticeSwiper" vertical="true" :indicator-dots="false" :autoplay="3000" >
					<swiper-item v-for="(item,index) in noticeList" :key="index">
						<view class="title">
							{{item.title}}
						</view>
					</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,
		product
	} from '../../api/home.js';
	export default {
		data() {
			return {
				value: "",
				bannerList: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				noticeList:[],
				prodList: []
			}
		},
		onLoad() {
			uni.startPullDownRefresh();
			setTimeout(()=>{
				banner().then(res => {
					this.bannerList = res;
				}),
				notice().then(res => {
					console.log(res)
					this.noticeList = res.records;
				}),
				product().then(res => {
					this.prodList = res;
					console.log(this.prodList, '商品')
				})
			},1000)
		},
		onPullDownRefresh() {
			setTimeout(function () {
						uni.stopPullDownRefresh();
			}, 2000);
		},
		methods: {
			goDetail(value) {
				console.log(value)
				uni.navigateTo({
					// url:"/pages/detail/detail"
					url: `/pages/detail/detail?id=${value.prodId}`
				})
			}
		}
	}
</script>

<style lang='less'>
	.uni-margin-wrap {
		width: 100%;
		.swiper {
			height: 430rpx;
			.swiper-item {
				display: block;
				height: 430rpx;
				line-height: 430rpx;
				text-align: center;
			}
		}
	}
	.pictures {
		width: 100%;
		height: 100%;
	}
	.noticeSwiper {
		width: 668rpx;
	}
	.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>