<html data-dpr="1" style="font-size: 37.52px;">
<head>
<title>问卷调查</title>
<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 data-hid="description" name="description" content="">
<meta name="wap-font-scale" content="no">
<link rel="icon" href="./img/lw.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="css/question.css" />
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script>
</head>
<style>
[v-clock]{
display: none;
}
</style>
<body style="font-size: 24px;">
<div id="app">
<div class="main_html" v-cloak>
<div class="main-content" style="background:#fff;margin-top:0px;">
<div class="header-content">
<div class="heder-wraps">
<div class="back-wrap">
<!-- <img src="https://pic.baikemy.com/obj/project-l-cdn/mobileweb/static/images/head-back.png"
alt="" class="back-icon"> -->
</div>
<div class="title-wrap">{{title}}</div>
<div class="right-wrap">
<!-- <img src="https://pic.baikemy.com/obj/project-l-cdn/mobileweb/static/images/head-search.png"
alt="" class="search-icon" >
<img src="https://pic.baikemy.com/obj/project-l-cdn/mobileweb/static/images/head-menu.png"
alt="" class="menu-icon"> -->
</div>
</div>
<div class="content">
<div class="self_test_warp">
<div class="self_test_title">{{title}}</div>
<div class="back_schedule_wrap">
<div class="self_test_back_wrap "><img id="backImg" src="https://pic.baikemy.com/obj/project-l-cdn/mobileweb/static/images/self_test_back.png"
alt="" :class="[Qindex>0?'':'display_none']"> <span id="backTxt" :class="[Qindex>0?'':'display_none']"
@click="getBack">上一题</span></div>
<div class="schedule_txt_wrap">{{Qindex+1}}/{{quesList.length}}</div>
</div>
<div class="schedule_wrap">
<div class="cur_schedule" :style="{'width':(Qindex+1+'0'+'%')}"></div>
</div>
<div class="self_test_question"><span class="question_index">问题{{Qindex+1}}</span><span
id="curQuestionTitle">{{quesList[Qindex].title}}</span></div>
<ul class="self_test_main_wrap">
<li score="0" class="self_test_item self_test_normal" v-for="(item,index) in quesList[Qindex].answerList"
@click="getRadio(index,index)" :class="[item.active?'self_test_select':'']">
<div class="self_test_icon choose_normal" :class="[item.active?'choose_select':'']"></div>
<div class="self_test_option" :style="{'color':(item.active?'#5D91F6':'#333'),'border':(item.active?'1rpx solid #5D91F6':'1rpx solid #999')}">
{{item.name}}
</div>
</li>
</ul>
</div>
</div>
<div id="submitQuestion" @click="getSubmit" class="sub_btn fixed" :class="[Qindex==9?'':'display_none']">
提交
</div>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
Qindex: 0,
title: "糖尿病自测",
quesList: [{
title: "您的年龄是多少?",
answerList: [{
name: "<40岁"
}, {
name: "40-59岁"
}, {
name: "≥60岁"
}, ]
},
{
title: "您的饮食结构是否主食多、绿色蔬菜少？",
answerList: [{
name: "否"
}, {
name: "是"
}]
},
{
title: "您是否经常（每周≥4次）食用含糖量高或高脂肪的食物？",
answerList: [{
name: "否"
}, {
name: "是，仅少量品尝"
}, {
name: "是，经常食用"
}]
}, {
title: "您是否经常运动（每周有5天保证有30分钟以上的活动 ，如快走等）？",
answerList: [{
name: "否"
}, {
name: "是"
}]
}, {
title: "您的体重指数是多少？[BMI=体重/身长的平方（体重以千克为单位，身长以米为单位）] ",
answerList: [{
name: "<25"
}, {
name: "25.0～29.9"
}, {
name: "≥60"
}]
}, {
title: "您的父母或兄弟姐妹中是否有人患有糖尿病？",
answerList: [{
name: "否"
}, {
name: "是"
}]
}, {
title: "您是否有夜间睡眠打鼾及呼吸暂停的现象？",
answerList: [{
name: "否"
}, {
name: "偶尔打鼾（每周≤2晚）不伴呼吸暂停"
}, {
name: "经常打鼾（每周≥3晚）并有呼吸暂停"
}]
}, {
title: "您是否有如下症状：多饮、多尿、易饥，是否有餐前低血糖症状 ？",
answerList: [{
name: "否"
}, {
name: "有其中1项"
}, {
name: "有其中2项"
}, {
name: "3项均有"
}]
}, {
title: "您是否血压高或血脂高？",
answerList: [{
name: "否"
}, {
name: " 其中一项高"
}, {
name: "两项均高"
}]
}, {
title: "您以往体检发现空腹血糖高（>6.1mmol/L）或餐后2小时血糖高（>7.8mmol/L）？",
answerList: [{
name: "否"
}, {
name: "曾发现1次"
}, {
name: "曾发现2次或以上"
}]
}
]
},
mounted() {
},
methods: {
/**
* 返回上一题
*@param {Qindex}当前题目
* **/
getBack() {
var that = this;
if (that.Qindex > 0) {
that.Qindex = that.Qindex - 1;
}
},
/**
* 选中列表
* @param {index} 当前选中选项
*/
getRadio(item, index) {
var that = this;
// 获取到选择答案数据
var list = that.quesList[that.Qindex].answerList;
//循环数组数据，判断是否选中
for (var i in list) {
if (index == i) {
list[i].active = true;
// 这里更新进度条
if (that.Qindex < 9) {
that.Qindex = that.Qindex + 1;
}
} else {
list[i].active = false;
}
}
// 避免页面渲染无效
that.$forceUpdate();
},
/**提交数据**/
getSubmit(){
// 获取最终用户选中的数据
var that=this;
// that.quesList此数据是问题跟选项数组数据,选项中参数active为true，标识用户选中的数据
console.log("用户最终选中的数据====>",that.quesList);
// 跳转问卷结果页面
window.location.href="result.html"
}
}
})
</script>
</body>
</html>
扫一扫
694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
