1.類(lèi)似選座位那種功能 我的功能座位 不是html元素 而是 座位圖片 都是圖片

const onConfirm = () => {
    // const area_arr = selectedSeat.value.map((item) => {
    //     return item.areaId;
    // });
    // const abc = isRepeat(area_arr);
    // if (!abc) {
    //     Taro.showToast({
    //         title: "請(qǐng)選擇同一價(jià)格的座位，暫不支持跨區(qū)域選座~~",
    //         icon: "none",
    //         duration: 2000,
    //     });
    //     return;
    // }
    // phoneInputVisible.value = true;
    try {
        const area_arr = selectedSeat.value.map((item) => {
            return item.areaId;
        });
        const abc = isRepeat(area_arr);
        if (!abc) {
            Taro.showToast({
                title: "請(qǐng)選擇同一價(jià)格的座位，暫不支持跨區(qū)域選座~~",
                icon: "none",
                duration: 2000,
            });

            return;
        }
        let result = selectedSeat.value.every(function (element, index, array) {
            console.log(element, "element");
            return checkSeat(element)
        })
        console.log(result, "result");

        // 開(kāi)始計(jì)算是否留下空位 ------------ 結(jié)束
        if (!result) {
            // 如果 result 為false
            Taro.showToast({
                title: "請(qǐng)不要留下空座位~~",
                icon: "none"
            })
            return
        }
        phoneInputVisible.value = true;

        return
    } catch (e) {
        console.log(e);
    }
};
// 檢查每個(gè)座位是否會(huì)留下空位
const checkSeat = (element) => {
    console.log(element, "element");
    // 標(biāo)準(zhǔn)為 1.左右側(cè)都必須保留 兩格座位 + 最大順延座位(也就是已選座位減去自身)
    // 2.靠墻和靠已售的座位一律直接通過(guò)
    const checkNum = 2 + selectedSeat.value.length - 1
    const gRowBasic = element.gRow
    const gColBasic = element.gCol
    console.log(checkNum, gRowBasic, gColBasic);
    let otherLoveSeatIndex = element.seatType
    if (otherLoveSeatIndex) {
        // 如果是情侶座 不檢測(cè)
        return true
    }
    // 檢查座位左側(cè)
    let left = checkSeatDirection(gRowBasic, gColBasic, checkNum, '-')
    console.log(left);


    // 如果左側(cè)已經(jīng)檢查出是靠著過(guò)道直接 返回true
    if (left === 'special') {
        return true
    }
    // 檢查座位右側(cè)
    let right = checkSeatDirection(gRowBasic, gColBasic, checkNum, '+')
    console.log(right);

    if (right === 'special') {
        // 無(wú)論左側(cè)是否是什么狀態(tài) 檢查出右側(cè)靠著過(guò)道直接 返回true
        return true
    } else if (right === 'normal' && left === 'normal') {
        // 如果左右兩側(cè)都有富裕的座位 返回true
        return true
    } else if (right === 'fail' || left === 'fail') {
        // 如果左右兩側(cè)都是不通過(guò)檢測(cè) 返回false
        return false
    }
    return true
}
// 檢查左右側(cè)座位滿(mǎn)足規(guī)則狀態(tài)
const checkSeatDirection = (gRowBasic, gColBasic, checkNum, direction) => {
    // 空位個(gè)數(shù)
    let emptySeat = 0
    let x = 1 // 檢查位置 只允許在x的位置出現(xiàn)過(guò)道,已售,維修
    for (let i = 1; i <= checkNum; i++) {
        let iter // 根據(jù) gRow gCol direction 找出檢查座位左邊按順序排列的checkNum
        if (direction === '-') {
            console.log('---');

            iter = seatList.value.find((el) => (el.gRow == gRowBasic && el.gCol == gColBasic - i))
            console.log(iter, "-");
        } else if (direction === '+') {
            console.log('+++');

            iter = seatList.value.find((el) => (el.gRow == gRowBasic && el.gCol == gColBasic + i))
            console.log(iter), "+";

        }
        if (x === i) {
            if (iter === undefined) {
                // 過(guò)道
                return 'special'
            }
            if (iter.nowIcon === iter.soldedIcon || iter.nowIcon === iter.fixIcon) {
                // 已售或者維修
                return 'special'
            }
            if (iter.nowIcon === iter.selectedIcon) {
                // 已選 順延一位
                x++
                continue
            }
        } else {
            if (iter === undefined) {
                // 過(guò)道
                return 'fail'
            }
            if (iter.nowIcon === iter.soldedIcon ||
                iter.nowIcon === iter.fixIcon ||
                iter.nowIcon === iter.selectedIcon) {
                // 已售或者維修
                return 'fail'
            }
        }
        emptySeat++
        if (emptySeat >= 2) {
            return 'normal'
        }
    }
}

分享一段代碼 就是當(dāng)我 選座不能留空的判斷 邏輯 因?yàn)槲疫@里都是圖片 所有 根據(jù)圖片判斷的

2.如果大家有需求 需要源代碼 可以先私信我 源代碼整理中 未來(lái)會(huì)發(fā)布開(kāi)源文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-794680.html

到了這里，關(guān)于Taro+vue3 實(shí)現(xiàn)選座位 功能 以及座位顯示的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！