VIP32/购物商城/project/pages/home/home.vue

<template>
	<view class="home">
		<!-- 搜索框 -->
		<van-search 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 bannerData" :key="index">
					<view class="swiper-item">
						<image :src="item.imgUrl" mode="" class="pictures"></image>
					</view>
				</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="notice" circular :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item,index) in noticeDate" :key="index">
					<view>{{item.title}}</view>
				</swiper-item>
			</swiper>
		</van-notice-bar>
		<!-- 商品信息 -->
		<view class="info">
			<view class="main" v-for="(item,index) in productList" :key="index">
				<view class="header">
					<view class="left">
						{{item.title}}
					</view>
					<view class="right">
						查看更多
					</view>
				</view>
				<view class="list" >
					<view class="box" v-for="(x,y) in item.productDtoList" :key="y" @click="getToDetail(x)">
						<image :src="x.pic" mode="" class="img"></image>
						<view class="tit">{{x.prodName}}</view>
						<view class="price">￥{{x.price}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		banner,
		noticeList,
		productList
	} from '@/api/home.js';
	export default {
		data() {
			return {
				bannerData: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				noticeDate: [],
				productList: []
			}
		},
		onShow() {
			console.log("走进来了啊啊啊啊")
			// 轮播方法
			this.bannerList();
			// 通知信息
			this.notice();
			// 商品信息
			this.info();
		},
		methods: {
			// async await
			// 方法名() {
			// 	接口名().then().catch()
			// }
			// async 方法名() {
			// 	let xxx = await 接口名(参数)
			// }
			async bannerList() {
				console.log("走进来")
				let {
					data
				} = await banner();
				this.bannerData = data;
				// banner().then(res => {
				// 	console.log("成功",res)

				// }).catch(err => {
				// 	console.log(err,'失败')
				// })
			},
			async notice() {
				let {
					data
				} = await noticeList();
				this.noticeDate = data.records;
			},
			async info() {
				let {
					data
				} = await productList();
				this.productList = data;
				console.log(this.productList, 'productList')
			},
			// 去详情
			getToDetail(val) {
				uni.navigateTo({
					url:`/pages/detail/detail?id=${val.prodId}`
				})
			}
		}

	}
</script>

<style scoped lang="scss">
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

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

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

	.notice {
		width: 600rpx;
	}

	.info {
		padding: 15rpx;

		.main {
			.header {
				width: 96%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 70rpx;

				.left {
					font-weight: bold;
				}

				.right {
					color: #ccc;
					font-size: 20rpx;
				}
			}
			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly;
				.box {
					width: 30%;
					margin-top: 20rpx;
					.img {
						width: 100%;
						height: 200rpx;
						margin: 0 auto;
						display: block;
						border-radius: 4rpx;
					}
					.tit {
						font-size: 24rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;  // 控制多行的行数
						-webkit-box-orient: vertical;
						margin-top: 5rpx;
					}
					.price {
						color: red;
						font-size: 27rpx;
						font-weight: bold;
						margin-top: 5rpx;
					}
				}
			}
		}
	}
</style>