spark-student/pagesMember/venueMore.vue

<template>
	<view class="content">
		<view class="filter-box">
			<u-search placeholder="请输入关键字" v-model="filterText" @search="setFilterText" @custom="setFilterText"></u-search>
		</view>
		<view class="venue-box">
			<u-card :head-border-bottom="false" :foot-border-top="false" title-size="32" padding="0" margin="10px" v-for="(item, index) in venueList"
			 :key="index" class="venue-card" @click="goToVenueDetail(item)">
				<view class="venue-content" slot="head" style="padding-top: 10px;">
					<view class="venue-name">{{item.name}}</view>
				</view>
				<view class="venue-content" slot="body">
					<view class="info-text">
						<u-icon name="car"></u-icon>
						距您{{item.distance}}
					</view>
					<view class="info-text">
						<u-icon name="map"></u-icon>
						{{item.address}}
					</view>
				</view>
				<view class="venue-content" slot="foot" style="text-align: right;">
					<u-button type="warning" shape="circle" :ripple="true" :custom-style="handleCustomStyle" size="mini" @click="goToVenueDetail(item)">预约</u-button>
				</view>
			</u-card>
		</view>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	
	export default {
		data() {
			return {
				filterText: '',
				venueList: []
			}
		},
		onLoad() {
			this.getAllVenue()
		},
		methods: {
			//  获取全部场馆
			getAllVenue() {
				// 附件场馆
				NET.request(API.getVenueList, uni.getStorageSync('locationData'), 'POST').then(res => {
					this.venueList = res.data
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
					setTimeout(() => {
						uni.navigateBack()
					},1000)
				})
			},
			//  跳转场馆详情
			goToVenueDetail(item) {
				uni.navigateTo({
					url: '/pagesMember/venueDetail?id=' + item.id
				});
			},
			setFilterText() {
				if(this.filterText) {
					let arr = []
					this.venueList.forEach(item => {
						if(item.name.indexOf(this.filterText) >= 0) {
							arr.push(item)
						}
					})
					this.venueList = arr
				} else {
					this.getAllVenue()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/themes.scss";
	
	.content {
		width: 100%;
		float: left;
		
		.filter-box {
			height: 48px;
			padding: 10px 15px;
			background-color: #FFFFFF;
		}
		
		.venue-box {
			width: 100vw;
			float: left;
		
			/deep/.u-card--border:after {
				border-color: #cccccc;
				border-radius: 15px;
			}
		
			.venue-card {
				min-width: 100vw;
				display: inline-block;
		
				.venue-content {
					padding: 0px 15px 10px 15px;
		
					.venue-name {
						height: 20px;
						font-weight: bold;
						font-size: 15px;
						line-height: 20px;
					}
		
					.info-text {
						color: #999999;
						line-height: 18px;
		
						/deep/.u-icon {
							margin-right: 5px;
							font-size: 14px;
						}
					}
				}
			}
		}
	}
</style>