wx/pages/shopp/index.vue

<template>
  <view class="content">
    <scroll-view scroll-y class="left-aside">
      <view v-for="(item, index) in flist" :key="index" class="f-item" :class="{ active: currentId === index }" @click="click(index, item.id)">
        {{ item.cateName }}
      </view>
    </scroll-view>
    <scroll-view scroll-y class="right-aside">
      <view @click="shoppingTrolley(item.id)" v-for="(item, index) in slist" :key="index" class="s-list">
        <view class="right-aside-box">
          <view class="right-aside-box-img"><image src="@/static/logo.png"></image></view>
          <view class="right-aside-box-text">
            <view>{{ item.goodsName }}</view>
            <view style="margin-top: 0.2rem; color: #838999">
              <text style="font-size: 0.8rem">原价:</text>
              <del style="margin-left: 0.5rem">¥1.00</del>
            </view>
            <view style="margin-top: 0.2rem; color: #ff6805">
              <text style="font-size: 0.8rem">现价:</text>
              <text style="margin-left: 0.5rem">¥{{ item.goodsPrice }}.00</text>
              <text>/</text>
              <text>瓶</text>
            </view>
          </view>
          <view class="right-aside-box-buttom">购买</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { APIGetcommoditylist, APIAllcategorieslist, APIGetclassifylist } from '@/api/commodity/index.js';
const currentId = ref(0);

// 分类
const flist = ref([]);
// 商品列表
const slist = ref([]);
// 点击分类
const click = (index, id) => {
  currentId.value = index;
  if (index === 0) {
    Getcommoditylist();
  } else {
    Getclassifylist(id);
  }
};
//商品详情
const shoppingTrolley = (id) => {
  uni.navigateTo({
    url: `/pages/shopp/components/commodityDetails?id=${id}`
  });
};
// 获取商品列表
const Getcommoditylist = async () => {
  const res = await APIGetcommoditylist();
  slist.value = res.data;
};
// 获取商品分类
const Allcategorieslist = async () => {
  const res = await APIAllcategorieslist();
  flist.value = res.data;
};
// 查询分类商品列表
const Getclassifylist = async (id) => {
  const res = await APIGetclassifylist(id);
  slist.value = res.data;
};
onMounted(() => {
  Getcommoditylist();
  Allcategorieslist();
});
</script>

<style lang="scss">
.content {
  display: flex;
  height: 88vh;
  background-color: #fff;
}
.left-aside {
  flex-shrink: 0;
  width: 5rem;
  height: 88vh;
  background-color: #fff;
}
.f-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100rpx;
  font-size: 28rpx;
  color: #606266;
  position: relative;
  &.active {
    color: #00ba26;
    background: #f8f8f8;
    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 36rpx;
      width: 8rpx;
      background-color: #00ba26;
      border-radius: 0 4px 4px 0;
      opacity: 0.8;
    }
  }
}

.right-aside {
  flex: 1;
  overflow: hidden;
  padding-left: 0.8rem;
  height: 90vh;
  .right-aside-box {
    padding-bottom: 1rem;
    margin: 1rem 0.5rem 0;
    border-bottom: 1px solid #ebedf5;
    display: flex;
    .right-aside-box-img {
      image {
        width: 5rem;
        height: 5rem;
      }
    }
    .right-aside-box-text {
      display: flex;
      flex-direction: column;
      margin-left: 0.5rem;
    }
    .right-aside-box-buttom {
      margin-top: 4.5rem;
      margin-left: 0.2rem;
      background-color: #00ba26;
      color: #fff;
      padding: 0.3rem 0.5rem;
      border-radius: 1.5rem;
    }
  }
}
</style>