t1
/
ZLPMS


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380
							
@{
    Layout = null;
}


<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>中联区卫问题登记</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="~/Content/Scripts/plugins/mui/css/mui.css" rel="stylesheet" />
    <script src="~/Content/Scripts/jquery.min.js"></script>
    <script src="~/Content/Scripts/plugins/mui/js/mui.js"></script>
    <link href="~/Content/Style/MobileProductRegist/iconfont.css" rel="stylesheet" />
    <link href="~/Content/Scripts/plugins/mui/css/mui.picker.all.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/mui.picker.all.js"></script>
    <script src="~/Content/Scripts/plugins/mui/js/webuploader.js?v=1.2"></script>
    <script type="text/babel" src="~/Content/Scripts/plugins/mui/js/PlusUploader.js?v=1.7"></script>

    <script src="~/Content/Scripts/vue.js"></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>
 
</head>
<body>

    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","HelveticaNeue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
        }

        .mui-bar {
            box-shadow: 0 0 7px rgb(183,210,422);
        }

        .mui-bar-nav {
            background-color: rgb(128, 180, 251);
        }

        .mui-active {
            color: rgb(142,190,254) !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 #80b4fb;
            background-color: #80b4fb;
        }
        .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;
        }
          .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">
        <h1 class="mui-title" style="color:white">中联区卫问题登记</h1>
    </header>

    <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-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>
                    

                </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"></span>
                            <span class="mui-icon mui-icon-image" id="pickPhoto" 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 id="ZlUser" v-if="@ViewBag.UserType">

                </div>
                <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    type="text/babel">
        mui.init({
            swipeBack: true //启用右滑关闭功能
        });
        //是否在Plus环境下
        var IsPlus = mui.os.plus ? true : false;
        var FivePlusUploder;

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

            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("/MobileAccount/SubmitProblemByScanCode", param, function (data) {
                if (data.code == 200) {
                    ProblemProcessIDtoImg = data.msg;
                    $("#ctlBtn").click();
                } else {
                    mui.toast(data.msg, { duration: 'long', type: 'div' });
                }
            })
        }
        function LoadUploder() {
            if (!GProductCode || !GregistrantID || !GInstitutionResId) {
                mui.alert("二维码信息不足，请联系管理员!", "提示", "确定", function () {
                    window.location.href = '/MobileProblem/Home';
                    return
                }, 'div');
            }
            $("#ProblemTitile").mouseleave(function () {
                if (!$("#detail").val()) {
                    var va = $("#ProblemTitile").val();
                    $("#detail").val(va);
                }
            })
            Load();
            if (IsPlus) {
                FivePlusUploder = new FivePlus({ UplodUrl: "MobileAccount"});
            }
        }

        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: '/MobileAccount/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.ext == 'jpg' || file.ext == 'jpeg' || file.ext == 'png' || file.ext == 'bmp') {
                    $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(() =>{
                    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 {

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

            });
            if (!IsPlus) {
                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/*'
                }
            });
           
        }
    </script>

</body>
</html>