update for delete img

@@ -14,6 +14,8 @@ var phoneReg = /^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
 
 
 var validate = require('./order/validation');
 var validate = require('./order/validation');
 
 
+var imgBoxTpl = require('../../tpl/me/thumbnail.hbs');
+
 var validateMap = {
 var validateMap = {
     user: {
     user: {
         sl: '#user',
         sl: '#user',
@@ -400,6 +402,17 @@ function initAddr(areaCode) {
     }
     }
 }
 }
 
 
+function bindImgDeleteEvent() {
+    $('.operation-box .delete').off('click').on('click', function() {
+        var $thumb = $(this).closest('.thumb-box');
+        var $t = $thumb.siblings('.img-up-tip');
+        var number = $('.thumb-box').length - 1;
+
+        $t.text(number + '/4');
+        $thumb.remove();
+    });
+}
+
 function bindUploadEvent() {
 function bindUploadEvent() {
     var $tip = $('.img-up-tip');
     var $tip = $('.img-up-tip');
 
 
@@ -419,12 +432,13 @@ function bindUploadEvent() {
                     var $t;
                     var $t;
 
 
                     if (result.code === 200) {
                     if (result.code === 200) {
-                        img = '<img class="envidence" src="' + result.data + '" alt="凭证图片">';
+                        img = imgBoxTpl({src: result.data});
                         $t = $(that).next('.img-up-tip');
                         $t = $(that).next('.img-up-tip');
 
 
                         $(that).before(img);
                         $(that).before(img);
                         number += 1;
                         number += 1;
                         $t.text(number + '/4');
                         $t.text(number + '/4');
+                        bindImgDeleteEvent();
                     } else {
                     } else {
                         new _alert(result.message).show();
                         new _alert(result.message).show();
                     }
                     }

@@ -21,6 +21,36 @@
             }
             }
         }
         }
 
 
+        .thumb-box {
+            position: relative;
+            float: left;
+
+            .operation-box {
+                display: none;
+                width: 60px;
+                padding: 5px 0;
+                position: absolute;
+                top: 0;
+                background-color: rgba(0, 0, 0, 0.6);
+                text-align: center;
+                font-size: 12px;
+
+                .delete {
+                    cursor: pointer;
+                }
+
+                * {
+                    color: #fff !important;
+                }
+            }
+
+            &:hover {
+                .operation-box {
+                    display: block;
+                }
+            }
+        }
+
         .iconfont {
         .iconfont {
             &.checkbox {
             &.checkbox {
                 position: relative;
                 position: relative;
@@ -178,6 +208,5 @@
         width: 60px;
         width: 60px;
         height: 60px;
         height: 60px;
         margin-right: 10px;
         margin-right: 10px;
-        float: left;
     }
     }
 }
 }

+<div class="thumb-box">
+    <img class="envidence" src="{{src}}" alt="凭证图片">
+    <div class="operation-box">
+        <a href="{{src}}" target="_blank">查看</a>
+        <span class="delete">删除</span>
+    </div>
+</div>