t1
/
ZLPMS


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
							
@{
    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"></script>

    <script src="~/Content/Scripts/vue.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.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;
        }
    </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>

    <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>
                    <ul id="fileList" class="mui-table-view mui-grid-view mui-grid-9" style="background-color:white;border-color:transparent;">
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

                            <img id="pick" src="/Content/Scripts/plugins/mui/css/tupian.png" style="width: 80px;margin-left: 8px;margin-top: 10px;">
                            <p>上传图片</p>
                        </li>
                    </ul>

                </div>

                <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>
        mui.init({
            swipeBack: true //启用右滑关闭功能
        });
        mui('.mui-scroll-wrapper').scroll();
        Load();
        ///提交产品问题
        function Submit() {
            var param = {
                detail: $("#detail").val(),
                ProblemTitile: $("#ProblemTitile").val(),
                ProjectID: "@ViewBag.ProjectID",
                ProductID: "@ViewBag.ProductID",
                ProductVersion: "@ViewBag.ProductVersion"
            };

            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) {
                    ProblemIDtoImg = data.msg;
                    $("#ctlBtn").click();
                } else {
                    mui.toast(data.msg, { duration: 'long', type: 'div' });
                }
            })
        }

        function Load() {
            var $list = $("#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/ImageUploadFTP',

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


                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                },
                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><p>' + file.name + '</p> </li>'
                        ),
                    $img = $li.find('img');


                // $list为容器jQuery实例
                $list.append($li);

                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // 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);
                mui.alert("问题提交成功，成功上传" + Count + "张图片", "提交成功", "确定", function () {
                    window.location.href = "/MobileProblem/Home";
                }, 'div');
            })
            $btn.on('click', function () {
                uploader.options.formData.ProblemID = ProblemIDtoImg;
                uploader.upload();

            });
            document.getElementById('pick').addEventListener('tap', function () {

                $(".webuploader-element-invisible").click();

            });
            $("#ProblemTitile").mouseleave(function () {
                var va = $("#ProblemTitile").val();
                $("#detail").val(va);

            })
            if ("@ViewBag.ProjectID" == "" || "@ViewBag.ProductID" == "" || "@ViewBag.ProductVersion" == "") {
                mui.alert("验证码信息不足，请联系管理员!", "提示", "确定", function () {
                    window.location.href = '/MobileProblem/Home';
                }, 'div');
            }
        }
    </script>

</body>
</html>