1237 lines
48 KiB
HTML
1237 lines
48 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<title>{$cartoonname} - 参考文案</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link href="/public/plugs/editor/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="/public/plugs/editor/css/font-awesome.min.css" rel="stylesheet">
|
||
<link href="/public/plugs/editor/css/toastr.min.css" rel="stylesheet">
|
||
<script src="/public/plugs/editor/jquery.js"></script>
|
||
<script src="/public/plugs/editor/lodash.min.js"></script>
|
||
<script src="/public/plugs/editor/toastr.min.js"></script>
|
||
<script src="/public/plugs/editor/handlebars.min.js"></script>
|
||
<script src="/public/plugs/editor/knockout-min.js"></script>
|
||
<script src="/public/plugs/editor/jquery.validate.min.js"></script>
|
||
<script src="/public/plugs/editor/jquery.validate.unobtrusive.min.js"></script>
|
||
<script src="/public/plugs/editor/bootstrap.min.js"></script>
|
||
<script src="/public/plugs/editor/clipboard.min.js"></script>
|
||
<script src="/public/plugs/editor/rasterizeHTML.allinone.js"></script>
|
||
<script src="/public/plugs/editor/qrcode.js"></script>
|
||
<script>
|
||
toastr.options.positionClass = 'toast-bottom-right';
|
||
</script>
|
||
<script src="/public/plugs/editor/admin.js?v=10"></script>
|
||
|
||
<link rel="stylesheet" href="/public/plugs/editor/css/page_mp_article.css" />
|
||
<link rel="stylesheet" href="/public/plugs/editor/css/page_mp_article_improve_combo.css" />
|
||
<link rel="stylesheet" href="/public/plugs/editor/css/admin.css?v=5"/>
|
||
|
||
<script src="/public/plugs/moment/moment.min.js"></script>
|
||
<script src="/public/plugs/moment/zh-cn.js"></script>
|
||
|
||
<!-- datepicker statr -->
|
||
|
||
<link href="/public/plugs/datepicker/css/foundation-datepicker.min.css" rel="stylesheet" type="text/css">
|
||
<script src="/public/plugs/datepicker/js/foundation-datepicker.js"></script>
|
||
<script src="/public/plugs/datepicker/js/foundation-datepicker.zh-CN.js"></script>
|
||
|
||
<!----datetimepicker------>
|
||
<link href="/public/plugs/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
|
||
<script src="/public/plugs/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
|
||
|
||
|
||
|
||
<!--[if lte IE 8]>
|
||
<script src="https://cdn-comic.weipinwan.com/comic/static/1509519112101/assets/js/html5shiv.min.js"></script>
|
||
<script src="https://cdn-comic.weipinwan.com/comic/static/1509519112101/assets/js/respond.min.js"></script>
|
||
<![endif]-->
|
||
|
||
<style type="text/css">
|
||
#editor-bar .dropdown-menu {
|
||
height: auto;
|
||
max-height: 400px;
|
||
overflow-x: hidden;
|
||
}
|
||
.divider_1EEoZpno {
|
||
position: absolute;
|
||
left: 41%;
|
||
top: 0;
|
||
bottom: 0;
|
||
background: #ccc;
|
||
width: 1px;
|
||
}
|
||
p{margin:0px;}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="rich_media">
|
||
<div class="rich_media_inner" style="padding-top:0">
|
||
<div class="rich_media_area_primary">
|
||
<h1 id="wx-article-title" class="rich_media_title">{$cartoonname} - 参考文案</h1>
|
||
<p id="wx-article-summary" style="font-size: 14px; text-indent: 2em;">{$intro}</p>
|
||
<div class="rich_media_content">
|
||
<div id="wx-article-content">
|
||
<div id="wx-article-cover"></div>
|
||
<p> （图片源自网络，若有侵权请联系删除）</p>
|
||
<div id="wx-article-body"></div>
|
||
<div id="wx-article-footer"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{notempty name="referral_link_id"}
|
||
<div style="padding-top:20px">
|
||
<div class="input-group">
|
||
<span class="input-group-addon">原文链接</span>
|
||
<input type="text" id="txt-referral-link" readonly style="background:white" class="form-control" data-url="{$referral_link}"
|
||
value="{$referral_shortlink}"
|
||
onclick="this.select()"/>
|
||
<span class="input-group-btn">
|
||
<button type="button" data-toggle="copy-link" class="btn btn-default"><i class="fa fa-copy"></i> 复制</button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
{/notempty}
|
||
</div>
|
||
</div>
|
||
|
||
<nav id="editor-bar" class="navbar navbar-default navbar-fixed-bottom">
|
||
<div class="container">
|
||
<div class="navbar-header">
|
||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#editor-menu" aria-expanded="false">
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="collapse navbar-collapse" id="editor-menu">
|
||
<ul class="nav navbar-nav">
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-header"></i> 文案标题 <span class="caret"></span></a>
|
||
<ul class="dropdown-menu">
|
||
<!-- ko foreach: titles -->
|
||
<li><a href="#" data-bind="text: title, click: $root.changeTitle"></a></li>
|
||
<!-- /ko -->
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-image"></i> 文案封面 <span class="caret"></span></a>
|
||
<ul class="dropdown-menu">
|
||
<!-- ko foreach: covers -->
|
||
<li>
|
||
<a href="#" data-bind="click: $root.changeCover">
|
||
<img style="max-width:200px;max-height:40px;" data-bind="attr: { src: cover_url }" />
|
||
</a>
|
||
</li>
|
||
<!-- /ko -->
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">正文模板 <span class="caret"></span></a>
|
||
<ul class="dropdown-menu">
|
||
<!-- ko foreach: body_templates -->
|
||
<li style="border-bottom:#eee 1px solid;">
|
||
<a href="#" data-bind="click: $root.changeBodyTemplate">
|
||
<img style="max-height: 40px;" data-bind="attr: { src: preview_img }" />
|
||
</a>
|
||
</li>
|
||
<!-- /ko -->
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">原文引导模板 <span class="caret"></span></a>
|
||
<ul class="dropdown-menu">
|
||
<!-- ko foreach: footer_templates -->
|
||
<li style="border-bottom:#eee 1px solid;">
|
||
<a href="#" data-bind="click: $root.changeFooterTemplate">
|
||
<img style="max-height: 40px;" data-bind="attr: { src: preview_img }" />
|
||
</a>
|
||
</li>
|
||
<!-- /ko -->
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-copy"></i> 复制 <span class="caret"></span></a>
|
||
<ul class="dropdown-menu">
|
||
|
||
|
||
<li>
|
||
<a href="javascript:void(0);" data-toggle="copy-text" data-clipboard-target="#wx-article-title">复制标题</a>
|
||
</li>
|
||
<li>
|
||
<a href="javascript:void(0);" data-toggle="copy-text" data-clipboard-target="#wx-article-summary">复制摘要</a>
|
||
</li>
|
||
<li>
|
||
<a href="javascript:void(0);" data-toggle="copy-text" data-clipboard-target="#wx-article-content">复制正文 (全部)</a>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="navbar-form navbar-right">
|
||
{empty name="referral_link_id"}
|
||
|
||
<span data-bind="visible: is_novel_online" style="display:none;">
|
||
<button type="button" class="btn btn-primary" data-bind="click: openReferralLinkModal">
|
||
<i class="fa fa-link"></i> 生成原文链接
|
||
</button>
|
||
</span>
|
||
{else /}
|
||
<span data-bind="visible: is_novel_online" style="display:none;">
|
||
<span class="btn-group dropup">
|
||
<button type="button" class="btn btn-primary" data-toggle="get-link"><i class="fa fa-link"></i> 获取原文链接</button>
|
||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
|
||
<span class="caret"></span>
|
||
</button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#" data-bind="click: editReferralLink"><i class="fa fa-fw fa-edit"></i> 修改链接属性</a></li>
|
||
<li><a href="#" data-bind="click: openReferralLinkModal"><i class="fa fa-fw fa-plus"></i> 生成新链接</a></li>
|
||
</ul>
|
||
</span>
|
||
</span>
|
||
{/empty}
|
||
<span data-bind="visible: !is_novel_online()" style="display:none;">
|
||
<button type="button" class="btn btn-disabled">漫画已下架</button>
|
||
</span>
|
||
</div>
|
||
</div><!-- /.navbar-collapse -->
|
||
</div><!-- /.container-fluid -->
|
||
</nav>
|
||
|
||
<div class="modal fade" id="create-referral-link-modal" tabindex="-1">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-bind="click: close" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||
<h4 class="modal-title" data-bind="text: title"></h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div data-bind="visible: loading" class="loading-panel">
|
||
<i class="fa fa-spin fa-spinner"></i>
|
||
</div>
|
||
<form class="form-horizontal" style="display: none" data-bind="visible: !loading()">
|
||
<div class="form-group">
|
||
<label class="control-label col-sm-3">入口页面</label>
|
||
<div class="col-sm-7">
|
||
<p class="form-control-static">
|
||
<span data-bind="visible: type() == 1">小说阅读页</span>
|
||
<span data-bind="visible: type() == 2">漫画阅读页</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="control-label col-sm-3"><span class="required">*</span> 派单渠道名称</label>
|
||
<div class="col-sm-7">
|
||
<input type="text" class="form-control" maxlength="100" name="description"
|
||
data-val="true"
|
||
data-val-required="请填写派单渠道名称"
|
||
data-bind="value: description" />
|
||
<p class="help-block help-block-error" data-valmsg-for="description" data-valmsg-replace="true"></p>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="control-label col-sm-3"><span class="required">*</span> 链接类型</label>
|
||
<div class="col-sm-7">
|
||
<label class="radio-inline">
|
||
<input type="radio" name="referrer_type" value="verified_mp"
|
||
data-bind="checked: referrer_type"
|
||
data-val="true"
|
||
data-val-required="请选链接类型"/>
|
||
<span>派单</span>
|
||
</label>
|
||
<label class="radio-inline">
|
||
<input type="radio" name="referrer_type" value="not_verified_mp"
|
||
data-bind="checked: referrer_type"/>
|
||
<span>内推</span>
|
||
</label>
|
||
<p class="help-block help-block-error" data-valmsg-for="referrer_type" data-valmsg-replace="true"></p>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="control-label col-sm-3">展示时间</label>
|
||
<div class="col-sm-7">
|
||
<div class='input-group date from-date-picker pull-left' style="width:49.5%">
|
||
<input type='text' class="form-control" name="showstarttime" data-bind="value: showstarttime" id="from-date-picker" placeholder="开始日期" />
|
||
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
|
||
</div>
|
||
<div class='pull-left' style="width:1%">-</div>
|
||
<div class='input-group date to-date-picker pull-left' style="width:49.5%">
|
||
<input type='text' class="form-control" name="showendtime" data-bind="value: showendtime" id="to-date-picker" placeholder="结束日期" />
|
||
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div >
|
||
<div class="form-group">
|
||
<div class="col-sm-7 col-sm-offset-3">
|
||
<p class="form-control-static">
|
||
<img style="width:80px" data-bind="attr: { src: novel_avatar }" />
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="control-label col-sm-3">阅读原文章节</label>
|
||
<div class="col-sm-7">
|
||
<p class="form-control-static">
|
||
<strong data-bind="html: article_title"></strong>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="control-label col-sm-3">关注章节序号</label>
|
||
<div class="col-sm-7">
|
||
<input type="text" class="form-control" maxlength="100" name="force_follow_chapter_idx"
|
||
placeholder="可选, 如不填则不会强制关注"
|
||
data-val="true"
|
||
data-val-digits="请输入数字"
|
||
data-bind="value: force_follow_chapter_idx" />
|
||
<div data-bind="visible: force_follow_chapter_id" style="display:none;margin-top:5px">
|
||
<span data-bind="text: force_follow_chapter_title"></span>
|
||
</div>
|
||
<p class="help-block help-block-error" data-valmsg-for="force_follow_chapter_idx" data-valmsg-replace="true"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-primary" data-bind="click: submit, text: id() ? '保存修改' : '生成链接'"></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var GetReferralLinkModal = function () {
|
||
var self = this;
|
||
var $modal = null;
|
||
var callbacks = null;
|
||
var defer = null;
|
||
var opts = null;
|
||
var link = null; // 生成的链接，{ id, url }
|
||
|
||
var model = {
|
||
loading: ko.observable(false),
|
||
submitting: ko.observable(false),
|
||
|
||
title: ko.observable(),
|
||
|
||
id: ko.observable(),
|
||
type: ko.observable(0),
|
||
article_id: ko.observable(),
|
||
model: ko.observable(),
|
||
novel_id: ko.observable(),
|
||
novel_avatar: ko.observable(),
|
||
novel_title: ko.observable(),
|
||
article_title: ko.observable(),
|
||
referrer_type: ko.observable(),
|
||
showstarttime: ko.observable(),
|
||
showendtime: ko.observable(),
|
||
description: ko.observable(),
|
||
force_follow_chapter_idx: ko.observable(),
|
||
force_follow_chapter_id: ko.observable(),
|
||
force_follow_chapter_title: ko.observable(),
|
||
|
||
submit: function () {
|
||
self.submit();
|
||
},
|
||
close: function () {
|
||
self.close();
|
||
}
|
||
};
|
||
|
||
self.open = function (options) {
|
||
self.reset();
|
||
|
||
defer = $.Deferred();
|
||
|
||
opts = options;
|
||
|
||
if (!$modal) {
|
||
$modal = $('#create-referral-link-modal');
|
||
ko.applyBindings(model, $modal.find('.modal-content')[0]);
|
||
|
||
model.force_follow_chapter_idx.subscribe(function (idx) {
|
||
if (!idx || !/^\d+$/.test(idx)) {
|
||
model.force_follow_chapter_id(null);
|
||
model.force_follow_chapter_title(null);
|
||
} else {
|
||
self.tryFetchForceFollowChapterInfo();
|
||
}
|
||
});
|
||
}
|
||
|
||
callbacks = options.callbacks || {};
|
||
|
||
model.title(options.title || (options.id ? '修改推广链接属性' : '生成推广链接'));
|
||
|
||
if (options.model !== undefined) {
|
||
model.type(options.model);
|
||
}
|
||
|
||
model.loading(true);
|
||
|
||
var promise = $.Deferred().resolve().promise();
|
||
|
||
if (options.id) {
|
||
model.id(options.id);
|
||
|
||
promise = $.get('{:url('articles/api_get',array('model_id'=>25))}?id=' + options.id, function (result) {
|
||
model.type(result.type);
|
||
model.article_id(result.article_id);
|
||
model.description(result.description);
|
||
model.referrer_type(result.referrer_type);
|
||
model.force_follow_chapter_idx(result.force_follow_chapter_idx);
|
||
|
||
opts.wx_article_title_id = result.wx_article_title_id;
|
||
opts.wx_article_cover_id = result.wx_article_cover_id;
|
||
opts.wx_article_body_template_id = result.wx_article_body_template_id;
|
||
opts.wx_article_footer_template_id = result.wx_article_footer_template_id;
|
||
});
|
||
} else {
|
||
model.model(options.model);
|
||
model.article_id(options.article_id);
|
||
}
|
||
|
||
promise.then(function () {
|
||
self.tryFetchNovelArticleInfo();
|
||
self.tryFetchForceFollowChapterInfo();
|
||
model.loading(false);
|
||
});
|
||
|
||
$modal.find('#from-date-picker').fdatepicker({
|
||
format: 'yyyy-mm-dd',
|
||
pickTime: false
|
||
});
|
||
$modal.find('#to-date-picker').fdatepicker({
|
||
format: 'yyyy-mm-dd',
|
||
pickTime: false
|
||
});
|
||
|
||
$modal.modal('show');
|
||
|
||
return defer.promise();
|
||
};
|
||
|
||
self.tryFetchNovelArticleInfo = function () {
|
||
var articleId = model.article_id();
|
||
var modelId = model.model();
|
||
if (!articleId) {
|
||
return $.Deferred().resolve();
|
||
}
|
||
|
||
return $.get('{:url('articles/api_get_short_article_info',array('model_id'=>25))}?current_article_id=' + articleId+'&model='+modelId)
|
||
.then(function (result) {
|
||
model.novel_id(result.novel.id);
|
||
model.novel_avatar(result.novel.avatar);
|
||
model.novel_title(result.novel.title);
|
||
model.article_title(result.title);
|
||
});
|
||
};
|
||
|
||
self.tryFetchForceFollowChapterInfo = function () {
|
||
var idx = model.force_follow_chapter_idx();
|
||
if (idx) {
|
||
idx = parseInt(idx);
|
||
}
|
||
|
||
if (!idx) {
|
||
return false;
|
||
}
|
||
|
||
// 如果 novel_id 未加载，也忽略，novel_id 加载后会再触发一次获取关注章节信息
|
||
if (!model.novel_id()) {
|
||
return false;
|
||
}
|
||
|
||
$.get('{:url('articles/api_get_basic_info_by_idx',array('model_id'=>25))}', {
|
||
nid: model.novel_id(),
|
||
idx: model.force_follow_chapter_idx()
|
||
})
|
||
.then(function (result) {
|
||
model.force_follow_chapter_id(result.id);
|
||
model.force_follow_chapter_title(result.title);
|
||
})
|
||
.fail(handleAjaxError);
|
||
};
|
||
|
||
self.submit = function () {
|
||
if (model.submitting()) {
|
||
return false;
|
||
}
|
||
|
||
if (!$modal.find('form').valid()) {
|
||
return false;
|
||
}
|
||
|
||
model.submitting(true);
|
||
|
||
$.ajax({
|
||
url: '{:url('articles/api_save',array('model_id'=>7))}',
|
||
type: 'POST',
|
||
contentType: 'application/json',
|
||
data: JSON.stringify({
|
||
id: model.id(),
|
||
type: model.referrer_type(),
|
||
chapterid: model.article_id(),
|
||
followchapter: model.force_follow_chapter_idx(),
|
||
title: model.description(),
|
||
modelid: model.model(),
|
||
showstarttime: model.showstarttime(),
|
||
showendtime: model.showendtime(),
|
||
article_title_id: opts.wx_article_title_id,
|
||
article_cover_id: opts.wx_article_cover_id,
|
||
article_body_template_id: opts.wx_article_body_template_id,
|
||
article_footer_template_id: opts.wx_article_footer_template_id
|
||
})
|
||
})
|
||
|
||
.then(function (result) {
|
||
link = result;
|
||
|
||
if (callbacks.link_generated) {
|
||
callbacks.link_generated(result);
|
||
}
|
||
|
||
self.close();
|
||
|
||
GetReferralLinkQrcodeModal.instance.open({
|
||
url: link.url,
|
||
shorturl: link.shorturl,
|
||
callbacks: {
|
||
close: function () {
|
||
defer.resolve(link);
|
||
}
|
||
}
|
||
});
|
||
})
|
||
.fail(handleAjaxError)
|
||
.always(function () {
|
||
model.submitting(false);
|
||
});
|
||
|
||
};
|
||
|
||
self.close = function () {
|
||
$modal.modal('hide');
|
||
};
|
||
|
||
self.reset = function () {
|
||
link = null;
|
||
|
||
model.loading(false);
|
||
model.submitting(false);
|
||
|
||
model.id(null);
|
||
model.article_id(null);
|
||
model.novel_avatar(null);
|
||
model.novel_title(null);
|
||
model.article_title(null);
|
||
model.referrer_type(null);
|
||
model.force_follow_chapter_idx(null);
|
||
model.force_follow_chapter_id(null);
|
||
model.force_follow_chapter_title(null);
|
||
model.description(null);
|
||
}
|
||
};
|
||
|
||
GetReferralLinkModal.instance = new GetReferralLinkModal();
|
||
|
||
$(function () {
|
||
$(document).on('click', '[data-toggle="create-referral-link"]', function () {
|
||
GetReferralLinkModal.instance.open({
|
||
article_id: $(this).data('article-id')
|
||
});
|
||
|
||
return false;
|
||
});
|
||
});
|
||
</script>
|
||
<div class="modal fade" id="get-referral-link-qrcode-modal">
|
||
<div class="modal-dialog" role="document" style="width: 700px;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||
<h4 class="modal-title">原文链接</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-sm-5">
|
||
<strong>原文链接:</strong>
|
||
<div style="margin:10px 0;word-break:break-all;" class="text-primary link-url"></div>
|
||
<div style="margin:10px 0;color:red;font-weight:bold;">
|
||
<i class="fa fa-info-circle"></i> 请务必使用此链接作为文案的原文链接，不要使用微信中点开后手工复制的链接
|
||
</div>
|
||
<p><button type="button" class="btn btn-primary btn-copy-ref-link"><i class="fa fa-copy"></i> 复制链接</button></p>
|
||
</div>
|
||
<div class="divider_1EEoZpno"></div>
|
||
<div class="col-sm-7">
|
||
<div>
|
||
<span class="text-muted pull-left">选择二维码样式：</span>
|
||
<div class="pull-left" style="width: 120px;">
|
||
<select class="form-control" name="channel" id="select-channel" style="width:auto;">
|
||
<option value="1" selected="">常规二维码</option>
|
||
<option value="2" >男频二维码</option>
|
||
<option value="3">女频二维码</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="qrcode" style="margin-top:20px;"></div>
|
||
<div style="margin:10px 0;color:red;font-weight:bold;">
|
||
<i class="fa fa-info-circle"></i> 「阅读原文」按钮可能被微信屏蔽，建议您同时下载二维码，粘贴到正文中来替代阅读原文链接；后续也可以在「推广链接」中下载它。
|
||
</div>
|
||
<p><button type="button" class="btn btn-primary btn-copy-ref-qrcode"><i class="fa fa-copy"></i> 复制二维码</button></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<span style="display:inline-block;margin-right:10px;color:red;vertical-align:middle;" class="copy-success-hint"></span>
|
||
<button type="button" class="btn btn-primary btn-back"><i class="fa fa-copy"></i> 返回</button>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var GetReferralLinkQrcodeModal = function () {
|
||
var self = this;
|
||
var $modal = null;
|
||
var opts = null;
|
||
|
||
this.open = function (options) {
|
||
opts = options;
|
||
|
||
if (!$modal) {
|
||
$modal = $('#get-referral-link-qrcode-modal');
|
||
$modal.on('hidden.bs.modal', function () {
|
||
if (opts.callbacks && opts.callbacks.close) {
|
||
opts.callbacks.close.apply(self, []);
|
||
}
|
||
});
|
||
$modal.on('shown.bs.modal', function () {
|
||
|
||
$modal.find('.btn-back').click(function(){
|
||
window.location.href="/admin/spread/index.html";
|
||
})
|
||
|
||
$modal.find('#select-channel').change(function(){
|
||
|
||
if ($(this).val())
|
||
{
|
||
$.ajax({
|
||
type: "GET",
|
||
url: "{:url('admin/articles/imagecreate')}?model_id=7&type="+$(this).val()+"&url="+decodeURI(opts.url),
|
||
data: "",
|
||
dataType: "json",
|
||
success: function(data){
|
||
if (data.code==200)
|
||
{
|
||
$modal.find('.qrcode').html('<div class="layui-layer-imagescontent"><img class="" alt="" style="max-width: 100%;" src="'+data.image+'" /></div>');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
})
|
||
|
||
var clipboard = new Clipboard($modal.find('.btn-copy-ref-link')[0], {
|
||
text: function () {
|
||
return opts.url;
|
||
}
|
||
});
|
||
|
||
clipboard.on('success', function () {
|
||
var $hint = $modal.find('.copy-success-hint');
|
||
$hint.html('复制成功!').show();
|
||
});
|
||
|
||
var qr_clipboard = new Clipboard($modal.find('.btn-copy-ref-qrcode')[0], {
|
||
target: function () {
|
||
return document.querySelector('.layui-layer-imagescontent');
|
||
}
|
||
});
|
||
|
||
qr_clipboard.on('success', function () {
|
||
var $hint = $modal.find('.copy-success-hint');
|
||
$hint.html('复制成功!').show();
|
||
});
|
||
|
||
});
|
||
}
|
||
console.log(opts);
|
||
$modal.find('.copy-success-hint').hide();
|
||
$modal.find('.link-url').html(opts.shorturl);
|
||
/*
|
||
$modal.find('.qrcode').html('<div></div>');
|
||
|
||
new QRCode($modal.find('.qrcode>div')[0], {
|
||
text: opts.url,
|
||
width: 200,
|
||
height: 200,
|
||
colorDark : "#000000",
|
||
colorLight : "#ffffff",
|
||
correctLevel : QRCode.CorrectLevel.H
|
||
});
|
||
*/
|
||
$.ajax({
|
||
type: "GET",
|
||
url: "{:url('admin/articles/imagecreate')}?model_id=7&type=1&url="+decodeURI(opts.url),
|
||
data: {username:$("#username").val(), content:$("#content").val()},
|
||
dataType: "json",
|
||
success: function(data){
|
||
if (data.code==200)
|
||
{
|
||
$modal.find('.qrcode').html('<div class="layui-layer-imagescontent"><img class="" style="max-width: 100%;" src="'+data.image+'" /></div>');
|
||
}
|
||
}
|
||
});
|
||
|
||
$modal.modal('show');
|
||
};
|
||
|
||
this.close = function () {
|
||
$modal.modal('hide');
|
||
}
|
||
};
|
||
|
||
GetReferralLinkQrcodeModal.instance = new GetReferralLinkQrcodeModal();
|
||
</script>
|
||
<div class="modal fade" id="content-img-modal" tabindex="-1">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||
<h4 class="modal-title">正文图片</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<ul class="list-group" data-bind="foreach: items">
|
||
<li class="list-group-item">
|
||
<span style="display:inline-block;margin-top:4px;">
|
||
<span style="font-size:16px;" data-bind="text: name"></span>
|
||
<span data-bind="visible: status() === 'generating'"><i class="fa fa-spin fa-spinner"></i></span>
|
||
|
||
<span class="text-muted" style="display: none;" data-bind="visible: status() === 'generated'">
|
||
(<span data-bind="text: width"></span> x <span data-bind="text: height"></span>)
|
||
</span>
|
||
</span>
|
||
<button type="button" class="btn btn-sm btn-default pull-right" data-bind="visible: status() === 'generated', click: $root.download"><i class="fa fa-download"></i> 下载</button>
|
||
|
||
<div style="color:red;display:none;" data-bind="visible: err_msg, html: err_msg"></div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var ContentImgModal = function () {
|
||
var self = this;
|
||
var $modal = null;
|
||
var model = {
|
||
items: ko.observableArray(),
|
||
download: function (item) {
|
||
var canvas = item.canvas;
|
||
if (!canvas.toBlob && !window.URL.createObjectURL) {
|
||
alert('浏览器版本过低, 请更新版本或使用谷歌浏览器');
|
||
return false;
|
||
}
|
||
|
||
canvas.toBlob(function (blob) {
|
||
var link = document.createElement('a');
|
||
link.href = window.URL.createObjectURL(blob);
|
||
link.download = item.name + '.png';
|
||
link.click();
|
||
}, 'image/png');
|
||
}
|
||
};
|
||
|
||
this.open = function () {
|
||
ensureModal();
|
||
$modal.modal('show');
|
||
};
|
||
|
||
this.reset = function () {
|
||
model.items([]);
|
||
};
|
||
|
||
this.addItem = function (item) {
|
||
model.items.push({
|
||
id: item.id,
|
||
name: item.name,
|
||
status: ko.observable('generating'),
|
||
width: ko.observable(),
|
||
height: ko.observable(),
|
||
err_msg: ko.observable(),
|
||
canvas: null
|
||
})
|
||
};
|
||
|
||
this.markCompleted = function (itemId, canvas) {
|
||
var item = _.find(model.items(), function (it) {
|
||
return it.id === itemId;
|
||
});
|
||
|
||
item.status('generated');
|
||
item.canvas = canvas;
|
||
item.width(canvas.width);
|
||
item.height(canvas.height);
|
||
};
|
||
|
||
function ensureModal() {
|
||
if (!$modal) {
|
||
$modal = $('#content-img-modal');
|
||
ko.applyBindings(model, $modal.find('.modal-content')[0]);
|
||
}
|
||
}
|
||
};
|
||
|
||
ContentImgModal.instance = new ContentImgModal();
|
||
</script>
|
||
<script>
|
||
$(function () {
|
||
var editor = new WxArticleEditor({
|
||
ctype: {$mode=="img"?1:2},
|
||
novel_id: {$cartoonid},
|
||
is_novel_online: true,
|
||
article_id: {$volumeid},
|
||
next_article_id: {$next_volumeid|default=''},
|
||
model: {$model},
|
||
mode: "{$mode}",
|
||
category_id: {$category},
|
||
referral_link_id: {empty name="referral_link_id"}null{else /}{$referral_link_id}{/empty},
|
||
title_id: {empty name="title_id"}null{else /}{$title_id}{/empty},
|
||
cover_id: {empty name="cover_id"}null{else /}{$cover_id}{/empty},
|
||
body_template_id: {empty name="body_template_id"}""{else /}{$body_template_id}{/empty},
|
||
footer_template_id: {empty name="footer_template_id"}""{else /}{$footer_template_id}{/empty}
|
||
|
||
});
|
||
|
||
editor.init();
|
||
|
||
$('[data-toggle="copy-text"]').each(function () {
|
||
new Clipboard(this).on('success', function (e) {
|
||
e.clearSelection();
|
||
toastr.success('复制成功');
|
||
});
|
||
});
|
||
|
||
$('[data-toggle="copy-link"]').each(function () {
|
||
var clipboard = new Clipboard(this, {
|
||
text: function () {
|
||
return $('#txt-referral-link').val();
|
||
}
|
||
});
|
||
clipboard.on('success', function (e) {
|
||
e.clearSelection();
|
||
toastr.success('链接复制成功');
|
||
});
|
||
});
|
||
|
||
$('[data-toggle="get-link"]').click(function () {
|
||
GetReferralLinkQrcodeModal.instance.open({
|
||
shorturl: $('#txt-referral-link').val(),url:$('#txt-referral-link').data('url')
|
||
});
|
||
return false;
|
||
});
|
||
|
||
$('#btn-create-content-img').click(function () {
|
||
var modal = ContentImgModal.instance;
|
||
modal.reset();
|
||
|
||
var $chapters = editor.$body().find('.chapter');
|
||
|
||
$chapters.each(function (i) {
|
||
modal.addItem({
|
||
id: i + 1,
|
||
name: '第' + (i + 1) + '章'
|
||
});
|
||
});
|
||
|
||
modal.open();
|
||
|
||
$chapters.each(function (i) {
|
||
editor.drawHTML($(this)).then(function (canvas) {
|
||
modal.markCompleted(i + 1, canvas);
|
||
});
|
||
});
|
||
|
||
return false;
|
||
});
|
||
});
|
||
|
||
var EditorBar = function (options) {
|
||
var self = this;
|
||
var editor = options.editor;
|
||
var model = {
|
||
is_novel_online: ko.observable(options.is_novel_online),
|
||
titles: ko.observableArray(options.titles),
|
||
covers: ko.observableArray(options.covers),
|
||
body_templates: ko.observableArray(options.body_templates),
|
||
footer_templates: ko.observableArray(options.footer_templates),
|
||
|
||
changeTitle: function (title) {
|
||
scrollToElement('#wx-article-title', { offset: 10 }, function () {
|
||
editor.changeTitle(title.id);
|
||
});
|
||
},
|
||
|
||
changeCover: function (cover) {
|
||
scrollToElement('#wx-article-cover', { offset: 10 }, function () {
|
||
editor.changeCover(cover.id);
|
||
});
|
||
},
|
||
|
||
changeBodyTemplate: function (template) {
|
||
scrollToElement('#wx-article-body', { offset: 10 }, function () {
|
||
editor.changeBodyTemplate(template.id);
|
||
});
|
||
},
|
||
|
||
changeFooterTemplate: function (template) {
|
||
scrollToElement('#wx-article-footer', { offset: 10 }, function () {
|
||
editor.changeFooterTemplate(template.id);
|
||
});
|
||
},
|
||
|
||
openReferralLinkModal: function () {
|
||
|
||
GetReferralLinkModal.instance
|
||
.open({
|
||
article_id: editor.nextArticleId,
|
||
model: editor.model,
|
||
wx_article_title_id: editor.titleId,
|
||
wx_article_cover_id: editor.coverId,
|
||
wx_article_body_template_id: editor.bodyTemplateId,
|
||
wx_article_footer_template_id: editor.footerTemplateId
|
||
})
|
||
.then(function (link) {
|
||
location.href = '{:url('articles/editor',array('model_id'=>7))}?cartoonid='+editor.novelId+'&volumeid='+editor.nextArticleId+'&referral_link_id=' + link.id+'&model='+editor.model+'&mode='+editor.mode;
|
||
});
|
||
},
|
||
|
||
editReferralLink: function () {
|
||
GetReferralLinkModal.instance
|
||
.open({
|
||
id: editor.referralLinkId,
|
||
model: editor.model,
|
||
article_id: editor.nextArticleId,
|
||
wx_article_title_id: editor.titleId,
|
||
wx_article_cover_id: editor.coverId,
|
||
wx_article_body_template_id: editor.bodyTemplateId,
|
||
wx_article_footer_template_id: editor.footerTemplateId
|
||
});
|
||
}
|
||
};
|
||
|
||
self.init = function () {
|
||
ko.applyBindings(model, document.getElementById('editor-bar'));
|
||
}
|
||
};
|
||
|
||
var WxArticleEditor = function (options) {
|
||
var self = this;
|
||
var previewArticles = [];
|
||
var covers = [];
|
||
var titles = [];
|
||
var footerTemplates = [];
|
||
var bodyTemplates = [];
|
||
|
||
var $title = $('#wx-article-title');
|
||
var $cover = $('#wx-article-cover');
|
||
var $body = $('#wx-article-body');
|
||
var $footer = $('#wx-article-footer');
|
||
|
||
var editorBar = null;
|
||
|
||
this.titleId = options.title_id;
|
||
|
||
this.coverId = options.cover_id;
|
||
|
||
this.model = options.model;
|
||
|
||
this.mode = options.mode;
|
||
|
||
this.bodyTemplateId = options.body_template_id;
|
||
|
||
this.footerTemplateId = options.footer_template_id;
|
||
|
||
this.referralLinkId = options.referral_link_id;
|
||
|
||
this.novelId = options.novel_id;
|
||
|
||
this.categoryId = options.category_id;
|
||
|
||
this.articleId = options.article_id;
|
||
|
||
this.nextArticleId = options.next_article_id;
|
||
|
||
this.ctype = options.ctype;
|
||
|
||
this.init = function () {
|
||
return $.when(
|
||
loadCovers(),
|
||
loadTitles(),
|
||
loadFooterTemplates(),
|
||
loadBodyTemplates(),
|
||
loadPreviewArticles()
|
||
)
|
||
.then(function () {
|
||
editorBar = new EditorBar({
|
||
editor: self,
|
||
is_novel_online: options.is_novel_online,
|
||
titles: titles,
|
||
covers: covers,
|
||
body_templates: _.map(bodyTemplates, function (it) {
|
||
return { id: it.id, preview_img: it.preview_img };
|
||
}),
|
||
footer_templates: _.map(footerTemplates, function (it) {
|
||
return { id: it.id, preview_img: it.preview_img };
|
||
})
|
||
});
|
||
|
||
editorBar.init();
|
||
|
||
if (self.titleId) {
|
||
self.changeTitle(self.titleId);
|
||
} else {
|
||
renderTitle(_.sample(titles));
|
||
}
|
||
|
||
if (self.coverId) {
|
||
self.changeCover(self.coverId);
|
||
} else {
|
||
renderCover(_.sample(covers));
|
||
}
|
||
|
||
if (self.bodyTemplateId) {
|
||
self.changeBodyTemplate(self.bodyTemplateId);
|
||
} else {
|
||
renderBody(_.sample(bodyTemplates));
|
||
}
|
||
|
||
if (self.footerTemplateId) {
|
||
self.changeFooterTemplate(self.footerTemplateId);
|
||
} else {
|
||
renderFooter(_.sample(footerTemplates));
|
||
}
|
||
});
|
||
};
|
||
|
||
this.$body = function () {
|
||
return $body;
|
||
};
|
||
|
||
this.changeTitle = function (id) {
|
||
var title = _.find(titles, function (it) {
|
||
return it.id == id;
|
||
});
|
||
|
||
renderTitle(title);
|
||
};
|
||
|
||
this.changeCover = function (id) {
|
||
var cover = _.find(covers, function (it) {
|
||
return it.id == id;
|
||
});
|
||
|
||
renderCover(cover);
|
||
};
|
||
|
||
this.changeBodyTemplate = function (id) {
|
||
var template = _.find(bodyTemplates, function (it) {
|
||
return it.id == id;
|
||
});
|
||
|
||
renderBody(template);
|
||
};
|
||
|
||
this.changeFooterTemplate = function (id) {
|
||
var template = _.find(footerTemplates, function (it) {
|
||
return it.id == id;
|
||
});
|
||
|
||
renderFooter(template);
|
||
};
|
||
|
||
this.drawHTML = function ($el) {
|
||
$el.find('img').each(function () {
|
||
var src = $(this).attr('src');
|
||
if (src && src.indexOf('http') === 0) {
|
||
$(this).attr('src', '/backend/wx_article_editor/proxy?url=' + encodeURIComponent(src));
|
||
}
|
||
});
|
||
|
||
var canvas = document.createElement('canvas');
|
||
|
||
var scaleFactor = 2;
|
||
var targetWidth = 320;
|
||
|
||
var html = $el.html();
|
||
|
||
html = '<html>' +
|
||
'<head><style>html, body { padding:0; margin:0; } p { font-size:16px; font-weight:300; line-height:1.7em; font-family: "Microsoft YaHei", sans-serif; }</style></head>' +
|
||
'<body style="background-color:white"><div style="width:' + targetWidth + 'px">' + html + '</div></body></html>';
|
||
|
||
return rasterizeHTML.drawHTML(html, null, {
|
||
zoom: scaleFactor,
|
||
width: parseInt(targetWidth, 10) * scaleFactor
|
||
})
|
||
.then(function (result) {
|
||
|
||
var targetHeight = Math.floor(result.image.height / result.image.width * targetWidth);
|
||
|
||
canvas.style.width = targetWidth + 'px';
|
||
canvas.style.height = targetHeight + 'px';
|
||
|
||
canvas.width = targetWidth * scaleFactor;
|
||
canvas.height = targetHeight * scaleFactor;
|
||
|
||
var ctx = canvas.getContext('2d');
|
||
ctx.fillStyle = 'white';
|
||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||
|
||
canvas.getContext('2d').drawImage(result.image, 0, 0);
|
||
|
||
return canvas;
|
||
});
|
||
};
|
||
|
||
function renderTitle(title) {
|
||
if (!title) {
|
||
return false;
|
||
}
|
||
|
||
self.titleId = title.id;
|
||
|
||
$title.html(title.title);
|
||
}
|
||
|
||
function renderCover(cover) {
|
||
if (!cover) {
|
||
return false;
|
||
}
|
||
|
||
self.coverId = cover.id;
|
||
|
||
$cover.html('<img style="width:100%;display:block;margin-bottom:20px;" src="' + cover.cover_url + '" />');
|
||
}
|
||
|
||
function renderBody(template) {
|
||
if (!template) {
|
||
return false;
|
||
}
|
||
|
||
self.bodyTemplateId = template.id;
|
||
|
||
if (!template.compiled_template) {
|
||
template.compiled_template = Handlebars.compile(template.template);
|
||
}
|
||
|
||
$body.html(template.compiled_template({ chapters: previewArticles }));
|
||
}
|
||
|
||
function renderFooter(template) {
|
||
if (!template) {
|
||
return false;
|
||
}
|
||
|
||
self.footerTemplateId = template.id;
|
||
|
||
$footer.html(template.template);
|
||
}
|
||
|
||
function loadPreviewArticles() {
|
||
return $.get('{:url('articles/api_get_preview_articles',array('model_id'=>25))}?cartoonid=' + self.novelId+'¤t_article_id=' + self.articleId+'&model='+ self.model+'&mode='+ self.mode, function (data) {
|
||
previewArticles = data;
|
||
if (self.ctype === 1) {
|
||
LoadPreviewArticlesImages();
|
||
}else{
|
||
LoadPreviewArticlesText();
|
||
}
|
||
});
|
||
}
|
||
|
||
function loadCovers() {
|
||
return $.get('{:url('articles/api_get_covers',array('model_id'=>25))}?type=1&cid=' + self.categoryId+'&model='+ self.model, function (data) {
|
||
covers = data;
|
||
});
|
||
}
|
||
|
||
function loadTitles() {
|
||
return $.get('{:url('articles/api_get_titles',array('model_id'=>25))}?type=1&cid=' + self.categoryId+'&model='+ self.model, function (data) {
|
||
titles = data;
|
||
});
|
||
}
|
||
|
||
function loadFooterTemplates() {
|
||
return $.get('{:url('articles/api_get_footer_templates',array('model_id'=>25))}?ctype=' + self.ctype, function (data) {
|
||
footerTemplates = data;
|
||
});
|
||
}
|
||
|
||
function loadBodyTemplates() {
|
||
return $.get('{:url('articles/api_get_body_templates',array('model_id'=>25))}?ctype=' + self.ctype, function (data) {
|
||
bodyTemplates = data;
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 将文章漫画内容拆分成img数组
|
||
*/
|
||
function LoadPreviewArticlesImages() {
|
||
$.each(previewArticles, function (i, item) {
|
||
if (self.model==2)
|
||
{
|
||
var praAarray = $.parseJSON(item.content);
|
||
var images = _.map(praAarray, function (img) {
|
||
return '<img src="' + item.image_cdn + '/' + img + ' " />';
|
||
});
|
||
}else{
|
||
var praAarray = item.content;
|
||
var images = _.map(praAarray, function (img) {
|
||
//return '<img src="' + item.image_cdn + '/' + img + ' " />';
|
||
return '<img class="" data-src="' + item.image_cdn + '/' + img + ' " data-type="jpeg" data-w="640" style="border: 0px; vertical-align: middle; box-sizing: border-box !important; word-wrap: break-word !important; width: auto !important; height: auto !important; visibility: visible !important;" src="' + item.image_cdn + '/' + img + ' " data-fail="0">';
|
||
|
||
});
|
||
}
|
||
item.paragraphs = images;
|
||
});
|
||
|
||
}
|
||
|
||
function LoadPreviewArticlesText() {
|
||
$.each(previewArticles, function (i, item) {
|
||
//console.log(item.content);
|
||
//item.content = item.content.replace(/[ ]/g,"");
|
||
var praAarray = $.parseJSON(item.content);
|
||
item.paragraphs = praAarray;
|
||
|
||
});
|
||
|
||
}
|
||
|
||
function jsonfilter(string) {
|
||
var reg=/[\u0000-\u001f\u000B\u000C\u00A0\uFEFF\u1680\u180E\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000]/g;
|
||
return string.replace(reg," ");
|
||
};
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|