暂存
This commit is contained in:
9
src/api/common/gift.js
Normal file
9
src/api/common/gift.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
export const getGiftList = query => {
|
||||
return request({
|
||||
url: '/admin/gift/getAll',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
80
src/api/lucky/luckyGiftRangeConfig.js
Normal file
80
src/api/lucky/luckyGiftRangeConfig.js
Normal file
@@ -0,0 +1,80 @@
|
||||
import request from '@/utils/request';
|
||||
import { genQueryParam } from '@/utils/maintainer';
|
||||
|
||||
export const getLuckyGiftRangeConfigList = query => {
|
||||
return request({
|
||||
url: '/admin/luckyGiftRangeConfig/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
export const saveLuckyGiftRangeConfig = data => {
|
||||
return request({
|
||||
url: '/admin/luckyGiftRangeConfig/save',
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
// 获取礼物
|
||||
export const getAll = query => {
|
||||
return request({
|
||||
url: '/admin/gift/getAll',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
// 获取礼物区间
|
||||
export const luckyGiftRangeConfigList = query => {
|
||||
return request({
|
||||
url: '/admin/luckyGiftRangeConfig/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
// 幸运礼物配置列表
|
||||
export const luckyGiftRewardList = query => {
|
||||
return request({
|
||||
url: '/admin/luckyGiftReward/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
// 幸运礼物配置删除
|
||||
export const luckyGiftRewardDelete = query => {
|
||||
return request({
|
||||
url: '/admin/luckyGiftReward/delete',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
// 幸运礼保存列表
|
||||
export const luckyGiftRewardSave = query => {
|
||||
return request({
|
||||
url: '/admin/luckyGiftReward/save',
|
||||
method: 'post',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
// 幸运礼物明细
|
||||
export const getGiftSendPage = query => {
|
||||
return request({
|
||||
url: '/admin/luckyGiftRewardRecord/getGiftSendPage',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
// 幸运礼物详情
|
||||
export const getRewardList = query => {
|
||||
return request({
|
||||
url: '/admin/luckyGiftRewardRecord/getRewardList',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
// 幸运礼物详情导出
|
||||
export const luckyGiftRewardRecordExport = query => {
|
||||
window.location.href = `/admin/luckyGiftRewardRecord/export?${genQueryParam(query)}`;
|
||||
return;
|
||||
};
|
211
src/views/lucky/LuckyGiftDetail.vue
Normal file
211
src/views/lucky/LuckyGiftDetail.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div class="outer">
|
||||
<!-- 查询 -->
|
||||
<div class="inquire" style="display: inline-block; margin-right: 20px">
|
||||
<span class="demonstration">选择礼物</span>
|
||||
<el-select v-model="inquire.giftId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in inquire.gifts"
|
||||
:key="item.giftId"
|
||||
:label="item.giftName"
|
||||
:value="item.giftId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="inquire" style="display: inline-block; margin-right: 120px">
|
||||
<span class="demonstration" style="display: inline-block">送礼用户ID</span>
|
||||
<el-input
|
||||
style="display: inline-block"
|
||||
v-model="inquire.senUserId"
|
||||
placeholder=""
|
||||
class="input"
|
||||
></el-input>
|
||||
</div>
|
||||
<!-- 查询按钮 -->
|
||||
<el-button style="" type="primary" @click="getData()">查询</el-button>
|
||||
<el-button style="" type="primary" @click="exportDate()">导出</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%; margin-top: 25px"
|
||||
>
|
||||
<el-table-column prop="createTime" align="center" label="时间" />
|
||||
<el-table-column prop="sendErBanNo" align="center" label="送礼人ID" />
|
||||
<el-table-column prop="sendNick" align="center" label="送礼人昵称" />
|
||||
<el-table-column prop="giftName" align="center" label="送礼名称" />
|
||||
<el-table-column prop="giftPrice" align="center" label="礼物单价" />
|
||||
<el-table-column prop="giftNum" align="center" label="礼物个数" />
|
||||
<el-table-column prop="totalGoldNum" align="center" label="总价值" />
|
||||
<el-table-column prop="receiveErBanNo" align="center" label="收礼人ID" />
|
||||
<el-table-column prop="receiveNick" align="center" label="收礼人昵称" />
|
||||
<el-table-column align="center" label="获得奖励数额" width="">
|
||||
<template v-slot="scope">
|
||||
<el-button @click="edi(scope.row)" class="primary" type="text" size="small"
|
||||
>获得奖励数额:{{ scope.row.rewardAmount }}</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
style="margin-top: 10px"
|
||||
class="paginationClass"
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
|
||||
layout="sizes, prev, pager, next"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
|
||||
<!-- 详情 -->
|
||||
<el-dialog v-model="detailsDialog" title="奖励详情" width="30%" center>
|
||||
<!-- 内表格 -->
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableDataIn"
|
||||
border
|
||||
style="width: 100%; margin-top: 25px"
|
||||
>
|
||||
<el-table-column prop="rewardName" align="center" label="奖励内容" />
|
||||
<el-table-column prop="rewardValue" align="center" label="单价" />
|
||||
<el-table-column prop="rewardNum" align="center" label="个数" />
|
||||
<el-table-column prop="totalRewardNum" align="center" label="总价值" />
|
||||
</el-table>
|
||||
<!-- 操作 -->
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" class="primary" @click="detailsDialog = false"
|
||||
>关闭</el-button
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getGiftSendPage,
|
||||
getAll,
|
||||
getRewardList,
|
||||
luckyGiftRewardRecordExport,
|
||||
} from "@/api/lucky/luckyGiftRangeConfig";
|
||||
import { ElMessage } from "element-plus";
|
||||
export default {
|
||||
name: "LuckyGiftDetail",
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
// 查询条件
|
||||
inquire: {
|
||||
gifts: [],
|
||||
giftId: "",
|
||||
senUserId: "",
|
||||
},
|
||||
// 表格
|
||||
tableData: [],
|
||||
// 分页
|
||||
total: 10, //总页数
|
||||
currentPage: 1, //页码
|
||||
pageSize: 10, //条数
|
||||
// 内表格
|
||||
detailsDialog: false,
|
||||
tableDataIn: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
getAll({ giftType: 16 }).then((res) => {
|
||||
this.inquire.gifts = res.data;
|
||||
this.inquire.giftId = res.data[0].giftId;
|
||||
});
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
// 查询
|
||||
getData() {
|
||||
this.loading = true;
|
||||
getGiftSendPage({
|
||||
page: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
giftId: this.inquire.giftId,
|
||||
sendErBanNo: this.inquire.senUserId,
|
||||
}).then((res) => {
|
||||
this.total = res.data.total;
|
||||
this.tableData = res.data.records;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 详情
|
||||
edi(val) {
|
||||
getRewardList({ giftSendRecordId: val.giftSendRecordId }).then((res) => {
|
||||
this.tableDataIn = res.data;
|
||||
this.detailsDialog = true;
|
||||
});
|
||||
},
|
||||
// 导出
|
||||
exportDate() {
|
||||
luckyGiftRewardRecordExport({
|
||||
giftId: this.inquire.giftId,
|
||||
sendErBanNo: this.inquire.senUserId,
|
||||
}).then();
|
||||
},
|
||||
// 分页导航
|
||||
handleSizeChange() {
|
||||
this.getData();
|
||||
},
|
||||
handleCurrentChange() {
|
||||
this.getData();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.outer {
|
||||
padding-top: 20px;
|
||||
background: #ecf0f5;
|
||||
border-top: 3px solid #d2d6de;
|
||||
.demonstration {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.inquire {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.search {
|
||||
width: 100%;
|
||||
height: 41px;
|
||||
.searchLeft,
|
||||
.searchRight {
|
||||
width: 20%;
|
||||
float: left;
|
||||
span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.input {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttonBox {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.authorityBox {
|
||||
.authoritySpan {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.authorityInpput {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
.dialogTableVisibleBut {
|
||||
margin: -25px 0 20px 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
325
src/views/lucky/LuckyGiftRangeConfigView.vue
Normal file
325
src/views/lucky/LuckyGiftRangeConfigView.vue
Normal file
@@ -0,0 +1,325 @@
|
||||
<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>
|
514
src/views/lucky/LuckyGiftRangeView.vue
Normal file
514
src/views/lucky/LuckyGiftRangeView.vue
Normal file
@@ -0,0 +1,514 @@
|
||||
<template>
|
||||
<div class="outer">
|
||||
<!-- new -->
|
||||
<!-- 查询 -->
|
||||
<div class="inquire" style="display: inline-block; margin-right: 20px">
|
||||
<span class="demonstration">选择礼物</span>
|
||||
<el-select v-model="inquire.value1" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="(item, i) in inquire.gifts"
|
||||
:key="i"
|
||||
:label="item.giftName"
|
||||
:value="item.giftId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="inquire" style="display: inline-block; margin-right: 20px">
|
||||
<span class="demonstration">选择礼物个数区间</span>
|
||||
<el-select v-model="inquire.value2" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="(item, i) in inquire.giftsNum"
|
||||
:key="i"
|
||||
:label="item.minValue + '~' + item.maxValue"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- 查询按钮 -->
|
||||
<el-button style="" type="primary" @click="getData()">查询</el-button>
|
||||
<el-button style="" type="primary" @click="addGift()">新增礼物</el-button>
|
||||
<br />
|
||||
<br />
|
||||
<!-- 礼物价值 -->
|
||||
<div class="inquire" style="display: inline-block; margin-right: 20px">
|
||||
<span class="demonstration">礼物价值:{{ inquire.diamond }}钻</span>
|
||||
</div>
|
||||
<!-- 礼物总期望 -->
|
||||
<div class="inquire" style="display: inline-block; margin-right: 20px">
|
||||
<span class="demonstration">礼物总期望:{{ inquire.giftExpectation }}钻</span>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%; margin-top: 25px"
|
||||
>
|
||||
<el-table-column prop="rewardName" align="center" label="奖品名称" />
|
||||
<el-table-column prop="rewardType" align="center" label="奖品分类">
|
||||
<template v-slot="scope">
|
||||
{{ scope.row.rewardType == 1 ? "钻石" : "礼物" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="stockNum" align="center" label="库存" />
|
||||
<el-table-column prop="platformValue" align="center" label="平台价值" />
|
||||
<el-table-column prop="rewardRate" align="center" label="获奖概率" />
|
||||
<el-table-column prop="showRate" align="center" label="展示概率" />
|
||||
<el-table-column prop="expectValue" align="center" label="期望" />
|
||||
<el-table-column prop="rewardCount" align="center" label="累计获得数量">
|
||||
<template v-slot="scope">
|
||||
{{ scope.row.rewardCount ? scope.row.rewardCount : "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="操作" width="300">
|
||||
<template v-slot="scope">
|
||||
<el-button
|
||||
@click="
|
||||
this.dialogBool = false;
|
||||
this.detailsTitle = '编辑';
|
||||
edi(scope.row);
|
||||
"
|
||||
class="primary"
|
||||
type="primary"
|
||||
size="default"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button @click="del(scope.row)" class="danger" type="danger" size="default"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
v-show="false"
|
||||
style="margin-top: 10px"
|
||||
class="paginationClass"
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
|
||||
layout="sizes, prev, pager, next"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<el-dialog v-model="detailsDialog" :title="detailsTitle" width="20%" center>
|
||||
<!-- 内容 -->
|
||||
<div class="inquire" style="display: inline-block; margin-bottom: 20px">
|
||||
<span class="demonstration" style="margin-right: 55px">奖品分类</span>
|
||||
<el-select @change="selectArea()" v-model="dialog.value1" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="(item, i) in dialog.gifts"
|
||||
:key="i"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-show="dialog.value1 == 2 || dialog.value1 == '礼物' ? true : false"
|
||||
class="inquire"
|
||||
style="display: inline-block; margin-bottom: 20px"
|
||||
>
|
||||
<span class="demonstration" style="margin-right: 55px">选择礼物</span>
|
||||
<el-select v-model="dialog.value2" filterable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="(item, i) in dialog.gifts2"
|
||||
:key="i"
|
||||
:label="item.giftName"
|
||||
:value="i"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-show="dialog.value1 == 1 || dialog.value1 == '钻石' ? true : false"
|
||||
class="inquire"
|
||||
style="display: flex; margin-bottom: 20px"
|
||||
>
|
||||
<span class="demonstration">奖励钻石数</span>
|
||||
<el-input
|
||||
style="width: 220px; display: inline-block"
|
||||
v-model="dialog.diamond"
|
||||
placeholder="请输入钻石数"
|
||||
class="input"
|
||||
></el-input>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="dialog.value1 == 2 || dialog.value1 == '礼物' ? true : false"
|
||||
class="inquire"
|
||||
style="display: flex; margin-bottom: 20px"
|
||||
>
|
||||
<span class="demonstration">价值</span>
|
||||
<el-input
|
||||
:disabled="true"
|
||||
style="width: 220px; display: inline-block"
|
||||
v-model="dialog.gifts2[dialog.value2].goldPrice"
|
||||
placeholder="请先选择礼物"
|
||||
class="input"
|
||||
></el-input>
|
||||
</div>
|
||||
|
||||
<div class="inquire" style="display: flex; margin-bottom: 20px">
|
||||
<span class="demonstration">获得概率</span>
|
||||
<el-input
|
||||
style="width: 220px; display: inline-block"
|
||||
v-model="dialog.gitChance"
|
||||
placeholder=""
|
||||
class="input"
|
||||
></el-input>
|
||||
</div>
|
||||
|
||||
<div class="inquire" style="display: flex; margin-bottom: 20px">
|
||||
<span class="demonstration">展示概率</span>
|
||||
<el-input
|
||||
style="width: 220px; display: inline-block"
|
||||
v-model="dialog.showChance"
|
||||
placeholder=""
|
||||
class="input"
|
||||
></el-input>
|
||||
</div>
|
||||
|
||||
<div class="inquire" style="display: flex; margin-bottom: 20px">
|
||||
<span class="demonstration">库存</span>
|
||||
<el-input
|
||||
style="width: 220px; display: inline-block"
|
||||
v-model="dialog.inventory"
|
||||
placeholder=""
|
||||
class="input"
|
||||
></el-input>
|
||||
</div>
|
||||
<!-- 操作 -->
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="detailsDialog = false">关闭</el-button>
|
||||
<el-button type="primary" @click="share()"> 确认 </el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getAll,
|
||||
luckyGiftRangeConfigList,
|
||||
luckyGiftRewardList,
|
||||
luckyGiftRewardSave,
|
||||
luckyGiftRewardDelete,
|
||||
} from "@/api/lucky/luckyGiftRangeConfig";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
export default {
|
||||
name: "LuckyGiftRangeView",
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
// 查询条件
|
||||
inquire: {
|
||||
gifts: [],
|
||||
giftsNum: [],
|
||||
diamond: 0,
|
||||
giftExpectation: 0,
|
||||
value1: "",
|
||||
value2: "",
|
||||
},
|
||||
// 表格
|
||||
tableData: [],
|
||||
// 分页
|
||||
total: 10, //总页数
|
||||
currentPage: 1, //页码
|
||||
pageSize: 10, //条数
|
||||
// 弹窗
|
||||
detailsDialog: false,
|
||||
detailsTitle: "新增",
|
||||
dialogBool: true,
|
||||
dialog: {
|
||||
gifts: [
|
||||
{
|
||||
value: "1",
|
||||
label: "钻石",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "礼物",
|
||||
},
|
||||
],
|
||||
value1: "1",
|
||||
gifts2: [
|
||||
{
|
||||
giftName: "",
|
||||
goldPrice: "",
|
||||
giftId: "",
|
||||
},
|
||||
],
|
||||
value2: 0,
|
||||
diamond: "",
|
||||
gitChance: "",
|
||||
showChance: "",
|
||||
inventory: "",
|
||||
price: "",
|
||||
},
|
||||
id: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getFun();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
getFun() {
|
||||
getAll({ giftType: 16 }).then((res) => {
|
||||
this.inquire.gifts = res.data;
|
||||
this.inquire.value1 = res.data[0].giftId;
|
||||
luckyGiftRangeConfigList({ giftId: this.inquire.value1 }).then((res) => {
|
||||
this.inquire.giftsNum = res.data;
|
||||
this.inquire.value2 = res.data[0].id;
|
||||
this.loading = true;
|
||||
luckyGiftRewardList({
|
||||
giftId: this.inquire.value1,
|
||||
rangeId: this.inquire.value2,
|
||||
}).then((res) => {
|
||||
this.inquire.diamond = res.data.giftPrice;
|
||||
this.inquire.giftExpectation = res.data.expectValue;
|
||||
this.tableData = res.data.list;
|
||||
this.loading = false;
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
// 监听弹窗数值变化1
|
||||
selectArea() {
|
||||
if (this.dialog.value1 == 2) {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: "数据加载中,请稍等~",
|
||||
type: "warning",
|
||||
});
|
||||
getAll({ giftType: 2 }).then((res) => {
|
||||
this.dialog.gifts2 = res.data;
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: "加载完成",
|
||||
type: "success",
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
// 查询
|
||||
getData() {
|
||||
if (this.inquire.value1 == "") {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: "请先选择礼物",
|
||||
type: "warning",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.inquire.value2 == "") {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: "请再次选择礼物个数区间",
|
||||
type: "warning",
|
||||
});
|
||||
return;
|
||||
}
|
||||
luckyGiftRewardList({
|
||||
giftId: this.inquire.value1,
|
||||
rangeId: this.inquire.value2,
|
||||
}).then((res) => {
|
||||
this.inquire.diamond = res.data.giftPrice;
|
||||
this.inquire.giftExpectation = res.data.expectValue;
|
||||
this.tableData = res.data.list;
|
||||
// this.inquire.value1 = "";
|
||||
// this.inquire.value2 = "";
|
||||
});
|
||||
},
|
||||
// 新增
|
||||
addGift() {
|
||||
this.detailsTitle = "新增";
|
||||
this.detailsDialog = true;
|
||||
this.dialogBool = true;
|
||||
},
|
||||
//编辑
|
||||
edi(val) {
|
||||
this.dialog.value1 = val.rewardType == 1 ? "钻石" : "礼物";
|
||||
this.dialog.gitChance = val.rewardRate;
|
||||
this.dialog.showChance = val.showRate;
|
||||
this.dialog.inventory = val.stockNum;
|
||||
this.id = val.id;
|
||||
if (val.rewardType == 1) {
|
||||
this.dialog.diamond = val.rewardValue;
|
||||
this.detailsDialog = true;
|
||||
} else {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: "数据加载中,请稍等~",
|
||||
type: "warning",
|
||||
});
|
||||
getAll({ giftType: 2 }).then((res) => {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: "加载完成",
|
||||
type: "success",
|
||||
});
|
||||
this.dialog.gifts2 = res.data;
|
||||
var index = this.dialog.gifts2.findIndex((item) => {
|
||||
return item.giftName == val.rewardName;
|
||||
});
|
||||
this.dialog.value2 = index;
|
||||
this.detailsDialog = true;
|
||||
});
|
||||
}
|
||||
},
|
||||
// 确认编辑或新增
|
||||
share() {
|
||||
console.log(this.dialog);
|
||||
var obj = {};
|
||||
// 新增
|
||||
if (this.dialogBool) {
|
||||
if (this.dialog.value1 == 1) {
|
||||
obj = {
|
||||
rewardType: this.dialog.value1,
|
||||
rewardValue: this.dialog.diamond,
|
||||
rewardRate: this.dialog.gitChance,
|
||||
showRate: this.dialog.showChance,
|
||||
stockNum: this.dialog.inventory,
|
||||
giftId: this.inquire.value1,
|
||||
rangeId: this.inquire.value2,
|
||||
};
|
||||
} else {
|
||||
obj = {
|
||||
rewardType: this.dialog.value1,
|
||||
rewardValue: this.dialog.gifts2[this.dialog.value2].giftId,
|
||||
rewardRate: this.dialog.gitChance,
|
||||
showRate: this.dialog.showChance,
|
||||
stockNum: this.dialog.inventory,
|
||||
giftId: this.inquire.value1,
|
||||
rangeId: this.inquire.value2,
|
||||
};
|
||||
}
|
||||
this.dialog.gitChance = "";
|
||||
this.dialog.showChance = "";
|
||||
this.dialog.inventory = "";
|
||||
this.dialog.diamond = "";
|
||||
this.dialog.value2 = 0;
|
||||
} else {
|
||||
if (this.dialog.value1 == 1 || this.dialog.value1 == "钻石") {
|
||||
obj = {
|
||||
rewardType: this.dialog.value1 == "钻石" ? 1 : 2,
|
||||
rewardValue: this.dialog.diamond,
|
||||
rewardRate: this.dialog.gitChance,
|
||||
showRate: this.dialog.showChance,
|
||||
stockNum: this.dialog.inventory,
|
||||
giftId: this.inquire.value1,
|
||||
rangeId: this.inquire.value2,
|
||||
id: this.id,
|
||||
};
|
||||
} else {
|
||||
obj = {
|
||||
rewardType: this.dialog.value1 == "钻石" ? 1 : 2,
|
||||
rewardValue: this.dialog.gifts2[this.dialog.value2].giftId,
|
||||
rewardRate: this.dialog.gitChance,
|
||||
showRate: this.dialog.showChance,
|
||||
stockNum: this.dialog.inventory,
|
||||
giftId: this.inquire.value1,
|
||||
rangeId: this.inquire.value2,
|
||||
id: this.id,
|
||||
};
|
||||
}
|
||||
}
|
||||
luckyGiftRewardSave(obj).then((res) => {
|
||||
if (res.code == 200) {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: "保存成功",
|
||||
type: "success",
|
||||
});
|
||||
} else {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: res.message,
|
||||
type: "danger",
|
||||
});
|
||||
}
|
||||
this.detailsDialog = false;
|
||||
});
|
||||
this.getFun();
|
||||
},
|
||||
//删除
|
||||
del(val) {
|
||||
ElMessageBox.confirm("此操作将永久删除该, 是否继续?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "error",
|
||||
})
|
||||
.then(() => {
|
||||
luckyGiftRewardDelete({ id: val.id }).then((res) => {
|
||||
this.getFun();
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
// 分页导航
|
||||
handleSizeChange() {
|
||||
this.getData();
|
||||
},
|
||||
handleCurrentChange() {
|
||||
this.getData();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.outer {
|
||||
padding-top: 20px;
|
||||
background: #ecf0f5;
|
||||
border-top: 3px solid #d2d6de;
|
||||
.demonstration {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.inquire {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.search {
|
||||
width: 100%;
|
||||
height: 41px;
|
||||
.searchLeft,
|
||||
.searchRight {
|
||||
width: 20%;
|
||||
float: left;
|
||||
span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.input {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttonBox {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.authorityBox {
|
||||
.authoritySpan {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.authorityInpput {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
.dialogTableVisibleBut {
|
||||
margin: -25px 0 20px 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
@@ -1,28 +1,28 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"strict": false,
|
||||
"esModuleInterop": true,
|
||||
"allowJs": true,
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"esModuleInterop": true,
|
||||
"jsx": "preserve",
|
||||
"noEmit": true,
|
||||
"noImplicitAny": false,
|
||||
"strictNullChecks": true,
|
||||
"inlineSourceMap": true,
|
||||
"inlineSources": true,
|
||||
"checkJs": true,
|
||||
"outDir": "./dist",
|
||||
"rootDir": "./src",
|
||||
"outFiles": "./dist/bundle.js"
|
||||
},
|
||||
"include": [
|
||||
"./src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
// {
|
||||
// "compilerOptions": {
|
||||
// "target": "esnext",
|
||||
// "module": "esnext",
|
||||
// "strict": false,
|
||||
// "esModuleInterop": true,
|
||||
// "allowJs": true,
|
||||
// "moduleResolution": "node",
|
||||
// "resolveJsonModule": true,
|
||||
// "esModuleInterop": true,
|
||||
// "jsx": "preserve",
|
||||
// "noEmit": true,
|
||||
// "noImplicitAny": false,
|
||||
// "strictNullChecks": true,
|
||||
// "inlineSourceMap": true,
|
||||
// "inlineSources": true,
|
||||
// "checkJs": true,
|
||||
// "outDir": "./dist",
|
||||
// "rootDir": "./src",
|
||||
// "outFiles": "./dist/bundle.js"
|
||||
// },
|
||||
// "include": [
|
||||
// "./src/**/*"
|
||||
// ],
|
||||
// "exclude": [
|
||||
// "node_modules"
|
||||
// ]
|
||||
// }
|
Reference in New Issue
Block a user