cashier_desktop/src/components/skuModal.vue

<template>
    <el-dialog :title="goods.name" width="800" v-model="dialogVisible">
        <div class="header">选择规格</div>
        <div v-loading="loading">
            <div class="row" v-for="(item, index) in goods.tbProductSpec.specList" :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.value" :key="i"
                        @click="selectedSku(index, i)">{{ 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">确认</el-button>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { useUser } from "@/store/user.js"
const store = useUser();

import { queryProductSku } from '@/api/product'

const dialogVisible = ref(false)
const goods = ref({})

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

const goodsInfo = ref({})

const loading = ref(false)

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

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

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

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

// 显示规格
function show(item) {
    goodsInfo.value = {}
    goods.value = {}
    selectedSkuNum.value = 0
    dialogVisible.value = true
    goods.value = item
    if (typeof goods.value.tbProductSpec.specList == 'string') {
        goods.value.tbProductSpec.specList = JSON.parse(goods.value.tbProductSpec.specList)
        goods.value.tbProductSpec.specList.map(item => {
            let arr = []
            item.value.map(val => {
                arr.push({
                    active: false,
                    name: val
                })
            })
            item.value = arr
        })
    }
    selectedSuccess()
}

defineExpose({
    show
})
</script>

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

.row {
    border-bottom: 1px solid #ececec;
    margin-top: 20px;

    .title {
        font-size: 20px;
    }

    .sku_wrap {
        display: flex;
        padding: 14px 0;

        .item {
            color: var(--primary-color);
            padding: 8px 16px;
            font-size: 18px;
            border: 1px solid var(--primary-color);
            margin-right: 14px;
            border-radius: 2px;

            &.active {
                background-color: var(--primary-color);
                color: #fff;
            }
        }
    }
}

.footer {
    padding-top: 100px;

    .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>