vue新增弹窗
vue新增弹窗
-
-
- 新增弹窗加校验
-
html:
连续签到
天
可获得
积分
否
是
选择优惠券
仅限首次
除首次外每个周期
每个周期循环
html选择优惠券弹窗
数据模型：
data() {
//动态校验-是否有优惠券
var validActionSend = (rule, value, callback) => {
if (this.addRule.ruleForm.sent == "2") {
if (this.addRule.ruleForm.searchTable.length > 0) {
callback();
} else {
callback(new Error("请选择优惠券"));
}
} else {
callback();
}
};
return {
//添加规则
addRule: {
addDialog: false, //弹窗
ruleForm: {
ruleName: "",
signNumber: "", //
integral: "", //积分
sent: "1", //radio-送优惠券(1.是 2.否)
convert: "", //送礼品
channel: "0", //radio-领用限制(0.仅限首次 1.除首次外每个周期 2.每个周期循环)
searchTable: [], //优惠券表格
convertDistrictName: "", //礼品名称
},
convertList: [],
rules: {
ruleName: [
{
required: true,
message: "请输入任务名称（限制15字）",
trigger: "blur",
},
{ min: 1, max: 15, message: "长度在15个字符以内", trigger: "blur" },
],
signNumber: [
{ required: true, message: "请输入天数", trigger: "blur" },
{
pattern: /^[1-9]+[0-9]*$/,
message: "请输入正整数",
trigger: "blur",
},
],
integral: [
{ required: true, message: "请输入积分", trigger: "blur" },
{
pattern: /^[1-9]+[0-9]*$/,
message: "请输入正整数",
trigger: "blur",
},
],
convert: [
{ required: true, message: "请选择类型", trigger: "change" },
],
sent: [
// { required: true, message: "请选择类型", trigger: "change" },
{ validator: validActionSend, trigger: "blur" },
],
},
},
// 优惠券弹窗
dialogVisible1: false,
loadingSta: false,//loading
tableDataDialog: [],//优惠券弹窗列表
currentRows: {},//表格单选行
}
}
created：
created() {
this.querySelectConvert();//兑换积分规则下拉框
},
methods:
//添加规则
submitAddRule(ruleForm) {
this.$refs[ruleForm].validate((valid) => {
if (valid) {
let params = {
channel: this.addRule.ruleForm.channel,
convertDistrictId: this.addRule.ruleForm.convert,
convertDistrictName: this.addRule.ruleForm.convertDistrictName,
couponId:
this.addRule.ruleForm.searchTable.length > 0
? this.addRule.ruleForm.searchTable[0].id
: "",
couponName:
this.addRule.ruleForm.searchTable.length > 0
? this.addRule.ruleForm.searchTable[0].name
: "",
integral: this.addRule.ruleForm.integral,
ruleName: this.addRule.ruleForm.ruleName,
signNumber: this.addRule.ruleForm.signNumber,
};
post("/sys/integral/sign/ins", params).then((res) => {
if (res.code === 200) {
this.$message.success("添加成功！");
this.addRuleCancle();
this.getData();
} else {
this.$message.error(res.data);
}
});
}
});
},
//添加规则弹窗清空
addRuleCancle() {
this.addRule.addDialog = false;
this.addRule.ruleForm.ruleName = "";
this.addRule.ruleForm.signNumber = "";
this.addRule.ruleForm.integral = "";
this.addRule.ruleForm.sent = "1";
this.addRule.ruleForm.convert = "";
this.addRule.ruleForm.channel = "0";
this.addRule.ruleForm.searchTable = [];
this.$refs["addRuleF"].resetFields();//清除校验
},
//添加规则弹窗点击蒙层清空
handleaddRule(done) {
this.addRule.ruleForm.ruleName = "";
this.addRule.ruleForm.signNumber = "";
this.addRule.ruleForm.integral = "";
this.addRule.ruleForm.sent = "1";
this.addRule.ruleForm.convert = "";
this.addRule.ruleForm.channel = "0";
this.addRule.ruleForm.searchTable = [];
this.$refs["addRuleF"].resetFields();//清除校验
done();
},
//兑换价值专区列表
querySelectConvert() {
get("/sys/integral/getConvertDistrict2").then((res) => {
if (res.code == 200) {
this.convertList = res.data;
} else {
this.$message.error(res.message);
}
});
},
//下拉列表既要获取id又要获取名称
changeTitle(id) {
this.title = this.convertList.find((item) => item.id == id); // this.title 是通过选中的id去从标题列表里面查找得到的是选中的那一条数据的一个对象，包含选中的数据的 name、id 等 ， 后面可以通过 this.title.name 来获取标题名称
// console.log(this.title)
// console.log(this.title.name)
this.addRule.ruleForm.convertDistrictName = this.title.name;
},
其中：是否选择优惠券，否就不选优惠券
点击是，出现选择优惠券按钮
点击出现选择优惠券弹窗
单选，选择一条之后，会在新增弹窗那增加一条记录
methods:
//点击选择优惠券按钮出现弹窗
selectCouponList() {
this.exchangeCoupon();
this.dialogVisible1 = true;
},
//优惠券列表
exchangeCoupon() {
this.loadingSta = true;
get("/sys/integral/exchangeCoupon", {}).then((res) => {
this.loadingSta = false;
if (res.code === 200) {
res.data.forEach((item) => {
if (item.addTime == null) {
item.addTime = "";
} else {
item.addTime = moment(item.addTime).format("YYYY-MM-DD HH:mm:ss");
}
this.total = res.count; //分页总数
this.tableDataDialog = res.data;
});
} else {
this.tableDataDialog = [];
this.total = 0;
this.$message.error("请求失败！");
}
});
},
//radio切换，清除校验
valueChange() {
this.addRule.ruleForm.searchTable = [];
this.$refs["addRuleF"].validateField("sent");
},
// 表格单选某一行
handleCurrentChange(val) {
console.log(val);
this.currentRows = val;
console.log(this.currentRows);
},
//新增选择优惠券
setCurrent() {
console.log(this.editRule.ruleForm.id);
if (!this.editRule.ruleForm.id) {
this.addRule.ruleForm.searchTable = [];
this.addRule.ruleForm.searchTable.push(this.currentRows);
console.log(this.currentRows);
console.log(this.addRule.ruleForm.searchTable);
this.$refs["addRuleF"].validateField("sent");
} else {
this.editRule.ruleForm.searchTables = [];
this.editRule.ruleForm.searchTables.push(this.currentRows);
console.log(this.currentRows);
console.log(this.editRule.ruleForm.searchTables);
this.$refs["editRuleF"].validateField("sent");
}
this.setCurrentBack();
},
//关闭优惠券弹窗
setCurrentBack() {
this.dialogVisible1 = false;
this.currentRows = {};
},