xxl/pages/shop/shopList.vue

<template>
	<view class="content">
		<view class="search-top">
			<view class="search flex">
				<view class="shop-name clamp">椒江区</view>
				<image class="shop-jt" src="../../static/icon/dsjh.png" mode=""></image>
				<view class="input-box flex">
					<view class=" input-content flex">
						<image src="../../static/icon/search-h.png" mode="" class=""
							style="width: 32rpx;height: 32rpx;"></image>
						<view class="input"><input type="text" value="输入关键字搜索" /></view>
					</view>
				</view>
				<view class="search-tit" @click.stop="clickSearch">搜索</view>
			</view>
			<view class="shop">
				<view class="shop-title">
					<view class="shop-item">
						<view class="sitem-font">智能排序</view>
						<image class="jt-down" src="../../static/index/index06.png" mode=""></image>
					</view>
					<view class="shop-item">
						<view class="sitem-font">位置距离</view>
						<image class="jt-down" src="../../static/index/index06.png" mode=""></image>
					</view>
					<view class="shop-item">
						<view class="sitem-font">折扣优惠</view>
						<image class="jt-down" src="../../static/index/index06.png" mode=""></image>
					</view>
					<!-- <view class="shop-item">
						<view class="sitem-font">筛选</view>
						<image class="jt-down" src="../../static/index/index06.png" mode=""></image>
					</view> -->
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{'height': height}" class="shop-list-wrap">
			<view class="djq-wrap flex f-ai-s" v-for="item in 10">
				<image src="../../static/error/errorImage.jpg" mode="" class="djq-img"></image>
				<view class="djq-right pl20">
					<view class="djq-tit flex f-j-sb f-ai-s">
						<view class="djq-name clamp">
							岭上会推拿SPA岭上会推拿SPA岭上会推拿SPA岭上会推拿SPA岭上会推拿SPA
						</view>
						<view class="djq-dis">
							<image src="../../static/icon/dw.png" mode=""></image>
							距离0.3KM
						</view>
					</view>
					<view class="flex f-d-c f-j-sb f-ai-s fg1" style="height: 110rpx;">
						<view class="djq-dz clamp2">
							椒江区市府大道200号椒江区市府大道200号椒江区
						</view>
						<view class="djq-hd flex f-j-sb">
							<view class="buy-info">
								1425人已购买
							</view>
							<view class="hd-btn">
								<image src="../../static/icon/call.png" mode="" style="margin-right: 15rpx;"
									@click="makeCall()"></image>
								<image src="../../static/icon/dh.png" mode="" @click="dh()"></image>
							</view>
						</view>
					</view>
					<view class="" style="padding: 10rpx 0 0 0;">
						<view class="left-btm flex f-j-s" v-for="itemt in 3">
							<view class="j-logo">
								券
							</view>
							<view class="j-price">
								<text>￥</text>25
							</view>
							<view class="j-zk">
								5.8折
							</view>
							<view class="j-name">
								50元代金券
							</view>
						</view>
					</view>

				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: '',
				loadingType: 'more'
			}
		},
		onLoad() {

		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {
			var obj = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.shop-list-wrap').boundingClientRect();
					query.exec(function(res) {
						obj.height = resu.windowHeight - res[0].top + 'px';
					});
				},
				fail: res => {}
			});
		},
		methods: {
			// 拨打电话
			makeCall() {

			},
			// 导航
			dh() {

			}
		}
	}
</script>

<style lang="scss">
	.search-top {
		// position: fixed;
		// top: 0;
		// z-index: 99;
	}

	.search {
		justify-content: flex-start;
		padding: 10rpx 32rpx 20rpx;
		align-items: center;
		background-color: #fff;

		.address {
			width: 32rpx;
			height: 38rpx;
		}

		.shop-name {
			height: 38rpx;
			position: relative;
			top: -4rpx;
			z-index: 100;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666;
			padding-left: 10rpx;
		}

		.shop-jt {
			margin-left: 8rpx;
			width: 16rpx;
			height: 10rpx;
		}

		.input-box {
			margin-left: 10rpx;
			position: relative;
			z-index: 99;
			width: 520rpx;
			height: 60rpx;
			// background: rgba(255, 255, 255, 0.4);
			border-radius: 30rpx;

			.input-content {
				position: relative;
				z-index: 11;
				// border-radius: 99rpx;
				flex-grow: 1;
				padding: 5rpx 30rpx;
				background: #f6f6f6;

				.iconsearch {
					font-size: 50rpx;
					color: #ffffff;
				}

				.input {
					margin-left: 19rpx;
					flex-grow: 1;
					color: #666;
					background: #f6f6f6;

					input {
						font-size: 28rpx;
					}
				}
			}

			.input-button {
				padding-left: 20rpx;
				// font-size: $font-base;
				height: 100%;
			}
		}

		.search-tit {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			flex-shrink: 0;
			padding-left: 10rpx;
		}
	}

	.shop {
		// margin-top: 20rpx;
		background: #ffffff;
		padding: 0 12rpx;

		.shop-title {
			padding: 30rpx 0 20rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #e3e6e7;

			.shop-item {
				width: 33%;
				display: flex;
				align-items: center;
				justify-content: center;

				.sitem-font {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.jt-down {
					width: 10rpx;
					height: 8rpx;
					margin-left: 12rpx;
				}
			}
		}
	}

	.shop-list-wrap {
		// background-color: red;
		padding-top: 20rpx;
	}

	.djq-wrap {
		width: 701rpx;
		// height: 255rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 27rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 20rpx;
		margin: 0 auto 20rpx;
		padding: 23rpx 22rpx;

		&:last-of-type {
			margin-bottom: 0;
		}

		.djq-img {
			flex-shrink: 0;
			width: 150rpx;
			height: 150rpx;
			border-radius: 10rpx;
		}

		.djq-right {
			flex-grow: 1;

			.djq-tit {
				font-size: 34rpx;
				font-weight: bold;
				color: #333333;
				line-height: 52rpx;

				.djq-name {
					max-width: 300rpx;
				}

				.djq-dis {
					flex-shrink: 0;

					image {
						width: 20rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}

					font-size: 22rpx;
					font-weight: 500;
					color: #666666;
				}
			}

			.djq-dz {
				width: 100%;
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
			}

			.djq-hd {
				width: 100%;
				border-bottom: 1rpx solid #EAECED;

				.buy-info {
					display: inline-block;
					height: 32rpx;
					border-radius: 16rpx 16rpx 16rpx 0px;
					line-height: 32rpx;
					font-size: 20rpx;
					font-weight: 500;
					color: #FF440D;
					padding: 0 15rpx;
					background-color: #fcf3f0;
				}

				.hd-btn {
					image {
						width: 46rpx;
						height: 46rpx;
					}
				}
			}
		}
	}

	.left-btm {
		height: 50rpx;

		.j-logo {
			width: 32rpx;
			line-height: 33rpx;
			background: linear-gradient(-48deg, #FFA30B, #FFD158);
			border-radius: 13rpx;
			font-size: 21rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
		}

		.j-price {
			font-size: 27rpx;
			font-weight: bold;
			color: #FF4C4C;
			margin: 0 10rpx 0 5rpx;
		}

		.j-zk {
			height: 31rpx;
			border: 1rpx solid #FF4C4C;
			border-radius: 7rpx;
			line-height: 31rpx;
			padding: 0 8rpx;
			font-size: 20rpx;
			font-weight: bold;
			color: #FF4C4C;
			margin-right: 5rpx;
		}

		.j-name {
			font-size: 23rpx;
			font-weight: bold;
			color: #333333;
		}
	}
</style>