ZLPMS/PMS.WebUI/Views/MobileProblem/NewProblemForCustom.cshtml


@{
    ViewBag.Title = "NewProblemForCustom";
    Layout = "~/Views/MobileProblem/_APPMain.cshtml";
}


    <link href="~/Content/Style/MobileProductRegist/iconfont.css" rel="stylesheet" />
    <link href="~/Content/Scripts/plugins/mui/css/webuploader.css" rel="stylesheet" />
    <link href="~/Content/Style/MobileProductRegist/NewProblem.css" rel="stylesheet" />
    <script src="~/Content/Scripts/plugins/mui/js/webuploader.js?v=1.2"></script>
    <script  src="~/Content/Scripts/plugins/mui/js/PlusUploader.js?v=1.612">
    </script>
    @*<script type="text/babel"  src="~/ViewModels/JY.AppInterface.js?v=1.18">
    </script>*@
    

    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="~/Content/Scripts/babel.min.js"></script>
    <script src="~/Content/Scripts/polyfill.min.js"></script>

    <style>

        .mui-active {
            color: #2ab8ff !important;
        }

        .mui-icon.iconfont.icon-wentifankui {
            font-size: 35px;
        }

        .icon-soushuo {
            color: white;
        }

        .mui-btn-positive, .mui-btn-success, .mui-btn-green {
            border: 1px solid #2ab8ff;
            background-color: #2ab8ff;
        }

        .UplodImg {
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            align-content: center;
            padding: 7px 27px;
        }

        .filep {
            -webkit-line-clamp: 1;
            overflow: hidden;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            position: absolute;
            bottom: 12px;
            background-color: rgba(0, 0, 0, 0.6);
            font-size: 13px;
            color: white;
            width: 100px;
        }

        .destory {
            position: absolute;
            top: 0;
            right: -6px;
            width: 10px;
            height: 10px;
            font-size: 20px;
            color: #cc9a9a;
            margin-bottom: 11px;
            transition: color 0.2s ease-out;
            background-color: transparent;
            border: transparent;
        }

            .destory:after {
                content: '×';
                position: absolute;
                top: -10px;
                right: 5px;
            }

       
    </style>

    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color:#ffffff"></a>
        <h1 class="mui-title" style="color:white">中联产品问题登记</h1>
    </header>
    @*<nav class="mui-bar mui-bar-tab">
            <button v-on:click="Submit()" type="button" class="mui-btn mui-btn-primary" style="width:48%;background-color: #2ab8ff;border:none;margin-right:10px">直接提交</button>
            <button v-on:click="StatusSelect()" type="button" class="mui-btn mui-btn-danger" style="width:48%;border:none;background-color: #fb7e00">下一步（填写处理状态）</button>
        </nav>*@
    <div class="mui-content mui-scroll-wrapper" id="scr1">
        <div class="mui-scroll">


            <div id="VUE">
                <div class="mui-input-row" style="margin-top: 7px">
                    <input id="ProblemTitile" type="text" class="mui-input-speech mui-input-clear" placeholder="填写问题标题" style="font-size:15px">
                </div>
                <div class="mui-input-row " style="font-size:14px">
                    <textarea  id="detail" rows="8" placeholder="请填写具体的问题描述，以便我们更详细的了解您需要解决的问题。" style="font-size:15px;margin-bottom:-10px"></textarea>
                    <span id="deatilSpeech" class="mui-icon  mui-icon-speech" style="position:absolute;bottom:4px;right:0;color: #999;"></span>
                </div>
                <div style="background-color:white;margin-top:10px">
                    <div class="UplodImg" id="pickImg">
                        <h4 style="font-weight:400">图片</h4>
                        <div>
                            @*<span class="mui-icon mui-icon-camera" id="pickCamera" style="color:#1296db;margin-right:20px;font-size:28px"></span>
                            <span class="mui-icon mui-icon-image" id="pickPhoto" style="color:#1296db"></span>*@
                            <span class="mui-icon mui-icon-camera" id="pickCamera" style="color:#1296db;"></span>
                        </div>
                    </div>
                    <ul id="ImgList" class="mui-table-view mui-grid-view mui-grid-9" style="background-color:white;border-color:transparent;margin:0"></ul>
                </div>
                <div style="background-color:white;border-top: solid 1px #efeff4;">
                    <div class="UplodImg" id="pickFlie">
                        <h4 style="font-weight:400">附件</h4>
                        <span class="mui-icon mui-icon-paperclip" style="color:#1296db"></span>
                    </div>
                    <ul id="FileList" class="mui-table-view mui-grid-view mui-grid-9" style="background-color:white;border-color:transparent;"></ul>
                </div>


                <div style="display:none" id="picker">选择文件</div>
                <div style="display:none" id="picker2">选择文件</div>
                <button style="margin-top: 30px;display:none;" id="ctlBtn" class="btn btn-default">图片上传</button>

                <div style="margin-bottom:50px"></div>
            </div>


            <div style="display:none" id="picker">选择文件</div>
            <button style="margin-top: 30px;display:none;" id="ctlBtn" class="btn btn-default">开始上传</button>
            <button type="button" style="margin-top: 10px;border-radius: 10px;font-size:15px;margin:auto" class="mui-btn mui-btn-success mui-btn-block btn_2" onclick="Submit()">提交</button>
        </div>

    </div>



    <script >
        
        mui.plusReady(function () {
            document.getElementById('deatilSpeech').addEventListener('tap', function () {
                plus.speech.startRecognize({
                    engine: 'baidu',
                    lang: 'zh-cn'
                }, function (s) {
                    $("#detail").val(s);
                }, function (e) {
                    console.log('语音识别失败：' + JSON.stringify(e));
                });
            });

        });

        mui.init({
            swipeBack: true //启用右滑关闭功能
        });
        //是否在Plus环境下
        var IsPlus = mui.os.plus ? true : false;
        var FivePlusUploder;

        //家医APP环境
        //var JyApp = typeof (myInterfaceName) == "undefined" ? false : myInterfaceName;
        //var jyAppInterface;
        var JyApp = false;
        var jyAppInterface;

        mui('.mui-scroll-wrapper').scroll();
        LoadUploder();
        ///提交产品问题
        function Submit() {
            var param = {
                detail: $("#detail").val(),
                ProblemTitile: $("#ProblemTitile").val(),
                ProductCode: "@ViewBag.ProductCode",
            };

            if ($("#ProblemTitile").val().trim() == '') {
                mui.toast('请输入问题标题', { duration: 'long', type: 'div' });
                $('#ProblemTitile').focus();
                return;
            }
            if ($("#detail").val().trim() == '') {
                mui.toast('请填写问题详细描述', { duration: 'long', type: 'div' });
                $('#detail').focus();
                return;
            }

            lod = mui.showLoading("正在提交，请稍后...", "div");
            $.post("/MobileProblem/SubmitProblem", param, function (data) {
                if (data.code == 200) {
                    ProblemProcessIDtoImg = data.msg;
                    $("#ctlBtn").click();
                } else {
                    mui.toast(data.msg, { duration: 'long', type: 'div' });
                }
            })
        }
        function LoadUploder() {
            $("#ProblemTitile").mouseleave(function () {
                if (!$("#detail").val()) {
                    var va = $("#ProblemTitile").val();
                    $("#detail").val(va);
                }
            })
            Load();
            if (IsPlus) {
                FivePlusUploder = new FivePlus();
            } else {
                $('#ProblemTitile').removeClass('mui-input-speech');
                $('#deatilSpeech').remove();
                
            }
            if (JyApp) {
                jyAppInterface = new jyAppInterface({ myInterfaceName: JyApp });
            }
        }


        var Count = 0;
        var ProblemProcessIDtoImg;
        var lod;
        function Load() {

            var $list = $("#ImgList");
            var $list2 = $("#FileList");
            var $btn = $("#ctlBtn");
            var thumbnailWidth = 100;
            var thumbnailHeight = 100;
            var uploader = WebUploader.create({

                // 选完文件后，是否自动上传。
                auto: false,
                // swf文件路径
                swf: '/Content/Scripts/plugins/mui/js/Uploader.swf',

                // 文件接收服务端。
                server: '/MobileProblem/FlieUploadAndSave',

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#picker2',


                // 只允许选择图片文件。
                compress: {
                    width: 1600,
                    height: 1600,

                    // 图片质量，只有type为`image/jpeg`的时候才有效。
                    quality: 90,

                    // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
                    allowMagnify: false,

                    // 是否允许裁剪。
                    crop: false,

                    // 是否保留头部meta信息。
                    preserveHeaders: true,

                    // 如果发现压缩后文件大小比原来还大，则使用原来图片
                    // 此属性可能会影响图片自动纠正功能
                    noCompressIfLarger: false,

                    // 单位字节，如果图片大小小于此值，不会采用压缩。
                    compressSize: 0

                }
            });
            uploader.on('fileQueued', function (file) {
                var $li = $('<li id="' + file.id + '" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><img> <button class="destory"></button><p class="filep">' + file.name + '</p> </li>'),
                $img = $li.find('img');


                // $list为容器jQuery实例
                if (file.type.substring(0, 5) == "image") {
                    $list.append($li);
                } else {
                    $list2.append('<li id="' + file.id + '" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><span class="mui-icon mui-icon-upload" style="padding-bottom:10px"></span><button class="destory"></button>' +
                        '<p class="filep">' + file.name + '</p></li>');

                }
                $("#" + file.id).children(".destory").click( function(){
                    uploader.removeFile(file);
                    $("#" + file.id).remove();
                })


                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }

                    $img.attr('src', src);
                }, thumbnailWidth, thumbnailHeight);
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function (file, response) {
                $('#' + file.id).addClass('upload-state-done');
                if (response.msg = "1") {
                    Count += 1;
                }
            });

            // 文件上传失败，显示上传出错。
            uploader.on('uploadError', function (file) {
                var $li = $('#' + file.id),
                $error = $li.find('div.error');

                // 避免重复创建
                if (!$error.length) {
                    $error = $('<div class="error"></div>').appendTo($li);
                }

                $error.text('上传失败');
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadComplete', function (file) {
                $('#' + file.id).find('.progress').remove();

            });
            uploader.on('uploadFinished', function () {
                mui.hideLoading(lod);
                if (IsPlus) {
                    FivePlusUploder.uplod(ProblemProcessIDtoImg, lod);
                } else if (JyApp) {
                    var sod = mui.showLoading("正在提交，请稍后...", "div");
                    jyAppInterface.Upload(ProblemProcessIDtoImg,(count2) => {
                        mui.hideLoading(sod);
                        mui.alert("问题已经反馈成功，请耐心等待！", "提交成功", "确定", function () {
                            window.location.href = "/MobileProblem/Home";
                        }, 'div');
                    });
                }
                else {

                    mui.alert("问题反馈成功，请耐心等待，成功上传" + Count + "个附件!", "提交成功", "确定", function () {
                        window.location.href = "/MobileProblem/Home";
                    }, 'div');
                }
            })
            $btn.on('click', function () {
                uploader.options.formData.ProcessId = ProblemProcessIDtoImg;
                uploader.upload();

            });
            if (!IsPlus && !JyApp) {
                document.getElementById('pickImg').addEventListener('tap', function () {
                    $("#picker").find('.webuploader-element-invisible').click();
                });
            }
            document.getElementById('pickFlie').addEventListener('tap', function () {
                $("#picker2").find('.webuploader-element-invisible').click();
            });
            uploader.addButton({
                id: '#picker',
                innerHTML: '选择文件',
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                },
                capture: 'camera'//设置默认打开方式
            });


        }
        function SaveUserImg(imgbase64) {
            jyAppInterface.SaveUserImg(imgbase64);
        }
    </script>