完成房间背景和首页ui配置
This commit is contained in:
dragon
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>
|
||||
Reference in New Issue
Block a user