caimei-applets-caimei/h5/pages/activity/meobohui-booth.vue

<template>
	<view class="container home clearfix">
		<!-- 展位图 -->
		<view class="container-page clearfix">
			<view class="tui-group-list">
				<view class="floor-item-booth" v-for="(booths,index) in boothList" :key="index"  @click="previewImg(index)">
					<view class="floor-item-booth-image">
						<image :src="booths.image" class="floor-item-image" mode="" ></image>
					</view>
					<view class="floor-item-text">
						<view class="floor-item-p one">{{booths.name}}</view>
						<view class="floor-item-p two">展位号：{{booths.num}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 侧边 -->
		<scroll-top :isScrollTop="isScrollTop" :bottom="50"></scroll-top>
	</view>
</template>

<script>
	import authorize from '@/common/config/authorize.js'
	import pageFloor from '@/components/cm-module/homeIndex/pageFloor.vue'
	import supplierList from '@/components/cm-module/homeIndex/supplierList.vue'
	import { mapState,mapMutations} from 'vuex';
	var isPreviewImg;
	export default {
		components:{
			pageFloor,
			supplierList,
		},
		data() {
			return {
				userID:0,
				current:0,
				mode:'round',
				modallayer:false,
				isLogin:false,
				skeletonShow: true,
				boothList:[
					{image:'http://static.caimei365.com/app/meibohui/meibo_img_02.jpg',name:'GMS(可现场体验)',num:'B区 12.2馆C31'},
					{image:'http://static.caimei365.com/app/meibohui/meibo_img_03.jpg',name:'优斐斯',num:'A区 4.2号馆A31'},
					{image:'http://static.caimei365.com/app/meibohui/meibo_img_04.jpg',name:'唯美概念(可现场体验)',num:'B区 12.2馆B41'},
					{image:'http://static.caimei365.com/app/meibohui/meibo_img_05.jpg',name:'美生美(可现场体验)',num:'B区 12.2馆B39'},
					{image:'http://static.caimei365.com/app/meibohui/meibo_img_06.jpg',name:'品辉(可现场体验)',num:'B区 11.2馆H49'},
					{image:'http://static.caimei365.com/app/meibohui/meibo_img_07.jpg',name:'和创元(可现场体验)',num:'B区 11.2馆F41'},
					{image:'http://static.caimei365.com/app/meibohui/meibo_img_08.jpg',name:'瑞恺迪(可现场体验)',num:'B区 12.2 馆E40'},
					{image:'http://static.caimei365.com/app/meibohui/meibo_img_09.jpg',name:'塑美颜(可现场体验)',num:'B区11.2 D41'},
					{image:'http://static.caimei365.com/app/meibohui/meibo_img_10.jpg',name:'塑美颜(可现场体验)',num:'B区13.2 K29'}
				],				
				productImage:[],
				isScrollTop:false,

			}
		},
		onLoad() {
			//处理商品图片列表
			this.boothList.forEach(item =>{
				this.productImage.push(item.image);
			})
		},
		computed: {
			...mapState(['hasLogin','userInfo','identity','isActivity'])
		},
		methods: {
			...mapMutations(['login','logout']),
			previewImg (index) {//顶部商品图片预览
				isPreviewImg = true
				let previewUrls = this.productImage
				uni.previewImage({
					current: index, 	//图片索引
					urls: previewUrls, //必须是http图片，本地图片无效
					longPressActions:''
				})
			},
		},
		onPageScroll(e){//实时获取到滚动的值
			if(e.scrollTop>400){
				this.isScrollTop = true
			}else{
				this.isScrollTop = false
			}	
		},
		onPullDownRefresh() {//下拉刷新
			uni.stopPullDownRefresh()
		},
		onShareAppMessage(res){//分享转发
			if (res.from === 'button') {
		      // 来自页面内转发按钮
		    }
			return {
			  title: '生美医美正品采购服务平台',
			  path: '/h5/pages/activity/meobohui',
			  imageUrl:'https://static.caimei365.com/app/img/bg/min-banner.jpg'
			}
		},
		onShow(){
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F7F7;
	}
	.container-page{
		background-color: #F7F7F7;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding:24rpx;
		float: left;
	}
	.tui-group-list{
		width: 100%;
		height: auto;
		.floor-item-booth{
			width: 339rpx;
			height: 382rpx;
			float: left;
			margin-right: 24rpx;
			margin-bottom: 24rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			&:nth-child(2n){
				margin-right: 0;
			}
			.floor-item-booth-image{
				width: 100%;
				height: 240rpx;
				.floor-item-image{
					width: 100%;
					height: 100%;
					display: block;
					border-radius: 16rpx 16rpx 0 0;
				}
			}
			.floor-item-text{
				width: 100%;
				height: 142rpx;
				box-sizing: border-box;
				padding: 31rpx 16rpx;
				.floor-item-p{
					width: 100%;
					line-height: 40rpx;
					text-align: left;
					font-size: $font-size-24;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					&.one{
						color: #333333;
					}
					&.two{
						color: #999999;
					}
				}
			}
		}
	}
	.container-section{
		width: 100%;
		height: auto;
		background-color: #F7F7F7;
	}
</style>