yoe-opm-web/src/views/system/loginSetting/index.vue

<template>
  <div class="p-2">
    <el-card shadow="hover" v-loading="loading">
      <template #header>
        <div class="card-header">
          <span class="title">登录图片设置</span>
        </div>
      </template>

      <div class="tips-section">
        <p>网站登录页顶部4张图片，每次刷新可随机显示，最多可设置上传4张。</p>
        <p>选择上传文件并提交表单生效，图片请依照输入框下提示文字内容选项。</p>
        <p>背景色指图片下方区域颜色，适用于较宽分辨率下浏览页面时整体充满窗宽，因此请注择和上传图片最为接近或相邻原的色彩。</p>
      </div>

      <!-- 图片1 -->
      <div class="image-section" v-for="(item, index) in imageList" :key="index">
        <div class="image-title">
          <span class="label">图片{{ index + 1 }}：</span>
          <span class="hint">请使用1000*480像素jpg/gif/png格式的图片</span>
        </div>
        <div class="image-content">
          <div class="image-preview">
            <el-image 
              v-if="item.image" 
              :src="item.image" 
              fit="cover"
              style="width: 280px; height: 140px;"
            />
            <div v-else class="empty-image">
              <el-icon size="40"><Picture /></el-icon>
            </div>
          </div>
          <div class="image-actions">
            <div class="upload-btn">
              <image-upload v-model="item.image" :limit="1" :fileSize="5" :isShowTip="false" />
            </div>
            <div class="color-picker">
              <span>背景色：</span>
              <el-color-picker v-model="item.bgColor" />
            </div>
            <div class="action-btns">
              <el-button @click="handleReset(index)">重 置</el-button>
              <el-button type="primary" @click="handleConfirm(index)">确 认</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup name="LoginSetting" lang="ts">
import { listPlatformConfig, addPlatformConfig, updatePlatformConfig } from '@/api/system/platformConfig';
import { ComponentInternalInstance, getCurrentInstance, ref, reactive, onMounted } from 'vue';
import { Picture } from '@element-plus/icons-vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const loading = ref(true);
const configList = ref<any[]>([]);

const imageList = reactive([
  { image: '', bgColor: '#409EFF', configKeyImage: 'loginImage1', configKeyColor: 'loginBgColor1' },
  { image: '', bgColor: '#409EFF', configKeyImage: 'loginImage2', configKeyColor: 'loginBgColor2' },
  { image: '', bgColor: '#409EFF', configKeyImage: 'loginImage3', configKeyColor: 'loginBgColor3' },
  { image: '', bgColor: '#409EFF', configKeyImage: 'loginImage4', configKeyColor: 'loginBgColor4' }
]);

const getList = async () => {
  loading.value = true;
  try {
    const res = await listPlatformConfig({ configType: '1', pageNum: 1, pageSize: 100 });
    configList.value = res.rows || [];
    configList.value.forEach((item: any) => {
      imageList.forEach((img, index) => {
        if (item.configKey === img.configKeyImage) {
          imageList[index].image = item.value || '';
        }
        if (item.configKey === img.configKeyColor) {
          imageList[index].bgColor = item.value || '#409EFF';
        }
      });
    });
  } finally {
    loading.value = false;
  }
};

const handleReset = (index: number) => {
  imageList[index].image = '';
  imageList[index].bgColor = '#409EFF';
};

const handleConfirm = async (index: number) => {
  const item = imageList[index];
  
  // 保存图片
  const existImage = configList.value.find((c: any) => c.configKey === item.configKeyImage);
  if (existImage) {
    await updatePlatformConfig({ ...existImage, value: item.image });
  } else {
    await addPlatformConfig({ configType: '1', configKey: item.configKeyImage, name: `登录图片${index + 1}`, value: item.image });
  }

  // 保存背景色
  const existColor = configList.value.find((c: any) => c.configKey === item.configKeyColor);
  if (existColor) {
    await updatePlatformConfig({ ...existColor, value: item.bgColor });
  } else {
    await addPlatformConfig({ configType: '1', configKey: item.configKeyColor, name: `登录背景色${index + 1}`, value: item.bgColor });
  }

  proxy?.$modal.msgSuccess('保存成功');
  getList();
};

onMounted(() => {
  getList();
});
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-header .title {
  font-size: 16px;
  font-weight: bold;
}
.tips-section {
  margin-bottom: 20px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
}
.tips-section p {
  margin: 5px 0;
  color: #606266;
  font-size: 13px;
}
.image-section {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}
.image-section:last-child {
  border-bottom: none;
}
.image-title {
  margin-bottom: 15px;
}
.image-title .label {
  font-weight: bold;
  color: #409EFF;
}
.image-title .hint {
  color: #409EFF;
  font-size: 13px;
}
.image-content {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
.image-preview {
  width: 280px;
  height: 140px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}
.empty-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  color: #909399;
}
.image-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.color-picker {
  display: flex;
  align-items: center;
  gap: 10px;
}
.action-btns {
  display: flex;
  gap: 10px;
}
</style>