dl/pages/index/index.vue

<template>
	<view class="container">
		<view class="vheigh"></view>
		<!-- 小程序头部兼容 -->
		<!-- 顶部logo and 搜索 start-->
		<view class="top-search flex">
			<view class="search-box flex" @click="clickSearch()">
				<image class="search" src="../../static/icon/search-h.png" mode=""></image>
				<view class="search-font"><input type="text" placeholder="输入关键词搜索" v-model="productname" /></view>
			</view>
		</view>
		<!-- 顶部logo and 搜索 end-->
		<!-- 轮播图 start -->
		<swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
			<!-- <view class="carousel-item"><image src="../../static/img/index.png" /></view> -->
			<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"><image :src="item.pic" /></swiper-item>
		</swiper>
		<!-- 轮播图 end -->
		<view class="swiper-btm flex">
			<view class="btm-item flex">
				<image src="../../static/icon/index-gou.png" mode=""></image>
				<view class="">自用购物返利</view>
			</view>
			<view class="btm-item flex">
				<image src="../../static/icon/index-gou.png" mode=""></image>
				<view class="">分享好友赚钱</view>
			</view>
			<view class="btm-item flex">
				<image src="../../static/icon/index-gou.png" mode=""></image>
				<view class="">超值正品优惠</view>
			</view>
		</view>
		<!-- 分类 -->
		<!-- <view class="cate-section">
			<navigator url="/pages/product/classify?type=2">
				<view class="cate-item">
					<image src="/static/icon/c3.png"></image>
					<text>报单商品</text>
				</view>
			</navigator>
			<navigator url="/pages/product/list?fid=5&sid=5&tid=6&isFu=1">
				<view class="cate-item">
					<image src="/static/icon/c5.png"></image>
					<text>复购专区</text>
				</view>
			</navigator>
			<view @click="navTo('/pages/user/shareQrCode')">
				<view class="cate-item">
					<image src="/static/icon/c8.png"></image>
					<text>邀请好友</text>
				</view>
			</view>
		</view> -->
		<!-- 精品 商品 -->
		<view class="guess-section-box">
			<view class="guess-section-title"><image src="../../static/img/title.png" mode=""></image></view>
			<view class="guess-section">
				<view v-for="(item, index) in bastList" :key="index" class="guess-item" @click="navToDetailPage(item)">
					<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
					<text class="title clamp margin-c-20">{{ item.store_name }}</text>
					<view class="cmy-hr"></view>
					<view class="price margin-c-20 flex">
						<view>
							<text class="font-size-sm ">￥</text>
							{{ item.price }}
						</view>
						<!-- <view class="font-size-sm">
							<text class="font-color-gray">{{ item.sales }}人购买</text>
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { loadIndexs } from '@/api/index.js';
import { getUserInfo } from '@/api/user.js';
import { getProducts } from '@/api/product.js';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import { mapState } from 'vuex';

export default {
	watch: {
		//自适应swiper高度
		checkid(newValue, oldValue) {
			let obj = this;
			if (newValue == 0) {
				let bHeight = Math.ceil(obj.bastList.length / 2);
				obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
			}
			if (newValue == 1) {
				let bHeight = Math.ceil(obj.goodsList.length / 2);
				obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
			}
			if (newValue == 2) {
				let bHeight = Math.ceil(obj.bastBanner.length / 2);
				obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
			}
		}
		// 初次加载页面高度时修改页面高度
		// bastList(newValue, oldValue) {
		// 	let obj = this;
		// 	let bHeight = Math.ceil(newValue.length / 2);
		// 	obj.$nextTick(function() {
		// 		uni.createSelectorQuery()
		// 			.select('#list-box')
		// 			.fields(
		// 				{
		// 					size: true
		// 				},
		// 				function(data) {
		// 					obj.pageProportion = data.width / 750;
		// 					obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
		// 				}
		// 			)
		// 			.exec();
		// 	});
		// }
	},
	data() {
		return {
			pageProportion: 0, //保存页面基于750宽度的比例
			productname: '',
			swiperHeight: 0,
			checkid: 0,
			titleNViewBackground: '',
			carouselList: [], //轮播列表
			bastList: [], //精品推荐列表
			page: 1,
			limit: 10,
			loadingType: 'more' //加载更多状态
		};
	},
	computed: {
		...mapState(['loginInterceptor']),
		...mapState('user', ['hasLogin', 'userInfo'])
	},
	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
	},
	onReachBottom() {
		this.loadData();
	},
	onShow: function() {
		// 判断是否强制登录
		if (this.loginInterceptor && !this.hasLogin) {
			// 登录拦截
			interceptor();
		}
		this.productname = '';
		this.loadingType = 'more';
		this.page = 1;
		this.bastList = []; //精品推荐列表
		this.loadData();
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData();
	},
	methods: {
		navTo(url) {
			if (!this.hasLogin) {
				// 保存地址
				saveUrl();
				// 登录拦截
				interceptor();
			} else {
				uni.navigateTo({
					url
				});
			}
		},
		// 监听切换事件
		listChange(e) {
			this.checkid = e.detail.current;
		},
		// 點擊搜索框
		clickSearch() {
			this.bastList = [];
			this.page = 1;
			this.limit = 10;
			this.loadingType = 'more';
			this.loadData();
		},
		// 请求载入数据
		async loadData() {
			let obj = this;
			loadIndexs({})
				.then(({ data }) => {
					let goods = data.info;
					this.carouselList = data.banner;
					this.swiperLength = this.carouselList.length;
					if (obj.loadingType == 'nomore' || obj.loadingType == 'loading') {
						return;
					}
					obj.loadingType = 'loading';
					getProducts({
						page: obj.page,
						limit: obj.limit,
						set_vip: 1,
						keyword: obj.productname
					})
						.then(({ data }) => {
							obj.bastList = obj.bastList.concat(data);
							//判断是否还有下一页，有是more  没有是nomore
							if (obj.limit == data.length) {
								obj.page++;
								obj.loadingType = 'more';
							} else {
								obj.loadingType = 'nomore';
							}
							uni.stopPullDownRefresh();
						})
						.catch(e => {
							console.log(e);
						});
				})
				.catch(e => {
					uni.stopPullDownRefresh();
				});
		},
		//轮播图切换修改背景色
		swiperChange(e) {
			const index = e.detail.current;
			this.swiperCurrent = index;
			this.titleNViewBackground = this.carouselList[index].background;
		},
		//详情页
		navToDetailPage(item) {
			let id = item.id;
			uni.navigateTo({
				url: '/pages/product/product?id=' + id + '&isPao=1'
			});
		},

		// 轮播图跳转
		bannerNavToUrl(item) {
			// #ifdef H5
			if (item.wap_url.indexOf('http') > 0) {
				window.location.href = item.wap_url;
			}
			// #endif
			//测试数据没有写id，用title代替
			uni.navigateTo({
				url: item.wap_url
			});
		}
	}
};
</script>

<style lang="scss">
page {
	.cate-section {
		position: relative;
		z-index: 5;
		border-radius: 16rpx 16rpx 0 0;
		margin-top: -20rpx;
	}
}

page {
	background: #f7f8f7;
}
.top-search {
	height: 80rpx;
	padding: 0 20rpx;
	background-color: #fff;
	.search-box {
		justify-content: center;
		width: 698rpx;
		height: 60rpx;
		background: #eeeeee;
		// box-shadow: 0px 10rpx 20rpx 0px rgba(4, 114, 69, 0.22);
		border-radius: 30rpx;

		.search {
			width: 34rpx;
			height: 34rpx;
		}

		.search-font {
			width: 500rpx;
			margin-left: 14rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #cbcbcb;
		}
	}
}
// 顶部轮播图
.top-swiper {
	width: 750rpx;
	height: 360rpx;
	// margin: 20rpx 0 0;
	image {
		width: 750rpx;
		height: 360rpx;
	}
}
.swiper-btm {
	height: 60rpx;
	width: 750rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
	font-size: 21rpx;
	font-weight: 500;
	color: #333333;
	.btm-item {
		flex-grow: 1;
		justify-content: center;
		image {
			width: 25rpx;
			height: 25rpx;
			margin-right: 14rpx;
		}
	}
}
/* 分类 */
.cate-section {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	padding: 30rpx 22rpx;
	.cate-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: $font-sm + 2rpx;
		color: $font-color-dark;
	}
	/* 原图标颜色太深,不想改图了,所以加了透明度 */
	image {
		width: 88rpx;
		height: 88rpx;
		margin-bottom: 14rpx;
		border-radius: 50%;
		opacity: 0.7;
	}
}
/*公用边框样式*/
%icon {
	margin-right: 10rpx;
	display: inline-block;
	padding: 2rpx 10rpx;
	border: 1rpx solid $color-yellow;
	color: $color-yellow;
	line-height: 1;
	font-size: $font-base;
	border-radius: 10rpx;
}
.vheigh {
	height: var(--status-bar-height);
}

/* 猜你喜欢 */
.guess-section {
	display: flex;
	flex-wrap: wrap;
	padding: 0 30rpx;
	.guess-item {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		width: 48%;
		margin-bottom: 4%;
		border-radius: $border-radius-sm;
		background-color: white;
		box-shadow: $box-shadow;
		&:nth-child(2n + 1) {
			margin-right: 4%;
		}
	}
	.image-wrapper {
		width: 100%;
		height: 330rpx;
		border-radius: 3px;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}
	.title {
		font-size: $font-base;
		color: $font-color-dark;
		font-weight: bold;
		line-height: 80rpx;
	}
	.price {
		font-size: $font-lg;
		color: $font-color-base;
		font-weight: bold;
		line-height: 1;
		line-height: 80rpx;
	}

	.icon {
		@extend %icon;
	}

	.detail {
		line-height: 1;
	}
	.tip {
		color: white;
		background-color: $color-yellow;
		line-height: 1.5;
		font-size: $font-sm;
		padding-left: 20rpx;
	}
}

// 推荐
.recommend {
	width: 95%;
	height: 155rpx;
	margin: 0rpx auto;
	padding-top: 30rpx;
	font-size: 26rpx;
	text-align: center;
	color: #333333;
	align-items: flex-start;

	.recommend_list {
		width: 33%;
	}
	.re_title {
		font-size: 32rpx;
		font-weight: bold;
	}
	.re_name {
		color: #999999;
		padding-top: 10rpx;
	}
	.selected_icon {
		width: 25rpx;
		height: 10rpx;
		margin: 0px auto;
		display: none;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.active {
		display: block;
	}
	.active_color {
		color: #dc4d46 !important;
	}
}

// 列表
.list-box-h {
	height: 1550rpx;
}
// 优惠券
.coupon-list {
	display: inline-block;
}
.row {
	border-radius: 15rpx;
	margin: 25rpx;
	height: 155rpx;
	// width: 552rpx;
	overflow: hidden;
	background-color: #ffffff;
	padding-right: 25rpx;
	.list-interval {
		border: 1px dashed $border-color-light;
		height: 100%;
		.top,
		.bottom {
			border-radius: 100rpx;
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			background-color: $page-color-base;
			right: -15rpx;
		}
		.top {
			top: -18rpx;
		}
		.bottom {
			bottom: -18rpx;
		}
	}
	.list-money {
		height: 100%;
		min-width: 155rpx;
		text-align: center;
		image {
			height: 100%;
			width: 20rpx;
		}
		.list-money-text {
			flex-grow: 1;
			padding: 0 25rpx;
			.tit {
				text-align: center;
				padding: 15rpx 0rpx;
				font-size: 55rpx;
				color: $color-red;
				font-weight: bold;
				&.noAction {
					color: $font-color-light;
				}
			}
			.price {
				padding-bottom: 25rpx;
				color: $font-color-light;
			}
		}
	}
	.row_list_right {
		// flex-grow: 1;
		min-width: 200rpx;
		padding-left: 25rpx;
		line-height: 1;
		.right_time {
			padding: 10rpx 0rpx;
			color: $font-color-light;
			font-size: $font-sm;
		}
		.right_top {
			margin: 15rpx 0;
			.right_name {
				font-size: $font-base;
				color: #bc253a;
				font-weight: bold;
			}
			.right_title {
				font-size: $font-base;
				color: $font-base;
				font-weight: bold;
				&.noAction {
					color: $font-color-light;
				}
			}
		}
	}
	.right_use {
		margin: 15rpx 0;
		padding: 10rpx;
		width: 160rpx;
		text-align: center;
		color: #fff;
		background-color: #bc253a;
		border-radius: 50rpx;
		font-size: $font-sm;
		&.noAction {
			background-color: $font-color-light;
		}
	}
	.iconlocation {
		font-size: 36rpx;
		color: $font-color-light;
	}
}
.guess-section-box {
	margin-top: 20rpx;
	width: 750rpx;
	background: #fff;
	padding-top: 30rpx;
	.guess-section-title {
		width: 450rpx;
		height: 30rpx;
		margin: 0 auto 36rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>