my_report.html 9.8 KB
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <script src="../../assets/js/fontsize.js"></script>
    <link rel="stylesheet" href="../../assets/css/weui.min.css">
    <link rel="stylesheet" href="../../assets/css/style.css">
    <link rel="stylesheet" href="../../assets/css/api.css"/>
    <link rel="stylesheet" href="../../assets/css/my_f.css"/>
    <link rel="stylesheet" href="../../assets/icon/iconfont.css">
    <link rel="stylesheet" href="../../assets/css/rolldate.css">
    <title></title>
    <style>
        .report_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.2rem;
            font-size: 16px;
            color: #424242;
            border-bottom: 1px solid #f4f4f4;
            margin: 0 0.35rem
        }

        .report_item_right {
            color: #a09f9f;
            font-size: 14px;
            display: flex;
            align-items: center;
        }

        .report_item_right .iconfont {
            margin-left: 0.15rem;
        }

        .text {
            justify-content: inherit;
            height: 1.55rem;
            align-items: inherit;
            color: #424242;
            border: 1px solid #f4f4f4;
            border-radius: 0.1rem;

        }

        .text_box {
            padding: 0.25rem 0;
            border-bottom: 5px solid #f4f4f4
        }

        .text .iconfont {
            margin-right: 0.2rem;
            color: #d5d5d3;
        }

        .text textarea {
            width: 100%;
            height: 100%;
            line-height: 0.4rem;
        }

        .text textarea::-webkit-input-placeholder {
            color: #d5d5d3;
        }

        .photo_box {
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 0.5rem 0.2rem;
        }

        .photo_item {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.16rem;
            border: 1px solid #ebebeb;
            width: 2rem;
            height: 2rem;
            overflow: hidden;
        }

        .photo_item .iconfont {
            font-size: 25px;
            color: #ccc;
        }

        .photo_item img {
            width: 100%;
        }

        #preview{
            width: 2rem;
            height: 2rem;

        }
        #imghead{
            width:2rem;
            height:2rem;
            border-radius:0.16rem;
        }
    </style>
</head>
<body>
<!--<div id="loadStart"></div>-->
<div id="app" v-cloak>
    <div class="report_item" >
        <span>{{date_type}}</span>
        <div class="report_item_right">
            <!--<span>{{broth_info?broth_info:default_bro}}</span>-->
            <input readonly type="text" id="date2" placeholder="" :value="broth_info" v-model="broth_info" style="text-align: right;color:#a09f9f">
            <span class="iconfont icon-xiangyou"></span>
        </div>
    </div>
    <div class="report_item" @click="choose_item">
        <span>{{type_name}}</span>
        <div class="report_item_right"><span>{{choose_type_name}}</span><span class="iconfont icon-xiangyou"></span>
        </div>
    </div>
    <div class="report_item" style="border-bottom: 5px solid #f4f4f4" @click="choose_home">
        <span>{{type_home}}</span>
        <div class="report_item_right"><span>{{choose_homes}}</span><span class="iconfont icon-xiangyou"></span>
        </div>
    </div>
    <div class="report_item">
        <span>具体描述</span>
    </div>
    <div class="text_box">
        <div class="report_item text">
            <span class="iconfont icon-tianxie"></span>
            <textarea placeholder="请您详细描述客观情况,以便更好为您提供分析解读服务。(最多支持输入200字)" maxlength="200" v-model="content"></textarea>
        </div>
    </div>
    <div class="report_item" @click="popupVisible=true">
        <span>上传照片或扫描报告</span>
    </div>
    <div class="photo_box">
        <!--<div class="photo_item" @click="popupVisible=true">-->
            <!--<img v-if='img_report' :src="img_report" alt="">-->
            <!--<span v-else class="iconfont icon-jiajianzujianjiahao"></span>-->
        <!--</div>-->

        <div class="addphoto">
            <!--../img/addimg.png-->
            <div id="preview">
                <img id="imghead" border="0" src="../../assets/image/tri.png" style="width:100%;height:100%" onclick="$('#previewImg').click();">
            </div>
            <!--<img src="../img/delet.png" alt="" style="position:absolute;bottom:92px;left:46px" class="deleteimg"/>-->
            <input type="file" onchange="previewImage(this)" style="display: none;" id="previewImg">
        </div>



        <div class="photo_item" @click="openQrc">
            <img v-if='img_sao_yi_sao' :src="img_sao_yi_sao" alt="">
            <span v-else class="iconfont icon-saoyisao"></span>
        </div>
    </div>
    <!--<mt-popup v-model="popupVisible" position="bottom">-->
        <!--<ul class="moreoul">-->
            <!--<li @click="choose_pic('camera')">拍照</li>-->
            <!--<li @click="choose_pic('album')">从相册中选择</li>-->
            <!--<li @click="popupVisible=false" style="border-top: 2px solid #f0f0f0">取消</li>-->
        <!--</ul>-->
    <!--</mt-popup>-->
    <div class="save_btn" @click="save_info">保存</div>
</div>
</body>
</html>
<script type="text/javascript" src="../../assets/js/api.js"></script>
<script type="text/javascript" src="../../assets/js/fastclick.js"></script>
<script>
    new FastClick(document.body);
</script>
<script type="text/javascript" src="../../assets/js/jquery-1.10.1.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script src="../../assets/js/rolldate.js"></script>

<script type="text/javascript" src="../../assets/js/vue.min.js"></script>
<script type="text/javascript" src="../../assets/js/index.js"></script>
<script type="text/javascript" src="../../assets/js/weui.min.js"></script>
<script type="text/javascript" src="../../assets/js/public.js"></script>
<script type="text/javascript" src="../../assets/js/axios.min.js"></script>
<script type="text/javascript" src="../../assets/icon/iconfont.js"></script>
<script type="text/javascript" src="../../assets/js/ache.js"></script>
<script>
    new rolldate.Date({
        el:'#date2',
        format:'YYYY-MM-DD',
        beginYear:2000,
        endYear:2100
    })
    
    function clacImgZoomParam(maxWidth, maxHeight, width, height) {
        var param = {
            top: 0,
            left: 0,
            width: width,
            height: height
        };
        if(width > maxWidth || height > maxHeight) {
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;

            if(rateWidth > rateHeight) {
                param.width = maxWidth;
                param.height = Math.round(height / rateWidth);
            } else {
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }
        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
    }

    function previewImage(file) {
        var url=baseurl + 'user/index/addReportPic';
        console.log(url)

        var MAXWIDTH =60;
        var MAXHEIGHT =77;
        var div = document.getElementById('preview');
        if(file.files && file.files[0]) {
            div.innerHTML = '<img id=imghead onclick=$("#previewImg").click()>';
            var img = document.getElementById('imghead');
            img.onload = function() {
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width = rect.width;
                img.height = rect.height;
                //                 img.style.marginLeft = rect.left+'px';
                // img.style.marginTop = rect.top + 'px';
            }
            var reader = new FileReader();
            reader.onload = function(evt) {
                img.src = evt.target.result;
            }
            reader.readAsDataURL(file.files[0]);
        } else //兼容IE
        {
            var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);
            div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"'></div>";
        }
        var formData = new FormData();
        var fileM = document.querySelector("#previewImg");
        var fileObj = fileM.files[0];
        formData.append("files", fileObj);
        formData.append("r_type",2)
        $.ajax({
            url:  baseurl + 'user/index/addReportPic',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function(res) {
                console.log(res);
                alert(res)

            },
            error: function() {

            }
        });
    }
</script>