im-ui-mobile 0.1.0 → 0.1.2

package/components/im-sku/im-sku.vue

@@ -0,0 +1,720 @@
+<template>
+    <im-popup v-model="innerVisible" position="bottom" :closeOnClickOverlay="true" @close="handleClose"
+        :show-close="showClose">
+        <view class="im-sku">
+            <!-- 商品信息 -->
+            <view class="sku-header">
+                <image class="sku-goods-image" :src="currentGoods.imgUrl" mode="aspectFill" />
+                <view class="sku-goods-info">
+                    <view class="sku-goods-price">
+                        <text class="sku-current-price">
+                            {{ formatPrice(currentPrice) }}
+                        </text>
+                        <text v-if="currentOriginPrice" class="sku-origin-price">
+                            {{ formatPrice(currentOriginPrice) }}
+                        </text>
+                    </view>
+                    <view class="sku-goods-title">
+                        {{ currentGoods.title }}
+                    </view>
+                    <view v-if="selectedSku.valid" class="sku-selected-info">
+                        <text v-if="showStock" class="sku-stock">
+                            库存 {{ currentStock }} {{ currentGoods.unit || '件' }}
+                        </text>
+                        <text v-if="selectedSkuText" class="sku-selected-text">
+                            已选：{{ selectedSkuText }}
+                        </text>
+                    </view>
+                    <view v-else class="sku-tip">
+                        请选择规格
+                    </view>
+                </view>
+            </view>
+
+            <!-- 属性/规格选择 -->
+            <scroll-view class="sku-body" scroll-y :style="{ maxHeight: bodyMaxHeight + 'rpx' }">
+                <!-- 属性列表 -->
+                <view v-for="attr in attrs" :key="attr.id || attr.name" class="sku-spec-group">
+                    <view class="sku-spec-title">
+                        {{ attr.name }}
+                    </view>
+                    <view class="sku-spec-values">
+                        <view v-for="value in attr.values" :key="value.id || value.name" class="sku-spec-value" :class="[
+                            getSpecValueClass(attr.name, value.name),
+                            { 'sku-spec-value-disabled': value.disabled }
+                        ]" :style="value.style" @click="selectAttr(attr.name, value.name)">
+                            <!-- 图片规格 -->
+                            <template v-if="value.imgUrl">
+                                <image class="sku-spec-image" :src="value.imgUrl" mode="aspectFill" />
+                                <text class="sku-spec-image-text">{{ value.name }}</text>
+                            </template>
+
+                            <!-- 文字规格 -->
+                            <template v-else>
+                                {{ value.name }}
+                            </template>
+
+                            <!-- 选中标记 -->
+                            <view v-if="isSpecSelected(attr.name, value.name)" class="sku-spec-selected">
+                                <im-icon name="check" size="14" color="#ffffff" />
+                            </view>
+                        </view>
+                    </view>
+                </view>
+
+                <!-- 规格列表 -->
+                <view v-for="spec in specs" :key="spec.id || spec.name" class="sku-spec-group">
+                    <view class="sku-spec-title">
+                        {{ spec.name }}
+                    </view>
+                    <view class="sku-spec-values">
+                        <view v-for="value in spec.values" :key="value.id || value.name" class="sku-spec-value" :class="[
+                            getSpecValueClass(spec.name, value.name),
+                            { 'sku-spec-value-disabled': value.disabled }
+                        ]" :style="value.style" @click="selectSpec(spec.name, value.name)">
+                            <!-- 图片规格 -->
+                            <template v-if="value.imgUrl">
+                                <image class="sku-spec-image" :src="value.imgUrl" mode="aspectFill" />
+                                <text class="sku-spec-image-text">{{ value.name }}</text>
+                            </template>
+
+                            <!-- 文字规格 -->
+                            <template v-else>
+                                {{ value.name }}
+                            </template>
+
+                            <!-- 选中标记 -->
+                            <view v-if="isSpecSelected(spec.name, value.name)" class="sku-spec-selected">
+                                <im-icon name="check" size="14" color="#ffffff" />
+                            </view>
+                        </view>
+                    </view>
+                </view>
+
+                <!-- 数量选择 -->
+                <view class="sku-quantity">
+                    <view class="sku-quantity-title">购买数量</view>
+                    <im-stepper v-model="quantity" :min="quantityLimit.min || 1"
+                        :max="Math.min(quantityLimit.max || 9999, currentStock)" :step="quantityLimit.step || 1"
+                        :disabled="!selectedSku.valid" />
+                </view>
+
+                <!-- 商品描述 -->
+                <view v-if="currentGoods.description" class="sku-description">
+                    <view class="sku-description-title">商品描述</view>
+                    <view class="sku-description-content">
+                        {{ currentGoods.description }}
+                    </view>
+                </view>
+            </scroll-view>
+
+            <!-- 操作按钮 -->
+            <view class="sku-footer">
+                <!-- 自定义操作按钮 -->
+                <view v-for="(action, index) in customActions" :key="index" class="sku-custom-action"
+                    :class="`sku-action-${action.type || 'default'}`" :style="action.style"
+                    @click="handleCustomAction(index, action)">
+                    {{ action.text }}
+                </view>
+
+                <!-- 加入购物车 -->
+                <view v-if="showAddToCart" class="sku-action sku-action-cart"
+                    :class="{ 'sku-action-disabled': !selectedSku.valid }" @click="addToCart">
+                    <im-icon name="cart-o" size="18" />
+                    加入购物车
+                </view>
+
+                <!-- 立即购买 -->
+                <view v-if="showQuickBuy" class="sku-action sku-action-buy"
+                    :class="{ 'sku-action-disabled': !selectedSku.valid }" @click="buyNow">
+                    立即购买
+                </view>
+
+                <!-- 确认按钮（默认） -->
+                <view v-if="!showAddToCart && !showQuickBuy && customActions.length === 0"
+                    class="sku-action sku-action-confirm" :class="{ 'sku-action-disabled': !selectedSku.valid }"
+                    @click="confirm">
+                    确认
+                </view>
+            </view>
+        </view>
+    </im-popup>
+</template>
+
+<script lang="ts" setup>
+import type {
+    SkuProps,
+    SkuEmits,
+    SelectedSku
+} from '../../types/components/sku'
+
+const props = withDefaults(defineProps<SkuProps>(), {
+    current: undefined,
+    visible: false,
+    attrs: () => [],
+    specs: () => [],
+    skus: () => [],
+    quantityLimit: () => ({
+        min: 1,
+        max: 9999,
+        step: 1
+    }),
+    customActions: () => [],
+    showQuickBuy: true,
+    showAddToCart: true,
+    showStock: true,
+    showPrice: true,
+    resetOnClose: true,
+    showClose: false
+})
+
+const emit = defineEmits<SkuEmits>()
+
+// 响应式数据
+const innerVisible = ref(false)
+const quantity = ref(1)
+const selectedAttrs = ref<Record<string, string>>({})
+const selectedSpecs = ref<Record<string, string>>({})
+const bodyMaxHeight = ref(800)
+
+// 计算属性
+const currentGoods = computed(() => props.goods)
+const currentSku = computed(() => {
+    return findSkuBySpecs(selectedSpecs.value)
+})
+
+const currentPrice = computed(() => {
+    return currentSku.value?.price || props.goods.price
+})
+
+const currentOriginPrice = computed(() => {
+    return currentSku.value?.originPrice || props.goods.originPrice
+})
+
+const currentStock = computed(() => {
+    return currentSku.value?.stock || props.goods.stock || 0
+})
+
+const selectedSku = computed<SelectedSku>(() => {
+    let skuItem = currentSku.value
+    let valid = true
+
+    if (props.attrs.length > 0) {
+        valid = areAllRequiredAttrsSelected()
+    }
+
+    if (props.specs.length > 0 && props.skus.length > 0) {
+        valid = !!skuItem && skuItem.stock > 0 && !skuItem.disabled && areAllRequiredSpecsSelected()
+    }
+
+    return {
+        selectedAttrs: { ...selectedAttrs.value },
+        selectedSpecs: { ...selectedSpecs.value },
+        skuId: skuItem?.id,
+        quantity: quantity.value,
+        price: currentPrice.value,
+        originPrice: currentOriginPrice.value,
+        stock: currentStock.value,
+        valid,
+        goodsInfo: currentGoods.value
+    }
+})
+
+const selectedSkuText = computed(() => {
+    const specs = selectedSpecs.value
+    if (!specs || Object.keys(specs).length === 0) return ''
+
+    return Object.values(specs).join('，')
+})
+
+// 根据选中的规格查找SKU
+const findSkuBySpecs = (specs: Record<string, string>) => {
+    if (Object.keys(specs).length === 0 || Object.keys(specs).length !== props.specs.length) {
+        return
+    }
+
+    return props.skus.find(sku => {
+        return Object.keys(specs).every(key => {
+            return sku.specs[key] === specs[key]
+        })
+    })
+}
+
+// 检查规格是否被选中
+const isSpecSelected = (specName: string, valueName: string) => {
+    return selectedAttrs.value[specName] === valueName || selectedSpecs.value[specName] === valueName
+}
+
+// 获取规格值的类名
+const getSpecValueClass = (specName: string, valueName: string) => {
+    const classes: string[] = []
+
+    if (isSpecSelected(specName, valueName)) {
+        classes.push('sku-spec-value-selected')
+    }
+
+    // 检查是否可用
+    const value = props.specs
+        .find(s => s.name === specName)
+        ?.values.find(v => v.name === valueName)
+
+    if (value?.disabled) {
+        classes.push('sku-spec-value-disabled')
+    }
+
+    return classes.join(' ')
+}
+
+
+// 选择属性
+const selectAttr = (attrName: string, valueName: string) => {
+    const attr = props.attrs.find(s => s.name === attrName)
+    if (!attr) return
+
+    const value = attr.values.find(v => v.name === valueName)
+    if (!value || value.disabled) return
+
+    // 如果已经选中，则取消选中
+    if (selectedAttrs.value[attrName] === valueName) {
+        const newSpecs = { ...selectedAttrs.value }
+        delete newSpecs[attrName]
+        selectedAttrs.value = newSpecs
+    } else {
+
+        // 选中新的规格值
+        selectedAttrs.value = {
+            ...selectedAttrs.value,
+            [attrName]: valueName
+        }
+    }
+
+    // 触发规格变化事件
+    emit('spec-change', selectedSku.value)
+}
+
+// 选择规格
+const selectSpec = (specName: string, valueName: string) => {
+    const spec = props.specs.find(s => s.name === specName)
+    if (!spec) return
+
+    const value = spec.values.find(v => v.name === valueName)
+    if (!value || value.disabled) return
+
+    // 如果已经选中，则取消选中
+    if (selectedSpecs.value[specName] === valueName) {
+        const newSpecs = { ...selectedSpecs.value }
+        delete newSpecs[specName]
+        selectedSpecs.value = newSpecs
+    } else {
+
+        // 选中新的规格值
+        selectedSpecs.value = {
+            ...selectedSpecs.value,
+            [specName]: valueName
+        }
+    }
+
+    // 触发规格变化事件
+    emit('spec-change', selectedSku.value)
+
+    // 如果规格组合发生变化，重置数量
+    const sku = findSkuBySpecs(selectedSpecs.value)
+    if (sku) {
+        quantity.value = Math.max(
+            props.quantityLimit.min || 1,
+            Math.min(quantity.value, sku.stock)
+        )
+    }
+}
+
+// 格式化价格
+const formatPrice = (price: number) => {
+    const yuan = price / 100
+    return `¥${yuan.toFixed(2)}`
+}
+
+// 检查所有必选属性是否都已被选中
+const areAllRequiredAttrsSelected = (): boolean => {
+    let selected = true
+
+    props.attrs.map(s => {
+        if (!s.required) { return }
+        selected = Object.keys(selectedAttrs.value).includes(s.name)
+    })
+
+    return selected
+}
+
+
+// 检查所有必选规格是否都已被选中
+const areAllRequiredSpecsSelected = (): boolean => {
+    let selected = true
+
+    props.specs.map(s => {
+        if (!s.required) { return }
+        selected = Object.keys(selectedSpecs.value).includes(s.name)
+    })
+
+    return selected
+}
+
+// 加入购物车
+const addToCart = () => {
+    if (!selectedSku.value.valid) return
+
+    emit('add-to-cart', selectedSku.value)
+    closeSku()
+}
+
+// 立即购买
+const buyNow = () => {
+    if (!selectedSku.value.valid) return
+
+    emit('buy-now', selectedSku.value)
+    closeSku()
+}
+
+// 确认
+const confirm = () => {
+    if (!selectedSku.value.valid) return
+
+    emit('confirm', selectedSku.value)
+    closeSku()
+}
+
+// 处理自定义操作
+const handleCustomAction = (index: number, action: any) => {
+    if (action.onClick) {
+        action.onClick()
+    }
+    emit('custom-action', index)
+}
+
+// 关闭SKU选择器
+const closeSku = () => {
+    innerVisible.value = false
+}
+
+// 处理关闭
+const handleClose = () => {
+    emit('close')
+
+    if (props.resetOnClose) {
+        // 重置选中的规格和数量
+        selectedSpecs.value = {}
+        quantity.value = props.quantityLimit.min || 1
+    }
+}
+
+// 监听visible变化
+watch(() => props.visible, (newVal) => {
+    innerVisible.value = newVal
+
+    if (newVal) {
+        // 打开时初始化数据
+        if (props.initialSku) {
+            selectedAttrs.value = { ...props.initialSku.selectedAttrs }
+            selectedSpecs.value = { ...props.initialSku.selectedSpecs }
+            quantity.value = props.initialSku.quantity
+        }
+
+        // 计算滚动区域高度
+        nextTick(() => {
+            const systemInfo = uni.getSystemInfoSync()
+            bodyMaxHeight.value = systemInfo.windowHeight * 0.8
+        })
+    }
+})
+
+// 监听innerVisible变化（用于v-model）
+watch(innerVisible, (newVal) => {
+    emit('update:visible', newVal)
+})
+
+// 监听数量变化
+watch(quantity, (newVal) => {
+    emit('quantity-change', newVal)
+})
+
+</script>
+
+<style lang="scss" scoped>
+// 文本溢出省略
+@mixin text-ellipsis($lines: 1) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @if $lines ==1 {
+        white-space: nowrap;
+    }
+
+    @else {
+        display: -webkit-box;
+        -webkit-line-clamp: $lines;
+        -webkit-box-orient: vertical;
+    }
+}
+
+.im-sku {
+    background: #ffffff;
+    border-radius: 30rpx 30rpx 0 0;
+    overflow: hidden;
+
+    .sku-header {
+        display: flex;
+        padding: 30rpx;
+        border-bottom: 1px solid #f5f5f5;
+        position: relative;
+
+        .sku-goods-image {
+            width: 80px;
+            height: 80px;
+            border-radius: 8px;
+            margin-right: 12px;
+            flex-shrink: 0;
+        }
+
+        .sku-goods-info {
+            flex: 1;
+            min-width: 0;
+
+            .sku-goods-price {
+                display: flex;
+                align-items: center;
+                margin-bottom: 8px;
+
+                .sku-current-price {
+                    font-size: 20px;
+                    font-weight: 600;
+                    color: #ff4444;
+                    margin-right: 8px;
+                }
+
+                .sku-origin-price {
+                    font-size: 14px;
+                    color: #999999;
+                    text-decoration: line-through;
+                }
+            }
+
+            .sku-goods-title {
+                font-size: 14px;
+                color: #333333;
+                line-height: 1.4;
+                margin-bottom: 8px;
+                @include text-ellipsis(2);
+            }
+
+            .sku-selected-info {
+                font-size: 12px;
+                color: #666666;
+
+                .sku-stock {
+                    margin-right: 12px;
+                }
+
+                .sku-selected-text {
+                    color: #ff4444;
+                }
+            }
+
+            .sku-tip {
+                font-size: 12px;
+                color: #ff4444;
+            }
+        }
+    }
+
+    .sku-body {
+        padding: 0 30rpx;
+
+        .sku-spec-group {
+            padding: 30rpx 0;
+            border-bottom: 1px solid #f5f5f5;
+
+            &:last-child {
+                border-bottom: none;
+            }
+
+            .sku-spec-title {
+                font-size: 14px;
+                color: #333333;
+                font-weight: 500;
+                margin-bottom: 12px;
+            }
+
+            .sku-spec-values {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 10px;
+
+                .sku-spec-value {
+                    position: relative;
+                    padding: 8px 30rpx;
+                    border: 1px solid #e5e5e5;
+                    border-radius: 20px;
+                    font-size: 13px;
+                    color: #333333;
+                    background-color: #ffffff;
+                    transition: all 0.2s;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    min-width: 60px;
+                    box-sizing: border-box;
+
+                    &.sku-spec-value-selected {
+                        border-color: #ff4444;
+                        color: #ff4444;
+                        background-color: rgba(255, 68, 68, 0.05);
+                    }
+
+                    &.sku-spec-value-disabled {
+                        color: #cccccc;
+                        border-color: #f0f0f0;
+                        background-color: #f9f9f9;
+                        cursor: not-allowed;
+
+                        &::after {
+                            content: '';
+                            position: absolute;
+                            top: 50%;
+                            left: 8px;
+                            right: 8px;
+                            height: 1px;
+                            background-color: #cccccc;
+                            transform: rotate(-45deg);
+                        }
+                    }
+
+                    .sku-spec-image {
+                        width: 40px;
+                        height: 40px;
+                        border-radius: 4px;
+                        margin-right: 8px;
+                    }
+
+                    .sku-spec-image-text {
+                        font-size: 12px;
+                    }
+
+                    .sku-spec-selected {
+                        position: absolute;
+                        right: -1px;
+                        bottom: -1px;
+                        width: 30rpx;
+                        height: 30rpx;
+                        background-color: #ff4444;
+                        border-radius: 50%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    }
+                }
+            }
+        }
+
+        .sku-quantity {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 30rpx 0;
+            border-bottom: 1px solid #f5f5f5;
+            width: calc(100% - 60rpx);
+
+            .sku-quantity-title {
+                font-size: 14px;
+                color: #333333;
+                font-weight: 500;
+            }
+        }
+
+        .sku-description {
+            padding: 30rpx 0;
+
+            .sku-description-title {
+                font-size: 14px;
+                color: #333333;
+                font-weight: 500;
+                margin-bottom: 8px;
+            }
+
+            .sku-description-content {
+                font-size: 13px;
+                color: #666666;
+                line-height: 1.5;
+            }
+        }
+    }
+
+    .sku-footer {
+        display: flex;
+        padding: 12px 30rpx;
+        background-color: #ffffff;
+        border-top: 1px solid #f5f5f5;
+        gap: 10px;
+
+        .sku-custom-action {
+            flex: 1;
+            padding: 12px 0;
+            border-radius: 20px;
+            font-size: 14px;
+            text-align: center;
+            font-weight: 500;
+
+            &.sku-action-default {
+                background-color: #f5f5f5;
+                color: #333333;
+            }
+
+            &.sku-action-primary {
+                background-color: #1989fa;
+                color: #ffffff;
+            }
+
+            &.sku-action-warning {
+                background-color: #ff976a;
+                color: #ffffff;
+            }
+
+            &.sku-action-danger {
+                background-color: #ff4444;
+                color: #ffffff;
+            }
+        }
+
+        .sku-action {
+            flex: 1;
+            padding: 12px 0;
+            border-radius: 20px;
+            font-size: 14px;
+            text-align: center;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 6px;
+
+            &.sku-action-disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+
+            &.sku-action-cart {
+                background-color: #f5f5f5;
+                color: #333333;
+            }
+
+            &.sku-action-buy {
+                background-color: #ff4444;
+                color: #ffffff;
+            }
+
+            &.sku-action-confirm {
+                background-color: #1989fa;
+                color: #ffffff;
+            }
+        }
+    }
+}
+</style>