menduner-admin/src/views/menduner/system/web/index.vue

<template>
  <ContentWrap>
    <el-tabs v-model="tab" @tab-click="tabClick">
      <el-tab-pane v-for="(k, i) in tabList" :key="i" :label="k.label" :name="k.value"/>
    </el-tabs>
    <div style="display: flex; justify-content: space-between;">
      <div style="display: flex; color: orange; align-items: center;">
        <Icon :size="20" icon="ep:warning" class="mr-3px" />
        图片规格: 
        <span class="m-l-10px">{{ tabList[tab].size }}</span>
      </div>
      <div>
        <el-button @click="getList"><Icon icon="ep:refresh" class="mr-5px" /> 刷 新</el-button>
        <el-button type="primary" @click="handleAdd"><Icon icon="ep:plus" class="mr-5px" />新 增</el-button>
      </div>
    </div>
    <el-table v-loading="loading" :data="info[tabList[tab].key]" :stripe="true">
      <!-- <el-table-column label="排序" align="center" prop="sort" /> -->
      <el-table-column label="标题" align="center" prop="title" />
      <el-table-column label="图片" align="center" prop="img">
        <template #default="scope">
          <el-image v-if="scope.row.img" class="h-150px w-200px" :initial-index="info[tabList[tab].key].findIndex(e => e.mark === scope.row.mark)" :src="scope.row.img" lazy preview-teleported :preview-src-list="info[tabList[tab].key].map(e => e.img)" fit="scale-down" />
        </template>
      </el-table-column>
      <el-table-column label="点击跳转链接" align="center" prop="link">
        <template #default="scope">
          <el-link v-if="scope.row.link" :href="scope.row.link" type="primary" target="_blank">点击查看</el-link>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template #default="scope">
          <span :style="{'color': scope.row.status === '0' ? '#67c23a': '#f56c6c'}">{{ scope.row.status === '0' ? '启用中' : '停用' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" min-width="220">
        <template #default="scope">
          <el-button link type="primary" @click="handleEdit(scope.row.mark)">编辑</el-button>
          <el-button link type="danger" @click="handleDelete(scope.row.mark)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <WebContentForm ref="formRef" @success="getList" />

</template>

<script setup lang="ts">
import { WebContentApi } from '@/api/menduner/system/web'
import WebContentForm from './WebContentForm.vue'

/** 页面内容 列表 */
defineOptions({ name: 'WebContent' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(false)
const tab = ref(2)
let info = reactive({})
const tabList = [
  { label: 'PC首页左侧广告图', value: 0, key: 'pcLeft', size: '宽869px*高1512px' },
  { label: 'PC首页弹窗广告图', value: 1, key: 'pcAdvertisement', size: '宽900px*高530px' },
  { label: 'PC首页轮播图', value: 2, key: 'pcHomeCarousel', size: '宽792px*高392px' },
  { label: 'PC登录页轮播图', value: 3, key: 'pcLoginCarousel', size: '宽792px*高392px' },
  { label: '小程序首页轮播图', value: 4, key: 'appHomeCarousel', size: '宽750px*高350px' },
  { label: '小程序首页弹窗广告图', value: 5, key: 'appAdvertisement', size: '宽331px*高442px' },
]

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await WebContentApi.getWebContent(1)
    info = data
  } finally {
    loading.value = false
  }
}

const tabClick = (val) => {
  tab.value = val.paneName
  getList()
}

const handleAdd = () => {
  formRef.value.open('add', tabList[tab.value].key, tabList[tab.value].label)
}

const formRef = ref()
const handleEdit = (mark: string) => {
  formRef.value.open('edit', tabList[tab.value].key, tabList[tab.value].label, mark)
}

/** 删除按钮操作 */
const handleDelete = async (mark: string) => {
  const index = info[tabList[tab.value].key].findIndex((item) => item.mark === mark)
  if (index === -1) return message.warning('图片不存在')
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    info[tabList[tab.value].key].splice(index, 1)
    await WebContentApi.updateWebContent(info)

    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>