Taro+vue3 实现选座位功能以及座位显示-Toy模板网

这篇具有很好参考价值的文章主要介绍了Taro+vue3 实现选座位功能以及座位显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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.如果大家有需求需要源代码可以先私信我源代码整理中未来会发布开源文章来源地址https://www.toymoban.com/news/detail-794680.html

到了这里，关于Taro+vue3 实现选座位功能以及座位显示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！