完成房间背景和首页ui配置
This commit is contained in:
dragon
87
src/api/roomBackground/roomBackground.js
Normal file
87
src/api/roomBackground/roomBackground.js
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
import request from '@/utils/request';
|
||||||
|
import { genQueryParam } from '@/utils/maintainer';
|
||||||
|
import qs from 'qs';
|
||||||
|
|
||||||
|
// 地区接口
|
||||||
|
export const listPartitionInfo = query => {
|
||||||
|
return request({
|
||||||
|
url: '/partition/listPartitionInfo',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// ==============================================首页ui配置==============================================
|
||||||
|
// 配置
|
||||||
|
export const appUiSetting = query => {
|
||||||
|
return request({
|
||||||
|
url: '/appUiSetting',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 保存
|
||||||
|
export const appUiSettingSave = query => {
|
||||||
|
return request({
|
||||||
|
url: '/appUiSetting/save',
|
||||||
|
method: 'post',
|
||||||
|
data: query
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// ==============================================自定义背景==============================================
|
||||||
|
// 列表
|
||||||
|
export const page = query => {
|
||||||
|
return request({
|
||||||
|
url: '/admin/roomBackground/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 新增
|
||||||
|
export const roomBackgroundAdd = query => {
|
||||||
|
return request({
|
||||||
|
url: '/admin/roomBackground/add',
|
||||||
|
method: 'post',
|
||||||
|
params: query
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 编辑
|
||||||
|
export const roomBackgroundUpdate = query => {
|
||||||
|
return request({
|
||||||
|
url: '/admin/roomBackground/update',
|
||||||
|
method: 'post',
|
||||||
|
params: query
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// ==============================================自定义背景==============================================
|
||||||
|
// 列表
|
||||||
|
export const customPage = query => {
|
||||||
|
return request({
|
||||||
|
url: '/admin/roomBackground/custom/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 通过
|
||||||
|
export const customPass = query => {
|
||||||
|
return request({
|
||||||
|
url: '/admin/roomBackground/custom/pass',
|
||||||
|
method: 'post',
|
||||||
|
params: query
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 拒绝
|
||||||
|
export const customReject = query => {
|
||||||
|
return request({
|
||||||
|
url: '/admin/roomBackground/custom/reject',
|
||||||
|
method: 'post',
|
||||||
|
params: query
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 删除
|
||||||
|
export const customDel = query => {
|
||||||
|
return request({
|
||||||
|
url: '/admin/roomBackground/custom/del',
|
||||||
|
method: 'post',
|
||||||
|
params: query
|
||||||
|
});
|
||||||
|
};
|
||||||
565
src/views/roomBackground/appUiSet.vue
Normal file
565
src/views/roomBackground/appUiSet.vue
Normal file
@@ -0,0 +1,565 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<!-- 查询 -->
|
||||||
|
<div class="inquire">
|
||||||
|
<span>说明:</span>
|
||||||
|
</div>
|
||||||
|
<div class="inquire">
|
||||||
|
<span>头图尺寸:</span>
|
||||||
|
<div class="text">0</div>
|
||||||
|
</div>
|
||||||
|
<div class="inquire">
|
||||||
|
<span>icon尺寸:</span>
|
||||||
|
<div class="text">0</div>
|
||||||
|
</div>
|
||||||
|
<div class="inquireBox">
|
||||||
|
<span>首页头图:</span>
|
||||||
|
<el-upload
|
||||||
|
class="avatar-uploader"
|
||||||
|
action="/admin/tencent/cos/upload/file"
|
||||||
|
:show-file-list="false"
|
||||||
|
:on-success="handleAvatarSuccess1"
|
||||||
|
:before-upload="beforeAvatarUpload"
|
||||||
|
:on-error="handleAvatarError"
|
||||||
|
>
|
||||||
|
<img v-if="inquire.imageUrl1" :src="inquire.imageUrl1" class="avatar" />
|
||||||
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||||
|
</el-upload>
|
||||||
|
<el-button class="primary but" type="primary" @click="defaultFun(1)"
|
||||||
|
>恢复默认</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="inquireBox">
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<img v-if="inquire.imageUrl2" :src="inquire.imageUrl2" class="avatar" />
|
||||||
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||||
|
</el-upload>
|
||||||
|
<el-button class="primary but" type="primary" @click="defaultFun(2)"
|
||||||
|
>恢复默认</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="inquireBox">
|
||||||
|
<span>首页icon选中状态:</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="inquire.imageUrl3" :src="inquire.imageUrl3" class="avatar" />
|
||||||
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||||
|
</el-upload>
|
||||||
|
<el-button class="primary but" type="primary" @click="defaultFun(3)"
|
||||||
|
>恢复默认</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="inquireBox">
|
||||||
|
<span>首页icon未选中状态:</span>
|
||||||
|
<el-upload
|
||||||
|
class="avatar-uploader"
|
||||||
|
action="/admin/tencent/cos/upload/file"
|
||||||
|
:show-file-list="false"
|
||||||
|
:on-success="handleAvatarSuccess4"
|
||||||
|
:before-upload="beforeAvatarUpload"
|
||||||
|
:on-error="handleAvatarError"
|
||||||
|
>
|
||||||
|
<img v-if="inquire.imageUrl4" :src="inquire.imageUrl4" class="avatar" />
|
||||||
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||||
|
</el-upload>
|
||||||
|
<el-button class="primary but" type="primary" @click="defaultFun(4)"
|
||||||
|
>恢复默认</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="inquireBox">
|
||||||
|
<span>游戏icon选中状态:</span>
|
||||||
|
<el-upload
|
||||||
|
class="avatar-uploader"
|
||||||
|
action="/admin/tencent/cos/upload/file"
|
||||||
|
:show-file-list="false"
|
||||||
|
:on-success="handleAvatarSuccess5"
|
||||||
|
:before-upload="beforeAvatarUpload"
|
||||||
|
:on-error="handleAvatarError"
|
||||||
|
>
|
||||||
|
<img v-if="inquire.imageUrl5" :src="inquire.imageUrl5" class="avatar" />
|
||||||
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||||
|
</el-upload>
|
||||||
|
<el-button class="primary but" type="primary" @click="defaultFun(5)"
|
||||||
|
>恢复默认</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="inquireBox">
|
||||||
|
<span>游戏icon未选中状态:</span>
|
||||||
|
<el-upload
|
||||||
|
class="avatar-uploader"
|
||||||
|
action="/admin/tencent/cos/upload/file"
|
||||||
|
:show-file-list="false"
|
||||||
|
:on-success="handleAvatarSuccess6"
|
||||||
|
:before-upload="beforeAvatarUpload"
|
||||||
|
:on-error="handleAvatarError"
|
||||||
|
>
|
||||||
|
<img v-if="inquire.imageUrl6" :src="inquire.imageUrl6" class="avatar" />
|
||||||
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||||
|
</el-upload>
|
||||||
|
<el-button class="primary but" type="primary" @click="defaultFun(6)"
|
||||||
|
>恢复默认</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="inquireBox">
|
||||||
|
<span>动态icon选中状态:</span>
|
||||||
|
<el-upload
|
||||||
|
class="avatar-uploader"
|
||||||
|
action="/admin/tencent/cos/upload/file"
|
||||||
|
:show-file-list="false"
|
||||||
|
:on-success="handleAvatarSuccess7"
|
||||||
|
:before-upload="beforeAvatarUpload"
|
||||||
|
:on-error="handleAvatarError"
|
||||||
|
>
|
||||||
|
<img v-if="inquire.imageUrl7" :src="inquire.imageUrl7" class="avatar" />
|
||||||
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||||
|
</el-upload>
|
||||||
|
<el-button class="primary but" type="primary" @click="defaultFun(7)"
|
||||||
|
>恢复默认</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="inquireBox">
|
||||||
|
<span>动态icon未选中状态:</span>
|
||||||
|
<el-upload
|
||||||
|
class="avatar-uploader"
|
||||||
|
action="/admin/tencent/cos/upload/file"
|
||||||
|
:show-file-list="false"
|
||||||
|
:on-success="handleAvatarSuccess8"
|
||||||
|
:before-upload="beforeAvatarUpload"
|
||||||
|
:on-error="handleAvatarError"
|
||||||
|
>
|
||||||
|
<img v-if="inquire.imageUrl8" :src="inquire.imageUrl8" class="avatar" />
|
||||||
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||||
|
</el-upload>
|
||||||
|
<el-button class="primary but" type="primary" @click="defaultFun(8)"
|
||||||
|
>恢复默认</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="inquireBox">
|
||||||
|
<span>消息icon选中状态:</span>
|
||||||
|
<el-upload
|
||||||
|
class="avatar-uploader"
|
||||||
|
action="/admin/tencent/cos/upload/file"
|
||||||
|
:show-file-list="false"
|
||||||
|
:on-success="handleAvatarSuccess9"
|
||||||
|
:before-upload="beforeAvatarUpload"
|
||||||
|
:on-error="handleAvatarError"
|
||||||
|
>
|
||||||
|
<img v-if="inquire.imageUrl9" :src="inquire.imageUrl9" class="avatar" />
|
||||||
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||||
|
</el-upload>
|
||||||
|
<el-button class="primary but" type="primary" @click="defaultFun(9)"
|
||||||
|
>恢复默认</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="inquireBox">
|
||||||
|
<span>消息icon未选中状态:</span>
|
||||||
|
<el-upload
|
||||||
|
class="avatar-uploader"
|
||||||
|
action="/admin/tencent/cos/upload/file"
|
||||||
|
:show-file-list="false"
|
||||||
|
:on-success="handleAvatarSuccess10"
|
||||||
|
:before-upload="beforeAvatarUpload"
|
||||||
|
:on-error="handleAvatarError"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
v-if="inquire.imageUrl10"
|
||||||
|
:src="inquire.imageUrl10"
|
||||||
|
class="avatar"
|
||||||
|
/>
|
||||||
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||||
|
</el-upload>
|
||||||
|
<el-button class="primary but" type="primary" @click="defaultFun(10)"
|
||||||
|
>恢复默认</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="inquireBox">
|
||||||
|
<span>我的icon选中状态:</span>
|
||||||
|
<el-upload
|
||||||
|
class="avatar-uploader"
|
||||||
|
action="/admin/tencent/cos/upload/file"
|
||||||
|
:show-file-list="false"
|
||||||
|
:on-success="handleAvatarSuccess11"
|
||||||
|
:before-upload="beforeAvatarUpload"
|
||||||
|
:on-error="handleAvatarError"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
v-if="inquire.imageUrl11"
|
||||||
|
:src="inquire.imageUrl11"
|
||||||
|
class="avatar"
|
||||||
|
/>
|
||||||
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||||
|
</el-upload>
|
||||||
|
<el-button class="primary but" type="primary" @click="defaultFun(11)"
|
||||||
|
>恢复默认</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="inquireBox">
|
||||||
|
<span>我的icon未选中状态:</span>
|
||||||
|
<el-upload
|
||||||
|
class="avatar-uploader"
|
||||||
|
action="/admin/tencent/cos/upload/file"
|
||||||
|
:show-file-list="false"
|
||||||
|
:on-success="handleAvatarSuccess12"
|
||||||
|
:before-upload="beforeAvatarUpload"
|
||||||
|
:on-error="handleAvatarError"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
v-if="inquire.imageUrl12"
|
||||||
|
:src="inquire.imageUrl12"
|
||||||
|
class="avatar"
|
||||||
|
/>
|
||||||
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||||
|
</el-upload>
|
||||||
|
<el-button class="primary but" type="primary" @click="defaultFun(12)"
|
||||||
|
>恢复默认</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="inquireBox">
|
||||||
|
<span>横条icon:</span>
|
||||||
|
<el-upload
|
||||||
|
class="avatar-uploader"
|
||||||
|
action="/admin/tencent/cos/upload/file"
|
||||||
|
:show-file-list="false"
|
||||||
|
:on-success="handleAvatarSuccess13"
|
||||||
|
:before-upload="beforeAvatarUpload"
|
||||||
|
:on-error="handleAvatarError"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
v-if="inquire.imageUrl13"
|
||||||
|
:src="inquire.imageUrl13"
|
||||||
|
class="avatar"
|
||||||
|
/>
|
||||||
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||||
|
</el-upload>
|
||||||
|
<el-button class="primary but" type="primary" @click="defaultFun(13)"
|
||||||
|
>恢复默认</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="inquireBox">
|
||||||
|
<span>背景颜色:</span>
|
||||||
|
<el-input
|
||||||
|
v-model="inquire.color"
|
||||||
|
placeholder="例如:#FFFFFF"
|
||||||
|
class="input"
|
||||||
|
></el-input>
|
||||||
|
</div>
|
||||||
|
<el-button
|
||||||
|
style="margin-bottom: 20px"
|
||||||
|
class="primary but"
|
||||||
|
type="primary"
|
||||||
|
@click="seave()"
|
||||||
|
>保存设置</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
appUiSetting,
|
||||||
|
appUiSettingSave,
|
||||||
|
} from "@/api/roomBackground/roomBackground";
|
||||||
|
// @ts-ignore
|
||||||
|
import { dateFormat } from "@/utils/system-helper";
|
||||||
|
// @ts-ignore
|
||||||
|
import { ElMessage, ElTable } from "element-plus";
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { ElMessageBox } from "element-plus"; // 正确引入 ElM
|
||||||
|
export default {
|
||||||
|
name: "appUiSet",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inquire: {
|
||||||
|
imageUrl1: "",
|
||||||
|
imageUrl2: "",
|
||||||
|
imageUrl3: "",
|
||||||
|
imageUrl4: "",
|
||||||
|
imageUrl5: "",
|
||||||
|
imageUrl6: "",
|
||||||
|
imageUrl7: "",
|
||||||
|
imageUrl8: "",
|
||||||
|
imageUrl9: "",
|
||||||
|
imageUrl10: "",
|
||||||
|
imageUrl11: "",
|
||||||
|
imageUrl12: "",
|
||||||
|
imageUrl13: "",
|
||||||
|
color: "",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 查询接口
|
||||||
|
getData() {
|
||||||
|
appUiSetting().then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
console.log(res.data);
|
||||||
|
this.inquire.imageUrl1 = res.data.headIcon;
|
||||||
|
this.inquire.imageUrl2 = res.data.navbar;
|
||||||
|
this.inquire.imageUrl3 = res.data.homeSelectIcon;
|
||||||
|
this.inquire.imageUrl4 = res.data.homeUnSelectIcon;
|
||||||
|
this.inquire.imageUrl5 = res.data.gameSelectIcon;
|
||||||
|
this.inquire.imageUrl6 = res.data.gameUnSelectIcon;
|
||||||
|
this.inquire.imageUrl7 = res.data.dynamicSelectIcon;
|
||||||
|
this.inquire.imageUrl8 = res.data.dynamicUnSelectIcon;
|
||||||
|
this.inquire.imageUrl9 = res.data.msgSelectIcon;
|
||||||
|
this.inquire.imageUrl10 = res.data.msgUnSelectIcon;
|
||||||
|
this.inquire.imageUrl11 = res.data.mineSelectIcon;
|
||||||
|
this.inquire.imageUrl12 = res.data.mineUnSelectIcon;
|
||||||
|
this.inquire.imageUrl13 = res.data.selectBar;
|
||||||
|
this.inquire.color = res.data.backgroundColor;
|
||||||
|
} else {
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: res.message,
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
seave() {
|
||||||
|
var obj = {
|
||||||
|
headIcon: this.inquire.imageUrl1,
|
||||||
|
navbar: this.inquire.imageUrl2,
|
||||||
|
homeSelectIcon: this.inquire.imageUrl3,
|
||||||
|
homeUnSelectIcon: this.inquire.imageUrl4,
|
||||||
|
gameSelectIcon: this.inquire.imageUrl5,
|
||||||
|
gameUnSelectIcon: this.inquire.imageUrl6,
|
||||||
|
dynamicSelectIcon: this.inquire.imageUrl7,
|
||||||
|
dynamicUnSelectIcon: this.inquire.imageUrl8,
|
||||||
|
msgSelectIcon: this.inquire.imageUrl9,
|
||||||
|
msgUnSelectIcon: this.inquire.imageUrl10,
|
||||||
|
mineSelectIcon: this.inquire.imageUrl11,
|
||||||
|
mineUnSelectIcon: this.inquire.imageUrl12,
|
||||||
|
selectBar: this.inquire.imageUrl13,
|
||||||
|
backgroundColor: this.inquire.color,
|
||||||
|
};
|
||||||
|
// obj = JSON.stringify(obj);
|
||||||
|
appUiSettingSave(obj).then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: "保存成功",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
this.getData();
|
||||||
|
} else {
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: res.message,
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
defaultFun(num){
|
||||||
|
console.log(this.inquire);
|
||||||
|
console.log(this.inquire[`imageUrl${num}`]);
|
||||||
|
this.inquire[`imageUrl${num}`] = '';
|
||||||
|
console.log(this.inquire);
|
||||||
|
},
|
||||||
|
handleAvatarSuccess1(res, file) {
|
||||||
|
this.inquire.imageUrl1 = file.response.data;
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: "上传成功！",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleAvatarSuccess2(res, file) {
|
||||||
|
this.inquire.imageUrl2 = file.response.data;
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: "上传成功！",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleAvatarSuccess3(res, file) {
|
||||||
|
this.inquire.imageUrl3 = file.response.data;
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: "上传成功！",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleAvatarSuccess4(res, file) {
|
||||||
|
this.inquire.imageUrl4 = file.response.data;
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: "上传成功！",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleAvatarSuccess5(res, file) {
|
||||||
|
this.inquire.imageUrl5 = file.response.data;
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: "上传成功！",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleAvatarSuccess7(res, file) {
|
||||||
|
this.inquire.imageUrl7 = file.response.data;
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: "上传成功！",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleAvatarSuccess8(res, file) {
|
||||||
|
this.inquire.imageUrl8 = file.response.data;
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: "上传成功！",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleAvatarSuccess9(res, file) {
|
||||||
|
this.inquire.imageUrl9 = file.response.data;
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: "上传成功！",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleAvatarSuccess10(res, file) {
|
||||||
|
this.inquire.imageUrl10 = file.response.data;
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: "上传成功！",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleAvatarSuccess11(res, file) {
|
||||||
|
this.inquire.imageUrl11 = file.response.data;
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: "上传成功！",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleAvatarSuccess12(res, file) {
|
||||||
|
this.inquire.imageUrl12 = file.response.data;
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: "上传成功！",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleAvatarSuccess13(res, file) {
|
||||||
|
this.inquire.imageUrl13 = file.response.data;
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: "上传成功！",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeAvatarUpload() {
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: "上传中~",
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleAvatarError() {
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: "上传失败！",
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.box {
|
||||||
|
padding-top: 20px;
|
||||||
|
background: #ecf0f5;
|
||||||
|
.inquire {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 20px;
|
||||||
|
span {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.inquireBox {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
margin-right: 20px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
.but {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.input {
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
620
src/views/roomBackground/roomBackground.vue
Normal file
620
src/views/roomBackground/roomBackground.vue
Normal file
@@ -0,0 +1,620 @@
|
|||||||
|
<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="
|
||||||
|
partitionId = '';
|
||||||
|
id = '';
|
||||||
|
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
|
||||||
|
v-if="scope.row.url"
|
||||||
|
style="width: 100px; height: 100px"
|
||||||
|
:src="scope.row.url"
|
||||||
|
:zoom-rate="1.1"
|
||||||
|
:preview-src-list="[scope.row.url]"
|
||||||
|
fit="cover"
|
||||||
|
preview-teleported="true"
|
||||||
|
hide-on-click-modal="true"
|
||||||
|
/>
|
||||||
|
<div v-else>/</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 = '';
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
v-if="dialogObj.imageUrl2"
|
||||||
|
:src="dialogObj.imageUrl2"
|
||||||
|
class="avatar"
|
||||||
|
/>
|
||||||
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||||
|
</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 } from "vue";
|
||||||
|
import { ElMessageBox } from "element-plus"; // 正确引入 ElM
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
listPartitionInfo().then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.inquire.partitionArr = res.data;
|
||||||
|
this.getData();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 查询接口
|
||||||
|
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,
|
||||||
|
}).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();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
425
src/views/roomBackground/roomBackgroundCustom.vue
Normal file
425
src/views/roomBackground/roomBackgroundCustom.vue
Normal file
@@ -0,0 +1,425 @@
|
|||||||
|
<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>
|
||||||
|
<!-- 查询按钮 -->
|
||||||
|
<el-button class="primary" type="primary" @click="getData()"
|
||||||
|
>查询</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
class="primary"
|
||||||
|
type="primary"
|
||||||
|
@click="
|
||||||
|
inquire.partitionId = null;
|
||||||
|
inquire.id = null;
|
||||||
|
getData();
|
||||||
|
"
|
||||||
|
>重置搜索</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="数字" />
|
||||||
|
<el-table-column prop="erbanNo" align="center" label="用户ID" />
|
||||||
|
<el-table-column prop="nick" align="center" label="用户昵称" />
|
||||||
|
<el-table-column prop="partitionDesc" align="center" label="所在区" />
|
||||||
|
<el-table-column prop="createTime" align="center" label="申请时间" />
|
||||||
|
<el-table-column prop="url" align="center" label="图片">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-image
|
||||||
|
v-if="scope.row.url"
|
||||||
|
style="width: 100px; height: 100px"
|
||||||
|
:src="scope.row.url"
|
||||||
|
:zoom-rate="1.1"
|
||||||
|
:preview-src-list="[scope.row.url]"
|
||||||
|
fit="cover"
|
||||||
|
preview-teleported="true"
|
||||||
|
hide-on-click-modal="true"
|
||||||
|
/>
|
||||||
|
<div v-else>/</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="status" align="center" label="状态">
|
||||||
|
<template v-slot="scope">{{
|
||||||
|
scope.row.status < 0
|
||||||
|
? "过期"
|
||||||
|
: scope.row.status == 0
|
||||||
|
? "审核中"
|
||||||
|
: scope.row.status == 1
|
||||||
|
? "通过"
|
||||||
|
: "不通过"
|
||||||
|
}}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="updateTime" align="center" label="审核时间" />
|
||||||
|
<el-table-column prop="adminUser" align="center" label="操作人">
|
||||||
|
<template v-slot="scope">{{
|
||||||
|
scope.row.adminUser ? scope.row.adminUser : "-"
|
||||||
|
}}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="操作" width="300">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<!-- 通过弹出框 -->
|
||||||
|
<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
|
||||||
|
v-show="scope.row.status == 0"
|
||||||
|
class="primary"
|
||||||
|
type="primary"
|
||||||
|
@click="scope.row.visible1 = true"
|
||||||
|
>通过</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-popover>
|
||||||
|
|
||||||
|
<!-- 拒绝弹出框 -->
|
||||||
|
<el-popover
|
||||||
|
v-model:visible="scope.row.visible2"
|
||||||
|
placement="top"
|
||||||
|
:width="160"
|
||||||
|
>
|
||||||
|
<p>确定要拒绝么?</p>
|
||||||
|
<div style="text-align: right; margin: 0">
|
||||||
|
<el-button size="small" @click="scope.row.visible2 = false">
|
||||||
|
取消
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
@click="reject(scope.row.id)"
|
||||||
|
>
|
||||||
|
确认
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<template #reference>
|
||||||
|
<el-button
|
||||||
|
v-show="scope.row.status == 0"
|
||||||
|
class="primary"
|
||||||
|
type="primary"
|
||||||
|
@click="scope.row.visible2 = true"
|
||||||
|
>拒绝</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-popover>
|
||||||
|
|
||||||
|
<!-- 删除弹出框 -->
|
||||||
|
<el-popover
|
||||||
|
v-model:visible="scope.row.visible3"
|
||||||
|
placement="top"
|
||||||
|
:width="160"
|
||||||
|
>
|
||||||
|
<p>确定要删除么?</p>
|
||||||
|
<div style="text-align: right; margin: 0">
|
||||||
|
<el-button size="small" @click="scope.row.visible3 = false">
|
||||||
|
取消
|
||||||
|
</el-button>
|
||||||
|
<el-button size="small" type="primary" @click="del(scope.row.id)">
|
||||||
|
确认
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<template #reference>
|
||||||
|
<el-button
|
||||||
|
class="danger"
|
||||||
|
type="danger"
|
||||||
|
@click="scope.row.visible3 = 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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
listPartitionInfo,
|
||||||
|
customPage,
|
||||||
|
customPass,
|
||||||
|
customReject,
|
||||||
|
customDel,
|
||||||
|
} from "@/api/roomBackground/roomBackground";
|
||||||
|
// @ts-ignore
|
||||||
|
import { dateFormat } from "@/utils/system-helper";
|
||||||
|
// @ts-ignore
|
||||||
|
import { ElMessage, ElTable } from "element-plus";
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { ElMessageBox } from "element-plus"; // 正确引入 ElM
|
||||||
|
export default {
|
||||||
|
name: "roomBackgroundCustom",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
//查询所需条件对象
|
||||||
|
inquire: {
|
||||||
|
partitionId: "",
|
||||||
|
partitionArr: [],
|
||||||
|
id: "",
|
||||||
|
},
|
||||||
|
// 表格
|
||||||
|
tableData: [{ x: "x" }],
|
||||||
|
// 分页
|
||||||
|
total: 0, //总页数
|
||||||
|
currentPage: 1, //页码
|
||||||
|
pageSize: 10, //条数
|
||||||
|
// 删除相关
|
||||||
|
// visible1: false,
|
||||||
|
// visible2: false,
|
||||||
|
// visible3: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.loading = true;
|
||||||
|
listPartitionInfo().then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.inquire.partitionArr = res.data;
|
||||||
|
this.getData();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 查询接口
|
||||||
|
getData() {
|
||||||
|
this.loading = true;
|
||||||
|
customPage({
|
||||||
|
partitionId: this.inquire.partitionId,
|
||||||
|
erbanNo: this.inquire.id,
|
||||||
|
pageNum: 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;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 通过
|
||||||
|
pass(id) {
|
||||||
|
customPass({ id }).then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: "操作成功",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
this.getData();
|
||||||
|
} else {
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: res.message,
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 拒绝
|
||||||
|
reject(id) {
|
||||||
|
customReject({ id }).then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: "操作成功",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
this.getData();
|
||||||
|
} else {
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: res.message,
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 删除
|
||||||
|
del(id) {
|
||||||
|
customDel({ id }).then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: "操作成功",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
this.getData();
|
||||||
|
} else {
|
||||||
|
ElMessage({
|
||||||
|
showClose: true,
|
||||||
|
message: res.message,
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
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();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user