326 lines
9.2 KiB
Vue
326 lines
9.2 KiB
Vue
<template>
|
|
<section class="content">
|
|
<div class="box box-primary">
|
|
<section class="content-header">
|
|
<h1 id="itemTitle"></h1>
|
|
</section>
|
|
<section>
|
|
<div id="toolbar">
|
|
<div class="col-sm-12">
|
|
<label for="giftId" class="col-sm-3 control-label">选择礼物:</label>
|
|
<div class="col-sm-3">
|
|
<select name="giftId" id="giftId" class="form-control" @change="renderTableInfo"></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<br />
|
|
<br />
|
|
<section class="content">
|
|
<div class="group-table-section">
|
|
<div class="group-wrapper js-group-wrapper">
|
|
<div class="header-wrapper">
|
|
<div class="title">幸运礼物区间</div>
|
|
<div class="right-content js-no-editing">
|
|
<div class="action-btn-wrap">
|
|
<button class="btn btn-primary js-edit-group">编辑</button>
|
|
</div>
|
|
</div>
|
|
<div class="right-content right-content-edit js-editing">
|
|
<div class="action-btn-wrap">
|
|
<button class="btn btn-primary js-add">新增</button>
|
|
<button class="btn btn-danger js-edit">保存</button>
|
|
<button class="btn btn-default js-cancel">取消</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<table class="group-table table table-hover table-striped">
|
|
<tr>
|
|
<th>刷礼个数大于等于</th>
|
|
<th>刷礼个数小于</th>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 添加弹窗 -->
|
|
<div
|
|
class="modal fade"
|
|
id="addModal"
|
|
tabindex="-1"
|
|
role="dialog"
|
|
aria-labelledby="modalLabel"
|
|
>
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">x</span>
|
|
</button>
|
|
<h4 class="modal-title" id="addModalLabel">刷礼区间配置</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form class="form-horizontal">
|
|
<div class="form-group">
|
|
<label for="minValue" class="col-sm-3 control-label"
|
|
>刷礼个数大于等于:</label
|
|
>
|
|
<div class="col-sm-8">
|
|
<input
|
|
type="text"
|
|
id="minValue"
|
|
name="minValue"
|
|
class="form-control validate[required]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="maxValue" class="col-sm-3 control-label">刷礼个数小于:</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" id="maxValue" name="maxValue" class="form-control" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-default" type="button" id="addCancel">取消</button>
|
|
<button class="btn btn-primary" type="button" id="addSave">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getLuckyGiftRangeConfigList,
|
|
saveLuckyGiftRangeConfig,
|
|
} from "@/api/lucky/luckyGiftRangeConfig";
|
|
import { getGiftList } from "@/api/common/gift";
|
|
import { buildSelectOption } from "@/utils/system-helper";
|
|
import { apiResult } from "@/utils/maintainer";
|
|
|
|
export default {
|
|
name: "LuckyGiftRangeConfigView",
|
|
data() {
|
|
return {
|
|
isEdit: false,
|
|
items: [],
|
|
};
|
|
},
|
|
setup() {
|
|
return {};
|
|
},
|
|
created() {
|
|
this.$nextTick(function () {
|
|
this.getGiftInfo();
|
|
this.initData();
|
|
});
|
|
},
|
|
methods: {
|
|
initData() {
|
|
let $this = this;
|
|
$(function () {
|
|
$("#addSave").click(function () {
|
|
$this.add();
|
|
$("#addModal").modal("hide");
|
|
});
|
|
$(".js-edit-group").click(function () {
|
|
$this.editTableInfo();
|
|
$this.renderTableInfo();
|
|
});
|
|
$(".js-add").click(function () {
|
|
$("#minValue").val("");
|
|
$("#maxValue").val("");
|
|
$("#addModal").modal("show");
|
|
});
|
|
$(".js-edit").click(function () {
|
|
$this.save();
|
|
});
|
|
$(".js-cancel").click(function () {
|
|
$this.disableTableInfo();
|
|
$this.renderTableInfo();
|
|
});
|
|
});
|
|
},
|
|
add() {
|
|
let minValue = $("#minValue").val();
|
|
let maxValue = $("#maxValue").val();
|
|
let item = {
|
|
minValue: minValue,
|
|
maxValue: maxValue,
|
|
};
|
|
this.items.splice(this.items.length, 0, item);
|
|
this.renderTableInfo();
|
|
},
|
|
save() {
|
|
let giftId = $("#giftId").val();
|
|
saveLuckyGiftRangeConfig({
|
|
giftId: giftId,
|
|
rangeConfigJson: JSON.stringify(this.items),
|
|
}).then((res) => {
|
|
apiResult(res);
|
|
this.disableTableInfo();
|
|
this.renderTableInfo();
|
|
});
|
|
},
|
|
editTableInfo() {
|
|
this.isEdit = true;
|
|
},
|
|
disableTableInfo() {
|
|
this.isEdit = false;
|
|
},
|
|
renderTableInfo() {
|
|
let $this = this;
|
|
let isEdit = this.isEdit;
|
|
let giftId = $("#giftId").val();
|
|
if (giftId == null) {
|
|
return;
|
|
}
|
|
let $jsNoEditing = $(".js-group-wrapper .js-no-editing");
|
|
let $jsEditing = $(".js-group-wrapper .js-editing");
|
|
if (isEdit) {
|
|
$jsNoEditing.hide();
|
|
$jsEditing.show();
|
|
} else {
|
|
$jsNoEditing.show();
|
|
$jsEditing.hide();
|
|
}
|
|
let $groupTable = $(".js-group-wrapper .group-table");
|
|
$(".js-group-wrapper .group-table input").unbind("change");
|
|
$(".js-group-wrapper .group-table .js-remove-item").unbind("click");
|
|
$groupTable.html(
|
|
"<thead><tr><th>刷礼个数大于等于</th><th>刷礼个数小于</th></tr></thead>"
|
|
);
|
|
$groupTable.append("<tbody>");
|
|
for (let i = 0, len = $this.items.length; i < len; i++) {
|
|
let item = $this.items[i];
|
|
let tds = [];
|
|
if (isEdit) {
|
|
tds.push(
|
|
`<td><input class="input-sm" name="minValue" data-idx="${i}" value="${item.minValue}"></td>`
|
|
);
|
|
tds.push(
|
|
`<td><input class="input-sm" name="maxValue" data-idx="${i}" value="${item.maxValue}"></td>`
|
|
);
|
|
} else {
|
|
tds.push(
|
|
`<td><i class="glyphicon glyphicon-remove js-remove-item" data-idx="${i}"></i>${item.minValue}</td>`
|
|
);
|
|
tds.push(`<td>${item.maxValue}</td>`);
|
|
}
|
|
let row = `<tr>${tds.join()}</tr>`;
|
|
$groupTable.append(row);
|
|
}
|
|
$groupTable.append("</tbody>");
|
|
$(".js-group-wrapper .group-table input").bind("change", function (e) {
|
|
let target = e.target;
|
|
const index = $(target).attr("data-idx");
|
|
const propName = $(target).attr("name");
|
|
const inputValue = target.value;
|
|
$this.items[index][propName] = inputValue;
|
|
$this.renderTableInfo();
|
|
});
|
|
$(".js-group-wrapper .group-table .js-remove-item").bind("click", function (e) {
|
|
let target = e.target;
|
|
const index = new Number($(target).attr("data-idx"));
|
|
let items = $this.items;
|
|
if (items && items.length > index) {
|
|
let item = items[index];
|
|
if (item && item.isDefault == 1) {
|
|
$("#tipMsg").text("默认区间不允许删除");
|
|
$("#tipModal").modal("show");
|
|
return;
|
|
}
|
|
}
|
|
if (confirm("你确定要删除该礼物区间吗？")) {
|
|
items.splice(index, 1);
|
|
$this.renderTableInfo();
|
|
}
|
|
});
|
|
},
|
|
getTableInfo() {
|
|
let giftId = $("#giftId").val();
|
|
console.log(giftId);
|
|
if (giftId == null) {
|
|
return;
|
|
}
|
|
getLuckyGiftRangeConfigList({
|
|
giftId: giftId,
|
|
}).then((res) => {
|
|
this.items = res.data;
|
|
this.renderTableInfo();
|
|
});
|
|
},
|
|
getGiftInfo() {
|
|
let $this = this;
|
|
$("#giftId").children().remove();
|
|
getGiftList({
|
|
giftType: 16,
|
|
}).then((res) => {
|
|
let data = res.data;
|
|
|
|
if (data.length > 0) {
|
|
buildSelectOption(
|
|
"#giftId",
|
|
data[0].giftId,
|
|
data.map((v) => {
|
|
return {
|
|
value: v.giftId,
|
|
text: v.giftName,
|
|
};
|
|
})
|
|
);
|
|
$this.getTableInfo();
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.group-table-section {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.group-table-section .group-wrapper {
|
|
width: 50%;
|
|
}
|
|
|
|
.group-wrapper .header-wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
max-width: 512px;
|
|
}
|
|
|
|
.group-wrapper .header-wrapper .title {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.group-wrapper .header-wrapper .right-content {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.group-wrapper .header-wrapper .right-content.right-content-edit {
|
|
display: none;
|
|
}
|
|
|
|
.group-wrapper .header-wrapper .action-btn-wrap button:not(last-child) {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.group-wrapper .group-table {
|
|
margin-top: 12px;
|
|
margin-right: 10px;
|
|
max-width: 1024px;
|
|
color: red;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|