lhyt_shop_applet/XCX-Shop/pages/serve/index.vue

<template>
	<view class="body">
		<view class="search">
			<p>
				<image style="width: 5vw; height: 5vw; margin-top: 1vw; " src="../../static/search.png"></image>
			</p>
			<p style="margin-left: 2vw;"> <input style="font-size: 0.75rem; width: 60vw; height: 10vw;" v-model="StoreName"
					type="text" name="" id=""  @input="getStore" placeholder="搜索门店"> </p>
		</view>
		<view class="content_up">
			<view
				style=" width: 100vw; height: 7vw; font-size: 0.9rem; font-weight: 550; padding-left: 8vw; padding-top: 2vw;">
				门店
			</view>
		<!-- 	<scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="refresherTriggered"
				@refresherrefresh="refresherrefresh" @scrolltolower="scrolltolowerEvent(event)"
				lower-threshold="100">
			</scroll-view> -->
			<view class="content_con">
				<view class="model" v-for="(item,index) in StoreList " :key="index" @click="goDetial(item)">
						<view style="display: flex;">
							<view> <image style="width: 25vw; height: 25vw;" :src="item.img.url" mode=""></image> </view>
							<view  style="width: 63vw; box-sizing: border-box; padding-left:3vw;">
								<p style="font-size: 0.9rem; font-weight: 550;">{{item.name}}</p>
								<view style=" font-size: 0.8rem; margin-top: 2vw;"> <span style="color: #696969;" >主营品牌:</span> <span style="color: #696969;">大众</span> </view>
								<view style="display: flex; margin-left: -2vw; margin-top: 2vw;">
									<p> <image style="width: 3vw; height: 3vw;" src="../../static/dingwei.png" mode=""></image> </p>
								<p style=" width: 60vw; display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical; font-size: 0.75rem; color: #696969;">{{item.addr}}</p>
								</view>
							</view>
						</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
			StoreList:[],
				StoreName:''
			}
		},
		onTabItemTap(e){
			this.getStore()
		},
		methods:{
			goDetial(item){
				uni.navigateTo({
					url:'/pages/serve/detial?detialInfo='+encodeURIComponent(JSON.stringify(item))
				})
			},
			getStore(){
				this.$api.getStoreList(this.StoreName,res=>{
					this.StoreList=res.data
			})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.body{
		width: 100vw;
		height: 100vh;
		background-color: #f8f8f8;
		box-sizing: border-box;
		padding: 0 4vw;
		overflow: hidden;
		.search {
			box-sizing: border-box;
			padding: 0 4vw;
			width: 90vw;
			height: 12vw;
			border-radius: 7vw;
			background-color: white;
			display: flex;
			margin-top: 1vw;
			align-items: center;
		}
		.content_up {
			width: 92vw;
			height: 93vh;
		
			.content_con {
				width: 92vw;
				height: 92vh;
				overflow-y: auto;
		
			.model{
				width: 92vw;
				height: 29vw;
				background-color: white;
				box-sizing: border-box;
				padding: 2vw;
				border-radius: 5px;
				margin-top: 1vw;
			}
			}
		}
	}
</style>