temp

刘传洋
Commit 9739c0612924c21adff288b66fa0235ee61ccb0b 1 parent 136d5720
Showing 5 changed files with 121 additions and 15 deletions
apps/home/views/action/comment.hbs
public/js/common/img-preview.js
public/js/home/comment.page.js
public/scss/common/_img-preview.css
public/scss/home/_comment.css
--- a/apps/home/views/action/comment.hbs
View file @9739c06
+++ b/apps/home/views/action/comment.hbs
View file @9739c06
@@ -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>
--- a/public/js/common/img-preview.js 0 → 100644
View file @9739c06
+++ b/public/js/common/img-preview.js 0 → 100644
View file @9739c06
+/**
+ * 图片预览
+ * @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;
--- a/public/js/home/comment.page.js
View file @9739c06
+++ b/public/js/home/comment.page.js
View file @9739c06
@@ -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();
+    }
 });
--- a/public/scss/common/_img-preview.css 0 → 100644
View file @9739c06
+++ b/public/scss/common/_img-preview.css 0 → 100644
View file @9739c06
+.img-preview{
+
+}
--- a/public/scss/home/_comment.css
View file @9739c06
+++ b/public/scss/home/_comment.css
View file @9739c06
@@ -33,6 +33,9 @@
     .fl-left{
         float: left;
     }
+    .m-hide{
+        display:none;
+    }
     .comment .title {
         background-image: resolve(img/home/comment.png);
     }
@@ -185,22 +188,31 @@
             padding: 20px 50px;
             position:relative;
-            .arrow,.arrow-in{
+            .arrow {
                 position: absolute;
+                width:40px;
+                height:20px;
                 left:75%;
                 margin-left:-20px;
-                top:-40px;
+                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;
                 }
-            .arrow-in{
+                em {
                     border-color: transparent transparent #FFF transparent;
                     top:-19px;
                     left:0;
                 }
+            }
             .row {
                 margin-bottom:16px;