smart-tourism/smart-ui-app/pages/shop/detail.vue

<template>
	<view class="page">
		<u-swiper :list="item.imgs" :effect3d="true" :height="300"></u-swiper>
		<view class="hotel_item">
			<view class="name">{{ item.name }}</view>
			<view class="address">
				<view class="dz">{{ item.addres }}</view>
			</view>
			<map
				style="width: 100%; height: 100px;margin-top: 20px;border-radius:5px;"
				:latitude="item.lat"
				:longitude="item.lng"
				:markers="[{ latitude: item.lat, longitude: item.lng }]"
			></map>
		</view>
		<view class="hotel_item">
			<view class="v_title">
				<image src="../../static/lo.png" class="lo" mode="widthFix"></image>
				<view class="hd">菜单</view>
			</view>
			<u-grid :col="3" class="cd">
				<u-grid-item>
					<view class="icon" style="background-color: red">&#xe610;</view>
					<view class="grid-text">店铺信息</view>
				</u-grid-item>
				<u-grid-item>
					<view class="icon" style="background-color: red">&#xebb3;</view>
					<view class="grid-text">上报数据</view>
				</u-grid-item>
				<u-grid-item>
					<view class="icon" style="background-color: red">&#xe736;</view>
					<view class="grid-text">房间管理</view>
				</u-grid-item>
				<u-grid-item>
					<view class="icon" style="background-color: red">&#xe705;</view>
					<view class="grid-text">预订订单</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ip: this.$http.urls.ip,
			item: {}
		};
	},
	onLoad(e) {
		this.$http.request({
			url: this.$http.urls.hotelDetail,
			data: { shopId: 30 },
			success: res => {
				this.item = res.data.data;
				this.item.imgs = []; //轮播图
				this.item.showPictures = this.item.showPictures.split(',');
				this.item.showPictures.forEach(item => {
					this.item.imgs.push({ image: this.ip + item });
				});
			}
		});
	},
	methods: {
		dh() {}
	}
};
</script>
<style lang="scss">
.page {
	padding: 12px;
}
.cd {
	margin-top: 10px;
	.icon {
		font-size: 30px;
		padding: 5px 8px;
		background-color: red;
		color: white;
		border-radius: 5px;
	}
}
</style>