mashangyoujiu/Application/Retail/View/VipShare/addshare.html

<!DOCTYPE html>
<html>
<!--[1.6.48]-->
<head>
    <meta charset="utf-8" />
    <title>码上有酒</title>
    <link href="/Public/logo.ico" type="image/x-icon" rel="shortcut icon">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/paper/css/index.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>
        body,html{
            width:100%;
            height: 100%;
            overflow-x: hidden;
        }

        .container{
            width:80%;
            padding: 20px;
            margin: 0 auto;
            box-sizing: border-box;
        }
        .tips{
            font-size: 12px;
            color: #666;
        }
    </style>
</head>
<body>
<div class="container" id="app" v-cloak>
    <div class='content'>
        <el-form label-width="100px" id="form">
            <input type="hidden" name="id" value="{$id}">
            <el-form-item label="标题" required>
                <el-input type="text" name="title" v-model="ruleForm.title" auto-complete="off"
                          placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="描述" required>
                <el-input type="text" name="describe" v-model="ruleForm.describe" auto-complete="off"
                          placeholder="请输入描述"></el-input>
            </el-form-item>
            <el-form-item label="赠送积分" required>
                <el-input type="number" name="integral" v-model="ruleForm.integral" auto-complete="off"
                          placeholder="请输入分享并注册成功后赠送的积分"></el-input>
            </el-form-item>

            <el-form-item label="等级图片" required>
                <div style="display: flex;align-items: flex-start">
                    <label class="file_label" style="margin-right: 10px;display: block">
                        <input type="hidden" name="image_id" value="{$info['image_id']}"/>
                        <input type="file" name="image" placeholder="选择图片" accept="image/png,image/jpeg" d-value="$info['image']"/>
                        <img style="max-width: 200px" src="{$info['image']}" onerror="this.error=null;this.src='__PUBLIC__/paper/images/wx_add.png'">
                    </label>
                    <el-button plain size="small" @click="selectImage('image')"
                               >图库图片<el-tooltip class="item" effect="dark" content="点击图片选择本地图片，点击按钮选择图库图片" placement="top-start">
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                    </el-button>
                </div>
                <p class="tips">建议尺寸113 * 109</p>

            </el-form-item>
        </el-form>
        <div class="center" style="margin-top: 50px">
            <el-button type="primary" size="medium" @click="save">保存</el-button>
        </div>
        <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>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                showSelectImage: false,
                actFileName: '',
                ruleForm: {
                    title: "{$info['title']}",
                    describe: "{$info['describe']}",
                    integral: "{$info['integral']}"
                },
            }
        },
        methods: {
            selectFile: function (item) {
                this.showSelectImage = false;
                if (item.length) {
                    $("input[name='" + this.actFileName + "']").val('');
                    $("input[name='" + this.actFileName + "_id']").val(item[0].id);
                    $("input[name='" + this.actFileName + "']").next('img').attr('src', item[0].path);
                }
            },
            selectImage: function (actName) {
                this.actFileName = actName;
                this.showSelectImage = true;
            },
            save: function () {
                var image_id = $("input[name='image_id']").val();
                var image = $("input[name='image']").val() || $("input[name='image']").attr('d-value');
                if (!image_id && !image) {
                    this.$message({
                        type: 'warning',
                        message: '请完善图片设置',
                        duration: 1000
                    });
                    return false;
                }
                if (!this.ruleForm.title || !this.ruleForm.describe || !this.ruleForm.integral) {
                    this.$message({
                        type: 'warning',
                        message: '请完善信息',
                        duration: 1000
                    });
                    return false;
                }
                var that = this;
                that.$loading({
                    lock: true,
                    text: '数据获取中，请等待',
                    spinner: 'el-icon-loading',
                    background: 'rgba(255, 255, 255, 0.7)'
                });
                var fd = new FormData(document.getElementById('form'));
                $.ajax({
                    url: "{:U('adds')}",
                    type: "POST",
                    data: fd,
                    processData: false,                // jQuery不要去处理发送的数据
                    contentType: false,                // jQuery不要去设置Content-Type请求头
                    success: function (res) {
                        if (res.status == 1) {
                            that.$message({
                                type: 'success',
                                message: res.msg,
                                duration: 1000,
                                onClose: function () {
                                    that.$loading().close();
                                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                    parent.layer.close(index); //再执行关闭
                                }
                            });
                        } else {
                            that.$message({
                                type: 'error',
                                message: res.msg,
                                duration: 1000
                            });
                        }
                    },
                    error:function () {
                        that.$loading().close();
                    }
                })
            }
        },
        mounted: function () {
            $("input[type='file']").on('change', function () {
                if (this.files.length) {
                    var that = this;
                    var imgObj = this.files[0];
                    var imgType = ['image/jpeg', 'image/jpg', 'image/png'];
                    if (jQuery.inArray(imgObj.type, imgType) != -1) {
                        //是图片
                        var reader = new FileReader();
                        reader.readAsDataURL(imgObj);
                        reader.onload = function () {
                            $(that).next('img').attr('src', this.result);
                        }
                    }else{
                        $("input[name='image']").val('')
                    }
                }
            })
        },
        created: function () {

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