moxuan_takeaway_shanghu_manage/src/views/coupon/coupon.vue

<template>
  <div>
    <div style="display: inline-block;float: right;">
      <el-button size="mini" type="primary" icon="document" @click="refresh"
        >刷新</el-button
      >
      <el-button
        style="margin:0 0 20px 10px;"
        size="mini"
        type="primary"
        icon="document"
        @click="classifyStair()"
        >添加优惠券</el-button
      >
    </div>
    <el-table v-loading="tableDataLoading" :data="tableData.list">
      <!-- <el-table-column type="selection" fixed>
      </el-table-column> @selection-change="changeFun"-->
      <el-table-column prop="couponId" label="编号" width="80">
      </el-table-column>
      <el-table-column prop="couponName" label="优惠券名称"> </el-table-column>
      <el-table-column prop="couponPicture" label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.couponPicture" alt="" width="40" height="40" />
        </template>
      </el-table-column>
      <el-table-column prop="money" label="优惠券金额"> </el-table-column>
      <el-table-column prop="minMoney" label="最低消费"> </el-table-column>
      <el-table-column prop="endDate" label="有效天数"> </el-table-column>
      <!-- <el-table-column prop="needIntegral" label="兑换积分">
      </el-table-column> -->
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button
            style="margin-left:15px;"
            size="mini"
            type="primary"
            icon="document"
            @click="songCoupon(scope.row)"
            >赠送</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="compile(scope.$index, scope.row)"
            >编辑
          </el-button>
          <el-button size="mini" type="danger" @click="deleteStair(scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 10px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="limit"
        :current-page="page"
        layout="total,sizes, prev, pager, next"
        :total="tableData.totalCount"
      >
      </el-pagination>
    </div>
    <!-- 添加优惠券 -->
    <el-dialog title="添加优惠券" :visible.sync="dialogFormVisible" center>
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;"
          >优惠券名称：</span
        >
        <el-input
          style="width:50%;"
          v-model="couponName"
          type="text"
          placeholder="请输入优惠券名称"
        ></el-input>
      </div>
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;"
          >图片：</span
        >
        <!-- <el-input style="width:50%;" v-model="couponPicture" type="text" placeholder="请输入图片"></el-input> -->
        <div
          style=" width:148px;height:148px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;display: inline-block;"
        >
          <el-upload
            class="avatar-uploader"
            v-model="couponPicture"
            :action="Tupiantou"
            :show-file-list="false"
            :on-success="handleAvatarSuccess1"
:before-upload="beforeAvatarUpload"
          >
            <img
              v-if="couponPicture"
              :src="couponPicture"
              class="avatar"
              style="width: 148px;height: 148px;"
            />
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
              style="font-size: 28px;color: #8c939d"
            ></i>
          </el-upload>
        </div>
      </div>
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;"
          >优惠券金额：</span
        >
        <el-input
          style="width:50%;"
          v-model="money"
          type="text"
          placeholder="请输入优惠券金额"
        ></el-input>
      </div>
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;"
          >最低消费：</span
        >
        <el-input
          style="width:50%;"
          v-model="minMoney"
          type="text"
          placeholder="请输入最低消费"
        ></el-input>
      </div>
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;"
          >有效天数：</span
        >
        <el-input
          style="width:50%;"
          v-model="endDate"
          type="text"
          placeholder="请输入有效天数"
        ></el-input>
      </div>
      <!-- <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;">兑换积分：</span>
        <el-input style="width:50%;" v-model="needIntegral" type="text" placeholder="请输入兑换积分"></el-input>
      </div> -->

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="StairNoticeTo()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改一级分类 -->
    <el-dialog title="修改优惠券" :visible.sync="dialogFormVisible1" center>
      <el-form :model="form">
        <el-form-item label="优惠券名称：" :label-width="formLabelWidth">
          <el-input v-model="form.couponName" style="width:65%;"></el-input>
        </el-form-item>
        <el-form-item label="图片：" :label-width="formLabelWidth">
          <!-- <el-input v-model="form.campusDetails" style="width:65%;"></el-input> -->
          <div
            style=" width:148px;height:148px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;display: inline-block;"
          >
            <el-upload
              class="avatar-uploader"
              v-model="form.couponPicture"
              :action="Tupiantou"
              :show-file-list="false"
              :on-success="handleAvatarSuccess2"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="form.couponPicture"
                :src="form.couponPicture"
                class="avatar"
                style="width: 148px;height: 148px;"
              />
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
                style="font-size: 28px;color: #8c939d"
              ></i>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="优惠券金额：" :label-width="formLabelWidth">
          <el-input v-model="form.money" style="width:65%;"></el-input>
        </el-form-item>
        <el-form-item label="最低消费：" :label-width="formLabelWidth">
          <el-input v-model="form.minMoney" style="width:65%;"></el-input>
        </el-form-item>
        <el-form-item label="有效天数：" :label-width="formLabelWidth">
          <el-input v-model="form.endDate" style="width:65%;"></el-input>
        </el-form-item>
        <!-- <el-form-item label="兑换积分：" :label-width="formLabelWidth">
          <el-input v-model="form.needIntegral" style="width:65%;"></el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="CompileNoticeTo()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 赠送优惠券-->
    <el-dialog title="赠送优惠券" :visible.sync="dialogFormVisible0" center>
      <div style="margin: 10px 0;">
        <span style="width: 200px;display: inline-block;text-align: right;"
          >选择用户：</span
        >
        <el-tag
          :key="tag"
          v-for="(tag, j) in userNameList"
          closable
          :disable-transitions="false"
          @close="couponIdClose1(tag, j)"
        >
          {{ tag }}
        </el-tag>
        <el-button class="button-new-tag" size="small" @click="couponIdBtn1()"
          >添加</el-button
        >
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible0 = false">取 消</el-button>
        <el-button type="primary" @click="songNoticeTo()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 用户列表 -->
    <el-dialog title="用户列表" :visible.sync="dialogFormVisible5" center>
      <el-input
        style="width: 150px;"
        @keydown.enter.native="select1"
        clearable
        placeholder="请输入手机号"
        v-model="phone"
      >
      </el-input
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <el-input
        style="width: 150px;"
        @keydown.enter.native="select1"
        clearable
        placeholder="请输入昵称"
        v-model="nickName"
      >
      </el-input>
      <div style="display: inline-block;">
        <el-button
          style="margin-left:15px;"
          size="mini"
          type="primary"
          icon="document"
          @click="select1"
          >查询</el-button
        >
        <el-button
          style="margin-left:15px;"
          size="mini"
          type="primary"
          icon="document"
          @click="cleans1"
          >重置</el-button
        >
      </div>
      <el-button
        style="margin-left:15px;"
        :disabled="userIdList.length <= 0"
        size="mini"
        type="primary"
        icon="document"
        @click="closes2()"
        >确定</el-button
      >
      <el-table
        v-loading="tableDataLoading1"
        @selection-change="changeFun1"
        :data="userData.list"
        :row-key="
          row => {
            return row.userId;
          }
        "
      >
        <el-table-column :reserve-selection="true" type="selection" fixed>
        </el-table-column>
        <el-table-column prop="userId" label="编号"> </el-table-column>
        <el-table-column fixed prop="nickName" label="昵称">
          <template slot-scope="scope">
            <span style="color: #f56c6c;">{{
              scope.row.nickName ? scope.row.nickName : "未设置"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="图像">
          <template slot-scope="scope">
            <img
              v-if="scope.row.avatar == null"
              src="~@/assets/img/avatar.png"
              alt=""
              width="40"
              height="40"
            />
            <img v-else :src="scope.row.avatar" alt="" width="40" height="40" />
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120">
          <template slot-scope="scope">
            <span style="color: #4f9dec;cursor: pointer;">{{
              scope.row.phone ? scope.row.phone : "未绑定"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="platform" label="来源"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top: 10px;">
        <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="size1"
          :current-page="page1"
          layout="total,sizes, prev, pager, next,jumper"
          :total="userData.totalCount"
        >
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      limit: 10,
      page: 1,
      size1: 10,
      page1: 1,
      checkBoxData: [], //多选框选择的值
      formLabelWidth: "200px",
      tableDataLoading: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible0: false,
      dialogFormVisible5: false,
      tableDataLoading1: false,
      tableData: [],
      couponName: "",
      couponPicture: "",
      endDate: "",
      minMoney: "",
      money: "",
      needIntegral: "",
      form: {
        couponId: "",
        couponName: "",
        couponPicture: "",
        endDate: "",
        minMoney: "",
        money: "",
        needIntegral: ""
      },
      userNameList: [],
      userIdList: [],
      userData: [],
      phone: "",
      nickName: "",
      couponId: "",
      shopId: "",
      content: ""
    };
  },
  methods: {
    // 多选
    changeFun(val) {
      this.checkBoxData = val;
    },
    handleSizeChange(val) {
      this.limit = val;
      this.dataSelect();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.dataSelect();
    },
    handleSizeChange2(val) {
      this.size1 = val;
      this.dataSelect1();
    },
    handleCurrentChange2(val) {
      this.page1 = val;
      this.dataSelect1();
    },
    beforeAvatarUpload(file) {
      return this.$processImage(this, file, false);
    },
    handleAvatarSuccess1(file, fileList) {
      this.couponPicture = file.data;
    },
    handleAvatarSuccess2(file, fileList) {
      this.form.couponPicture = file.data;
    },
    // 刷新
    refresh() {
      this.page = 1;
      this.dataSelect();
    },
    // 添加优惠券弹框
    classifyStair() {
      this.couponName = "";
      this.couponPicture = "";
      this.endDate = "";
      this.minMoney = "";
      this.money = "";
      this.needIntegral = "";
      this.dialogFormVisible = true;
    },
    // 添加优惠券
    StairNoticeTo() {
      if (this.campusName == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入优惠券名称",
          type: "warning"
        });
        return;
      }
      if (this.campusDetails == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入优惠券地址",
          type: "warning"
        });
        return;
      }

      if (this.money == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入优惠券金额",
          type: "warning"
        });
        return;
      }
      if (this.minMoney == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入最低消费",
          type: "warning"
        });
        return;
      }
      if (this.endDate == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入有效天数",
          type: "warning"
        });
        return;
      }

      this.$http({
        url: this.$http.adornUrl("admin/coupon/issueCoupon"),
        method: "post",
        data: this.$http.adornData({
          couponName: this.couponName,
          couponPicture: this.couponPicture,
          endDate: this.endDate,
          minMoney: this.minMoney,
          money: this.money,
          needIntegral: this.needIntegral,
          shopId: this.shopId
        })
      }).then(({ data }) => {
        if (data.code == 0) {
          this.dialogFormVisible = false;
          this.$message({
            message: "添加成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.dataSelect();
            }
          });
        } else {
          this.$message({
            message: data.msg,
            type: "warning",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },
    // 修改优惠券
    compile(index, rows) {
      this.form.couponName = rows.couponName;
      this.form.couponPicture = rows.couponPicture;
      this.form.endDate = rows.endDate;
      this.form.minMoney = rows.minMoney;
      this.form.money = rows.money;
      this.form.needIntegral = rows.needIntegral;
      this.form.couponId = rows.couponId;
      this.dialogFormVisible1 = true;
    },
    // 修改优惠券
    CompileNoticeTo() {
      this.$http({
        url: this.$http.adornUrl("admin/coupon/updateCoupon"),
        method: "post",
        data: this.$http.adornData({
          couponId: this.form.couponId,
          couponName: this.form.couponName,
          couponPicture: this.form.couponPicture,
          endDate: this.form.endDate,
          minMoney: this.form.minMoney,
          money: this.form.money,
          needIntegral: this.form.needIntegral,
          shopId: this.shopId
        })
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.dialogFormVisible1 = false;
              this.dataSelect();
            }
          });
        } else {
          this.$message({
            message: data.msg,
            type: "error",
            duration: 1500,
            onClose: () => {
              this.dialogFormVisible1 = false;
              this.dataSelect();
            }
          });
        }
      });
    },

    //删除
    deleteStair(row) {
      this.$confirm(`确定删除此条信息?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("admin/coupon/deleteCoupon"),
            method: "post",
            params: this.$http.adornParams({
              couponId: row.couponId
            })
          }).then(({ data }) => {
            if (data.code == 0) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.dataSelect();
                }
              });
            } else {
              this.$message({
                message: data.msg,
                type: "error",
                duration: 1500,
                onClose: () => {
                  this.dataSelect();
                }
              });
            }
          });
        })
        .catch(() => {});
    },
    // 重置
    cleans() {
      this.phone = "";
      this.status = 0;
      this.dataSelect();
    },
    // 获取派单数据列表
    dataSelect() {
      this.tableDataLoading = true;
      this.$http({
        url: this.$http.adornUrl("admin/coupon/seleteAllCoupon"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page,
          limit: this.limit,
          content: this.content,
          shopId: this.shopId
        })
      }).then(({ data }) => {
        this.tableDataLoading = false;
        let returnData = data.data;
        this.tableData = returnData;
        // if(data.data.list.length==0){
        //   this.page = this.page-1
        //   this.dataSelect()
        // }
      });
    },
    // 赠送优惠券
    songCoupon(row) {
      this.couponId = row.couponId;
      this.userIdList = [];
      this.userNameList = [];
      this.dialogFormVisible0 = true;
    },
    // 打开用户列表
    couponIdBtn1() {
      this.page1 = 1;
      this.dataSelect1();
      this.dialogFormVisible5 = true;
      if (this.userIdList.length == 0) {
        this.cleansHc();
      }
    },
    // 清空选中缓存
    cleansHc(rows) {
      console.log("---", this.$refs.multipleTable);
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 多选用户
    changeFun1(val) {
      console.log("多选", val);
      var userIdList = [];
      var userNameList = [];
      for (var i in val) {
        userIdList.push(val[i].userId);
        userNameList.push(val[i].nickName);
      }
      this.userIdList = userIdList;
      this.userNameList = userNameList;
    },
    // 赠送优惠券
    songNoticeTo() {
      if (this.userIdList.length == 0) {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请选择用户",
          type: "warning"
        });
        return;
      }
      var userIdList = this.userIdList.toString();
      this.$http({
        url: this.$http.adornUrl("admin/coupon/giveCoupon"),
        method: "get",
        params: this.$http.adornParams({
          userIds: userIdList,
          shopId: this.shopId,
          couponId: this.couponId
        })
      }).then(({ data }) => {
        this.$message({
          message: "操作成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.userIdList = [];
            this.userNameList = [];
            this.dataSelect();
          }
        });
        this.dialogFormVisible0 = false;
      });
    },
    // 获取用户数据列表
    dataSelect1() {
      let phone = -1;
      if (this.phone) {
        phone = this.phone;
      }
      this.tableDataLoading1 = true;
      this.$http({
        url: this.$http.adornUrl("user/selectUserList"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page1,
          limit: this.size1,
          shopAdminFlag: "",
          phone: this.phone,
          userName: this.nickName,
          type: ""
        })
      }).then(({ data }) => {
        this.tableDataLoading1 = false;
        let returnData = data.data;
        this.userData = returnData;
      });
    },
    // 查询
    select1() {
      this.page1 = 1;
      this.dataSelect1();
    },
    // 重置
    cleans1() {
      this.page1 = 1;
      this.phone = "";
      this.nickName = "";
      this.dataSelect1();
    },
    couponIdClose1(ietm, index) {
      console.log("index", index, "ietm", ietm, this.userIdList.length);
      if (this.userIdList.length < 2) {
        this.$message({
          title: "提示",
          type: "error",
          duration: 1800,
          message: "最少需要选中一位用户",
          type: "warning"
        });
        return;
      } else {
        this.userIdList.splice(index, 1);
        this.userNameList.splice(index, 1);
      }
    },
    // 批量开启
    closes2(id) {
      this.isCoupon = 1;
      this.dialogFormVisible5 = false;
    }
  },
  mounted() {
    this.shopId = this.$cookie.get("shopId");
    this.dataSelect();
  }
};
</script>

<style></style>