feat(资源组配置): 修复荣誉活动的保存数据问题

This commit is contained in:
hzj 2025-11-24 17:21:01 +08:00
parent 48eeefa8c1
commit 3a41bbed52
3 changed files with 306 additions and 150 deletions

View File

@ -1,13 +1,36 @@
<template>
<div class="props-row">
<div v-for="(item, index) in list" :key="index" class="props-item">
<el-tooltip class="item" effect="dark" :content="formatPropsContent(item)" placement="top-start">
<div class="quantity nowrap-ellipsis">{{ formatPropsContent(item) }} </div>
<el-tooltip
class="item"
effect="dark"
:content="formatPropsContent(item)"
placement="top-start"
>
<div class="quantity nowrap-ellipsis">
{{ formatPropsContent(item) }}
</div>
</el-tooltip>
<img v-if="item.type === 'GOLD'" src="@/assets/gold_icon.png" style="width:50px;height50px;cursor: pointer;">
<img v-else-if="item.type === 'DIAMOND'" src="@/assets/diamond_icon.png" style="width:50px;height50px;cursor: pointer;">
<img v-else-if="item.type === 'GAME_COUPON'" src="@/assets/game_coupon.png" style="width:50px;height50px;cursor: pointer;">
<img v-else-if="item.type === 'SPECIAL_ID'" src="@/assets/special_id.png" style="width:50px;height:50px;cursor: pointer;">
<img
v-if="item.type === 'GOLD'"
src="@/assets/gold_icon.png"
style="width:50px;height:50px;cursor: pointer;"
/>
<img
v-else-if="item.type === 'DIAMOND'"
src="@/assets/diamond_icon.png"
style="width:50px;height:50px;cursor: pointer;"
/>
<img
v-else-if="item.type === 'GAME_COUPON'"
src="@/assets/game_coupon.png"
style="width:50px;height:50px;cursor: pointer;"
/>
<img
v-else-if="item.type === 'SPECIAL_ID'"
src="@/assets/special_id.png"
style="width:50px;height:50px;cursor: pointer;"
/>
<div v-else class="preview-img">
<el-image
style="width: 50px; height: 50px"
@ -19,10 +42,7 @@
</div>
</el-image>
<div class="preview-svga">
<svgaplayer
type="popover"
:url="item.sourceUrl"
/>
<svgaplayer type="popover" :url="item.sourceUrl" />
</div>
</div>
</div>
@ -30,7 +50,7 @@
</template>
<script>
export default {
name: 'PropsRow',
name: "PropsRow",
props: {
list: {
type: Array,
@ -41,122 +61,134 @@ export default {
data() {
return {
propsTypeFormat: {
'GIFT': {
prefix: 'x',
field: 'quantity',
suffix: ''
GIFT: {
prefix: "x",
field: "quantity",
suffix: ""
},
'DIAMOND': {
prefix: '',
field: 'content',
suffix: ''
DIAMOND: {
prefix: "",
field: "content",
suffix: ""
},
'GOLD': {
prefix: '',
field: 'content',
suffix: ''
GOLD: {
prefix: "",
field: "content",
suffix: ""
},
'ROOM_BADGE': {
prefix: '',
field: 'quantity',
suffix: 'D',
ROOM_BADGE: {
prefix: "",
field: "quantity",
suffix: "D",
forever: true
},
'BADGE': {
prefix: '',
field: 'quantity',
suffix: 'D',
BADGE: {
prefix: "",
field: "quantity",
suffix: "D",
forever: true
},
'SPECIAL_ID': {
prefix: '',
field: 'content',
suffix: ''
SPECIAL_ID: {
prefix: "",
field: "content",
suffix: ""
},
'NOBLE_VIP': {
prefix: '',
field: 'quantity',
suffix: 'D'
NOBLE_VIP: {
prefix: "",
field: "quantity",
suffix: "D"
},
'AVATAR_FRAME': {
prefix: '',
field: 'quantity',
suffix: 'D'
AVATAR_FRAME: {
prefix: "",
field: "quantity",
suffix: "D"
},
'DATA_CARD': {
prefix: '',
field: 'quantity',
suffix: 'D'
DATA_CARD: {
prefix: "",
field: "quantity",
suffix: "D"
},
'RIDE': {
prefix: '',
field: 'quantity',
suffix: 'D'
RIDE: {
prefix: "",
field: "quantity",
suffix: "D"
},
'THEME': {
prefix: '',
field: 'quantity',
suffix: 'D'
THEME: {
prefix: "",
field: "quantity",
suffix: "D"
},
'EMOJI': {
prefix: 'x',
field: 'quantity',
suffix: ''
EMOJI: {
prefix: "x",
field: "quantity",
suffix: ""
},
'CHAT_BUBBLE': {
prefix: '',
field: 'quantity',
suffix: 'D'
CHAT_BUBBLE: {
prefix: "",
field: "quantity",
suffix: "D"
},
'GAME_COUPON': {
prefix: '',
field: 'quantity',
suffix: ''
GAME_COUPON: {
prefix: "",
field: "quantity",
suffix: ""
},
'FRAGMENTS': {
prefix: 'x',
field: 'quantity',
suffix: ''
FRAGMENTS: {
prefix: "x",
field: "quantity",
suffix: ""
},
'FLOAT_PICTURE': {
prefix: '',
field: 'quantity',
suffix: 'D'
FLOAT_PICTURE: {
prefix: "",
field: "quantity",
suffix: "D"
},
'LAYOUT': {
prefix: 'x',
field: 'quantity',
suffix: ''
LAYOUT: {
prefix: "x",
field: "quantity",
suffix: ""
},
//
PROP_COUPON: {
prefix: "x",
field: "quantity",
suffix: ""
},
//
HONOR_ACTIVITY: {
prefix: "",
field: "quantity",
suffix: "D"
}
}
}
},
computed: {
},
created() {
};
},
computed: {},
created() {},
methods: {
formatPropsContent(item) {
if (item.detailType === 'CUSTOMIZE' && item.remark) {
return item.remark
if (item.detailType === "CUSTOMIZE" && item.remark) {
return item.remark;
}
const format = this.propsTypeFormat[item.detailType] || this.propsTypeFormat[item.type]
const format =
this.propsTypeFormat[item.detailType] ||
this.propsTypeFormat[item.type];
if (!format) {
return '?'
return "?";
}
const val = item[format.field]
const val = item[format.field];
if (format.forever === true && val <= 0) {
return '永久'
return "永久";
}
return `${format.prefix}${val}${format.suffix}`
return `${format.prefix}${val}${format.suffix}`;
}
}
}
};
</script>
<style scoped lang="scss">
.props-row {
@ -171,7 +203,7 @@ export default {
.quantity {
position: absolute;
background-color: rgba(21, 21, 21, 0.6);
color: #FFFFFF;
color: #ffffff;
border-radius: 2px;
right: 0px;
left: 0px;
@ -182,5 +214,4 @@ export default {
}
}
}
</style>

View File

@ -18,6 +18,7 @@
label-width="110px"
style="margin-right:50px;"
>
<!-- 类型名称 -->
<el-form-item label="类型名称" prop="name">
<el-input
v-model.trim="form.name"
@ -25,12 +26,16 @@
placeholder="类别名称"
/>
</el-form-item>
<!-- 上下架开关 -->
<el-form-item label="上/下架" prop="shelfStatus">
<el-radio-group v-model="form.shelfStatus">
<el-radio :label="true">上架</el-radio>
<el-radio :label="false">下架</el-radio>
</el-radio-group>
</el-form-item>
<!-- 配置列表 -->
<div class="dr-content">
<div ref="rewardContent">
<el-row
@ -38,9 +43,12 @@
:key="index"
style="cursor:pointer;line-height:30px;"
>
<!-- 序号 -->
<el-col :span="3">
<div class="sort">{{ index + 1 }}</div>
</el-col>
<!-- 展示图 -->
<el-col :span="3" style="text-align:center;">
<div v-if="item.type === 'GOLD'">
<img
@ -85,6 +93,8 @@
</div>
</div>
</el-col>
<!-- 按类型展示信息 -->
<el-col :span="15">
<span style="font-weight:bold;">
{{ getTypeName(item) }}</span
@ -118,6 +128,8 @@
{{ item.quantity }}</span
>
</el-col>
<!-- 删除按钮 -->
<el-col :span="3" style="text-align: right;">
<i
class="del el-icon-delete-solid"
@ -127,13 +139,20 @@
</el-row>
</div>
</div>
<!-- 添加配置 -->
<el-form-item label="添加配置">
<!-- 对新增的选项进行配置 -->
<div class="content-list">
<el-row v-for="(item, index) in form.tmpConfigList" :key="index">
<div class="content-box">
<!-- 名称 -->
<div class="content-box-label">
<span>{{ item.ext.title }}</span>
</div>
<!-- 各类型自定义配置 -->
<!-- 靓号 -->
<el-row v-if="item.clickType === 'SPECIAL_ID'" :gutter="10">
<el-col :span="13">
<el-form-item
@ -180,6 +199,7 @@
/>
</el-col>
</el-row>
<el-row v-else-if="isCurrency(item.clickType)" :gutter="10">
<el-col :span="19">
<el-form-item
@ -209,6 +229,8 @@
/>
</el-col>
</el-row>
<!-- 游戏券 -->
<el-row v-else-if="isGameCoupon(item.clickType)" :gutter="10">
<el-col :span="19">
<el-form-item
@ -238,6 +260,8 @@
/>
</el-col>
</el-row>
<!-- 道具券 -->
<el-row v-else-if="isPROPCOUPON(item.clickType)" :gutter="10">
<el-col :span="13">
<el-form-item
@ -285,6 +309,8 @@
/>
</el-col>
</el-row>
<!-- 徽章 -->
<el-row v-else-if="isBadge(item.clickType)" :gutter="10">
<el-col :span="13">
<el-form-item
@ -360,6 +386,8 @@
/>
</el-col>
</el-row>
<!-- 荣誉-活动 -->
<el-row
v-else-if="isHONORACTIVITY(item.clickType)"
:gutter="10"
@ -438,6 +466,8 @@
/>
</el-col>
</el-row>
<!-- 自定义 -->
<el-row v-else-if="isCustomize(item.clickType)" :gutter="10">
<el-col :span="3">
<div
@ -528,6 +558,8 @@
/>
</el-col>
</el-row>
<!-- 其他 -->
<el-row v-else :gutter="10">
<el-col :span="3">
<div
@ -622,6 +654,8 @@
</div>
</el-row>
</div>
<!-- 资源选项 -->
<div>
<el-button
type="text"
@ -961,7 +995,8 @@ export default {
},
HONOR_ACTIVITY: {
value: "HONOR_ACTIVITY",
// value: "HONOR_ACTIVITY",
value: "BADGE",
name: "荣誉-活动"
}
},
@ -1069,6 +1104,7 @@ export default {
});
});
},
methods: {
querySearchBadgeRestaurants(queryString, cb) {
var badgeRestaurants = this.badgeRestaurants;
@ -1083,6 +1119,7 @@ export default {
: badgeRestaurants;
cb(results);
},
changeContent(item, val) {
const that = this;
const typeData = that.propsTypeData[item.clickType];
@ -1101,13 +1138,18 @@ export default {
item.ext.selectVal.cover = data.cover;
item.ext.selectVal.sourceUrl = data.sourceUrl;
},
//
submitItem(index) {
const that = this;
that.$refs.form.validate(valid => {
//
if (!valid) {
console.error("error submit!!");
return;
}
const item = that.form.tmpConfigList[0];
const itemExt = item.ext;
that.form.rewardConfigList.push({
@ -1122,6 +1164,8 @@ export default {
that.form.tmpConfigList.splice(index, 1);
});
},
//
getTypeName(item) {
const typeData = this.propsTypeMap[item.detailType];
if (typeData) {
@ -1129,43 +1173,65 @@ export default {
}
return "";
},
//
deleteUpdateItem(index) {
this.form.rewardConfigList.splice(index, 1);
},
//
addContent(type) {
const that = this;
that.$refs.form.validate(valid => {
//
if (!valid) {
console.error("error submit!!");
return;
}
//
if (that.form.tmpConfigList && that.form.tmpConfigList.length > 0) {
that.submitItem(0);
that.submitItem(0); //
}
//
if (that.isGoldOrDiamond(type) || type === "SPECIAL_ID") {
that.addContentData(type);
return;
}
//
if (that.isGameCoupon(type)) {
that.addContentData(type);
return;
}
//
if (that.isPROPCOUPON(type)) {
that.addContentData(type);
return;
}
//
// if (that.isHONORACTIVITY(type)) {
// that.addContentData(type);
// return;
// }
//
if (that.propsTypeData[type].loadData === true) {
that.addContentData(type);
return;
}
//
that.propsTypeData[type].loading = true;
//
if (that.isGift(type)) {
that.disableAddContent = true;
//
listGiftBySysOrigin(that.form.sysOrigin)
.then(res => {
that.disableAddContent = false;
@ -1192,9 +1258,11 @@ export default {
return;
}
//
const badgeType = that.getBadgeType(type);
if (badgeType) {
that.disableAddContent = true;
//
listBadgePictureBySysOrigin(that.form.sysOrigin, badgeType)
.then(res => {
that.disableAddContent = false;
@ -1221,6 +1289,7 @@ export default {
return;
}
// VIP
if (type === "NOBLE_VIP") {
that.disableAddContent = true;
listNotFamilyBySysOriginType(that.form.sysOrigin, "NOBLE_VIP")
@ -1249,6 +1318,7 @@ export default {
return;
}
//
if (type === "EMOJI") {
listGroupBySysOrigin(that.form.sysOrigin)
.then(res => {
@ -1275,6 +1345,8 @@ export default {
}
that.disableAddContent = true;
//
listSysOriginTypeList(that.sysOrigin, type)
.then(res => {
that.disableAddContent = false;
@ -1301,6 +1373,8 @@ export default {
});
});
},
//
getBadgeType(type) {
if (this.isUserBadge(type)) {
return "ACTIVITY";
@ -1312,42 +1386,62 @@ export default {
if (this.isHONORACTIVITY(type)) {
return "HONOR_ACTIVITY";
// return "BADGE";
}
return null;
},
//
isCurrency(type) {
return type === "GOLD" || type === "DIAMOND";
},
//
isGameCoupon(type) {
return type === "GAME_COUPON";
},
//
isPROPCOUPON(type) {
return type === "PROP_COUPON";
},
//
isHONORACTIVITY(type) {
return type === "HONOR_ACTIVITY";
},
//
isBadge(type) {
return this.isRoomBadge(type) || this.isUserBadge(type);
},
//
isUserBadge(type) {
return type === "BADGE";
},
//
isCustomize(type) {
return type === "CUSTOMIZE";
},
//
isRoomBadge(type) {
return type === "ROOM_BADGE";
},
//
isGift(type) {
return type === "GIFT";
},
//
isTheme(type) {
return type === "THEME";
},
//
addContentData(type) {
const that = this;
that.form.tmpConfigList.push({
@ -1362,19 +1456,24 @@ export default {
}
});
},
//
isGoldOrDiamond(type) {
return type === "GOLD" || type === "DIAMOND";
},
clickChangeSource() {
this.isChangeSource = !this.isChangeSource;
if (this.isChangeSource === true && this.isLoadSourceTypeList === false) {
this.loadSourceType();
}
},
changeType(index) {
this.selectType = this.sourceTypeList[index];
this.form.sourceId = this.selectType.id;
},
loadSourceType() {
const that = this;
that.listTypeLoading = true;
@ -1389,10 +1488,12 @@ export default {
console.error(er);
});
},
handleCoverFileRemove(file, fileList) {
this.form.cover = "";
this.coverUploadLoading = false;
},
sourceUpload(file) {
const that = this;
that.sourceUploadLoading = true;
@ -1406,13 +1507,18 @@ export default {
that.sourceUploadLoading = false;
});
},
handleSourceFileRemove(file, fileList) {
this.form.sourceUrl = "";
this.sourceUploadLoading = false;
},
//
handleClose() {
this.$emit("close");
},
//
submitForm() {
const that = this;
that.$refs.form.validate(valid => {
@ -1453,6 +1559,7 @@ export default {
});
});
},
clickSvgaplayer() {
this.svgaplayerVisable = true;
}

View File

@ -14,7 +14,9 @@
:label="item.label"
:value="item.value"
>
<span style="float: left;"> <sys-origin-icon :icon="item.value" :desc="item.value" /></span>
<span style="float: left;">
<sys-origin-icon :icon="item.value" :desc="item.value"
/></span>
<span style="float: left;margin-left:10px">{{ item.label }}</span>
</el-option>
</el-select>
@ -26,7 +28,12 @@
clearable
@change="handleSearch"
>
<el-option v-for="item in showcaseTypes" :key="item.value" :label="item.name" :value="item.value" />
<el-option
v-for="item in showcaseTypes"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
<el-input
@ -70,7 +77,12 @@
@cell-mouse-enter="handleMouseEnter"
>
<el-table-column prop="id" width="200" label="ID" align="center" />
<el-table-column width="100" prop="name" label="类型名称" align="center" />
<el-table-column
width="100"
prop="name"
label="类型名称"
align="center"
/>
<el-table-column width="200" label="上/下架" align="center">
<template slot-scope="scope">
<el-switch
@ -94,7 +106,9 @@
</el-table-column>
<el-table-column fixed="right" label="操作" align="center" width="150">
<template slot-scope="scope">
<el-button type="text" @click.native="handleUpdate(scope.row)">编辑</el-button>
<el-button type="text" @click.native="handleUpdate(scope.row)"
>编辑</el-button
>
</template>
</el-table-column>
</el-table>
@ -107,33 +121,37 @@
@pagination="renderData"
/>
<!-- 添加或修改窗口 -->
<form-edit
v-if="formEditVisable"
:row="thisRow"
:sys-origin="editSysOrigin"
@success="formEditSuccess"
@close="formEditVisable=false"
@close="formEditVisable = false"
/>
</div>
</template>
<script>
import { pagePropsActivityRewardGroup, offPropsActivityRewardGroup } from '@/api/props'
import Pagination from '@/components/Pagination'
import { propsTypes } from '@/constant/type'
import FormEdit from './form-edit'
import { sysOriginPlatforms } from '@/constant/origin'
import { mapGetters } from 'vuex'
import PropsRow from '@/components/data/PropsRow'
import {
pagePropsActivityRewardGroup,
offPropsActivityRewardGroup
} from "@/api/props";
import Pagination from "@/components/Pagination";
import { propsTypes } from "@/constant/type";
import FormEdit from "./form-edit"; //
import { sysOriginPlatforms } from "@/constant/origin";
import { mapGetters } from "vuex";
import PropsRow from "@/components/data/PropsRow";
export default {
components: { Pagination, FormEdit, PropsRow },
data() {
return {
editSysOrigin: '',
editSysOrigin: "",
sysOriginPlatforms,
showcaseTypes: [
{ value: false, name: '下架' },
{ value: true, name: '上架' }
{ value: false, name: "下架" },
{ value: true, name: "上架" }
],
formEditVisable: false,
thisRow: {},
@ -144,78 +162,78 @@ export default {
listQuery: {
cursor: 1,
limit: 20,
id: '',
name: '',
id: "",
name: "",
shelfStatus: true,
sysOrigin: 'HALAR'
sysOrigin: "HALAR"
},
listLoading: true
}
};
},
computed: {
...mapGetters(['permissionsSysOriginPlatforms'])
...mapGetters(["permissionsSysOriginPlatforms"])
},
created() {
const that = this
const querySystem = this.permissionsSysOriginPlatforms[0]
const that = this;
const querySystem = this.permissionsSysOriginPlatforms[0];
if (!querySystem) {
return
return;
}
that.listQuery.sysOrigin = querySystem.value
that.renderData()
that.listQuery.sysOrigin = querySystem.value;
that.renderData();
},
methods: {
renderData(isClean) {
const that = this
that.listLoading = true
const that = this;
that.listLoading = true;
if (isClean === true) {
that.listQuery.cursor = 1
that.listQuery.cursor = 1;
}
pagePropsActivityRewardGroup(that.listQuery).then(res => {
const { body } = res
that.total = body.total || 0
that.list = body.records
that.listLoading = false
})
const { body } = res;
that.total = body.total || 0;
that.list = body.records;
that.listLoading = false;
});
},
handleCreate() {
this.thisRow = null
this.formEditVisable = true
this.editSysOrigin = this.listQuery.sysOrigin
this.thisRow = null;
this.formEditVisable = true;
this.editSysOrigin = this.listQuery.sysOrigin;
},
handleUpdate(row) {
this.formEditVisable = true
this.formEditVisable = true;
},
handleSwitchChange(row) {
offPropsActivityRewardGroup(row.id, row.shelfStatus)
.then(res => {})
.catch(er => {
row.shelfStatus = !row.shelfStatus
})
row.shelfStatus = !row.shelfStatus;
});
},
handleSearch() {
this.renderData(true)
this.renderData(true);
},
queryUserDetails(row) {
this.userDeatilsDrawer = true
this.thatSelectedUserId = row.id
this.userDeatilsDrawer = true;
this.thatSelectedUserId = row.id;
},
handleMouseEnter(row) {
this.thisRow = row
this.thatSelectedUserId = row.id
this.editSysOrigin = row.sysOrigin
this.thisRow = row;
this.thatSelectedUserId = row.id;
this.editSysOrigin = row.sysOrigin;
},
formEditSuccess() {
this.formEditVisable = false
this.renderData(false)
this.formEditVisable = false;
this.renderData(false);
}
}
}
};
</script>
<style scoped lang="scss">
.store-table-expand {
font-size: 0;
label {
.store-table-expand {
font-size: 0;
label {
width: 90px;
color: #99a9bf;
.el-form-item {
@ -223,6 +241,6 @@ export default {
margin-bottom: 0;
width: 50%;
}
}
}
}
}
</style>