酒店列表，部分详情，登录注册

front_end/src/api/hotel.js

@@ -4,4 +4,10 @@ export function getHotelsAPI() {
         url: '/api/hotel/all',
         method: 'get'
     })
+}
+export function getHotelByIdAPI(param) {
+    return axios({
+        url: `/api/hotel/${param.hotelId}/detail`,
+        method: 'GET'
+    })
 }

front_end/src/components/header.vue

@@ -90,11 +90,6 @@ export default {
         selectMenu(v){
             console.log(v)
         },
-        onSearch(v) {
-            if(this.$route.query.keyword != v){
-                // this.$router.push({ name: 'search', query: { keyword: v } })
-            }
-        },
         async quit() {
             await this.$store.dispatch('logout')
             this.$router.push(`/login?redirect=${this.$route.fullPath}`)
@@ -120,6 +115,7 @@ export default {
             height: 44px;
             line-height: 44px;
             vertical-align: middle;
+            min-width: 400px;
 
             .logo {
             height: 44px;

front_end/src/store/getters.js

@@ -4,7 +4,9 @@ const getters = {
   userId: state => state.user.userId,
   userInfo: state => state.user.userInfo,
   hotelListLoading: state => state.hotel.hotelListLoading,
-  hotelList: state => state.hotel.hotelList
+  hotelList: state => state.hotel.hotelList,
+  currentHotelInfo: state => state.hotel.currentHotelInfo,
+  currentHotelId: state => state.hotel.currentHotelId
   }
   
   export default getters

front_end/src/store/modules/hotel.js

@@ -1,7 +1,8 @@
 import { message } from 'ant-design-vue'
 import store from '@/store'
 import {
-    getHotelsAPI
+    getHotelsAPI,
+    getHotelByIdAPI
 } from '@/api/hotel'
 
 const hotel = {
@@ -32,10 +33,10 @@ const hotel = {
         set_hotelListLoading: function(state, data) {
             state.hotelListLoading = data
         },
-        set_currenhotelId: function(state, data) {
+        set_currentHotelId: function(state, data) {
             state.currentHotelId = data
         },
-        set_currenhotelInfo: function(state, data) {
+        set_currentHotelInfo: function(state, data) {
             state.currentHotelInfo = {
                 ...state.currentHotelInfo,
                 ...data
@@ -49,20 +50,16 @@ const hotel = {
             if(res){
                 commit('set_hotelList', res)
                 commit('set_hotelListLoading', false)
-                console.log(state.hotelList)
             }
         },
-        // getByHotelId: async({commit, state}) => {
-        //     const res = await getByHotelIdAPI({
-        //     hotelId: state.currenhotelId
-        //     })
-        //     if(res){
-        //         commit('set_currenhotelInfo', res)
-        //         commit('set_rateParams',{
-        //             rate: state.currenhotelInfo.myRate/2
-        //         })
-        //     }
-        // }
+        getHotelById: async({commit, state}) => {
+            const res = await getHotelByIdAPI({
+                hotelId: state.currentHotelId
+            })
+            if(res){
+                commit('set_currentHotelInfo', res)
+            }
+        }
     }
 }
 

front_end/src/views/hotel/hotelDetail.vue

@@ -1,19 +1,113 @@
 <template>
-    <div>hotelDetail</div>
+    <a-layout>
+        <a-layout-content>
+            <div class="hotelDetailCard">
+                <h1>
+                    {{ currentHotelInfo.title }}
+                </h1>
+                <div class="hotel-info">
+                    <a-card style="width: 240px">
+                        <img
+                            alt="example"
+                            src="@/assets/cover.jpeg"
+                            slot="cover"
+                            referrerPolicy="no-referrer"
+                            />
+                    </a-card>
+                    <div class="info">
+                        <div class="items" v-if="currentHotelInfo.name">
+                            <span class="label">酒店名称：</span>
+                            <span class="value">{{ currentHotelInfo.name }}</span>
+                        </div>
+                        <div class="items" v-if="currentHotelInfo.address">
+                            <span class="label">地址</span>
+                            <span class="value">{{ currentHotelInfo.address }}</span>
+                        </div>
+                        <div class="items" v-if="currentHotelInfo.casts">
+                            <span class="label">主演：</span>
+                            <span class="value" v-for="item in currentHotelInfo.casts" :key="item.index">{{ item }}</span>
+                        </div>
+                        <div class="items" v-if="currentHotelInfo.rate">
+                            <span class="label">评分:</span> 
+                            <span class="value">{{ currentHotelInfo.rate }}</span>
+                        </div>
+                        <div class="items" v-if="currentHotelInfo.hotelStar">
+                            <span class="label">星级:</span> 
+                            <a-rate style="font-size: 15px" :value="currentHotelInfo.rate" disabled allowHalf/>
+                        </div>
+                        <div class="items" v-if="currentHotelInfo.description">
+                            <span class="label">酒店简介:</span> 
+                            <span class="value">{{ currentHotelInfo.description }}</span>
+                        </div>
+                    </div>
+                </div>
+                
+            </div>
+            <a-divider></a-divider>
+        </a-layout-content>
+    </a-layout>
 </template>
 <script>
+import { mapGetters, mapActions, mapMutations } from 'vuex'
 export default {
     name: 'hotelDetail',
+    components: {
+
+    },
     data() {
         return {
 
         }
     },
-    mounted(){
-
+    computed: {
+        ...mapGetters([
+            'currentHotelInfo',
+        ])
+    },
+    mounted() {
+        this.set_currentHotelId(Number(this.$route.params.hotelId))
+        this.getHotelById()
+    },
+    beforeRouteUpdate(to, from, next) {
+        this.set_currentHotelId(Number(to.params.hotelId))
+        this.getHotelById()
+        next()
+    },
+    methods: {
+        ...mapMutations([
+            'set_currentHotelId',
+        ]),
+        ...mapActions([
+            'getHotelById'
+        ])
     }
 }
 </script>
-<style scoped>
-
+<style scoped lang="less">
+    .hotelDetailCard {
+        padding: 50px 50px;
+    }
+    .hotel-info {
+        display: flex;
+        align-items: stretch;
+        justify-content: flex-start;
+        .info{
+            padding: 10px 0;
+            display: flex;
+            flex-direction: column;
+            margin-left: 20px;
+            .items {
+                display: flex;
+                align-items: center;
+                margin-bottom: 10px;
+                .label{
+                    margin-right: 10px;
+                    font-size: 18px;
+                }
+                .value {
+                    margin-right: 15px
+                }
+            }
+        }
+    }
 </style>