2017.08.30

New

单程直达机票航班信息展示

需求分析

• 乘客的一次登机 - 起飞 - 抵达 - 下机称为一个航段（flight-segment），从抵达机场、乘机出发到结束乘机、离开机场称为一个航程，只有一个航程的机票为单程机票。

• 单程机票包括直达（direct）和中转（transit）两种，单程直达机票只包含一个航段，单程中转机票包含多个航段。

• 展示的信息包括：

  1. 日期/星期、起止城市、产品供应商信息（“供”图标）
  2. 航空公司、航班号、机型、舱等
  3. 出发时间、到达时间、航段时长及是否隔日抵达，以及出发机场+航站楼、抵达机场+舱站楼

• 细节要求：

  • 若机票有产品供应商，显示产品供应商信息图标，当用户鼠标 hover 该图标时，将显示产品供应商信息，包括供应商公司名及供应商代码
  • 若机票有产品供应商，显示产品供应商信息图标，当用户鼠标 hover 该图标时，将显示产品供应商信息，包括供应商公司名及供应商代码
  • 若航班属于共享航班，显示实际乘坐航班所属航空公司及航班号信息
  • 若航班为隔日抵达，在抵达时间后备注“+1天”，并在 hover 时显示详细信息
  • 航空公司前需加航空公司 Logo，共享航班展示前加箭头，航段时间前加时钟 Icon

样式

• 布局：Bootstrap 的栅格系统来实现单程航班信息展示模板的布局
• 文字：使用 text-center 及 text-left、text-right 等类进行文字对齐修饰
• 图标：使用 GlyphIcons（“供”图标使用 certificate 图标，并自定义背景色，时钟使用 time 图标，飞机使用 plane 图标，并顺时针旋转90度）
• 其他：单独设置。

交互实现

• 鼠标悬浮到供应商图标和 +1天 上：hover 效果需要绑定不同的事件，并使用条件渲染实现
• 共享航班的显示使用条件渲染实现

<template id="redirect-flight">
    <div class="supplier" v-if="supplier" @mouseover="showSupplier=true" @mouseout="showSupplier=false">
        <div class="supplier-info" v-show="showSupplier"></div>
    </div>
</template>
<script>
    var redirectFlight = Vue.extends({
        el: '#redirect-flight',
        data: function() {
            return {
                supplier: true,
                showSupplier: false
            }
        }
    });
    var vm = new Vue({
        el: 'body',
        components: {
            redirectFlight: redirectFlight
        }
    });
</script>