Taro+vue3 实现选座位 功能 以及座位显示

1.类似选座位那种功能 我的功能座位 不是html元素 而是 座位图片 都是图片

const onConfirm = () => {
    // const area_arr = selectedSeat.value.map((item) => {
    //     return item.areaId;
    // });
    // const abc = isRepeat(area_arr);
    // if (!abc) {
    //     Taro.showToast({
    //         title: "请选择同一价格的座位，暂不支持跨区域选座~~",
    //         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: "请选择同一价格的座位，暂不支持跨区域选座~~",
                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");

        // 开始计算是否留下空位 ------------ 结束
        if (!result) {
            // 如果 result 为false
            Taro.showToast({
                title: "请不要留下空座位~~",
                icon: "none"
            })
            return
        }
        phoneInputVisible.value = true;

        return
    } catch (e) {
        console.log(e);
    }
};
// 检查每个座位是否会留下空位
const checkSeat = (element) => {
    console.log(element, "element");
    // 标准为 1.左右侧都必须保留 两格座位 + 最大顺延座位(也就是已选座位减去自身)
    // 2.靠墙和靠已售的座位一律直接通过
    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) {
        // 如果是情侣座 不检测
        return true
    }
    // 检查座位左侧
    let left = checkSeatDirection(gRowBasic, gColBasic, checkNum, '-')
    console.log(left);


    // 如果左侧已经检查出是靠着过道直接 返回true
    if (left === 'special') {
        return true
    }
    // 检查座位右侧
    let right = checkSeatDirection(gRowBasic, gColBasic, checkNum, '+')
    console.log(right);

    if (right === 'special') {
        // 无论左侧是否是什么状态 检查出右侧靠着过道直接 返回true
        return true
    } else if (right === 'normal' && left === 'normal') {
        // 如果左右两侧都有富裕的座位 返回true
        return true
    } else if (right === 'fail' || left === 'fail') {
        // 如果左右两侧都是不通过检测 返回false
        return false
    }
    return true
}
// 检查左右侧座位满足规则状态
const checkSeatDirection = (gRowBasic, gColBasic, checkNum, direction) => {
    // 空位个数
    let emptySeat = 0
    let x = 1 // 检查位置 只允许在x的位置出现过道,已售,维修
    for (let i = 1; i <= checkNum; i++) {
        let iter // 根据 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) {
                // 过道
                return 'special'
            }
            if (iter.nowIcon === iter.soldedIcon || iter.nowIcon === iter.fixIcon) {
                // 已售或者维修
                return 'special'
            }
            if (iter.nowIcon === iter.selectedIcon) {
                // 已选 顺延一位
                x++
                continue
            }
        } else {
            if (iter === undefined) {
                // 过道
                return 'fail'
            }
            if (iter.nowIcon === iter.soldedIcon ||
                iter.nowIcon === iter.fixIcon ||
                iter.nowIcon === iter.selectedIcon) {
                // 已售或者维修
                return 'fail'
            }
        }
        emptySeat++
        if (emptySeat >= 2) {
            return 'normal'
        }
    }
}

分享一段代码 就是当我 选座不能留空的判断 逻辑 因为我这里都是图片 所有 根据图片判断的

2.如果大家有需求 需要源代码 可以先私信我 源代码整理中 未来会发布开源