Vue 3 电影片票购买页面开发详解

应用场景

本代码用于开发一个电影票购买页面，用户可以在此页面浏览影片信息、选择影院、座位和购买数量，并完成订单确认。

基本功能

该页面主要包括以下功能：

导航栏展示影片名称、左右图标，用于返回或进入个人中心和购物车。
选项卡切换，分为描述、场次和购买票务三个模块。
订单预览区，展示影片海报、标题、评分、时长和类型。
日期选择器，用于选择观影日期。
影院选择器，列出可选择的影院。
座位选择器，展示可选择的座位。
票数选择器，用于选择购买票数。
票价展示，根据选择的影院、座位和票数计算总价。
确认订单按钮，点击后完成订单确认。
底部导航栏，提供首页、搜索、视频和个人中心四个选项。

功能实现步骤及关键代码分析

1. 页面布局

<template>
  <div class="bg-gray-900 h-screen">
    ...
  </div>
</template>

页面采用 Flex 布局，整体分为头部导航栏、选项卡、订单预览区和底部导航栏。

2. 选项卡切换

<van-tabs v-model="activeTab">
  <van-tab title="Description">Description</van-tab>
  <van-tab title="Showtime">Showtime</van-tab>
  <van-tab title="Buy Tickets">Buy Tickets</van-tab>
</van-tabs>

使用 Vuetify 的 VanTabs 组件实现选项卡切换，通过 v-model 绑定 activeTab 变量控制当前激活的选项卡。

3. 订单预览区

<div class="bg-gray-800 h-full">
  ...
</div>

订单预览区包含影片海报、标题、评分、时长和类型等信息，通过 CSS 样式控制其布局和外观。

4. 日期选择器

<van-datetime-picker
  v-model="selectedDate"
  type="date"
  :min-date="minDate"
  :max-date="maxDate"
  class="text-white"
/>

使用 VanDatetimePicker 组件实现日期选择，通过 v-model 绑定 selectedDate 变量控制选中的日期，并通过 min-date 和 max-date 属性设置可选日期范围。

5. 影院选择器

<van-radio-group v-model="selectedCinema" class="text-white">
  <van-radio
    v-for="cinema in cinemas"
    :key="cinema.id"
    :label="cinema.name"
  />
</van-radio-group>

使用 VanRadioGroup 组件实现影院选择，通过 v-model 绑定 selectedCinema 变量控制选中的影院，并通过 v-for 循环遍历可选择的影院列表。

6. 座位选择器

<van-checkbox-group v-model="selectedSeats" class="text-white">
  <van-checkbox
    v-for="seat in seats"
    :key="seat.id"
    :label="seat.name"
  />
</van-checkbox-group>

使用 VanCheckboxGroup 组件实现座位选择，通过 v-model 绑定 selectedSeats 变量控制选中的座位，并通过 v-for 循环遍历可选择的座位列表。

7. 票数选择器

<van-stepper
  v-model="selectedTickets"
  :min="1"
  :max="5"
  class="text-white"
/>

使用 VanStepper 组件实现票数选择，通过 v-model 绑定 selectedTickets 变量控制选中的票数，并通过 min 和 max 属性设置可选票数范围。

8. 票价展示

<div class="flex justify-between items-center">
  <div class="text-white text-lg font-bold">Standard - 1x</div>
  <div class="text-white text-lg font-bold">18$</div>
</div>

根据选择的影院、座位和票数计算总价，并使用 CSS 样式控制其布局和外观。

9. 确认订单按钮

<van-button
  round
  block
  type="primary"
  class="text-white"
  @click="confirmOrder"
>
  Confirm Order
</van-button>

使用 VanButton 组件实现确认订单按钮，通过 @click 事件监听器触发 confirmOrder 方法。

10. 底部导航栏

<van-tabbar v-model="activeTab" class="bg-gray-900 text-white fixed bottom-0">
  ...
</van-tabbar>

使用 VanTabbar 组件实现底部导航栏，通过 v-model 绑定 activeTab 变量控制当前激活的选项卡，并通过 fixed 和 bottom-0 属性将其固定在页面底部。

总结与展望

开发过程中的经验与收获

熟练掌握 Vue 3、VanUI 和 ECharts 等前端框架和组件库。
深入理解 Flex 布局、响应式设计和状态管理等前端开发概念。
提升了对 Vue 3 生态系统的理解和应用能力。

未来卡片功能的拓展与优化

集成支付功能，实现在线购票。
增加影片预告片播放功能，增强用户体验。
优化影院和座位选择器，提供更直观和友好的交互方式。
提供用户评论和评分功能，帮助用户做出更明智的决策。
探索使用 AI 推荐算法，为用户提供个性化的影片推荐。

ECHO recommendation

ScriptEcho.ai