family.html 5.2 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/blood.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-labelauty.css">
<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery-labelauty.js"></script>
<script>
$(function(){
	$(':input').labelauty();
});
</script>
<style>
input.labelauty + label{
	width:2.3rem;
	height:0.5rem;
	font-size: 0.26rem;
	}
.dowebok1 input.labelauty + label{
	width:1.8rem;
	font-size: 0.24rem;
	}
.dowebok1{
	margin-top:0.1rem;
	}	
.dowebok1 li {
    width: 1.8rem !important;
	margin:0.05rem  0.05rem!important;
	}
	.sick_list{
		display: flex;
		flex-wrap: wrap;
        margin-bottom: 0.16rem;
	}
	.sick_list .selected{
		background-color:#D8B25F;
		color: #FFFFFF;
	}
	.sickness_item{
		display: block;
		width: 2rem;
		height: 0.6rem;
		background-color: #EEEEEE;
		margin-left: 0.1rem;
		margin-top: 0.16rem;
		text-align: center;
		line-height: 0.6rem;
		border-radius: 0.05rem;
	}
	.blbut{
		position: absolute;
		bottom: 0;
		margin-top: 0;
	}
</style>
<title>家族史</title>
</head>

<body>
<div style="background-color:#fff;">
<div class="perheader center">
	<div class="left perback"><a href="#" onClick="javascript:history.back(-1);"><img src="images/care_03.jpg"/></a></div>
    <div class="bloodtext">家族史</div>
</div>
</div>

<form action="#">
<div class="fabox">
	<div class="fapart1 center">
    	<div class="fainbox">
        	<div class="fali">
                <div class="fatitle">您的父母或者兄弟姐妹是否患有明确诊断的疾病 ?</div>
                <ul class="dowebok">
                    <li><input type="radio" name="radio" data-labelauty="是"></li>
                    <li><input type="radio" name="radio" data-labelauty="否"></li>
                </ul>
            </div>
            
            <div class="fali">    
                <div class="fatitle" id = "sick_choose"></div>
                <div class="sick_list">

                </div>
            </div>
            
            <div class="fali">
                <div class="fatitle">您的父亲是否在55岁、母亲在65岁之前患有上述疾病吗  ?</div>
                <ul class="dowebok">
                    <li><input type="radio" name="sub_choose" data-labelauty="是"></li>
                    <li><input type="radio" name="sub_choose" data-labelauty="否"></li>
                </ul>
            </div>
        </div>
 	</div>
</div>
    
</div>



<div ><button type="button" class="blbut"/>保存</div>
</form>
<script type="text/javascript" src="js/common.js"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
        $('.sick_list').on('click','.sickness_item',function () {
            if(!$(this).hasClass('selected')){
                $(this).addClass('selected')
            } else{
                $(this).removeClass('selected')
            }
            
        })
        //问题列表接口
        $.ajax({
            type:"POST",
            url:"http://192.168.1.3/api/user/index/typeInfo",
            dataType:"JSON",
            headers:{
                "XX-Device-Type":"1",
                "XX-Token":"1",
            },
            data:{
                type_id:"1",
            },
            success:function (res) {
                console.log(res)
                $('.sick_list').html('')
                var data = res.data
                console.log(data[0].question)
                $('#sick_choose').html(`${data[0].question.title}`)
                for ( var i = 0; i < data[0].answer.length; i++){
                    $('.sick_list').append(`<span class="sickness_item" data-aid="${data[0].answer[i].id}" data-qid="${data[0].answer[i].qid}">${data[0].answer[i].answer}</span>`)
                }
            },
            fail: function (err) {
                console.log('error')
            }
        })
        
	})
    // 问题提交
    $('.blbut').click(function () {
        answer_submit()
    })
    var qid;
    function answer_submit() {
        qid = $('.selected').attr('data-qid')
        var sele_arr = []
        $('.selected').each(function () {
            sele_arr.push($(this).data('aid'))
            sele_arr.push('|')
        })
        sele_arr.splice(sele_arr.length-1,1);
        sele_arr = sele_arr.join('')
        console.log(sele_arr)
        $.ajax({
            type:"POST",
            url:"http://192.168.1.3/api/user/index/typeInfo",
            dataType:"JSON",
            data:{
                "XX-Device-Type":"1",
                "XX-Token":"1",
                type_id:"1",
                qid:qid,
                aid:sele_arr
            },
            success:function (res) {
                console.log('成功')
            }
        })
    }
</script>
</body>