新增优惠券

src/views/coupon/coupon/giveCoupon.vue

+<template>
+  <div class="app-container">
+    <el-dialog :visible.sync="giveOpen" width="1000px" append-to-body>
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
+        <el-form-item label="手机号" prop="name">
+          <el-input v-model="queryParams.name" placeholder="手机号" clearable @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="优惠券">
+          <el-select v-model="queryParams.state" placeholder="请选择" clearable @keyup.enter.native="handleQuery">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" v-hasPermi="['coupon:coupon:query']">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form> 
+      <el-table v-loading="loading" :data="userList">     
+        <el-table-column label="用户" align="center" prop="name"/>    
+        <el-table-column label="手机号" align="center" prop="code" />
+        <el-table-column label="订单量" align="center" prop="remarks" />
+        <el-table-column label="总金额" align="center" prop="goodsCount" />
+        <el-table-column label="已取消" align="center" prop="goodsCount" />    
+        <el-table-column label="取消金额" align="center" prop="goodsCount" />  
+        <el-table-column label="已退款" align="center" prop="goodsCount" />  
+        <el-table-column label="退款金额" align="center" prop="goodsCount" />  
+        <el-table-column label="最近订单时间" align="center" prop="goodsCount" />  
+        <el-table-column label="注册时间" align="center" prop="goodsCount" />  
+        <el-table-column label="来源" align="center" prop="state">
+          <template slot-scope="scope">
+            <span v-if="scope.row.state == 1">启用</span>
+            <span v-if="scope.row.state == 2">停用</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div slot="footer" class="dialog-footer" style="text-align: center;">
+        <el-button  type="primary" @click="submitForm">确定</el-button>
+        <el-button  @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listClass,
+  getClass,
+  delClass,
+  addClass,
+  updateClass,
+  turnList
+} from "@/api/coupon/couponType";
+
+export default {
+  name: "Class",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      // 表格数据
+      userList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      giveOpen: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        state: null
+      },
+      options: [{
+        value: '1',
+        label: '满减券'
+      }, {
+        value: '2',
+        label: '折扣券'
+      }],
+    };
+  },
+  created() {
+    //this.getList();
+  },
+  methods: {
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams.name=null;
+      this.queryParams.state=null;
+      this.handleQuery();
+    },
+    /** 查询列表 */
+    getList() {
+      this.giveOpen=true;
+      this.loading = true;
+      listClass(this.queryParams).then((response) => {
+        // this.userList = response.rows;
+        // this.total = response.total;
+         this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.giveOpen = false;
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.id != null) {
+            if(this.form.state == "1"){
+              this.$message.error("停用之后才可以修改");
+              return;
+            }
+            updateClass(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.giveOpen = false;
+              this.getList();
+            });
+          } else {
+            addClass(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.giveOpen = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    
+  },
+};
+</script>
+
+<style lang="scss" >
+.dialogClass .spanClass{
+  margin-left: 10px;
+}
+.dialogClass .inputCalss{
+  width:50px;
+  margin-left: 10px;
+}
+.dialogClass .el-radio__label {
+  padding-left: 3px !important;
+}
+.dialogClass .marginLeft10 {
+  padding-left: 10px;
+}
+
+.dialogClass .marginLeft20 {
+  padding-left: 20px;
+}
+
+.dialogClass .width {
+  width: 326px;
+}
+
+</style>

src/views/coupon/coupon/index.vue

@@ -24,6 +24,10 @@
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
           v-hasPermi="['coupon:coupon:add']">新增</el-button>
       </el-col>
+      <el-col :span="1.5">
+        <el-button type="primary" plain size="mini" @click="giveClick"
+          v-hasPermi="['coupon:coupon:add']">赠送</el-button>
+      </el-col>
    </el-row>
 
     <el-table v-loading="loading" :data="couponTypeList">     
@@ -170,6 +174,7 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <GiveCoupon ref="giveCoupon"></GiveCoupon>
   </div>
 </template>
 
@@ -182,9 +187,10 @@ import {
   updateClass,
   turnList
 } from "@/api/coupon/couponType";
-
+import GiveCoupon from './giveCoupon.vue';
 export default {
   name: "Class",
+  components: { GiveCoupon},
   data() {
     return {
       // 遮罩层
@@ -291,6 +297,9 @@ export default {
     selectChange(val){
 
     },
+    giveClick(){
+      this.$refs.giveCoupon.getList();
+    },
     /** 查询列表 */
     getList() {
       this.loading = true;