peko-admin-web/src/views/roomBackground/appUiSet.vue

<template>
  <div class="box">
    <!-- 查询 -->
    <div class="inquire">
      <span>说明:</span>
    </div>
    <div class="inquire">
      <span>头图尺寸:</span>
      <div class="text">750*280</div>
    </div>
    <div class="inquire">
      <span>icon尺寸:</span>
      <div class="text">80*80</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",
      });
    },
    handleAvatarSuccess6(res, file) {
      this.inquire.imageUrl6 = 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: center;
    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>