caimei365-manager-ui/src/views/operate/home/components/exclusive-img.vue

<template>
  <div class="app-container">
    <!-- 顶部操作区域 -->
    <div class="filter-container" style="padding-bottom: 0;">
      <div class="filter-control">
        <span>网站状态:</span>
        <el-select v-model="listQuery.status" style="width: 120px" clearable @change="getList">
          <el-option value="" label="请选择" />
          <el-option :value="0" label="已启用" />
          <el-option :value="1" label="已停用" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>小程序状态:</span>
        <el-select v-model="listQuery.status" style="width: 120px" clearable @change="getList">
          <el-option value="" label="请选择" />
          <el-option :value="0" label="已启用" />
          <el-option :value="1" label="已停用" />
        </el-select>
      </div>
      <div class="filter-control">
        <el-button type="primary" @click="getList"> 查询 </el-button>
        <el-button type="primary" @click="handleoOerate('add')"> 添加专属广告图 </el-button>
      </div>
    </div>
    <!-- 列表 -->
    <el-table v-loading="isLoading" :data="list" border style="width: 100%" height="500">
      <el-table-column prop="title" label="轮播标题" align="center" width="200" />
      <el-table-column prop="image" label="网站广告图" align="center">
        <template slot-scope="{ row }">
          <img :src="row.image" alt="" style="width: 132px; height: 60px;" />
        </template>
      </el-table-column>
      <el-table-column prop="crmImage" label="小程序广告图" align="center">
        <template slot-scope="{ row }">
          <img v-if="row.crmImage" :src="row.crmImage" alt="" style="width: 132px; height: 60px;" />
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="wwwEnabledStatus" label="网站状态" align="center" width="150">
        <template slot-scope="{ row }">
          <el-tag v-if="row.wwwEnabledStatus === 1" type="success" size="small">已启用</el-tag>
          <el-tag v-else type="danger" size="small">已停用</el-tag>
          <el-button v-if="row.wwwEnabledStatus === 1" type="primary" size="mini" @click="handleShangeStatus(row.id, row.wwwEnabledStatus, 0)">
            停用
          </el-button>
          <el-button v-else type="primary" size="mini" @click="handleShangeStatus(row.id, row.wwwEnabledStatus, 0)">
            启用
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="crmEnabledStatus" label="小程序状态" align="center" width="150">
        <template slot-scope="{ row }">
          <el-tag v-if="row.crmEnabledStatus === 1" type="success" size="small">已启用</el-tag>
          <el-tag v-else type="danger" size="small">已停用</el-tag>
          <el-button v-if="row.crmEnabledStatus === 1" type="primary" size="mini" @click="handleShangeStatus(row.id, row.crmEnabledStatus, 1)">
            停用
          </el-button>
          <el-button v-else type="primary" size="mini" @click="handleShangeStatus(row.id, row.crmEnabledStatus, 1)">
            启用
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="220">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" style="margin: 2px" @click="handleoOerate('edit', row)">
            编辑
          </el-button>
          <el-button type="danger" size="mini" style="margin: 2px" @click="handleDelete(row)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <pagination
      :total="total"
      :page-sizes="[20]"
      :page-size="20"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getTopAdvertisement"
    />
  </div>
</template>

<script>

import { getTopAdvertisement, topAdvertisementDel, updateTopStatus } from '@/api/activity/home/home'
export default {
  name: 'ExclusiveImg',
  filters: {},
  data() {
    return {
      isLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 10
      },
      list: [],
      total: 0,
      timesValue: [],
      logoForm: {
        id: '',
        title: '',
        logo: ''
      },
      rules: {
        title: [{ required: true, message: '请输入广告图标题', trigger: 'blur' }],
        status: [{ required: true, message: '请设置统计状态', trigger: 'blur' }],
        logo: [{ required: true, message: '请上传弹窗图片', trigger: 'blur' }]
      }
    }
  },
  computed: {
    getToken() {
      return {
        token: this.$store.getters.token
      }
    },
    actionUrl() {
      return process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData'
    }
  },
  watch: {
    timesValue: {
      handler() {
        this.getList()
      },
      immediate: true
    }
  },
  created() {
    this.getList()
  },
  mounted() {},
  methods: {
    // 获取专属广告图列表
    getList() {
      this.listQuery.pageNum = 1
      this.list = []
      this.getTopAdvertisement()
    },

    // 获取专属广告图列表
    async getTopAdvertisement() {
      try {
        this.isLoading = true
        const res = await getTopAdvertisement(this.listQuery)
        this.list = res.data.results
        this.total = res.data.totalRecord
        this.isLoading = false
      } catch (error) {
        console.log(error)
      }
    },
    // 添加专属广告图
    handleoOerate(type, row) {
      if (type === 'add') {
        this.$router.push({
          path: '/operate/zones/exclusive-img-edit',
          query: { type: type }
        })
      } else {
        this.$router.push({
          path: '/operate/zones/exclusive-img-edit',
          query: { id: row.id, type: type }
        })
      }
    },
    // 操作启用停用广告图
    handleShangeStatus(id, status, type) {
      let confirmTxt = ''
      let paramsStatus
      if (status === 1) {
        confirmTxt = '确定停用该广告图？'
        paramsStatus = 0
      } else {
        confirmTxt = '确定启用该广告图？'
        paramsStatus = 1
      }
      this.$confirm(confirmTxt)
        .then((_) => {
          this.updateTopStatus(id, paramsStatus, type)
        })
        .catch(() => {
          this.$notify.info({ title: '用户取消操作~', message: '' })
        })
    },
    // 停用启用广告图
    async updateTopStatus(id, paramsStatus, type) {
      try {
        await updateTopStatus({ id: id, status: paramsStatus, type: type })
        this.$notify.success({ title: '更新成功~', message: '' })
        this.getList()
      } catch (error) {
        console.log('error', error)
      }
    },
    // 操作删除广告图
    async handleDelete(row) {
      try {
        await this.$confirm('确定删除该广告图吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        this.topAdvertisementDel(row)
      } catch (error) {
        this.$notify.info('用户取消操作~')
      }
    },
    // 调用删除广告图
    async topAdvertisementDel(row) {
      try {
        await topAdvertisementDel({ id: row.id })
        this.$notify.success({ title: '删除成功~', message: '' })
        this.getList()
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style>

</style>