132 lines
3.1 KiB
Vue
132 lines
3.1 KiB
Vue
<template>
|
|
<div class="game-card">
|
|
<div class="content clearfix">
|
|
<div class="l fl mgr-20">
|
|
<router-link :to="`/games/details/${info._id}/info`" class="dis-b icon-box">
|
|
<img :src="info.game_icon" class="icon img-fit">
|
|
</router-link>
|
|
</div>
|
|
<div class="r">
|
|
<h4 class="title c-t-2 fw-500 ell">
|
|
<router-link :to="`/games/details/${info._id}/info`">{{info.game_name}}</router-link>
|
|
</h4>
|
|
<span class="dis-b c-t-3 ell">{{info.game_name_en}}</span>
|
|
<span class="dis-b c-t-3 ell">{{info.game_id}}</span>
|
|
<span class="dis-b c-t-3 ell">{{info.game_type}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<span class="op">
|
|
<router-link :to="`/games/details/${info._id}/info`">详情</router-link>
|
|
</span>
|
|
<span class="op" v-if="permEdit">
|
|
<router-link :to="`/games/details/${info._id}/settings`">配置</router-link>
|
|
</span>
|
|
<span class="op" style="cursor: pointer" @click="del" v-if="permEdit">删除</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { delGame } from '@/api/games'
|
|
import { mapGetters } from 'vuex'
|
|
export default {
|
|
name: 'GameCard',
|
|
props: ['info'],
|
|
data() {
|
|
return {
|
|
permEdit: false
|
|
}
|
|
},
|
|
mounted() {
|
|
this.permEdit =
|
|
this.userInfo.permissions.includes(`${this.info._id}-edit`) ||
|
|
this.userInfo.permissions.includes(`${this.info._id}-publish`) ||
|
|
this.userInfo.permissions.includes(`games-writeable`)
|
|
},
|
|
computed: {
|
|
...mapGetters(['userInfo'])
|
|
},
|
|
methods: {
|
|
del() {
|
|
this.$confirm('此操作将删除游戏，是否要继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
delGame({
|
|
uid: this.info._id
|
|
})
|
|
.then(res => {
|
|
const { data } = res
|
|
if (data.errcode === 0) {
|
|
this.$message.success('游戏删除成功！')
|
|
this.$emit('change')
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.log(err)
|
|
})
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消删除'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.game-card {
|
|
margin-bottom: 30px;
|
|
border: 1px solid #ebeef5;
|
|
&:hover {
|
|
box-shadow: 1px 1px 5px #eee;
|
|
}
|
|
.content {
|
|
padding: 20px;
|
|
.l {
|
|
.icon-box {
|
|
width: 100px;
|
|
height: 100px;
|
|
overflow: hidden;
|
|
.icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.r {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100px;
|
|
justify-content: space-around;
|
|
.title {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
.footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 16px;
|
|
background-color: #ebeef5;
|
|
.op {
|
|
flex: 1;
|
|
display: block;
|
|
border-right: 1px solid #ccc;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
&:last-of-type {
|
|
border-right: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|