shuzi/pages/index/integral.vue

<template>
	<view class="main">
		<!-- <view class="top-search">
			<input type="text" class="search-key" placeholder="请输入关键字" v-model="keyword" />
			<image src="../../static/icon/search.png" mode="" class="search-logo"></image>
			<view class="search-btn" @click.stop="search">搜索</view>
		</view> -->
		<scroll-view scroll-y="true" :style="{ height: height }" class="scoll-wrap" @scrolltolower="getArticleList()">
			<view class="list-box-h">
				<view v-for="(item, index) in list" :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="flex itemContent">
							<view>
								<view class="price flex">{{ item.result.value[0].price }}元+</view>
								<view class="price">{{ item.result.value[0].integral }}积分</view>
							</view>
							<view class="btn">立即购买</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
import { jfShop } from '@/api/product.js';
export default {
	data() {
		return {
			height: '',
			list: [],
			page: 1,
			limit: 10,
			loadingType: 'more',
			total_pages: 0,
			keyword: ''
		};
	},
	onLoad(opt) {
		this.getArticleList();
	},
	onReachBottom() {
		this.getArticleList();
	},
	onReady(res) {
		var obj = this;
		uni.getSystemInfo({
			success: resu => {
				const query = uni.createSelectorQuery();
				query.select('.scoll-wrap').boundingClientRect();
				query.exec(function(res) {
					console.log(res, 'ddddddddddddd');
					obj.height = resu.windowHeight - res[0].top + 'px';
					console.log('打印页面的剩余高度', obj.height);
				});
			},
			fail: res => {}
		});
	},
	methods: {
		navToDetailPage(item) {
			uni.navigateTo({
				url: '/pages/product/product?id=' + item.id + '&isJF=1'
			});
		},
		getArticleList() {
			let obj = this;
			if (obj.loadingType == 'noMore' || obj.loadingType == 'loading') {
				return;
			}
			obj.loadingType = 'loading';
			jfShop({
				page: obj.page,
				limit: obj.limit
			}).then(({ data }) => {
				console.log(data, 'data');
				obj.list = obj.list.concat(data);
				// obj.total_pages = data.meta.pagination.total_pages
				obj.page++;
				if (obj.page <= obj.total_pages) {
					obj.loadingType = 'more';
				} else {
					obj.loadingType = 'noMore';
				}
				// if (data.length == obj.limit) {
				// 	obj.loadingType = 'more'
				// } else {
				// 	obj.loadingType = 'noMore'
				// }
			});
		},
		search() {
			let obj = this;
			obj.page = 1;
			obj.list = [];
			obj.loadingType = 'more';
			obj.getArticleList();
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
	min-height: 100%;
}

.list-box-h {
	padding: 20rpx;
}

.guess-item {
	padding: 10rpx;
	display: flex;
	min-width: 100%;
	width: 0;
	margin-bottom: 20rpx;
	background: #ffffff;
	border-radius: 10rpx;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);

	image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		flex-shrink: 0;
	}

	.guess-box {
		width: 100%;
		padding: 5px;
		position: relative;
		.itemContent {
			position: absolute;
			width: 100%;
			padding: 20rpx 10rpx;
			bottom: 0;
			right: 0;
		}
		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			height: 2.5em;
			line-height: 1.25em;
		}

		.price-box {
			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: #ff6f0f;
		}

		.btn {
			background: #16cc9f;
			border-radius: 28rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
			float: right;
			padding: 10rpx 20rpx;
		}
	}
}
.top-search {
	width: 750rpx;
	height: 100rpx;
	// padding-top: 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;

	.search-key {
		width: 700rpx;
		height: 70rpx;
		padding-left: 100rpx;
		background: #ffffff;
		box-shadow: 0px 1rpx 5rpx #16cc9f;
		border-radius: 35rpx;
		position: relative;
	}

	.search-logo {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50rpx;
		margin: auto;
	}

	.search-btn {
		width: 150rpx;
		height: 70rpx;
		border-radius: 30rpx;
		color: #16cc9f;
		text-align: center;
		line-height: 70rpx;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 10rpx;
		margin: auto;
		// background-color: red;
		z-index: 9;
	}
}
</style>