<template>
	<view>
		<!-- 状态栏 -->
		<nv :config="nvConfig" @nvTabTap="onNvTab"></nv>
		<block v-if="tabIndex === 0">
			<!-- 搜索 -->
			<view class="search">
				<navigator class="nav" url="#">搜索企业/行业</navigator>
			</view>
			<!-- 推荐商家 -->
			<view class="block-title">推荐商家</view>
			<scroll-view scroll-x class="recommended">
				<block v-for="(item, index) in 4" :key="index">
					<view class="item-box">
						<image
							class="item-cover"
							src="@/static/dev/mall-logo-01.png"
							mode="aspectFill"
						></image>
						<view class="item-title">MLB</view>
						<view class="item-btn">进店</view>
					</view>
					<view class="item-box">
						<image
							class="item-cover"
							src="@/static/dev/mall-logo-00.png"
							mode="aspectFill"
						/>
						<view class="item-title">名创优品</view>
						<view class="item-btn">进店</view>
					</view>
				</block>
			</scroll-view>
			<!-- 热易商家 -->
			<view class="block-title">
				热易商家
				<navigator class="more" url="#">查看更多</navigator>
			</view>
			<swiper class="hot-swiper">
				<swiper-item v-for="(item, index) in 3" :key="index">
					<view class="hot-box">
						<image
							class="cover"
							src="@/static/dev/mall-logo-00.png"
							mode="aspectFill"
						/>
						<view class="content">
							<view class="title nowrap">MLB（美职联）</view>
							<view class="credibility">
								<uni-rate
									:readonly="true"
									color="#ddd"
									active-color="#c82626"
									:value="2.5"
									:size="14"
								/>
							</view>
							<view class="trading nowrap">累计交易100次</view>
						</view>
						<view class="btn">进店</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 行业分类 -->
			<scroll-view class="industry-tabs" scroll-x>
				<view class="industry-item show">全部</view>
				<view class="industry-item">轻工食品</view>
				<view class="industry-item">服饰纺织</view>
				<view class="industry-item">家居用品</view>
				<view class="industry-item">住宿餐饮</view>
				<view class="industry-item">建筑建材</view>
			</scroll-view>
			<!-- 商家 -->
		</block>
		<!-- 易货商城 -->
		<block v-if="tabIndex === 1">
			<!-- 搜索 -->
			<view class="search">
				<navigator class="nav" url="#">搜索企业/行业</navigator>
			</view>
			<!-- 轮播图 -->
			<view class="banner">
				<swiper class="banner-swiper">
					<swiper-item>
						<view class="swiper-item">1</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">2</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 分类 -->
			<view class="classify">
				<view class="classify-item" v-for="(item, index) in 10" :key="index">
					<image src="" mode="aspectFill"></image>
					<view class="">餐饮美食</view>
				</view>
			</view>
			<!-- 提醒信息 -->
			<swiper class="notice">
				<swiper-item>
					<view class="swiper-item">公告信息</view>
				</swiper-item>
			</swiper>
			<!-- 每日推荐 -->
			<!-- 限时抢购 -->
			<!-- 优选商品 -->
		</block>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				tabIndex: 0,
				nvConfig: {
					tabArr: [
						{title:'广场', active:true},
						{title:'易货'}
					],
					color: "#555",
					hideback: true
				}
			};
		},
		methods:{
			onNvTab(e){
				let tabIndex = e.index
				for(let i in this.nvConfig.tabArr){
					if(i == tabIndex) this.nvConfig.tabArr[i].active = true
					else this.nvConfig.tabArr[i].active = false
				}
				this.tabIndex = tabIndex
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 行业分类
	.industry-tabs{
		white-space:nowrap;
		padding: 0 0 $padding 0;
		.industry-item{
			margin-left: $margin;
			display: inline-block;
			line-height: 50rpx;
			font-size: $title-size-lg;
			color: $text-gray;
			&:last-child{
				margin-right: $margin;
			}
			&.show{
				color: $text-price;
				font-size: $title-size;
				font-weight: bold;
			}
		}
	}
	// 热易商家
	.hot-swiper{
		margin: $margin;
		height: 198rpx;
		.hot-box{
			position: absolute;
			height: 100%;
			width: 100%;
			border-radius: ($radius/2);
			background: white;
			box-shadow: 0 0 6rpx 6rpx rgba($color: #000, $alpha: .02);
			padding: $padding;
			box-sizing: border-box;
			.cover{
				position: absolute;
				left: $padding;
				top: $padding;
				width: calc(198rpx - #{$padding * 2});
				height: calc(198rpx - #{$padding * 2});
			}
			.content{
				padding-left: calc(198rpx - #{$padding});
				padding-right: calc(100rpx + #{$padding});
				.title{
					font-weight: bold;
					font-size: $title-size-lg;
					line-height: 40rpx;
					height: 40rpx;
					color: $text-color;
					padding-bottom: 10rpx;
				}
				.credibility{
					height: calc(108rpx - #{$padding * 2});
					font-size: $title-size-m;
					color: $text-gray;
				}
				.trading{
					line-height: 40rpx;
					font-size: $title-size-sm;
					color: $text-gray;
				}
			}
			.btn{
				position: absolute;
				top: 50%;
				right: $padding;
				font-size: $title-size-m;
				background-color: $text-price;
				color: white;
				line-height: 50rpx;
				width: 100rpx;
				text-align: center;
				margin-top: -25rpx;
			}
		}
	}
	// 推荐商家
	.recommended{
		white-space:nowrap;
		padding: $padding 0;
		.item-box{
			display: inline-block;
			background: white;
			box-shadow: 0 0 6rpx 6rpx rgba($color: #000, $alpha: .02);
			width: 240rpx;
			margin-left: $margin;
			border-radius: ($radius/2);
			padding: ($padding + $padding/2) $padding;
			box-sizing: border-box;
			text-align: center;
			&:last-child{
				margin-right: $margin;
			}
			.item-cover{
				background: #eee;
				width: 88rpx;
				height: 88rpx;
				vertical-align: top;
				border-radius: $radius / 2;
			}
			.item-title{
				font-weight: bold;
				font-size: $title-size-lg;
				padding: ($padding/2) 0;
				color: $text-color;
			}
			.item-btn{
				font-size: $title-size-m;
				background-color: $text-price;
				color: white;
				line-height: 50rpx;
				display: inline-block;
				width: 100rpx;
			}
		}
	}
	// 搜索
	.search{
		padding: $padding;
		.nav{
			background: white;
			border-radius: $radius/2;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			box-shadow: 0 0 6rpx 6rpx rgba($color: #000000, $alpha: .02);
			font-size: $title-size-lg;
			color: $text-gray-m;
		}
	}
	// 模块标题
	.block-title{
		padding: 0 $padding;
		font-weight: bold;
		color: $text-color;
		display: flex;
		justify-content: space-between;
		.more{
			font-size: $title-size-m;
			font-weight: normal;
			color: $text-gray;
		}
	}
</style>

<!-- goods: [
	{
		cover: "https://yanxuan-item.nosdn.127.net/d3b072b5006f56935d15d239cbc5c953.jpg",
		title: "片片大果仁，夏威夷坚果脆片 可可味 55克",
		price: "16",
		sales: "25"
	},
	{
		cover: "https://yanxuan-item.nosdn.127.net/8cfaed758404e23bc74c7214505ce5ec.jpg",
		title: "每日坚果亚麻籽谷物燕麦片 600克",
		price: "58",
		sales: "1002"
	},
	{
		cover: "https://yanxuan-item.nosdn.127.net/65af0745153e2dfa3d7c4fafb7472db6.jpg",
		title: "全新升级银罐，玲珑柑普茶 130克（10颗）",
		price: "98",
		sales: "2235"
	},
	{
		cover: "https://yanxuan-item.nosdn.127.net/f3af9b6eaf15e6e3be1f14e14da90930.jpg",
		title: "别致养生设计 猪鬃气垫按摩梳",
		price: "79",
		sales: "992"
	},
	{
		cover: "https://yanxuan-item.nosdn.127.net/cb99e8a2f4597f3a5d05347a9eeb64c5.png",
		title: "2020年新款，日式减压按摩腰靠",
		price: "219",
		sales: "231"
	},
	{
		cover: "https://yanxuan-item.nosdn.127.net/fff6aead2baff207e869f0aa6f276b63.png",
		title: "T300无线吸尘器",
		price: "159",
		sales: "988"
	}
] -->
