迭代二基本需求实现

front_end/src/api/order.js

@@ -12,12 +12,18 @@ export function reserveHotelAPI(data) {
 export function getAllOrdersAPI() {
     return axios({
         url: `${api.orderPre}/getAllOrders`,
-        method: 'GET'
+        method: 'GET',
     })
 }
 export function getUserOrdersAPI(data) {
     return axios({
         url: `${api.orderPre}/${data.userId}/getUserOrders`,
-        method: 'GET'
+        method: 'GET',
+    })
+}
+export function cancelOrderAPI(orderId) {
+    return axios({
+        url: `${api.orderPre}/${orderId}/annulOrder`,
+        method: 'GET',
     })
 }

front_end/src/store/getters.js

@@ -20,6 +20,7 @@ const getters = {
   addHotelModalVisible: state => state.hotelManager.addHotelModalVisible,
   addRoomModalVisible: state => state.hotelManager.addRoomModalVisible,
   couponVisible: state => state.hotelManager.couponVisible,
+  addCouponVisible: state => state.hotelManager.addCouponVisible,
   activeHotelId: state => state.hotelManager.activeHotelId,
   couponList: state => state.hotelManager.couponList,
   }

front_end/src/store/modules/hotelManager.js

@@ -7,6 +7,7 @@ import {
 } from '@/api/order'
 import {
     hotelAllCouponsAPI,
+    hotelTargetMoneyAPI,
 } from '@/api/coupon'
 import { message } from 'ant-design-vue'
 
@@ -33,6 +34,7 @@ const hotelManager = {
         },
         addRoomModalVisible: false,
         couponVisible: false,
+        addCouponVisible: false,
         activeHotelId: 0,
         couponList: [],
     },
@@ -67,6 +69,9 @@ const hotelManager = {
         set_couponList: function(state, data) {
             state.couponList = data
         },
+        set_addCouponVisible: function(state, data) {
+            state.addCouponVisible =data
+        }
     },
     actions: {
         getAllOrders: async({ state, commit }) => {
@@ -116,6 +121,17 @@ const hotelManager = {
             if(res) {
                 commit('set_couponList', res)
             }
+        },
+        addHotelCoupon: async({ commit, dispatch }, data) => {
+            const res = await hotelTargetMoneyAPI(data)
+            if(res){
+                dispatch('getHotelCoupon')
+                commit('set_addCouponVisible', false)
+                commit('set_couponVisible',true)
+                message.success('添加策略成功')
+            }else{
+                message.error('添加失败')
+            }
         }
     }
 }

front_end/src/store/modules/user.js

@@ -12,6 +12,7 @@ import {
 
 import {
     getUserOrdersAPI,
+    cancelOrderAPI,
 } from '@/api/order'
 
 const getDefaultState = () => {
@@ -107,6 +108,16 @@ const user = {
             const res = await getUserOrdersAPI(data)
             if(res){
                 commit('set_userOrderList', res)
+                console.log(state.userOrderList)
+            }
+        },
+        cancelOrder: async({ state, dispatch }, orderId) => {
+            const res = await cancelOrderAPI(orderId)
+            if(res) {
+                dispatch('getUserOrders')
+                message.success('撤销成功')
+            }else{
+                message.error('撤销失败')
             }
         },
         logout: async({ commit }) => {

front_end/src/views/hotelManager/components/addCoupon.vue

@@ -0,0 +1,120 @@
+<template>
+    <a-modal
+        :visible="addCouponVisible"
+        title="添加优惠策略"
+        cancelText="取消"
+        okText="确定"
+        @cancel="cancel"
+        @ok="handleSubmit"
+    >
+        <a-form :form="form" style="margin-top: 30px" v-bind="formItemLayout">
+            <a-form-item label="优惠券类型" v-bind="formItemLayout">
+                <a-select
+                    v-decorator="[
+                    'type', 
+                    { rules: [{ required: true, message: '请选择类型' }] }]"
+                    @change="changeType"
+                >
+                  <a-select-option value="1">生日特惠</a-select-option>
+                  <a-select-option value="2">多间特惠</a-select-option>
+                  <a-select-option value="3">满减特惠</a-select-option>
+                  <a-select-option value="4">限时特惠</a-select-option>
+                </a-select>
+            </a-form-item>
+            <a-form-item label="券名" v-bind="formItemLayout">
+                <a-input
+                    placeholder="请填写券名"
+                    v-decorator="['name', { rules: [{ required: true, message: '请输入券名' }] }]"
+                />
+            </a-form-item>
+            <a-form-item label="优惠简介" v-bind="formItemLayout">
+                <a-input
+                    type="textarea"
+                    :rows="4"
+                    placeholder="请填写优惠简介"
+                    v-decorator="['description', { rules: [{ required: true, message: '请填写优惠简介' }] }]"
+                />
+            </a-form-item>
+             <a-form-item label="达标金额">
+                <a-input
+                    placeholder="请填写达标金额"
+                    v-decorator="['targetMoney', { rules: [{ required: true, message: '请填写达标金额' }] }]"
+                />
+            </a-form-item>
+            <a-form-item label="优惠金额" v-bind="formItemLayout">
+                <a-input
+                    placeholder="请填写优惠金额"
+                    v-decorator="['discountMoney', { rules: [{ required: true, message: '请填写优惠金额' }] }]"
+                />
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+<script>
+import { mapGetters, mapMutations, mapActions } from 'vuex'
+export default {
+    name: 'addCouponModal',
+    data() {
+        return {
+            formItemLayout: {
+                labelCol: {
+                    xs: { span: 12 },
+                    sm: { span: 6 },
+                },
+                wrapperCol: {
+                    xs: { span: 24 },
+                    sm: { span: 16 },
+                },
+            },
+        }
+    },
+    computed: {
+        ...mapGetters([
+            'activeHotelId',
+            'addCouponVisible',
+        ])
+    },
+    beforeCreate() {
+        this.form = this.$form.createForm(this, { name: 'addCouponModal' });
+    },
+    mounted() {
+
+    },
+    methods: {
+        ...mapMutations([
+            'set_addCouponVisible'
+        ]),
+        ...mapActions([
+            'addHotelCoupon'
+        ]),
+        cancel() {
+            this.set_addCouponVisible(false)
+        },
+        changeType(v){
+            if( v == '3') {
+
+            }else{
+                this.$message.warning('请实现')
+            }
+        },
+        handleSubmit(e) {
+            e.preventDefault();
+            this.form.validateFieldsAndScroll((err, values) => {
+                if (!err) {
+                    const data = {
+                        name: this.form.getFieldValue('name'),
+                        description: this.form.getFieldValue('description'),
+                        type: Number(this.form.getFieldValue('type')),
+                        targetMoney: Number(this.form.getFieldValue('targetMoney')),
+                        discountMoney: Number(this.form.getFieldValue('discountMoney')),
+                        hotelId: Number(this.activeHotelId),
+                        status: 1,
+                    }
+                    this.addHotelCoupon(data)
+                    console.log(data)
+                }
+            });
+        },
+    }
+}
+</script>

front_end/src/views/hotelManager/components/coupon.vue

@@ -1,40 +1,33 @@
 <template>
+   <div>
     <a-modal
         :visible="couponVisible"
         title="优惠策略"
         width="900px"
-        cancelText="取消"
-        okText="确定"
+        :footer="null"
         @cancel="cancel"
     >
+        <div style="width: 100%; text-align: right; margin:20px 0">
+            <a-button type="primary" @click="addCoupon"><a-icon type="plus" />添加优惠策略</a-button>
+        </div>
         <a-table
             :columns="columns"
             :dataSource="couponList"
             bordered
         >
-            <!-- <span slot="action" slot-scope="record">
-                <a-popconfirm
-                    title="确定想删除该酒店吗？"
-                    @confirm="deleteHotel(record)"
-                    okText="确定"
-                    cancelText="取消"
-                >
-                    <a-button type="danger" size="small">删除酒店</a-button>
-                </a-popconfirm>
-            </span> -->
             <a-tag color="red" slot="couponName" slot-scope="text">
                 {{text}}
             </a-tag>
         </a-table>
     </a-modal>
+    <AddCoupon></AddCoupon>
+   </div>
 </template>
 <script>
 import { mapGetters, mapMutations, mapActions } from 'vuex'
+import AddCoupon from './addCoupon'
+
 const columns = [
-    {  
-        title: '酒店名',
-        dataIndex: 'name',
-    },
     {
         title: '优惠类型',
         dataIndex: 'couponName',
@@ -44,7 +37,6 @@ const columns = [
         title: '折扣',
         dataIndex: 'discount',
     },
-
     {
         title: '优惠简介',
         dataIndex: 'description',
@@ -54,11 +46,6 @@ const columns = [
         title: '优惠金额',
         dataIndex: 'discountMoney',
     },
-    // {
-    //   title: '操作',
-    //   key: 'action',
-    //   scopedSlots: { customRender: 'action' },
-    // },
   ];
 export default {
     name: 'coupon',
@@ -67,6 +54,9 @@ export default {
             columns
         }
     },
+    components: {
+        AddCoupon,
+    },
     computed: {
         ...mapGetters([
             'couponVisible',
@@ -75,7 +65,8 @@ export default {
     },
     methods: {
         ...mapMutations([
-            'set_couponVisible'
+            'set_addCouponVisible',
+            'set_couponVisible',
         ]),
         ...mapActions([
             'getHotelCoupon'
@@ -83,6 +74,10 @@ export default {
         cancel() {
             this.set_couponVisible(false)
         },
+        addCoupon() {
+            this.set_addCouponVisible(true),
+            this.set_couponVisible(false)
+        },
     },
 }
 </script>

front_end/src/views/hotelManager/manageHotel.vue

@@ -4,7 +4,6 @@
             <a-tab-pane tab="酒店管理" key="1">
                 <div style="width: 100%; text-align: right; margin:20px 0">
                     <a-button type="primary" @click="addHotel"><a-icon type="plus" />添加酒店</a-button>
-                    <a-button type="info"><a-icon type="plus" />添加优惠策略</a-button>
                 </div>
                  <a-table
                     :columns="columns1"
@@ -160,7 +159,7 @@ export default {
             'addHotelModalVisible',
             'addRoomModalVisible',
             'activeHotelId',
-            'couponVisible'
+            'couponVisible',
         ]),
     },
     async mounted() {

front_end/src/views/user/info.vue

@@ -62,10 +62,23 @@
                         <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>
-                        <a-button type="danger" @click="order(record)">删除订单</a-button>
+                    <a-tag slot="orderState" color="blue" slot-scope="text">
+                        {{ text }}
+                    </a-tag>
+                    <span slot="action" slot-scope="record">
+                        <a-button type="primary" size="small">查看</a-button>
+                        <a-divider type="vertical" v-if="record.orderState == '已预订'"></a-divider>
+                        <a-popconfirm
+                            title="你确定撤销该笔订单吗？"
+                            @confirm="confirmCancelOrder(record.id)"
+                            @cancel="cancelCancelOrder"
+                            okText="确定"
+                            cancelText="取消"
+                            v-if="record.orderState == '已预订'"
+                        >
+                            <a-button type="danger" size="small">撤销</a-button>
+                        </a-popconfirm>
+                        
                     </span>
                 </a-table>
             </a-tab-pane>
@@ -106,11 +119,19 @@ const columns = [
         title: '房价',
         dataIndex: 'price',
     },
+    {
+        title: '状态',
+        filters: [{ text: '已预订', value: '已预订' }, { text: '已撤销', value: '已撤销' }, { text: '已入住', value: '已入住' }],
+        onFilter: (value, record) => record.orderState.includes(value),
+        dataIndex: 'orderState',
+        scopedSlots: { customRender: 'orderState' }
+    },
     {
       title: '操作',
       key: 'action',
       scopedSlots: { customRender: 'action' },
     },
+    
   ];
 export default {
     name: 'info',
@@ -142,6 +163,7 @@ export default {
             'getUserInfo',
             'getUserOrders',
             'updateUserInfo',
+            'cancelOrder'
         ]),
         saveModify() {
             this.form.validateFields((err, values) => {
@@ -168,6 +190,12 @@ export default {
         },
         cancelModify() {
             this.modify = false
+        },
+        confirmCancelOrder(orderId){
+            this.cancelOrder(orderId)
+        },
+        cancelCancelOrder() {
+
         }
         
     }