hb/pages/index/integral.vue

<template>
	<view class="center">
		<view class="titleNview-placing"></view>
		<swiper class="banner" autoplay="true" duration="400" interval="5000">
			<swiper-item class="banner-item" v-for="(item, index) in carouselList">
				<image src="../../static/img/jf_banner.png" />
			</swiper-item>
		</swiper>
		<view class="product-box" v-if="integralList.length != 0">
			<view class="product-title">
				<view class="pt-title">精选推荐</view>
				<view class="pt-bg">
					<image src="../../static/img/title.png" mode=""></image>
				</view>
			</view>
			<view class="hotgoods">
				<view class="hotgoods-item" v-for="item in integralList" :key="item.id" @click="navToDetailPage(item)">
					<view class="image-wrapper">
						<!-- <image class="image-bg" src="../../static/img/libao-bg.png" mode=""></image> -->
						<image class="image" :src="item.image" mode="scaleToFill"></image>
					</view>
					<view class="title clamp">{{ item.store_name }}</view>
					<view class="hot-price">
						<view class="price">
							<text class="font-size-sm">￥</text>
							{{ item.price * 1 }} + {{ item.max_integral * 1 }}积分
						</view>
						<!-- <view class="yuanPrice">月销：{{ item.sort }}</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loadIndexs
	} from '@/api/index.js';
	import {
		groomList
	} from '@/api/product.js';
	export default {
		data() {
			return {
				productname: '',
				integralList: [],
				carouselList: [''],
				page: 1,
				limit: 10,
				loadType: 'more'
			};
		},
		onShow: function() {
			// 判断是否强制登录
			// if (!this.hasLogin) {
			// 	// 登录拦截
			// 	interceptor();
			// }
			this.page = 1;
			this.limit = 10;
			this.loadType = 'more';
			this.integralList = [];
			this.loadData();
		},
		methods: {
			navTo(url) {
				if (url == '') {
					this.$api.msg('暂未开通，敬请期待');
				} else {
					uni.navigateTo({
						url,
						fail() {
							uni.switchTab({
								url
							});
						}
					});
				}
			},
			// 请求载入数据
			async loadData() {
				const obj = this;
				if (obj.loadType == 'loading' || obj.loadType == 'noMore') {
					return;
				}
				obj.loadType = 'loading';
				groomList({
					pages: obj.page,
					limit: obj.limit
				}, 5).then(({
					data
				}) => {
					this.integralList = this.integralList.concat(data.list);
					console.log(data.list, '123456');
					if (data.list.length == obj.limit) {
						obj.loadType = 'more';
						obj.page++;
					} else {
						obj.loadType = 'noMore';
					}
				});
			},
			//详情页
			navToDetailPage(item) {
				let id = item.id;
				uni.navigateTo({
					url: '/pages/product/product?id=' + id + '&isjf=1'
				});
			}
		}
	};
</script>

<style lang="scss">
	.center,
	page {
		height: auto;
		min-height: 100%;
	}

	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
	}

	.top-search {
		margin-top: 30rpx;
		height: 80rpx;
		padding: 0 20rpx;

		.search-box {
			position: relative;
			z-index: 2;
			justify-content: center;
			width: 740rpx;
			height: 60rpx;
			background: #fff;
			border-radius: 30rpx;

			.search {
				width: 26rpx;
				height: 30rpx;
			}

			.search-font input {
				width: 500rpx;
				margin-left: 14rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #aaaaaa;
			}
		}
	}

	.banner {
		margin: 20rpx auto 0;
		width: 690rpx;
		height: 350rpx;

		.banner-item {
			width: 690rpx;
			height: 350rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.product-box {
		margin-top: 20rpx;
		background: #ffffff;
		padding: 26rpx 30rpx 20rpx;

		.product-title {
			margin: 0 auto;
			position: relative;
			width: 352rpx;
			display: flex;
			align-items: center;

			.pt-title {
				width: 352rpx;
				text-align: center;
				font-size: 35rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #ff4c4c;
			}

			.pt-bg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 352rpx;
				height: 9rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.hotgoods {
			margin-top: 38rpx;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			padding: 0 0 30rpx;
			border-radius: 14rpx;

			.hotgoods-item {
				width: 48%;
				background-color: #ffffff;
				border-radius: 12rpx;

				&:nth-child(2n + 1) {
					margin-right: 24rpx;
				}

				.image-wrapper {
					width: 100%;
					height: 330rpx;
					border-radius: 3px;
					overflow: hidden;
					position: relative;

					.image-bg {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						width: 100%;
						height: 100%;
						opacity: 1;
						border-radius: 12rpx 12rpx 0 0;
						z-index: 2;
					}

					.image {
						width: 100%;
						height: 100%;
						opacity: 1;
						border-radius: 12rpx 12rpx 0 0;
					}
				}

				.title {
					margin-top: 24rpx;
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.hot-price {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 14rpx 0 10rpx;

					.price {
						margin-left: 10rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #ff1a1a;
					}

					.yuanPrice {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #999999;
					}
				}
			}
		}
	}
</style>