short-play-api/application/admin/view/wallpaper/index.html

{extend name="public/base" /} {block name="body"}
<style>
.body-content{
    width: 96%;
    height:100%;
    display: flex;
    justify-content: center; 
    display:block;
    margin: 0 auto;
    padding-bottom: 50px;
}
.tit{
    width: 100%;
    padding-top:18px;
}
.inp{
    width: 250px;
}
.avatar {
width: 178px;
display: block;
}
  .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: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
input[type=file]{
    display: none;
}
</style>


<div class="main-box clearfix" id="app">
<div class="body-content">

  <el-button type="primary" @click="addskits()" style="margin-top:20px;">上传</el-button>

  <el-table
    :data="tableData"
    style="width: 100%">
      
    <el-table-column
      fixed
      prop="id"
      label="ID">
    </el-table-column>
    
    <el-table-column
      label="图片">
        <template slot-scope="scope">
            <el-image
              style="border-radius:4px;"
              :src="scope.row.url"></el-image>
        </template>        
    </el-table-column>
     
    <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">        
        <el-button
          @click="deleteRow(scope.row.id)"
          type="text"
          size="small">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>


<el-dialog title="新增壁纸" :visible.sync="dialogFormVisible">
  <el-form :model="addinfo">
      
    <el-form-item label="壁纸" :label-width="formLabelWidth">    
        <el-upload
          class="avatar-uploader"
          action="{:url('Wallpaper/upimg')}"
          :show-file-list="true"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addinfoposa(addinfo)">确 定</el-button>
  </div>
</el-dialog>


</div>
</div>
{/block} {block name="script"}
<script>
    var app = new Vue({
        el: '#app',
        data: {
        tableData: [],
        loading:false,
        dialogFormVisible:false,
        formLabelWidth:"100px",
        imageUrl:'',
        addinfo:[],
        },
        methods: {
           refreshs() {
                this.loading = true
                var that = this
                $.ajax({
                    type: "POST",
                    url: "{:url('Wallpaper/refreshs')}",
                    data: {},
                    dataType: "json",
                    success: function(data) {
                        that.loading = false
                        if (data.status == 1) {
                              that.tableData = data.list
                        }
                    }
                });
            },
            addskits(){
                this.dialogFormVisible = true
                this.addinfo = []                
            },
            addinfoposa(){
                var that = this
                $.ajax({
                    type: "POST",
                    url: "{:url('Wallpaper/add')}",
                    data: {img:that.addinfo.cover},
                    dataType: "json",
                    success: function(data) {
                        if (data.status == 1) {
                            that.refreshs()
                            that.$message({
                            type:'success',
                            message:'成功!'
                            })
                            that.dialogFormVisible = false
                            that.addinfo = []
                            that.imageUrl = ''
                        }
                    }
                })
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = res.thumb_url
                this.addinfo.cover = res.thumb_url
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                  this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
            deleteRow(id){
                var that = this
                $.ajax({
                    type: "POST",
                    url: "{:url('Wallpaper/deleteRow')}",
                    data: {id:id},
                    dataType: "json",
                    success: function(data) {
                        if (data.status == 1) {
                                that.refreshs()
                                that.$message({
                                type: 'success',
                                message: '删除成功!'
                                });
                        }
                    }
                })                   
            },            
        },
        created: function() {
            this.refreshs()
        }
    })
</script>
{/block}