nowwa-system/vue-admin-template-master/src/views/coupon/query/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="getList"
        />
        <el-button
          style="margin-left: 10px;"
          :loading="searchLoading"
          type="primary"
          icon="el-icon-search"
          @click="getList"
          >搜索</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>
    </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="category">
          <el-select v-model="ruleForm.category" placeholder="请选择券类型">
            <el-option
              v-for="(item, index) in couponType"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="ruleForm.category === 'reduction'"
          label="金额"
          prop="amount"
        >
          <el-input
            type="number"
            v-model="ruleForm.amount"
            style="width: 300px;"
          ></el-input>
        </el-form-item>
        <el-form-item
          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"
            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>
      <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 validateReduction = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入金额"));
  } else {
    if (!/(^[1-9]\d*$)/.test(value)) {
      callback(new Error("金额为正整数"));
    } else {
      callback();
    }
  }
};
// 折扣验证
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 couponType = [
  {
    label: "立减券",
    value: "reduction"
  },
  {
    label: "折扣券",
    value: "discount"
  },
  {
    label: "VIP免单券",
    value: "vip",
    disabled: true
  }
];
export default {
  name: "ticket",
  data() {
    return {
      total: 0,
      listLoading: false,
      searchLoading: false,
      listQuery: {
        phone: ""
      },
      tableData: [],

      //发放优惠券
      submitLoading: false,
      pickerBeginDateBefore: {
        disabledDate: time => {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      selectDisabled: false,
      dialogFormVisible: false,
      couponType,
      couponAmount: [],
      couponDescription: [],
      ruleForm: {
        category: "",
        discount: 5.8,
        amount: 15,
        // duedate: "",
        phone: ""
      },
      rules: {
        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,
            required: true,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    getList() {
      if (!this.listQuery.phone) {
        return this.$message.error("请输入正确手机号！");
      }
      if (!/^1[123456789]\d{9}$/.test(this.listQuery.phone.trim())) {
        return this.$message.error("请输入正确手机号！");
      }
      this.listLoading = true;
      query_by_phone({
        phone: this.listQuery.phone.trim()
      }).then(res => {
        this.tableData = res.tickets;
        // this.total = res.total;
        this.listLoading = false;
      });
    },
    submitForm() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          console.log(valid);
          console.log(this.ruleForm);

          this.submitLoading = true;

          let params = {};
          if (this.ruleForm.category == "reduction") {
            params = {
              category: this.ruleForm.category,
              amount: Number(this.ruleForm.amount),
              phone: this.ruleForm.phone
            };
          } else if (this.ruleForm.category == "discount") {
            params = {
              category: this.ruleForm.category,
              discount: Number(this.ruleForm.discount),
              phone: this.ruleForm.phone
            };
          } else if (this.ruleForm.category == "vip") {
            params = {
              category: this.ruleForm.category,
              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 = {
        category: "",
        discount: 5.8,
        amount: 15,
        // duedate: "",
        phone: ""
      };
    },
    handleUpdate() {
      this.resetTemp();
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["ruleForm"].clearValidate();
      });
    }
  }
};
</script>

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