Vue3电商项目实战-分类模块5【12-二级类目-结果区-排序组件、13-二级类目-结果区-数据加载、14-二级类目-结果区-进行筛选】

最新推荐文章于 2023-12-18 10:28:30 发布
最新推荐文章于 2023-12-18 10:28:30 发布
阅读量499 收藏
点赞数 1
分类专栏： 自项目 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52896752/article/details/128808856
版权

文章目录

12-二级类目-结果区-排序组件

目的：封装排序组件，完成排序切换效果

大致步骤：

  • 定义一个组件 sub-sort，完成基础布局
  • 在 sub.vue 组件使用
  • 完成切换排序时候的交换效果

落地代码：

  • 1）基础布局： src/views/category/components/sub-sort.vue
<template>
  <div class='sub-sort'>
    <div class="sort">
      <a href="javascript:;">默认排序</a>  
      <a href="javascript:;">最新商品</a>
      <a href="javascript:;">最高人气</a>
      <a href="javascript:;">评论最多</a>
      <a href="javascript:;">
        价格排序
        <i class="arrow up" />
        <i class="arrow down" />
      </a>
    </div>
    <div class="check">
      <XtxCheckbox>仅显示有货商品</XtxCheckbox>
      <XtxCheckbox>仅显示特惠商品</XtxCheckbox>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SubSort'
}
</script>
<style scoped lang='less'>
.sub-sort {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .sort {
    display: flex;
    a {
      height: 30px;
      line-height: 28px;
      border: 1px solid #e4e4e4;
      padding: 0 20px;
      margin-right: 20px;
      color: #999;
      border-radius: 2px;
      position: relative;
      transition: all .3s;
      &.active {
        background: @xtxColor;
        border-color: @xtxColor;
        color: #fff;
      }
      .arrow {
        position: absolute;
        border: 5px solid transparent;
        right: 8px;
        &.up {
          top: 3px;
          border-bottom-color: #bbb;
            &.active {
            border-bottom-color: @xtxColor;
          }
        }
        &.down {
          top: 15px;
          border-top-color: #bbb;
          &.active {
            border-top-color: @xtxColor;
          }
        }
      }
    }
  }
  .check {
    .xtx-checkbox {
      margin-left: 20px;
      color: #999;
    }
  }
}
</style>

使用组件：src/views/category/sub.vue`

<template>
  <div class='sub-category'>
    <div class="container">
      <!-- 面包屑 -->
      <SubBread />
      <!-- 筛选区 -->
      <SubFilter />
      <!-- 结果区域 -->
+      <div class="goods-list">
+        <!-- 排序 -->
+        <SubSort />
+        <!-- 列表 -->
+      </div>
    </div>
  </div>
</template>

<script>
import SubBread from './components/sub-bread'
import SubFilter from './components/sub-filter'
+import SubSort from './components/sub-sort'
export default {
  name: 'SubCategory',
+  components: { SubBread, SubFilter, SubSort}
}
</script>

<style scoped lang='less'>
+.goods-list {
+  background: #fff;
+  padding: 0 25px;
+  margin-top: 25px;
+}
</style>
  • 2）交互效果：
<template>
  <div class='sub-sort'>
    <div class="sort">
      <a :class="{active:sortParams.sortField===null}" @click="changeSort(null)" href="javascript:;">默认排序</a>
      <a :class="{active:sortParams.sortField==='publishTime'}" @click="changeSort('publishTime')" href="javascript:;">最新商品</a>
      <a :class="{active:sortParams.sortField==='orderNum'}" @click="changeSort('orderNum')" href="javascript:;">最高人气</a>
      <a :class="{active:sortParams.sortField==='evaluateNum'}" @click="changeSort('evaluateNum')" href="javascript:;">评论最多</a>
      <a @click="changeSort('price')" href="javascript:;">
        价格排序
        <i class="arrow up" :class="{active:sortParams.sortField==='price'&&sortParams.sortMethod=='asc'}" />
        <i class="arrow down" :class="{active:sortParams.sortField==='price'&&sortParams.sortMethod=='desc'}" />
      </a>
    </div>
    <div class="check">
      <XtxCheckbox v-model="sortParams.inventory">仅显示有货商品</XtxCheckbox>
      <XtxCheckbox v-model="sortParams.onlyDiscount">仅显示特惠商品</XtxCheckbox>
    </div>
  </div>
</template>
<script>
import { reactive } from 'vue'
export default {
  name: 'SubSort',
  setup () {
    // 1. 根据后台需要的参数定义数据对象
    // 2. 根据数据对象，绑定组件（复选框，排序按钮）
    // 3. 在操作排序组件的时候，需要反馈给数据对象
    // sortField====>publishTime,orderNum,price,evaluateNum
    // sortMethod====>asc为正序 desc为倒序
    const sortParams = reactive({
      inventory: false,
      onlyDiscount: false,
      sortField: null,
      sortMethod: null
    })

    // 改变排序
    const changeSort = (sortField) => {
      if (sortField === 'price') {
        sortParams.sortField = sortField
        if (sortParams.sortMethod === null) {
          // 第一次点击，默认是降序
          sortParams.sortMethod = 'desc'
        } else {
          // 其他情况根据当前排序取反
          sortParams.sortMethod = sortParams.sortMethod === 'desc' ? 'asc' : 'desc'
        }
      } else {
        // 如果排序未改变停止逻辑  
        if (sortParams.sortField === sortField)  return
        sortParams.sortField = sortField
        sortParams.sortMethod = null
      }
    }

    return { sortParams, changeSort }
  }
}
</script>

13-二级类目-结果区-数据加载

目的：实现结果区域商品展示。

大致步骤：

  • 完成结果区域商品布局
  • 完成 xtx-infinite-loading 组件封装
  • 使用 xtx-infinite-loading 完成数据加载和渲染

落地代码：src/views/category/sub.vue

1.基础布局

<template>
  <div class='sub-category'>
    <div class="container">
      <!-- 面包屑 -->
      <SubBread />
      <!-- 筛选区 -->
      <SubFilter />
      <!-- 结果区域 -->
      <div class="goods-list">
        <!-- 排序 -->
        <SubSort />
        <!-- 列表 -->
        <ul>
          <li v-for="i in 20" :key="i" >
            <GoodsItem :goods="{}" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import SubBread from './components/sub-bread'
import SubFilter from './components/sub-filter'
import SubSort from './components/sub-sort'
import GoodsItem from './components/goods-item'
export default {
  name: 'SubCategory',
  components: { SubBread, SubFilter, SubSort, GoodsItem }
}
</script>

<style scoped lang='less'>
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
    li {
      margin-right: 20px;
      margin-bottom: 20px;
      &:nth-child(5n) {
        margin-right: 0;
      }
    }
  }
}
</style>

2.无限列表加载组件 src/components/xtx-infinite-loading.vue
在这里插入图片描述

<template>
  <div class="xtx-infinite-loading" ref="container">
    <div class="loading" v-if="loading">
      <span class="img"></span>
      <span class="text">正在加载...</span>
    </div>
    <div class="none" v-if="finished">
      <span class="img"></span>
      <span class="text">亲，没有更多了</span>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
export default {
  name: 'XtxInfiniteLoading',
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    finished: {
      type: Boolean,
      default: false
    }
  },
  setup (props, { emit }) {
    const container = ref(null)
    useIntersectionObserver(
      container,
      ([{ isIntersecting }], dom) => {
        if (isIntersecting) {
          if (props.loading === false && props.finished === false) {
            emit('infinite')
          }
        }
      },
      {
        threshold: 0
      }
    )
    return { container }
  }
}
</script>

<style scoped lang='less'>
.xtx-infinite-loading {
  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    .img {
      width: 50px;
      height: 50px;
      background: url(../../assets/images/load.gif) no-repeat center / contain;
    }
    .text {
      color: #999;
      font-size: 16px;
    }
  }
  .none {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    .img {
      width: 200px;
      height: 134px;
      background: url(../../assets/images/none.png) no-repeat center / contain;
    }
    .text {
      color: #999;
      font-size: 16px;
    }
  }
}
</style>

3.定义获取数据的API src/api/category.js

/**
 * 获取分类下的商品（带筛选条件）
 * @param {Object} params - 可参考接口文档
 */
export const findSubCategoryGoods = (params) => {
  return request('/category/goods/temporary', 'post', params)
}

4.在src/views/category/sub.vue 使用组件

      <!-- 结果区域 -->
      <div class="goods-list">
        <!-- 排序 -->
        <GoodsSort />
        <!-- 列表 -->
        <ul>
          <li v-for="item in list" :key="item.id" >
            <GoodsItem :goods="item" />
          </li>
        </ul>
        <!-- 加载 -->
+        <XtxInfiniteLoading :loading="loading" :finished="finished" @infinite="getData" />
      </div>

<script>
import SubBread from './components/sub-bread'
import SubFilter from './components/sub-filter'
import SubSort from './components/sub-sort'
import GoodsItem from './components/goods-item'
import { ref, watch } from 'vue'
import { findSubCategoryGoods } from '@/api/category'
import { useRoute } from 'vue-router'
export default {
  name: 'SubCategory',
  components: { SubBread, SubFilter, SubSort, GoodsItem },
  setup () {
    // 1. 基础布局
    // 2. 无限加载组件
    // 3. 动态加载数据且渲染
    // 4. 任何筛选条件变化需要更新列表
    const route = useRoute()

    const loading = ref(false)
    const finished = ref(false)
    const goodsList = ref([])
    // 查询参数
    let reqParams = {
      page: 1,
      pageSize: 20
    }
    // 获取数据函数
    const getData = () => {
      loading.value = true
      reqParams.categoryId = route.params.id
      findSubCategoryGoods(reqParams).then(({ result }) => {
        if (result.items.length) {
          goodsList.value.push(...result.items)
          reqParams.page++
        } else {
          // 加载完毕
          finished.value = true
        }
        // 请求结束
        loading.value = false
      })
    }

    // 切换二级分类重新加载
    watch(() => route.params.id, (newVal) => {
      if (newVal && route.path === ('/category/sub/' + newVal)) {
        goodsList.value = []
        reqParams = {
          page: 1,
          pageSize: 20
        }
        finished.value = false
      }
    })

    return { loading, finished, goodsList, getData }
  }
}
</script>

14-二级类目-结果区-进行筛选

目的：在做了筛选和排序的时候从新渲染商品列表。

大致步骤：

  • 排序组件，当你点击了排序后 或者 复选框改变后 触发自定义事件 sort-change 传出排序参数
  • 筛选组件，当你改了品牌，或者其他筛选添加，触发自定义事件 filter-change 传出筛选参数
  • 在sub组件，分别绑定 sort-change filter-change 得到参数和当前参数合并，回到第一页，清空数据，设置未加载完成，触发加载。

落地代码：

  • 组件：src/views/category/components/sub-sort.vue
    // 改变排序
    const changeSort = (sortField) => {
      // 省略代码....
+      emit('sort-change', sortParams)
    }    

    <div class="check">
      <XtxCheckbox @change="changeCheck" v-model="sortParams.inventory">仅显示有货商品</XtxCheckbox>
      <XtxCheckbox @change="changeCheck" v-model="sortParams.onlyDiscount">仅显示特惠商品</XtxCheckbox>
    </div>

    const changeCheck = (sortField) => {
      emit('sort-change', sortParams)
    }
  • 组件 src/views/category/components/sub-filter.vue
    // 获取筛选参数
    const getFilterParams = () => {
      const filterParams = {}
      const attrs = []
      filterParams.brandId = filterData.value.selectedBrand
      filterData.value.saleProperties.forEach(p => {
        const attr = p.properties.find(attr => attr.id === p.selectedProp)
        if (attr && attr.id !== undefined) {
          attrs.push({ groupName: p.name, propertyName: attr.name })
        }
      })
      if (attrs.length) filterParams.attrs = attrs
      return filterParams
    }

    // 选择品牌
    const changeBrand = (brandId) => {
      if (filterData.value.selectedBrand === brandId) return 
      filterData.value.selectedBrand = brandId
      emit('filter-change', getFilterParams())
    }
    // 选中属性
    const changeAttr = (p, attrId) => {
      if (p.selectedProp === attrId) return
      p.selectedProp = attrId
      emit('filter-change', getFilterParams())
    }

    return { filterData, filterLoading, changeBrand, changeAttr }
  }
  • 组件 src/views/category/sub.vue
<SubFilter @sort-change="changeFilter" />

<GoodsSort @filter-change="changeSort"/>

    // 监听筛选区改变
    const changeFilter = (filterParams) => {
      reqParams = { ...reqParams, ...filterParams }
      reqParams.page = 1
      goodsList.value = []
      finished.value = false
    }
    // 监听排序改变
    const changeSort = (sortParams) => {
      reqParams = { ...reqParams, ...sortParams }
      reqParams.page = 1
      goodsList.value = []
      finished.value = false
    }

    return { loading, finished, goodsList, getData, changeFilter, changeSort }
tuanliang
关注
专栏目录
Vue3 - Element Plus 实现表格组件 el-table 拖曳拖动排序功能，支持复杂二级嵌套表格下级子项联动父级拖拽交换顺序位置，Table表格鼠标按住移动行列上移下移排序（详细示例代码
王佳斌
07-10 3071
vue3，nuxt3，element plus，表格，Table表格组件，el-table，拖曳排序，鼠标拖动排序，拖拽排序，改变表格行位置，鼠标拖动表格行row来交换位置，复杂表格，有下级的表格怎么拖曳排序，有二级下级的表格怎么拖曳排序，表格内的数据项拖拽排序，实现拖拽排序，详细教程，sortablejs，表格行拖拽，table表格 行列动态拖拽，数据无法更新怎么办，表格太复杂怎么排序，排序后拿不到行数据id，排序后怎么对接后端服务器，能展开二级的行，排序后如何对接接口，拖拽移动，Vue3 element
图文详解Vue slot和slot-scope的用法和区别
热门推荐
weixin_43178406的博客
08-16 5万+
本文通过图文的形式详细介绍了Vue slot和slot-scope的用法和区别，希望能对学习Vue的同学们有所帮助。 文章目录 1. 背景描述 2. 什么是slot 3. slot分类 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 4. 2.6之后版本的变化
（五）Vue项目——微商城：实现商品分类、购物车等功能
m0_71824048的博客
05-31 3620
通过window+Apache+php+MySQL 服务器配置提升对项目开发认识。
商城前台项目：商品三级分类功能实现
weixin_74285634的博客
06-25 334
商城前台项目：商品三级分类功能实现
vue3 使用setup语法糖实现分类管理
huangdj321的博客
08-16 674
直接在script标签中添加setup属性就可以直接使用setup语法糖了。使用setup语法糖后，不用写setup函数，组件只需要引入不需要注册，属性和方法也不需要再返回，可以直接在template模板中使用。本次模块使用实现一个新闻站的后台分类管理模块，其中新增、编辑采用对话框方式公用一个表单。...
vue3项目（四）---一级分类页
m0_61368323的博客
05-12 489
1. 一级分类-整体认识和路由配置1. 一级分类-整体认识和路由配置1）当点击一级分类的时候，会路由跳转到Category组件，并传递参数过去。所以需要在Category组件进行路由配置，进行参数的占位。2）配置导航区域链接因为点击LayoutHeader,LayoutFixed组件都会进行路由跳转。所以都需要配置链接，传递参数。2. 一级分类-面包屑导航渲染。
基于vue写的自定义商品三级分类，包括搜索分类全是前端控制
神尐破
08-12 585
一款基于vue所写的商品三级分类，包括搜所全是前端的控制，这里的搜索用到递归写法供大家参考。
（七）Vue项目——轻社区：完成分类管理—创建分类表+修改、添加、删除分类+权限验证
m0_71824048的博客
06-25 362
Vue项目“轻社区”，实现用户登录注册+用户中心+邮件激活+分类管理+点赞+回复操作等功能。打造微一站式互动轻社区。
电商网站 首页三级分类的分类检索 vue前端关键代码
taotaobaobei的博客
01-22 798
电商网站 首页三级分类的分类检索 vue前端关键代码,路由传参
黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统-用户列表制作
weixin_48884617的博客
03-27 6217
黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统--用户列表制作
黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理（商品分类）
weixin_48884617的博客
04-17 3322
黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理（商品分类）
黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理（分类参数）
weixin_48884617的博客
04-19 2447
黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理（分类参数）
day06.md
ghy5051073的博客
10-03 780
0.学习目标 使用资料搭建后台系统 会使用nginx进行反向代理 实现商品分类查询功能 掌握cors解决跨域 实现品牌查询功能 1.搭建后台管理前端 1.1.导入已有资源 后台项目相对复杂，为了有利于教学，我们不再从0搭建项目，而是直接使用课前资料中给大家准备好的源码： 我们解压缩，放到工作目录中： 然后在Intellij idea中导入新的工程： 选中我们的工程： 这正是一个用vue...
Vue电商项目—商品管理—商品分类模块-07
weixin_44549096的博客
03-15 3438
Vue电商项目—商品管理—商品分类模块 1.1 商品分类概述 商品分类用于在购物时，快速找到所要购买的商品，可以通过电商平台主页直观的看到。 1.2 商品分类列表 1.3 树形表格 1. 第三方树形表格的基本使用 在入口文件中 main.js // 导入树形列表 tree-table import TreeTable from 'vue-table-with-tree-grid' // 将 TreeTable 注册为全局组件 Vue.component('tree-table', TreeT
aspx.cs后台添加文本框_tp5后台实现小程序商品分类展示功能
weixin_36469247的博客
12-15 201
项目需求:小程序的商品分类 工具:phpStrom+tp5 时间2019.09.08-2019.09.09介绍;后台部分代码加上小程序api接口,控制器层(Goodstype)代码: 控制器层代码只要做了增、改、查三个操作,其中有一些mysql方法是自己封装的,这里不做过多展示,可以自己去写sql语句.<?php namespace appadmincontroller; use appa...
VUE实现购物商城网站前端源码
最新发布
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
12-18 9341
VUE实现购物商城网站源码，商城网站源码，实现了商城登录注册页面、商城主页面、商品列表页面、商品详细页面、购物车页面，可以在这个模板下借用相关代码，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
Vue_shop学习93：商品分类页面数据父级分类的级联选择框实现
weixin_47295886的博客
05-04 335
expandTrigger控制方式 :options数据源 :props指定配置对象。v-model双向绑定道数据中 @change选择项发生变化触发函数。不选择 1级 选择2级或者3级。clearable支持清空。需要获取商品分类数据列表。
【VUE项目实战】37、商品分类功能介绍和基本结构搭建
程序猿之洞
02-26 5012
接上篇《36、用户分配角色功能》 上一篇我们完成了为用户分配角色的功能，结束了权限管理模块。本篇我们开启新模块“分类管理”的开发，先进行模块的介绍和基本结构的搭建。 一、商品分类管理介绍 商品分类用于在购物时，快速找到索要购买的商品，可以用过电商平台主页直观的看到，例如： 最左侧的部分是一级分类，例如“家用电器”。下面的“电视”、“空调”是二级分类，最下面的“曲面电视”等，是三级分类。 我们在管理平台要开发的效果，如下： 在主菜单有一个“商品分类”的菜单，点击后，右侧是一个选项卡页面，有一些Tab表
使用vue3实现数据大屏展示
m0_57108418的博客
12-20 3505
使用echarts主要的是数据请求，数据修改展示等等，简单易上手。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值