cashier_desktop/src/components/skuModal.vue

<template>
    <el-dialog :title="goods.name" width="600" v-model="dialogVisible">
        <div class="header">选择规格</div>
        <div v-loading="loading">
            <div class="row" v-for="(item, index) in goods.selectSpec" :key="index">
                <div class="title">{{ item.name }}</div>
                <div class="sku_wrap">
                    <!-- <div class="item" :class="{ active: val.active }" v-for="(val, i) in  item.value" :key="i"
                        @click="selectedSku(index, i)">{{ val.name }}</div> -->
                    <el-button :plain="!val.active" type="primary" v-for="(val, i) in  item.selectSpecResult
" :key="i" @click="selectedSku(index, i)" class="btn">{{ val.name }}</el-button>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="info">
                <template v-if="goodsInfo.id">
                    <span>库存：{{ goodsInfo.stockNumber }}</span>
                    <span>￥{{ goodsInfo.salePrice }}</span>
                </template>
            </div>
            <div class="btn_wrap">
                <div class="btn">
                    <el-button plain style="width: 100%;" @click="dialogVisible = false">取消</el-button>
                </div>
                <div class="btn">
                    <el-button type="primary" style="width: 100%;" :disabled="!goodsInfo.id"
                        @click="submitSku">确认</el-button>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { useUser } from "@/store/user.js"
import { queryProductSku } from '@/api/product'

const store = useUser();
const emit = defineEmits(['success'])

const type = ref('shop')
const dialogVisible = ref(false)
const goods = ref({})

const selectedSkuNum = ref(0)
const selectedSkuTag = ref('')

const goodsInfo = ref({})

const loading = ref(false)

// 确认选择规格
function submitSku() {
    dialogVisible.value = false
    switch (type.value) {
        case 'shop':
            emit('success', goodsInfo.value)
            break;
        case 'cart':
            emit('success', goods.value)
            break;
        default:
            break;
    }
}

// 选择规格
function selectedSku(index, i) {
    goods.value.selectSpec[index].selectSpecResult.map(item => {
        item.active = false
    })
    if (goods.value.selectSpec[index].selectSpecResult[i].active) {
        goods.value.selectSpec[index].selectSpecResult[i].active = false
        selectedSkuNum.value--
    } else {
        goods.value.selectSpec[index].selectSpecResult[i].active = true
        selectedSkuNum.value++
    }
    selectedSuccess()
}

// 规格是否选择完
function selectedSuccess() {
    let num = 0
    let tag = []
    goods.value.selectSpec.map(item => {
        item.selectSpecResult.map(val => {
            if (val.active) {
                num++
                tag.push(val.name)
            }
        })
        selectedSkuNum.value = num
        selectedSkuTag.value = tag.join(',')
    })

    if (selectedSkuNum.value >= goods.value.selectSpec.length) {
        // 规格选完了
        queryProductSkuAjax()
    }
}

// 通过选中的商品规格查询价格
async function queryProductSkuAjax() {
    try {
        loading.value = true
        const res = await queryProductSku({
            shopId: store.userInfo.shopId,
            productId: type.value == 'shop' ? goods.value.id : goods.value.productId,
            spec_tag: selectedSkuTag.value
        })
        goodsInfo.value = res
        if (type.value == 'cart') {
            goods.value.skuId = res.id
        }
        setTimeout(() => {
            loading.value = false
        }, 100)
    } catch (error) {
        loading.value = false
        console.log(error)
    }
}

// 显示规格
function show(item, t = 'shop') {
    goodsInfo.value = {}
    goods.value = {}
    selectedSkuNum.value = 0
    dialogVisible.value = true
    goods.value = ""
    goods.value = item
    type.value = t
    goods.value.selectSpec = JSON.parse(goods.value.selectSpec)
    goods.value.selectSpec.map(item => {
        let arr = []
        item.selectSpecResult.map(val => {
            switch (type.value) {
                case 'shop':
                    arr.push({
                        active: false,
                        name: val
                    })
                    break;
                case 'cart':
                    // 如果从购物车选择规格需要做选中效果
                    const skus = goods.value.skuName.split(',')
                    arr.push({
                        active: !!skus.find(item => item === val),
                        name: val
                    })
                    break;
                default:
                    break;
            }
        })
        item.selectSpecResult = arr
    })

    let arr = []

    goods.value.selectSpec.map(item => {
        if (item.selectSpecResult.length) {
            arr.push({ ...item })
        }
    })

    goods.value.selectSpec = arr

    selectedSuccess()
}

defineExpose({
    show
})
</script>

<style scoped lang="scss">
.header {
    color: #999;
    font-size: 20px;
}

.row {
    border-bottom: 1px solid #ececec;
    margin-top: var(--el-font-size-base);

    .title {
        font-size: var(--el-font-size-base);
    }

    .sku_wrap {
        display: flex;
        padding: var(--el-font-size-base) 0;
        flex-wrap: wrap;
        gap: var(--el-font-size-base);
    }
}

.footer {
    padding-top: 30px;

    .info {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 20px;
    }

    .btn_wrap {
        display: flex;

        .btn {
            flex: 1;

            &:last-child {
                margin-left: 14px;
            }
        }
    }
}
</style>