硅谷甄选(9)SKU模块

news2024/11/6 23:36:59

SKU模块

8.1 SKU静态

<template>
  <el-card>
    <el-table border style="margin: 10px 0px">
      <el-table-column type="index" label="序号" width="80px"></el-table-column>
      <el-table-column
        label="名称"
        width="80px"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="描述"
        width="300px"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="图片" width="300px"></el-table-column>
      <el-table-column label="重量" width="300px"></el-table-column>
      <el-table-column label="价格" width="300px"></el-table-column>
      <el-table-column
        label="操作"
        width="300px"
        fixed="right"
      ></el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :background="true"
      layout="prev, pager, next, jumper, ->,sizes,total "
      :total="400"
    />
  </el-card>
</template>

8.2 获取展示数据

8.2.1 API&&TYPE

API:

//SKU模块接口管理
import request from '@/utils/request'
import type { SkuResponseData} from './type'
//枚举地址
enum API {
  //获取已有的商品的数据-SKU
  SKU_URL = '/admin/product/list/',
}
//获取商品SKU的接口
export const reqSkuList = (page: number, limit: number) => {
  return request.get<any, SkuResponseData>(API.SKU_URL + `${page}/${limit}`)
}

type:

export interface ResponseData {
  code: number
  message: string
  ok: boolean
}
//定义SKU对象的ts类型
export interface Attr {
  id?: number
  attrId: number | string //平台属性的ID
  valueId: number | string //属性值的ID
}
export interface saleArr {
  id?: number
  saleAttrId: number | string //属性ID
  saleAttrValueId: number | string //属性值的ID
}
export interface SkuData {
  category3Id?: string | number //三级分类的ID
  spuId?: string | number //已有的SPU的ID
  tmId?: string | number //SPU品牌的ID
  skuName?: string //sku名字
  price?: string | number //sku价格
  weight?: string | number //sku重量
  skuDesc?: string //sku的描述
  skuAttrValueList?: Attr[]
  skuSaleAttrValueList?: saleArr[]
  skuDefaultImg?: string //sku图片地址
  isSale?: number //控制商品的上架与下架
  id?: number
}


//获取SKU接口返回的数据ts类型
export interface SkuResponseData extends ResponseData {
  data: {
    records: SkuData[]
    total: number
    size: number
    current: number
    orders: []
    optimizeCountSql: boolean
    hitCount: boolean
    countId: null
    maxLimit: null
    searchCount: boolean
    pages: number
  }
}
8.2.2 组件获取数据
import { ref, onMounted } from 'vue'
//引入请求
import { reqSkuList } from '@/api/product/sku'
//引入ts类型
import type {
  SkuResponseData,
  SkuData,
  SkuInfoData,
} from '@/api/product/sku/type'
//分页器当前页码
let pageNo = ref<number>(1)
//每一页展示几条数据
let pageSize = ref<number>(10)
let total = ref<number>(0)
let skuArr = ref<SkuData[]>([])
//组件挂载完毕
onMounted(() => {
  getHasSku()
})
const getHasSku = async (pager = 1) => {
  //当前分页器的页码
  pageNo.value = pager
  let result: SkuResponseData = await reqSkuList(pageNo.value, pageSize.value)
  if (result.code == 200) {
    total.value = result.data.total
    skuArr.value = result.data.records
  }
}
8.2.3 展示数据(el-table)
<el-table border style="margin: 10px 0px" :data="skuArr">
      <el-table-column type="index" label="序号" width="80px"></el-table-column>
      <el-table-column
        prop="skuName"
        label="名称"
        width="80px"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="skuDesc"
        label="描述"
        width="300px"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="图片" width="300px">
        <template #="{ row, $index }">
          <img
            :src="row.skuDefaultImg"
            alt=""
            style="width: 100px; height: 100px"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="重量"
        width="300px"
        prop="weight"
      ></el-table-column>
      <el-table-column
        label="价格"
        width="300px"
        prop="price"
      ></el-table-column>
      <el-table-column label="操作" width="300px" fixed="right">
        <el-button type="primary" size="small" icon="Top"></el-button>
        <el-button type="primary" size="small" icon="Edit"></el-button>
        <el-button type="primary" size="small" icon="InfoFilled"></el-button>
        <el-button type="primary" size="small" icon="Delete"></el-button>
      </el-table-column>
    </el-table>
8.2.4 分页器

//分页器下拉菜单发生变化触发
const handler = () => {
  getHasSku()
}

注意:在这里切换页码和切换每页数据条数的回调不同是因为:它们都能对函数注入数据,切换页码注入的是点击的页码数,因此我们可以直接使用getHasSku作为他的回调。切换每页数据条数注入的是切换的页码条数,我们希望切换后跳转到第一页,因此使用handler,间接调用getHasSku。

8.3 上架下架按钮

8.3.1 API&&TYPE
//上架
SALE_URL = '/admin/product/onSale/',
//下架的接口
CANCELSALE_URL = '/admin/product/cancelSale/',
    //已有商品上架的请求
export const reqSaleSku = (skuId: number) => {
  return request.get<any, any>(API.SALE_URL + skuId)
}
//下架的请求
export const reqCancelSale = (skuId: number) => {
  return request.get<any, any>(API.CANCELSALE_URL + skuId)
}

type都是any

8.3.2 按钮切换

根据数据切换

8.3.2 上架下架回调

流程:发请求->更新页面

//商品的上架与下架的操作
const updateSale = async (row: SkuData) => {
  //如果当前商品的isSale==1,说明当前商品是上架的额状态->更新为下架
  //否则else情况与上面情况相反
  if (row.isSale == 1) {
    //下架操作
    await reqCancelSale(row.id as number)
    //提示信息
    ElMessage({ type: 'success', message: '下架成功' })
    //发请求获取当前更新完毕的全部已有的SKU
    getHasSku(pageNo.value)
  } else {
    //下架操作
    await reqSaleSku(row.id as number)
    //提示信息
    ElMessage({ type: 'success', message: '上架成功' })
    //发请求获取当前更新完毕的全部已有的SKU
    getHasSku(pageNo.value)
  }
}

8.4 更新按钮

更新按钮这里没有业务。个人觉得是因为SKU的编写在SPU已经做完了。防止业务逻辑混乱

//更新已有的SKU
const updateSku = () => {
  ElMessage({ type: 'success', message: '程序员在努力的更新中....' })
}

8.5 商品详情静态搭建

8.5.1 Drawer 抽屉

描述:呼出一个临时的侧边栏, 可以从多个方向呼出

//控制抽屉显示与隐藏的字段
let drawer = ref<boolean>(false)
  //查看商品详情按钮的回调
const findSku = async (row: SkuData) => {
  //抽屉展示出来
  drawer.value = true
}
8.5.2 Layout 布局

通过基础的 24 分栏,迅速简便地创建布局。

效果图:

8.5.3 轮播图 carousel

注意:把对应的style也复制过来

8.6 商品详情展示业务

8.6.1 API&&TYPE

API

//获取商品详情的接口
  SKUINFO_URL = '/admin/product/getSkuInfo/',
//获取商品详情的接口
export const reqSkuInfo = (skuId: number) => {
  return request.get<any, SkuInfoData>(API.SKUINFO_URL + skuId)
}

type

//获取SKU商品详情接口的ts类型
export interface SkuInfoData extends ResponseData {
  data: SkuData
}
8.6.2 发请求&&存储数据
let skuInfo = ref<any>({})
//查看商品详情按钮的回调
const findSku = async (row: SkuData) => {
  //抽屉展示出来
  drawer.value = true
  //获取已有商品详情数据
  let result: SkuInfoData = await reqSkuInfo(row.id as number)
  //存储已有的SKU
  skuInfo.value = result.data
}
8.6.3 展示数据(销售属性为例)

8.7 删除模块

注:忘记写了,后面才想起来。简短写一下思路

API->绑定点击事件->发请求

比较简单。

8.8 小结

这模块的思路其实都比较简单。无外乎API(type),组件内发请求拿数据、将数据放到模板中。再加上一个对仓库的处理。

这部分真正的难点也是最值得学习的点在于

1:type的书写

2:对数据结构的理解(可以将请求回来的数据放到正确的位置上)

3:element-plus组件的使用。

其实现在看来这部分模块做的事情就是我们前端人的一些缩影。思路不难,难在琐碎的工作中要处理的各种各样的东西。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2229831.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何将ppt转换成word文档?8款ppt转word免费的软件大揭秘,值得收藏!

在日常办公中&#xff0c;将ppt转换成word文档的需求日益增长。这种需求源自多个方面&#xff0c;比如制作详尽的报告、创建课程讲义&#xff0c;或者将信息转化为可编辑的格式。作为一种普遍使用的演示工具&#xff0c;ppt在许多商业环境中扮演着重要角色。然而&#xff0c;随…

pandas——DataFrame

一、dataframe &#xff08;一&#xff09;创建dataframe file.csv Name,Age,City Alice,30,New York Bob,25,Los Angeles Charlie,35,Chicagoimport pandas as pd 1.使用字典创建DataFrame&#xff1a; 其中字典的键是列名&#xff0c;值是数据列表。print(1.使用字典创建D…

vxe-table v4.8+ 与 v3.10+ 虚拟滚动支持动态行高,虚拟渲染更快了

Vxe UI vue vxe-table v4.8 与 v3.10 解决了老版本虚拟滚动不支持动态行高的问题&#xff0c;重构了虚拟渲染&#xff0c;渲染性能大幅提升了&#xff0c;行高自适应和列宽拖动都支持&#xff0c;大幅降低虚拟渲染过程中的滚动白屏&#xff0c;大量数据列表滚动更加流畅。 自适…

关于武汉芯景科技有限公司的马达驱动芯片AT6237开发指南(兼容DRV8837)

一、芯片引脚介绍 1.芯片引脚 二、系统结构图 三、功能描述 逻辑功能

青出于“蓝”的合资第一新能源,“换壳”背后有门道

文/王俣祺 导语&#xff1a;千呼万唤始出来的新能源“马6”终于亮相了&#xff0c;这款马自达EZ-6本以为凭借马自达多年来在国内市场深耕的底蕴可以收获一片支持&#xff0c;但最近却深陷“换壳”风波。那么今天我们就一起看看&#xff0c;这款马自达EZ-6和被冠以“原型”的深蓝…

Github上的十大RAG(信息检索增强生成)框架

信息检索增强生成(Retrieval-Augmented Generation,简称RAG)是一种强大的技术,能够显著提升大型语言模型的性能。RAG框架巧妙地结合了基于检索的系统和生成模型的优势,可以生成更加准确、符合上下文、实时更新的响应。随着对先进人工智能解决方案需求的不断增长,GitHub上涌现出…

【小白学机器学习28】 统计学脉络+ 总体+ 随机抽样方法

目录 参考书&#xff0c;学习书 0 统计学知识大致脉络 1 个体---抽样---整体 1.1 关于个体---抽样---整体&#xff0c;这个三段式关系 1.2 要明白&#xff0c;自然界的整体/母体是不可能被全部认识的 1.2.1 不要较真&#xff0c;如果是人为定义的一个整体&#xff0c;是可…

5、片元着色器之基础光照模型:Phong模型和Blinn-Phong模型

1、什么是Phong光照模型&#xff1f; Phong模型就是在兰伯特模型的基础上增加了镜面反射光的计算。具体来说&#xff0c;兰伯特模型只考虑漫反射光&#xff0c;而Phong模型在此基础上引入了镜面反射光的概念&#xff0c;以模拟光线在光滑表面反射时产生的高光效果。镜面反射光的…

Ubuntu使用Qt虚拟键盘,支持中英文切换

前言 ​ 最近领导给了个需求&#xff0c;希望将web嵌入到客户端里面&#xff0c;做一个客户端外壳&#xff0c;可以控制程序的启动、停止、重启&#xff0c;并且可以调出键盘在触摸屏上使用(我们的程序虽然是BS架构&#xff0c;但程序还是运行在本地工控机上的)&#xff0c;我…

ES(ElaticSearch)详解(含工作原理、基本知识、常见问题和优化方法)

文章目录 一、Lucene 和 ELK 的组成二、ES 配置文件参数解读三、ES 基本知识1、索引&#xff08;Index&#xff09;&#xff1a;类似于关系型数据库的工作表2、类型&#xff08;Type&#xff09;&#xff1a;废弃3、文档&#xff08;Document&#xff09;&#xff1a;类似于关系…

巨好看的登录注册界面源码

展示效果 源码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"widthdevic…

记一次:使用使用Dbeaver连接Clickhouse

前言&#xff1a;使用了navicat连接了clickhouse我感觉不太好用&#xff0c;就整理了一下dbeaver连接 0、使用Navicat连接clickhouse 测试连接 但是不能双击打开&#xff0c;可是使用命令页界面&#xff0c;右键命令页界面&#xff0c;然后可以用sql去测试 但是不太好用&#…

ts:使用fs内置模块简单读写文件

ts&#xff1a;使用fs内置模块简单读写文件 一、主要内容说明二、例子&#xff08;一&#xff09;、fs模块的文件读写1.源码1 &#xff08;fs模块的文件读写&#xff09;2.源码1运行效果 三、结语四、定位日期 一、主要内容说明 在ts中&#xff0c;我们可以使用内置的fs模块来…

RFID技术让档案管理更高效、更可靠

RFID档案应用&#xff0c;即利用射频识别技术对档案进行管理&#xff0c;其价值主要体现在以下几个方面&#xff1a; PART01效率提升 RFID技术通过无线射频识别&#xff0c;能够快速、准确地识别档案信息&#xff0c;大大提高了档案管理的效率。在传统的档案管理中&#xff0c;…

《数字图像处理基础》学习04-图像的量化

在上一篇文章中&#xff0c;已经实现了对图像的采样。 《数字图像处理基础》学习03-图像的采样-CSDN博客 接着就需要对图像进行量化操作。 目录 一&#xff0c;量化的相关概念 二&#xff0c;matlab编写程序生成量化图像 1&#xff0c;要求 2&#xff0c;思路及注意点…

逻辑代数的基本公式

根据图中的逻辑运算符号&#xff0c;包括与非逻辑&#xff08;NAND&#xff09;、或非逻辑&#xff08;NOR&#xff09;、与或非逻辑、异或逻辑&#xff08;XOR&#xff09;和同或逻辑&#xff08;XNOR&#xff09;&#xff0c;我们可以分别给出每个运算符的真值表。 1. 与非逻…

iptables面试题

1、详述iptales工作流程以及规则过滤顺序&#xff1f; iptables过滤的规则顺序是由上至下&#xff0c;若出现相同的匹配规则则遵循由上至下的顺序 2、iptables的几个表以及每个表对应链的作用&#xff1f; Iptables有四表五链 Filter表 : Filter表是iptables中使用的默认表…

Java Collection/Executor DelayedWorkQueue 总结

前言 相关系列 《Java & Collection & 目录》《Java & Executor & 目录》《Java & Collection/Executor & DelayedWorkQueue & 源码》《Java & Collection/Executor & DelayedWorkQueue & 总结》《Java & Collection/Executor &a…

[Python学习日记-59] 开发基础练习2——网站访问日志分析

[Python学习日记-59] 开发基础练习2——网站访问日志分析 简介 题目 答案 简介 该练习结合了函数和一些常用的模块开发了一个对网站访问日志分析的程序&#xff0c;可以巩固实践之前学习的内容。 题目 基本需求&#xff1a; 统计本日志文件的总 pv、uv 数列出全天每小时的…

tiktok批量添加达人怎么弄

在 TikTok 上批量添加达人可以借助一些工具或方法&#xff0c;以下是一些常见的途径&#xff1a; 点我达秘免费体验地址注册 使用达人邀约工具&#xff1a; 功能特点&#xff1a;这类工具专为 TikTok 跨境小店和本土小店提供服务&#xff0c;可以实现多国家、多店铺同时私信和…