Merge remote-tracking branch 'origin/master'

src/main/resources/static/css/cinemaHall.css

@@ -18,9 +18,18 @@
     width: 32px;
     height: 32px;
     margin: 3px;
+
+    border: none;
+    outline: none;
 }
 
 .cinema-hall-seat-choose {
     background: url("../images/seatChoose.png");
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    margin: 3px;
 
+    border: none;
+    outline: none;
 }

src/main/resources/static/css/userMovieBuy.css

@@ -1,35 +1,97 @@
+/*第一阶段*/
 .seat-content {
     display: flex;
 }
 
-.seat-content .hall {
-    flex-grow: 1;
-    flex-shrink: 0;
-}
-
 .seat-content .movie-detail {
     padding: 20px;
     min-width: 30%;
 }
 
-.seat-content .movie-detail .head {
+.seat-content .movie-detail .line {
     display: flex;
     flex-direction: row;
 }
 
-.seat-content .movie-detail .head .img-wrapper {
+.seat-content .movie-detail .line .name {
+    flex-shrink: 0;
+}
+
+.img-wrapper {
     margin-right: 20px;
     margin-bottom: 20px;
     width: 100px;
 }
 
-.seat-content .movie-detail .head .img-wrapper img {
+.img-wrapper img {
     width: 100%;
     height: auto;
 }
 
-.seat-content .movie-detail .info #movie-name {
+.info #movie-name {
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 5px;
+}
+
+#seat-detail {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+#seat-detail span {
+    flex-shrink: 0;
+    margin-right: 5px;
+}
+
+/*第二阶段*/
+#order-state table thead tr {
+    background-color: #1caf9ab8;
+}
+
+#order-state table th, td {
+    text-align: center;
+    vertical-align: middle !important;
+}
+
+.order-info {
+    margin: 20px 0;
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+}
+
+.item {
+    margin: 5px 0;
+}
+
+.order-footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+    padding: 10px;
+    margin-bottom: 20px;
+}
+
+.order-footer b {
+    font-size: 20px;
+    color: #1caf9a;
+}
+
+hr.dashed-line {
+    border: 1px dashed #eeeeee
+}
+
+.success-notice {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 50px;
+}
+
+.success-notice .hint {
+    margin-top: 25px;
+    font-size: 20px;
 }

src/main/resources/static/js/userMovieBuy.js

@@ -27,7 +27,8 @@ $(document).ready(function () {
         for (var i = 0; i < hall.row; i++) {
             var temp = ""
             for (var j = 0; j < hall.column; j++) {
-                temp += "<div class='cinema-hall-seat'></div>";
+                var id = "seat" + i + j
+                temp += "<button class='cinema-hall-seat-choose' id='" + id + "' onclick='seatClick(\"" + id + "\"," + i + "," + j + ")'></button>";
             }
             seat += "<div>" + temp + "</div>";
         }
@@ -44,4 +45,51 @@ $(document).ready(function () {
 
         $('#hall-card').append(hallDomStr);
     }
-});
+});
+
+var selectedSeat = []
+
+function seatClick(id, i, j) {
+    let seat = $('#' + id);
+    if (seat.hasClass("cinema-hall-seat-choose")) {
+        seat.removeClass("cinema-hall-seat-choose");
+        seat.addClass("cinema-hall-seat");
+
+        selectedSeat[selectedSeat.length] = [i, j]
+    } else {
+        seat.removeClass("cinema-hall-seat");
+        seat.addClass("cinema-hall-seat-choose");
+
+        selectedSeat = selectedSeat.filter(function (value) {
+            return value[0] != i || value[1] != j;
+        })
+    }
+
+    selectedSeat.sort(function (x, y) {
+        var res = x[0] - y[0];
+        return res === 0 ? x[1] - y[1] : res;
+    });
+
+    let seatDetailStr = "";
+    if (selectedSeat.length == 0) {
+        seatDetailStr += "还未选择座位"
+        $('#order-confirm-btn').attr("disabled", "disabled")
+    } else {
+        for (let seatLoc of selectedSeat) {
+            seatDetailStr += "<span>" + (seatLoc[0] + 1) + "排" + (seatLoc[1] + 1) + "座</span>";
+        }
+        $('#order-confirm-btn').removeAttr("disabled");
+    }
+    $('#seat-detail').html(seatDetailStr);
+}
+
+function orderConfirmClick() {
+    $('#seat-state').css("display","none");
+    $('#order-state').css("display","");
+}
+
+function payConfirmClick() {
+    $('#order-state').css("display","none");
+    $('#success-state').css("display","");
+    $('#buyModal').modal('hide')
+}

src/main/resources/templates/userMovieBuy.html

@@ -43,20 +43,20 @@
 </div>
 <div class="content-container">
     <div class="card col-md-12">
-        <div class="col-md-10 col-md-offset-1">
-            <ol class="breadcrumb">
-                <li><a href="#" class="active">选座</a></li>
-                <li>确认订单，支付</li>
-                <li>支付成功</li>
+        <div class="col-md-10 col-md-offset-1" id="seat-state">
+            <ol class="breadcrumb col-md-12">
+                <li class="col-md-4"><a href="#" class="active">1. 选座</a></li>
+                <li class="col-md-4">2. 确认订单，支付</li>
+                <li class="col-md-4">3. 支付成功</li>
             </ol>
 
-            <div class="seat-content">
-                <div class="hall content-card card" id="hall-card">
+            <div class="seat-content col-md-12">
+                <div class="col-md-8 content-card card" id="hall-card">
                 </div>
 
-                <div class="movie-detail">
-                    <div class="head">
-                        <div class="img-wrapper">
+                <div class="col-md-4 movie-detail">
+                    <div class="line">
+                        <div class="name img-wrapper">
                             <img id="movie-img">
                         </div>
                         <div class="info">
@@ -66,15 +66,133 @@
                         </div>
                     </div>
                     <hr/>
-                    <div>影厅：1号厅</div>
-                    <div>场次：4月17日 14:00场</div>
-                    <div>座位：还未选择座位</div>
+                    <div class="line">
+                        <div class="name">影厅：</div>
+                        <div>1号厅</div>
+                    </div>
+                    <div class="line">
+                        <div class="name">场次：</div>
+                        <div>4月17日 14:00场</div>
+                    </div>
+                    <div class="line">
+                        <div class="name">座位：</div>
+                        <div id="seat-detail">还未选择座位</div>
+                    </div>
                     <hr/>
-                    <button class="btn btn-primary" disabled="disabled">确认下单</button>
+                    <button id="order-confirm-btn" class="btn btn-primary" onclick="orderConfirmClick()"
+                            disabled="disabled">
+                        确认下单
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-md-10 col-md-offset-1" id="order-state" style="display: none;">
+            <ol class="breadcrumb col-md-12">
+                <li class="col-md-4">1. 选座</li>
+                <li class="col-md-4"><a href="#" class="active">2. 确认订单，支付</a></li>
+                <li class="col-md-4">3. 支付成功</li>
+            </ol>
+
+            <table class="table table-striped table-bordered">
+                <thead>
+                <tr>
+                    <th>电影</th>
+                    <th>场次</th>
+                    <th>票数/座位</th>
+                    <th>单价(元)</th>
+                    <th>总价(元)</th>
+                </tr>
+                </thead>
+
+                <tbody>
+                <tr>
+                    <td>
+                        <div>夏目友人帐</div>
+                        <div>版本：国语3D</div>
+                    </td>
+                    <td>
+                        <div>1号厅</div>
+                        <div>4月18日 19:00</div>
+                    </td>
+                    <td>
+                        <div>3张</div>
+                        <div>1排1座</div>
+                        <div>1排2座</div>
+                        <div>1排3座</div>
+                    </td>
+                    <td>30.00</td>
+                    <td><b>90.00</b></td>
+                </tr>
+                </tbody>
+            </table>
+
+            <div class="order-info">
+                <div>
+                    优惠券：
+                    <select style="height: 30px;">
+                        <option>满50减5</option>
+                        <option>满100减15</option>
+                    </select>
+                </div>
+
+                <div class="">
+                    <div class="item">总金额： ¥90.00</div>
+                    <div class="item">优惠金额： ¥5.00</div>
+                </div>
+            </div>
+
+            <hr class="dashed-line"/>
+
+            <div class="order-footer">
+                <div class="item">实付款：<b> ¥85.00</b></div>
+                <button class="item btn btn-primary" data-toggle="modal" data-target="#buyModal">确认订单，立即支付</button>
+            </div>
+        </div>
+
+        <div class="col-md-10 col-md-offset-1" id="success-state" style="display: none;">
+            <ol class="breadcrumb col-md-12">
+                <li class="col-md-4">1. 选座</li>
+                <li class="col-md-4">2. 确认订单，支付</li>
+                <li class="col-md-4"><a href="#" class="active">3. 支付成功</a></li>
+            </ol>
+
+            <div class="success-notice" style="text-align: center">
+                <img src="/images/success.png"/>
+                <div class="hint">支付成功，至<a class="hint">“我的电影票”</a>页面查看</div>
             </div>
         </div>
     </div>
 </div>
+
+<div class="modal fade" id="buyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
+                </button>
+                <h4 class="modal-title" id="myModalLabel">付款</h4>
+            </div>
+            <div class="modal-body">
+                <div class="form-group">
+                    <label for="userMember-cardNum">银行卡号</label>
+                    <input class="form-control" id="userMember-cardNum" placeholder="请输入银行卡号">
+                    <p id="userMember-cardNum-error" class="notice">银行卡号不能为空</p>
+                </div>
+                <div class="form-group">
+                    <label for="userMember-cardPwd">密码</label>
+                    <input type="password" class="form-control" id="userMember-cardPwd" placeholder="请输入密码">
+                    <p id="userMember-cardPwd-error" class="notice">密码不能为空</p>
+                </div>
+
+                <div><b>金额：</b>&nbsp;&nbsp;90元</div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
+                <button type="button" class="btn btn-primary" onclick="payConfirmClick()">确认支付</button>
+            </div>
+        </div>
+    </div>
 </div>
 </body>
 </html>