dlzx/pages/index/index.vue

<template>
	<view class="center">
		<view class="top"></view>
		<!-- #ifdef MP -->
		<navigator url="/pages/product/search">
			<view class="input-box flex">
				<view class=" input-content flex">
					<view class="iconfont iconsearch"></view>
					<view class="input"><input disabled placeholder="请输入搜索内容" /></view>
				</view>
			</view>
		</navigator>
		<!-- #endif -->
		<view class="carousel">
			<swiper autoplay="true" duration="400" interval="5000" @change="swiperChange" class="bor">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"><image src="" /></swiper-item>
			</swiper>
		</view>
		<view class="swiper-dot">
			<template v-for="item in swiperLength">
				<view class="swiper-dots-item" :key="item" :class="{ action: swiperCurrent + 1 === item }"></view>
			</template>
		</view>
		<view class="cate-section">
			<view class="cate-item">
				<image src="/static/icon/c3.png"></image>
				<view class="cate-font">品牌介绍</view>
			</view>
			<view class="cate-item">
				<image src="/static/icon/c5.png"></image>
				<view class="cate-font">产品百科</view>
			</view>
			<view class="cate-item">
				<image src="/static/icon/c7.png"></image>
				<view class="cate-font">免费咨询</view>
			</view>
			<view class="cate-item">
				<image src="/static/icon/c8.png"></image>
				<view class="cate-font">邀请有礼</view>
			</view>
		</view>
		<view class="xian"></view>
		<view class="main">
			<view class="main-top flex">
				<view class="main-left">
					<view class="shu"></view>
					<view class="main-title">热销推荐</view>
					<view class="main-tip">在售精品</view>
				</view>
			</view>
			<view class="list-box-h">
				<view v-for="(item, index) in dataList" :key="index" class="guess-item" @click="navToDetailPage(item)">
					<image :src="item.image"></image>
					<view class="guess-box">
						<view class="title clamp2">
							{{ item.store_name }}
						</view>
						<view class="price-box flex">
							<view class="yuanprice">{{ item.ot_price }}</view>
							<image src="../../static/img/jiantou.png" mode=""></image>
							<view class="jiang">直降{{ (item.ot_price - item.price).toFixed(2) }}元</view>
						</view>
						<view class="price">￥{{ item.price }}</view>
						<view class="btn">马上拼</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { loadIndexs } from '@/api/index.js';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			carouselList: [''], //轮播图
			swiperLength: 1 //图片数量
		};
	},
	onLoad: function(option) {
		// #ifndef MP
		if (option.spread) {
			// 存储其他邀请人
			uni.setStorageSync('spread', option.spread);
		}
		// #endif
		// #ifdef MP
		if (option.scene) {
			// 存储小程序邀请人
			uni.setStorage({
				key: 'spread_code',
				data: option.scene
			});
		}
		// #endif
	},
	onShow: function() {
		// 判断是否强制登录
		if (this.loginInterceptor && !this.hasLogin) {
			// 登录拦截
			interceptor();
		}
		this.loadData();
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData();
	},
	// #ifndef MP
	// 监听导航栏输入框点击事件
	onNavigationBarSearchInputClicked(e) {
		//跳转到搜索页面
		this.clickSearch();
	},
	//点击导航栏 buttons 时触发
	onNavigationBarButtonTap(e) {
		uni.navigateTo({
			url: '/pages/user/notice'
		});
	},
	// #endif
	methods: {
		// 监听切换事件
		listChange(e) {
			this.checkid = e.detail.current;
		},
		// 點擊搜索框
		clickSearch() {
			uni.navigateTo({
				url: '/pages/product/search'
			});
		},
		// 请求载入数据
		async loadData() {
			loadIndexs({})
				.then(({ data }) => {
					let goods = data.info;
					this.carouselList = data.banner;
					this.swiperLength = this.carouselList.length;
					this.menusList = data.menus;
					this.goodsList = goods.firstList; //最新商品
					this.bastList = goods.bastList; //精品推荐
					this.bastBanner = data.benefit; //促销单品
					this.$set(this, 'couponArray', data.couponList); //保存卡包券

					uni.stopPullDownRefresh();
				})
				.catch(e => {
					uni.stopPullDownRefresh();
				});
		},
		//详情页
		navToDetailPage(item) {
			let id = item.id;
			uni.navigateTo({
				url: '/pages/product/product?id=' + id
			});
		}
	}
};
</script>

<style lang="scss">
page,
.center {
	height: auto;
	min-height: 100%;
	background-color: #ffffff;
}
/* #ifdef MP || APP-PLUS*/
.input-box {
	padding: 25rpx;
	/* #ifdef APP-PLUS */
	margin-top: var(--status-bar-height);
	/* #endif */
	background-color: #fe8119;
	height: 44px;

	.iconsearch {
		font-size: 50rpx;
	}

	.input-content {
		border-radius: 99rpx;
		flex-grow: 1;
		padding: 5rpx 30rpx;
		// background-color: rgba(231, 231, 231, 0.7);
		background: #ffffff;

		.input {
			flex-grow: 1;

			input {
				font-size: $font-base;
			}
		}
	}

	.input-button {
		padding-left: 20rpx;
		font-size: $font-base;
		height: 100%;
	}
}

/* #endif */
.top {
	width: 1000rpx;
	height: 282rpx;
	background: linear-gradient(180deg, #08c4e6, #50ead2);
	overflow: hidden;
	text-align: center;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
	margin-left: -125rpx;
}
.carousel {
	width: 700rpx;
	height: 300rpx;
	border-radius: 14rpx;
	margin: 0 auto;
	margin-top: calc(-128rpx + var(--status-bar-height));
	.bor {
		border-radius: 14rpx;
		.carousel-item {
			background-color: #4cd964;
			image {
				width: 100%;
				height: 100%;
				border-radius: 14rpx;
			}
		}
	}
}
.swiper-dot {
	position: relative;
	z-index: 10;
	margin-top: -40rpx;
	display: flex;
	justify-content: center;

	.swiper-dots-item {
		width: 14rpx;
		height: 14rpx;
		background: #aaaaaa;
		border-radius: 50%;
		margin: 0 16rpx;
		// z-index: 999;
	}

	.action {
		background-color: #ffffff;
	}
}
.cate-section {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	padding: 40rpx 22rpx;
	.cate-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: $font-sm + 4rpx;
		color: $font-color-dark;
	}
	.cate-font {
		margin-top: -26rpx;
	}
	/* 原图标颜色太深,不想改图了,所以加了透明度 */
	image {
		width: 150rpx;
		height: 150rpx;
		margin-bottom: 14rpx;
		border-radius: 50%;
	}
}
.xian {
	width: 750rpx;
	height: 20rpx;
	background: #f5f5f5;
}
.main {
	margin-top: 40rpx;
	padding: 0 40rpx;
	.main-top {
		align-items: center;
		.main-left {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.shu {
				width: 8rpx;
				height: 38rpx;
				background: #05ab81;
				border-radius: 4rpx;
			}
			.main-title {
				margin-left: 10rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #202739;
			}
			.main-tip {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #95A0B1;
				margin-left: 14rpx;
			}
		}
	}
}
.guess-item {
	display: flex;
	width: 710rpx;
	height: 290rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 10rpx;
	padding: 15rpx;
	padding-bottom: 150rpx;
	margin: 20rpx auto 0;
	position: relative;
	image {
		width: 260rpx;
		height: 260rpx;
		border-radius: 10rpx;
	}
	.guess-box {
		padding: 12rpx 0 0 24rpx;
		width: 436rpx;
		.title {
			font-size: 30rpx;
			padding-left: 4rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			width: 368rpx;
			line-height: 36rpx;
			.tuanF {
				display: inline-block;
				margin-right: 4rpx;
				position: relative;
				top: -6rpx;
				.tuan {
					display: flex;
					align-items: center;
					padding: 10rpx;
					height: 36rpx;
					background: #ffebe9;
					border-radius: 18rpx;
					.tuan-image {
						width: 18rpx;
						height: 18rpx;
					}
					.tuan-font {
						display: inline;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ff1135;
						margin-left: 2rpx;
					}
				}
			}
		}
		.ping-box {
			margin-top: 15rpx;
			justify-content: flex-start;
			.ping {
				margin-left: 10rpx;
				height: 39rpx;
				background: #fdf7eb;
				border-radius: 5rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ff911f;
				display: flex;
				align-items: center;
				padding: 0 10rpx;
			}
		}
		.price-box {
			margin-top: 38rpx;
			justify-content: flex-start;
			.yuanprice {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				text-decoration: line-through;
				color: #999999;
				padding-right: 6rpx;
			}
			image {
				width: 14rpx;
				height: 16rpx;
			}
			.jiang {
				padding-left: 2rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #b59467;
			}
		}
		.price {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ff1135;
		}
		.btn {
			width: 137rpx;
			height: 56rpx;
			background: linear-gradient(-35deg, #f8dd4f, #fbeb77);
			border-radius: 28rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 56rpx;
			text-align: center;
			position: absolute;
			bottom: 25rpx;
			right: 25rpx;
		}
	}
}

</style>