leiyun
/
pap_web


			
				
					
						
						
							
							{% extends "../layout.html" %}

{% block title %}{{ columnInfo.name if columnInfo else 'Banner管理' }}{% endblock %}

{% block content %}
<div id="bannerApp">
  <el-card shadow="never">
    <template #header>
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
          <span class="font-medium">{{ columnInfo.name if columnInfo else 'Banner管理' }}</span>
          <el-tag type="warning" size="small">轮播图</el-tag>
        </div>
        <el-button type="primary" @click="openDialog()">+ 新增Banner</el-button>
      </div>
    </template>

    <!-- 筛选栏 -->
    <div class="flex items-center gap-4 mb-4">
      <el-input v-model="query.keyword" placeholder="搜索标题..." style="width:180px;" clearable @keyup.enter="loadList"></el-input>
      <el-select v-model="query.status" placeholder="状态" style="width:100px;" clearable>
        <el-option label="启用" :value="1"></el-option>
        <el-option label="禁用" :value="0"></el-option>
      </el-select>
      <el-button type="primary" @click="loadList">搜索</el-button>
      <el-button @click="resetQuery" class="ml-2">重置</el-button>
    </div>

    <!-- 卡片列表 -->
    <div class="banner-grid" v-loading="loading">
      <div v-for="item in list" :key="item.id" class="banner-card">
        <div class="banner-thumb">
          <img :src="item.image || '/static/images/placeholder.png'" :alt="item.title">
          <span class="banner-sort">${ item.sort }</span>
          <span v-if="item.glass" class="banner-glass">毛玻璃</span>
          <!-- 文字叠加预览 -->
          <div class="banner-overlay">
            <div class="banner-overlay-title">${ item.title }</div>
            <div v-if="item.subtitle" class="banner-overlay-sub">${ item.subtitle }</div>
            <div class="banner-overlay-btns">
              <span v-if="item.btn1_show && item.btn1_text">${ item.btn1_text }</span>
              <span v-if="item.btn2_show && item.btn2_text">${ item.btn2_text }</span>
            </div>
          </div>
        </div>
        <div class="banner-info">
          <div class="banner-title">${ item.title }</div>
          <div v-if="item.subtitle" class="banner-subtitle">${ item.subtitle }</div>
          <div class="banner-meta">
            <el-tag :type="item.status ? 'success' : 'info'" size="small">${ item.status ? '启用' : '禁用' }</el-tag>
            <span class="banner-date">${ item.create_time?.slice(0,10) }</span>
          </div>
        </div>
        <div class="banner-actions">
          <el-button type="primary" link size="small" @click="openDialog(item)">编辑</el-button>
          <el-button type="danger" link size="small" @click="deleteItem(item)">删除</el-button>
        </div>
      </div>
      <!-- 新增卡片 -->
      <div class="banner-card banner-card-add" @click="openDialog()">
        <div class="add-inner">
          <el-icon :size="36"><Plus /></el-icon>
          <span>新增Banner</span>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="flex justify-end mt-4" v-if="total > pageSize">
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" v-model:current-page="page" @current-change="loadList"></el-pagination>
    </div>
  </el-card>

  <!-- 新增/编辑弹窗 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="800px" destroy-on-close draggable top="5vh">
    <div class="dialog-scroll-body">
      <el-form :model="form" label-width="100px">
        <!-- 图片上传 -->
        <el-form-item label="Banner图片" required>
          <div class="img-upload-wrap">
            <div class="img-upload-area" @click="triggerUpload">
              <img v-if="form.image" :src="form.image" class="img-preview">
              <div v-else class="img-placeholder">
                <el-icon :size="32"><Plus /></el-icon>
                <span>点击上传图片</span>
              </div>
            </div>
            <input type="file" ref="fileInput" accept="image/*" style="display:none;" @change="handleUpload">
            <div class="img-tip">建议尺寸 1920×800，支持 JPG/PNG</div>
          </div>
        </el-form-item>
        
        <!-- 基本信息 -->
        <el-form-item label="主标题" required>
          <el-input v-model="form.title" placeholder="如：也许因为您的一次帮助"></el-input>
        </el-form-item>
        <el-form-item label="副标题">
          <el-input v-model="form.subtitle" placeholder="如：天真的笑容将再次回到他的脸上"></el-input>
        </el-form-item>
        <el-form-item label="描述文字">
          <el-input v-model="form.description" type="textarea" :rows="2" placeholder="Banner描述文字"></el-input>
        </el-form-item>

        <!-- 按钮配置 -->
        <el-divider content-position="left">按钮配置</el-divider>
        <div class="flex gap-3 items-end mb-4">
          <el-form-item label="按钮1文字" class="mb-0" style="flex:2;">
            <el-input v-model="form.btn1_text" placeholder="了解更多"></el-input>
          </el-form-item>
          <el-form-item label="链接" class="mb-0" style="flex:2;">
            <el-input v-model="form.btn1_link" placeholder="#"></el-input>
          </el-form-item>
          <el-form-item label="显示" class="mb-0" style="flex:1;">
            <el-switch v-model="form.btn1_show" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
        </div>
        <div class="flex gap-3 items-end">
          <el-form-item label="按钮2文字" class="mb-0" style="flex:2;">
            <el-input v-model="form.btn2_text" placeholder="我要捐赠"></el-input>
          </el-form-item>
          <el-form-item label="链接" class="mb-0" style="flex:2;">
            <el-input v-model="form.btn2_link" placeholder="#"></el-input>
          </el-form-item>
          <el-form-item label="显示" class="mb-0" style="flex:1;">
            <el-switch v-model="form.btn2_show" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
        </div>

        <!-- 样式设置 -->
        <el-divider content-position="left">样式设置</el-divider>
        <el-form-item label="文字位置">
          <el-radio-group v-model="form.position">
            <el-radio value="left">左侧</el-radio>
            <el-radio value="center">居中</el-radio>
            <el-radio value="right">右侧</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="毛玻璃效果">
          <el-switch v-model="form.glass" :active-value="1" :inactive-value="0"></el-switch>
          <span class="ml-2 text-gray-400 text-sm">启用后文字区域会有半透明模糊背景</span>
        </el-form-item>
        <div class="flex gap-4">
          <el-form-item label="排序" class="flex-1">
            <el-input-number v-model="form.sort" :min="1" style="width:100%;"></el-input-number>
          </el-form-item>
          <el-form-item label="状态" class="flex-1">
            <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
        </div>

        <!-- 预览区域 -->
        <el-divider content-position="left">前台预览</el-divider>
        <div class="banner-preview" :class="'pos-' + form.position">
          <img :src="form.image || '/static/images/placeholder.png'" class="preview-bg">
          <div class="preview-overlay"></div>
          <div class="preview-content" :class="{ 'glass-on': form.glass }">
            <div class="preview-title">${ form.title || '标题文字' }${ form.subtitle ? '<br>' + form.subtitle : '' }</div>
            <div v-if="form.description" class="preview-desc">${ form.description }</div>
            <div class="preview-btns">
              <span v-if="form.btn1_show && form.btn1_text" class="pv-btn pv-btn-w">${ form.btn1_text }</span>
              <span v-if="form.btn2_show && form.btn2_text" class="pv-btn pv-btn-o">${ form.btn2_text }</span>
            </div>
          </div>
        </div>
      </el-form>
    </div>

    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveItem" :loading="saving">保存</el-button>
    </template>
  </el-dialog>
</div>

<style>
.banner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; }
.banner-card { background: #fff; border: 1px solid #eee; border-radius: 8px; overflow: hidden; transition: .2s; }
.banner-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-2px); }
.banner-thumb { position: relative; aspect-ratio: 16/9; background: #f5f5f5; overflow: hidden; }
.banner-thumb img { width: 100%; height: 100%; object-fit: cover; }
.banner-sort { position: absolute; top: 6px; left: 6px; background: #ff7800; color: #fff; font-size: 11px; font-weight: 600; width: 22px; height: 22px; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.banner-glass { position: absolute; top: 6px; right: 6px; background: rgba(255,255,255,.2); backdrop-filter: blur(4px); padding: 1px 6px; border-radius: 3px; font-size: 9px; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.banner-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 10px; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; }
.banner-overlay-title { font-size: 12px; font-weight: 600; line-height: 1.3; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.banner-overlay-sub { font-size: 10px; opacity: .85; margin-top: 2px; }
.banner-overlay-btns { display: flex; gap: 4px; margin-top: 4px; }
.banner-overlay-btns span { font-size: 9px; padding: 1px 6px; border-radius: 2px; border: 1px solid rgba(255,255,255,.6); color: rgba(255,255,255,.9); }
.banner-info { padding: 10px 12px 6px; }
.banner-title { font-size: 13px; font-weight: 500; color: #333; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banner-subtitle { font-size: 11px; color: #999; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banner-meta { display: flex; align-items: center; gap: 8px; }
.banner-date { font-size: 11px; color: #bbb; }
.banner-actions { display: flex; align-items: center; gap: 4px; padding: 6px 12px 10px; border-top: 1px solid #f0f0f0; }
.banner-card-add { border: 2px dashed #ddd; display: flex; align-items: center; justify-content: center; cursor: pointer; min-height: 200px; }
.banner-card-add:hover { border-color: #ff7800; background: #fff7f0; }
.add-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #bbb; font-size: 13px; }

/* 弹窗滚动区域 */
.dialog-scroll-body { max-height: 65vh; overflow-y: auto; overflow-x: hidden; }

/* 图片上传 */
.img-upload-wrap { width: 100%; max-width: 360px; }
.img-upload-area { width: 100%; aspect-ratio: 16/9; border: 2px dashed #ddd; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: .2s; background: #fafafa; }
.img-upload-area:hover { border-color: #ff7800; background: #fff7f0; }
.img-preview { width: 100%; height: 100%; object-fit: cover; }
.img-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #bbb; font-size: 12px; }
.img-tip { font-size: 12px; color: #999; margin-top: 8px; }

/* 预览区域 */
.banner-preview { width: 100%; aspect-ratio: 16/7; border-radius: 8px; overflow: hidden; position: relative; background: #222; }
.preview-bg { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.preview-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.preview-content { position: absolute; top: 50%; transform: translateY(-50%); padding: 16px 24px; max-width: 60%; color: #fff; z-index: 2; }
.pos-left .preview-content { left: 24px; }
.pos-center .preview-content { left: 50%; transform: translate(-50%, -50%); text-align: center; max-width: 70%; }
.pos-right .preview-content { right: 24px; text-align: right; }
.preview-content.glass-on { background: rgba(255,255,255,.08); backdrop-filter: blur(12px); border-radius: 8px; border: 1px solid rgba(255,255,255,.12); padding: 20px 28px; }
.preview-title { font-size: 16px; font-weight: 700; line-height: 1.4; margin-bottom: 6px; }
.preview-desc { font-size: 11px; color: rgba(255,255,255,.75); line-height: 1.5; margin-bottom: 10px; }
.preview-btns { display: flex; gap: 8px; }
.pv-btn { padding: 4px 14px; border-radius: 4px; font-size: 11px; }
.pv-btn-w { background: #fff; color: #333; }
.pv-btn-o { border: 1px solid rgba(255,255,255,.7); color: #fff; background: transparent; }
.pos-center .preview-btns { justify-content: center; }
.pos-right .preview-btns { justify-content: flex-end; }
</style>
{% endblock %}

{% block js %}
<script>
const col = '{{ col }}';
const { createApp, ref, reactive, onMounted } = Vue;

const app = createApp({
  delimiters: ['${', '}'],
  setup() {
    const loading = ref(false);
    const list = ref([]);
    const total = ref(0);
    const page = ref(1);
    const pageSize = ref(20);
    const query = reactive({ keyword: '', status: '' });

    const dialogVisible = ref(false);
    const dialogTitle = ref('新增Banner');
    const activeTab = ref('basic');
    const saving = ref(false);
    const fileInput = ref(null);

    const defaultForm = {
      id: null, title: '', subtitle: '', description: '', image: '',
      btn1_text: '了解更多', btn1_link: '#', btn1_show: 1,
      btn2_text: '我要捐赠', btn2_link: '#', btn2_show: 1,
      position: 'left', glass: 1, sort: 1, status: 1
    };
    const form = reactive({ ...defaultForm });

    async function loadList() {
      loading.value = true;
      try {
        const params = new URLSearchParams({ col, page: page.value, pageSize: pageSize.value, ...query });
        const res = await fetch('/admin/content/banner/list?' + params).then(r => r.json());
        if (res.code === 0) {
          list.value = res.data.data || [];
          total.value = res.data.count || 0;
        }
      } finally { loading.value = false; }
    }

    function resetQuery() {
      query.keyword = '';
      query.status = '';
      page.value = 1;
      loadList();
    }

    function openDialog(item) {
      activeTab.value = 'basic';
      if (item) {
        dialogTitle.value = '编辑Banner';
        Object.assign(form, {
          id: item.id, title: item.title, subtitle: item.subtitle || '', description: item.description || '',
          image: item.image, btn1_text: item.btn1_text || '', btn1_link: item.btn1_link || '',
          btn1_show: item.btn1_show, btn2_text: item.btn2_text || '', btn2_link: item.btn2_link || '',
          btn2_show: item.btn2_show, position: item.position || 'left', glass: item.glass,
          sort: item.sort || 1, status: item.status
        });
      } else {
        dialogTitle.value = '新增Banner';
        Object.assign(form, { ...defaultForm, sort: list.value.length + 1 });
      }
      dialogVisible.value = true;
    }

    function triggerUpload() {
      fileInput.value?.click();
    }

    async function handleUpload(e) {
      const file = e.target.files[0];
      if (!file) return;
      const formData = new FormData();
      formData.append('file', file);
      try {
        const res = await fetch('/admin/upload', { method: 'POST', body: formData }).then(r => r.json());
        if (res.code === 0) {
          form.image = res.data.url;
          ElementPlus.ElMessage.success('上传成功');
        } else {
          ElementPlus.ElMessage.error(res.msg || '上传失败');
        }
      } catch (err) {
        ElementPlus.ElMessage.error('上传失败');
      }
      e.target.value = '';
    }

    function refreshPreview() {
      // 触发Vue响应式更新
    }

    async function saveItem() {
      if (!form.title.trim()) { ElementPlus.ElMessage.warning('请输入标题'); return; }
      if (!form.image) { ElementPlus.ElMessage.warning('请上传图片'); return; }
      saving.value = true;
      try {
        const url = form.id ? '/admin/content/banner/edit' : '/admin/content/banner/add';
        const body = { ...form, col };
        const res = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }).then(r => r.json());
        if (res.code === 0) {
          ElementPlus.ElMessage.success('保存成功');
          dialogVisible.value = false;
          loadList();
        } else {
          ElementPlus.ElMessage.error(res.msg || '保存失败');
        }
      } finally { saving.value = false; }
    }

    async function deleteItem(item) {
      try {
        await ElementPlus.ElMessageBox.confirm('确定删除"' + item.title + '"？', '提示', { type: 'warning' });
        const res = await fetch('/admin/content/banner/delete', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: item.id }) }).then(r => r.json());
        if (res.code === 0) {
          ElementPlus.ElMessage.success('删除成功');
          loadList();
        } else {
          ElementPlus.ElMessage.error(res.msg || '删除失败');
        }
      } catch {}
    }

    onMounted(() => loadList());

    return {
      loading, list, total, page, pageSize, query,
      dialogVisible, dialogTitle, activeTab, saving, form, fileInput,
      loadList, resetQuery, openDialog, triggerUpload, handleUpload, refreshPreview, saveItem, deleteItem
    };
  }
});

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app.use(ElementPlus, { locale: ElementPlusLocaleZhCn });
app.mount('#bannerApp');
</script>
{% endblock %}