FlowPacs/yudao-ui-app/pages/category/category.vue

<template>
  <view class="container">
    <view class="search-wrap">
      <u-search placeholder="搜索" disabled height="32" :show-action="false" @click="handleSearchClick"></u-search>
    </view>
    <view class="category-box">
      <view class="box-left">
        <view>
          <view class="category-item" v-for="(item, index) in categoryList" :key="item.id">
            <view class="item-title" :class="{ active: currentIndex === index }" @click="handleCategoryClick(index)">
              <text>{{ item.name }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="box-right">
        <image class="category-image" :showLoading="true" :src="categoryList[currentIndex].image" width="530rpx" height="160rpx" @click="click"></image>
        <view class="sub-category-box" v-for="(item, index) in categoryList[currentIndex].children" :key="item.id">
          <view class="sub-category-header">
            <view class="title">{{ item.title }}</view>
            <view class="more">查看更多</view>
          </view>
          <u-grid class="sub-category-grid" col="3">
            <u-grid-item v-for="(subItem, subIndex) in item.category" :key="subItem.id">
              <view class="sub-category-item">
                <u-icon name="photo" :size="80"></u-icon>
                <text class="sub-category-title">{{ subItem.title }}</text>
              </view>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      categoryList: []
    }
  },
  onLoad() {
    for (let i = 0; i < 10; i++) {
      this.categoryList.push({
        id: i,
        image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        name: '商品分类' + i,
        children: [
          {
            id: 0,
            title: '分类' + i + '-1',
            category: [
              {
                id: 0,
                image: '',
                title: '分类' + i + '-1-1'
              },
              {
                id: 2,
                image: '',
                title: '分类' + i + '-1-2'
              },
              {
                id: 3,
                image: '',
                title: '分类' + i + '-1-3'
              }
            ]
          },
          {
            id: 1,
            title: '分类' + i + '-2',
            category: [
              {
                id: 0,
                image: '',
                title: '分类' + i + '-2-1'
              },
              {
                id: 2,
                image: '',
                title: '分类' + i + '-2-2'
              },
              {
                id: 3,
                image: '',
                title: '分类' + i + '-2-3'
              }
            ]
          }
        ]
      })
    }
  },
  methods: {
    handleSearchClick(e) {
      uni.$u.route('/pages/search/search')
    },
    handleCategoryClick(index) {
      if (this.currentIndex !== index) {
        this.currentIndex = index
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.search-wrap {
  background: $custom-bg-color;
  padding: 20rpx;
}

.category-box {
  display: flex;
  .box-left {
    width: 200rpx;
    padding-top: 20rpx;
    border-right: $custom-border-style;
    .category-item {
      border-bottom: $custom-border-style;
      padding: 20rpx 0;
      .item-title {
        padding-left: 30rpx;
        font-size: 28rpx;
        &.active {
          border-left: 6rpx solid $u-primary;
          font-weight: 700;
        }
      }
    }
  }
  .box-right {
    flex: 1;
    .category-image {
      width: 510rpx;
      height: 160rpx;
      padding: 20rpx;
    }

    .sub-category-box {
      .sub-category-header {
        @include flex-space-between;
        padding: 30rpx 20rpx;

        .title {
          font-size: 28rpx;
          font-weight: 700;
        }
        .more {
          font-size: 22rpx;
          color: #939393;
        }
      }

      .sub-category-grid {
        padding: 0 15rpx;

        .sub-category-item {
          @include flex-center(column);
          background: #fff;

          .sub-category-title {
            margin: 15rpx 0;
            font-size: 24rpx;
          }
        }
      }
    }
  }
}
</style>