修改优惠券发放

vue-admin-template-master/src/views/coupon/query/index.vue

@@ -93,17 +93,6 @@
           show-overflow-tooltip
         ></el-table-column>
       </el-table>
-      <!-- <div class="pd-30">
-        <el-pagination
-          v-show="total>0"
-          background
-          layout="prev, pager, next"
-          :total="total"
-          @current-change="handleCurrentChange"
-          :current-page.sync="listQuery.page"
-          :page-size="listQuery.limit"
-        ></el-pagination>
-      </div>-->
     </el-card>
 
     <el-dialog title="发放优惠券" :visible.sync="dialogFormVisible">
@@ -114,12 +103,8 @@
         label-width="100px"
         style="width: 400px; margin-left:50px;"
       >
-        <el-form-item label="券类型" prop="title">
-          <el-select
-            v-model="ruleForm.title"
-            placeholder="请选择券类型"
-            @change="titleChange"
-          >
+        <el-form-item label="券类型" prop="category">
+          <el-select v-model="ruleForm.category" placeholder="请选择券类型">
             <el-option
               v-for="(item, index) in couponType"
               :key="index"
@@ -128,40 +113,29 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="金额" prop="amount">
-          <el-select
-            v-model="ruleForm.amount"
-            placeholder="请选择金额"
-            @change="amountChange"
-          >
-            <el-option
-              v-for="(item, index) in couponAmount"
-              :key="index"
-              :label="item.label"
-              :value="item.value"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="描述">
-          <!-- <el-select v-model="ruleForm.description" disabled>
-            <el-option
-              v-for="(item,index) in couponDescription"
-              :key="index"
-              :label="item.label"
-              :value="item.value"
-            ></el-option>
-          </el-select>-->
+        <el-form-item
+          v-if="ruleForm.category === 'reduction'"
+          label="金额"
+          prop="amount"
+        >
           <el-input
-            v-model="ruleForm.description"
-            disabled
+            type="number"
+            v-model="ruleForm.amount"
             style="width: 300px;"
           ></el-input>
         </el-form-item>
         <el-form-item
-          label="过期时间"
-          prop="duedate"
-          v-if="ruleForm.title == '立减券' || ruleForm.title == 'VIP免单券'"
+          v-if="ruleForm.category === 'discount'"
+          label="折扣"
+          prop="discount"
         >
+          <el-input
+            type="number"
+            v-model="ruleForm.discount"
+            style="width: 300px;"
+          ></el-input>
+        </el-form-item>
+        <!-- <el-form-item label="过期时间" prop="duedate">
           <el-date-picker
             value-format="yyyy-MM-dd"
             v-model="ruleForm.duedate"
@@ -169,15 +143,10 @@
             placeholder="选择日期"
             :picker-options="pickerBeginDateBefore"
           ></el-date-picker>
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="电话号" prop="phone">
           <el-input v-model="ruleForm.phone" style="width: 300px;"></el-input>
         </el-form-item>
-
-        <!-- <el-form-item>
-          <el-button type="primary" @click="submitForm('ruleForm')">立即发放</el-button>
-          <el-button @click="resetForm('ruleForm')">重置</el-button>
-        </el-form-item>-->
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取消</el-button>
@@ -203,50 +172,42 @@ const validatePhone = (rule, value, callback) => {
     }
   }
 };
-const couponType = [
-  {
-    label: "立减券",
-    value: "立减券"
-  },
-  // {
-  //   label: "月卡券",
-  //   value: "月卡券"
-  // },
-  {
-    label: "VIP免单券",
-    value: "VIP免单券"
+// 立减券金额验证
+const validateReduction = (rule, value, callback) => {
+  if (value === "") {
+    callback(new Error("请输入金额"));
+  } else {
+    if (!/(^[1-9]\d*$)/.test(value)) {
+      callback(new Error("金额为正整数"));
+    } else {
+      callback();
+    }
   }
-];
-const couponAmount = [
-  {
-    label: 15,
-    value: 15
-  },
-  {
-    label: 12,
-    value: 12
-  },
-  {
-    label: 30,
-    value: 30
+};
+// 折扣验证
+const validateDiscount = (rule, value, callback) => {
+  if (value === "") {
+    callback(new Error("请输入折扣"));
+  } else {
+    if (!/^(?=1\.[1-9]|[1-9]\.\d).{3}$|^([2-9])$/.test(value)) {
+      callback(new Error("折扣范围为1.1～9.9"));
+    } else {
+      callback();
+    }
   }
-];
-const couponDescription = [
-  {
-    label: "立减15元，回馈老用户",
-    value: "立减15元，回馈老用户"
-  },
+};
+const couponType = [
   {
-    label: "立减12元，回馈老用户",
-    value: "立减12元，回馈老用户"
+    label: "立减券",
+    value: "reduction"
   },
   {
-    label: "立减15元，每天限用1次",
-    value: "立减15元，每天限用1次"
+    label: "折扣券",
+    value: "discount"
   },
   {
-    label: "任意咖啡(一杯)免单,VIP用户专享",
-    value: "任意咖啡(一杯)免单,VIP用户专享"
+    label: "VIP免单券",
+    value: "vip"
   }
 ];
 export default {
@@ -274,22 +235,29 @@ export default {
       couponAmount: [],
       couponDescription: [],
       ruleForm: {
-        title: "",
-        amount: "",
-        description: "",
-        duedate: "",
+        category: "",
+        discount: 5.8,
+        amount: 15,
+        // duedate: "",
         phone: ""
       },
       rules: {
-        title: [{ required: true, message: "请选择券类型", trigger: "change" }],
-        amount: [{ required: true, message: "请选择金额", trigger: "change" }],
-        duedate: [
-          {
-            required: true,
-            message: "请选择过期时间",
-            trigger: "change"
-          }
+        category: [
+          { required: true, message: "请选择券类型", trigger: "change" }
         ],
+        amount: [
+          { required: true, validator: validateReduction, trigger: "blur" }
+        ],
+        discount: [
+          { required: true, validator: validateDiscount, trigger: "blur" }
+        ],
+        // duedate: [
+        //   {
+        //     required: true,
+        //     message: "请选择过期时间",
+        //     trigger: "change"
+        //   }
+        // ],
         phone: [
           {
             validator: validatePhone,
@@ -300,30 +268,6 @@ export default {
       }
     };
   },
-  watch: {
-    // ruleForm: {
-    //   handler: function (val, oldval) {
-    //     console.log(val);
-    //     if (val.title == "月卡券") {
-    //       this.ruleForm.amount = 15;
-    //       this.selectDisabled = true;
-    //       this.ruleForm.description = "立减15元，每天限用1次";
-    //     } else if (val.title == "立减券") {
-    //       this.selectDisabled = false;
-    //       this.couponAmount = couponAmount;
-    //       this.ruleForm.description = "";
-    //     } else if (val.title == "立减券" && val.amount == 15) {
-    //       this.ruleForm.description = "立减15元，回馈老用户";
-    //     } else if (val.title == "立减券" && val.amount == 12) {
-    //       this.ruleForm.description = "立减12元，回馈老用户";
-    //     }
-    //   },
-    //   deep: true, //对象内部的属性监听，也叫深度监听
-    // },
-  },
-  created() {
-    // this.getList();
-  },
   methods: {
     getList() {
       if (!this.listQuery.phone) {
@@ -341,83 +285,30 @@ export default {
         this.listLoading = false;
       });
     },
-    // handleCurrentChange(val) {
-    //   this.listQuery.page = val;
-    //   //刷新页面
-    //   console.log(`当前页: ${val}`);
-    //   this.getList();
-    // },
-    //发放优惠券
-    titleChange(title) {
-      this.ruleForm.amount = "";
-      this.ruleForm.description = "";
-      if (title == "立减券") {
-        this.ruleForm.description = "";
-        this.couponAmount = [
-          {
-            label: 15,
-            value: 15
-          },
-          {
-            label: 12,
-            value: 12
-          }
-        ];
-      }
-      if (title == "月卡券") {
-        this.couponAmount = [
-          {
-            label: 15,
-            value: 15
-          }
-        ];
-        this.ruleForm.amount = 15;
-        this.ruleForm.description = "立减15元，每天限用1次";
-      }
-      if (title == "VIP免单券") {
-        this.couponAmount = [
-          {
-            label: 30,
-            value: 30
-          }
-        ];
-        this.ruleForm.amount = 30;
-        this.ruleForm.description = "任意咖啡(一杯)免单,VIP用户专享";
-      }
-    },
-    amountChange(amount) {
-      if (amount == 15 && this.ruleForm.title == "立减券") {
-        this.ruleForm.description = "立减15元，回馈老用户";
-      }
-      if (amount == 12 && this.ruleForm.title == "立减券") {
-        this.ruleForm.description = "立减12元，回馈老用户";
-      }
-    },
     submitForm() {
       this.$refs["ruleForm"].validate(valid => {
         if (valid) {
+          console.log(valid);
+          console.log(this.ruleForm);
+
           this.submitLoading = true;
 
           let params = {};
-          if (this.ruleForm.title == "月卡券") {
+          if (this.ruleForm.category == "reduction") {
             params = {
-              title: "月卡券",
+              category: this.ruleForm.category,
+              amount: Number(this.ruleForm.amount),
               phone: this.ruleForm.phone
             };
-          } else if (this.ruleForm.title == "立减券") {
+          } else if (this.ruleForm.category == "discount") {
             params = {
-              title: "立减券",
-              amount: this.ruleForm.amount,
-              description: this.ruleForm.description,
-              duedate: this.ruleForm.duedate,
+              category: this.ruleForm.category,
+              discount: Number(this.ruleForm.discount),
               phone: this.ruleForm.phone
             };
-          } else if (this.ruleForm.title == "VIP免单券") {
+          } else if (this.ruleForm.category == "vip") {
             params = {
-              title: "VIP免单券",
-              amount: this.ruleForm.amount,
-              description: this.ruleForm.description,
-              duedate: this.ruleForm.duedate,
+              category: this.ruleForm.category,
               phone: this.ruleForm.phone
             };
           }
@@ -437,10 +328,10 @@ export default {
     },
     resetTemp() {
       this.ruleForm = {
-        title: "",
-        amount: "",
-        description: "",
-        duedate: "",
+        category: "",
+        discount: 5.8,
+        amount: 15,
+        // duedate: "",
         phone: ""
       };
     },