684 lines
19 KiB
Vue
684 lines
19 KiB
Vue
<template>
|
||
<div class="box">
|
||
<!-- 查询 -->
|
||
<div class="inquire">
|
||
<span>分区</span>
|
||
<el-select v-model="inquire.partitionId" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in inquire.partitionArr"
|
||
:key="item.id"
|
||
:label="item.desc"
|
||
:value="item.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<!-- 名称 -->
|
||
<div class="inquire">
|
||
<span class="demonstration">id</span>
|
||
<el-input v-model="inquire.id" placeholder="" class="input"></el-input>
|
||
</div>
|
||
<!-- 状态 -->
|
||
<div class="inquire">
|
||
<span>状态</span>
|
||
<el-select v-model="inquire.status" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in inquire.statusArr"
|
||
:key="item.status"
|
||
:label="item.desc"
|
||
:value="item.status"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<!-- 查询按钮 -->
|
||
<el-button
|
||
class="primary"
|
||
type="primary"
|
||
@click="
|
||
tableData = [];
|
||
currentPage = 1;
|
||
isFinished = false;
|
||
getData();
|
||
"
|
||
>查询</el-button
|
||
>
|
||
<!-- 重置按钮 -->
|
||
<el-button
|
||
class="primary"
|
||
type="primary"
|
||
@click="
|
||
inquire.partitionId = '';
|
||
inquire.id = '';
|
||
inquire.status = '';
|
||
getData();
|
||
"
|
||
>重置按钮</el-button
|
||
>
|
||
<!-- 新增按钮 -->
|
||
<el-button
|
||
class="primary"
|
||
type="primary"
|
||
@click="
|
||
dialogVisibleTitle = '新增';
|
||
dialogVisibleTitleType = 1;
|
||
dialogObj.checkedArr = [];
|
||
dialogObj.radio = '0';
|
||
dialogObj.imageUrl1 = '';
|
||
dialogObj.imageUrl2 = '';
|
||
dialogObj.imageUrl3 = '';
|
||
dialogObj.price = '';
|
||
dialogObj.renew = '';
|
||
dialogObj.originalPrice = '';
|
||
dialogObj.day = '';
|
||
dialogObj.sort = '';
|
||
dialogObj.radio2 = '1';
|
||
dialogVisible = true;
|
||
"
|
||
>新增</el-button
|
||
>
|
||
|
||
<!-- 表格 -->
|
||
<el-table
|
||
v-loading="loading"
|
||
:data="tableData"
|
||
ref="multipleTable"
|
||
@selection-change="handleSelectionChange"
|
||
border
|
||
style="width: 100%; margin-top: 25px"
|
||
>
|
||
<el-table-column prop="id" align="center" label="id" />
|
||
<el-table-column prop="type" align="center" label="是否免费">
|
||
<template v-slot="scope">{{
|
||
scope.row.type == 0 ? "免费" : scope.row.type == 1 ? "付费" : "自定义"
|
||
}}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="buyGoldPrice" align="center" label="购买价格" />
|
||
<el-table-column prop="renewGoldPrice" align="center" label="续费价格" />
|
||
<el-table-column prop="originalGoldPrice" align="center" label="原价" />
|
||
<el-table-column prop="buyHour" align="center" label="有效期" />
|
||
<el-table-column prop="seq" align="center" label="排序" />
|
||
<el-table-column prop="status" align="center" label="上架状态">
|
||
<template v-slot="scope">{{
|
||
scope.row.status == 1 ? "上架" : "下架"
|
||
}}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="url" align="center" label="图片">
|
||
<template v-slot="scope">
|
||
<el-image
|
||
style="width: 100px; height: 100px"
|
||
:src="scope.row.url"
|
||
:zoom-rate="1.1"
|
||
:preview-src-list="[scope.row.url]"
|
||
fit="scale-down"
|
||
preview-teleported="true"
|
||
hide-on-click-modal="true"
|
||
/>
|
||
<!-- <div
|
||
v-show="scope.row.url.toLowerCase().endsWith('.svga')"
|
||
:id="'guide' + scope.row.id"
|
||
class="game-guide"
|
||
>
|
||
{{ guideFn(scope.row.id, scope.row.url) }}
|
||
</div> -->
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="createTime" align="center" label="创建时间" />
|
||
<el-table-column prop="partitionDesc" align="center" label="分区" />
|
||
<el-table-column prop="adminUser" align="center" label="操作人" />
|
||
<el-table-column align="center" label="操作">
|
||
<template v-slot="scope">
|
||
<el-button
|
||
class="primary"
|
||
type="primary"
|
||
@click="
|
||
dialogVisibleTitle = '编辑';
|
||
dialogVisibleTitleType = 2;
|
||
dialogObj.checkedArr = checkedArrFun(scope.row.partitionFlag);
|
||
dialogObj.radio = scope.row.type.toString();
|
||
dialogObj.price = scope.row.buyGoldPrice;
|
||
dialogObj.renew = scope.row.renewGoldPrice;
|
||
dialogObj.originalPrice = scope.row.originalGoldPrice;
|
||
dialogObj.day = scope.row.buyHour;
|
||
dialogObj.sort = scope.row.seq;
|
||
dialogObj.radio2 = scope.row.status.toString();
|
||
dialogObj.imageUrl2 = scope.row.url;
|
||
dialogObj.imageUrl1 = '';
|
||
dialogObj.imageUrl3 = '';
|
||
dialogObj.id = scope.row.id;
|
||
dialogVisible = true;
|
||
"
|
||
>编辑</el-button
|
||
>
|
||
<!-- <el-button class="primary" type="primary" @click="del(scope.row)"
|
||
>删除</el-button
|
||
> -->
|
||
<!-- 删除弹出框 -->
|
||
<!-- <el-popover
|
||
v-model:visible="scope.row.visible1"
|
||
placement="top"
|
||
:width="160"
|
||
>
|
||
<p>确定要删除么?</p>
|
||
<div style="text-align: right; margin: 0">
|
||
<el-button size="small" @click="scope.row.visible1 = false">
|
||
取消
|
||
</el-button>
|
||
<el-button
|
||
size="small"
|
||
type="primary"
|
||
@click="pass(scope.row.id)"
|
||
>
|
||
确认
|
||
</el-button>
|
||
</div>
|
||
<template #reference>
|
||
<el-button
|
||
class="danger"
|
||
type="danger"
|
||
@click="scope.row.visible1 = true"
|
||
>删除</el-button
|
||
> -->
|
||
<!-- </template>
|
||
</el-popover> -->
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 分页 -->
|
||
<el-pagination
|
||
style="margin-top: 10px"
|
||
class="paginationClass"
|
||
v-model:current-page="currentPage"
|
||
v-model:page-size="pageSize"
|
||
:page-sizes="[1, 10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
|
||
layout="sizes, prev, pager, next"
|
||
:total="total"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
/>
|
||
|
||
<!-- 新增或编辑 -->
|
||
<el-dialog
|
||
v-model="dialogVisible"
|
||
:title="dialogVisibleTitle"
|
||
center
|
||
:width="500"
|
||
>
|
||
<div class="dialogBox">
|
||
<span>分区：</span>
|
||
<el-checkbox-group v-model="dialogObj.checkedArr">
|
||
<el-checkbox
|
||
v-for="(item, i) in inquire.partitionArr"
|
||
:key="i"
|
||
:label="item.id"
|
||
>{{ item.desc }}</el-checkbox
|
||
>
|
||
</el-checkbox-group>
|
||
</div>
|
||
<div class="dialogBox">
|
||
<span>是否免费：</span>
|
||
<div>
|
||
<el-radio v-model="dialogObj.radio" label="0">是</el-radio>
|
||
<el-radio v-model="dialogObj.radio" label="1">否</el-radio>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="dialogBox">
|
||
<span>房内图标：</span>
|
||
<el-upload
|
||
class="avatar-uploader"
|
||
action="/admin/tencent/cos/upload/file"
|
||
:show-file-list="false"
|
||
:on-success="handleAvatarSuccess"
|
||
:before-upload="beforeAvatarUpload"
|
||
:on-error="handleAvatarError"
|
||
>
|
||
<img
|
||
v-if="dialogObj.imageUrl1"
|
||
:src="dialogObj.imageUrl1"
|
||
class="avatar"
|
||
/>
|
||
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||
</el-upload>
|
||
</div> -->
|
||
<div class="dialogBox">
|
||
<span>购买价格：</span>
|
||
<el-input
|
||
v-model="dialogObj.price"
|
||
placeholder="如果是免费请写0"
|
||
class="input"
|
||
></el-input>
|
||
</div>
|
||
<div class="dialogBox">
|
||
<span>续费价格：</span>
|
||
<el-input
|
||
v-model="dialogObj.renew"
|
||
placeholder="如果是免费请写0"
|
||
class="input"
|
||
></el-input>
|
||
</div>
|
||
<div class="dialogBox">
|
||
<span>原价：</span>
|
||
<el-input
|
||
v-model="dialogObj.originalPrice"
|
||
placeholder="如果是免费请写0"
|
||
class="input"
|
||
></el-input>
|
||
</div>
|
||
<div class="dialogBox">
|
||
<span>有效天数：</span>
|
||
<el-input
|
||
v-model="dialogObj.day"
|
||
placeholder=""
|
||
class="input"
|
||
></el-input>
|
||
</div>
|
||
<div class="dialogBox">
|
||
<span>排序：</span>
|
||
<el-input
|
||
v-model="dialogObj.sort"
|
||
placeholder=""
|
||
class="input"
|
||
></el-input>
|
||
</div>
|
||
<div class="dialogBox">
|
||
<span>状态：</span>
|
||
<div>
|
||
<el-radio v-model="dialogObj.radio2" label="1">上架</el-radio>
|
||
<el-radio v-model="dialogObj.radio2" label="-1">下架</el-radio>
|
||
</div>
|
||
</div>
|
||
<div class="dialogBox">
|
||
<span>背景图片：</span>
|
||
<el-upload
|
||
class="avatar-uploader"
|
||
action="/admin/tencent/cos/upload/file"
|
||
:show-file-list="false"
|
||
:on-success="handleAvatarSuccess2"
|
||
:before-upload="beforeAvatarUpload"
|
||
:on-error="handleAvatarError"
|
||
>
|
||
<!-- 这里是原来的图片预览 -->
|
||
<el-image
|
||
style="width: 100px; height: 100px"
|
||
:src="dialogObj.imageUrl2"
|
||
:zoom-rate="1.1"
|
||
fit="scale-down"
|
||
preview-teleported="true"
|
||
hide-on-click-modal="true"
|
||
/>
|
||
<!-- <div
|
||
v-show="dialogObj.imageUrl2.toLowerCase().endsWith('.svga')"
|
||
id="guide2"
|
||
class="game-guide"
|
||
>
|
||
{{ guideFn2(dialogObj.imageUrl2) }}
|
||
</div> -->
|
||
</el-upload>
|
||
</div>
|
||
<!-- <div class="dialogBox">
|
||
<span>动效图片：</span>
|
||
<el-upload
|
||
class="avatar-uploader"
|
||
action="/admin/tencent/cos/upload/file"
|
||
:show-file-list="false"
|
||
:on-success="handleAvatarSuccess3"
|
||
:before-upload="beforeAvatarUpload"
|
||
:on-error="handleAvatarError"
|
||
>
|
||
<img
|
||
v-if="dialogObj.imageUrl3"
|
||
:src="dialogObj.imageUrl3"
|
||
class="avatar"
|
||
/>
|
||
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||
</el-upload>
|
||
</div> -->
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="addNeid(dialogVisibleTitleType)"
|
||
>确认</el-button
|
||
>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
listPartitionInfo,
|
||
page,
|
||
roomBackgroundAdd,
|
||
roomBackgroundUpdate,
|
||
} from "@/api/roomBackground/roomBackground";
|
||
// @ts-ignore
|
||
import { dateFormat } from "@/utils/system-helper";
|
||
// @ts-ignore
|
||
import { ElMessage, ElTable } from "element-plus";
|
||
import { ref, onMounted, nextTick } from "vue";
|
||
import SVGA from "svgaplayerweb";
|
||
export default {
|
||
name: "roomBackground",
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
//查询所需条件对象
|
||
inquire: {
|
||
partitionId: "",
|
||
partitionArr: [],
|
||
id: "",
|
||
status: "",
|
||
statusArr: [
|
||
{
|
||
status: "1",
|
||
desc: "上架",
|
||
},
|
||
{
|
||
status: "-1",
|
||
desc: "下架",
|
||
},
|
||
],
|
||
},
|
||
// 表格
|
||
tableData: [],
|
||
// 分页
|
||
total: 0, //总页数
|
||
currentPage: 1, //页码
|
||
pageSize: 10, //条数
|
||
isLoading: false, // 加载状态
|
||
isFinished: false, // 是否加载完成
|
||
// 删除相关
|
||
visible: false,
|
||
// 编辑新增
|
||
dialogVisible: false,
|
||
dialogVisibleTitle: "新增",
|
||
dialogVisibleTitleType: 1, //1新增2编辑
|
||
dialogObj: {
|
||
checkedArr: [],
|
||
radio: "1",
|
||
imageUrl1: "",
|
||
imageUrl2: "",
|
||
imageUrl3: "",
|
||
price: "",
|
||
renew: "",
|
||
originalPrice: "",
|
||
day: "",
|
||
sort: "",
|
||
radio2: "1",
|
||
id: null,
|
||
},
|
||
};
|
||
},
|
||
created() {
|
||
listPartitionInfo().then((res) => {
|
||
console.log(res);
|
||
this.inquire.partitionArr = res.data;
|
||
this.inquire.partitionId = this.inquire.partitionArr[0].id;
|
||
this.getData();
|
||
});
|
||
},
|
||
methods: {
|
||
guideFn(id, url) {
|
||
// 等待 DOM 渲染完成
|
||
this.$nextTick(() => {
|
||
const guideElement = document.getElementById("guide" + id);
|
||
if (guideElement && url.toLowerCase().endsWith(".svga")) {
|
||
let player = new SVGA.Player(guideElement);
|
||
let parser = new SVGA.Parser();
|
||
parser.load(url, (videoItem) => {
|
||
// 你的svga文件路径
|
||
player.setVideoItem(videoItem);
|
||
player.startAnimation(); // 开始动画
|
||
});
|
||
}
|
||
});
|
||
},
|
||
guideFn2(url) {
|
||
// 等待 DOM 渲染完成
|
||
this.$nextTick(() => {
|
||
const guideElement = document.getElementById("guide2");
|
||
if (guideElement && url.toLowerCase().endsWith(".svga")) {
|
||
let player = new SVGA.Player(guideElement);
|
||
let parser = new SVGA.Parser();
|
||
parser.load(url, (videoItem) => {
|
||
// 你的 svga 文件路径
|
||
player.setVideoItem(videoItem);
|
||
player.startAnimation(); // 开始动画
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 查询接口
|
||
getData() {
|
||
this.isLoading = true;
|
||
this.loading = true;
|
||
let time = this.inquire.time;
|
||
let startTime = "";
|
||
let endTime = "";
|
||
if (time && time.length > 0) {
|
||
startTime = dateFormat(this.inquire.time[0], "yyyy-MM-dd hh:mm:ss");
|
||
endTime = dateFormat(this.inquire.time[1], "yyyy-MM-dd hh:mm:ss");
|
||
}
|
||
page({
|
||
partitionId: this.inquire.partitionId,
|
||
id: this.inquire.id,
|
||
status: this.inquire.status,
|
||
page: this.currentPage,
|
||
pageSize: this.pageSize,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
this.tableData = res.data.rows;
|
||
this.total = res.data.total;
|
||
} else {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: res.message,
|
||
type: "error",
|
||
});
|
||
}
|
||
this.loading = false;
|
||
});
|
||
},
|
||
// 确认新增/确认编辑
|
||
addNeid(type) {
|
||
if (type == 1) {
|
||
var partitionIdNum = this.dialogObj.checkedArr.reduce(
|
||
(accumulator, currentValue) => {
|
||
return accumulator + currentValue;
|
||
},
|
||
0
|
||
);
|
||
roomBackgroundAdd({
|
||
partitionId: partitionIdNum,
|
||
type: this.dialogObj.radio,
|
||
buyGoldPrice: this.dialogObj.price,
|
||
renewGoldPrice: this.dialogObj.renew,
|
||
originalGoldPrice: this.dialogObj.originalPrice,
|
||
buyHour: this.dialogObj.day,
|
||
seq: this.dialogObj.sort,
|
||
status: this.dialogObj.radio2,
|
||
url: this.dialogObj.imageUrl2,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
this.dialogVisible = false;
|
||
this.getData();
|
||
} else {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: res.message,
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
var partitionIdNumEid = this.dialogObj.checkedArr.reduce(
|
||
(accumulator, currentValue) => {
|
||
return accumulator + currentValue;
|
||
},
|
||
0
|
||
);
|
||
roomBackgroundUpdate({
|
||
partitionId: partitionIdNumEid,
|
||
type: this.dialogObj.radio,
|
||
buyGoldPrice: this.dialogObj.price,
|
||
renewGoldPrice: this.dialogObj.renew,
|
||
originalGoldPrice: this.dialogObj.originalPrice,
|
||
buyHour: this.dialogObj.day,
|
||
seq: this.dialogObj.sort,
|
||
status: this.dialogObj.radio2,
|
||
url: this.dialogObj.imageUrl2,
|
||
id: this.dialogObj.id,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
this.dialogVisible = false;
|
||
this.getData();
|
||
} else {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: res.message,
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
checkedArrFun(num) {
|
||
const arr = this.inquire.partitionArr
|
||
.filter((p) => {
|
||
return num == 0 || p.id == (p.id & num);
|
||
})
|
||
.map((p) => p.id);
|
||
return arr;
|
||
},
|
||
handleAvatarSuccess(res, file) {
|
||
console.log(file);
|
||
// this.operation.imageUrl1 = URL.createObjectURL();
|
||
this.dialogObj.imageUrl1 = file.response.data;
|
||
ElMessage({
|
||
showClose: true,
|
||
message: "上传成功！",
|
||
type: "success",
|
||
});
|
||
},
|
||
handleAvatarSuccess2(res, file) {
|
||
console.log(file);
|
||
// this.operation.imageUrl1 = URL.createObjectURL();
|
||
this.dialogObj.imageUrl2 = file.response.data;
|
||
ElMessage({
|
||
showClose: true,
|
||
message: "上传成功！",
|
||
type: "success",
|
||
});
|
||
},
|
||
handleAvatarSuccess3(res, file) {
|
||
console.log(file);
|
||
// this.operation.imageUrl1 = URL.createObjectURL();
|
||
this.dialogObj.imageUrl3 = file.response.data;
|
||
ElMessage({
|
||
showClose: true,
|
||
message: "上传成功！",
|
||
type: "success",
|
||
});
|
||
},
|
||
beforeAvatarUpload() {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: "上传中~",
|
||
type: "warning",
|
||
});
|
||
},
|
||
handleAvatarError() {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: "上传失败！",
|
||
type: "error",
|
||
});
|
||
},
|
||
// 分页导航
|
||
handleSizeChange() {
|
||
this.getData();
|
||
},
|
||
handleCurrentChange() {
|
||
this.getData();
|
||
},
|
||
},
|
||
mounted() {},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.box {
|
||
padding-top: 20px;
|
||
background: #ecf0f5;
|
||
.inquire {
|
||
display: inline-block;
|
||
margin-right: 20px;
|
||
span {
|
||
margin-right: 10px;
|
||
}
|
||
.input {
|
||
width: 180px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.dialogTableVisibleBut {
|
||
display: block;
|
||
margin: 30px 0 0 830px;
|
||
}
|
||
.paginationClass {
|
||
margin: 15px 0 5px 0px;
|
||
}
|
||
}
|
||
.selectBox {
|
||
display: flex;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.selectBoxImg {
|
||
height: 150px;
|
||
}
|
||
.pagination {
|
||
margin: 10px auto 10px;
|
||
position: relative;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.pagination_in {
|
||
text-align: center;
|
||
}
|
||
.dialogBox {
|
||
width: 100%;
|
||
// height: 50px;
|
||
// line-height: 50px;
|
||
display: flex;
|
||
align-items: baseline;
|
||
margin-bottom: 20px;
|
||
.input {
|
||
width: 50%;
|
||
}
|
||
.selectBox {
|
||
display: flex;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.selectBoxImg {
|
||
height: 150px;
|
||
}
|
||
}
|
||
.game-guide {
|
||
width: 100px;
|
||
height: 100px;
|
||
overflow: hidden;
|
||
// left: 50%;
|
||
// top: 50%;
|
||
// transform: translate(-50%,-50%);
|
||
canvas {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
}
|
||
</style>
|