页面生成图片优化

@@ -11,6 +11,9 @@
     <link rel="stylesheet" href="__TMPL__/public/assets/css/reset.css"/>
     <link rel="stylesheet" href="__TMPL__/public/assets/css/log.css"/>
     <style>
+        .disabled {
+            background: #999;
+        }
         .tx_masktwo {
             display: none;
             z-index: 2;
@@ -421,7 +424,7 @@
     </foreach>
 </div>
 <div class="view_img" style="padding: 0 0.3rem;display: none;">
-    <div class="log_three_select_one log_three_select_btn down" href="javascript:;" id="view_cavans">查看订单截图</div>
+    <div class="log_three_select_one log_three_select_btn down" href="javascript:;" id="view_canvas">查看订单截图</div>
 </div>
 <!-- 列表内容 -->
 <div id="orderlist" style="background: #fff;">
@@ -736,7 +739,6 @@
         (function ($, doc) {
             $.init();
             school_arr = {$school};
-            console.log(data_class_arr, 'dfdfds');
             $.ready(function () {
                 schoolpicker.setData(school_arr);
                 classpicker.setData(data_class_arr);
@@ -754,9 +756,6 @@
     var express_word
     $(".log_three_select_tongyi").click(function () {
         expresspicker.show(function (e) {
-            console.log(e, '3333')
-            console.log(e[0].value);
-            console.log(e[0].text);
             express_word = e[0].value;
             console.log(express_word, "experss_word")
             $(".express_word").text(e[0].text);
@@ -836,9 +835,6 @@
     var excompany_word
     $(".excompany").click(function () {
         excompanypicker.show(function (e) {
-            console.log(e, '3333')
-            console.log(e[0].value);
-            console.log(e[0].text);
             school_name = e[0].value
             $(".excompany_word").text(e[0].text);
             $("#logistic_name").val(e[0].value);
@@ -861,11 +857,6 @@
         var tabIndex = $(this).index();
         $(this).addClass("log_three_tab_two").addClass("word_color").addClass('aaa').siblings().removeClass("log_three_tab_two").removeClass("word_color").removeClass("aaa");
         $('.log_three_list_contant').eq(tabIndex).css('display', 'block').siblings().css('display', 'none');
-        if(tabIndex == 0) {
-            $('.view_img').css('display','block');
-        } else {
-            $('.view_img').css('display','none');
-        }
         search();
         $('.log_three_fixed_left_one img').attr('src', "__TMPL__/public/assets/images/fangkuang.png")
     });
@@ -1159,7 +1150,9 @@
                             "            <span style=\"width: 70%;height:20px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;float: left;\">"+g_c.book_name+"</span>:"+g_c.number_sum+"\n" +
                             "        </div>"
                     })
-                    $('.goods').html(goods_count_html)
+                    $('.goods').html(goods_count_html);
+                    count = result.length;
+                    order2canvas();
                 } else {
                     alert('未知错误');
                 }
@@ -1425,47 +1418,67 @@
 </script>
 <script>
     var count = "{$count}";
-    if(count > 0) {
-        var img_url = '';
-        var k= $("#orderlist").offset().top;
-        var canvas2 = document.createElement("canvas");
-        let
-            _canvas = document.querySelector('#orderlist');
-        var w = parseInt(window.getComputedStyle(_canvas).width);
-        var h = parseInt(window.getComputedStyle(_canvas).height);
-        //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
-        canvas2.width = w * 2;
-        canvas2.height = (h + 400) * 2;
-        canvas2.style.width = w + "px";
-        canvas2.style.height = h + "px";
-        //可以按照自己的需求，对context的参数修改,translate指的是偏移量
-        //  var context = canvas.getContext("2d");
-        //  context.translate(0,0);
-        var context = canvas2.getContext("2d");
-        context.scale(2, 2);
-        html2canvas(document.querySelector('#orderlist'), { canvas: canvas2 }).then(function(canvas) {
-            //document.body.appendChild(canvas);
-            //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
-            $.ajax({
-                type: 'POST',
-                url: "{:url('upload_img')}",
-                data: {img:canvas.toDataURL(),top:k},
-                dataType: 'json',
-                success: function (res) {
-                    img_url = res.data;
-                    $('.view_img').css('display','block');
-                }
+    var allow = true;
+    order2canvas();
+    function order2canvas() {
+        if(count > 0 && allow) {
+            var img_url = '';
+            var k= $("#orderlist").offset().top;
+            var canvas2 = document.createElement("canvas");
+            let
+                _canvas = document.querySelector('#orderlist');
+            var w = parseInt(window.getComputedStyle(_canvas).width);
+            var h = parseInt(window.getComputedStyle(_canvas).height);
+            //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
+            canvas2.width = w * 2;
+            canvas2.height = (h + 400) * 2;
+            canvas2.style.width = w + "px";
+            canvas2.style.height = h + "px";
+            //可以按照自己的需求，对context的参数修改,translate指的是偏移量
+            //  var context = canvas.getContext("2d");
+            //  context.translate(0,0);
+            var context = canvas2.getContext("2d");
+            context.scale(2, 2);
+            html2canvas(document.querySelector('#orderlist'), { canvas: canvas2 }).then(function(canvas) {
+                //document.body.appendChild(canvas);
+                //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
+                var text = $('#view_canvas').text();
+                $.ajax({
+                    type: 'POST',
+                    url: "{:url('upload_img')}",
+                    data: {img:canvas.toDataURL(),top:k},
+                    dataType: 'json',
+                    beforeSend: function() {
+                        allow = false;
+                        $('#view_canvas').text('截图生成中...');
+                        if(!$('#view_canvas').hasClass('disabled')) {
+                            $('#view_canvas').addClass('disabled');
+                        }
+                    },
+                    success: function (res) {
+                        img_url = res.data;
+                        $('.view_img').css('display','block');
+                        $('#view_canvas').text(text);
+                        $('#view_canvas').removeClass('disabled');
+                        allow = true;
+                    }
+                });
+                // document.querySelector(".down").setAttribute('href', canvas.toDataURL());
             });
-            // document.querySelector(".down").setAttribute('href', canvas.toDataURL());
-        });
-        $('#view_cavans').click(function(){
+        } else {
+            if(!$('#view_canvas').hasClass('disabled')) {
+                $('#view_canvas').addClass('disabled');
+            }
+        }
+    }
+    $('#view_canvas').click(function(){
+        if(!$('#view_canvas').hasClass('disabled')) {
             wx.previewImage({
                 current: img_url, // 当前显示图片的http链接
                 urls: [img_url] // 需要预览的图片http链接列表
             });
-        })
-    }
-
+        }
+    })
 </script>
 </body>