class.vue 3.4 KB
<template>
  <view class="container flexJ">
    <!-- 左边索引 -->
    <view class="rightBox">
      <view class="rightItem flexC" :class="data.cur == item.id ? 'check' : ''" v-for="(item, index) in data.firstClass" :key="item.id" @click="bindToView(item, index)">{{ item.name }}</view>
    </view>
    <!-- 右边内容 -->
    <scroll-view :enable-flex="true" class="scroller" scroll-y="true" scroll-with-animation="true">
      <view class="left" v-for="item in data.titleList">
        <view class="title">{{ item.name }}</view>
        <view class="shopBpx">
          <view class="shop flexV" v-for="it in item.three" :key="it.id" @click="toThreeClassHandler(it.id)">
            <image :src="it.image_text" mode=""></image>
            <view class="name">{{ it.name }}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onShow, onLoad, onHide } from '@dcloudio/uni-app'
import { getTwoClassification } from '@/api/'
let data = reactive({
  cur: 0,
  firstClass: [], //一级分类
  titleList: [] //二级分类名称
})
onLoad(() => {
  getClassifications()
})
onHide(() => {
  console.log(11222)
  uni.removeStorage({ key: 'classId' })
  // data.cur = 0
})
// 左边一级分类点击
const bindToView = (item, index) => {
  data.cur = item.id
  data.titleList = item.two
}
// 一级分类
const getClassifications = async () => {
  try {
    const res = await getTwoClassification()
    console.log(res, '三级分类')
    data.cur = uni.getStorageSync('classId') || 0
    data.firstClass = res
    if (data.cur === 0) {
      data.cur = res[0].id
      data.titleList = res[0].two
    } else {
      data.titleList = res.find(item => item.id === data.cur).two
    }
    console.log('getClassification', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getClassification', err)
  }
}

// 三级分类跳转
const toThreeClassHandler = pid => uni.navigateTo({ url: `/pages/class/classList?pid=${pid}` })
</script>

<style lang="scss">
.container {
  width: 100vw;
  height: 100vh;

  .rightBox {
    width: 160rpx;
    height: 100vh;
    background: #f5f5f5ff;

    .rightItem {
      width: 160rpx;
      height: 104rpx;
      background: #f5f5f5ff;
      border: 0 solid #979797ff;
    }

    .check {
      width: 160rpx;
      height: 104rpx;
      border-radius: 32rpx 0 0 32rpx;
      opacity: 1;
      color: #f43736ff;
      font-size: 28rpx;
      font-weight: 700;
      // border: 0 solid #979797ff;
      background: #ffffffff;
    }
  }

  .scroller {
    height: 100vh;
    width: 100%;
    padding: 0 32rpx 0 24rpx;
    box-sizing: border-box;

    .left {
      width: 100%;
      padding: 24rpx 24rpx 40rpx;
      box-sizing: border-box;
      opacity: 1;
      background: #ffffffff;
      margin-bottom: 24rpx;

      .title {
        color: #323233ff;
        font-size: 28rpx;
        font-weight: 700;
        margin-bottom: 22rpx;
      }

      .shopBpx {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .shop {
          width: 162rpx;
          margin-bottom: 24rpx;
          display: inline-grid;

          .name {
            color: #646566ff;
            font-size: 24rpx;
            text-align: center;
          }

          image {
            width: 128rpx;
            height: 128rpx;
            margin-bottom: 8rpx;
          }
        }
      }
    }
  }
}
</style>