cfc/cfc-web/src/views/admin/HomeBannerManage.vue

<template>
  <div class="home-banner-manage admin-page">
    <el-card>
      <PageHeader slot="header" title="首页广告栏">
        
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="openDialog()">新增广告位</el-button>
      
</PageHeader>

      <div class="filter-bar" style="margin-bottom:12px;">
        <el-select v-model="filterStatus" placeholder="启用状态" @change="loadList" clearable style="width:120px;" clearable>
          <el-option label="全部状态" value="" />
          <el-option label="已启用" value="1" />
          <el-option label="已禁用" value="0" />
        </el-select>
        <el-select v-model="filterType" placeholder="类型" @change="loadList" clearable style="width:120px;">
          <el-option label="全部类型" value="" />
          <el-option label="活动" value="activity" />
          <el-option label="商品" value="product" />
          <el-option label="文章" value="article" />
          <el-option label="链接" value="link" />
        </el-select>
        <el-button type="primary" size="mini" @click="loadList">查询</el-button>
        <el-button size="mini" @click="resetFilter">重置</el-button>
      </div>

      <div class="adm-table-wrap">
        <el-table height="100%" :data="list" v-loading="loading" border stripe>
          <el-table-column prop="id" label="ID" width="60" />
          <el-table-column label="类型" width="80">
            <template slot-scope="{ row }">
              <el-tag size="mini" :type="typeTag(row.bannerType)">{{ typeLabel(row.bannerType) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="标题" min-width="120" show-overflow-tooltip>
            <template slot="header"><span class="sort-header" @click.stop="onSortClick('title')">标题<span v-if="sortIndex('title') !== null" class="sort-index" :class="sortClass('title') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('title') }}</span>{{ sortIcon('title') }}</span></template>
            <template slot-scope="{ row }">{{ row.title }}</template>
          </el-table-column>
          <el-table-column label="关联内容" width="160">
            <template slot-scope="{ row }">
              <div v-if="row.bannerType === 'activity' && row.refId">
                <el-tag size="mini" type="primary">活动 #{{ row.refId }}</el-tag>
              </div>
              <div v-else-if="row.bannerType === 'product' && row.refId">
                <el-tag size="mini" type="info">商品 #{{ row.refId }}</el-tag>
              </div>
              <div v-else-if="row.bannerType === 'article' && row.refId">
                <el-tag size="mini" type="success">文章 #{{ row.refId }}</el-tag>
              </div>
              <div v-else-if="row.bannerType === 'link' && row.linkUrl">
                <el-tag size="mini" type="info">{{ row.linkUrl }}</el-tag>
              </div>
              <div v-else style="color:#bbb">-</div>
            </template>
          </el-table-column>
          <el-table-column label="封面" width="80">
            <template slot-scope="{ row }">
              <img v-if="row.coverImage" :src="row.coverImage" style="width:50px;height:35px;object-fit:cover;border-radius:4px;" />
              <span v-else style="color:#999">无</span>
            </template>
          </el-table-column>
          <el-table-column label="排序" width="80">
            <template slot-scope="{ row }">
              <el-input-number v-model="row.sortOrder" :min="0" :max="999" size="mini" @change="onSortChange(row)" controls-position="right" />
            </template>
          </el-table-column>
          <el-table-column label="投放时间" width="180">
            <template slot-scope="{ row }">
              <span v-if="row.startTime || row.endTime">{{ formatDate(row.startTime) }} ~ {{ formatDate(row.endTime) }}</span>
              <span v-else style="color:#bbb">不限</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="80">
            <template slot-scope="{ row }">
              <el-switch v-model="row.enabled" :active-value="1" :inactive-value="0" @change="onToggle(row)" />
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="创建时间" width="160">
            <template slot-scope="{ row }">{{ formatTime(row.createdAt) }}</template>
          </el-table-column>
          <el-table-column label="操作" width="140" fixed="right">
            <template slot-scope="{ row }">
              <el-button size="mini" type="primary" @click="openDialog(row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
      </el-table>
      </div>

      <div class="pagination-wrap" style="margin-top:16px;text-align:right;">
        <el-pagination
          @current-change="handlePageChange"
          :current-page="page"
          :page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next"
          background
        />
      </div>
    </el-card>

    <!-- 编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px" :close-on-click-modal="false">
      <el-form :model="form" :rules="rules" ref="bannerForm" label-width="150px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="展示标题，最多50字" maxlength="50" show-word-limit />
        </el-form-item>

        <el-form-item label="类型" prop="bannerType">
          <el-select v-model="form.bannerType" placeholder="选择类型" style="width:100%;">
            <el-option label="活动" value="activity" />
            <el-option label="商品" value="product" />
            <el-option label="文章" value="article" />
            <el-option label="链接" value="link" />
          </el-select>
        </el-form-item>

        <!-- 活动选择器 -->
        <el-form-item v-if="form.bannerType === 'activity'" label="关联活动">
          <el-select
            v-model="form.refId"
            placeholder="搜索活动"
            filterable
            :remote="true"
            :remote-method="searchActivities"
            :loading="activityLoading"
            style="width:100%"
            clearable
          >
            <el-option v-for="item in activityOptions" :key="item.id" :label="item.title + ' (ID:' + item.id + ')'" :value="item.id" />
            <el-option v-if="activityOptions.length === 0 && !activityLoading" label="暂无数据" value="" disabled />
          </el-select>
        </el-form-item>

        <!-- 商品选择器 -->
        <el-form-item v-if="form.bannerType === 'product'" label="关联商品">
          <el-select
            v-model="form.refId"
            placeholder="搜索商品"
            filterable
            :remote="true"
            :remote-method="searchProducts"
            :loading="productLoading"
            style="width:100%"
            clearable
          >
            <el-option v-for="item in productOptions" :key="item.id" :label="item.name + ' (¥' + (item.price/100).toFixed(2) + ')'" :value="item.id" />
            <el-option v-if="productOptions.length === 0 && !productLoading" label="暂无数据" value="" disabled />
          </el-select>
        </el-form-item>

        <!-- 文章选择器 -->
        <el-form-item v-if="form.bannerType === 'article'" label="关联文章">
          <el-select
            v-model="form.refId"
            placeholder="搜索文章"
            filterable
            :remote="true"
            :remote-method="searchArticles"
            :loading="articleLoading"
            style="width:100%"
            clearable
          >
            <el-option v-for="item in articleOptions" :key="item.id" :label="item.title + ' (ID:' + item.id + ')'" :value="item.id" />
            <el-option v-if="articleOptions.length === 0 && !articleLoading" label="暂无数据" value="" disabled />
          </el-select>
        </el-form-item>

        <!-- 链接类型表单 -->
        <el-form-item v-if="form.bannerType === 'link'" label="跳转链接">
          <el-input v-model="form.linkUrl" placeholder="小程序页面路径(如 /pages/activity/activity-detail/activity-detail?id=123)" />
          <el-button type="success" size="mini" @click="selectMiniPage">选择小程序页面</el-button>
        </el-form-item>

        <!-- 封面图 -->
        <el-form-item label="封面图">
          <el-upload
            :action="uploadActionUrl"
            :headers="uploadHeaders"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :before-upload="beforeUpload"
            :show-file-list="false"
            accept="image/jpeg,image/png,image/gif,image/webp"
          >
            <img v-if="form.coverImage" :src="form.coverImage" class="cover-preview" />
            <el-button v-else type="primary" plain>+ 上传封面</el-button>
          </el-upload>
          <div v-if="form.coverImage" style="margin-top:8px;">
            <el-image :src="form.coverImage" style="width:200px;height:120px;" fit="cover" />
          </div>
          <el-button v-if="form.coverImage" size="mini" type="text" style="margin-left:10px;" @click="form.coverImage = ''">清除</el-button>
          <div style="margin-top:4px;font-size:12px;color:#999;">建议尺寸 750×320rpx（约 2.35:1），单张不超过 5MB</div>
        </el-form-item>

        <el-form-item label="排序">
          <el-input-number v-model="form.sortOrder" :min="0" :max="999" style="width:100px;" />
        </el-form-item>

        <el-form-item label="投放时间">
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            placeholder="开始时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="timestamp"
            style="margin-right:8px;"
          />
          <span>至</span>
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            placeholder="结束时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="timestamp"
            style="margin-left:8px;"
          />
        </el-form-item>

        <el-form-item label="启用">
          <el-switch v-model="form.enabled" :active-value="1" :inactive-value="0" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getHomeBannerList, saveHomeBanner, deleteHomeBanner, batchDeleteHomeBanner, toggleHomeBanner, updateBannerSort } from '@/api/homeBanner'
import { getActivityList } from '@/api/activity'
import { getProductList } from '@/api/admin'
import { adminArticleList } from '@/api/article'

// 小程序已注册页面（供链接类型选择）
const MINI_PAGES = [
  { path: '/pages/activity/index', label: '活动中心' },
  { path: '/pages/discover/index', label: '发现' },
  { path: '/pages/shop/index/index', label: '商城' },
  { path: '/pages/article-center/index', label: '知识分享' },
  { path: '/pages/diet/index', label: '饮食' },
  { path: '/pages/health/report-list', label: '健康报告' },
  { path: '/pages/energy/index', label: '五维能量' },
  { path: '/pages/membership/index', label: '会员中心' },
  { path: '/pages/promotion/index', label: '财富中心' },
  { path: '/pages/tianpan/index', label: '家庭天盘' },
  { path: '/pages/assessment/apply', label: '申请测评' },
  { path: '/pages/tasks/tasks', label: '任务列表' }
]

export default {
  data() {
    return {
      list: [],
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      filterStatus: '',
      filterType: '',
      dialogVisible: false,
      submitLoading: false,
      editId: null,
      form: {
        id: null,
        title: '',
        bannerType: 'activity',
        refId: null,
        coverImage: '',
        linkUrl: '',
        sortOrder: 0,
        enabled: 1,
        startTime: null,
        endTime: null
      },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        bannerType: [{ required: true, message: '请选择类型', trigger: 'change' }],
        refId: [
          {
            required: true,
            message: '请选择关联内容',
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (this.form.bannerType === 'link') {
                callback()
              } else if (!value || value <= 0) {
                callback(new Error('请选择关联内容'))
              } else {
                callback()
              }
            }
          }
        ],
        // 封面图必填(产品类型)
        coverImage: [
          {
            required: true,
            message: '请上传封面图',
            trigger: 'change'
          }
        ]
      },
      // 活动搜索状态
      activitySearchKeyword: '',
      activityLoading: false,
      activityOptions: [],
      activityPage: 1,
      // 商品搜索状态
      productSearchKeyword: '',
      productLoading: false,
      productOptions: [],
      productPage: 1,
      // 文章搜索状态
      articleSearchKeyword: '',
      articleLoading: false,
      articleOptions: [],
      articlePage: 1,
      showPagePicker: false
    }
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 280
    },
    dialogTitle() {
      return this.editId ? '编辑广告位' : '新增广告位'
    },
    uploadActionUrl() {
      const baseURL = process.env.VUE_APP_BASE_API || ''
      return baseURL + '/api/admin/articles/upload/image'
    },
    uploadHeaders() {
      const token = localStorage.getItem('token')
      return token ? { Authorization: 'Bearer ' + token } : {}
    }
  },
  mounted() {
    this.loadList()
  },
  methods: {
    loadList() {
      var self = this
      self.loading = true
      var params = {
        current: self.page,
        size: self.pageSize
      }
      if (self.filterStatus !== '') params.enabled = self.filterStatus
      if (self.filterType !== '') params.bannerType = self.filterType
      getHomeBannerList(params).then(function(res) {
        self.loading = false
        if (res.data && res.data.code === 200) {
          var d = res.data.data || {}
          self.list = d.list || []
          self.total = d.total || 0
        } else if (res.data && res.data.list !== undefined) {
          self.list = res.data.list || []
          self.total = res.data.total || 0
        }
      }).catch(function() {
        self.loading = false
        self.$message.error('加载失败')
      })
    },
    handlePageChange(newPage) {
      this.page = newPage
      this.loadList()
    },
    resetFilter() {
      this.filterStatus = ''
      this.filterType = ''
      this.page = 1
      this.loadList()
    },
    openDialog(row) {
      if (row) {
        this.editId = row.id
        this.form = {
          id: row.id,
          title: row.title,
          bannerType: row.bannerType,
          refId: row.refId,
          coverImage: row.coverImage || '',
          linkUrl: row.linkUrl || '',
          sortOrder: row.sortOrder || 0,
          enabled: row.enabled != null ? row.enabled : 1,
          startTime: row.startTime || null,
          endTime: row.endTime || null
        }
        // 根据类型预填搜索结果
        if (row.bannerType === 'activity') {
          this.activitySearchKeyword = ''
          this.activityOptions = []
          this.loadActivityOptions()
        } else if (row.bannerType === 'product') {
          this.productSearchKeyword = ''
          this.productOptions = []
          this.loadProductOptions()
        } else if (row.bannerType === 'article') {
          this.articleSearchKeyword = ''
          this.articleOptions = []
          this.loadArticleOptions()
        }
      } else {
        this.editId = null
        this.form = {
          id: null,
          title: '',
          bannerType: 'activity',
          refId: null,
          coverImage: '',
          linkUrl: '',
          sortOrder: 0,
          enabled: 1,
          startTime: null,
          endTime: null
        }
        this.activityOptions = []
        this.productOptions = []
        this.articleOptions = []
      }
      this.dialogVisible = true
      this.$nextTick(function() {
        if (this.$refs.bannerForm) this.$refs.bannerForm.clearValidate()
      }.bind(this))
    },
    handleSubmit() {
      var self = this
      self.$refs.bannerForm.validate(function(valid) {
        if (!valid) return
        self.submitLoading = true
        var saveData = Object.assign({}, self.form)
        // 如果类型是link，清空refId；反之清空linkUrl
        if (saveData.bannerType === 'link') {
          saveData.refId = null
        } else {
          saveData.linkUrl = ''
        }
        saveHomeBanner(saveData).then(function(res) {
          self.submitLoading = false
          if (res.data && res.data.code === 200) {
            self.$message.success('保存成功')
            self.dialogVisible = false
            self.loadList()
          } else {
            self.$message.error(res.data && res.data.message ? res.data.message : '保存失败')
          }
        }).catch(function(e) {
          self.submitLoading = false
          self.$message.error('保存失败')
        })
      })
    },
    handleDelete(row) {
      var self = this
      this.$confirm('确定删除该广告位？', '提示', { type: 'warning' }).then(function() {
        deleteHomeBanner({ id: row.id }).then(function(res) {
          if (res.data && res.data.code === 200) {
            self.$message.success('删除成功')
            self.loadList()
          } else {
            self.$message.error('删除失败')
          }
        }).catch(function() {
          self.$message.error('删除失败')
        })
      }).catch(function() {})
    },
    onToggle(row) {
      toggleHomeBanner({ id: row.id, enabled: row.enabled }).then(function(res) {
        if (res.data && res.data.code === 200) {
          self.$message.success(row.enabled === 1 ? '已启用' : '已禁用')
        }
      }).catch(function() {})
    },
    onSortChange(row) {
      updateBannerSort({ id: row.id, sortOrder: row.sortOrder }).catch(function() {})
    },

    // --- 活动搜索 ---
    searchActivities: async function(query) {
      this.activityLoading = true
      this.activityOptions = []
      try {
        const res = await getActivityList({
          keyword: query || undefined,
          page: 1,
          size: 20
        })
        const data = (res && res.data) || {}
        this.activityOptions = data.records || []
        this.activityPage = 1
        this.activityLoading = false
      } catch (e) {
        console.error('[HomeBanner] 搜索活动失败', e)
        this.activityLoading = false
      }
    },
    loadActivityOptions() {
      this.searchActivities(this.activitySearchKeyword)
    },

    // 商品搜索
    searchProducts: async function(query) {
      this.productLoading = true
      this.productOptions = []
      try {
        const res = await getProductList({
          keyword: query || undefined,
          page: 1,
          size: 20
        })
        const data = (res && res.data) || {}
        this.productOptions = data.records || []
        this.productPage = 1
        this.productLoading = false
      } catch (e) {
        console.error('[HomeBanner] 搜索商品失败', e)
        this.productLoading = false
      }
    },
    loadProductOptions() {
      this.searchProducts(this.productSearchKeyword)
    },

    // 文章搜索
    searchArticles: async function(query) {
      this.articleLoading = true
      this.articleOptions = []
      try {
        const res = await adminArticleList({
          keyword: query || undefined,
          current: 1,
          size: 20
        })
        const data = (res && res.data) || {}
        this.articleOptions = data.list || data.records || []
        this.articlePage = 1
        this.articleLoading = false
      } catch (e) {
        console.error('[HomeBanner] 搜索文章失败', e)
        this.articleLoading = false
      }
    },
    loadArticleOptions() {
      this.searchArticles(this.articleSearchKeyword)
    },

    handleUploadSuccess(res) {
      if (res && res.code === 200 && res.data && res.data.url) {
        this.form.coverImage = res.data.url
        this.$message.success('上传成功')
      } else {
        this.$message.error('上传失败')
      }
    },
    handleUploadError(err) {
      console.error('[HomeBanner] 上传失败', err)
      this.$message.error('图片上传失败，请重试')
    },
    beforeUpload(file) {
      const isImage = file.type.startsWith('image/jpeg') || file.type.startsWith('image/png') || file.type.startsWith('image/gif') || file.type.startsWith('image/webp')
      if (!isImage) {
        this.$message.error('只能上传图片格式(jpg/png/gif/webp)')
        return false
      }
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('图片大小不能超过 5MB')
        return false
      }
      return true
    },
    selectMiniPage() {
      this.showPagePicker = true
    },
    selectPage(path) {
      this.form.linkUrl = path
      this.showPagePicker = false
    },
    // --- 工具方法 ---
    typeLabel(type) {
      var map = { activity: '活动', product: '商品', article: '文章', link: '链接' }
      return map[type] || type || '-'
    },
    typeTag(type) {
      var map = { activity: 'success', product: 'warning', article: 'info', link: 'info' }
      return map[type] || ''
    },
    sortIndex(col) {
      return this.sortCol === col ? (this.sortDir === 'asc' ? 1 : 2) : null
    },
    sortClass(col) {
      return this.sortCol === col ? this.sortDir : ''
    },
    sortIcon(col) {
      if (this.sortCol !== col) return '↕'
      return this.sortDir === 'asc' ? '↑' : '↓'
    },
    onSortClick(col) {
      if (this.sortCol === col) {
        this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc'
      } else {
        this.sortCol = col
        this.sortDir = 'asc'
      }
      this.loadList()
    },


    // 选择小程序页面
    selectMiniPage() {
      this.$message.info('小程序页面选择功能待后端开发')
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isGIF = file.type === 'image/gif'
      const isQQ = file.type === 'image/webp'
      if (!isJPG && !isPNG && !isGIF && !isQQ) {
        this.$message.error('只能上传 jpg/png/gif/webp 格式的图片!')
        return false
      }
      this.$message.warning('上传图片受限，请使用后台上传接口上传封面图')
      return false
    }
  }
}
</script>

<style scoped>
.admin-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-page-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
</style>