Huanyuyuehui/pages/shop/index.vue

<template>
	<view class="content">
		<view class="top-tab">
			<view class="tab-location">
				北京
				<view class="iconfont icon-dingwei"></view>
			</view>
			商家联盟
			<view class="tab-sao iconfont icon-saoma" @tap='handleBorcode'></view>
		</view>
		<view class="content-map" >
			<map class="map" :latitude="22.547" :longitude="114.085947"></map>
		</view>
		<view class="content-type">
			<view class="type-item">
				<image class="type-item-img" src="@/static/images/shop/tab1.png" mode=""></image>
				<text class="type-item-text">餐饮美食</text>
			</view>
			<view class="type-item">
				<image class="type-item-img" src="@/static/images/shop/tab2.png" mode=""></image>
				<text class="type-item-text">丽人美妆</text>
			</view>
			<view class="type-item">
				<image class="type-item-img" src="@/static/images/shop/tab3.png" mode=""></image>
				<text class="type-item-text">休息娱乐</text>
			</view>
			<view class="type-item">
				<image class="type-item-img" src="@/static/images/shop/tab4.png" mode=""></image>
				<text class="type-item-text">运动健身</text>
			</view>
			<view class="type-item">
				<image class="type-item-img" src="@/static/images/shop/tab5.png" mode=""></image>
				<text class="type-item-text">婚庆服务</text>
			</view>
			<view class="type-item">
				<image class="type-item-img" src="@/static/images/shop/tab6.png" mode=""></image>
				<text class="type-item-text">亲子</text>
			</view>
			<view class="type-item">
				<image class="type-item-img" src="@/static/images/shop/tab7.png" mode=""></image>
				<text class="type-item-text">教育培训</text>
			</view>
			<view class="type-item">
				<image class="type-item-img" src="@/static/images/shop/tab8.png" mode=""></image>
				<text class="type-item-text">汽车服务</text>
			</view>
			<view class="type-item">
				<image class="type-item-img" src="@/static/images/shop/tab8.png" mode=""></image>
				<text class="type-item-text">家装</text>
			</view>
			<view class="type-item">
				<image class="type-item-img" src="@/static/images/shop/tab10.png" mode=""></image>
				<text class="type-item-text">生活服务</text>
			</view>
		</view>
		<view class="content-list">
			<view class="list-tab">
				<view :class="current==0?'action':''" @click="selectCurrent(0)">全部商家</view>
				<view :class="current==1?'action':''" @click="selectCurrent(1)">附近商家</view>
			</view>
			<view class="list-container">
				<view class="list-item" v-for="(item,index) in 20" :key='index'>
					<view class="list-item-left">
						<image src="../users/static/images/level_avatar.png" mode=""></image>
					</view>
					<view class="list-item-right" @click="navtoDetail()">
						<view class="item-title">
							特色餐厅（福田店）
						</view>
						<view class="item-content">
							<view class="right-center-left">
								<view class="center-left-score">
									<text class="iconfont icon-kongxinxing"></text>
									<!-- <text class="iconfont icon-kongxinxing">★</text> -->
									<text>4.7分</text>
								</view>
								<view class="center-left-time">营业时间：12:00-24:00</view>
							</view>
							<view class="right-center-right">
								去选购
							</view>
						</view>
						<view class="item-address">
							<view class="address">深圳市福田区购物公园cocopark购物中心</view>
							<view class="distance">100.23km</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		components:{
			
		},
		data(){
			return{
				 tabList:[],
				 current:0,
			}
		},
		onLoad(){
		},
		methods:{
			handleBorcode() {
				// 从相机和相册扫码
				// #ifdef APP-PLUS
				uni.scanCode({
					scanType:['qrCode'],
					success: function (res) {
						console.log('二维码信息：' + res);
					}
				});
				// #endif
			},
			selectCurrent(val){
				this.current=val;
			},
			navtoDetail(){
				uni.navigateTo({
					url:'/pages/shop_details/index'
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	@import url("css/shop.css");
</style>