mashangyoujiu/Application/Admin/View/Introduce/index.html

<!--[1.6.48]-->
<style>
    .list {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        margin: 10px 0;
    }

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

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

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

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

    .layui-input-inline {
        width: 500px;
    }

    .center {
        text-align: center;
    }
</style>

<div style="padding: 30px;background-color: white;" id="introduceApp" v-cloak>
    <form class="layui-form" id="form">
        <input type="hidden" name="id" id="id" value="{$list['id']}">
        <div class="list">
            <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>
        <div class="list">
            <label class="left_name">公司简介</label>
            <div class="layui-input-inline">
                <textarea id="editor" type="text/plain" style="width:600px;height: 400px;">{$list['content']}</textarea>
            </div>
        </div>
        <div class="center">
            <if condition="$authArr['setIntroduce'] eq true">
                <el-button type="primary" size="medium" @click="save">保存</el-button>
            </if>
        </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>
<script type="text/javascript">
    UE.delEditor('editor');
    var ue = UE.getEditor('editor');
</script>
<script type="text/javascript">
    var introduceApp = new Vue({
        el: '#introduceApp',
        data: function () {
            return {
                showSelectImage: false,
                image_id: "{$list['image_id']}",
                image: "{$list['image']}",
                id: "{$list['id']}",
            }
        },
        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;
                }

                var content = ue.getContent();
                this.$loading({
                    lock: true,
                    text: '保存中，请等待',
                    spinner: 'el-icon-loading',
                    background: 'rgba(255, 255, 255, 0.7)'
                });
                $.ajax({
                    url: "{:U('setIntroduce')}",
                    type: "POST",
                    data: {
                        content: content,
                        image: this.image,
                        image_id: this.image_id,
                        id: this.id,
                    },
                    success: (res) => {
                        this.$loading().close();
                        if (res.status == 1) {
                            this.$message({
                                type: 'success',
                                message: res.msg,
                                duration: 1000,
                                onClose: function () {
                                    MenuApp.refreshWindow();
                                }
                            });
                        } 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>