uni-app 价格日历

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app 价格日历

类似飞猪，携程显示机票价格的那种日历。

Harmonyos Next教程
1 回复

在处理 uni-app 中的价格日历功能时，我们可以结合前端展示和后端数据接口来实现。以下是一个简化的代码示例，展示了如何在 uni-app 中创建一个价格日历组件。

前端部分（uni-app）

首先，在 pages 目录下创建一个新的页面，比如 priceCalendar.vue。

<template>
  <view class="container">
    <view v-for="(price, date) in priceCalendar" :key="date" class="calendar-day">
      <text>{{ date }}</text>
      <text>{{ price }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      priceCalendar: {}
    };
  },
  onLoad() {
    this.fetchPriceCalendar();
  },
  methods: {
    async fetchPriceCalendar() {
      try {
        const response = await uni.request({
          url: 'https://your-backend-api.com/priceCalendar',
          method: 'GET'
        });
        this.priceCalendar = response.data;
      } catch (error) {
        console.error('Error fetching price calendar:', error);
      }
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}
.calendar-day {
  width: 14.28%; /* Assuming a 7-day week layout */
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}
</style>

后端部分（示例，使用 Node.js + Express）

为了提供价格日历数据，我们可以在后端设置一个简单的 API。以下是一个使用 Node.js 和 Express 的示例：

const express = require('express');
const app = express();
const port = 3000;

app.get('/priceCalendar', (req, res) => {
  const priceCalendar = {
    '2023-10-01': 100,
    '2023-10-02': 150,
    // Add more dates and prices as needed
  };
  res.json(priceCalendar);
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

说明

  1. 前端部分：在 priceCalendar.vue 文件中，我们使用 uni.request 方法从后端 API 获取价格日历数据，并将其存储在组件的 data 属性中。然后，我们使用 v-for 指令遍历这些数据，并将每个日期的价格显示在对应的日期下方。

  2. 后端部分：我们使用 Node.js 和 Express 创建一个简单的 API，该 API 返回一个包含日期和对应价格的对象。在实际应用中，这些数据通常来自数据库。

这个示例展示了如何在 uni-app 中创建一个价格日历组件，并通过后端 API 获取数据。根据你的具体需求，你可能需要调整数据格式、样式或添加更多功能。

回到顶部