loumengning
/
xs


			
				
					
						
						
							
							<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{=empty($novel)?'创建作品':'管理作品'} - 原创专区 - {$kx.config.sitename}</title>
    <link rel="stylesheet" href="{$kx.config.resurl}/template/kxwebno1/author/css/style.css"/>
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    <meta name="author" content="www.ptcms.com">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width"/>
    <meta name="applicable-device" content="pc">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <link rel="canonical" href="{$kx.config.pcurl}__SELF__"/>
    <style>
        .labels {
            height: 51px;
        }

        .labels li {
            padding: 15px 40px;
            background-color: #e5e5e5;
            color: #929297;
            display: inline-block;
            float: left;
        }

        .labels li:hover,
        .labels li.active {
            background-color: #fff;
            color: #323237;
        }

        .container {
            padding: 20px;
        }

        .cover {
            width: 126px;
            height: 167px;
            background: url("{$kx.config.resurl}/template/kxwebno1/author/images/default_cover.jpg") no-repeat;
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
            margin-top: 60px;
        }

        .cover .name {
            padding-top: 120px;
            width: 100%;
            text-align: center;
            color: #323237;
        }

    </style>
</head>
<body>
{include file="/author/system/header"}
<div class="body">
    {include file="/author/system/left"}
    <div class="right">
        {if $novel}
        <div class="labels">
            <ul>
                <li><a href="{link=author.chapter.index novelid=$kx.get.novelid type='draft'}">草稿箱</a></li>
                <li><a href="{link=author.chapter.index novelid=$kx.get.novelid type='published'}">已发布</a></li>
                <li><a href="{link=author.chapter.index novelid=$kx.get.novelid type='recycle'}">回收站</a></li>
                <li class="active"><a href="{link=author.novel.index novelid=$kx.get.novelid}">作品设置</a></li>
            </ul>
        </div>
        {/if}
        <div class="container bg-white">
            <input type="file" id="file_cover" style="display: none" name="file">
            <form method="post">
                {if $novel}
                <input type="hidden" name="id" value="{$novel.id}">
                {/if}
                <div class="h100 fl text-center" style="width: 280px;">
                    <div class="cover ma">
                        {if $novel.cover}
                        <img class="w100 h100" src="{$novel.cover}" alt="">
                        {else}
                        <div class="name bold">{$novel.name}</div>
                        {/if}
                    </div>
                    <input type="hidden" name="cover" value="{$novel.cover}">
                    <button type="button" class="inline-block plr20 ptb5 border mt20 color0 uploadCover"
                            style="background-color:#f7f8f8;">上传封面
                    </button>
                </div>
                <div class="h100 fl" style="width: 600px;">
                    <div class="form-item">
                        <label class="form-label" for="field_name">作品名称</label>
                        <div class="form-input-block">
                            <input type="text" name="name" id="field_name" value="{$novel.name}">
                        </div>
                    </div>
                    <div class="form-item">
                        <label class="form-label" for="field_category">作品类型</label>
                        <div class="form-input-block">
                            <select name="channel_id" id="field_channel">
                                <option value="1" {if $novel.channel_id == 1}selected{/if}>男生</option>
                                <option value="2" {if $novel.channel_id == 2}selected{/if}>女生</option>
                            </select>
                            <select name="category_id" id="field_category">
                            </select>
                        </div>
                    </div>
                    <div class="form-item">
                        <label class="form-label" for="field_tags">作品类型</label>
                        <div class="form-input-block">
                            <input type="text" name="tags" id="field_tags" value="{$novel.tags}">
                        </div>
                        <div class="form-tips">选择小说风格及特色</div>
                    </div>
                    <div class="form-item">
                        <label class="form-label" for="field_intro">作品简介</label>
                        <div class="form-input-block">
                            <textarea name="intro" id="field_intro" cols="30" rows="10">{$novel.intro}</textarea>
                        </div>
                        <div class="form-tips">50-200字</div>
                    </div>
                    <div class="form-item">
                        <label class="form-label"></label>
                        <div class="form-input-block">
                            <button type="button" class="bg-red color1 plr40 ptb5 pt-submit">保存</button>
                        </div>
                    </div>
                </div>
                <div style="clear: both"></div>
            </form>
        </div>
    </div>
</div>
{include file="/author/system/footer"}
<link rel="stylesheet" href="{$kx.config.resurl}/template/kxwebno1/author/js/cropper/cropper.min.css"/>
<script src="{$kx.config.resurl}/template/kxwebno1/author/js/cropper/cropper.min.js"></script>
{block method="category.list" name=list_boy withall=0 pid=1}
{block method="category.list" name=list_girl withall=0 pid=2}
<script>
    $('#field_name').keyup(function () {
        $('.cover .name').html(this.value);
    });
    $('.uploadCover').click(function () {
        $('#file_cover').click();
    });
    $('#file_cover').change(function () {
        console.log(this);
        var cropper;
        var files = this.files;
        done = function (url) {
            layer.open({
                type: 1,
                area: ['600px', '500px'],
                resize: false,
                scrollbar: false,
                content: '<img src="' + url + '">',
                btn: ['确认'],
                success: function (layero, index) {
                    cropper = new Cropper(layero.find('img')[0], {
                        aspectRatio: 126 / 167
                    });
                },
                end: function () {
                    cropper.destroy();
                },
                yes: function (index, layero) {
                    if (cropper) {
                        var loading = null;
                        canvas = cropper.getCroppedCanvas({
                            width: 126,
                            height: 167,
                        });
                        canvas.toBlob(function (blob) {
                            var formData = new FormData();
                            formData.append('file', blob, 'avatar.jpg');
                            $.ajax({
                                url: '{link=author.novel.uploadCover}',
                                method: 'POST',
                                data: formData,
                                dataType: 'json',
                                processData: false,
                                contentType: false,
                                beforeSend: function () {
                                    if (loading === null) {
                                        loading = layer.load(1, {shade: [0.1, '#000']});
                                    }
                                },
                                xhr: function () {
                                    var xhr = new XMLHttpRequest();
                                    xhr.upload.onprogress = function (e) {
                                        var percent = '0';
                                        var percentage = '0%';
                                        if (e.lengthComputable) {
                                            percent = Math.round((e.loaded / e.total) * 100);
                                            percentage = percent + '%';
                                            console.log(percentage);
                                        }
                                    };

                                    return xhr;
                                },
                                success: function (res) {
                                    console.log(res);
                                    if (res.code) {
                                        layer.msg(res.msg);
                                    } else {
                                        $('input[name=cover]').val(res.data.src);
                                        $('.cover').html('<img class="w100 h100" src="' + res.data.src + '">');
                                    }
                                },
                                error: function () {
                                    layer.msg('上传失败，请刷新页面后重试！');
                                },
                                complete: function () {
                                    if (loading !== null) {
                                        layer.close(loading);
                                        loading = null;
                                    }
                                },
                            });
                        });
                    }
                    layer.close(index);
                }
            });
        };
        if (files && files.length > 0) {
            file = files[0];
            if (URL) {
                done(URL.createObjectURL(file));
            } else if (FileReader) {
                reader = new FileReader();
                reader.onload = function (e) {
                    done(reader.result);
                };
                reader.readAsDataURL(file);
            }
        }
    });
    $('#field_channel').change(function () {
        var data = {
            '1':{=json_encode(array_combine(array_column($list_boy,'id'),array_column($list_boy,'name')))},
            '2':{=json_encode(array_combine(array_column($list_girl,'id'),array_column($list_girl,'name')))}
        }
        $('#field_category option').remove();
        $.each(data[$(this).val()],function (k, v) {
            $('#field_category').append('<option value="' + k + '" '+('{$novel.category_id}' == k?'selected':'')+'>' + v + '</option>');
        });
    }).change();
    $('.pt-submit').click(function () {
        var loading = null;
        $.ajax('{link=""}', {
            type: 'post',
            dataType: 'json',
            data: $('form').serialize(),
            beforeSend: function () {
                if (loading == null) {
                    loading = layer.load(1, {shade: [0.1, '#000']});
                }
            },
            complete: function () {
                if (loading != null) {
                    layer.close(loading);
                    loading = null;
                }
            },
            success: function (res) {
                if (res.code) {
                    layer.alert(res.msg, {icon: 2,}, function (index) {
                        if (res.data.redirect) {
                            window.location.href = res.data.redirect;
                        } else {
                            layer.close(index);
                        }
                    });
                } else {
                    layer.msg('操作成功!');
                }
            },
            error: function () {
                layer.alert('收藏失败，请刷新页面后重试！', {icon: 2,});
            }
        });
    });
</script>
</body>
</html>