2020-09-01 开心农场销售、种植添加上传图片功能

templates/backstageNet/production/cropcount.html

@@ -140,6 +140,29 @@
         .layui-col-xs6 {
             padding: 10px 10px 0 10px;
         }
+
+        /* 图片预览 */
+
+        .layui-upload-img {
+            width: 92px;
+            height: 92px;
+            margin: 0 10px 10px 0;
+        }
+
+        .uploadImg {
+            position: absolute;
+            margin: 10px 0;
+            width: 92px;
+            height: 92px;
+            background: none;
+            border: 1px solid #b8b8b8;
+            cursor: pointer;
+        }
+
+        .uploadImgIcon {
+            background: url(../../static/imgs/uploadImgIcon.png) no-repeat center;
+            background-size: 80% 80%;
+        }
     </style>
 </head>
 
@@ -253,6 +276,19 @@
                     </div>
                 </div>
 
+                <div class="layui-form-item">
+                    <label class="layui-form-label">农场图：</label>
+                    <div class="layui-input-inline">
+                        <button type="button" class="uploadImg uploadImgIcon" id="pickImg"></button>
+                        <!-- 隐藏的input -->
+                        <input type="hidden" id="crop_img" name="crop_img" value="" />
+                        <div class="layui-upload-list">
+                            <img class="layui-upload-img" id="demo1">
+                            <p id="demoText"></p>
+                        </div>
+                    </div>
+                </div>
+
 
                 <div class="layui-form-item">
                     <div class="layui-input-block">
@@ -268,10 +304,11 @@
     <script src="{% static '/lib/layui/layui.js'%}"></script>
     <script>
         var element, laydate, laypage, form;
-        layui.use(['element', 'layer', 'laydate', 'laypage', 'form'], function () {
+        layui.use(['element', 'layer', 'laydate', 'laypage', 'form', 'upload'], function () {
             laydate = layui.laydate;
             laypage = layui.laypage;
             form = layui.form;
+            upload = layui.upload;
             //执行一个laydate实例
             laydate.render({
                 elem: '#timSelectBox' //指定元素
@@ -682,10 +719,45 @@
                 return false;
             });
 
+             //图片上传
+             var uploadInst = upload.render({
+                elem: '#pickImg'
+                , url: 'cropcount_photo'
+                , field: 'gar_img'
+                , xhr: function () { }
+                , before: function (obj) {
+                    $('.uploadImg').removeClass('uploadImgIcon')
+                    //预读本地文件示例，不支持ie8
+                    obj.preview(function (index, file, result) {
+                        $('#demo1').attr('src', result); //图片链接（base64）
+                    });
+                }
+                , done: function (res) {
+                    //如果上传失败
+                    if (res.code == 0) {
+                        console.log(res.data.src)
+                        //上传成功
+                        document.getElementById("crop_img").value = res.data.src;
+                    } else {
+                        return layer.msg('上传失败');
+                    }
+
+
+                }
+                , error: function () {
+                    //演示失败状态，并实现重传
+                    var demoText = $('#demoText1');
+                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
+                    demoText.find('.demo-reload').on('click', function () {
+                        uploadInst.upload();
+                    });
+                }
+            });
+
         })
 
         // 渲染农场下拉框数据
-        function renderSelect(data) {   
+        function renderSelect(data) {
             $('#farmSelct').html('');
             var html = '';
             for (var i = 0; i < data.length; i++) {
@@ -745,7 +817,8 @@
                                 '<div class="userItem">' +
                                 '<div class="userMsg">' +
                                 '<div class="fl imgDiv">' +
-                                '<img src="" alt="">' +
+                                // '<img src="" alt="">' +
+                                '<img src="' + group[i].data.crop_img +'" alt="">' +
                                 '<p>' + group[i].data.cropname + '</p>' +
                                 '</div>' +
                                 '<div class="userInfo">' +
@@ -849,7 +922,7 @@
                     } else {
                         var html = '<div class="layui-col-xs12 " style="line-height:100px;text-align:center">暂无数据</div>'
                         $('#box').html(html);
-                    }  
+                    }
                 },
                 error: function (type) {
                     console.log(type)
@@ -886,6 +959,7 @@
                         $('input[name="crop_count"]').val(crop_count) //面积
                         $('input[name="area"]').val(data[0].area) //所属园区
                         $('input[name="id"]').val(data[0].id) //id
+                        $('#crop_img').val(data[0].crop_img)
                         form.render()
                     },
                     error: function (type) {

templates/backstageNet/production/sellManage.html

@@ -116,6 +116,29 @@
         }
 
         /*  */
+
+        /* 图片预览 */
+
+        .layui-upload-img {
+            width: 92px;
+            height: 92px;
+            margin: 0 10px 10px 0;
+        }
+
+        .uploadImg {
+            position: absolute;
+            margin: 10px 0;
+            width: 92px;
+            height: 92px;
+            background: none;
+            border: 1px solid #b8b8b8;
+            cursor: pointer;
+        }
+
+        .uploadImgIcon {
+            background: url(../../static/imgs/uploadImgIcon.png) no-repeat center;
+            background-size: 80% 80%;
+        }
     </style>
 </head>
 
@@ -233,6 +256,19 @@
                 </div>
 
                 <div class="layui-form-item">
+                    <label class="layui-form-label">农场图：</label>
+                    <div class="layui-input-inline">
+                        <button type="button" class="uploadImg uploadImgIcon" id="pickImg"></button>
+                        <!-- 隐藏的input -->
+                        <input type="hidden" id="sell_img" name="sell_img" value="" />
+                        <div class="layui-upload-list">
+                            <img class="layui-upload-img" id="demo1">
+                            <p id="demoText"></p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="layui-form-item">
                     <div class="layui-input-block">
                         <input type="hidden" name="id" value="">
                         <button class="layui-btn  layui-btn-normal" lay-submit lay-filter="formDemo">立即提交</button>
@@ -247,10 +283,11 @@
     <script src="{% static '/lib/layui/layui.js'%}"></script>
     <script>
         var element, laydate, laypage, form;
-        layui.use(['element', 'layer', 'laydate', 'laypage', 'form'], function () {
+        layui.use(['element', 'layer', 'laydate', 'laypage', 'form', 'upload'], function () {
             // layer = layui.layer;
             laydate = layui.laydate;
             laypage = layui.laypage;
+            upload = layui.upload;
             form = layui.form;
             //执行一个laydate实例
             laydate.render({
@@ -267,8 +304,7 @@
 
             //监听提交
             form.on('submit(formDemo)', function (data) {
-                // layer.msg(JSON.stringify(data.field));
-                console.log(data.field)
+                console.log(data.field) 
                 $.ajax({
                     url: 'sell_new',
                     type: 'post',
@@ -283,8 +319,8 @@
                 return false;
             });
 
-             // 获取农场选择
-             form.on('select(garden)', function (data) {
+            // 获取农场选择
+            form.on('select(garden)', function (data) {
                 $.ajax({
                     url: 'contrast',
                     type: 'post',
@@ -308,6 +344,40 @@
                 })
             });
 
+            //图片上传
+            var uploadInst = upload.render({
+                elem: '#pickImg'
+                , url: 'sell_photo' 
+                , field: 'gar_img'
+                , xhr: function () { }
+                , before: function (obj) {
+                    $('.uploadImg').removeClass('uploadImgIcon')
+                    //预读本地文件示例，不支持ie8
+                    obj.preview(function (index, file, result) {
+                        $('#demo1').attr('src', result); //图片链接（base64）
+                    });
+                }
+                , done: function (res) {
+                    //如果上传失败
+                    if (res.code == 0) {
+                        //上传成功
+                        document.getElementById("sell_img").value = res.data.src;
+                    } else {
+                        return layer.msg('上传失败');
+                    }
+
+
+                }
+                , error: function () {
+                    //演示失败状态，并实现重传
+                    var demoText = $('#demoText1');
+                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
+                    demoText.find('.demo-reload').on('click', function () {
+                        uploadInst.upload();
+                    });
+                }
+            });
+
             getSellList(1, currPage)
 
         })
@@ -344,7 +414,7 @@
                             var datMsg = JSON.stringify(dat[i])
                             html += '<div class="layui-col-xs6 layui-col-sm6 layui-col-md4 sellItem"><input type="hidden" class="currId" value="' + dat[i].id + '">' +
                                 '<div class="userItem"><p class="username">' + dat[i].farm + '</p>' +
-                                '<div class="userMsg"><img src="../static/imgs/Customer.png" class="fl" alt="">' +
+                                '<div class="userMsg"><img src="' + dat[i].sell_img + '" class="fl" alt="">' +
                                 '<div class="userInfo"><p>商品名称： ' + dat[i].name + '</p><p>出货数量： ' + dat[i].num + '(公斤)</p><p>金额/元： ' + dat[i].money + '</p>' +
                                 '<p>时间： ' + time[0] + '</p></div></div><div class="operateDiv">' +
                                 '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick=\'edit(' + datMsg + ')\'>修改</button>' +
@@ -384,7 +454,6 @@
         }
 
         function edit(dat) {
-            console.log(dat.time)
             form.val("sellForm", {
                 "farm": dat.farm
                 , "name": dat.name
@@ -392,6 +461,7 @@
                 , "money": dat.money
                 , "time": dat.time
                 , "id": dat.id
+                , "sell_img": dat.sell_img
             })
             selectModelFun('编辑')
         }
@@ -434,7 +504,7 @@
                     type: 1,
                     title: title,
                     content: $('#selectModel'),
-                    area: ['500px', '450px'],
+                    area: ['500px', '600px'],
                     cancel: function (index, layero) {
                         cancel()
                     }