xinwang/pages/product/construction.vue

<template>
	<view class="store-list">
		<scroll-view scroll-y="true" class="list" @scrolltolower="loadData()" :style="{'height': height}">
			<empty v-if="loaded && list.length == 0"></empty>
			<view class="store flex" v-for="item in list" @click="navTo('/pages/product/product?id=' + item.id)">
				<image :src="item.image" mode="" class="store-img"></image>
				<view class="store-info">
					<view class="store-name clamp2">{{item.store_name}}</view>
					<!-- <view class="store-detail">台州市椒江区市府大道120号</view> -->
					<!-- <view class="info clamp">鑫旺零售台州店鑫旺零售台州店</view> -->
					<view class="price-box">
						<view class="new-price">
							{{item.price}}
							<!-- <text class="old-price"> ¥220.00</text> -->
						</view>
					</view>
					<view class="qb-btn">立即购买</view>
				</view>
			</view>
			<uni-load-more :status="loadingType" v-if="list != 0"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
import empty from '@/components/empty';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import {getProducts} from '@/api/product.js'
export default {
	components: {
		uniLoadMore,
		empty
	},
	data() {
		return {
			list: [],
			storeList: [],
			loadingType: 'more',
			page: 1,
			limit: 10,
			height: '', //滚动区域高度
			loaded: false
		};
	},
	onReady(res) {
		var _this = this;
		uni.getSystemInfo({
			success: resu => {
				const query = uni.createSelectorQuery();
				query.select('.list').boundingClientRect();
				query.exec(function(res) {
					console.log(res, 'ddddddddddddd');
					_this.height = resu.windowHeight - res[0].top + 'px';
					console.log('打印页面的剩余高度', _this.height);
				});
			},
			fail: res => {}
		});
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		navTo(url) {
			uni.navigateTo({
				url: url
			})
		},
		//获取施工产品信息
		loadData() {
			let obj = this;
			if (obj.loadingType == 'loading') {
				return;
			}
			if (obj.loadingType == 'noMore') {
				return;
			}
			getProducts({
				page: obj.page,
				limit: obj.limit,
				is_drop: 1
			}).then(({data}) => {
				console.log(data,'is_drop++++++++++++++++')
				let list = data.map(item => {
					return item
				})
				obj.list = obj.list.concat(list)
				obj.page++
				if (obj.limit == data.length) {
					//判断是否还有数据， 有改为 more， 没有改为noMore
					obj.loadingType = 'more';
					return;
				} else {
					//判断是否还有数据， 有改为 more， 没有改为noMore
					obj.loadingType = 'noMore';
				}
				// uni.hideLoading();
				this.$set(obj, 'loaded', true);
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.store-list {
	padding-top: 20rpx;
}
.store {
	margin: 0 auto 20rpx;
	// width: 710rpx;
	// height: 210rpx;
	// background: #ffffff;
	// box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
	// border-radius: 10rpx;
	padding: 40rpx 20rpx;
	justify-content: flex-start;

	width: 710rpx;
	height: 280rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 8rpx;
	.store-img {
		flex-shrink: 0;
		// background-color: red;
		width: 190rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}
	.store-info {
		width: 481rpx;
		height: 100%;
		padding-left: 19rpx;
		position: relative;
		.store-name {
			width: 461rpx;
			padding-top: 10rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.store-detail {
			padding-top: 10rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
		.info {
			padding-top: 20rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FE6A42;
		}
		.qb-btn {
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background: linear-gradient(180deg, #fd4646, #ff3535);
			box-shadow: 0px 2rpx 20rpx 0px rgba(253, 67, 67, 0.5);
			border-radius: 30rpx;
			position: absolute;
			right: 0;
			bottom: 0;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			text-align: center;
		}
		.price-box {
			padding-left: 20rpx;
			display: flex;
			align-items: flex-end;
			height: 42rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			.new-price {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ff0000;
				.old-price {
					display: inline-block;
					padding-left: 8rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					text-decoration: line-through;
					color: #999999;
				}
			}
			
		}
	}
}
</style>