yoe-opm-web/src/views/platform/gift/longAd/index.vue

<template>
  <div class="long-ad-page">
    <div class="long-ad-container">
      <!-- 标题卡片 -->
      <el-card class="title-card" shadow="never">
        <span class="title-text">首页横幅广告</span>
      </el-card>

      <!-- 广告图片卡片 -->
      <el-card class="ad-card" shadow="hover" @click="handleClickAd">
        <el-image
          v-if="adData.imageUrl"
          :src="adData.imageUrl"
          fit="contain"
          class="ad-image"
        >
          <template #error>
            <div class="image-slot">
              <el-icon><Picture /></el-icon>
              <span>点击编辑广告</span>
            </div>
          </template>
        </el-image>
        <div v-else class="image-slot">
          <el-icon><Picture /></el-icon>
          <span>点击添加广告</span>
        </div>
      </el-card>

      <!-- 编辑表单卡片（点击后显示） -->
      <el-card v-if="showForm" class="form-card" shadow="never">
        <el-form :model="form" label-width="80px">
          <el-form-item label="链接:">
            <el-input v-model="form.link" placeholder="请输入链接地址" />
          </el-form-item>
          <el-form-item label="图片:">
            <div class="upload-area">
              <upload-image v-model="form.imageUrl" :limit="1" />
              <span class="upload-tip">建议尺寸：1200 x 300 像素</span>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">提交</el-button>
            <el-button @click="showForm = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup name="GiftLongAd" lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Picture } from '@element-plus/icons-vue';
import dayjs from 'dayjs';
import { listAdContent, addAdContent, updateAdContent } from '@/api/ad/content';

const AD_TYPE = 'gift_long_ad';

const showForm = ref(false);

const adData = ref({
  id: null as number | null,
  imageUrl: '',
  link: ''
});

const form = reactive({
  link: '',
  imageUrl: ''
});

const loadAdData = async () => {
  try {
    const res = await listAdContent({ adType: AD_TYPE, pageSize: 1 });
    const rows = res.rows || [];
    if (rows.length > 0) {
      const data = rows[0];
      adData.value.id = data.id;
      adData.value.imageUrl = data.imageUrl || '';
      adData.value.link = data.link || '';
      form.link = data.link || '';
      form.imageUrl = data.imageUrl || '';
    }
  } catch (error) {
    console.error('加载广告数据失败', error);
  }
};

const handleClickAd = () => {
  showForm.value = true;
};

const handleSubmit = async () => {
  try {
    const today = dayjs().format('YYYY-MM-DD');
    const future = dayjs().add(365, 'day').format('YYYY-MM-DD');
    const data = {
      id: adData.value.id,
      adType: AD_TYPE,
      title: '首页横幅广告',
      imageUrl: form.imageUrl,
      link: form.link,
      sort: 0,
      status: 1,
      color: '#ffffff',
      remark: '',
      extJson: '{}',
      startTime: today,
      endTime: future
    };
    if (adData.value.id) {
      await updateAdContent(data);
    } else {
      await addAdContent(data);
    }
    ElMessage.success('提交成功');
    showForm.value = false;
    await loadAdData();
  } catch (error) {
    ElMessage.error('提交失败');
  }
};

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

<style scoped lang="scss">
.long-ad-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20px;
}

.long-ad-container {
  max-width: 1200px;
  margin: 0 auto;
}

.title-card {
  margin-bottom: 16px;

  :deep(.el-card__body) {
    padding: 12px 20px;
  }

  .title-text {
    font-size: 14px;
    font-weight: 500;
    color: #409eff;
  }
}

.ad-card {
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  :deep(.el-card__body) {
    padding: 0;
  }

  .ad-image {
    width: 100%;
    display: block;

    :deep(img) {
      width: 100%;
      height: auto;
      display: block;
    }
  }
}

.image-slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
  background: #f5f7fa;
  color: #909399;
  font-size: 14px;

  .el-icon {
    font-size: 40px;
    margin-bottom: 10px;
  }
}

.form-card {
  :deep(.el-card__body) {
    padding: 20px;
  }
}

.upload-area {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .upload-tip {
    color: #909399;
    font-size: 12px;
  }
}
</style>