135 lines
3.6 KiB
Vue
135 lines
3.6 KiB
Vue
<template>
|
|
<el-dialog :title="form.id ? '修改红包' : '新增红包'" width="500px" :visible.sync="dialogVisible" @close="diaClose"
|
|
:close-on-click-modal="true">
|
|
<el-form :model="form" label-width="100px">
|
|
<el-form-item label="描述" required>
|
|
<el-input v-model="form.name"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="从第几次开始变化">
|
|
<el-input-number :min="0" stepstep-strictly v-model="form.num"></el-input-number>
|
|
</el-form-item>
|
|
<el-form-item label="最大金额" required>
|
|
<el-input-number :min="0" :max="100" v-model="form.maxAmount"></el-input-number>
|
|
<span>元</span>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="中奖概率" required>
|
|
<el-input-number :min="0" :max="1" :step="0.1" v-model="form.random"></el-input-number>
|
|
<span></span>
|
|
</el-form-item>
|
|
<el-form-item label="是否启用" required>
|
|
<el-switch v-model="form.status" :inactive-value="0" :active-value="1"></el-switch>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<div class="dialog-footer" style="display: flex; justify-content: flex-end">
|
|
<el-button @click="diaClose">取 消</el-button>
|
|
<el-button type="primary" @click="confirm">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { $redPackApi } from "@/api/red-pack.js";
|
|
import { isNull } from "@/utils/validate.js";
|
|
export default {
|
|
props: {
|
|
source: {
|
|
type: [String, Number],
|
|
default: 1
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
form: {
|
|
id: "",
|
|
name: "",
|
|
maxAmount: "",
|
|
random: "",
|
|
status: "",
|
|
num: undefined,
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
uploadSuccess(file) {
|
|
this.form.url = file.data;
|
|
},
|
|
open(item) {
|
|
console.log(item);
|
|
this.dialogVisible = true;
|
|
this.item = item;
|
|
if (item !== undefined) {
|
|
this.form = {
|
|
...item,
|
|
num: item.num === "" || item.num === null ? undefined : item.num,
|
|
};
|
|
}
|
|
|
|
console.log(this.form);
|
|
},
|
|
diaClose() {
|
|
this.dialogVisible = false;
|
|
for (let i in this.form) {
|
|
this.form[i] = "";
|
|
}
|
|
},
|
|
async confirm() {
|
|
const { name, maxAmount, random, status, id } = this.form;
|
|
console.log(this.form);
|
|
if (isNull(name)) {
|
|
return this.$message.error("描述不能为空");
|
|
}
|
|
if (isNull(maxAmount)) {
|
|
return this.$message.error("最大金额不能为空！");
|
|
}
|
|
if (isNull(random)) {
|
|
return this.$message.error("中奖不能为空！");
|
|
}
|
|
if (this.form.random > 1 || this.form.random < 0) {
|
|
return this.$message.error("概率为0-1");
|
|
}
|
|
console.log(id);
|
|
const res = id
|
|
? await $redPackApi.update({ ...this.form, num: this.form.num || "", discType: this.source, type: this.source })
|
|
: await $redPackApi.add({ ...this.form, discType: this.source, type: this.source });
|
|
console.log(res);
|
|
const { data, msg } = res;
|
|
if (data && data.code == 0) {
|
|
this.$message.success(id ? "修改成功" : "添加成功");
|
|
this.$emit("refresh");
|
|
this.diaClose();
|
|
} else {
|
|
this.$message.error(msg || "操作失败！");
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.el-form-item__label {
|
|
text-align: left;
|
|
}
|
|
|
|
::v-deep .el-form-item__label {
|
|
text-align: left;
|
|
}
|
|
|
|
.upload-file-box {
|
|
border-radius: 6px;
|
|
width: 148px;
|
|
height: 148px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
border: 1px solid #c0c4cc;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
</style> |