Ver código fonte

厦门i健康患者端代码拷贝

raolu 7 anos atrás
pai
commit
36791a16fa

+ 58 - 0
html/survey/css/question.css

@ -0,0 +1,58 @@
.progress-bar{position: relative;height: 30px; line-height: 30px; z-index: 1; }
.progress{position: absolute; height: 30px; top:0; left:0; background-color: #47a8ef; z-index: -1;}
.input-group .form-textarea:nth-child(2){
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    border-left: 1px solid #e1e1e1;
    padding-left: 10px;
}
.input-group .form-textarea{margin-top:10px;}
.c-btn-blue{
    background-color: #47abef;
    width: 100%;
    border-radius: 5px;
    height: 40px;
}
.c-border-radius{border-radius: 5px;}
input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    cursor: pointer;
    position: relative;
}
.icon-checkbox[type=radio]:before{
    content: '';
    background-image:url(../images/dianxuan_btn.png);
    background-size: 20px 20px;
    position: absolute;
    top:-3px;
    left:-3px;
    height: 20px;
    width: 20px;
    -webkit-font-smoothing: antialiased;
}
.icon-checkbox[type=radio]:checked:before {
    content: '';
    background-image:url(../images/dianxuan_pre.png);
}
.icon-checkbox[type=checkbox]:before{
    content: '';
    background-image:url(../images/gouxuan_btn.png);
    background-size: 20px 20px;
    position: absolute;
    top:-3px;
    left:-3px;
    height: 20px;
    width: 20px;
    -webkit-font-smoothing: antialiased;
}
.icon-checkbox[type=checkbox]:checked:before {
    content: '';
    background-image:url(../images/gouxuan_btn_pre.png);
}
input[type=text]{
    width: calc(100% - 30px);
    height: 30px;
    line-height: 30px;
}

+ 94 - 0
html/survey/html/question.html

@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>填写问卷</title>
        <meta name="format-detection" content="telephone=no"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
        <link rel="stylesheet" href="../../../css/cross.css" type="text/css"/>
        <link rel="stylesheet" href="../../../css/cross.ui.css" type="text/css"/>
        <link rel="stylesheet" type="text/css" href="../../../iconfont/iconfont.css" />
        <link rel="stylesheet" type="text/css" href="../../../widget/artDialog/6.0.5/css/ui-dialog.min.css">
        <link rel="stylesheet" type="text/css" href="../css/question.css"/>
    </head>
    <body style="background: #f3f3f3;">
        <div class="progress-bar c-t-center c-333 c-border-b bgc-fff">
            <span style="z-index: 2;" class="percent c-f14">0%</span>
            <div class="progress"></div>
        </div>
        
        <div class="mt10 plr10" id="info">
            
        </div>
        
        <div class="group1 c-row plr10 mt50 mb30">
            <div class="c-100 c-t-center">
                <a class="c-btn c-btn-blue next_btn">下一题</a>
            </div>
        </div>
        <div class="group2 c-row plr10 mt50 mb30 c-hide">
            <div class="c-50 c-t-center">
                <a class="c-btn c-btn-blue pre_btn">上一题</a>
            </div>
            <div class="c-50 c-t-center">
                <a class="c-btn c-btn-blue next_btn">下一题</a>
            </div>
        </div>
        <div class="group3 c-row plr10 mt50 mb30 c-hide">
            <div class="c-50 c-t-center">
                <a class="c-btn c-btn-blue pre_btn">上一题</a>
            </div>
            <div class="c-50 c-t-center">
                <a class="c-btn c-btn-blue submit_btn">提交问卷</a>
            </div>
        </div>
        <div class="group4 c-row plr10 mt50 mb30 c-hide">
            <div class="c-100 c-t-center">
                <a class="c-btn c-btn-blue submit_btn">提交问卷</a>
            </div>
        </div>
        <script type="text/html" id="info_tmp">
            {{if data.type == 2}}
            <div class="input-group width-100">
                <h2 class="c-f16 c-333">
                    {{data.sort}}、{{data.qstTitle}} 
                    {{if data.comment}}<span style="color:red;">{{data.comment}}</span>{{/if}}
                    {{if data.isRequired=="1"}}<span class="required ml20"></span>{{/if}}
                </h2>
                <textarea class="form-textarea width-100" rows="5" placeholder="">{{data.answer}}</textarea>
            </div>
            {{else}}
            <h2 class="c-f16 c-333">
                {{data.sort}}、{{data.qstTitle}}
                {{if data.comment}}<span style="color:red;">{{data.comment}}</span>{{/if}}
                {{if data.isRequired=="1"}}
                <span class="required ml20"></span>
                {{/if}}
            </h2>
            <ul class="bgc-fff c-border c-border-radius">
                {{each data.options as op}}
                <li class="plr10 ptb10" data-json="{{op.jsonStr}}">
                    <input type="{{data.type | setType}}" class="icon-checkbox" name="option" {{op.checked}}>
                    <span class="c-f14 c-333 ml10">{{op.content}}</span>
                    {{if op.havaComment == 1}}
                    <div>
                        <input type="text" placeholder="{{if op.isRequired}}(必填){{/if}}请输入" value="{{op.comment}}" class="c-f14 c-border-b ml30">
                    </div>
                    {{/if}} 
                </li>
                {{/each}}
            </ul>
            {{/if}}
        </script>
    </body>
    <script src="../../../js/jquery/2.1.3/jquery.js"></script> 
    <script type="text/javascript" src="../../../js/weixin_common.js" ></script>
    <script type="text/javascript" src="../../../js/common_http.js" ></script>
    <script type="text/javascript" src="../../../js/app.js" ></script>
    <script type="text/javascript"  src="../../../widget/artDialog/6.0.5/js/dialog-plus.min.js"></script>
    <script src="../../../js/template.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="../js/question.js" type="text/javascript" charset="utf-8"></script>
</html>

+ 194 - 0
html/survey/html/survey_info.html

@ -0,0 +1,194 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>问卷调查详情</title>
        <meta name="format-detection" content="telephone=no"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
        <link rel="stylesheet" href="../../../css/cross.css" type="text/css"/>
        <link rel="stylesheet" href="../../../css/cross.ui.css" type="text/css"/>
        <link rel="stylesheet" type="text/css" href="../../../iconfont/iconfont.css" />
        <link rel="stylesheet" type="text/css" href="../../../widget/artDialog/6.0.5/css/ui-dialog.min.css">
        <style type="text/css">
            .bgc-74bf00{background-color: #74bf00;}
            .footer{position: fixed; width: calc(100% - 20px); bottom: 10px; left:0;}
        </style>
    </head>
    <body>
        <h1 class="c-f16 c-333 c-t-center mt15 s_title"></h1>
        <p class="plr10 ptb10 c-f14 s_comment"></p>
        <div class="plr10 footer"><a class="c-btn c-100 c-btn-radius c-f16 bgc-74bf00">开始填写</a></div>
    </body>
    <script src="../../../js/jquery/2.1.3/jquery.js"></script> 
    <script type="text/javascript" src="../../../js/weixin_common.js" ></script>
    <script type="text/javascript" src="../../../js/common_http.js" ></script>
    <script type="text/javascript" src="../../../js/app.js" ></script>
    <script type="text/javascript"  src="../../../widget/artDialog/6.0.5/js/dialog-plus.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script type="text/javascript">
        var d = dialog({contentType:'load', skin:'bk-popup'});
        var Request = new Object();
        Request = GetRequest(); 
        var dataId = Request["survey_id"];
        var userAgent = window.localStorage.getItem(agentName);
        var toUser = Request["toUser"];
        var toName = decodeURIComponent(Request["toName"]);
        var openid = Request["openid"];
        var represented = Request["represented"];
        $(function(){
            localStorage.setItem("survey_id",dataId);
            if(!userAgent) {
                localStorage.setItem("toUser",toUser);
                window.location.href = server + "wx/html/home/html/zhmm-login.html?openid=" + openid+"&type=30";
                return false;
            }else{
                queryInit();
            }
        });
        function queryInit(){
        	var newUaObj = JSON.parse(userAgent);
			//判断关系
			function hasFamilyRelation(a,b){
				return new Promise(function(resolve, reject) {
					var data={
						patient:a,
						familyMember:b
					}
					sendPost("patient/family/is_authorize", data, "json", "get", function(res){
						dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'请求家庭成员关系失败'}).show(); 
					}, function(res){
						if(res.status == 200) {
							window.localStorage.setItem('nowPatientName',res.data.name);
							resolve(res)
						}else if(res.status == 100) {
							dialog({
								content:'对不起,'+res.data.name+'未授权给您,如需查看,请切换'+res.data.name+'账号登录',
								okValue:'切换账号',
								ok: function() {
									window.localStorage.setItem(pageName, JSON.stringify({pageurl: location.href}))
									window.location.href = "../../grzx/html/change-login.html?type=0&openid="+ Request["openid"];
								},
								cancelValue: '我不看了',
								cancel: function () {
									wx.closeWindow();
					            }
							}).showModal();
						}else{
							relogin();
						}
						
					})
				})
			}
			//重新登录操作
			function relogin(){
				dialog({
					content:'对不起,该消息是发给'+toName+',如需查看,请切换'+toName+'账号登录',
					okValue:'切换账号',
					ok: function() {
						window.localStorage.setItem(pageName, JSON.stringify({pageurl: location.href}))
						window.location.href = "../../grzx/html/change-login.html?type=0&openid="+ Request["openid"];
					},
					cancelValue: '我不看了',
					cancel: function () {
						wx.closeWindow();
		            }
				}).showModal();
			}
			//保存信息
			function saveUserInfo(a,b){
				Promise.all([hasFamilyRelation(a,b)]).then(function () {
					newUaObj.represented = represented;
					window.localStorage.setItem(agentName,JSON.stringify(newUaObj));
					userAgent = window.localStorage.getItem(agentName);
					getSummary();
                    bindEvents();
				})
			}
			
			function initFamilyData () {
				//从微信模板消息进入
				if(represented && userAgent && toUser){
					if(toUser == represented){
						saveUserInfo(represented,newUaObj.uid)
					}else if(toUser != represented && represented == newUaObj.uid){
						//本人代理
						saveUserInfo(represented,newUaObj.uid)
					}else if(toUser != represented && toUser == newUaObj.uid){
						//需要判定关系 200有授权 100家人 1无关系	
						saveUserInfo(represented,newUaObj.uid)
					}else{
						//重新登录	
						relogin();
					}
				}else{
					getSummary();
                    bindEvents();
				}
			}
			initFamilyData();
        }
        function getSummary(){
            d.show();
//          var dataId = localStorage.getItem("survey_id");
            var url = "/patient/questionnaire/getSurveySummary",
                params = {id: dataId};
            sendPost(url,params,"JSON","GET",function(res){
                //failed
                d.close();
                if(res.msg){
                    dialog({contentType:'tipsbox', skin:'bk-popup' , content:res.msg,bottom:true}).show(); 
                }else{
                    dialog({contentType:'tipsbox', skin:'bk-popup' , content:'数据加载失败!',bottom:true}).show(); 
                }
            },function(res){
                //success
                d.close();
                if(res.status==200){
                    var data = res.data;
                    $("h1").text(data.title);
                    $("p").text(data.comment);
                    if(res.data.status == 2){ //问卷状态 1正常 2暂停
                        dialog({
                            content:'对不起,该问卷已暂停作答',//'对不起,您已更换账号,需重新登录<span style="color:#333">'+handerAccount+'</span>账号后,方可处理该邀请。',
                            okValue:'我知道了',
                            ok: function() {
                                $(".footer").hide();
                            }
                        }).showModal();
                    }
                    //如果用户已经填写了问卷,也不显示开始按钮
                    if(res.data.complete == 1){//complete 0未答 1已答
                        $(".footer").hide();
                    }
                }else{
                    if(res.status==-2){
                        dialog({
                            content:'对不起,该消息不是您的消息,您无法查看哦~',//'对不起,您已更换账号,需重新登录<span style="color:#333">'+handerAccount+'</span>账号后,方可处理该邀请。',
                            okValue:'我知道了',
                            ok: function() {
                                wx.closeWindow();
                            }
                        }).showModal();
                    }else{
                        if(res.msg){
                            dialog({contentType:'tipsbox', skin:'bk-popup' , content:res.msg,bottom:true}).show(); 
                        }else{
                            dialog({contentType:'tipsbox', skin:'bk-popup' , content:'数据加载失败!',bottom:true}).show(); 
                        }
                    }
                }
            });
        }
        
        function bindEvents(){
            $(".c-btn").on('click', function(){
//              var dataId = localStorage.getItem("survey_id");
                window.location.href = "question.html?survey_id="+dataId;
            });
        }
    </script>
</html>

BIN
html/survey/images/dianxuan_btn.png


BIN
html/survey/images/dianxuan_pre.png


BIN
html/survey/images/gouxuan_btn.png


BIN
html/survey/images/gouxuan_btn_pre.png


+ 288 - 0
html/survey/js/question.js

@ -0,0 +1,288 @@
var d = dialog({contentType:'load', skin:'bk-popup'});
var survey_id,
    q_info,
    indexArr = [],
    answerInfo = [],
    allAnswer = {},
    pre_info;
$(function(){
    survey_id = localStorage.getItem("survey_id");
    getQuestionInfo(1);
    bindEvents();
});
function getQuestionInfo(sort){
    d.show();
    var url = "/patient/questionnaire/getQuestions",
        params = {
            id: survey_id,
            sort: sort
        };
    sendPost(url, params, 'JSON', 'GET', errorHandler, successHandler);
}
function errorHandler(res){
    d.close();
    if(res.msg){
        dialog({contentType:'tipsbox', skin:'bk-popup' , content:res.msg,bottom:true}).show(); 
    }else{
        dialog({contentType:'tipsbox', skin:'bk-popup' , content:'数据加载失败!',bottom:true}).show(); 
    }
}
function successHandler(res){
    if(res.status == 200){
        d.close();
        var data = res.data;
        q_info = res.data;
        //计算进度比例 = 已完成题/(未完成题+已完成题)
        var noAns = parseInt(data.totalNum) - parseInt(data.sort)+1,
            ans = answerInfo.length,
            percent = parseInt((ans/(ans + noAns)).toFixed(2)*100);
        indexArr.push(data.sort);
        if(data.sort == 1){
            //如果只有一题的话,直接显示提交按钮
            if(data.totalNum == 1){
                $(".group1").hide();
                $(".group2").hide();
                $(".group3").hide();
                $(".group4").show();
            }else{
                $(".group1").show();
                $(".group2").hide();
                $(".group3").hide();
                $(".group4").hide();
            }
        }
        else if(data.sort > 1 && data.sort!=data.totalNum){
            $(".group1").hide();
            $(".group2").show();
            $(".group3").hide();
            $(".group4").hide();
        }else{
            $(".group1").hide();
            $(".group2").hide();
            $(".group3").show();
            $(".group4").hide();
        }
        
        $(".percent").text(percent+"%");
        $(".progress").css("width", percent+"%");
        if(data.type !=2){
            for(i=0; i<data.options.length; i++){
                var op = data.options[i];
                if(pre_info){
                    if(pre_info.options){
                        for(j=0; j<pre_info.options.length; j++){
                            var p_op = pre_info.options[j];
                            if(op.code == p_op.optionCode){
                                data.options[i].checked = "checked";
                                data.options[i].comment = p_op.comment;
                            }
                        }
                    }
                }else{
                    if(allAnswer[q_info.sort]){
                        var info = allAnswer[q_info.sort];
                        if(info.options){
                            for(j=0; j<info.options.length; j++){
                                var p_op = info.options[j];
                                if(op.code == p_op.optionCode){
                                    data.options[i].checked = "checked";
                                    data.options[i].comment = p_op.comment;
                                }
                            }
                        }
                    }
                }
                
                data.options[i].jsonStr = JSON.stringify(data.options[i]);
            }
        }else{
            if(pre_info){
                data.answer = pre_info.content;
            }else{
                if(allAnswer[q_info.sort]){
                    data.answer = allAnswer[q_info.sort].content;
                }
            }
        }
        var html = template("info_tmp", {data: data, pre_info: pre_info});
        $("#info").empty().append(html);
    }else{
        errorHandler(res);
    }
}
template.helper("setType", function(str){
    if(str == "0"){
        return "radio";
    }
    if(str == "1"){
        return "checkbox";
    }
    return "text";
});
function validate(){
    //查看选中选项
    var $checked = $(".icon-checkbox:checked"),
        len = $checked.length,
        text = $(".form-textarea").val();
    var obj = {},
        nextCode = "";
        
    if(q_info.nextQuestion >= 0){
        nextCode = q_info.nextQuestion;
    }
    //必填情况判断
    if(q_info.isRequired){
        if(q_info.type !=2){
            if(len == 0){
                dialog({
                    contentType:'tipsbox', 
                    skin:'bk-popup' , 
                    content:'此题为必答题,请按要求作答'
                }).show();
                return false;
            }
        }else{
            if($.trim(text).length == 0){
                dialog({
                    contentType:'tipsbox', 
                    skin:'bk-popup' , 
                    content:'此题为必答题,请按要求作答'
                }).show();
                return false;
            }
        }
    }
    if(len > 0){
        if(q_info.type == "1"){
            //多选题
            if(q_info.minNum && len < q_info.minNum){
                dialog({
                    contentType:'tipsbox', 
                    skin:'bk-popup' , 
                    content:'此题要求最少选择'+q_info.minNum+"项,请按要求作答"
                }).show();
                return false;
            }else if(q_info.maxNum && len > q_info.maxNum){
                dialog({
                    contentType:'tipsbox', 
                    skin:'bk-popup' , 
                    content:'此题要求最多选择'+q_info.maxNum+"项,请按要求作答"
                }).show();
                return false;
            }
        }
        obj.qstCode = q_info.qstCode;
        obj.sort = q_info.sort;
        obj.type = q_info.type;
        obj.options = [];
        for(i=0; i<len; i++){
            var $item = $($checked[i]),
                $li = $item.parent(),
                jsonData = $li.attr("data-json");
            jsonData = JSON.parse(jsonData);
            var op = {};
            op.optionCode = jsonData.code;
            op.sort = jsonData.sort;
            if(jsonData.havaComment == 1){
                var $text = $li.find("input[type=text]");
                if(jsonData.isRequired && ($.trim($text.val()).length == 0)){
                    dialog({
                        contentType:'tipsbox', 
                        skin:'bk-popup' , 
                        content:'请按要求作答'
                    }).show();
                    return false;
                }else{
                    op.comment = $.trim($text.val());
                }
            }
            obj.options.push(op);
            if(jsonData.nextQuestion >= 0){
                nextCode = jsonData.nextQuestion
            }
        }
    }else{
        //文本框内容
        nextCode = q_info.nextCode || (q_info.sort+1);
        obj.qstCode = q_info.qstCode;
        obj.sort = q_info.sort;
        obj.type = q_info.type;
        obj.content = $.trim(text);
    }
    //将答题信息保存到storage中
    answerInfo.push(obj);
    allAnswer[q_info.sort] = obj;
    pre_info = undefined;
    //发送请求获取下一题的内容
    if(isNaN(parseInt(nextCode))){
        nextCode = q_info.sort+1
    }
    return nextCode;
    //hard code 下一题的值
//  return (q_info.sort +1);
}
function bindEvents(){
    $(".next_btn").on("click", function(){
        var nextCode = validate();
        if(nextCode){
            getQuestionInfo(nextCode);
        }
        if(parseInt(nextCode) == 0){
            submitAnswer();
        }
    });
    
    $(".pre_btn").on("click", function(){
        //获取上一题的内容
        pre_info = answerInfo[answerInfo.length-1]; 
        answerInfo.pop();
        getQuestionInfo(pre_info.sort);
    });
    
    $(".submit_btn").on("click", function(){
        var result = validate();
        if(result){
            submitAnswer();
        }
    });
}
function submitAnswer(){
    dialog({
        content: "是否确认提交问卷?",
        okValue: "立即提交",
        ok: function(){
            d.show();
            var url = "/patient/questionnaire/saveAnswer",
                params = {
                    surveyCode: survey_id,
                    questions: answerInfo
                };
            sendPost(url, {jsonData: JSON.stringify(params)}, 'JSON', 'POST', function(res){
                d.close();
                if(res.msg){
                    dialog({contentType:'tipsbox', skin:'bk-popup' , content:res.msg,bottom:true}).show(); 
                }else{
                    dialog({contentType:'tipsbox', skin:'bk-popup' , content:'数据提交失败!',bottom:true}).show(); 
                }
            }, function(res){
                if(res.status == 200){
                    dialog({contentType:'tipsbox', skin:'bk-popup' , content: "已提交成功,感谢您的参与",bottom:true}).show();
                    wx.closeWindow();
                }else{
                    dialog({contentType:'tipsbox', skin:'bk-popup' , content:res.msg,bottom:true}).show(); 
                }
            });
        },
        cancelValue: "我再看看",
        cancel: function(){
            answerInfo.pop();
        }
    }).showModal();
}