酒店列表、详情页、下单modal

front_end/src/store/getters.js

@@ -6,7 +6,9 @@ const getters = {
   hotelListLoading: state => state.hotel.hotelListLoading,
   hotelList: state => state.hotel.hotelList,
   currentHotelInfo: state => state.hotel.currentHotelInfo,
-  currentHotelId: state => state.hotel.currentHotelId
+  currentHotelId: state => state.hotel.currentHotelId,
+  orderModalVisible: state => state.hotel.orderModalVisible,
+  currentOrderRoom: state => state.hotel.currentOrderRoom
   }
   
   export default getters

front_end/src/store/modules/hotel.js

@@ -18,6 +18,10 @@ const hotel = {
         currentHotelId: '',
         currentHotelInfo: {
 
+        },
+        orderModalVisible: false,
+        currentOrderRoom: {
+
         }
     },
     mutations: {
@@ -27,7 +31,7 @@ const hotel = {
         set_hotelListParams: function(state, data) {
             state.hotelListParams = {
                 ...state.hotelListParams,
-                ...data
+                ...data,
             }
         },
         set_hotelListLoading: function(state, data) {
@@ -39,9 +43,18 @@ const hotel = {
         set_currentHotelInfo: function(state, data) {
             state.currentHotelInfo = {
                 ...state.currentHotelInfo,
-                ...data
+                ...data,
             }
         },
+        set_orderModalVisible: function(state, data) {
+            state.orderModalVisible = data
+        },
+        set_currentOrderRoom: function(state, data) {
+            state.currentOrderRoom = {
+                ...state.currentOrderRoom,
+                ...data,
+            }
+        }
     },
 
     actions: {

front_end/src/views/hotel/components/orderModal.vue

@@ -0,0 +1,128 @@
+<template>
+    <a-modal
+        :visible="orderModalVisible"
+        title="预定详情"
+        cancelText="取消"
+        okText="下单"
+        @cancel="cancelOrder"
+        @ok="handleSubmit"
+    >
+        <a-form :form="form">
+            <a-form-item v-bind="formItemLayout" label="房型信息">
+                <span>{{ currentOrderRoom.roomType }}</span>
+            </a-form-item>
+            <a-form-item v-bind="formItemLayout" label="房间单价">
+                <span>{{ currentOrderRoom.price }}</span>
+            </a-form-item>
+            <a-form-item v-bind="formItemLayout" label="入住如期">
+                <a-range-picker
+                    v-decorator="[
+                        'date', 
+                        {
+                            rules: [{ required: true, message: '请选择入住时间' }]   
+                        }
+                    ]"
+                    :placeholder="['入住日期','退房日期']"
+                />
+            </a-form-item>
+            <a-form-item v-bind="formItemLayout" label="入住人数">
+                <a-select
+                    v-decorator="[
+                        'peopleNum',
+                        { rules: [{ required: true, message: '请选择入住人数' }] },
+                    ]"
+                    placeholder="请选择入住人数"
+                    @change="changePeopleNum"
+                >
+                    <a-select-option value="1">
+                    1
+                    </a-select-option>
+                    <a-select-option value="2">
+                    2
+                    </a-select-option>
+                     <a-select-option value="3">
+                    3
+                    </a-select-option>
+                    <a-select-option value="4">
+                    4
+                    </a-select-option>
+                </a-select>
+            </a-form-item>
+            <a-form-item v-bind="formItemLayout" label="房费情况">
+                <span>￥{{ totalPrice }}</span>
+            </a-form-item>
+            
+            <a-divider></a-divider>
+
+            <a-form-item v-bind="formItemLayout" label="入住人姓名">
+                <a-input
+                    v-decorator="[
+                        'clientName',
+                        { rules: [{required: true, message: '请填写入住人姓名', }] }
+                    ]"
+                />
+            </a-form-item>
+            <a-form-item v-bind="formItemLayout" label="手机号">
+                <a-input
+                    v-decorator="[
+                        'phoneNumber',
+                        { rules: [{required: true, message: '请填写入住人联系手机', }] }
+                    ]"
+                />
+            </a-form-item >
+        </a-form>
+    </a-modal>
+</template>
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+export default {
+    name: 'orderModal',
+    data() {
+        return {
+            formItemLayout: {
+                labelCol: {
+                    xs: { span: 12 },
+                    sm: { span: 6 },
+                },
+                wrapperCol: {
+                    xs: { span: 24 },
+                    sm: { span: 16 },
+                },
+            },
+            totalPrice: ''
+        }
+    },
+    computed: {
+        ...mapGetters([
+            'orderModalVisible',
+            'currentOrderRoom'
+        ]),
+        
+    },
+    beforeCreate() {
+        this.form = this.$form.createForm(this, { name: 'orderModal' });
+    },
+    methods: {
+        ...mapMutations([
+            'set_orderModalVisible'
+        ]),
+        cancelOrder() {
+            this.set_orderModalVisible(false)
+        },
+        confirmOrder() {
+
+        },
+        changePeopleNum(v){
+            this.totalPrice = Number(v) * Number(this.currentOrderRoom.price)
+        },
+        handleSubmit(e) {
+            e.preventDefault();
+            this.form.validateFieldsAndScroll((err, values) => {
+                if (!err) {
+                    console.log('Received values of form: ', values);
+                }
+            });
+        },
+    }
+}
+</script>

front_end/src/views/hotel/components/roomList.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="room-list">
+        <div class="filter">
+
+        </div>
+        <div class="list">
+            <a-table
+                :columns="columns"
+                :dataSource="rooms"
+            >
+                <span slot="price" slot-scope="text">
+                    <span>￥{{ text }}</span>
+                </span>
+                <span slot="action" slot-scope="text, record">
+                    <a-button type="primary" @click="order(record)">预定</a-button>
+                </span>
+            </a-table>
+        </div>
+        <OrderModal></OrderModal>
+    </div>
+</template>
+<script>
+import { mapGetters, mapActions, mapMutations } from 'vuex'
+import OrderModal from './orderModal'
+const columns = [
+    {  
+      title: '房型',
+      dataIndex: 'roomType',
+      key: 'roomType',
+    },
+    {
+      title: '床型',
+      dataIndex: 'bedType',
+      key: 'bedType',
+    },
+    {
+      title: '早餐',
+      dataIndex: 'breakfast',
+      key: 'breakfast',
+    },
+    {
+      title: '入住人数',
+      key: 'peopleNum',
+      dataIndex: 'peopleNum',
+    },
+    {
+      title: '房价',
+      key: 'price',
+      dataIndex: 'price',
+      scopedSlots: { customRender: 'price'}
+    },
+    {
+      title: 'Action',
+      key: 'action',
+      scopedSlots: { customRender: 'action' },
+    },
+  ];
+export default {
+    name:'roomList',
+    props: {
+        rooms: {
+            type: Array
+        }
+    },
+    data() {
+        return {
+            columns,
+        }
+    },
+    components: {
+        OrderModal
+    },
+    computed: {
+        ...mapGetters([
+            'orderModalVisible'
+        ])
+    },
+    monuted() {
+
+    },
+    methods: {
+        ...mapMutations([
+            'set_orderModalVisible',
+            'set_currentOrderRoom'
+        ]),
+        ...mapActions([
+
+        ]),
+        order(record) {
+            this.set_currentOrderRoom(record)
+            this.set_orderModalVisible(true)
+        }
+    }
+}
+</script>

front_end/src/views/hotel/hotelDetail.vue

@@ -41,18 +41,26 @@
                         </div>
                     </div>
                 </div>
-                
+                <a-divider></a-divider>
+                <a-tabs>
+                    <a-tab-pane tab="房间信息" key="1">
+                        <RoomList :rooms="currentHotelInfo.rooms"></RoomList>
+                    </a-tab-pane>
+                    <a-tab-pane tab="酒店详情" key="2">
+
+                    </a-tab-pane>
+                </a-tabs>
             </div>
-            <a-divider></a-divider>
         </a-layout-content>
     </a-layout>
 </template>
 <script>
 import { mapGetters, mapActions, mapMutations } from 'vuex'
+import RoomList from './components/roomList'
 export default {
     name: 'hotelDetail',
     components: {
-
+        RoomList,
     },
     data() {
         return {