uni-app 实现类似电影座位选择功能并支持场馆选择

uni-app 实现类似电影座位选择功能并支持场馆选择

图片


更多关于uni-app 实现类似电影座位选择功能并支持场馆选择的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

公司承接项目外包开发、双端（Android，iOS）原生插件开发。
为什么选择我们： 1、1000+项目开发积累，数百种商业模式开发经验，更懂您的需求，沟通无障碍。 2、一年免费技术保障，系统故障或被攻击，2小时快速响应提供解决方案落地。 3、软件开发源码定制工厂，去中间商降低成本，提高软件开发需求沟通效率。 4、纯原生开发，拒绝模板和封装系统，随时更新迭代，增加功能，无需重做系统。 5、APP定制包办软件著作权申请，30天内保证拿到软著证书，知识产权受保护。 6、中软云科技导入严谨的项目管理系统，确保项目准时交付，快速抢占市场商机。 7、软件开发费、维护费、第三方各种费用公开透明，不花冤枉钱，不玩套路。
已有大量双端插件、App、小程序、公众号、PC、移动端、游戏等案例。
行业开发经验：银行、医疗、直播、电商、教育、旅游、餐饮、分销、微商、物联网、零售等
商务QQ：1559653449 商务微信：fan-rising
7x24小时在线，欢迎咨询了解

更多关于uni-app 实现类似电影座位选择功能并支持场馆选择的实战教程也可以访问 https://www.itying.com/category-93-b0.html


智密科技承接安卓/IOS双端插件开发、安卓/IOS App外包开发、项目整体外包、各类硬件产品开发
我们的优势： 1、全职UI、前端、安卓、IOS、后端、硬件工程师，每个岗位都是专职开发更专业，选择智密您就拥有了一个完整的技术支持团队； 2、定制的产品无论是插件、APP、整套系统，一年内免费Bug修复； 3、定制的APP和整体项目软件著作权归客户所有，并协助软件著作权申请； 4、软件开发源头工厂，定价合理，与开发人员直接沟通，避免需求理解问题，提高开发效率； 5、软件均为自主开发，不基于网上代码进行二次开发，保障系统安全性； 6、软件源码自己开发，出现BUG能快速修复，新需求能快速实现； 7、签订开发合同，通过条款约定双方权利义务，服务和售后有保障； 8、我们的插件尽可能做到让用户UI自定义，用户改变UI之后无需联系我们修改插件，只要前端调整UI即可。
我们唯一的劣势：价格可能会比别人高 我们不提供廉价的插件和服务，服务和收费是成正比的。 我们的插件定价基本都在千元以上，插件使用成本=插件购买费用 插件集成成本 插件填坑成本 后续更新成本 在没有好的技术支持前提下，后面三项成本将远远大于插件购买费用，选择智密科技，实现双赢
经过几年积累，已拥有大量双端插件，常见功能的插件几乎都能直接试用，欢迎各位进群了解
插件沟通交流群：755910061(欢迎进群了解我们的技术支持方式及我们的技术能力) 商务QQ：57570616(这是传说中的搅屎棍，光动嘴皮子不干活的，进群最实在) 商务微信：ZhimiTec(同上…)

在 uni-app 中实现类似电影座位选择功能并支持场馆选择，你可以结合 uni-app 的组件和数据绑定特性来完成。以下是一个简化的代码示例，展示如何实现这一功能。

1. 数据结构准备

首先，定义场馆和座位的数据结构：

data() {
    return {
        venues: [
            { id: 1, name: '场馆A', seats: this.generateSeats(10, 8) },
            { id: 2, name: '场馆B', seats: this.generateSeats(12, 10) }
        ],
        selectedVenue: null,
        selectedSeats: []
    };
},
methods: {
    generateSeats(rows, cols) {
        let seats = [];
        for (let i = 0; i < rows; i++) {
            seats.push(Array.from({ length: cols }, (_, j) => ({ row: i, col: j, selected: false })));
        }
        return seats;
    }
}

2. 场馆选择组件

使用 picker 组件来选择场馆：

<picker mode="selector" :range="venues.map(v => v.name)" @change="onVenueChange">
    <view class="picker">{{ selectedVenue ? selectedVenue.name : '请选择场馆' }}</view>
</picker>

methods: {
    onVenueChange(e) {
        this.selectedVenue = this.venues[e.detail.value];
        this.selectedSeats = []; // 重置已选座位
    }
}

3. 座位选择组件

使用 view 组件来渲染座位网格，并绑定点击事件来选择座位：

<view v-if="selectedVenue">
    <view v-for="(row, rowIndex) in selectedVenue.seats" :key="rowIndex" class="row">
        <view
            v-for="(seat, colIndex) in row"
            :key="colIndex"
            :class="['seat', { selected: seat.selected }]"
            @click="selectSeat(rowIndex, colIndex)"
        >
            {{ seat.selected ? '✓' : '' }}
        </view>
    </view>
</view>

methods: {
    selectSeat(rowIndex, colIndex) {
        const seat = this.selectedVenue.seats[rowIndex][colIndex];
        seat.selected = !seat.selected;
        this.updateSelectedSeats();
    },
    updateSelectedSeats() {
        this.selectedSeats = this.selectedVenue.seats.flat().filter(seat => seat.selected);
    }
}

4. 样式

添加一些基本样式来美化座位网格：

.row {
    display: flex;
}
.seat {
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.seat.selected {
    background-color: #007aff;
    color: white;
}

这个示例展示了如何在 uni-app 中实现场馆选择和座位选择的基本功能。你可以根据需要进一步扩展和优化，比如添加座位价格、禁用已售座位等。

回到顶部