订单功能

front_end/package.json

@@ -14,6 +14,7 @@
     "js-cookie": "^2.2.1",
     "less": "^3.11.1",
     "less-loader": "^5.0.0",
+    "moment": "^2.24.0",
     "nprogress": "^0.2.0",
     "vue": "^2.6.11",
     "vue-router": "^3.1.5",

front_end/src/api/hotel.js

@@ -14,10 +14,3 @@ export function getHotelByIdAPI(param) {
         method: 'GET',
     })
 }
-export function reserveHotel(data) {
-    return axios({
-        url: `${api.hotelPre}/reserve`,
-        method: 'POST',
-        data,
-    })
-}

front_end/src/api/hotelManager.js

@@ -16,9 +16,3 @@ export function addHotelAPI(data) {
         data,
     })
 }
-export function getAllOrdersAPI() {
-    return axios({
-        url: '/api/order/getAllOrders',
-        method: 'GET'
-    })
-}

front_end/src/api/order.js

@@ -0,0 +1,23 @@
+import { axios } from '@/utils/request'
+const api = {
+    orderPre: '/api/order'
+}
+export function reserveHotelAPI(data) {
+    return axios({
+        url: `${api.orderPre}/addOrder`,
+        method: 'POST',
+        data,
+    })
+}
+export function getAllOrdersAPI() {
+    return axios({
+        url: `${api.orderPre}/getAllOrders`,
+        method: 'GET'
+    })
+}
+export function getUserOrdersAPI(data) {
+    return axios({
+        url: `${api.orderPre}/${data.userId}/getUserOrders`,
+        method: 'GET'
+    })
+}

front_end/src/api/user.js

@@ -30,9 +30,3 @@ export function updateUserInfoAPI(data) {
         data
     })
 }
-export function getUserOrdersAPI(data) {
-    return axios({
-        url: `/api/order/${data.userId}/getUserOrders`,
-        method: 'GET'
-    })
-}

front_end/src/store/modules/hotel.js

@@ -5,6 +5,10 @@ import {
     getHotelByIdAPI
 } from '@/api/hotel'
 
+import {
+    reserveHotelAPI
+} from '@/api/order'
+
 const hotel = {
     state: {
         hotelList: [
@@ -72,7 +76,15 @@ const hotel = {
             if(res){
                 commit('set_currentHotelInfo', res)
             }
-        }
+        },
+        addOrder: async({ state, commit }, data) => {
+            const res = await reserveHotelAPI(data)
+            console.log(res)
+            if(res){
+                message.success('预定成功')
+                commit('set_orderModalVisible', false)
+            }
+        },
     }
 }
 

front_end/src/store/modules/hotelManager.js

@@ -1,8 +1,11 @@
 import {
-    getAllOrdersAPI,
     addRoomAPI,
     addHotelAPI,
 } from '@/api/hotelManager'
+
+import {
+    getAllOrdersAPI,
+} from '@/api/order'
 import { message } from 'ant-design-vue'
 const hotelManager = {
     state: {
@@ -58,7 +61,8 @@ const hotelManager = {
         getAllOrders: async({ state, commit }) => {
             const res = await getAllOrdersAPI()
             if(res){
-                commit('set_orderList', res.data)
+                commit('set_orderList', res)
+                console.log()
             }
         },
         addHotel: async({ state, dispatch, commit }) => {

front_end/src/store/modules/user.js

@@ -8,9 +8,12 @@ import {
     registerAPI,
     getUserInfoAPI,
     updateUserInfoAPI,
-    getUserOrdersAPI,
 } from '@/api/user'
 
+import {
+    getUserOrdersAPI,
+} from '@/api/order'
+
 const getDefaultState = () => {
     return {
         userId: '',
@@ -99,7 +102,7 @@ const user = {
         },
         getUserOrders: async({ state, commit }) => {
             const data = {
-                userId: state.userId
+                userId: Number(state.userId)
             }
             const res = await getUserOrdersAPI(data)
             if(res){

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

@@ -14,8 +14,10 @@
             <a-form-item v-bind="formItemLayout" label="房间单价">
                 <span>{{ currentOrderRoom.price }}</span>
             </a-form-item>
-            <a-form-item v-bind="formItemLayout" label="入住如期">
+            <a-form-item v-bind="formItemLayout" label="入住日期">
                 <a-range-picker
+                    format="YYYY-MM-DD"
+                    @change="changeDate"
                     v-decorator="[
                         'date', 
                         {
@@ -34,20 +36,40 @@
                     placeholder="请选择入住人数"
                     @change="changePeopleNum"
                 >
-                    <a-select-option value="1">
+                    <a-select-option :value="1">
                     1
                     </a-select-option>
-                    <a-select-option value="2">
+                    <a-select-option :value="2">
                     2
                     </a-select-option>
-                     <a-select-option value="3">
+                     <a-select-option :value="3">
                     3
                     </a-select-option>
-                    <a-select-option value="4">
+                    <a-select-option :value="4">
                     4
                     </a-select-option>
                 </a-select>
             </a-form-item>
+            <a-form-item v-bind="formItemLayout" label="房间数">
+                <a-select
+                    v-decorator="[
+                        'roomNum',
+                        { rules: [{ required: true, message: '请选择房间数' }] },
+                    ]"
+                    placeholder="请选择房间数"
+                    @change="changeRoomNum"
+                >
+                    <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>
+            </a-form-item>
             <a-form-item v-bind="formItemLayout" label="房费情况">
                 <span>￥{{ totalPrice }}</span>
             </a-form-item>
@@ -69,12 +91,24 @@
                         { rules: [{required: true, message: '请填写入住人联系手机', }] }
                     ]"
                 />
-            </a-form-item >
+            </a-form-item>
+            <a-form-item v-bind="formItemLayout" label="有无儿童">
+                <a-radio-group
+                    v-decorator="[
+                        'haveChild',
+                        { rules: [{required: true, message: '请选择有无儿童入住', }] }
+                    ]"
+                >
+                    <a-radio :value="1">有</a-radio>
+                    <a-radio :value="0">无</a-radio>
+                </a-radio-group>
+            </a-form-item>
         </a-form>
     </a-modal>
 </template>
 <script>
-import { mapGetters, mapMutations } from 'vuex'
+import { mapGetters, mapMutations, mapActions } from 'vuex'
+const moment = require('moment')
 export default {
     name: 'orderModal',
     data() {
@@ -95,7 +129,10 @@ export default {
     computed: {
         ...mapGetters([
             'orderModalVisible',
-            'currentOrderRoom'
+            'currentOrderRoom',
+            'currentHotelId',
+            'currentHotelInfo',
+            'userId',
         ]),
         
     },
@@ -106,20 +143,44 @@ export default {
         ...mapMutations([
             'set_orderModalVisible'
         ]),
+        ...mapActions([
+            'addOrder'
+        ]),
         cancelOrder() {
             this.set_orderModalVisible(false)
         },
         confirmOrder() {
 
+        },
+        changeDate(v) {
+            if(this.totalPrice != ''){
+                this.totalPrice = this.form.getFieldValue('roomNum') * moment(v[1]).diff(moment(v[0]), 'day') * Number(this.currentOrderRoom.price)
+            }
         },
         changePeopleNum(v){
-            this.totalPrice = Number(v) * Number(this.currentOrderRoom.price)
+
+        },
+        changeRoomNum(v) {
+            this.totalPrice = Number(v) * Number(this.currentOrderRoom.price) * moment(this.form.getFieldValue('date')[1]).diff(moment(this.form.getFieldValue('date')[0]),'day')
         },
         handleSubmit(e) {
             e.preventDefault();
             this.form.validateFieldsAndScroll((err, values) => {
                 if (!err) {
-                    console.log('Received values of form: ', values);
+                    const data = {
+                        hotelId: this.currentHotelId,
+                        hotelName: this.currentHotelInfo.name,
+                        userId: Number(this.userId),
+                        checkInDate: moment(this.form.getFieldValue('date')[0]).format('YYYY-MM-DD'),
+                        checkOutDate: moment(this.form.getFieldValue('date')[1]).format('YYYY-MM-DD'),
+                        roomType: this.currentOrderRoom.roomType == '大床房' ? 'BigBed' : this.currentOrderRoom.roomType == '双床房' ? 'DoubleBed' : 'Family',
+                        roomNum: this.form.getFieldValue('roomNum'),
+                        peopleNum: this.form.getFieldValue('peopleNum'),
+                        haveChild: this.form.getFieldValue('haveChild'),
+                        createForm: '',
+                        price: this.currentOrderRoom.price
+                    }
+                    this.addOrder(data)
                 }
             });
         },

front_end/src/views/hotelManager/manageHotel.vue

@@ -30,17 +30,22 @@
                     :dataSource="orderList"
                     bordered
                 >
-                    <span slot="status" slot-scope="status">
-                        <a-tag
-                            :color="status==='入住中' ? 'green' :  'red' "
-                            :key="status"
-                        >
-                            {{ status }}
-                        </a-tag>
-                    </span>
+                        <!-- <span slot="status" slot-scope="status">
+                            <a-tag
+                                :color="status==='入住中' ? 'green' :  'red' "
+                                :key="status"
+                            >
+                                {{ status }}
+                            </a-tag>
+                        </span> -->
                     <span slot="price" slot-scope="text">
                         <span>￥{{ text }}</span>
                     </span>
+                    <span slot="roomType" slot-scope="text">
+                        <span v-if="text == 'BigBed'">大床房</span>
+                        <span v-if="text == 'DoubleBed'">双床房</span>
+                        <span v-if="text == 'Family'">家庭房</span>
+                    </span>
                     <span slot="action" slot-scope="record">
                         <a-button type="primary" size="small">订单详情</a-button>
                         <a-divider type="vertical"></a-divider>
@@ -64,6 +69,7 @@
 import { mapGetters, mapMutations, mapActions } from 'vuex'
 import AddHotelModal from './components/addHotelModal'
 import AddRoomModal from './components/addRoomModal'
+const moment = require('moment')
 const columns1 = [
     {  
         title: '酒店名',
@@ -98,7 +104,7 @@ const columns1 = [
 const columns2 = [
     {  
         title: '订单号',
-        dataIndex: 'orderId',
+        dataIndex: 'id',
     },
     {  
         title: '酒店名',
@@ -107,14 +113,17 @@ const columns2 = [
     {
         title: '房型',
         dataIndex: 'roomType',
+        scopedSlots: { customRender: 'roomType' }
     },
     {
         title: '入住时间',
         dataIndex: 'checkInDate',
+        scopedSlots: { customRender: 'checkInDate' }
     },
     {
         title: '离店时间',
         dataIndex: 'checkOutDate',
+        scopedSlots: { customRender: 'checkOutDate' }
     },
     {
         title: '入住人数',
@@ -124,41 +133,12 @@ const columns2 = [
         title: '房价',
         dataIndex: 'price',
     },
-    {
-        title: '状态',
-        dataIndex: 'status',
-        scopedSlots: { customRender: 'status' },
-    },
     {
       title: '操作',
       key: 'action',
       scopedSlots: { customRender: 'action' },
     },
   ];
-  const data2 = [
-    {
-      key: '1',
-      orderId: '2019123000001',
-      hotelName: '如家酒店(珠江路地铁站店)',
-      roomType: '大床房',
-      checkInDate: '2019-12-30',
-      checkOutDate: '2019-12-31',
-      peopleNum: '2',
-      price: '298',
-      status: '已离店'
-    },
-    {
-      key: '2',
-      orderId: '2019123000001',
-      hotelName: '如家酒店(珠江路地铁站店)',
-      roomType: '标准间',
-      checkInDate: '2019-12-30',
-      checkOutDate: '2019-12-31',
-      peopleNum: '1',
-      price: '298',
-      status: '入住中'
-    },
-  ];
 export default {
     name: 'manageHotel',
     data(){
@@ -167,7 +147,6 @@ export default {
             pagination: {},
             columns1,
             columns2,
-            data2,
             form: this.$form.createForm(this, { name: 'manageHotel' }),
         }
     },
@@ -182,7 +161,7 @@ export default {
             'addHotelModalVisible',
             'addRoomModalVisible',
             'activeHotelId',
-        ])
+        ]),
     },
     async mounted() {
         await this.getHotelList()

front_end/src/views/user/info.vue

@@ -57,6 +57,11 @@
                     <span slot="price" slot-scope="text">
                         <span>￥{{ text }}</span>
                     </span>
+                    <span slot="roomType" slot-scope="text">
+                        <span v-if="text == 'BigBed'">大床房</span>
+                        <span v-if="text == 'DoubleBed'">双床房</span>
+                        <span v-if="text == 'Family'">家庭房</span>
+                    </span>
                     <span slot="action" slot-scope="text, record">
                         <a-button type="primary" @click="order(record)">订单详情</a-button>
                         <a-divider type="vertical"></a-divider>
@@ -70,17 +75,28 @@
 <script>
 import { mapGetters, mapMutations, mapActions } from 'vuex'
 const columns = [
+    {  
+        title: '订单号',
+        dataIndex: 'id',
+    },
     {  
         title: '酒店名',
         dataIndex: 'hotelName',
     },
+    {
+        title: '房型',
+        dataIndex: 'roomType',
+        scopedSlots: { customRender: 'roomType' }
+    },
     {
         title: '入住时间',
-        dataIndex: 'InDate',
+        dataIndex: 'checkInDate',
+        scopedSlots: { customRender: 'checkInDate' }
     },
     {
         title: '离店时间',
-        dataIndex: 'outDate',
+        dataIndex: 'checkOutDate',
+        scopedSlots: { customRender: 'checkOutDate' }
     },
     {
         title: '入住人数',
@@ -90,10 +106,6 @@ const columns = [
         title: '房价',
         dataIndex: 'price',
     },
-    {
-        title: '状态',
-        dataIndex: 'status'
-    },
     {
       title: '操作',
       key: 'action',