webapp / GreenwayWeb

<!--  -->
<template>
  <div class="userStyle">
    <!-- 搜索 -->
    <div class="topSearch">
      <div class="formSearch">
        <el-form :inline="true" :model="formInline">
          <el-form-item label="广告名称">
            <el-input v-model="formInline.name" placeholder="请输入广告名称" />
          </el-form-item>
          <el-form-item label="广告状态">
            <el-select v-model="formInline.state" placeholder="请选择广告状态">
              <el-option label="有效" :value="1" />
              <el-option label="无效" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="search">查询</el-button>
            <el-button plain @click="clear">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="rightBTn">
        <el-button type="primary" @click="add">新增广告</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="tableBox">
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column prop="id" label="广告id" />
        <el-table-column ref="table" prop="popupImg" label="广告图片">
          <template slot-scope="scope">
            <a :href="scope.row.popupImg" style="color: #42b983" target="_blank"><img :src="scope.row.popupImg" alt="点击打开" class="el-avatar"></a>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="广告名称" />
        <el-table-column label="跳转类型" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.jumpType === 0">不跳转</span>
            <span v-if="scope.row.jumpType === 1">商品</span>
            <span v-if="scope.row.jumpType === 2">分类</span>
            <span v-if="scope.row.jumpType === 3">平台券</span>
            <span v-if="scope.row.jumpType === 4">跳转小程序</span>
            <span v-if="scope.row.jumpType === 5">公众号文章</span>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="启用时间">
          <template slot-scope="scope">
            <span>{{ scope.row.startTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间">
          <template slot-scope="scope">
            <span>{{ scope.row.endTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发布状态" align="center">
          <template slot-scope="scope">
            <div @click="onSale(scope.row.id,scope.row.status)">
              <el-tag v-if="scope.row.state === 1" style="cursor: pointer" :type="''">有效</el-tag>
              <el-tag v-else style="cursor: pointer" :type=" 'info' ">无效</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip width="300">
          <template slot-scope="scope">
            <div class="btnList">
              <el-button
                v-if="scope.row.state === 1"
                size="mini"
                type="primary"
                @click="onSale(scope.row.id,scope.row.state)"
              >
                下架
              </el-button>
              <el-button
                v-else
                size="mini"
                type="primary"
                @click="onSale(scope.row.id,scope.row.state)"
              >
                上架
              </el-button>
<!--              <el-button-->
<!--                v-if="scope.row.state === 1"-->
<!--                size="mini"-->
<!--                type="primary"-->
<!--                icon="el-icon-view"-->
<!--                @click="view(scope.row)"-->
<!--              >-->
<!--                查看-->
<!--              </el-button>-->
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="edit(scope.row)"
              >
                编辑
              </el-button>
              <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <ad-form ref="adForm" @reset="getAll" />
    <ad-detail ref="adDetail" />
  </div>
</template>

<script>
import {
  getList,
  del,
  toggle
} from '@/api/advert'

import AdForm from './form'
import AdDetail from './detail'
export default {
  components: { AdDetail, AdForm },
  data () {
    // 这里存放数据
    return {
      formInline: {
        page: '1', // 当前页
        pageSize: '10' // 每页记录数
      },
      total: 1,
      tableData: [],
      currentPage: 1
    }
  },
  mounted () {
    this.getAll()
  },
  // 方法集合
  methods: {
    // 初始化查询列表数据
    async getAll () {
      const formInline = this.formInline
      const res = await getList(formInline)
      this.tableData = res.data.list
      this.total = res.data.total
    },
    // 页码每页页数修改回调
    handleSizeChange (val) {
      this.formInline.pageSize = val
      this.getAll(this.formInline)
    },
    // 页码当前页修改回调
    handleCurrentChange (val) {
      this.formInline.page = val
      this.getAll()
    },
    // 查询
    search () {
      this.total = 1
      this.formInline.page = 1
      this.getAll()
    },
    // 清除
    clear () {
      this.formInline = {
        name: '', // 搜索字段
        state: '', // 是否启用 1-是 0-否
        page: '1', // 当前页
        pageSize: '10' // 每页记录数
      }
      this.getAll()
    },
    // 新增角色
    add () {
      this.$refs.adForm.show()
    },
    // 编辑角色
    edit (row) {
      this.$refs.adForm.show(row)
    },
    view (row) {
      this.$refs.adDetail.show(row)
    },
    // 删除权益
    async del (id) {
      this.$confirm('是否确认删除该内容？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          del({ id }).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getAll()
          })
        })
        .catch(() => {
          return false
        })
    }, onSale (id, state) {
      this.$confirm(`${state ? '确定让选择广告失效？' : '确定让选择广告生效？'}`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '我再想想',
        type: 'warning'
      })
        .then(() => {
          toggle({
            id,
            state: state === 0 ? 1 : 0
          }).then(({ data }) => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getAll()
          })
        })
        .catch(() => { })
    }
  }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import url("../../../styles/elDialog.scss");
.userStyle {
  padding: 20px;
  .topSearch {
    display: flex;
    justify-content: space-between;
    //align-items: center;
    .formSearch,
    .rightBTn {
      margin-left: 20px;
    }
  }
  .btnList .el-popover__reference{
    margin-left: 10px;
  }
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>