spark-sale/pagesMain/venueMore.vue

<template>
	<view class="content">
		<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>
	import {
		mapGetters
	} from 'vuex'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	
	export default {
		data() {
			return {
				venueList: []
			}
		},
		computed: {
			...mapGetters([
				'handleCustomStyle',
			])
		},
		onLoad() {
			// 附件场馆
			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)
			})
		},
		methods: {
			//  跳转场馆详情
			goToVenueDetail(item) {
				uni.navigateTo({
					url: '/pagesMain/venueDetail?id=' + item.id
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/themes.scss";
	
	.content {
		width: 100%;
		float: left;
		
		.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>