小兔鲜儿 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.hqwc.cn/news/314028.html

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

相关文章

使用docker轻量化部署snmp agent（SNMPv2访问）

使用docker轻量化部署snmp agent（SNMPv2访问）

文章目录 服务器环境说明单机部署&#xff08;非挂载conf文件版&#xff09;debian:buster-slim容器简介实现步骤创建Dockerfile创建SNMP配置文件 (snmpd.conf)构建Docker镜像运行Docker容器 注意补充复制容器文件到本地容器、镜像操作 单机部署&#xff08;挂载conf文件版&…
阅读更多...
会员案例库 | 零赛云：一站式工业数字化转型解决方案提供商

会员案例库 | 零赛云：一站式工业数字化转型解决方案提供商

1.案例应用领域及行业 能源行业、机械设备等离散制造业 2.案例描述 新奥动力是新奥集团旗下专注于微、小型燃气轮机研发及产业化的高科技创新型企业&#xff0c;是专业的分布式能源系统核心能源装备供应商和解决方案提供商。通过多年累积&#xff0c;已建立从市场到研发&…
阅读更多...
Python+Django 构建实验室药品管理和预警系统【源码】

Python+Django 构建实验室药品管理和预警系统【源码】

人生苦短&#xff0c;我用 Python。 今天给大家分享一个完整的实战案例&#xff1a;Python实现实验室药品管理和预警系统&#xff0c;文末附完整代码! 在线演示环境 项目演示地址&#xff1a;http://101.34.18.118:8002/ &#xff08;图片未压缩&#xff0c;所以加载有点慢&…
阅读更多...
PS制作淘宝主图

PS制作淘宝主图

PS制作淘宝主图 1.制作主图主页1.1新建800x800画板1.2填充前景色&#xff1a;altdel1.3选择圆角矩形&#xff0c;半径501.4按住ALT&#xff0c;往下投复制 2.调色 1.制作主图主页 1.1新建800x800画板 1.2填充前景色&#xff1a;altdel 1.3选择圆角矩形&#xff0c;半径50 居中对…
阅读更多...
力扣刷题记录（21）LeetCode：121、123、188、309

力扣刷题记录（21）LeetCode：121、123、188、309

目录 121. 买卖股票的最佳时机 123. 买卖股票的最佳时机 III 188. 买卖股票的最佳时机 IV 309. 买卖股票的最佳时机含冷冻期 如果某一天出售股票可以得到最大利润&#xff0c;那么股票买入的价格一定是这天之前股票的最低价格。 所以我们可以在遍历股票价格的时候不断更新股…
阅读更多...
[嵌入式AI从0开始到入土]9_yolov5在昇腾上推理

[嵌入式AI从0开始到入土]9_yolov5在昇腾上推理

[嵌入式AI从0开始到入土]嵌入式AI系列教程 注&#xff1a;等我摸完鱼再把链接补上 可以关注我的B站号工具人呵呵的个人空间&#xff0c;后期会考虑出视频教程&#xff0c;务必催更&#xff0c;以防我变身鸽王。 第一章 昇腾Altas 200 DK上手 第二章 下载昇腾案例并运行 第三章…
阅读更多...
性能优化（CPU优化技术）-ARM Neon详细介绍

性能优化（CPU优化技术）-ARM Neon详细介绍

本文主要介绍ARM Neon技术&#xff0c;包括SIMD技术、SIMT、ARM Neon的指令、寄存器、意图为读者提供对ARM Neon的一个整体理解。 &#x1f3ac;个人简介&#xff1a;一个全栈工程师的升级之路&#xff01; &#x1f4cb;个人专栏&#xff1a;高性能&#xff08;HPC&#xff09…
阅读更多...
自定义html5中日期选取器的样式

自定义html5中日期选取器的样式

自定义html5中日期选取器的样式 1. 前言1.1 关于 h5 的新特性1.2 使用浏览器 2. html5中日期选取器默认样式3. 自定义日期样式3.1 简单定义3.2 花式样式定义 4. 改变日期格式5. 参考6. 关于低版本浏览器隐藏小三角 1. 前言 1.1 关于 h5 的新特性 可看下面的文章 HTML5 新特性之…
阅读更多...
【AIGC-图片生成视频系列-5】I2V-Adapter：一种用于视频扩散模型的通用图像生成视频适配器

【AIGC-图片生成视频系列-5】I2V-Adapter：一种用于视频扩散模型的通用图像生成视频适配器

目录 一. 项目与贡献概述 二. 方法详解 a. 整体框架图 b. 帧相似性先验 三. 一般化图像生成动画结果 四. 基于个性化 T2I 模型的动画结果 五. 结合ControlNet动画结果 六. 项目论文和代码 七. 个人思考与总结 在快速发展的数字内容生成领域&#xff0c;焦点已从文本到…
阅读更多...
Linux系统安装DockerDocker-Compose

Linux系统安装DockerDocker-Compose

1、Docker安装 下载Docker依赖的组件 yum -y install yum-utils device-mapper-persistent-data lvm2 设置下载Docker服务的镜像源&#xff0c;设置为阿里云 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 安装Docker服务 …
阅读更多...
【揭秘】如何使用LinkedHashMap来实现一个LUR缓存？

【揭秘】如何使用LinkedHashMap来实现一个LUR缓存？

LRU&#xff08;Least Recently Used&#xff09;缓存是一种常用的缓存淘汰策略&#xff0c;用于在有限的缓存空间中存储数据。其基本思想是&#xff1a;如果数据最近被访问过&#xff0c;那么在未来它被访问的概率也更高。因此&#xff0c;LRU缓存会保留最近访问过的数据&…
阅读更多...
NGUI基础-三大基础组件之Panel组件

NGUI基础-三大基础组件之Panel组件

目录 Panel组件 Panel的作用&#xff1a; 注意&#xff1a; 相关关键参数讲解&#xff1a; Alpha&#xff08;透明度值&#xff09;&#xff1a; Depth&#xff08;深度&#xff09;&#xff1a; Clippinng&#xff08;裁剪&#xff09;&#xff1a; ​编辑 None Tex…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023