op-admin/pikachu-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

游戏详情页改版 平台管理

Browse Source
This commit is contained in:
yulixing 2019-05-27 19:57:22 +08:00
parent 6004ac2ac3
commit a3ddb3673f
8 changed files with 859 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/api/platforms.js Normal file
View File

@ -0,0 +1,25 @@
import request from '@/utils/request'
export function getPlatformList() {
return request({
url: '/games/platforms/list',
method: 'get'
})
}
export function savePlatform(data) {
return request({
url: '/games/platforms/save',
method: 'post',
data
})
}
export function editPlatform(data) {
return request({
url: '/games/platforms/edit',
method: 'post',
data
})
}

1
src/icons/svg/close.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1558935733708" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1985" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M176.662 817.173c-8.19 8.471-7.96 21.977 0.51 30.165 8.472 8.19 21.978 7.96 30.166-0.51l618.667-640c8.189-8.472 7.96-21.978-0.511-30.166-8.471-8.19-21.977-7.96-30.166 0.51l-618.666 640z" fill="" p-id="1986"></path><path d="M795.328 846.827c8.19 8.471 21.695 8.7 30.166 0.511 8.471-8.188 8.7-21.694 0.511-30.165l-618.667-640c-8.188-8.471-21.694-8.7-30.165-0.511-8.471 8.188-8.7 21.694-0.511 30.165l618.666 640z" fill="" p-id="1987"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 828 B

6
src/router/modules/games.js
View File

@ -24,6 +24,12 @@ const gamesRouter = {
name: 'GameSettings',
meta: { title: '配置项管理' }
},
{
path: 'platforms',
component: () => import('@/views/games/platforms'), // Parent router-view
name: 'GamePlatforms',
meta: { title: '平台管理' }
},
{
path: 'details/:uid?',
component: () => import('@/views/games/details/index'), // Parent router-view

117
src/utils/request.js
View File

@ -28,60 +28,73 @@ service.interceptors.request.use(
}
)
// // response interceptor
// service.interceptors.response.use(
// /**
// * If you want to get http information such as headers or status
// * Please return response => response
// */
// response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
// /**
// * Determine the request status by custom code
// * Here is just an example
// * You can also judge the status by HTTP Status Code
// */
// response => {
// const res = response.data
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const { data } = response
// // if the custom code is not 20000, it is judged as an error.
// if (res.code !== 20000) {
// Message({
// message: res.message || 'error',
// type: 'error',
// duration: 5 * 1000
// })
if (data.errcode !== 0) {
Message({
message: data.errmsg || 'error',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(data.errmsg || 'error')
} else {
return response
}
// // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// // to re-login
// MessageBox.confirm(
// 'You have been logged out, you can cancel to stay on this page, or log in again',
// 'Confirm logout',
// {
// confirmButtonText: 'Re-Login',
// cancelButtonText: 'Cancel',
// type: 'warning'
// }
// ).then(() => {
// store.dispatch('user/resetToken').then(() => {
// location.reload()
// })
// })
// }
// return Promise.reject(res.message || 'error')
// } else {
// return res
// }
// },
// error => {
// console.log('err' + error) // for debug
// Message({
// message: error.message,
// type: 'error',
// duration: 5 * 1000
// })
// return Promise.reject(error)
// }
// )
// const res = response.data
// if the custom code is not 20000, it is judged as an error.
// if (res.code !== 20000) {
// Message({
// message: res.message || 'error',
// type: 'error',
// duration: 5 * 1000
// })
// // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// // to re-login
// MessageBox.confirm(
// 'You have been logged out, you can cancel to stay on this page, or log in again',
// 'Confirm logout',
// {
// confirmButtonText: 'Re-Login',
// cancelButtonText: 'Cancel',
// type: 'warning'
// }
// ).then(() => {
// store.dispatch('user/resetToken').then(() => {
// location.reload()
// })
// })
// }
// return Promise.reject(res.message || 'error')
// } else {
// return res
// }
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service

282
src/views/games/details/info.del.vue Normal file
View File

@ -0,0 +1,282 @@
<template>
<div class="main-content">
<el-form ref="gameForm" :model="gameForm" :rules="rules" label-width="100px" style="width: 60%">
<el-form-item label="游戏名称" prop="game_name">
<el-input v-model="gameForm.game_name"/>
</el-form-item>
<el-form-item label="英文名称" prop="game_name_en">
<el-input v-model="gameForm.game_name_en"/>
</el-form-item>
<el-form-item label="游戏图标" prop="game_icon" class="uploader-box">
<el-upload
class="uploader"
action="/api/common/upload"
:show-file-list="false"
:on-success="uploadSuccess"
:on-error="uploadErr"
name="image-file"
:data="{
sub_path: '/ghost/app/',
file_type: 'icon_img'
}"
>
<img v-if="gameForm.game_icon" :src="gameForm.game_icon" class="uploader-img">
<i v-else class="el-icon-plus uploader-icon"/>
</el-upload>
</el-form-item>
<el-form-item label="游戏 ID" prop="game_id">
<el-input v-model="gameForm.game_id"/>
</el-form-item>
<el-form-item label="App ID" prop="app_id">
<el-input v-model="gameForm.app_id"/>
</el-form-item>
<el-form-item label="平台" prop="platform">
<el-select v-model="gameForm.platform" placeholder="请选择平台" style="width: 100%">
<el-option
v-for="(item, index) in platform"
:key="index"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="类型" prop="game_type">
<el-select v-model="gameForm.game_type" placeholder="请选择活动区域" style="width: 100%">
<el-option
v-for="(item, index) in gameType"
:key="index"
:label="item.name"
:value="parseInt(item.value)"
/>
</el-select>
</el-form-item>
<el-form-item label="点击数" prop="click_count">
<el-input v-model="gameForm.click_count"/>
</el-form-item>
<el-form-item label="主推" prop="is_recommend">
<el-switch v-model="gameForm.is_recommend"/>
</el-form-item>
<el-form-item label="新游" prop="is_new">
<el-switch v-model="gameForm.is_new"/>
</el-form-item>
<el-form-item label="火爆" prop="is_hot">
<el-switch v-model="gameForm.is_hot"/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="gameForm.status" placeholder="请选择活动区域" style="width: 100%">
<el-option
v-for="(item, index) in statusList"
:key="index"
:label="item.name"
:value="parseInt(item.key)"
/>
</el-select>
</el-form-item>
<el-form-item label="备注" prop="comment">
<el-input v-model="gameForm.comment" type="textarea"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('gameForm')" v-if="permissionEdit">保存</el-button>
<el-button @click="goBack">返回</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import request from '@/utils/request'
import { mapGetters } from 'vuex'
export default {
name: 'GameDetailsInfo',
data() {
return {
permissionEdit: false,
uid: '',
gameType: [],
platform: [],
statusList: [],
gameForm: {
game_name: '',
game_name_en: '',
game_icon: '',
game_id: '',
app_id: '',
platform: '',
game_type: '',
click_count: 0,
is_recommend: false,
is_new: false,
is_hot: false,
status: 1,
comment: ''
},
rules: {
game_name: [
{ required: true, message: '请输入游戏名称', trigger: 'blur' }
],
game_name_en: [
{ required: true, message: '请输入游戏英文名称', trigger: 'blur' }
],
game_id: [
{ required: true, message: '请输入游戏 ID', trigger: 'blur' }
],
game_type: [
{ required: true, message: '请选择游戏类型', trigger: 'blur' }
],
click_count: [
{ required: true, message: '请输入点击数', trigger: 'blur' }
],
status: [{ required: true, message: '请选择游戏状态', trigger: 'blur' }]
}
}
},
computed: {
...mapGetters(['userInfo'])
},
mounted() {
this.uid = this.$route.params.uid
if (this.uid === 'new') {
this.permissionEdit =
this.userInfo.permissions.includes(`games-writeable`)
} else {
this.permissionEdit =
this.userInfo.permissions.includes(`${this.uid}-edit`) ||
this.userInfo.permissions.includes(`${this.uid}-publish`)
}
this.getPlatform()
this.getGameType()
this.getStatusList()
if (this.uid !== 'new') {
this.getData()
}
},
methods: {
getData() {
request({
url: '/games/list',
method: 'get',
params: {
_id: this.uid
}
}).then(res => {
const { data } = res
if (data.errcode !== 0) {
this.$notify.error({
title: '错误',
message: data.errmsg
})
return
}
this.gameForm = data.gameList[0]
this.$route.meta.title = this.gameForm.game_name
})
},
getPlatform() {
request({
url: '/games/platform',
method: 'get'
}).then(res => {
const { data } = res
if (data.errcode !== 0) {
this.$notify.error({
title: '错误',
message: data.errmsg
})
return
}
this.platform = data.platform
})
},
getGameType() {
request({
url: '/games/type',
method: 'get'
}).then(res => {
const { data } = res
if (data.errcode !== 0) {
this.$notify.error({
title: '错误',
message: data.errmsg
})
return
}
this.gameType = data.gameType
})
},
getStatusList() {
request({
url: '/games/status',
method: 'get'
}).then(res => {
const { data } = res
if (data.errcode !== 0) {
this.$notify.error({
title: '错误',
message: data.errmsg
})
return
}
this.statusList = data.statusList
})
},
uploadSuccess(res, file) {
this.gameForm.game_icon = res.url
this.$message.success('图片上传成功！')
},
uploadErr() {
this.$message.error('图片上传失败！')
},
saveEdit() {
if (this.uid === 'new') {
request({
url: '/games/add',
method: 'post',
data: this.gameForm
}).then(res => {
const { data } = res
if (data.errcode !== 0) {
this.$message.error(data.errmsg)
return
}
this.$refs['gameForm'].clearValidate()
this.$message.success('已成功添加游戏！')
this.$route.params.uid = data.userInfo._id
this.$router.push(`/games/details/${data.userInfo._id}/info`)
})
} else {
request({
url: '/games/edit',
method: 'post',
data: this.gameForm
}).then(res => {
const { data } = res
if (data.errcode !== 0) {
this.$message.error(data.errmsg)
return
}
this.$refs['gameForm'].clearValidate()
this.$message.success('游戏信息保存成功！')
this.$router.push(`/games/details/${this.gameForm._id}/info`)
})
}
},
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.saveEdit()
console.log(this.gameForm)
} else {
this.$message.error('请按要求填写游戏信息！')
return false
}
})
},
goBack() {
this.$router.go(-1)
}
}
}
</script>

508
src/views/games/details/info.vue
View File

@ -1,118 +1,179 @@
<template>
<div class="main-content">
<el-form ref="gameForm" :model="gameForm" :rules="rules" label-width="100px" style="width: 60%">
<el-form-item label="游戏名称" prop="game_name">
<el-input v-model="gameForm.game_name"/>
</el-form-item>
<el-form-item label="英文名称" prop="game_name_en">
<el-input v-model="gameForm.game_name_en"/>
</el-form-item>
<el-form-item label="游戏图标" prop="game_icon" class="uploader-box">
<el-upload
class="uploader"
action="/api/common/upload"
:show-file-list="false"
:on-success="uploadSuccess"
:on-error="uploadErr"
name="image-file"
:data="{
sub_path: '/ghost/app/',
file_type: 'icon_img'
}"
>
<img v-if="gameForm.game_icon" :src="gameForm.game_icon" class="uploader-img">
<i v-else class="el-icon-plus uploader-icon"/>
</el-upload>
</el-form-item>
<el-form-item label="游戏 ID" prop="game_id">
<el-input v-model="gameForm.game_id"/>
</el-form-item>
<el-form-item label="App ID" prop="app_id">
<el-input v-model="gameForm.app_id"/>
</el-form-item>
<el-form-item label="平台" prop="platform">
<el-select v-model="gameForm.platform" placeholder="请选择平台" style="width: 100%">
<el-option
v-for="(item, index) in platform"
:key="index"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="类型" prop="game_type">
<el-select v-model="gameForm.game_type" placeholder="请选择活动区域" style="width: 100%">
<el-option
v-for="(item, index) in gameType"
:key="index"
:label="item.name"
:value="parseInt(item.value)"
/>
</el-select>
</el-form-item>
<el-form-item label="点击数" prop="click_count">
<el-input v-model="gameForm.click_count"/>
</el-form-item>
<el-form-item label="主推" prop="is_recommend">
<el-switch v-model="gameForm.is_recommend"/>
</el-form-item>
<el-form-item label="新游" prop="is_new">
<el-switch v-model="gameForm.is_new"/>
</el-form-item>
<el-form-item label="火爆" prop="is_hot">
<el-switch v-model="gameForm.is_hot"/>
</el-form-item>
<div style="width: 800px">
<!-- 模板选择 -->
<el-select v-model="template" placeholder="选择游戏，快速填充" class="w100">
<el-option
v-for="item in gameList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<!-- 游戏基础信息 -->
<el-form
ref="baseForm"
:model="baseForm"
:rules="baseFormRules"
label-width="100px"
class="form-box base-form"
>
<div class="form-box-bd">
<el-row :gutter="16">
<el-col :span="4">
<el-form-item prop="game_icon" class="uploader-box" label-width="0">
<el-upload
class="uploader"
action="/api/common/upload"
:show-file-list="false"
:on-success="(res, file, fileList)=> {return uploadSuccess(res, file, fileList, 'base')}"
:on-error="uploadErr"
name="image-file"
:data="{sub_path: '/game_icon/',file_type: 'game_icon'}"
>
<img v-if="baseForm.game_icon" :src="baseForm.game_icon" class="uploader-img">
<i v-else class="el-icon-plus uploader-icon"/>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="游戏名称" prop="game_name">
<el-input v-model="baseForm.game_name"/>
</el-form-item>
<el-form-item label="游戏英文名" prop="game_name_en">
<el-input v-model="baseForm.game_name_en"/>
</el-form-item>
<el-form-item label="游戏 ID" prop="game_id">
<el-input v-model="baseForm.game_id"/>
</el-form-item>
<el-form-item label="游戏类型" prop="game_type">
<el-select v-model="baseForm.game_id" class="w100">
<el-option
v-for="item in gameTypes"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary">保存游戏信息</el-button>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
<el-form-item label="状态" prop="status">
<el-select v-model="gameForm.status" placeholder="请选择活动区域" style="width: 100%">
<el-option
v-for="(item, index) in statusList"
:key="index"
:label="item.name"
:value="parseInt(item.key)"
/>
<!-- 平台信息 -->
<el-form
:ref="`platformForm${index}`"
:model="item"
:rules="platformFormRules"
label-width="100px"
class="form-box"
v-for="(item, index) in platformForm"
:key="index"
>
<div class="form-box-hd">
<span>{{`${item.platform.title}(${item.platform.id})`}}</span>
<svg-icon icon-class="close" class="icon-close" @click="delPlatform(index)"/>
</div>
<div class="form-box-bd">
<el-row :gutter="16">
<el-col :span="4">
<el-form-item prop="game_icon" class="uploader-box" label-width="0">
<el-upload
class="uploader"
action="/api/common/upload"
:show-file-list="false"
:on-success="(res, file, fileList)=> {return uploadSuccess(res, file, fileList, 'platform', index)}"
:on-error="uploadErr"
name="image-file"
:data="{sub_path: '/game_icon/',file_type: 'game_icon'}"
>
<img v-if="item.game_icon" :src="item.game_icon" class="uploader-img">
<i v-else class="el-icon-plus uploader-icon"/>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="AppID" prop="app_id">
<el-input v-model="item.app_id"/>
</el-form-item>
<el-form-item label="AppKey" prop="app_key">
<el-input v-model="item.app_key"/>
</el-form-item>
<el-form-item label="FTP 账号">
<el-input v-model="item.ftp.account" disabled/>
</el-form-item>
<el-form-item label="FTP 密码">
<el-input v-model="item.ftp.pwd" disabled/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="item.status" class="w100">
<el-option
v-for="item in status"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="点击数" prop="click_count">
<el-input v-model="item.click_count"/>
</el-form-item>
<el-form-item label="热度">
<el-checkbox v-model="item.is_recommend">主推</el-checkbox>
<el-checkbox v-model="item.is_new">新游</el-checkbox>
<el-checkbox v-model="item.is_hot">火爆</el-checkbox>
</el-form-item>
<el-form-item label="备注" prop="comment">
<el-input type="textarea" v-model="item.comment"/>
</el-form-item>
<el-form-item>
<el-button type="primary">保存平台信息</el-button>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
<el-button class="w100" @click="openModal">添加新平台</el-button>
</div>
<!-- modal -->
<el-dialog title="选择平台" :visible.sync="modalVisible" width="30%" :before-close="closeModal">
<el-form ref="modalForm" :rules="modalFormRules" :model="modalForm">
<el-select v-model="modalForm.platform" class="w100">
<el-option v-for="item in platforms" :key="item._id" :label="item.name" :value="item._id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="备注" prop="comment">
<el-input v-model="gameForm.comment" type="textarea"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('gameForm')" v-if="permissionEdit">保存</el-button>
<el-button @click="goBack">返回</el-button>
</el-form-item>
</el-form>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="modalVisible = false">取 消</el-button>
<el-button type="primary" @click="addPlatform">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import request from '@/utils/request'
import { getPlatformList } from '@/api/platforms'
import { mapGetters } from 'vuex'
export default {
name: 'GameDetailsInfo',
data() {
return {
permissionEdit: false,
// 组件信息
uid: '',
gameType: [],
platform: [],
statusList: [],
gameForm: {
game_name: '',
game_name_en: '',
game_icon: '',
game_id: '',
app_id: '',
platform: '',
game_type: '',
click_count: 0,
is_recommend: false,
is_new: false,
is_hot: false,
status: 1,
comment: ''
gameInfo: {},
// 模板选择
template: '',
gameList: [],
// 基础信息
baseForm: {
game_icon: ''
},
rules: {
baseFormRules: {
game_name: [
{ required: true, message: '请输入游戏名称', trigger: 'blur' }
],
@ -124,159 +185,140 @@ export default {
],
game_type: [
{ required: true, message: '请选择游戏类型', trigger: 'blur' }
]
},
gameTypes: [],
// 平台信息
status: [],
platformForm: [
{
game_icon: '',
app_id: '',
app_key: '',
status: '',
click_count: 0,
is_recommend: false,
is_new: false,
is_hot: false,
comment: '',
ftp: {
account: 'xxserasdfas',
pwd: '111111111111'
},
platform: {
title: '微信',
id: '6001'
}
},
{
game_icon: '',
app_id: '',
app_key: '',
status: '',
click_count: 0,
is_recommend: false,
is_new: false,
is_hot: false,
comment: '',
ftp: {
account: 'xxserasdfas',
pwd: '111111111111'
},
platform: {
title: '微信',
id: '6001'
}
}
],
platformFormRules: {
app_id: [{ required: true, message: '请输 AppID', trigger: 'blur' }],
app_key: [
{ required: true, message: '请输入 AppKey', trigger: 'blur' }
],
status: [
{ required: true, message: '请选择游戏状态', trigger: 'blur' }
],
click_count: [
{ required: true, message: '请输入点击数', trigger: 'blur' }
],
status: [{ required: true, message: '请选择游戏状态', trigger: 'blur' }]
}
]
},
// modal
modalVisible: false,
selectedPlatforms: [],
platforms: [],
modalForm: {},
modalFormRules: {}
}
},
computed: {
...mapGetters(['userInfo'])
},
mounted() {
this.uid = this.$route.params.uid
if (this.uid === 'new') {
this.permissionEdit =
this.userInfo.permissions.includes(`games-writeable`)
} else {
this.permissionEdit =
this.userInfo.permissions.includes(`${this.uid}-edit`) ||
this.userInfo.permissions.includes(`${this.uid}-publish`)
}
this.getPlatform()
this.getGameType()
this.getStatusList()
if (this.uid !== 'new') {
this.getData()
}
getPlatformList()
.then(res => {
const { data } = res
if (data.errcode === 0) {
this.platforms = data.platformList
}
})
.then(err => {
console.log(err)
})
},
methods: {
getData() {
request({
url: '/games/list',
method: 'get',
params: {
_id: this.uid
}
}).then(res => {
const { data } = res
if (data.errcode !== 0) {
this.$notify.error({
title: '错误',
message: data.errmsg
})
return
}
this.gameForm = data.gameList[0]
this.$route.meta.title = this.gameForm.game_name
})
},
getPlatform() {
request({
url: '/games/platform',
method: 'get'
}).then(res => {
const { data } = res
if (data.errcode !== 0) {
this.$notify.error({
title: '错误',
message: data.errmsg
})
return
}
this.platform = data.platform
})
},
getGameType() {
request({
url: '/games/type',
method: 'get'
}).then(res => {
const { data } = res
if (data.errcode !== 0) {
this.$notify.error({
title: '错误',
message: data.errmsg
})
return
}
this.gameType = data.gameType
})
},
getStatusList() {
request({
url: '/games/status',
method: 'get'
}).then(res => {
const { data } = res
if (data.errcode !== 0) {
this.$notify.error({
title: '错误',
message: data.errmsg
})
return
}
this.statusList = data.statusList
})
},
uploadSuccess(res, file) {
this.gameForm.game_icon = res.url
// 基础信息
uploadSuccess(res, file, fileList, type, index) {
if (type === 'base') {
this.baseForm.game_icon = res.url
console.log('base')
} else {
this.platformForm[index].game_icon = res.url
console.log('platform')
}
this.$message.success('图片上传成功！')
},
uploadErr() {
this.$message.error('图片上传失败！')
},
saveEdit() {
if (this.uid === 'new') {
request({
url: '/games/add',
method: 'post',
data: this.gameForm
}).then(res => {
const { data } = res
if (data.errcode !== 0) {
this.$message.error(data.errmsg)
return
}
this.$refs['gameForm'].clearValidate()
this.$message.success('已成功添加游戏！')
this.$route.params.uid = data.userInfo._id
this.$router.push(`/games/details/${data.userInfo._id}/info`)
})
} else {
request({
url: '/games/edit',
method: 'post',
data: this.gameForm
}).then(res => {
const { data } = res
if (data.errcode !== 0) {
this.$message.error(data.errmsg)
return
}
this.$refs['gameForm'].clearValidate()
this.$message.success('游戏信息保存成功！')
this.$router.push(`/games/details/${this.gameForm._id}/info`)
})
}
// 平台信息
delPlatform(index) {},
// modal
addPlatform() {
this.modalVisible = false
},
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.saveEdit()
console.log(this.gameForm)
} else {
this.$message.error('请按要求填写游戏信息！')
return false
}
})
openModal() {
this.modalVisible = true
},
goBack() {
this.$router.go(-1)
}
closeModal() {}
}
}
</script>
<style lang="scss" scoped>
.form-box {
margin: 20px 0;
border: 1px solid #dcdfe6;
border-radius: 4px;
overflow: hidden;
.form-box-hd {
position: relative;
padding: 10px 0;
text-align: center;
color: #606266;
border-bottom: 1px solid #dcdfe6;
.icon-close {
position: absolute;
right: 20px;
cursor: pointer;
}
}
.form-box-bd {
padding: 20px;
border-top: none;
}
}
</style>

34
src/views/games/details/settings/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="main-content p-game-settings">
<el-tabs tab-position="left" :value="active" :before-leave="handleLeave">
<el-tabs tab-position="left" v-model="active" :before-leave="handleLeave">
<el-tab-pane label="普通配置" name="normal">
<setting-panle type="normal" @change="handleChange"/>
</el-tab-pane>
@ -8,6 +8,13 @@
<setting-panle type="private" @change="handleChange"/>
</el-tab-pane>
</el-tabs>
<el-dialog title="提示" :visible.sync="modalVisible" width="30%">
<span>配置已修改，尚未保存，是否离开？</span>
<span slot="footer" class="dialog-footer">
<el-button @click="closeModal">取 消</el-button>
<el-button type="primary" @click="switchTab">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
@ -20,6 +27,9 @@ export default {
return {
changed: false,
active: 'normal',
modalVisible: false,
activeName: '',
oldActiveName: '',
}
},
components: {
@ -28,26 +38,26 @@ export default {
methods: {
handleLeave(activeName, oldActiveName) {
if (this.changed) {
this.$confirm('配置项已修改未保存，是否离开', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {})
.catch(() => {
return false
})
this.modalVisible = true
this.activeName = activeName
this.oldActiveName = oldActiveName
return false
}
},
handleChange(val) {
this.changed = val
},
openModal() {
this.modaleVisible = true
this.modalVisible = true
},
closeModal() {
this.modaleVisible = false
this.modalVisible = false
},
switchTab() {
this.changed = false
this.active = this.activeName
this.modalVisible = false
}
}
}
</script>

183
src/views/games/platforms.vue Normal file
View File

@ -0,0 +1,183 @@
<template>
<div class="app-container">
<!-- toolbar -->
<div class="toolbar clearfix">
<div class="l fl">
<el-button type="primary" @click="addPlatform" v-if="permissionWriteable">新增</el-button>
</div>
<div class="r fr">
<el-button type="primary" @click="refreshData">刷新</el-button>
</div>
</div>
<!-- table -->
<el-table
:data="tableData"
style="width: 100%"
class="table mgt-20 mgb-20"
v-loading="isLoaded"
@row-click="rowClick"
>
<el-table-column prop="name" label="名称" show-overflow-tooltip sortable/>
<el-table-column prop="name_en" label="英文名" show-overflow-tooltip sortable/>
<el-table-column prop="platform_id" label="ID" show-overflow-tooltip sortable/>
<el-table-column prop="comment" label="备注" show-overflow-tooltip sortable/>
<el-table-column prop="name" label="操作" fixed="right" width="126" v-if="permissionWriteable">
<template slot-scope="scope">
<el-button type="text" size="small" @click="editPlatform(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
<!-- modal -->
<el-dialog title="平台编辑" :visible.sync="modalVisible" :before-close="closeModal">
<el-form ref="modalForm" :model="modalForm" :rules="modalRules" label-width="80px">
<el-form-item label="名称" prop="name">
<el-input v-model="modalForm.name"/>
</el-form-item>
<el-form-item label="英文名" prop="name_en">
<el-input v-model="modalForm.name_en" :disabled="!isNew"/>
</el-form-item>
<el-form-item label="ID" prop="platform_id">
<el-input v-model="modalForm.platform_id" :disabled="!isNew"/>
</el-form-item>
<el-form-item label="备注" prop="comment">
<el-input type="textarea" v-model="modalForm.comment"/>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="closeModal">取 消</el-button>
<el-button type="primary" @click="saveEdit">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import request from '@/utils/request'
import { getPlatformList, savePlatform, editPlatform } from '@/api/platforms'
export default {
name: 'GamePlatforms',
data() {
return {
permissionWriteable: false,
// table
isLoaded: false,
tableData: [],
// modal
isNew: false,
modalVisible: false,
modalForm: {
name: '',
name_en: '',
platform_id: '',
comment: ''
},
modalRules: {
name: [{ required: true, message: '请输入平台名称', trigger: 'blur' }],
name_en: [
{ required: true, message: '请输入平台英文名', trigger: 'blur' }
],
platform_id: [
{ required: true, message: '请输入平台 ID', trigger: 'blur' }
]
}
}
},
computed: {
...mapGetters(['userInfo'])
},
mounted() {
this.getData()
this.permissionWriteable = this.userInfo.permissions.includes(
`settings-writeable`
)
},
methods: {
// toolbar
addPlatform() {
this.openModal(true)
},
async refreshData() {
this.isLoaded = true
await this.getData()
setTimeout(() => {
this.isLoaded = false
}, 1000)
},
// table
getData() {
getPlatformList()
.then(res => {
const { data } = res
this.tableData = data.platformList
})
.catch(err => {
console.log(err)
})
},
editPlatform(row) {
this.openModal(false, row)
},
rowClick(row, column, event) {
this.openModal(false, row)
},
// modal
openModal(isNew, data) {
if (isNew) {
this.isNew = true
this.modalForm = {
name: '',
name_en: '',
platform_id: '',
comment: ''
}
} else {
this.isNew = false
this.modalForm = JSON.parse(JSON.stringify(data))
}
this.modalVisible = true
},
closeModal() {
this.$refs['modalForm'].clearValidate()
this.modalVisible = false
},
saveEdit() {
this.$refs['modalForm'].validate(valid => {
if (valid) {
if (this.isNew) {
savePlatform(this.modalForm)
.then(res => {
const { data } = res
if (data.errcode === 0) {
this.$message.success('新增平台成功！')
this.closeModal()
this.refreshData()
}
})
.catch(err => {
console.log(err)
})
} else {
editPlatform(this.modalForm)
.then(res => {
const { data } = res
if (data.errcode === 0) {
this.$message.success('平台信息修改成功！')
this.closeModal()
this.refreshData()
}
})
.catch(err => {
console.log(err)
})
}
} else {
this.$message.error('请按要求填写平台信息！')
return false
}
})
}
}
}
</script>