<template>
	<view class="page">
		<view class="header">
			<cu-custom :isBack="true" :isCenter="true">
				<block slot="backText">
					<view class="backImg">
						<image src="@/static/images/back-btn.png" mode=""></image>
					</view>
				</block>
				<block slot="content">
					<view class="tab-title">全部品牌</view>
				</block>
			</cu-custom>
		</view>
		<view class="concent-box acea-row row-between">
			<view class="brand-item" v-for="(item,index) in brandList" :key="index" @click="goDetail(item)">
				<image class="brand-img" :src="item.pic" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { getBrands} from '@/api/store';
	export default {
		data() {
			return {
				brandList:[]
			}
		},
		onLoad() {
			this.getBrandList();
		},
		methods: {
			getBrandList() {
				uni.showLoading({
					title: '加载中...'
				})
				getBrands().then(res => {
					this.brandList = res.data;
					uni.hideLoading();
				})
			},
			goDetail(item) {
				this.$yrouter.push({
				  path: '/pages/shop/brands/brandDetail/index',
				  query: {
				    id: item.id,
				  },
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.header {
		.tab-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #2DB5AE;
			line-height: 42rpx;
		}

		.backImg {
			width: 88rpx;
			height: 62rpx;
			padding-left: 26rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.concent-box{
		padding: 30rpx;
		.brand-item{
			margin-bottom: 30rpx;
			.brand-img {
				width: 330rpx;
				height: 330rpx;
				background: #F5F6F8;
				box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15);
				border-radius: 16rpx;
			}
		}
	}
</style>
