webapp / GreenwayWeb

<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>轮播图设置</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">轮播图管理</span></div>
      </div>
      <div>
        <div style="margin:0 0 20px 0px;">
          <el-button @click="addbuss(1)" style="background-color: #3F9B6A;color: #fff;padding:8px 15px;"
            icon="el-icon-circle-plus-outline"> 新增
          </el-button>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData"
          :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
          style="width: 100%">
          <el-table-column label="序号" width="auto" min-width="4%" prop="id">
            <template slot-scope="scope">
              {{scope.$index +1 }}
            </template>
          </el-table-column>
          <el-table-column label="轮播图" prop="" width="auto" min-width="20%">
            <template slot-scope="scope">
              <el-image  style="height: 80px;" :src="$baseURL+scope.row.imageUrl" fit="contain"></el-image>
            </template>
          </el-table-column>

          <el-table-column label="跳转地址" width="auto" min-width="20%" prop="jumpUrl" >
            <template slot-scope="scope">
              {{ scope.row.jumpUrl || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="auto" min-width="17%">
            <template slot-scope="scope">
              <div @click="handleDelete(scope.row)" class="tableBtn greens">删除</div>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: space-between;" class="bom">
          <div style="font-size: 14px;">共 <span style="color: #3F9B6A;">{{total}}</span> 项数据</div>
          <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
            background small layout="prev, pager, next" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
        <!-- 新建商家弹框 -->
        <el-dialog :title="index == 1?'新增':index == 2?'详情':'编辑'" :visible.sync="ggXin" custom-class="diaslog_zhong"
          style="padding: 0;" width="50%" class="dialog_css_Xq" center :close-on-click-modal="false"
          :show-close="false">
          <div style="padding: 30px;">
            <div style="margin-bottom: 20px;">
              <el-form ref="form" :model="formInline" label-width="80px">
                <el-form-item label="轮播图">
                  <upimg :limit="1" :cmpOption="{disabled:false,isSetCover:false}" filePath="lb" inputtype="imageUrl" :value="formInline.imageUrl" @changimg="e=>changimg(e,'imageUrl')"></upimg>
                  <!-- <upimg v-model="formInline.imageUrl" :limit="1" :fileSize="1"></upimg> -->
                </el-form-item>
                <el-form-item label="跳转地址">
                  <el-input v-model="formInline.jumpUrl" placeholder="请输入" />
                </el-form-item>
              </el-form>

            </div>
            <div style="display: flex;justify-content: flex-end;">
              <el-button @click="closeFn(1)" class="buttonHover"
                style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
              <el-button @click="addCheck(0)" v-if="index!= 2"
                style="background-color: #3F9B6A;color: #fff;padding:8px 15px;">确定</el-button>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>

  </div>
</template>

<script>
  import upimg from "@/components/ImageUpload/index";
  import {
    bannerGet,
    bannerAdd,
    bannerDel
  } from '../../api/banner';
  export default {
    components: {
      upimg
    },
    data() {
      return {
        rules: {},
        currentPage: 1,
        total: 100,
        flag: false,
        pageSize: 10,
        ggXin: false,
        index: 1,
        formInline: {
          imageUrl: '',
          jumpUrl: ''
        },
        tableData: [],
        formRul: {
          pageNumber: 1,
          pageSize: 10
        }
      }
    },
    computed: {},
    mounted() {

      this.getAll()
    },

    methods: {
      changimg(e, type) {
        this.formInline[type] = e
      },
      addbuss(val, item) {
        if (val == 1) {
          this.formInline = {
            imageUrl: '',
            jumpUrl: ''
          }
        }
        this.index = val
        this.ggXin = true
      },
      async getAll() {
        const res = await bannerGet(this.formRul)
        this.tableData = res.data.content
        this.total = res.data.content.length
      },
      onSubmit() {

      },
      handleSizeChange() {

      },
      handleCurrentChange() {

      },
      async addCheck() {
        await bannerAdd(this.formInline)
        this.ggXin = false
        this.getAll()
      },
      async handleDelete(row) {
        let that = this
        this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          bannerDel({
            id: row.id
          }).then(res => {
            console.error(res)
            if (res.code == 200) {
              this.$message({
                message:'删除成功',
                type: 'success'
              })
              this.getAll()
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }

          })
        })
      },
      closeFn() {
        this.ggXin = false
        this.index = 1
      }
    }
  }
</script>

<style scoped>
  .zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;

  }
  .chengeXia {
    border-bottom: 6px solid #3F9B6A;
    padding-bottom: 4px;
    color: #3F9B6A;
  }


  .formSearch {
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }


</style>
<style lang="scss" scoped>
  ::v-deep .el-dialog__body {
    padding: 0 0 !important;
  }


  .el-dialog__header{
    padding: 0;
    display: none;
  }
</style>