uview-plus

# GoodsSku 商品规格选择 3.5.22

打开

商品规格选择组件，用于电商场景中选择商品的不同规格和数量。

# 使用场景

  • 电商商品详情页中选择商品规格（如颜色、尺寸等）
  • 展示商品不同规格对应的价格和库存
  • 控制商品购买数量

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ √ √ √

# 基本使用

  • 通过goodsInfo设置商品基本信息（图片、价格、库存等）
  • 通过skuTree设置规格树形结构
  • 通过skuList设置具体规格组合及其价格、库存等信息
<script setup>
import { ref } from 'vue';

// 商品信息
const goodsInfo = ref({
	image: 'https://picsum.photos/200/200',
	price: 99.00,
	stock: 100
});

// SKU树形结构
const skuTree = ref([
	{
		label: '颜色',
		name: 'color',
		children: [
			{ id: 1, name: '红色' },
			{ id: 2, name: '蓝色' },
			{ id: 3, name: '黑色' }
		]
	},
	{
		label: '尺寸',
		name: 'size',
		children: [
			{ id: 1, name: 'S' },
			{ id: 2, name: 'M' },
			{ id: 3, name: 'L' },
			{ id: 4, name: 'XL' }
		]
	}
]);

// SKU列表
const skuList = ref([
	{
		id: 1,
		color: 1,
		size: 1,
		price: 99.00,
		stock: 50
	},
	{
		id: 2,
		color: 1,
		size: 2,
		price: 99.00,
		stock: 40
	},
	{
		id: 3,
		color: 2,
		size: 1,
		price: 109.00,
		stock: 30
	},
	{
		id: 4,
		color: 2,
		size: 3,
		price: 109.00,
		stock: 20
	},
	{
		id: 5,
		color: 3,
		size: 4,
		price: 89.00,
		stock: 60
	}
]);

function confirmSku(e) {
	uni.showToast({
		title: `选择了: ${e.selectedText}, 数量: ${e.num}`,
		icon: 'none'
	});
}
</script>

<script>
export default {
	data() {
		return {
			// 商品信息
			goodsInfo: {
				image: 'https://picsum.photos/200/200',
				price: 99.00,
				stock: 100
			},
			// SKU树形结构
			skuTree: [
				{
					label: '颜色',
					name: 'color',
					children: [
						{ id: 1, name: '红色' },
						{ id: 2, name: '蓝色' },
						{ id: 3, name: '黑色' }
					]
				},
				{
					label: '尺寸',
					name: 'size',
					children: [
						{ id: 1, name: 'S' },
						{ id: 2, name: 'M' },
						{ id: 3, name: 'L' },
						{ id: 4, name: 'XL' }
					]
				}
			],
			// SKU列表
			skuList: [
				{
					id: 1,
					color: 1,
					size: 1,
					price: 99.00,
					stock: 50
				},
				{
					id: 2,
					color: 1,
					size: 2,
					price: 99.00,
					stock: 40
				},
				{
					id: 3,
					color: 2,
					size: 1,
					price: 109.00,
					stock: 30
				},
				{
					id: 4,
					color: 2,
					size: 3,
					price: 109.00,
					stock: 20
				},
				{
					id: 5,
					color: 3,
					size: 4,
					price: 89.00,
					stock: 60
				}
			]
		};
	},
	methods: {
		confirmSku(e) {
			uni.showToast({
				title: `选择了: ${e.selectedText}, 数量: ${e.num}`,
				icon: 'none'
			});
		}
	}
};
</script>

# 自定义最大购买数量

通过maxBuy参数设置最大购买数量，默认为999。

<template>
	<view>
		<up-goods-sku
			:goodsInfo="goodsInfo"
			:skuTree="skuTree"
			:skuList="skuList"
			:maxBuy="10"
			@confirm="confirmSku"
		>
            <template #trigger>
                <up-button :stop="false" type="error">打开SKU弹窗(最大购买10件)</up-button>
            </template>
        </up-goods-sku>
	</view>
</template>

# 自定义确认按钮文字

通过[confirmText](file:///Users/jry/Documents/www/xyito/open/uview-plus/src/uni_modules/uview-plus/types/comps/modal.d.ts#L20-L20)参数设置确认按钮的文字内容。

<template>
	<view>
		<up-goods-sku
			:goodsInfo="goodsInfo"
			:skuTree="skuTree"
			:skuList="skuList"
			confirmText="立即购买"
			@confirm="confirmSku"
		>
            <template #trigger>
                <up-button :stop="false" type="warning">打开SKU弹窗</up-button>
            </template>
        </up-goods-sku>
	</view>
</template>

# 页面内联模式

通过pageInline参数启用页面内联模式，组件将直接显示在页面中而不是弹窗形式。

<template>
	<view>
		<up-goods-sku
			:goodsInfo="goodsInfo"
			:skuTree="skuTree"
			:skuList="skuList"
            :pageInline="true"
			confirmText="立即购买"
			@confirm="confirmSku"
		>
        </up-goods-sku>
	</view>
</template>

# 右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码


 github  gitee

# API

# Props

参数 说明 类型 默认值 可选值
goodsInfo 商品信息，包含图片、价格、库存等 Object {} -
skuTree SKU树形结构，定义规格分类和选项 Array [] -
skuList SKU列表，包含各规格组合的价格、库存等信息 Array [] -
maxBuy 最大购买数量 Number 999 -
confirmText 确认按钮文字 String 确定 -
closeable 是否显示关闭弹窗按钮 Boolean true false
pageInline 是否页面内联模式 Boolean false true

# Events

事件名 说明 回调参数
open 弹窗打开时触发 -
close 弹窗关闭时触发 -
confirm 点击确认按钮时触发 { sku: Object, goodsInfo: Object, num: Number, selectedText: String }

# Slots

名称 说明
trigger 触发弹窗的元素
header 弹窗头部区域

← Color 色彩 →