fe / yohobuy-node · Commits

Go to a project

Authored by 刘传洋
Commit 9739c0612924c21adff288b66fa0235ee61ccb0b 1 parent 136d5720

temp

Inline Side-by-side
Showing 5 changed files with 130 additions and 24 deletions
... ... @@ -49,11 +49,9 @@
<button class="btn active radius" data-role="showCommentForm">评价商品</button>
</td>
</tr>
<tr data-role="commentAddForm" class="hide">
<tr data-role="commentAddForm" class="m-hide">
<td colspan="3" class="comment-add">
<em class="arrow">
<em class="arrow-in"></em>
</em>
<div class="arrow"><i></i><em></em></div>
<div class="row">
<label class="fl-left"><i class="color-warn require-sign">*</i> 商品满意度：</label>
<span class="comment-star editable">
... ... @@ -87,10 +85,9 @@
<textarea name="goodsComment"></textarea>
</div>
<div class="row img-list clearfix">
<div class="img-preview">
<img src="" />
<div class="img-preview selected">
<img src="" alt="">
<input type="file" />
<input type="file" id="upload-{{@index}}" />
<i class="view">查看</i>
<i class="del">删除</i>
</div>
... ... @@ -120,6 +117,8 @@
<div class="clearfix">
<div class="img-preview selected">
<img src="{{img}}" />
<i class="view">查看</i>
<i class="del">删除</i>
</div>
</div>
<p class="color-gray">评论时间：2016-10-10 21:21:21</p>
... ...
/**
* 图片预览
* @author: liuchuanyang<chuanyang.liu@yoho.cn>
* @date: 2016/10/27
*/
var $ = require('yoho-jquery'),
Handlebars = require('yoho-handlebars'),
Dialog = require('./dialog').Dialog;
var tpl = '<div class="toolbar">' +
'<span class="preview-route-left"><i class="iconfont"></i>向左转</span>' +
'<span class="preview-route-right"><i class="iconfont"></i>向右转</span>' +
'</div>' +
'<div class="preview-body"><img /></div>';
var tplFn = Handlebars.compile(tpl);
function ImgPreview(url, opt) {
var that = this;
var option = {
content: tplFn(),
className: 'img-preview-dialog'
};
Dialog.call(this, $.extend({}, opt || {}, option));
this._data = {
url: url,
rotate: 0
};
this.$previewBody = this.$el.find('.preview-body');
this.$img = this.$previewBody.find('img');
this.$toolbar = this.$el.find('.toolbar');
this.$toolbar.on('click', '.preview-route-left', function() {
that.rotateLeft();
});
this.$toolbar.on('click', '.preview-route-right', function() {
that.rotateRight();
});
}
ImgPreview.prototype = new Dialog({
inherit: true
});
ImgPreview.prototype.preview = function(url) {
if (url) {
this._data.url = url;
}
this._data.rotate = 0;
this.$img.attr('src', this._data.url);
this.show();
};
ImgPreview.prototype.refresh = function() {
this.$img.css('transform', 'rotate(' + this._data.rotate + 'deg)');
};
ImgPreview.prototype.rotateLeft = function() {
this._data.rotate = this._data.rotate - 90;
this.refresh();
};
ImgPreview.prototype.rotateRight = function() {
this._data.rotate = this._data.rotate + 90;
this.refresh();
};
ImgPreview.prototype.constructor = ImgPreview;
module.exports = ImgPreview;
... ...
... ... @@ -4,6 +4,7 @@
* @date: 2016/3/1
*/
var $ = require('yoho-jquery');
var ImgPreview = require('../common/img-preview');
var $comment = $('.comment-table'),
$remarkBtn = $comment.find('.remark-btn');
... ... @@ -14,7 +15,8 @@ var $dialog = $('#comment-dialog-widget'),
var pageW = $(document).width(),
pageH = $(document).height(),
winH = $(window).height();
winH = $(window).height(),
preview = new ImgPreview();
var dialog = {
canmove: false,
... ... @@ -90,6 +92,13 @@ $(document).mousemove(function(e) {
dialog.canmove = false;
});
$('.img-preview').on('click', 'i.view', function() {
var url = $(this).closest('.img-preview').find('img').attr('src');
preview.preview(url);
});
$dialog.on('click', '.dialog-save-btn', function() {
var remark = $.trim($commentArea.val()),
param;
... ... @@ -126,8 +135,8 @@ $dialog.on('click', '.dialog-close-btn', function() {
$dialog.addClass('hide');
});
$('.comment-add input:file').each(function(e) {
var $this = $('#upload-img-' + e),
$('.comment-add input[type="file"]').each(function(i, it) {
var $this = $(it),
$par = $this.closest('.problem-description');
if (!window.location.origin) {
... ... @@ -140,8 +149,8 @@ $('.comment-add input:file').each(function(e) {
file_post_name: 'fileData',
button_text: '<span class="btn_upload_text">上传图片</span>',
button_text_style: '.btn_upload_text{color: #ffffff;}',
button_width: 116,
button_height: 33,
button_width: 60,
button_height: 60,
button_text_left_padding: 32,
button_text_top_padding: 8,
button_action: window.SWFUpload.BUTTON_ACTION.SELECT_FILE,
... ... @@ -169,6 +178,11 @@ $('.comment-add input:file').each(function(e) {
// comment form
$('.comment-table').on('click', '[data-role="showCommentForm"]', function() {
// $('[data-role="showCommentForm"]).
var $ntr = $(this).closest('tr').next('tr');
if ($ntr.attr('data-role') === 'commentAddForm') {
$ntr.toggle();
}
});
... ...
... ... @@ -33,6 +33,9 @@
.fl-left{
float: left;
}
.m-hide{
display:none;
}
.comment .title {
background-image: resolve(img/home/comment.png);
}
... ... @@ -185,21 +188,30 @@
padding: 20px 50px;
position:relative;
.arrow,.arrow-in{
.arrow {
position: absolute;
width:40px;
height:20px;
left:75%;
margin-left:-20px;
top:-40px;
width:0;
height:0;
border-color: transparent transparent #CCC transparent;
border-width:20px;
border-style:dashed dashed solid dashed;
}
.arrow-in{
border-color: transparent transparent #FFF transparent;
top:-19px;
left:0;
top:-20px;
overflow:hidden;
i, em {
position: absolute;
width:0;
height:0;
left: 0;
top:-20px;
border-color: transparent transparent #CCC transparent;
border-width:20px;
border-style:dashed dashed solid dashed;
}
em {
border-color: transparent transparent #FFF transparent;
top:-19px;
left:0;
}
}
.row {
margin-bottom:16px;
... ...