当前位置：首页 > JavaScript

js实现旅游结算

2026-02-03 02:44:23JavaScript

实现旅游结算功能

使用JavaScript实现旅游结算功能需要结合前端交互与后端数据处理。以下是一个基于前端实现的简化方案，包含价格计算、优惠券应用和订单生成逻辑。

价格计算逻辑

定义旅游产品的基础价格和附加服务费用计算方式：

js实现旅游结算

function calculateBasePrice(destination, duration) {
  const priceMap = {
    'beijing': 2000,
    'shanghai': 2500,
    'guangzhou': 1800
  };
  return priceMap[destination] * duration;
}

function calculateExtraServices(services) {
  return services.reduce((total, service) => {
    const fees = {
      'insurance': 100,
      'guide': 300,
      'meal': 150
    };
    return total + (fees[service] || 0);
  }, 0);
}

优惠券验证系统

实现优惠券折扣计算和验证逻辑：

function applyCoupon(total, couponCode) {
  const coupons = {
    'SUMMER10': 0.9,
    'WELCOME20': 0.8,
    'VIP15': 0.85
  };
  const discount = coupons[couponCode] || 1;
  return total * discount;
}

订单生成流程

整合所有计算步骤生成最终订单：

js实现旅游结算

function generateOrder(orderDetails) {
  const { destination, duration, services, couponCode } = orderDetails;

  const basePrice = calculateBasePrice(destination, duration);
  const extraFees = calculateExtraServices(services);
  const subtotal = basePrice + extraFees;
  const total = applyCoupon(subtotal, couponCode);

  return {
    destination,
    duration,
    services,
    basePrice,
    extraFees,
    discount: subtotal - total,
    totalPrice: total
  };
}

前端交互示例

创建简单的HTML表单和事件处理：

<form id="bookingForm">
  <select id="destination" required>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
  </select>

  <input type="number" id="duration" min="1" value="3" required>

  <div class="services">
    <label><input type="checkbox" name="service" value="insurance"> 保险</label>
    <label><input type="checkbox" name="service" value="guide"> 导游</label>
    <label><input type="checkbox" name="service" value="meal"> 餐饮</label>
  </div>

  <input type="text" id="coupon" placeholder="优惠码">
  <button type="submit">计算总价</button>
</form>

<div id="orderResult"></div>

<script>
document.getElementById('bookingForm').addEventListener('submit', function(e) {
  e.preventDefault();

  const destination = document.getElementById('destination').value;
  const duration = parseInt(document.getElementById('duration').value);
  const couponCode = document.getElementById('coupon').value.trim();

  const serviceCheckboxes = document.querySelectorAll('input[name="service"]:checked');
  const services = Array.from(serviceCheckboxes).map(cb => cb.value);

  const order = generateOrder({ destination, duration, services, couponCode });
  displayOrderResult(order);
});

function displayOrderResult(order) {
  const resultDiv = document.getElementById('orderResult');
  resultDiv.innerHTML = `
    <h3>订单明细</h3>
    <p>目的地: ${order.destination}</p>
    <p>天数: ${order.duration}</p>
    <p>基础费用: ¥${order.basePrice}</p>
    <p>附加服务: ¥${order.extraFees}</p>
    <p>优惠减免: ¥${order.discount}</p>
    <h4>总计: ¥${order.totalPrice.toFixed(2)}</h4>
  `;
}
</script>

数据验证增强

添加输入验证确保数据可靠性：

function validateOrderInput(orderDetails) {
  if (!['beijing', 'shanghai', 'guangzhou'].includes(orderDetails.destination)) {
    throw new Error('无效的目的地');
  }
  if (orderDetails.duration < 1 || orderDetails.duration > 30) {
    throw new Error('天数必须在1-30之间');
  }
  // 其他验证规则...
}