小兔鲜儿 uniapp - SKU 模块

目录

存货单位（SKU）​

插件市场​

下载 SKU 插件​

使用 SKU 插件​

插件类型问题​

核心业务​

渲染商品规格​

打开弹窗交互​

渲染被选中的值​

存货单位（SKU）​

SKU 概念

存货单位（Stock Keeping Unit），库存管理的最小可用单元，通常称为“单品”。

SKU 常见于电商领域，对于前端工程师而言，更多关注 SKU 算法 和 用户交互体验。

插件市场​

uni-app 插件市场，是 uni-app 官方插件生态集中地。

SKU 属于电商常见业务，插件市场有现成的 SKU 插件，我们下载并在项目中使用。

下载 SKU 插件​

经过综合评估，我们选择该SKU 插件，请下载插件到本地。

体验地址

 

常见问题

Q：如何评估第三方插件的质量？

A：查看插件的评分、评价、下载量、更新频率以及文档完整性，以确保插件具有良好的社区口碑、兼容性、性能和维护状况。

使用 SKU 插件​

组件安装到自己项目

  1. 复制 vk-data-goods-sku-popup 和 vk-data-input-number-box 到项目的根 components 目录下。
  2. 复制例子代码并运行体验。

插件文档(部分)

Props 参数

Props说明类型默认值可选值
v-model双向绑定，true 为打开组件，false 为关闭组件Booleanfalsetrue、false
mode模式 1:都显示 2:只显示购物车 3:只显示立即购买Number11、2、3
localdata商品信息本地数据源Object--

Event 事件名

Event说明回调参数
add-cart点击添加到购物车时（需选择完 SKU 才会触发）selectShop：当前选择的 sku 数据
buy-now点击立即购买时（需选择完 SKU 才会触发）selectShop：当前选择的 sku 数据
open打开组件时-
close关闭组件时

-

 

常见问题

Q：为什么插件使用时无需导入？

A：pages.json 的 easycom 配置中，默认自动扫描 xxx/xxx.vue 格式的组件，实现自动导入。

Q：为什么组件代码 Git 提交时报错？

A：插件未采用 eslint 校验代码，请在插件源文件中添加 /* eslint-disable */，禁用 eslint。

在 vk-data-goods-sku-popup.vue 和 vk-data-input-number-box.vue 组件禁用 eslint 

<script>
/* eslint-disable */
// 省略组件源代码

温馨提示: 插件的作者已合并 eslint-disable PR ，现在已无需手动添加该注释。

插件类型问题​

尽管该插件未采用 TS 开发，但作者提供了详细的插件文档，我们可以依据文档为插件添加 TS 类型声明文件，从而提高项目数据校验的安全性。

import { Component } from '@uni-helper/uni-app-types'/** SKU 弹出层 */
export type SkuPopup = Component<SkuPopupProps>/** SKU 弹出层实例 */
export type SkuPopupInstance = InstanceType<SkuPopup>/** SKU 弹出层属性 */
export type SkuPopupProps = {/** 双向绑定，true 为打开组件，false 为关闭组件 */modelValue: boolean/** 商品信息本地数据源 */localdata: SkuPopupLocaldata/** 按钮模式 1:都显示 2:只显示购物车 3:只显示立即购买 */mode?: 1 | 2 | 3/** 该商品已抢完时的按钮文字 */noStockText?: string/** 库存文字 */stockText?: string/** 点击遮罩是否关闭组件 */maskCloseAble?: boolean/** 顶部圆角值 */borderRadius?: string | number/** 最小购买数量 */minBuyNum?: number/** 最大购买数量 */maxBuyNum?: number/** 每次点击后的数量 */stepBuyNum?: number/** 是否只能输入 step 的倍数 */stepStrictly?: boolean/** 是否隐藏库存的显示 */hideStock?: false/** 主题风格 */theme?: 'default' | 'red-black' | 'black-white' | 'coffee' | 'green'/** 默认金额会除以100（即100=1元），若设置为0，则不会除以100（即1=1元） */amountType?: 1 | 0/** 自定义获取商品信息的函数（已知支付宝不支持，支付宝请改用localdata属性） */customAction?: () => void/** 是否显示右上角关闭按钮 */showClose?: boolean/** 关闭按钮的图片地址 */closeImage?: string/** 价格的字体颜色 */priceColor?: string/** 立即购买 - 按钮的文字 */buyNowText?: string/** 立即购买 - 按钮的字体颜色 */buyNowColor?: string/** 立即购买 - 按钮的背景颜色 */buyNowBackgroundColor?: string/** 加入购物车 - 按钮的文字 */addCartText?: string/** 加入购物车 - 按钮的字体颜色 */addCartColor?: string/** 加入购物车 - 按钮的背景颜色 */addCartBackgroundColor?: string/** 商品缩略图背景颜色 */goodsThumbBackgroundColor?: string/** 样式 - 不可点击时,按钮的样式 */disableStyle?: object/** 样式 - 按钮点击时的样式 */activedStyle?: object/** 样式 - 按钮常态的样式 */btnStyle?: object/** 字段名 - 商品表id的字段名 */goodsIdName?: string/** 字段名 - sku表id的字段名 */skuIdName?: string/** 字段名 - 商品对应的sku列表的字段名 */skuListName?: string/** 字段名 - 商品规格名称的字段名 */specListName?: string/** 字段名 - sku库存的字段名 */stockName?: string/** 字段名 - sku组合路径的字段名 */skuArrName?: string/** 字段名 - 商品缩略图字段名(未选择sku时) */goodsThumbName?: string/** 被选中的值 */selectArr?: string[]/** 打开弹出层 */onOpen: () => void/** 关闭弹出层 */onClose: () => void/** 点击加入购物车时（需选择完SKU才会触发）*/onAddCart: (event: SkuPopupEvent) => void/** 点击立即购买时（需选择完SKU才会触发）*/onBuyNow: (event: SkuPopupEvent) => void
}/**  商品信息本地数据源 */
export type SkuPopupLocaldata = {/** 商品 ID */_id: string/** 商品名称 */name: string/** 商品图片 */goods_thumb: string/** 商品规格列表 */spec_list: SkuPopupSpecItem[]/** 商品SKU列表 */sku_list: SkuPopupSkuItem[]
}/** 商品规格名称的集合 */
export type SkuPopupSpecItem = {/** 规格名称 */name: string/** 规格集合 */list: { name: string }[]
}/** 商品SKU列表 */
export type SkuPopupSkuItem = {/** SKU ID */_id: string/**  商品 ID */goods_id: string/** 商品名称 */goods_name: string/** 商品图片 */image: string/** SKU 价格 * 100, 注意：需要乘以 100 */price: number/** SKU 规格组成, 注意：需要与 spec_list 数组顺序对应 */sku_name_arr: string[]/** SKU 库存 */stock: number
}/** 当前选择的sku数据 */
export type SkuPopupEvent = SkuPopupSkuItem & {/** 商品购买数量 */buy_num: number
}/** 全局组件类型声明 */
declare module 'vue' {export interface GlobalComponents {'vk-data-goods-sku-popup': SkuPopup}
}

核心业务​

渲染商品规格​

使用以下两个属性：

  • localdata 绑定商品 SKU 数据来源
  • v-model 双向绑定，显示/隐藏组件

注意：后端返回的数据格式和插件所需的格式不一致，我们需要按插件要求进行处理。

<script setup lang="ts">
import type { SkuPopupLocaldata } from '@/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup'// 获取商品详情信息
const goods = ref<GoodsResult>()
const getGoodsByIdData = async () => {const res = await getGoodsByIdAPI(query.id)goods.value = res.result// SKU组件所需格式localdata.value = {_id: res.result.id,name: res.result.name,goods_thumb: res.result.mainPictures[0],spec_list: res.result.specs.map((v) => ({ name: v.name, list: v.values })),sku_list: res.result.skus.map((v) => ({_id: v.id,goods_id: res.result.id,goods_name: res.result.name,image: v.picture,price: v.price * 100, // 注意：需要乘以 100stock: v.inventory,sku_name_arr: v.specs.map((vv) => vv.valueName),})),}
}// 是否显示SKU组件
const isShowSku = ref(false)
// 商品信息
const localdata = ref({} as SkuPopupLocaldata)
</script><template><!-- SKU弹窗组件 --><vk-data-goods-sku-popup v-model="isShowSku" :localdata="localdata" /><!-- 弹窗测试 --><button @tap="isShowSku = true">打开 SKU 弹窗</button>
</template>

打开弹窗交互​

SKU 弹窗的按钮有三种形式

<script setup lang="ts">
// 按钮模式
enum SkuMode {Both = 1,Cart = 2,Buy = 3,
}
const mode = ref<SkuMode>(SkuMode.Cart)
// 打开SKU弹窗修改按钮模式
const openSkuPopup = (val: SkuMode) => {// 显示SKU弹窗isShowSku.value = true// 修改按钮模式mode.value = val
}
</script><template><!-- SKU弹窗组件 --><vk-data-goods-sku-popupv-model="isShowSku":localdata="localdata":mode="mode"add-cart-background-color="#FFA868"buy-now-background-color="#27BA9B"/><!-- 显示两个按钮 --><view @tap="openSkuPopup(SkuMode.Both)" class="item arrow">请选择商品规格</view><!-- 显示一个按钮 --><view @tap="openSkuPopup(SkuMode.Cart)" class="addcart"> 加入购物车 </view><view @tap="openSkuPopup(SkuMode.Buy)" class="payment"> 立即购买 </view>
</template>

渲染被选中的值​

  1. 通过 ref 获取组件实例。

  2. 通过 computed 计算出被选中的值，渲染到界面中。

<script setup lang="ts">
// SKU组件实例
const skuPopupRef = ref<SkuPopupInstance>()
// 计算被选中的值
const selectArrText = computed(() => {return skuPopupRef.value?.selectArr?.join(' ').trim() || '请选择商品规格'
})
</script><template><!-- SKU弹窗组件 --><vk-data-goods-sku-popupv-model="isShowSku":localdata="localdata":mode="mode"add-cart-background-color="#FFA868"buy-now-background-color="#27BA9B"ref="skuPopupRef":actived-style="{color: '#27BA9B',borderColor: '#27BA9B',backgroundColor: '#E9F8F5',}"/><!-- 操作面板 --><view class="action"><view @tap="openSkuPopup(SkuMode.Both)" class="item arrow"><text class="label">选择</text><text class="text ellipsis"> {{ selectArrText }} </text></view></view>
</template>

至此，已经完成 SKU 组件的交互，接下来进入到购物车模块，并实现加入购物车功能。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java之反射

Java之反射

一、反射的概述 是在运行状态中&#xff0c;对于任意一个类&#xff0c;都能够知道这个类的所有属性和方法&#xff1b; 对于任意一个对象&#xff0c;都能够调用它的任意属性和方法&#xff1b; 这种动态获取信息以及动态调用对象方法的功能称为Java语言的反射机制。 通俗的理…
阅读更多...
Python使用multiprocessing模块实现多进程并发处理大数据量

Python使用multiprocessing模块实现多进程并发处理大数据量

使用multiprocessing模块实现多进程并发地遍历arr1中的值&#xff0c;从arr2中查找是否存在的步骤如下&#xff1a; 导入multiprocessing模块&#xff1a;import multiprocessing 创建查找函数&#xff1a;定义一个函数&#xff0c;用于在arr2中查找arr1的值。可以在这个函数中…
阅读更多...
【JVM】Java虚拟机JVM堆内存调优

【JVM】Java虚拟机JVM堆内存调优

Java虚拟机JVM堆内存调优 一、了解堆内存结构1.1 JDK 1.7堆内存1.2 JDK 1.8堆内存二、设置合理的堆内存大小（-Xms和-Xmx）三、调整新生代与老年代比例（-XX:NewRatio）四、新生代中Eden区与Survivor区比例（-XX:SurvivorRatio）五、启用并调整并行收集器或并发收集器六、设置垃…
阅读更多...
基金撰写过程中是否存在哪些问题？技术路线图如何设计才能吸引评阅专家的目光？

基金撰写过程中是否存在哪些问题？技术路线图如何设计才能吸引评阅专家的目光？

随着社会经济发展和科技进步&#xff0c;基金项目对创新性的要求越来越高。申请人需要提出独特且有前瞻性的研究问题&#xff0c;具备突破性的科学思路和方法。因此&#xff0c;基金项目申请往往需要进行跨学科的技术融合。申请人需要与不同领域结合&#xff0c;形成多学科交叉…
阅读更多...
BUUCTF--gyctf_2020_borrowstack1

BUUCTF--gyctf_2020_borrowstack1

这是一题栈迁移的题目&#xff0c;先看看保护&#xff1a; 黑盒测试&#xff1a; 用户可输入两次内容&#xff0c;接着看看IDA中具体程序流程&#xff1a; 我们看到溢出内容只有0x10的空间给我们布局&#xff0c;这显然是不足以我们布置rop的。因此肯定就是栈迁移了。迁到什么地…
阅读更多...
Vue3地图选点组件

Vue3地图选点组件

Vue3地图选点组件 <template><div style"width: 100%; height: 500px"><div class"search-container"><el-autocompletev-model"suggestionKeyWord"class"search-container__input"clearable:fetch-suggestion…
阅读更多...
后端处理文件上传：对比用Controller层和Service层的优缺点

后端处理文件上传：对比用Controller层和Service层的优缺点

当涉及文件上传时&#xff0c;有两种主要的处理方式&#xff1a;将文件上传逻辑放在控制器(Controller)层和将文件上传逻辑放在服务(Service)层。以下是这两种方式的优缺点&#xff1a; 将文件上传逻辑放在控制器(Controller)层&#xff1a; 优点&#xff1a; 简化代码结构&a…
阅读更多...
error:0308010C:digital envelope routines::unsupported 前端项目错误

error:0308010C:digital envelope routines::unsupported 前端项目错误

直接启动命令中增加&#xff1a; SET NODE_OPTIONS--openssl-legacy-provider && vue-cli-service serve
阅读更多...
猫咪主食冻干K9、希喂、SC生骨肉冻干哪款好？详细对比测评这三款产品

猫咪主食冻干K9、希喂、SC生骨肉冻干哪款好？详细对比测评这三款产品

随着科学养猫的观念深入人心&#xff0c;越来越多的铲屎官开始关注猫咪主食的营养与健康。主食冻干&#xff0c;作为一种模拟猫咪原始猎食的食品&#xff0c;因其高营养保留而受到广大猫奴的喜爱。相比传统的膨化猫粮&#xff0c;主食冻干更符合猫咪的饮食天性&#xff0c;提供…
阅读更多...
计算机Java项目｜基于SSM实现的在线考试系统

计算机Java项目｜基于SSM实现的在线考试系统

项目编号&#xff1a;L-BS-ZXBS-04 一&#xff0c;环境介绍 语言环境&#xff1a;Java: jdk1.8 数据库&#xff1a;Mysql: mysql5.7 应用服务器&#xff1a;Tomcat: tomcat8.5.31 开发工具&#xff1a;IDEA或eclipse 后台框架&#xff1a;Spring、SpringMVC、MyBatis …
阅读更多...
How to talk about your job in English？

How to talk about your job in English？

笔记原文 Hi, Tim here with another 925English lesson! In today’s lesson we’re going to learn how to talk about your job. There are lots of situations where you meet someone new and you want to tell them about your job. Maybe they ask you about it, or y…
阅读更多...
消费REST服务

消费REST服务

目录 概述GET资源PUT资源DELETE资源POST资源 概述 Spring应用除了提供对外API之外&#xff0c;同时要对另一个应用的API发起请求。实际上&#xff0c;在微服务领域&#xff0c;这正变得越来越普遍。因此&#xff0c;花点时间研究一下如何使用Spring与RESTAPI交互是非常值得的。…
阅读更多...
C语言编译器（C语言编程软件）完全攻略（第五部分：VS2015使用教程（使用VS2015编写C语言程序））

C语言编译器（C语言编程软件）完全攻略（第五部分：VS2015使用教程（使用VS2015编写C语言程序））

介绍常用C语言编译器的安装、配置和使用。 五、VS2015使用教程&#xff08;使用VS2015编写C语言程序&#xff09; 前面我们给出了一段完整的C语言代码&#xff0c;就是在显示器上输出“C语言中文网”&#xff0c;如下所示&#xff1a; #include <stdio.h> int main() {…
阅读更多...
MySQL运维实战（2.3）MySQL的权限体系

MySQL运维实战（2.3）MySQL的权限体系

作者&#xff1a;俊达 MySQL权限划分 MySQL权限按授权范围可以分为三大类&#xff1a;全局权限、数据库权限和对象权限。 全局权限主要用于管理系统模块&#xff0c;这些权限涵盖了对MySQL服务器整体的操作和管理&#xff0c;与具体的数据库或对象无关&#xff0c;因此在授权…
阅读更多...
Leetcode_day01_88合并两个有序数组

Leetcode_day01_88合并两个有序数组

Leetcode_day01_88合并两个有序数组 题目描述&#xff1a; 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺…
阅读更多...
HarmonyOS应用开发学习笔记 包名、icon图标，应用名修改 UIAbility组件介绍、UIAbility启动模式、UIAbility组件基本用法

HarmonyOS应用开发学习笔记 包名、icon图标，应用名修改 UIAbility组件介绍、UIAbility启动模式、UIAbility组件基本用法

目前HarmonyOS应用主推的是Stage模型开发 一、Stage模型基本概念 项目描述UIAbility组件UIAbility组件是一种包含UI界面的应用组件&#xff0c;主要用于和用户交互。例如&#xff0c;图库类应用可以在UIAbility组件中展示图片瀑布流&#xff0c;在用户选择某个图片后&#xf…
阅读更多...
Hotspot源码解析-第十二章-线程栈保护页

Hotspot源码解析-第十二章-线程栈保护页

了解保护页&#xff0c;先从几个问题开始吧 1、为什么线程栈有栈帧了&#xff0c;还要有保护页&#xff1f; 答&#xff1a;在操作系统中内存可以看成是一个大数组&#xff0c;这就有一个问题&#xff0c;线程之间可能会互相踩了别人的内存空间&#xff0c;所以栈空间也存在这…
阅读更多...
空间域图像增强之直方图均衡的python代码实现——冈萨雷斯数字图像处理

空间域图像增强之直方图均衡的python代码实现——冈萨雷斯数字图像处理

原理 直方图&#xff1a; 图像的直方图是一个图像中像素强度值分布的图表。 对于灰度图像&#xff0c;直方图展示了每个灰度级出现的频率。 直方图均衡步骤&#xff1a; 计算累积分布函数&#xff08;CDF&#xff09;&#xff1a;首先&#xff0c;计算图像的直方图&#xff0…
阅读更多...
C语言中一些基本数据类型的典型大小

C语言中一些基本数据类型的典型大小

char&#xff1a;通常是1字节。表示一个字符。int&#xff1a;通常在现代系统中是4字节&#xff08;但这取决于编译器和架构&#xff0c;有时可能是2字节&#xff09;。float&#xff1a;通常是4字节。double&#xff1a;通常是8字节。short 和 short int&#xff1a;通常是2字…
阅读更多...
解决：ERROR: Failed building wheel for xxx

解决：ERROR: Failed building wheel for xxx

解决&#xff1a;ERROR: Failed building wheel for xxx 文章目录 解决&#xff1a;ERROR: Failed building wheel for xxx背景报错问题报错翻译报错原因解决方法参考内容&#xff1a;今天的分享就到此结束了 背景 在使用之前的代码构建环境时&#xff0c;报错&#xff1a;ERRO…
阅读更多...
最新文章

Copyright @ 2022~2023