mashangyoujiu/Application/Admin/View/Banner/add.html

<!doctype html>
<html lang="en">
<!--[1.6.48]-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.css">
    <link rel="stylesheet" href="__PUBLIC__/css/system-gallery.css?v=1.0.3">
    <script src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.js"></script>
    <script charset="utf-8" src="__PUBLIC__/js/system-gallery.js?v=1.0.3"></script>
    <title>Banner</title>
    <style>
        html, body {
            background-color: rgb(246, 248, 249);
            font-size: 0;
            margin: 0;
            padding: 0;
        }

        .box {
            border: 1px solid #bbb;
            border-radius: 5px;
            background-color: white;
            padding-bottom: 20px;
        }

        .list {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 10px 0;
        }

        .title {
            background-color: #f5f5f5;
            color: black;
            font-size: 18px;
            border-bottom: 1px solid #e6e6e6;
            line-height: 60px;
            border-radius: 5px 5px 0 0;
            text-indent: 15px;
        }

        .left_name {
            width: 120px;
            text-align: right;
            font-size: 14px;
            line-height: 56px;
            color: #666;
            margin-right: 20px;
        }

        .file_label > img {
            max-height: 200px;
        }

        .tips {
            margin-left: 140px;
            font-size: 12px;
            color: #999;
        }
        .img-box{
            width: 150px;
            height: 190px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }
    </style>
</head>
<body>
<div style="padding: 30px;background-color: white" id="app" v-cloak>
    <div class="goodsBox">
        <div class="goods_title">
            <div class="goods_title_inner" style="font-size: 24px;margin-bottom: 50px;">
                banner添加
            </div>
        </div>
    </div>
    <form class="layui-form" id="form">
        <div class="list">
            <span class="left_name">banner图片：</span>
            <div class="img-box">
                <div class="el-upload el-upload--picture-card el-upload-list--picture-card"
                     @click="selectImage()">
                    <i v-if="!image" class="el-icon-plus"></i>
                    <img v-else class="el-upload-list__item-thumbnail img-auto" :src="image">
                </div>
                <el-button plain size="small" @click="selectImage('image')">选择图片</el-button>
            </div>
        </div>
        <p class="tips">(建议大小1920*661)</p>

        <div class="list">
            <label class="left_name">Banner类型</label>
            <div class="input_div">
                <el-select v-model="selectType" placeholder="请选择">
                    <el-option
                            v-for="item in selectList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="center">
            <el-button type="primary" size="medium" @click="save">提交</el-button>
        </div>
    </form>
    <el-dialog title="选择图片" :modal-append-to-body="false" :visible.sync="showSelectImage" custom-class="select-image-el-dialog"
               :top="'10px'">
        <template-select-image :can-select-num="1" @selectfile="selectFile"></template-select-image>
    </el-dialog>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                showSelectImage: false,
                image: '',
                image_id: '',
                selectType: 0,
                selectList: [
                    {name: '请选择类型', value: 0},
                    {name: '首页', value: 1},
                    {name: '关于我们', value: 2},
                    {name: '新闻中心', value: 3},
                    {name: '联系我们', value: 4},
                    {name: '产品中心', value: 5},
                ]
            }
        },
        methods: {
            selectFile: function (item) {
                console.log(item);
                this.showSelectImage = false;
                if (item.length) {
                    this.image_id = item[0].id;
                    this.image = item[0].path;
                }
            },
            selectImage: function () {
                this.showSelectImage = true;
            },
            save: function () {
                if (!this.image_id) {
                    this.$message({
                        type: 'warning',
                        message: '请选择图片',
                        duration: 1000
                    });
                    return false;
                }
                if (this.selectType == 0) {
                    this.$message({
                        type: 'warning',
                        message: '请选择类型',
                        duration: 1000
                    });
                    return false;
                }
                this.$loading({
                    lock: true,
                    text: '保存中，请等待',
                    spinner: 'el-icon-loading',
                    background: 'rgba(255, 255, 255, 0.7)'
                });
                $.ajax({
                    url: "{:U('addBanner')}",
                    type: "POST",
                    data: {
                        image_id: this.image_id,
                        type: this.selectType,
                    },
                    success: (res) => {
                        this.$loading().close();
                        if (res.status == 1) {
                            this.$message({
                                type: 'success',
                                message: res.msg,
                                duration: 1000,
                                onClose: () => {
                                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                    parent.layer.close(index); //再执行关闭
                                }
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.msg,
                                duration: 1000
                            });
                        }
                    },
                    error: () => {
                        this.$message({
                            type: 'error',
                            message: '出错了！',
                            duration: 1000
                        });
                        this.$loading().close();
                    }
                })
            }
        },
        mounted: function () {

        },
        created: function () {

        }
    });

</script>
</html>