在uni-app中使用sku插件，实现商品详情页规格展示和交互。

商品详情 - SKU 模块

学会使用插件市场，下载并使用 SKU 组件，实现商品详情页规格展示和交互。

存货单位（SKU）

SKU 概念

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

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

插件市场

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

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

下载 SKU 插件

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

体验地址

在这里插入图片描述

::: tip 常见问题

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关闭组件时-

::: tip 常见问题

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 */
// 省略组件源代码
</script>

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

插件类型问题

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

类型声明文件

vk-data-goods-sku-popup.d.ts

import { Component } from '@uni-helper/uni-app-types'/** SKU 弹出层 */
export type SkuPopup = Component<SkuPopupProps>/** SKU 弹出层实例 */
export type SkuPopupInstanceType = 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<SkuPopupInstanceType>()
// 计算被选中的值
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/632580.shtml

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

相关文章

【MyBatis-Plus】逻辑删除

【MyBatis-Plus】逻辑删除

对于一些比较重要的数据&#xff0c;我们通常采用逻辑删除。&#xff08;即用一个字段表示是否删除&#xff0c;实际上始终在数据库没有被删除&#xff09; 当逻辑删除字段为 true&#xff0c;业务处理的时候会自动把该数据当做一个“不存在”的数据处理。&#xff08;即不处理…
阅读更多...
计算机网络课程设计-Tracert 与 Ping 程序设计与实现

计算机网络课程设计-Tracert 与 Ping 程序设计与实现

目录 前言 1 实验题目 2 实验目的 3 实验内容 3.1 步骤 3.2 关键代码 3.2.1 发送ICMP数据报 3.2.2 解析收到的数据报 4 实验结果与分析 5 代码 5.1 ping代码 5.2 Tracert代码 前言 本实验为计算机网络课程设计内容&#xff0c;基本上所有代码都是根据指导书给的附录…
阅读更多...
BigeMap在Unity3d中的应用，助力数字孪生

BigeMap在Unity3d中的应用，助力数字孪生

1. 首先需要用到3个软件&#xff0c;unity&#xff0c;gis office 和 bigemap离线服务器 Unity下载地址:点击前往下载页面(Unity需要 Unity 2021.3.2f1之后的版本) Gis office下载地址:点击前往下载页面 Bigemap离线服务器 下载地址: 点击前往下载页面 Unity用于数字孪生项…
阅读更多...
ilqr 算法说明

ilqr 算法说明

1 Introduction 希望能用比较简单的方式将ilqr算法进行整理和总结。 2 HJB方程 假定我们现在需要完成一个从A点到B点的任务&#xff0c;执行这段任务的时候&#xff0c;每一步都需要消耗能量&#xff0c;可以用下面这个图表示。 我们在执行这个A点到B点的任务的时候&#xf…
阅读更多...
什么是区块链？

什么是区块链？

区块链 区块链 &#xff08;英语&#xff1a;blockchain&#xff09;是借由 密码学 与 共识机制 等技术建立&#xff0c;存储数据的 保证不可篡改和不可伪造的 分布式技术。 什么是区块 区块 就是将一批数据打包在一起&#xff0c;并且给打包出来的区块编号。第一个区块的编…
阅读更多...
vue3-事件处理

vue3-事件处理

事件监听 DOM 事件监听指令 v-on 简写 v-on:click"handler" 或者 click"handler"事件处理器 (handler) 的值可以是&#xff1a; 内联事件处理器&#xff1a;比如 click 方法事件处理器&#xff1a;一个指向组件上定义的方法的属性名或是路径。 在内联…
阅读更多...
【干货】网络安全之URL过滤

【干货】网络安全之URL过滤

热门IT课程【视频教程】-华为/思科/红帽/oraclehttps://xmws-it.blog.csdn.net/article/details/134398330?spm1001.2014.3001.5502 URL过滤是一种针对用户的URL请求进行上网控制的技术&#xff0c;通过允许或禁止用户访问某些网页资源&#xff0c;达到规范上网行为和降低安全…
阅读更多...
matlab行操作快？还是列操作快？

matlab行操作快？还是列操作快？

在MATLAB中&#xff0c;通常情况下&#xff0c;对矩阵的列进行操作比对行进行操作更有效率。这是因为MATLAB中内存是按列存储的&#xff0c;因此按列访问数据会更加连续&#xff0c;从而提高访问速度。 一、实例代码 以下是一个简单的测试代码&#xff0c; % 测试矩阵大小 ma…
阅读更多...
Python实战 -- PySide6 制作天气查询软件

Python实战 -- PySide6 制作天气查询软件

一、环境准备 开发环境&#xff1a;Python 3.9.2 pycharm PySide6 申请天气情况 API &#xff1a;https://console.amap.com/dev/key/app designer 设计 ui 目录下 Weather.ui 转换为 Weather.py 结果显示 二、完整代码 import sysfrom PySide6 import QtWidgetsimport…
阅读更多...
Mysql深度分页优化的一个实践

Mysql深度分页优化的一个实践

问题简述: 最近在工作中遇到了大数据量的查询场景, 日产100w左右明细, 会查询近90天内的数据, 总数据量约1亿, 业务要求支持分页查询与导出. 无论是分页或导出都涉及到深度分页查询, mysql通过limit/offset实现的深度分页查询会存在全表扫描的问题, 比如offset1000w, limit10…
阅读更多...
7. UE5 RPG修改GAS的Attribute的值

7. UE5 RPG修改GAS的Attribute的值

前面几节文章介绍了如何在角色身上添加AbilitySystemComponent和AttributeSet。并且还实现了给AttributeSet添加自定义属性。接下来&#xff0c;实现一下如何去修改角色身上的Attribute的值。 实现拾取药瓶回血功能 首先创建一个继承于Actor的c类&#xff0c;actor是可以放置到…
阅读更多...
WAF攻防相关知识点总结2-代码免杀绕过

WAF攻防相关知识点总结2-代码免杀绕过

WAF的检测除了有对于非正常的流量检测外还对于非正常的数据包特征进行检测 以宝塔为例 在宝塔的后台可以放置一句话木马的文件 宝塔不会对于这个文件进行拦截&#xff0c;但是一旦我们使用菜刀蚁剑等webshell工具去进行连接的时候&#xff0c;数据报中有流量特征就会被拦截 …
阅读更多...
JRT和springboot比较测试

JRT和springboot比较测试

想要战胜他&#xff0c;必先理解他。这两天系统的学习Maven和跑springboot工程&#xff0c;从以前只是看着复杂&#xff0c;现在到亲手体验一下&#xff0c;亲自实践的才是更可靠的了解。 第一就是首先Maven侵入代码结构&#xff0c;代码一般要按约定搞src/main/java。如果是能…
阅读更多...
C#判断输入的数字是否符合货币格式

C#判断输入的数字是否符合货币格式

目录 一、用正则表达式判断输入是否符合货币格式 二、用double.TryParse()判断输入是否符合货币格式 一、用正则表达式判断输入是否符合货币格式 // 判断输入是否货币合格 using System.Text.RegularExpressions; namespace IsCurrency_Format {partial class Program{stati…
阅读更多...
虚幻UE 特效-Niagara特效实战-雨天

虚幻UE 特效-Niagara特效实战-雨天

回顾Niagara特效基础知识&#xff1a;虚幻UE 特效-Niagara特效初识 其他两篇实战&#xff1a;虚幻UE 特效-Niagara特效实战-火焰、烛火、虚幻UE 特效-Niagara特效实战-烟雾、喷泉 本篇笔记我们再来实战雨天&#xff0c;雨天主要用到了特效中的事件。 文章目录 一、雨天1、创建雨…
阅读更多...
九、K8S-label和label Selector

九、K8S-label和label Selector

label和label selector 标签和标签选择器 1、label 标签&#xff1a; 一个label就是一个key/value对 label 特性&#xff1a; label可以被附加到各种资源对象上一个资源对象可以定义任意数量的label同一个label可以被添加到任意数量的资源上 2、label selector 标签选择器 L…
阅读更多...
k8s的对外服务ingress

k8s的对外服务ingress

1、service的作用体现在两个方面 &#xff08;1&#xff09;集群内部&#xff1a;不断跟踪pod的变化&#xff0c;更新deployment中的pod对象&#xff0c;基于pod的ip地址不断变化的一种服务发现机制 &#xff08;2&#xff09;集群外部&#xff1a;类似于负载均衡器&#xff…
阅读更多...
【计算机组成与体系结构Ⅱ】Tomasulo 算法模拟和分析（实验）

【计算机组成与体系结构Ⅱ】Tomasulo 算法模拟和分析（实验）

实验5&#xff1a;Tomasulo 算法模拟和分析 一、实验目的 1&#xff1a;加深对指令级并行性及开发的理解。 2&#xff1a;加深对 Tomasulo 算法的理解。 3&#xff1a;掌握 Tomasulo 算法在指令流出、执行、写结果各阶段对浮点操作指令以及 load 和 store 指令进行了什么处…
阅读更多...
MATLAB R2023a安装教程

MATLAB R2023a安装教程

鼠标右击软件压缩包&#xff0c;选择“解压到MATLAB.R2023a”。 打开解压后的文件夹&#xff0c;鼠标右击“R2023a_Windows_iso”选择“装载”。 鼠标右击“setup.exe”选择“以管理员身份运行”。 点击“高级选项”选择“我有文件安装密钥”。 点击“是”&#xff0c;然后点击…
阅读更多...
【MCAL】ADC模块详解

【MCAL】ADC模块详解

目录 前言 正文 1.ADC模块介绍 2.关键概念及依赖的模块 2.1 ADC依赖的模块 3.ADC功能示例 3.1 ADC Buffer Access Mode示例 3.1.1配置&#xff08;Configuration&#xff09; 3.1.2 初始化&#xff08;Initialization&#xff09; 3.1.3 Adc_GetStreamLastPointer的使…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023