<template>
   
  <view>
    <z-nav-bar title="全部分类"></z-nav-bar>
    <view class="oneLevel">
      <view
        class="oneItem"
        v-for="(item, index) in oneLevel"
        @click="getTowLevel(index)"
      >
        <image :src="item.icon"></image>
        <text>{{ item.name }}</text>
      </view>
    </view>
    <music-play :playData="playData"></music-play>
  </view>
</template>

<script>
import musicPlay from "@/components/music.vue";
export default {
  data() {
    return {
      playData: {},
      oneLevel: [],
    };
  },
  onLoad(e) {
    this.$http.post("book/shopcategory/getOneLevel").then((res) => {
      let arr = [];
      for (let i in res.list) {
        arr.push({
          icon:
            "../../static/icon/shop_bar_" + (Number(i) + Number(1)) + ".png",
          name: res.list[i].name,
          catId: res.list[i].catId,
        });
      }
      this.oneLevel = arr;
    });
  },
  components: {
    musicPlay,
  },
  methods: {
    // 点击分类跳转
    getTowLevel(e) {
      uni.navigateTo({
        url: `./classify?type=${e}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.oneLevel {
  margin: 10rpx 0 0 0;

  .oneItem {
    display: inline-block;
    width: 20%;
    text-align: center;
    margin: 30rpx 0 0 0;

    image {
      width: 100rpx;
      height: 100rpx;
      margin: 0 auto;
    }

    text {
      font-size: 30rpx;
    }
  }
}
</style>
