myc/pages/shoping/list.vue

<template>
	<view class="content">
		<view class="varHeight"></view>
		<block :key="ind" v-for="(lss, ind) in list">
			<view class="goodsList-item flex" v-if="lss.show" @click="navProduct(lss)">
				<image :src="lss.logo" lazy-load mode="scaleToFill"></image>
				<view class="goodsList-content">
					<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>
</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;
	image {
		flex-shrink: 0;
		border-radius: $border-radius-sm;
		height: 180rpx;
		width: 180rpx;
	}
	.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;
		.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>