基于大模型的旅游平台（十二）

本文描述了飞机票购买按钮点击事件的编写。

由于飞机航班的显示与火车车次的显示有所不同，导致使用<button type="button" class="buy-button" data-flight-id="${flight.id}">购买</button>不能正确识别那一个航班被选择。

 var listItem = `
                <div class="layui-col-md4">
                    <div class="flight-card">
                        <div><b>${flight.flightNo}</b> ${flight.airCompanyName}</div>
                        <div>${flight.aapname} to ${flight.oapname}</div>
                        <div>Depart: ${flight.flyOffOnlyTime} Arrive: ${flight.arrivalOnlyTime}</div>
                        <div>Price: ${flight.price}</div>
                         <button type="button" class="buy-button" data-flight-id="${flight.id}">购买</button>
                    </div>
                </div>
            `;

为此为按钮添加一个自定义数据属性，通常用于存储该航班在数据集中的索引值 ${index}，以便在点击按钮时能够识别是哪一个航班被选择。

<button class="buy-button" data-flight-index="${index}">购买</button>

经过修改之后就可以在点击按钮时能够识别是哪一个航班被选择。

然后使用jQuery来处理按钮的点击事件，并且通过使用 data-flight-index 属性来关联每个按钮与对应的航班信息。当用户点击购买按钮时，会触发一个名为 purchaseFlightTicket 的函数来处理购买逻辑。

$('.buy-button').on('click', function() {
        var flightIndex = $(this).data('flight-index');
            var flightInfo = flights[flightIndex];
                     var flightId = flightInfo.flightNo;

                            purchaseFlightTicket(flightId, flightInfo);

                });

接着完善 purchaseFlightTicket这个函数，使其可以：

1. 当用户点击购买按钮后，会调用 purchaseFlightTicket 函数来创建一个购买对话框，并显示相关的航班信息以及价格，并提供确认购买按钮。

2. 用户可以在购买对话框中查看航班信息，并点击确认购买按钮来执行购买操作。

3. 当用户点击关闭按钮时，会关闭购买对话框。

4. 在确认购买按钮点击事件中，会构建一个包含用户ID和航班信息的订单对象 flightOrder，然后通过 AJAX 请求向服务器发送购买请求。

5. 如果购买请求成功并返回状态码为 200 且消息为 "success"，则弹出提示框显示购买成功，并移除购买对话框；否则会在控制台打印购买失败的信息。

6. 如果购买请求发生错误，会在控制台输出错误信息。

   function purchaseFlightTicket(flightId, flightInfo) {
            // 创建购买对话框
            var purchaseDialogHtml = `
                   <div id="purchase-dialog" class="modal">
                       <div class="modal-content">
                           <span class="close">&times;</span>
                           <p>您正在购买以下机票：</p>
                           <p>用户ID：${user.uid}</p>
                           <p>航班号：${flightInfo.flightNo}</p>
                           <p>航空公司名称：${flightInfo.airCompanyName}</p>
                           <p>起飞机场名称：${flightInfo.oapname}</p>
                           <p>到达机场名称：${flightInfo.aapname}</p>
                           <p>起飞时间：${flightInfo.flyOffOnlyTime}</p>
                           <p>到达时间：${flightInfo.arrivalOnlyTime}</p>
                           <p>价格：${flightInfo.price}</p>
                           <button id="confirm-purchase">确认购买</button>
                       </div>
                   </div>`;
            // 将购买对话框添加到页面中
            $('body').append(purchaseDialogHtml);
   
            // 当用户点击关闭按钮时，关闭购买对话框
            $('.close').on('click', function() {
                $('#purchase-dialog').remove(); // 移除购买对话框
            });
   
            // 当用户点击确认购买按钮时，执行购买操作
            $('#confirm-purchase').on('click', function() {
            var flightOrder = {
                    uid: user.uid,
                    flightNo: flightInfo.flightNo,
                    airCompanyName:flightInfo.airCompanyName,
                    oapname: flightInfo.oapname,
                    aapname: flightInfo.aapname,
                    flyOffOnlyTime: flightInfo.flyOffOnlyTime,
                    arrivalOnlyTime:flightInfo.arrivalOnlyTime ,
                    price:flightInfo.price
                };
                // 向服务器发送购买请求，可以使用 AJAX 或者其他方式
                $.ajax({
                    type: "POST",
                    url: "/flight/order",
                    contentType: "application/json", // 设置请求内容类型为 JSON
                    data: JSON.stringify(flightOrder), // 将订单对象转换为 JSON 字符串并传入
                    success: function (response) {
                        if (response.code === 200 && response.message === "success") {
                            alert("购买成功！");
                            $('#purchase-dialog').remove(); // 移除购买对话框
                            // 可以根据需要执行其他操作，例如跳转到订单页面等
                        } else {
                            console.error("购买失败:", response.message);
                        }
                    },
                    error: function (xhr) {
                        console.error("购买时发生错误:", xhr.status, xhr.statusText);
                    }
                });
            });

   同时为了让对话框美观，我们可以对购买对话框样式进行设置，让对话框水平和垂直居中，并设置按钮的位置，颜色，字体大小，以及鼠标悬停时的光标形状。

   // 设置购买对话框样式
            $('#purchase-dialog').css({
                "display": "flex",
                "justify-content": "center",
                "align-items": "center",
                "position": "fixed",
                "top": "50%",
                "left": "50%",
                "transform": "translate(-50%, -50%)",
                "background-color": "#f2f2f2",
                "padding": "20px",
                "width": "300px",
                "text-align": "center"
            });
   
            // 设置对话框内容区域样式，使其垂直居中
            $('.modal-content').css({
                "display": "flex",
                "flex-direction": "column",
                "justify-content": "center",
                "align-items": "center"
            });
   
            // 设置关闭按钮样式
            $('.close').css({
                "color": "red",
                "position": "absolute",
                "top": "5px",
                "right": "10px",
                "font-size": "24px",
                "cursor": "pointer"
            });
   
            // 设置购买按钮样式
            $('#confirm-purchase').css({
                "margin-top": "20px",
                "padding": "10px 20px",
                "background-color": "green",
                "color": "white",
                "border": "none",
                "border-radius": "5px",
                "cursor": "pointer"
            });