Merge remote-tracking branch 'origin/master'

src/main/java/com/example/cinema/controller/ViewController.java

@@ -58,16 +58,16 @@ public class ViewController {
         return "userMovieDetail";
     }
 
+    @RequestMapping(value = "/user/movieDetail/buy")
+    public String getUserMovieBuy(@RequestParam int id) {
+        return "userMovieBuy";
+    }
+
     @RequestMapping(value = "/user/movie")
     public String getUserMovie() {
         return "userMovie";
     }
 
-    @RequestMapping(value = "/user/buy")
-    public String getUserBuy() {
-        return "userBuy";
-    }
-
     @RequestMapping(value = "/user/member")
     public String getUserMember() {
         return "userMember";

src/main/resources/static/css/movieDetail.css

@@ -27,6 +27,7 @@
 
 .seesion-container {
     margin-top: 30px;
+    background-color: whitesmoke;
 }
 
 .statistic-container {

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

@@ -0,0 +1,35 @@
+.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 {
+    display: flex;
+    flex-direction: row;
+}
+
+.seat-content .movie-detail .head .img-wrapper {
+    margin-right: 20px;
+    margin-bottom: 20px;
+    width: 100px;
+}
+
+.seat-content .movie-detail .head .img-wrapper img {
+    width: 100%;
+    height: auto;
+}
+
+.seat-content .movie-detail .info #movie-name {
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 5px;
+}

src/main/resources/static/css/userMovieDetail.css

@@ -0,0 +1,13 @@
+.table-wrapper {
+    padding: 20px;
+}
+
+.table-wrapper .table b {
+    color: #1caf9a;
+    font-size: 20px;
+}
+
+.table-wrapper .table td{
+    height: 60px;
+    vertical-align: middle;
+}

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

@@ -0,0 +1,47 @@
+$(document).ready(function () {
+
+    getCinemaHalls();
+
+    function getCinemaHalls() {
+        // TODO:修改
+        var halls = [];
+        getRequest(
+            '/hall/all',
+            function (res) {
+                halls = res.content;
+                renderHall(halls);
+            },
+            function (error) {
+                alert(JSON.stringify(error));
+            }
+        );
+    }
+
+    function renderHall(halls) {
+        $('#hall-card').empty();
+        var hallDomStr = "";
+
+        var hall = halls[0]
+
+        var seat = "";
+        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>";
+            }
+            seat += "<div>" + temp + "</div>";
+        }
+        var hallDom =
+            "<div class='cinema-hall'>" +
+            "<div>" +
+            "<span class='cinema-hall-name'>" + hall.name + "</span>" +
+            "<span class='cinema-hall-size'>" + hall.column + '*' + hall.row + "</span>" +
+            "</div>" +
+            "<div class='cinema-seat'>" + seat +
+            "</div>" +
+            "</div>";
+        hallDomStr += hallDom;
+
+        $('#hall-card').append(hallDomStr);
+    }
+});

src/main/resources/templates/userHome.html

@@ -27,7 +27,6 @@
         <ul class="nav nav-pills">
             <li role="presentation" class="active"><a href="#">首页</a></li>
             <li role="presentation"><a href="/user/movie">电影</a></li>
-            <li role="presentation"><a href="/user/buy">购票</a></li>
         </ul>
         <div class="btn-group">
             <button class="nav-user-container btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

src/main/resources/templates/userMember.html

@@ -27,7 +27,6 @@
     <ul class="nav nav-pills">
         <li role="presentation"><a href="/user/home">首页</a></li>
         <li role="presentation"><a href="/user/movie">电影</a></li>
-        <li role="presentation"><a href="/user/buy">购票</a></li>
     </ul>
     <div class="btn-group">
         <button class="nav-user-container btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"

src/main/resources/templates/userMovie.html

@@ -27,7 +27,6 @@
         <ul class="nav nav-pills">
             <li role="presentation"><a href="/user/home">首页</a></li>
             <li role="presentation" class="active"><a href="#">电影</a></li>
-            <li role="presentation"><a href="/user/buy">购票</a></li>
         </ul>
         <div class="btn-group">
             <button class="nav-user-container btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

src/main/resources/templates/userMovieBuy.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>电影详情</title>
+    <!-- Bootstrap 核心 CSS 文件 -->
+    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css"/>
+    <!-- font-asesome图标库 -->
+    <link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css"/>
+
+    <!-- 引入css样式文件 -->
+    <link rel="stylesheet" type="text/css" href="/css/common.css"/>
+    <link rel="stylesheet" type="text/css" href="/css/userMovieBuy.css"/>
+    <link rel="stylesheet" type="text/css" href="/css/cinemaHall.css"/>
+
+    <!-- 引入js脚本文件 -->
+    <!-- jquery -->
+    <script src="/js/jquery.js"></script>
+    <!-- Bootstrap 核心 JavaScript 文件 -->
+    <script src="/js/bootstrap.js"></script>
+    <script src="/js/request.js"></script>
+    <script src="/js/movieDetail.js"></script>
+    <script src="/js/userMovieBuy.js"></script>
+</head>
+<body>
+<div class="nav-top-container">
+    <div class="nav-logo title">NJU-Se电影购票系统</div>
+    <ul class="nav nav-pills">
+        <li role="presentation"><a href="/user/home">首页</a></li>
+        <li role="presentation" class="active"><a href="/user/movie">电影</a></li>
+    </ul>
+    <div class="btn-group">
+        <button class="nav-user-container btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
+                aria-expanded="false">
+            <img class="avatar-sm" src="/images/defaultAvatar.jpg"/>
+            <span class="gray-text" style="vertical-align: middle">用户A&nbsp;<span class="caret"></span></span>
+        </button>
+        <ul class="dropdown-menu">
+            <li><a href="/user/member">卡包</a></li>
+            <li id="logout"><a href="#">登出</a></li>
+        </ul>
+    </div>
+</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>
+            </ol>
+
+            <div class="seat-content">
+                <div class="hall content-card card" id="hall-card">
+                </div>
+
+                <div class="movie-detail">
+                    <div class="head">
+                        <div class="img-wrapper">
+                            <img id="movie-img">
+                        </div>
+                        <div class="info">
+                            <div id="movie-name"></div>
+                            <div>版本：国语版3D</div>
+                            <div>片长：137分钟</div>
+                        </div>
+                    </div>
+                    <hr/>
+                    <div>影厅：1号厅</div>
+                    <div>场次：4月17日 14:00场</div>
+                    <div>座位：还未选择座位</div>
+                    <hr/>
+                    <button class="btn btn-primary" disabled="disabled">确认下单</button>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
+</body>
+</html>

src/main/resources/templates/userMovieDetail.html

@@ -11,6 +11,7 @@
     <!-- 引入css样式文件 -->
     <link rel="stylesheet" type="text/css" href="/css/common.css"/>
     <link rel="stylesheet" type="text/css" href="/css/movieDetail.css"/>
+    <link rel="stylesheet" type="text/css" href="/css/userMovieDetail.css"/>
 
     <!-- 引入js脚本文件 -->
     <!-- jquery -->
@@ -21,43 +22,79 @@
     <script src="/js/movieDetail.js"></script>
 </head>
 <body>
-    <div class="nav-top-container">
-        <div class="nav-logo title">NJU-Se电影购票系统</div>
-        <ul class="nav nav-pills">
-            <li role="presentation"><a href="/user/home">首页</a></li>
-            <li role="presentation" class="active"><a href="/user/movie">电影</a></li>
-            <li role="presentation"><a href="/user/buy">购票</a></li>
+<div class="nav-top-container">
+    <div class="nav-logo title">NJU-Se电影购票系统</div>
+    <ul class="nav nav-pills">
+        <li role="presentation"><a href="/user/home">首页</a></li>
+        <li role="presentation" class="active"><a href="/user/movie">电影</a></li>
+    </ul>
+    <div class="btn-group">
+        <button class="nav-user-container btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
+                aria-expanded="false">
+            <img class="avatar-sm" src="/images/defaultAvatar.jpg"/>
+            <span class="gray-text" style="vertical-align: middle">用户A&nbsp;<span class="caret"></span></span>
+        </button>
+        <ul class="dropdown-menu">
+            <li><a href="/user/member">卡包</a></li>
+            <li id="logout"><a href="#">登出</a></li>
         </ul>
-        <div class="btn-group">
-            <button class="nav-user-container btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <img class="avatar-sm" src="/images/defaultAvatar.jpg" />
-                <span class="gray-text" style="vertical-align: middle">用户A&nbsp;<span class="caret"></span></span>
-            </button>
-            <ul class="dropdown-menu">
-                <li><a href="/user/member">卡包</a></li>
-                <li id="logout"><a href="#">登出</a></li>
-            </ul>
-        </div>
     </div>
-    <div class="content-container">
-        <div class="content-header">
-            <img id="movie-img">
-            <div class="movie-basic-info">
-                <div><span class="title" id="movie-name"></span></div>
-                <div style="margin-top: 20px;"><span>简 介 ：</span><span id="movie-description" class="gray-text"></span></div>
-                <div><span>上 映 ：</span><span id="movie-startDate"></span></div>
-                <div><span>类 型 ：</span><span id="movie-type"></span></div>
-                <div><span>地 区 ：</span><span id="movie-country"></span></div>
-                <div><span>语 言 ：</span><span id="movie-language"></span></div>
-                <div><span>导 演 ：</span><span id="movie-director"></span></div>
-                <div><span>主 演 ：</span><span id="movie-starring"></span></div>
-                <div><span>编 剧 ：</span><span id="movie-writer"></span></div>
-                <div class="movie-operations"><button type="button" class="btn btn-primary" id="like-btn"><i class='icon-heart'></i><span> 想 看</span></button></div>
+</div>
+<div class="content-container">
+    <div class="content-header">
+        <img id="movie-img">
+        <div class="movie-basic-info">
+            <div><span class="title" id="movie-name"></span></div>
+            <div style="margin-top: 20px;"><span>简 介 ：</span><span id="movie-description" class="gray-text"></span>
+            </div>
+            <div><span>上 映 ：</span><span id="movie-startDate"></span></div>
+            <div><span>类 型 ：</span><span id="movie-type"></span></div>
+            <div><span>地 区 ：</span><span id="movie-country"></span></div>
+            <div><span>语 言 ：</span><span id="movie-language"></span></div>
+            <div><span>导 演 ：</span><span id="movie-director"></span></div>
+            <div><span>主 演 ：</span><span id="movie-starring"></span></div>
+            <div><span>编 剧 ：</span><span id="movie-writer"></span></div>
+            <div class="movie-operations">
+                <button type="button" class="btn btn-primary" id="like-btn"><i class='icon-heart'></i><span> 想 看</span>
+                </button>
             </div>
         </div>
-        <div class="seesion-container">
-            <h1>暂无排片</h1>
+    </div>
+    <div class="seesion-container">
+        <!--<h1>暂无排片</h1>-->
+        <ul class="nav nav-tabs">
+            <li role="presentation" class="active"><a href="#">4月17日（今天）</a></li>
+            <li role="presentation"><a href="#">4月18日</a></li>
+            <li role="presentation"><a href="#">4月19日</a></li>
+            <li role="presentation"><a href="#">4月20日</a></li>
+        </ul>
+
+        <div class="table-wrapper">
+            <table class="table table-striped">
+                <thead>
+                <tr>
+                    <th>放映开始时间</th>
+                    <th>放映结束时间</th>
+                    <th>版本</th>
+                    <th>放映厅</th>
+                    <th>票价（元）</th>
+                    <th>选座购票</th>
+                </tr>
+                </thead>
+
+                <tbody>
+                <tr>
+                    <td>14:00</td>
+                    <td>预计15:35散场</td>
+                    <td>国语3D</td>
+                    <td>1号厅</td>
+                    <td><b>31.00</b></td>
+                    <td><a class="btn btn-primary" href="/user/movieDetail/buy?id=10" role="button">选座购票</a></td>
+                </tr>
+                </tbody>
+            </table>
         </div>
     </div>
+</div>
 </body>
 </html>