nowwa-system/vue-admin-template-master/src/views/coupon/list/index.vue

<template>
  <div class="container">
    <el-card class="box-card">
      <!-- <div class="filter-container">
        <el-input
          prefix-icon="el-icon-search"
          v-model="listQuery.phone"
          style="width: 300px;"
          placeholder="请输入手机号"
          clearable
          @keyup.enter.native="getDetail"
        />
        <el-button
          style="margin-left: 10px;"
          :loading="searchLoading"
          type="primary"
          icon="el-icon-search"
          @click="getDetail"
        >搜索</el-button>
        <el-button type="primary" plain style="float:right;" @click="handleUpdate">发放优惠券</el-button>
      </div>-->
      <!-- show-overflow-tooltip -->
      <el-table
        :data="tableData"
        v-loading="listLoading"
        highlight-current-row
        fit
        class="table-list"
        :cell-style="{ padding: '6px 0' }"
      >
        <el-table-column prop="id" label="ID" width="100"></el-table-column>
        <el-table-column
          prop="title"
          label="title"
          width="120"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="amount"
          label="amount"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="description"
          label="description"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="category"
          label="category"
          width="100"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="coffee"
          label="coffee"
          width="100"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="discount"
          label="discount"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="startdate"
          label="startdate"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="duedate"
          label="duedate"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="phone"
          width="120"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="used" label="used" width="100"></el-table-column>
        <el-table-column
          prop="useropenid"
          label="useropenid"
          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">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        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-option
              v-for="(item, index) in couponType"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></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-input
            v-model="ruleForm.description"
            disabled
            style="width: 300px;"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="过期时间"
          prop="duedate"
          v-if="ruleForm.title == '立减券' || ruleForm.title == 'VIP免单券'"
        >
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="ruleForm.duedate"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerBeginDateBefore"
          ></el-date-picker>
        </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>
        <el-button type="primary" @click="submitForm" :loading="submitLoading"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTicketList, generate_ticket, query_by_phone } from "@/api/order";
// 手机号验证
const validatePhone = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入手机号"));
  } else {
    if (!/^1[123456789]\d{9}$/.test(value)) {
      callback(new Error("请输入正确的手机号"));
    } else {
      callback();
    }
  }
};
const couponType = [
  {
    label: "立减券",
    value: "立减券"
  },
  {
    label: "月卡券",
    value: "月卡券"
  },
  {
    label: "VIP免单券",
    value: "VIP免单券"
  }
];
const couponAmount = [
  {
    label: 15,
    value: 15
  },
  {
    label: 12,
    value: 12
  },
  {
    label: 30,
    value: 30
  }
];
const couponDescription = [
  {
    label: "立减15元，回馈老用户",
    value: "立减15元，回馈老用户"
  },
  {
    label: "立减12元，回馈老用户",
    value: "立减12元，回馈老用户"
  },
  {
    label: "立减15元，每天限用1次",
    value: "立减15元，每天限用1次"
  },
  {
    label: "任意咖啡(一杯)免单,VIP用户专享",
    value: "任意咖啡(一杯)免单,VIP用户专享"
  }
];
export default {
  name: "ticket",
  data() {
    return {
      total: 0,
      listLoading: true,
      searchLoading: false,
      listQuery: {
        page: 1,
        limit: 100
      },
      tableData: [],

      //发放优惠券
      submitLoading: false,
      pickerBeginDateBefore: {
        disabledDate: time => {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      selectDisabled: false,
      dialogFormVisible: false,
      couponType,
      couponAmount: [],
      couponDescription: [],
      ruleForm: {
        title: "",
        amount: "",
        description: "",
        duedate: "",
        phone: ""
      },
      rules: {
        title: [{ required: true, message: "请选择券类型", trigger: "change" }],
        amount: [{ required: true, message: "请选择金额", trigger: "change" }],
        duedate: [
          {
            required: true,
            message: "请选择过期时间",
            trigger: "change"
          }
        ],
        phone: [
          {
            validator: validatePhone,
            required: true,
            trigger: "blur"
          }
        ]
      }
    };
  },
  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() {
      this.listLoading = true;
      getTicketList({
        page: this.listQuery.page
      }).then(res => {
        this.tableData = res.tickets;
        this.total = res.total;
        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) {
          this.submitLoading = true;

          let params = {};
          if (this.ruleForm.title == "月卡券") {
            params = {
              title: "月卡券",
              phone: this.ruleForm.phone
            };
          } else if (this.ruleForm.title == "立减券") {
            params = {
              title: "立减券",
              amount: this.ruleForm.amount,
              description: this.ruleForm.description,
              duedate: this.ruleForm.duedate,
              phone: this.ruleForm.phone
            };
          } else if (this.ruleForm.title == "VIP免单券") {
            params = {
              title: "VIP免单券",
              amount: this.ruleForm.amount,
              description: this.ruleForm.description,
              duedate: this.ruleForm.duedate,
              phone: this.ruleForm.phone
            };
          }
          generate_ticket(params).then(() => {
            this.$message({
              message: "发放成功！",
              type: "success"
            });
            this.dialogFormVisible = false;
            this.submitLoading = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetTemp() {
      this.ruleForm = {
        title: "",
        amount: "",
        description: "",
        duedate: "",
        phone: ""
      };
    },
    handleUpdate() {
      this.resetTemp();
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["ruleForm"].clearValidate();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.box-card {
  overflow: hidden;
}
.container {
  padding: 20px;
}
.pd-30 {
  padding: 30px 0;
}
.filter-container {
  overflow: hidden;
  padding: 10px 0;
}
.table-list {
  font-size: 12px;
}
</style>