mashangyoujiu/Application/Admin/View/Commodity/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>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/UEditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/UEditor/ueditor.all.js"></script>
    <title>产品添加</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;
        }

        .list > .el-button {
            margin-left: 10px;
        }

        .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;
        }

        .list > .input_div {
            width: 600px;
        }

        .tips {
            margin-left: 140px;
            font-size: 12px;
            color: #999;
        }

        .center {
            text-align: center;
        }
    </style>
</head>
<body>
<div style="padding: 30px;background-color: white;" id="app" v-cloak>
    <form id="form">
        <div class="list">
            <label class="left_name">产品名称</label>
            <div class="input_div">
                <div class="el-input">
                    <input type="text"
                           autocomplete="off"
                           v-model="title"
                           required="required"
                           placeholder="请输入产品名称" class="el-input__inner">
                </div>
            </div>
        </div>
        <div class="list">
            <label class="left_name">产品简介</label>
            <div class="input_div">
                <div class="el-input">
                    <input type="text"
                           autocomplete="off"
                           v-model="docuat"
                           required="required"
                           placeholder="请输入产品简介" class="el-input__inner">
                </div>
            </div>
        </div>
        <div class="list" style="align-items: flex-start;">
            <label class="left_name">产品图片</label>
            <div class="el-upload el-upload--picture-card el-upload-list--picture-card upload-img-small-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>
        </div>
        <p class="tips">建议大小（200*200）</p>
        <div class="list" style="align-items: flex-start;">
            <label class="left_name">内容</label>
            <div>
                <div id="editor" type="text/plain" style="width:600px;height: 400px;" name="content"></div>
            </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_id: "{$list['image_id']}",
                image: "{$list['image']}",
                title: `{$list['title']}`,
                docuat: `{$list['docuat']}`,
                id: "{$list['id']}",
                content: `{$list['content']}`,
                ue: null,
            }
        },
        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.title == '' || this.docuat == '' || !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)'
                });
                var content = this.ue.getContent();
                $.ajax({
                    url: "{:U('addCommodity')}",
                    type: "POST",
                    data: {
                        title: this.title,
                        docuat: this.docuat,
                        image: this.image,
                        image_id: this.image_id,
                        content: content,
                        id: this.id,
                    },
                    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 () {
            this.ue = UE.getEditor('editor');
            this.ue.ready(() => {
                this.ue.setContent(this.content);
            })
        },
        created: function () {

        }
    });
</script>
</html>