vue实现车次信息

实现车次信息展示功能

在Vue中实现车次信息展示功能，可以通过以下方式完成。这里假设车次信息包括车次号、出发站、到达站、出发时间、到达时间等字段。

数据结构设计

车次信息通常采用数组形式存储，每个车次是一个对象：

const trainList = [
  {
    trainNo: 'G1234',
    from: '北京南',
    to: '上海虹桥',
    departureTime: '08:00',
    arrivalTime: '12:30',
    duration: '4小时30分',
    seats: {
      secondClass: 120,
      firstClass: 50,
      businessClass: 10
    }
  },
  // 更多车次...
]

组件模板设计

创建一个显示车次列表的组件模板：

<template>
  <div class="train-list">
    <div v-for="train in trains" :key="train.trainNo" class="train-item">
      <div class="train-header">
        <span class="train-no">{{ train.trainNo }}</span>
        <span class="train-stations">{{ train.from }} → {{ train.to }}</span>
      </div>
      <div class="train-times">
        <span class="departure">{{ train.departureTime }}</span>
        <span class="duration">{{ train.duration }}</span>
        <span class="arrival">{{ train.arrivalTime }}</span>
      </div>
      <div class="train-seats">
        <span v-for="(count, type) in train.seats" :key="type">
          {{ type }}: {{ count }}张
        </span>
      </div>
    </div>
  </div>
</template>

组件逻辑实现

在Vue组件中定义数据和方法：

<script>
export default {
  data() {
    return {
      trains: [] // 初始为空数组
    }
  },
  created() {
    this.fetchTrainData()
  },
  methods: {
    async fetchTrainData() {
      try {
        // 这里应该是API调用
        const response = await fetch('/api/trains')
        this.trains = await response.json()
      } catch (error) {
        console.error('获取车次数据失败:', error)
      }
    }
  }
}
</script>

样式设计

为车次列表添加基本样式：

<style scoped>
.train-list {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.train-item {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #fff;
}

.train-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.train-no {
  font-weight: bold;
  color: #1890ff;
}

.train-times {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.train-seats span {
  margin-right: 15px;
  color: #666;
}
</style>

高级功能实现

对于更复杂的需求，可以考虑以下增强功能：

车次筛选功能

computed: {
  filteredTrains() {
    return this.trains.filter(train => {
      return train.from.includes(this.searchQuery.from) &&
             train.to.includes(this.searchQuery.to)
    })
  }
}

排序功能

methods: {
  sortTrains(sortBy) {
    this.trains.sort((a, b) => {
      if (sortBy === 'time') {
        return a.departureTime.localeCompare(b.departureTime)
      } else if (sortBy === 'duration') {
        return this.parseDuration(a.duration) - this.parseDuration(b.duration)
      }
    })
  },
  parseDuration(duration) {
    // 将"4小时30分"转换为分钟数
    const matches = duration.match(/(\d+)小时(\d+)分/)
    return matches ? parseInt(matches[1]) * 60 + parseInt(matches[2]) : 0
  }
}

与后端API交互

实际项目中，车次数据通常来自后端API：

async fetchTrainData(params) {
  try {
    const query = new URLSearchParams(params).toString()
    const response = await fetch(`/api/trains?${query}`)
    const data = await response.json()
    this.trains = data.trains
    this.pagination = data.pagination
  } catch (error) {
    console.error('获取车次数据失败:', error)
  }
}

分页处理

对于大量车次数据，实现分页功能：

data() {
  return {
    trains: [],
    pagination: {
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  }
},
methods: {
  handlePageChange(page) {
    this.pagination.currentPage = page
    this.fetchTrainData()
  }
}

以上实现方案可以根据实际项目需求进行调整和扩展，例如添加车次详情查看、座位选择、票价计算等功能。