mashangyoujiu/Application/Admin/View/Environmental/adds.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">
    <title>公司环境</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/layui/css/layui.css"/>
    <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>
    <style>
        html, body {
            background-color: rgb(246, 248, 249);
            font-size: 0;
            margin: 0;
            padding: 0;
        }

        .img_1 {
            max-height: 150px !important;
        }

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

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

        .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 {
            text-align: right;
            font-size: 14px;
            line-height: 56px;
            color: #666;
        }

        .list > input {
            margin: 10px 0;
            width: 300px;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
            outline: none;
            font-size: 14px;
        }

        .list > select {
            width: 322px;
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            outline: none;
            font-size: 14px;
            color: #333;
        }

        .list > textarea {
            resize: none;
            width: 300px;
            height: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            outline: none;
            font-size: 14px;
            color: #333;
        }

        .save {
            font-size: 16px;
            width: 50px;
            background-color: #009688;
            color: white;
            text-align: center;
            padding: 8px 10px;
            border-radius: 5px;
            margin: 50px 200px;
            cursor: pointer;
        }

        .save:hover {
            background-color: #099688;
        }

        input, textarea {
            font-size: 14px;
            color: #333;
        }

        .tips {
            text-align: center;
            font-size: 12px;
            color: #999;
        }

        .center {
            text-align: center;
        }

        .list .el-button {
            margin-top: 10px;
        }
    </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;">
                公司环境图片添加
            </div>
        </div>
    </div>
    <form class="layui-form" id="form">
        <div class="list">
            <label class="left_name">环境图片</label>
            <div class="el-upload el-upload--picture-card el-upload-list--picture-card upload-img-auto" @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()">选择图片</el-button>
            <p class="tips">建议大小（300*300）</p>
        </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 src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
<script src="__PUBLIC__/layui/lay/modules/layer.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                showSelectImage: false,
                image_id: '',
                image: '',
            }
        },
        methods: {
            selectFile: function (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;
                }
                this.$loading({
                    lock: true,
                    text: '保存中，请等待',
                    spinner: 'el-icon-loading',
                    background: 'rgba(255, 255, 255, 0.7)'
                });
                $.ajax({
                    url: "{:U('addImg')}",
                    type: 'post',
                    data: {
                        image_id: this.image_id,
                        image: this.image,
                    },
                    success: (res) => {
                        this.$loading().close();
                        if (res.status == 1) {
                            this.$message({
                                type: 'success',
                                message: res.msg,
                                duration: 1000,
                                onClose: function () {
                                    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>