const prefix = 'mall-category';

const suffix = 'key';

export const CATEGORY_CONTENT_KEY = `${prefix}-content-${suffix}`;

export const CATEGORY_CONTENT_UPDATE_TIME_INTERVAL = 1 * 24 * 60 * 60 * 1000;

// export const CATEGORY_CONTENT_UPDATE_TIME_INTERVAL = 10 * 1000;

// category names

export const categoryNames = [

  {

    'name': '热门推荐',

    'id': 'WQR2006'

  },

  {

    'name': '慕淘超市',

    'id': 'WQ1968'

  },

  {

    'name': '国际名牌',

    'id': 'WQ1969'

  },

  {

    'name': '奢侈品',

    'id': 'WQ1970'

  },

  {

    'name': '全球购',

    'id': 'WQ1971'

  },

  {

    'name': '男装',

    'id': 'WQ1972'

  },

  {

    'name': '女装',

    'id': 'WQ1973'

  },

  {

    'name': '男鞋',

    'id': 'WQ1974'

  },

  {

    'name': '女鞋',

    'id': 'WQ1975'

  },

  {

    'name': '内衣配饰',

    'id': 'WQ1976'

  },

  {

    'name': '箱包手袋',

    'id': 'WQ1977'

  },

  {

    'name': '美妆个护',

    'id': 'WQ1978'

  },

  {

    'name': '钟表珠宝',

    'id': 'WQ1979'

  },

  {

    'name': '手机数码',

    'id': 'WQ1980'

  },

  {

    'name': '电脑办公',

    'id': 'WQ1981'

  },

  {

    'name': '家用电器',

    'id': 'WQ1982'

  },

  {

    'name': '食品生鲜',

    'id': 'WQ1983'

  },

  {

    'name': '酒水饮料',

    'id': 'WQ1984'

  },

  {

    'name': '母婴童鞋',

    'id': 'WQ1985'

  },

  {

    'name': '玩具乐器',

    'id': 'WQ1986'

  },

  {

    'name': '医药保健',

    'id': 'WQ1987'

  },

  {

    'name': '计生情趣',

    'id': 'WQ1988'

  },

  {

    'name': '运动户外',

    'id': 'WQ1989'

  },

  {

    'name': '汽车用品',

    'id': 'WQ1990'

  },

  {

    'name': '家居厨具',

    'id': 'WQ1991'

  },

  {

    'name': '家具家装',

    'id': 'WQ1992'

  },

  {

    'name': '礼品鲜花',

    'id': 'WQ1993'

  },

  {

    'name': '宠物生活',

    'id': 'WQ1994'

  },

  {

    'name': '生活旅行',

    'id': 'WQ1995'

  },

  {

    'name': '图书音像',

    'id': 'WQ1996'

  },

  {

    'name': '邮币',

    'id': 'WQ1997'

  },

  {

    'name': '农资绿植',

    'id': 'WQ1998'

  },

  {

    'name': '特产馆',

    'id': 'WQ1999'

  },

  {

    'name': '慕淘金融',

    'id': 'WQ2000'

  },

  {

    'name': '拍卖',

    'id': 'WQ2001'

  },

  {

    'name': '房产',

    'id': 'WQ2008'

  },

  {

    'name': '二手商品',

    'id': 'WQ2002'

  }

];

<template>

  <div class="category">

    <header class="g-header-container">

      <category-header/>

    </header>

    <div class="g-content-container">

      <div class="sidebar">

        <category-tab @switch-tab="getCurrentId"/>

      </div>

      <div class="main">

        <category-content :curId="curId"/>

      </div>

    </div>

  </div>

</template>

<script>

  import CategoryHeader from './header';

  import CategoryTab from './tab';

  import CategoryContent from './content';

  export default {

    name: 'Category',

    components: {

      CategoryHeader,

      CategoryTab,

      CategoryContent

    },

    data() {

      return {

        curId: ''

      };

    },

    methods: {

      getCurrentId(id) {

        this.curId = id;

      }

    }

  };

</script>

<style scoped>

  @import "~assets/scss/mixins";

  .category {

    overflow:hidden;

    width:100%;

    height:100%;

    background-color: $bgc-theme;

  }

  .g-content-container {

    display: flex;

  }

  .sidebar {

    width: 80px;

    height: 100%;

  }

  .main {

    flex: 1;

    height: 100%;

  }

</style>

<template>

  <me-navbar class="header">

    <div slot="center">搜索框</div>

    <i class="iconfont icon-msg" slot="right"></i>

  </me-navbar>

</template>

<script>

  import MeNavbar from 'base/navbar';

  export default {

    name: 'CategoryHeader',

    components: {

      MeNavbar

    }

  };

</script>

<style scoped>

  @import "~assets/scss/mixins";

  .header {

    &.mine-navbar {

      background-color: $header-bgc-translucent;

    }

    .iconfont {

      color: $icon-color-default;

      font-size: $icon-font-size;

    }

  }

</style>

<template>

  <div class="content-wrapper">

    <div class="loading-container" v-if="isLoading">

       <div class="loading-wrapper">

        <me-loading/>

      </div> 

    </div>

    <me-scroll

      ref="scroll"

    >

      <div class="content">

        <div class="pic" v-if="content.banner">

          <a :href="content.banner.linkUrl" class="pic-link">

            <img @load="updateScroll" :src="content.banner.picUrl" alt="" class="pic-img">

          </a>

        </div>

        <div

          class="section"

          v-for="(section, index) in content.data"

          :key="index"

        >

          <h4 class="section-title">{{section.name}}</h4>

          <ul class="section-list">

            <li

              class="section-item"

              v-for="(item, i) in section.itemList"

              :key="i"

            >

              <a href="" class="section-link">

                <p class="section-pic" v-if="item.picUrl">

                  <img v-lazy="item.picUrl" alt="" class="section-img" />

                </p>

                <p class="section-name">{{item.name}}</p>

              </a>

            </li>

          </ul>

        </div>

      </div>

    </me-scroll>

  </div>

</template>

<script>

  import MeLoading from 'base/loading';

  import MeScroll from 'base/scroll';

  import MeBacktop from 'base/backtop';

  import {getCategoryContent} from '../../api/category.js';

  //import storage from 'assets/js/storage';

  import {CATEGORY_CONTENT_KEY, CATEGORY_CONTENT_UPDATE_TIME_INTERVAL} from './config';

  export default {

    name: 'CategoryContent',

    components: {

      MeLoading,

      MeScroll,

      MeBacktop

    },

    props: {

      curId: {

        type: String,

        default: ''

      }

    },

    data() {

      return {

        content: {},

        isBacktopVisible: false,

        isLoading: false

      };

    },

    watch: {/* 监听curid */

      curId(id) {

        this.isLoading = true;//获取数据之前加载loading

        this.getContent(id).then(() => {

          this.isLoading = false;

  this.backToTop();

        });

      }

    },

    methods: {

    getContent(id){

return getCategoryContent(id).then(data=>{

if(data){

this.content=data;

}

})

},

backToTop(){

this.$refs.scroll&&this.$refs.scroll.scrollToTop();

},

updateScroll(){

}

    }

  };

</script>

<style scoped>

@import "~assets/scss/mixins";

  .content-wrapper {

    position: relative;

    height: 100%;

  }

  .loading-container {

    position: absolute;

    top: 0;

    left: 0;

    z-index: $category-popup-z-index;

    @include flex-center();

    width: 100%;

    height: 100%;

    /*background-color: $modal-bgc;*/

    .mine-loading {

      color: #fff;

      font-size: 14px;

    }

  }

  .loading-wrapper {

    width: 50%;

    padding: 30px 0;

    background-color: $modal-bgc;

    border-radius: 4px;

  }

  .content {

    padding: 10px;

  }

  .pic {

    margin-bottom: 12px;

    &-link {

      display: block;

    }

    &-img {

      width: 100%;

    }

  }

  .section {

    margin-bottom: 12px;

    &:last-child {

      margin-bottom: 0;

    }

    &-title {

      height: 28px;

      line-height: 28px;

      color: #080808;

      font-weight: bold;

    }

    &-list {

      display: flex;

      flex-wrap: wrap;

      background-color: #fff;

      padding: 10px 10px 0;

    }

    &-item {

      width: (100% / 3);

    }

    &-link {

      display: block;

    }

    &-pic {

      position: relative;

      width: 80%;

      padding-bottom: 80%;

      margin: 0 auto;

    }

    &-img {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

    }

    &-name {

      height: 36px;

      line-height: 36px;

      text-align: center;

      @include ellipsis();

    }

  }

  .g-backtop-container {

    bottom: 10px;

  }

</style>