663 lines
19 KiB
Vue
663 lines
19 KiB
Vue
<template>
|
||
<div class="main-content">
|
||
<div style="width: 60%;">
|
||
<el-select
|
||
v-model="platform_id"
|
||
@change="changePlatform"
|
||
placeholder="请选择平台"
|
||
class="w100 mgb-20"
|
||
>
|
||
<el-option
|
||
v-for="item in platformsArr"
|
||
:key="item.platform.platform_id"
|
||
:label="item.platform.name"
|
||
:value="item.platform.platform_id"
|
||
/>
|
||
</el-select>
|
||
<el-collapse
|
||
v-model="activeNames"
|
||
v-if="allGiftList.length > 0"
|
||
>
|
||
<el-collapse-item
|
||
:name="index"
|
||
v-for="(item, index) in allGiftList"
|
||
:key="index"
|
||
>
|
||
<template slot="title">
|
||
<svg-icon
|
||
style="margin-right: 20px;"
|
||
icon-class="del"
|
||
@click.stop="delGiftList(index)"
|
||
/>
|
||
{{ item.title || '待命名'}}
|
||
</template>
|
||
<el-form
|
||
:ref="`giftList${index}`"
|
||
:model="item"
|
||
:rules="giftListRules"
|
||
style="width: 100%"
|
||
label-width="100px"
|
||
class="mgt-20 mgb-20"
|
||
>
|
||
<el-form-item
|
||
label="名称"
|
||
prop="title"
|
||
>
|
||
<el-input v-model="item.title"></el-input>
|
||
</el-form-item>
|
||
<!-- <el-form-item
|
||
label="兑换条件"
|
||
prop="cond_name"
|
||
>
|
||
<el-input
|
||
v-model="item.cond_name"
|
||
placeholder="如：积分"
|
||
></el-input>
|
||
</el-form-item> -->
|
||
<el-form-item
|
||
label="达成数量"
|
||
prop="condition"
|
||
>
|
||
<el-input v-model.number="item.condition"></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="兑换物品"
|
||
prop="list"
|
||
>
|
||
<el-table
|
||
:data="item.list"
|
||
style="width: 100%"
|
||
class="table mgt-20 mgb-20"
|
||
size="mini"
|
||
>
|
||
<el-table-column
|
||
prop="gift_id"
|
||
label="物品ID"
|
||
show-overflow-tooltip
|
||
sortable
|
||
/>
|
||
<el-table-column
|
||
prop="gift_name"
|
||
label="物品名称"
|
||
show-overflow-tooltip
|
||
sortable
|
||
/>
|
||
<el-table-column
|
||
prop="gift_url"
|
||
label="物品图片"
|
||
show-overflow-tooltip
|
||
sortable
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-image
|
||
:src="scope.row.gift_url"
|
||
style="width: 30px; height: 30px;vertical-align: middle;"
|
||
fit="cover"
|
||
></el-image>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="codes"
|
||
label="库存"
|
||
show-overflow-tooltip
|
||
sortable
|
||
:formatter="formTotal"
|
||
/>
|
||
<el-table-column
|
||
label="操作"
|
||
fixed="right"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
type="text"
|
||
size="small"
|
||
@click.stop="delItem(scope.$index, index)"
|
||
>删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<span class="ipt-tip">当前仅第一个物品有效！</span>
|
||
<el-button
|
||
size="mini"
|
||
@click="addItems(index)"
|
||
> 添加物品</el-button>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="显示数量"
|
||
prop="numCfg"
|
||
>
|
||
<el-input
|
||
v-model="item.numCfg"
|
||
type="textarea"
|
||
placeholder="1001-99"
|
||
></el-input>
|
||
<span class="ipt-tip">格式：物品id-数量, 使用回车分隔</span>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="显示已使用量"
|
||
prop="numList"
|
||
>
|
||
<el-input
|
||
:value="JSON.stringify(item.usedList) || '暂无'"
|
||
type="textarea"
|
||
placeholder="1001-99"
|
||
disabled
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="发放类型"
|
||
prop="type"
|
||
>
|
||
<el-select
|
||
v-model="item.type"
|
||
placeholder="请选择发放类型"
|
||
class="w100"
|
||
>
|
||
<el-option
|
||
label="永久发放"
|
||
:value="0"
|
||
/>
|
||
<el-option
|
||
label="按时段发放"
|
||
:value="1"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="发放配置"
|
||
prop="time"
|
||
>
|
||
<el-input
|
||
type="textarea"
|
||
v-model="item.time"
|
||
></el-input>
|
||
<span class="ipt-tip">配置格式： 开始时间-结束时间@数量限制，如: 1:00--2:00@99，永久发放则直接填数量</span>
|
||
<span class="ipt-tip">多条配置使用回车分隔</span>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="扩展配置"
|
||
prop="extraData"
|
||
>
|
||
<el-input
|
||
type="textarea"
|
||
v-model="item.extraData"
|
||
></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="platform_id">
|
||
<el-button
|
||
type="primary"
|
||
@click="saveGiftList(index)"
|
||
>保存</el-button>
|
||
<el-button
|
||
type="danger"
|
||
@click="delGiftList(index)"
|
||
>删除</el-button>
|
||
<el-tooltip
|
||
effect="dark"
|
||
content="物品使用量清零"
|
||
placement="top"
|
||
v-if="item._id"
|
||
>
|
||
<el-button @click="resetGiftList(index)">还原</el-button>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
|
||
<div
|
||
class="tip "
|
||
v-else
|
||
>
|
||
<placeholder />
|
||
</div>
|
||
|
||
<div
|
||
class="btn-group"
|
||
v-if="platform_id"
|
||
>
|
||
<el-button
|
||
class="mgt-20 w100"
|
||
@click="addList"
|
||
v-if="permEdit"
|
||
>新增</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- modal -->
|
||
<el-dialog
|
||
title="兑换物品"
|
||
:visible.sync="modalVisible"
|
||
:before-close="closeModal"
|
||
>
|
||
<el-scrollbar
|
||
style="height: 380px;"
|
||
class="scrollbar"
|
||
>
|
||
<el-table
|
||
:data="gifts"
|
||
style="width: 100%"
|
||
class="table mgt-20 mgb-20"
|
||
size="mini"
|
||
@selection-change="tableSelectionChange"
|
||
ref="giftsTable"
|
||
>
|
||
<el-table-column
|
||
type="selection"
|
||
width="55"
|
||
/>
|
||
<el-table-column
|
||
prop="gift_id"
|
||
label="物品ID"
|
||
show-overflow-tooltip
|
||
sortable
|
||
/>
|
||
<el-table-column
|
||
prop="gift_name"
|
||
label="物品名称"
|
||
show-overflow-tooltip
|
||
sortable
|
||
/>
|
||
<el-table-column
|
||
prop="gift_url"
|
||
label="物品图片"
|
||
show-overflow-tooltip
|
||
sortable
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-image
|
||
:src="scope.row.gift_url"
|
||
fit="cover"
|
||
style="width: 30px;height: 30px; vertical-align: middle;"
|
||
></el-image>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="codes"
|
||
label="数量"
|
||
show-overflow-tooltip
|
||
sortable
|
||
:formatter="formTotal"
|
||
/>
|
||
</el-table>
|
||
</el-scrollbar>
|
||
<div slot="footer">
|
||
<el-button
|
||
type="primary"
|
||
@click="saveItems"
|
||
>确定</el-button>
|
||
<el-button @click="closeModal">关闭</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
import {mapGetters} from 'vuex'
|
||
import {getGame} from '@/api/games'
|
||
import {
|
||
getGiftList,
|
||
addGiftList,
|
||
updateGiftList,
|
||
resetGiftList,
|
||
delGiftList,
|
||
getGifts,
|
||
} from '@/api/gift'
|
||
import getPageTitle from '@/utils/get-page-title'
|
||
import Placeholder from '@/components/Placeholder'
|
||
import {reject, Promise} from 'q'
|
||
|
||
export default {
|
||
name: 'GameDetailsGiftList',
|
||
data() {
|
||
return {
|
||
// common
|
||
uid: '',
|
||
type: 'normal',
|
||
platform_id: '',
|
||
platformsArr: [],
|
||
gameInfo: {},
|
||
permEdit: false,
|
||
permPublish: false,
|
||
hasList: false,
|
||
gifts: [],
|
||
multipleSelection: [],
|
||
// form
|
||
giftListRules: {
|
||
title: [
|
||
{required: true, message: '请填写兑换列表名称', trigger: 'blur'},
|
||
],
|
||
condition: [
|
||
{required: true, message: '请填写兑换条件', trigger: 'blur'},
|
||
{type: 'number', message: '达成条件必须是数字', trigger: 'blur'},
|
||
],
|
||
type: [{required: true, message: '请选择发放类型', trigger: 'blur'}],
|
||
time: [{required: true, message: '请填写发放配置', trigger: 'blur'}],
|
||
},
|
||
activeNames: [],
|
||
defaultList: {
|
||
game_id: '',
|
||
platform_id: '',
|
||
title: '',
|
||
cond_name: '',
|
||
condition: '',
|
||
list: [],
|
||
numList: {},
|
||
numCfg: '',
|
||
type: 0,
|
||
time: '',
|
||
extraData: ''
|
||
},
|
||
allGiftList: [],
|
||
// modal
|
||
modalVisible: false,
|
||
curList: 0,
|
||
}
|
||
},
|
||
components: {
|
||
Placeholder,
|
||
},
|
||
computed: {
|
||
...mapGetters(['userInfo']),
|
||
},
|
||
mounted() {
|
||
this.uid = this.$route.params.uid
|
||
this.type = this.$route.query.type ? this.$route.query.type : 'normal'
|
||
this.permEdit =
|
||
this.userInfo.permissions.includes(`${this.uid}-edit`) ||
|
||
this.userInfo.permissions.includes(`${this.uid}-publish`) ||
|
||
this.userInfo.permissions.includes(`games-writeable`)
|
||
this.permPublish =
|
||
this.userInfo.permissions.includes(`${this.uid}-publish`) ||
|
||
this.userInfo.permissions.includes(`games-writeable`)
|
||
this.getGameInfo(this.getGiftList)
|
||
},
|
||
methods: {
|
||
getGameInfo(cb) {
|
||
getGame({uid: this.uid})
|
||
.then(res => {
|
||
const {data} = res
|
||
if (data.errcode === 0) {
|
||
this.gameInfo = data.gameInfo
|
||
this.platformsArr = data.gameInfo.platforms
|
||
this.$route.meta.title = this.gameInfo.game_name
|
||
document.title = getPageTitle(this.gameInfo.game_name)
|
||
if (this.$route.query.platform_id) {
|
||
this.platform_id = this.$route.query.platform_id
|
||
} else {
|
||
this.platform_id = this.platformsArr[0]
|
||
? this.platformsArr[0].platform.platform_id
|
||
: ''
|
||
}
|
||
this.defaultList.game_id = this.gameInfo.game_id
|
||
this.defaultList.platform_id = this.platform_id
|
||
if (cb && cb instanceof Function) cb()
|
||
this.getGifts({game_id: this.gameInfo.game_id})
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
})
|
||
},
|
||
getGifts(params) {
|
||
getGifts(params)
|
||
.then(res => {
|
||
const {data} = res
|
||
this.gifts = data.result
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
})
|
||
},
|
||
getGiftList() {
|
||
getGiftList({
|
||
uid: this.uid,
|
||
platform_id: this.platform_id,
|
||
game_id: this.gameInfo.game_id,
|
||
})
|
||
.then(res => {
|
||
const data = res.data
|
||
if (data.errcode === 0) {
|
||
this.allGiftList = data.result
|
||
|
||
this.allGiftList.map(list => {
|
||
// 提取物品 _id
|
||
list.itemsId = []
|
||
list.list.map(item => {
|
||
list.itemsId.push(item._id)
|
||
})
|
||
|
||
// 整合物品显示数量
|
||
list.numCfg = ''
|
||
if (JSON.stringify(list.numList) !== '{}') {
|
||
for (const key in list.numList) {
|
||
if (list.numList.hasOwnProperty(key)) {
|
||
const val = list.numList[key]
|
||
list.numCfg += `${key}-${val}\n`
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
this.allGiftList = JSON.parse(JSON.stringify(this.allGiftList))
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
})
|
||
},
|
||
changePlatform() {
|
||
this.getGiftList()
|
||
},
|
||
addList() {
|
||
const defaultList = JSON.parse(JSON.stringify(this.defaultList))
|
||
this.activeNames.push(this.allGiftList.length)
|
||
this.allGiftList.push(defaultList)
|
||
},
|
||
delGiftList(index) {
|
||
this.$confirm('是否要删除该兑换列表?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
})
|
||
.then(() => {
|
||
delGiftList({
|
||
uid: this.uid,
|
||
_id: this.allGiftList[index]._id,
|
||
})
|
||
.then(res => {
|
||
const data = res.data
|
||
if (data.errcode === 0) {
|
||
this.$message.success('成功删除兑换列表！')
|
||
this.allGiftList.splice(index, 1)
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
})
|
||
})
|
||
.catch(() => {
|
||
this.$message.info('已取消删除！')
|
||
})
|
||
},
|
||
async saveGiftList(index) {
|
||
const valid = await this.validForm(`giftList${index}`)
|
||
if (valid) {
|
||
const giftList = JSON.parse(JSON.stringify(this.allGiftList[index]))
|
||
|
||
const numCfg = giftList.numCfg.split('\n')
|
||
giftList.numList = {}
|
||
numCfg.map(cfg => {
|
||
const arr = cfg.split('-')
|
||
giftList.numList[arr[0]] = arr[1]
|
||
})
|
||
|
||
if (giftList._id) {
|
||
// 更新
|
||
const self = this
|
||
updateGiftList({
|
||
uid: this.uid,
|
||
_id: giftList._id,
|
||
game_id: giftList.game_id,
|
||
platform_id: giftList.platform_id,
|
||
title: giftList.title,
|
||
cond_name: giftList.cond_name,
|
||
condition: giftList.condition,
|
||
list: giftList.itemsId,
|
||
numList: giftList.numList,
|
||
usedList: giftList.usedList,
|
||
type: giftList.type,
|
||
time: giftList.time,
|
||
extraData: giftList.extraData
|
||
})
|
||
.then(res => {
|
||
const data = res.data
|
||
if (data.errcode === 0) {
|
||
this.$message.success('物品兑换列表修改成功！')
|
||
this.$refs[`giftList${index}`][0].clearValidate()
|
||
this.getGiftList()
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
})
|
||
} else {
|
||
// 新增
|
||
const self = this
|
||
addGiftList({
|
||
uid: this.uid,
|
||
_id: giftList._id,
|
||
game_id: giftList.game_id,
|
||
platform_id: this.platform_id,
|
||
title: giftList.title,
|
||
cond_name: giftList.cond_name,
|
||
condition: giftList.condition,
|
||
list: giftList.itemsId,
|
||
numList: giftList.numList,
|
||
usedList: giftList.usedList,
|
||
type: giftList.type,
|
||
time: giftList.time,
|
||
extraData: giftList.extraData
|
||
})
|
||
.then(res => {
|
||
const data = res.data
|
||
if (data.errcode === 0) {
|
||
this.$message.success('兑换物品列表新增成功！')
|
||
this.$refs[`giftList${index}`][0].clearValidate()
|
||
this.getGiftList()
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
})
|
||
}
|
||
} else {
|
||
this.$message.error('请按要求填写表单！')
|
||
}
|
||
},
|
||
async resetGiftList(index) {
|
||
this.$confirm('是否要还原兑换物品的使用量?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
})
|
||
.then(() => {
|
||
const giftList = JSON.parse(JSON.stringify(this.allGiftList[index]))
|
||
resetGiftList({
|
||
uid: this.uid,
|
||
_id: giftList._id,
|
||
usedList: {},
|
||
})
|
||
.then(res => {
|
||
const data = res.data
|
||
if (data.errcode === 0) {
|
||
this.$message.success('物品使用数量已还原！')
|
||
this.getGiftList()
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
})
|
||
})
|
||
.catch(() => {
|
||
this.$message.info('已取消还原！')
|
||
})
|
||
},
|
||
|
||
validForm(formName) {
|
||
return new Promise((resolve, reject) => {
|
||
this.$refs[formName][0].validate(valid => {
|
||
valid ? resolve(true) : reject()
|
||
})
|
||
})
|
||
},
|
||
addItems(idx) {
|
||
this.curList = idx
|
||
this.openModal()
|
||
setTimeout(() => {
|
||
this.$refs.giftsTable.clearSelection()
|
||
this.gifts.forEach(gift => {
|
||
if (this.allGiftList[idx].itemsId.includes(gift._id)) {
|
||
this.$refs.giftsTable.toggleRowSelection(gift)
|
||
}
|
||
})
|
||
}, 0)
|
||
},
|
||
delItem(itemIdx, listIdx) {
|
||
this.$confirm('是否要删除该兑换物品?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
})
|
||
.then(() => {
|
||
this.allGiftList[listIdx].list.splice(itemIdx, 1)
|
||
this.allGiftList[listIdx].itemsId.splice(itemIdx, 1)
|
||
this.$message.success('已成功删除！')
|
||
})
|
||
.catch(() => {
|
||
this.$message.info('已取消删除！')
|
||
})
|
||
},
|
||
// modal
|
||
openModal() {
|
||
this.modalVisible = true
|
||
},
|
||
closeModal() {
|
||
this.modalVisible = false
|
||
},
|
||
tableSelectionChange(val) {
|
||
this.multipleSelection = val
|
||
},
|
||
formTotal(row, column, cellValue, index) {
|
||
return cellValue.length || 0
|
||
},
|
||
saveItems() {
|
||
this.allGiftList[this.curList].list = JSON.parse(
|
||
JSON.stringify(this.multipleSelection)
|
||
)
|
||
this.allGiftList[this.curList].itemsId = this.multipleSelection.map(
|
||
item => {
|
||
return item._id
|
||
}
|
||
)
|
||
this.closeModal()
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
|
||
<style scoped>
|
||
.btn-group >>> .el-button + .el-button {
|
||
margin-left: 0;
|
||
}
|
||
.scrollbar >>> .el-scrollbar__wrap {
|
||
overflow-x: hidden;
|
||
}
|
||
</style>
|
||
|
||
|
||
|