share-lib
This commit is contained in:
yulixing
parent
a70c57a97e
commit
bb82d0e95c
25
src/api/lib.js
Normal file
25
src/api/lib.js
Normal file
@ -0,0 +1,25 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getMaterials(params) {
|
||||
return request({
|
||||
url: '/games/lib/list',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function saveMaterials(data) {
|
||||
return request({
|
||||
url: '/games/lib/save',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function delMaterials(data) {
|
||||
return request({
|
||||
url: '/games/lib/del',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
600
src/components/ShareLib/index.vue
Normal file
600
src/components/ShareLib/index.vue
Normal file
@ -0,0 +1,600 @@
|
||||
<template>
|
||||
<el-tabs type="border-card">
|
||||
<!-- 分享图 -->
|
||||
<el-tab-pane label="分享图">
|
||||
<el-row
|
||||
:gutter="24"
|
||||
class="mgb-20"
|
||||
>
|
||||
<el-col :span="24">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="selectAllImgs"
|
||||
v-if="imgAdmin"
|
||||
>全选</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="deselectImgs"
|
||||
v-if="imgAdmin && imgsSelected.length > 0"
|
||||
plain
|
||||
>取消</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
@click="delImgs"
|
||||
v-if="imgAdmin"
|
||||
>删除</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="adminImgs"
|
||||
>{{imgAdminText}}</el-button>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row
|
||||
:gutter="24"
|
||||
class="mgt-20 mgb-20"
|
||||
>
|
||||
<el-col :span="4">
|
||||
<div class="img-box uploader-box">
|
||||
<el-upload
|
||||
class="uploader img"
|
||||
action="/api/common/upload"
|
||||
:show-file-list="false"
|
||||
:on-success="uploadSuccess"
|
||||
:on-error="uploadErr"
|
||||
:headers="{
|
||||
authorization: 'Bearer ' + token
|
||||
}"
|
||||
name="image-file"
|
||||
:data="{
|
||||
sub_path: '/share-images/',
|
||||
file_type: 'share_images'
|
||||
}"
|
||||
>
|
||||
<i class="el-icon-plus uploader-icon" />
|
||||
</el-upload>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col
|
||||
:span="4"
|
||||
v-for="(item, index) in imgList"
|
||||
:key="index"
|
||||
>
|
||||
<div
|
||||
class="img-box"
|
||||
@click="clickImg(index)"
|
||||
:class="imgsSelected.includes(index) ? 'active' : ''"
|
||||
>
|
||||
<el-image
|
||||
class="img"
|
||||
:src="item.url"
|
||||
fit="cover"
|
||||
></el-image>
|
||||
<svg-icon
|
||||
class="icon-del"
|
||||
icon-class="close"
|
||||
@click.stop="delImg(index)"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row
|
||||
:gutter="24"
|
||||
class="mgt-20 mgb-20"
|
||||
>
|
||||
<el-col
|
||||
:span="24"
|
||||
class="al-r"
|
||||
>
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="imgsNum"
|
||||
:current-page="imgCurrentPage"
|
||||
:page-size="imgPageSize"
|
||||
@size-change="imgSizeChange"
|
||||
@current-change="imgPageChange"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-tab-pane>
|
||||
<!-- 分享图END -->
|
||||
|
||||
<!-- 分享语 -->
|
||||
<el-tab-pane label="分享语">
|
||||
<el-row
|
||||
:gutter="24"
|
||||
class="mgb-20"
|
||||
>
|
||||
<el-col :span="24">
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
v-if="textAdmin"
|
||||
@click="delTexts"
|
||||
>删除</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="adminText"
|
||||
>{{textAdminText}}</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row
|
||||
:gutter="24"
|
||||
class="mgt-20 mgb-20"
|
||||
>
|
||||
<el-col :span="24">
|
||||
<el-input
|
||||
placeholder="请输入分享语"
|
||||
v-model="tempText"
|
||||
>
|
||||
<el-button
|
||||
slot="append"
|
||||
@click="addText"
|
||||
> 添加</el-button>
|
||||
</el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row
|
||||
:gutter="24"
|
||||
class="mgt-20 mgb-20"
|
||||
>
|
||||
<el-col :span="24">
|
||||
<el-table
|
||||
ref="textTable"
|
||||
:data="textList"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
size="mini"
|
||||
@selection-change="textTableSelectionChange"
|
||||
@row-click="textRowClick"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="分享语"
|
||||
prop="text"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
@click="delText(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row
|
||||
:gutter="24"
|
||||
class="mgt-20 mgb-20"
|
||||
>
|
||||
<el-col
|
||||
:span="24"
|
||||
class="al-r"
|
||||
>
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="textsNum"
|
||||
:current-page="textCurrentPage"
|
||||
:page-size="textPageSize"
|
||||
@size-change="textSizeChange"
|
||||
@current-change="textPageChange"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-tab-pane>
|
||||
<!-- 分享语 END -->
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getToken } from '@/utils/auth'
|
||||
import { getMaterials, saveMaterials, delMaterials } from '@/api/lib'
|
||||
import { Promise, reject } from 'q'
|
||||
export default {
|
||||
name: 'ShareLib',
|
||||
data() {
|
||||
return {
|
||||
// common
|
||||
token: '',
|
||||
selectedData: {
|
||||
imgs: [],
|
||||
texts: []
|
||||
},
|
||||
// share_img
|
||||
imgAdminText: '管理',
|
||||
imgAdmin: false,
|
||||
imgList: [],
|
||||
imgsNum: 0,
|
||||
imgCurrentPage: 1,
|
||||
imgPageSize: 29,
|
||||
imgsSelected: [], //选中图片的Index
|
||||
imgMultiSelect: true,
|
||||
|
||||
// share_word
|
||||
textList: [
|
||||
{
|
||||
text:
|
||||
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae quae alias ipsam magnam veritatis perspiciatis sunt, nihil illum, suscipit blanditiis, earum praesentium a! At nesciunt laborum, corrupti illo perspiciatis aspernatur?'
|
||||
},
|
||||
{
|
||||
text:
|
||||
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae quae alias ipsam magnam veritatis perspiciatis sunt, nihil illum, suscipit blanditiis, earum praesentium a! At nesciunt laborum, corrupti illo perspiciatis aspernatur?'
|
||||
},
|
||||
{
|
||||
text:
|
||||
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae quae alias ipsam magnam veritatis perspiciatis sunt, nihil illum, suscipit blanditiis, earum praesentium a! At nesciunt laborum, corrupti illo perspiciatis aspernatur?'
|
||||
}
|
||||
],
|
||||
textsNum: 0,
|
||||
textAdmin: false,
|
||||
textAdminText: '管理',
|
||||
tempText: '',
|
||||
textsSelected: [],
|
||||
textCurrentPage: 1,
|
||||
textPageSize: 20
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.token = getToken()
|
||||
this.getImgs()
|
||||
this.getTexts()
|
||||
},
|
||||
methods: {
|
||||
//common
|
||||
exportData() {
|
||||
// TODO: $emit 传出选中数据
|
||||
},
|
||||
getMaterials(data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getMaterials(data)
|
||||
.then(res => {
|
||||
const data = res.data
|
||||
data.errcode === 0 ? resolve(data) : reject(data.errmsg)
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
saveMaterials(data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
saveMaterials(data)
|
||||
.then(res => {
|
||||
const data = res.data
|
||||
data.errcode === 0 ? resolve(data) : reject(data.errmsg)
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
delMaterials(data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
delMaterials(data)
|
||||
.then(res => {
|
||||
const data = res.data
|
||||
data.errcode === 0 ? resolve(data) : reject(data.errmsg)
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
// share_img
|
||||
getImgs() {
|
||||
this.getMaterials({
|
||||
type: 'image',
|
||||
currentPage: this.imgCurrentPage,
|
||||
pageSize: this.imgPageSize
|
||||
})
|
||||
.then(data => {
|
||||
this.imgList = data.records
|
||||
this.imgsNum = data.total
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
uploadSuccess(res, file) {
|
||||
const url = res.url
|
||||
this.saveMaterials({
|
||||
type: 'image',
|
||||
url: url
|
||||
})
|
||||
.then(() => {
|
||||
this.$message.success('图片上传成功!')
|
||||
this.imgCurrentPage = 1
|
||||
this.getImgs()
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message.error('图片保存失败！')
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
uploadErr() {
|
||||
this.$message.error('图片上传失败！')
|
||||
},
|
||||
imgSizeChange(val) {},
|
||||
imgPageChange(val) {
|
||||
this.imgCurrentPage = val
|
||||
this.getImgs()
|
||||
},
|
||||
clickImg(index) {
|
||||
// 切换图片选中状态
|
||||
if (this.imgsSelected.includes(index)) {
|
||||
const idx = this.imgsSelected.indexOf(index)
|
||||
this.imgsSelected.splice(idx, 1)
|
||||
} else {
|
||||
this.imgsSelected.push(index)
|
||||
}
|
||||
const selectedImgs = []
|
||||
this.imgsSelected.map(item => {
|
||||
selectedImgs.push(this.imgList[item])
|
||||
})
|
||||
this.selectedData.imgs = selectedImgs
|
||||
},
|
||||
adminImgs() {
|
||||
if (this.imgAdmin) {
|
||||
this.imgAdmin = false
|
||||
this.imgAdminText = '管理'
|
||||
} else {
|
||||
this.imgAdmin = true
|
||||
this.imgAdminText = '关闭'
|
||||
}
|
||||
},
|
||||
selectAllImgs() {
|
||||
const selectAllImgs = []
|
||||
for (let i = 0; i < this.imgList.length; i++) {
|
||||
selectAllImgs.push(i)
|
||||
}
|
||||
this.imgsSelected = selectAllImgs
|
||||
},
|
||||
deselectImgs() {
|
||||
this.imgsSelected = []
|
||||
},
|
||||
delImgs() {
|
||||
this.$confirm(
|
||||
`是否删除选中的${this.imgsSelected.length}的张图片？`,
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
const ids = this.selectedData.imgs.map(item => {
|
||||
return item._id
|
||||
})
|
||||
|
||||
this.delMaterials({
|
||||
ids: ids
|
||||
})
|
||||
.then(data => {
|
||||
this.$message.success('删除成功!')
|
||||
this.imgCurrentPage = 1
|
||||
this.getImgs()
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.info('已取消删除！')
|
||||
})
|
||||
},
|
||||
delImg(index) {
|
||||
this.$confirm(`是否删除选中图片？`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
const ids = [this.imgList[index]._id]
|
||||
this.delMaterials({
|
||||
ids: ids
|
||||
})
|
||||
.then(data => {
|
||||
this.$message.success('删除成功!')
|
||||
this.imgCurrentPage = 1
|
||||
this.getImgs()
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.info('已取消删除！')
|
||||
})
|
||||
},
|
||||
//share_word
|
||||
getTexts() {
|
||||
this.getMaterials({
|
||||
type: 'text',
|
||||
currentPage: this.imgCurrentPage,
|
||||
pageSize: this.imgPageSize
|
||||
})
|
||||
.then(data => {
|
||||
this.textList = data.records
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
adminText() {
|
||||
if (this.textAdmin) {
|
||||
this.textAdmin = false
|
||||
this.textAdminText = '管理'
|
||||
} else {
|
||||
this.textAdmin = true
|
||||
this.textAdminText = '关闭'
|
||||
}
|
||||
},
|
||||
textTableSelectionChange(val) {
|
||||
this.textsSelected = val
|
||||
this.selectedData.text = val
|
||||
console.log('change')
|
||||
},
|
||||
textRowClick(row, column, event) {
|
||||
this.$refs.textTable.toggleRowSelection(row)
|
||||
},
|
||||
delText(row) {
|
||||
this.$confirm(`是否删除选中的分享语？`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
this.delMaterials({
|
||||
ids: [row._id]
|
||||
})
|
||||
.then(data => {
|
||||
this.$message.success('删除成功!')
|
||||
this.textCurrentPage = 1
|
||||
this.getTexts()
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.info('已取消删除！')
|
||||
})
|
||||
},
|
||||
delTexts() {
|
||||
this.$confirm(
|
||||
`是否删除选中的${this.imgsSelected.length}的条分享语？`,
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
const ids = this.textsSelected.map(item => {
|
||||
return item._id
|
||||
})
|
||||
this.delMaterials({
|
||||
ids: ids
|
||||
})
|
||||
.then(data => {
|
||||
this.$message.success('删除成功!')
|
||||
this.textCurrentPage = 1
|
||||
this.getTexts()
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
this.$message.info('已取消删除！')
|
||||
})
|
||||
},
|
||||
addText() {
|
||||
if (!this.tempText) {
|
||||
this.$message.error('文本为空，不能添加！')
|
||||
return
|
||||
}
|
||||
|
||||
this.saveMaterials({
|
||||
type: 'text',
|
||||
text: this.tempText
|
||||
})
|
||||
.then(() => {
|
||||
this.$message.success('分享语保存成功!')
|
||||
this.tempText = ''
|
||||
this.textCurrentPage = 1
|
||||
this.getTexts()
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message.error('分享语保存成功！')
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
textSizeChange(val) {},
|
||||
textPageChange(val) {
|
||||
this.textCurrentPage = val
|
||||
this.getTexts()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.img-box {
|
||||
position: relative;
|
||||
padding: 50% 50%; /*宽高2：1*/
|
||||
margin-bottom: 24px;
|
||||
|
||||
.img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.icon-del {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
cursor: pointer;
|
||||
}
|
||||
&:hover .icon-del {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.active {
|
||||
outline: 3px solid #409eff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.uploader-box >>> .el-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.uploader-box >>> .uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 50%;
|
||||
line-height: 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -30,6 +30,12 @@ const gamesRouter = {
|
||||
name: 'GamePlatforms',
|
||||
meta: { title: '平台管理' }
|
||||
},
|
||||
{
|
||||
path: 'lib',
|
||||
component: () => import('@/views/games/lib'), // Parent router-view
|
||||
name: 'GameLib',
|
||||
meta: { title: '素材管理' }
|
||||
},
|
||||
{
|
||||
path: 'details/:uid?',
|
||||
component: () => import('@/views/games/details/index'), // Parent router-view
|
||||
|
||||
@ -79,6 +79,12 @@
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clear:after {
|
||||
content: '';
|
||||
display: table; // 也可以是'block'，或者是'list-item'
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* 背景 */
|
||||
.bg-fff {
|
||||
background-color: #fff;
|
||||
|
||||
47
src/views/games/lib.vue
Normal file
47
src/views/games/lib.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<share-lib />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import ShareLib from '@/components/ShareLib'
|
||||
|
||||
export default {
|
||||
name: 'GameLib',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
components: {
|
||||
ShareLib
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.uploader-box >>> .uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 198px;
|
||||
height: 198px;
|
||||
line-height: 198px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.uploader-box >>> .uploader-icon {
|
||||
width: 198px;
|
||||
height: 198px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user