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" :disabled="val.disabled" @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'
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)

const selecSkuArray = ref([])

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

// 选择规格
function selectedSku(index = 0, i = 0) {
    goods.value.selectSpec[index].selectSpecResult.map(item => {
        item.active = false
    })


    if (index == 0) {
        selecSkuArray.value = []
    }


    if (selecSkuArray.value.length - 1 > index) {
        // console.log(selecSkuArray.value.length - 1);
        // console.log(index);
        selecSkuArray.value.splice(index + 1, selecSkuArray.value.length)
    }

    selecSkuArray.value[index] = goods.value.selectSpec[index].selectSpecResult[i].name

    if (index < goods.value.selectSpec.length - 1) {
        selectedSkuNum.value = 0
        goods.value.selectSpec.map((item, idx) => {
            if (index < idx) {
                item.selectSpecResult.map(val => {
                    val.disabled = true
                    val.active = false
                })
            }
        })

        goods.value.selectSpec[index + 1].selectSpecResult.map(item => {
            goods.value.skuList.map(val => {
                // console.log(val);
                // console.log(`${selecSkuArray.value.join(',')},${item.name}`);
                // console.log(val.specInfo.indexOf(`${selecSkuArray.value.join(',')},${item.name}`));
                if (val.specInfo.indexOf(`${selecSkuArray.value.join(',')},${item.name}`) != -1 && val.isGrounding) {
                    item.disabled = 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()
    } else {
        goodsInfo.value = {}
    }
}

// 通过选中的商品规格查询价格
async function queryProductSkuAjax() {
    goods.value.skuList.map(item => {
        if (item.specInfo == selectedSkuTag.value) {
            goodsInfo.value = item
        }
    })
}

// 显示规格
function show(item, t = 'shop') {
    type.value = t
    let arr = []
    for (let val in item.selectSpecInfo) {
        if (item.selectSpecInfo[val].length) {

            switch (type.value) {
                case 'shop':
                    arr.push({
                        name: val,
                        selectSpecResult: item.selectSpecInfo[val].map(item => {
                            return {
                                active: false,
                                name: item,
                                disabled: false
                            }
                        })
                    })
                    break;
                case 'cart':
                    // 如果从购物车选择规格需要做选中效果
                    const skus = item.sku_name.split(',')
                    arr.push({
                        name: val,
                        selectSpecResult: item.selectSpecInfo[val].map(item => {
                            return {
                                active: !!skus.find(val => val === item),
                                name: item,
                                disabled: false
                            }
                        })
                    })
                    break;
                default:
                    break;
            }
        }
    }

    item.selectSpec = arr

    // 赋值新的规格数据
    goodsInfo.value = {}
    goods.value = {}
    selectedSkuNum.value = 0
    dialogVisible.value = true
    goods.value = ""
    goods.value = item

    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>