hlm_pl_mall_h5/pages/home/brand/Brand.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <home-base :show="false"><view class="div container">
        <view class="div common-header-wrap">
            <view :style="'height:'+navHeight+'px'"></view>
            <view class="common-header-holder"></view>
            <view class="common-header-fixed">
            <title-header />
            <uni-nav-bar title="品牌街" class="common-header" left-icon="back" @clickLeft="goBack()">
            </uni-nav-bar>
        </view>
        </view>
        <view class="div brand-list">
            <text class="h2" v-if="recommend_brand && recommend_brand.length">推荐品牌</text>
            <view class="ul" v-if="recommend_brand && recommend_brand.length">
                <view  class="li" v-for="item in recommend_brand" v-bind:key="item.brand_id" @click="goHomeGoodslist(item.brand_id)">
                    <view class="div p-img" :style="'background-image:url('+item.brand_pic+')'"></view>
                </view>
            </view>
            <view class="div" v-for="(bclass,index) in brand_class" :key="index">
            <text class="h2">{{bclass.brand_class}}</text>
            <view class="ul">
                <view  class="li" v-for="item in brand_list[index]" v-bind:key="item.brand_id" @click="goHomeGoodslist(item.brand_id)">
                    <view class="div p-img" :style="'background-image:url('+item.brand_pic+')'"></view>
                </view>
            </view>
            </view>
        </view>
    </view></home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'
import HomeBase from '../HomeBase'
import { getBrandList } from '../../../api/homesearch'
import EmptyRecord from '../../EmptyRecord'
export default {
  components:{
    TitleHeader,
    HomeBase,
    EmptyRecord
  },
  name: 'Brand',
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      navHeight: 0,
      brand_list: false,
      recommend_brand: false,
      brand_class: false
    }
  },
  created: function () {
    this.getBrandList()
  },
  methods:{
    goBack(){uni.navigateBack({delta:1})},
    getBrandList () {
      uni.showLoading({ title: '加载中' })
      getBrandList(0).then(res => {
        uni.hideLoading()
        this.brand_list = res.result.brand_c
        this.recommend_brand = res.result.brand_r
        this.brand_class = res.result.brand_class
      }).catch(function (error) {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
      })
    },
    goHomeGoodslist (brandId) {
      uni.navigateTo({ url: '/pages/home/goodslist/Goodslist'+'?'+urlencode( { b_id: brandId } )})
    }
  }
}
</script>

<style scoped lang="scss">
.container{background:#fff}
.brand-list{
    .h2{line-height:2rem;font-size:$subFontSize;padding-left:.5rem;font-weight:700;border-top:1px dashed #eee}
    .ul{overflow: hidden;}
    .li{
        box-sizing: border-box;
        text-align: center;
        width: 25%;
        padding-bottom:20%;
        float: left;
        position:relative;
        .p-img{
            position:absolute;
            top:.5rem;
            bottom:.5rem;
            right:.5rem;
            left:.5rem;
            background-size:contain;
            background-position:center;
            background-repeat:no-repeat;
        }

    }
    .li:nth-child(4n) {
        border-right: 0;
    }
}

</style>