591 lines
18 KiB
Vue
591 lines
18 KiB
Vue
<template>
|
||
<div class="outer">
|
||
<!-- new -->
|
||
<!-- 查询 -->
|
||
<div class="inquire" style="display: inline-block; margin-right: 20px">
|
||
<span class="demonstration">选择礼物</span>
|
||
<el-select @change="selectGift" 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 @change="selectGift2" 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
|
||
v-show="scope.row.isDefault == 0"
|
||
@click="
|
||
this.dialogBool = false;
|
||
this.detailsTitle = '编辑';
|
||
edi(scope.row);
|
||
"
|
||
class="primary"
|
||
type="primary"
|
||
size="default"
|
||
>编辑</el-button
|
||
>
|
||
<el-button
|
||
v-show="scope.row.isDefault == 0"
|
||
@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.map(v => {
|
||
let giftName = v.giftName;
|
||
if (giftName.startsWith('{') && giftName.endsWith('}')) {
|
||
v.giftName = JSON.parse(giftName).zh;
|
||
}
|
||
return v;
|
||
});
|
||
this.inquire.value1 = "";
|
||
this.inquire.value2 = "";
|
||
// 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;
|
||
// });
|
||
// });
|
||
});
|
||
},
|
||
// 外部监听
|
||
selectGift(e) {
|
||
console.log(e);
|
||
this.inquire.value1 = e;
|
||
luckyGiftRangeConfigList({ giftId: this.inquire.value1 }).then((res) => {
|
||
this.inquire.giftsNum = res.data;
|
||
// this.inquire.value2 = "";
|
||
this.inquire.value2 = res.data[0].id;
|
||
// this.loading = true;
|
||
// luckyGiftRewardList({
|
||
// giftId: e,
|
||
// 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;
|
||
// });
|
||
});
|
||
},
|
||
// 外部监听2
|
||
selectGift2(e) {
|
||
this.inquire.value2 = e;
|
||
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.map(v => {
|
||
let giftName = v.giftName;
|
||
if (giftName.startsWith('{') && giftName.endsWith('}')) {
|
||
v.giftName = JSON.parse(giftName).zh;
|
||
}
|
||
return v;
|
||
});
|
||
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.map(v => {
|
||
let giftName = v.giftName;
|
||
if (giftName.startsWith('{') && giftName.endsWith('}')) {
|
||
v.giftName = JSON.parse(giftName).zh;
|
||
}
|
||
return v;
|
||
});
|
||
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 == "金币" || this.dialog.value1 == 1 ? 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,
|
||
};
|
||
} else {
|
||
obj = {
|
||
rewardType: this.dialog.value1 == "金币" || this.dialog.value1 == 1 ? 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,
|
||
};
|
||
}
|
||
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;
|
||
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;
|
||
});
|
||
});
|
||
},
|
||
//删除
|
||
del(val) {
|
||
ElMessageBox.confirm("此操作将永久删除该, 是否继续?", "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "error",
|
||
})
|
||
.then(() => {
|
||
luckyGiftRewardDelete({ id: val.id }).then((res) => {
|
||
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;
|
||
});
|
||
});
|
||
})
|
||
.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>
|