xinwang/pages/product/construction.vue

<template>
	<view class="store-list">
		<scroll-view scroll-y="true" class="list" @scrolltolower="loadData()">
			<empty v-if="loaded && list.length == 0"></empty>
			<view class="store flex" v-for="item in list">
				<image src="" mode="" class="store-img"></image>
				<view class="store-info">
					<view class="store-name clamp">鑫旺零售台州店鑫旺零售台州店鑫旺零售台州店鑫旺零售台州店鑫旺零售台州店</view>
					<!-- <view class="store-detail">台州市椒江区市府大道120号</view> -->
					<view class="info clamp">鑫旺零售台州店鑫旺零售台州店</view>
					<view class="price-box">
						<view class="new-price">
							¥160.00
							<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';
export default {
	components: {
		uniLoadMore,
		empty
	},
	data() {
		return {
			list: [1, 2, 3],
			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: {
		//获取门店list
		loadData() {
			let obj = this;
			if (obj.loadingType == 'loading') {
				return;
			}
			if (obj.loadingType == 'noMore') {
				return;
			}
		}
	}
};
</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>