hyshop/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="chooseStore(lss)">
				<view class="info-top flex">
					<image :src="lss.image" lazy-load mode="scaleToFill"></image>
					<view class="store-name clamp2">
						{{lss.name}}
					</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.phone }}</text></view>
					<view class="info-tit">地址：<text class="info-val">{{lss.detailed_address}}</text></view>
				</view>
			</view>
		</block>
		<uni-load-more :status="loadingType"></uni-load-more>
		<view class="jg" style="height: 20rpx;"></view>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { store_list } from '@/api/index.js';
export default {
	data() {
		return {
			// 当前选中的滑块
			page: 1,
			limit: 10,
			loadingType: 'more',
			list: [],
			keyword: '' ,//查询中的内容
			type: 0,//3->开通会员选择门店  4->自提选择门店  5->附近门店进入不做任何操作
		};
	},
	watch: {
		keyword(newValue, oldValue) {
			this.keyword = newValue;
			console.log(newValue);
			this.search();
		}
	},
	computed: {
		...mapState(['latitude','longitude'])
	},
	onLoad(opt) {
		if(opt.type) {
			this.type = opt.type
			
		}
		this.getShoping();
	},
	onReachBottom() {
		this.getShoping();
	},
	// #ifndef MP
	// 点击键盘搜索事件
	onNavigationBarSearchInputConfirmed(e) {
		this.search();
	},
	// 搜索栏内容变化事件
	onNavigationBarSearchInputChanged(e) {
		this.keyword = e.text;
	},
	// #endif
	methods: {
		...mapMutations(['setLat', 'setLon','setStoreInfo']),
		// 查询店铺信息
		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;
			console.log(obj.longitude,obj.latitude)
			if(obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
				return 
			}
			obj.loadingType = 'loading'
			store_list({
				page: obj.page,
				limit: obj.limit
			})
				.then(function({ data }) {
					console.log(data)
					let arr = data.list.map(e => {
						e.show = true;
						return e;
					});
					obj.list = obj.list.concat(arr)
					obj.page++
					if(obj.limit == data.list.length) {
						obj.loadingType = 'more'
					}else {
						obj.loadingType = 'noMore'
					}
				})
				.catch(e => {
					console.log(e);
				});
		},
		//选择门店
		chooseStore(item) {
			if(this.type == 3) {
				this.$api.prePage().storeInfo = item
				uni.navigateBack({
					
				})
			}else if(this.type == 4) {
				this.$api.prePage().shopAddress = item
				uni.navigateBack({
					
				})
				
			}else if(this.type == 5) {
				
			}else {
				this.setStoreInfo(item)
				uni.navigateBack({
					
				})
			}
			
		}
	}
};
</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>