Forráskód Böngészése

恢复挖空代码

陈远志 6 éve
szülő
commit
54d71c09ec

BIN
front_end/public/addCoupon.png


BIN
front_end/public/couponList.png


+ 6 - 3
front_end/src/store/modules/hotelManager.js

@@ -119,15 +119,18 @@ const hotelManager = {
         getHotelCoupon: async({ state, commit }) => {
             const res = await hotelAllCouponsAPI(state.activeHotelId)
             if(res) {
-                // 获取到酒店策略之后的操作(将获取到的数组赋值给couponList)
+                commit('set_couponList', res)
             }
         },
         addHotelCoupon: async({ commit, dispatch }, data) => {
             const res = await hotelTargetMoneyAPI(data)
             if(res){
-                // 添加成功后的操作(提示文案、modal框显示与关闭,调用优惠列表策略等)
+                dispatch('getHotelCoupon')
+                commit('set_addCouponVisible', false)
+                commit('set_couponVisible',true)
+                message.success('添加策略成功')
             }else{
-                // 添加失败后的操作
+                message.error('添加失败')
             }
         }
     }

+ 48 - 2
front_end/src/views/hotelManager/components/addCoupon.vue

@@ -7,7 +7,47 @@
         @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>
@@ -64,7 +104,13 @@ export default {
             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)
                 }

+ 30 - 2
front_end/src/views/hotelManager/components/coupon.vue

@@ -7,7 +7,18 @@
         :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
+        >
+            <a-tag color="red" slot="couponName" slot-scope="text">
+                {{text}}
+            </a-tag>
+        </a-table>
     </a-modal>
     <AddCoupon></AddCoupon>
    </div>
@@ -17,7 +28,24 @@ import { mapGetters, mapMutations, mapActions } from 'vuex'
 import AddCoupon from './addCoupon'
 
 const columns = [
-    // 这里定义列表头
+    {
+        title: '优惠类型',
+        dataIndex: 'couponName',
+        scopedSlots: {customRender: 'couponName'}
+    },
+    {
+        title: '折扣',
+        dataIndex: 'discount',
+    },
+    {
+        title: '优惠简介',
+        dataIndex: 'description',
+        
+    },
+    {
+        title: '优惠金额',
+        dataIndex: 'discountMoney',
+    },
   ];
 export default {
     name: 'coupon',