myc/pages/shoping/list.vue

<template>
	<view class="content">
		<view class="varHeight"></view>
		<view class="jg" style="height: 20rpx;"></view>
		<block :key="ind" v-for="(lss, ind) in list">
			<view class="goodsList-item" v-if="lss.show" @click="navProduct(lss)">
				<view class="info-top flex">
					<image :src="lss.logo" lazy-load mode="scaleToFill"></image>
					<view class="store-name clamp2">
						{{lss.title}}
					</view>
				</view>
				<view class="tag">
					门店
				</view>
				<view class="goodsList-content">
					<view class="info-tit">地区：<text class="info-val">{{lss.address}}</text></view>
					<view class="info-tit">电话：<text class="info-val">{{lss.tel }}</text></view>
					<view class="info-tit">地址：<text class="info-val">{{lss.detailed_address}}</text></view>
					<!-- <view class="title clamp">
						<text>{{ lss.title }}</text>
					</view>
					<view class="slider flex">
						<view class="sales-nub">简介：{{ lss.info }}</view>
					</view>
					<view class="goods-money flex">
						<view class="money-box">
							<view class="otMoney-box">
								<text class="otMoney">{{ lss.address }}</text>
							</view>
						</view>
						<view class="cart seckill-action">进入店铺</view>
					</view> -->
				</view>
			</view>
		</block>
		<view class="jg" style="height: 20rpx;"></view>
	</view>
</template>
<script>
import { getShoping } from '@/api/shoping.js';
export default {
	data() {
		return {
			// 当前选中的滑块
			list: [],
			keyword: '' //查询中的内容
		};
	},
	watch: {
		keyword(newValue, oldValue) {
			this.keyword = newValue;
			console.log(newValue);
			this.search();
		}
	},
	onLoad() {
		this.getShoping();
	},
	// #ifndef MP
	// 点击键盘搜索事件
	onNavigationBarSearchInputConfirmed(e) {
		this.search();
	},
	// 搜索栏内容变化事件
	onNavigationBarSearchInputChanged(e) {
		this.keyword = e.text;
	},
	// #endif
	methods: {
		// 查询店铺信息
		search(title) {
			let obj = this;
			obj.list.forEach(e => {
				if (e.title.indexOf(obj.keyword) >= 0) {
					e.show = true;
				} else {
					e.show = false;
				}
			});
		},
		// 跳转店铺页面
		navProduct(item) {
			uni.navigateTo({
				url: './index?merid=' + item.id
			});
		},
		//获取商店信息
		getShoping() {
			let obj = this;
			getShoping({
				mer_id: 0
			})
				.then(function({ data }) {
					obj.list = data.map(e => {
						e.show = true;
						return e;
					});
				})
				.catch(e => {
					console.log(e);
				});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	height: 100%;
}
.varHeight {
	height: var(--status-bar-height);
}
$slider-color: #fe9398; //滑块左侧颜色
.goodsList-item {
	// background-color: #ffffff;
	// padding: 30rpx;
	// border-bottom: 1px solid $border-color-light;
	margin: 0 auto 20rpx;
	width: 710rpx;
	height: 231rpx;
	padding: 25rpx 20rpx;
	background: #FFFFFF;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 10rpx;
	position: relative;
	.tag {
		width: 60rpx;
		line-height: 40rpx;
		background: #FF6F0F;
		border-radius: 5rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		top: 25rpx;
		right: 20rpx;
	}
	.info-top {
		justify-content: flex-start;
		.store-name {
			max-width: 500rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			padding-left: 11rpx;
		}
	}
	image {
		flex-shrink: 0;
		// border-radius: $border-radius-sm;
		// height: 180rpx;
		// width: 180rpx;
		width: 65rpx;
		height: 65rpx;
		border-radius: 50%;
	}
	.slider {
		margin-top: 15rpx;
		justify-content: flex-start;
		.slider-box {
			width: 196rpx;
			border-radius: 99px;
			border: 1px solid $slider-color;
			height: 16rpx;
			.slider-action {
				background-color: $slider-color;
				height: 100%;
			}
		}
		.sales-nub {
			color: $font-color-light;
			font-size: 24rpx;
			height: 2.5em;
			overflow: hidden;
		}
	}
	.goodsList-content {
		// margin-left: 20rpx;
		flex-grow: 1;
		// height: 180rpx;
		position: relative;
		padding-top: 20rpx;
		.info-tit {
			line-height: 1.5;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			.info-val {
				font-weight: 500;
				
			}
		}
		.title {
			font-size: $font-base;
			color: $font-color-dark;
			font-weight: 500;
			width: 0;
			min-width: 100%;
		}
		.goods-money {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			.money-box {
				.money {
					font-size: $font-lg + 10rpx;
					color: $color-red;
					font-weight: bold;
				}
				.otMoney-box {
					font-size: $font-sm;
					.otMoney {
						color: $font-color-light;
						padding-right: 20rpx;
					}
					.sales {
						color: $font-color-light;
					}
				}
			}
			.cart {
				font-size: $font-base - 2rpx;
				border-radius: 99px;
				padding: 10rpx 20rpx;
				line-height: 1;
				color: #ffffff;
				background-color: $color-gray;
				&.seckill-action {
					border: 1px solid $color-red;
					background-color: $color-red;
				}
			}
		}
	}
}
</style>