UviewUltra 4.0

Appearance

GoodsSku 商品规格选择 4.4.0 ​

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

使用场景 ​

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

平台差异说明 ​

|App（vue）|App（uvue/uni-app-x）|App（nvue）|H5|小程序| |:-😐:-😐:-😐:-😐:-😐:-😐 |√|√|√|√|

基本使用 ​

  • 通过goodsInfo设置商品基本信息（图片、价格、库存等）
  • 通过skuTree设置规格树形结构
  • 通过skuList设置具体规格组合及其价格、库存等信息
js
<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>

自定义最大购买数量 ​

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

html
<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)参数设置确认按钮的文字内容。

html
<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参数启用页面内联模式，组件将直接显示在页面中而不是弹窗形式。

html
<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{}-
skuTreeSKU树形结构，定义规格分类和选项Array[]-
skuListSKU列表，包含各规格组合的价格、库存等信息Array[]-
maxBuy最大购买数量Number999-
confirmText确认按钮文字String确定-
closeable是否显示关闭弹窗按钮Booleantruefalse
pageInline是否页面内联模式Booleanfalsetrue

Events ​

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

Slots ​

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