版权声明： https://blog.csdn.net/caoyan0829/article/details/86084648
先看效果图。
部分HTML代码，核心代码
<template>
<div id="app">
<transition name="fade">
<section class="container" :style="'height:'+height+'rem'" :class="{'iphoneXTop':isIphoneX == 'isX'}">
<header class="full-header" :class="{'isIOSHT':isIOS === 'ios'}">
<img src="https://img.cdn.zhaoshang800.com/img/2018/08/20/broker/c6cb69d1-ce01-41d9-bcb1-903cccd5ff7a.png?x-oss-process=style/hd"
@click="back" class="back-btn" />
<h1>有奖问卷</h1>
</header>
<div class="canEiq" :class="{'iphoneX':isIphoneX == 'isX'}" v-if="isEiq=='right'">
<img class="top-img" src="https://img.cdn.zhaoshang800.com/img/2019/01/03/broker/9d1ebb4e-ab0c-48b4-a7a3-669ccca4826d.png?x-oss-process=style/hd" />
<ul>
<li v-for="(item, index) in list" :key="item.questionNum">
<p>{{item.questionNum}}.{{item.title}} <span v-show="item.questionNum==1 || item.questionNum==2 || item.questionNum==3 || item.questionNum==4 || item.questionNum==5">(可选三项)</span><span
v-if="item.questionNum==10">(选填)</span> </p>
<div class="item-box" :class="index == isRedBor ? 'item-box-red':''">
<label v-for="(subitem, subindex) in item.optionVOList" :key="subitem.optionNum">
<div class="item-ipt">
<input type="radio" v-if="item.optionType==0" :value="subitem.optionNum" v-model="item.selected"
:name="item.questionNum" @change="changeCheck($event,item.questionNum,item.selected,item.optionValue, subindex)" />
<input type="checkbox" v-else-if="item.optionType==1" :value="subitem.optionNum" v-model="item.selected"
:name="item.questionNum" @change="changeCheck($event,item.questionNum,item.selected,item.optionValue, subindex)" />
<div class="option" v-if="item.optionType==0 "></div>
<div class="option-checkbox" v-else-if="item.optionType==1"></div>
<span>{{subitem.optionTitle}}</span>
</div>
<input class="item-txt" :readonly="checkRead ? false : 'readonly'" v-if="subitem.isOther==1" type="text"
v-model="item.optionValue" @input="iptFun(item.questionNum,item.selected,item.optionValue, subindex)" />
</label>
<textarea maxlength="140" v-if="item.optionType==2" @input="textFun($event,item.questionNum)" placeholder="如客户想要什么、我们可以做什么，怎样给客户提供更好的一站式全流程服务，140字以内">
</textarea>
</div>
</li>
</ul>
<div class="bottom-list">
<button @click="submitData">提交</button>
</div>
<div class="cover" v-if="isBack || isSubmit" @click="closeCover"></div>
<div v-if="isBack" class="isBackBox">
<div class="isBackBox-inner">
<img src="https://img.cdn.zhaoshang800.com/img/2019/01/04/broker/1bee8308-794e-437d-87e4-868920acbab0.png?x-oss-process=style/hd" />
<p>答完有积分奖励哦，确认现在退出吗？</p>
<button @click="isBackFn">返回首页</button>
</div>
<div class="close" @click="closeCover">
<img src="https://img.cdn.zhaoshang800.com/img/2019/01/04/broker/4ea9fed7-f9a4-415c-82d7-5fad4f77be08.png?x-oss-process=style/hd" />
</div>
</div>
<div v-if="isSubmit" class="isSubmitBox">
<div class="isSubmitBox-inner">
<img src="https://img.cdn.zhaoshang800.com/img/2019/01/04/broker/f90d3759-3774-48fa-b141-b624bc8f1b02.png?x-oss-process=style/hd" />
<p>提交成功</p>
<div>100积分已入账</div>
<button @click="isBackFn">返回首页</button>
</div>
<div class="close" @click="closeCover">
<img src="https://img.cdn.zhaoshang800.com/img/2019/01/04/broker/4ea9fed7-f9a4-415c-82d7-5fad4f77be08.png?x-oss-process=style/hd" />
</div>
</div>
</div>
<div v-show="showToast" class="toast">
<span>{{toastText}}</span>
</div>
<div class="loadEiq notEiq" v-else-if="isEiq=='loading'">
<img src="https://img.cdn.zhaoshang800.com/img/2018/12/19/broker/97c0e7fe-acd1-43d8-a70a-cf3422682161.gif" />
<p>如果加载时间过长，请重新打开页面</p>
</div>
<div class="errorEiq notEiq" v-else-if="isEiq=='servererror'">
<p>出错啦，请稍后再试</p>
</div>
<div class="finishEiq notEiq" v-else>
<img src="https://img.cdn.zhaoshang800.com/img/2019/01/03/broker/ad8fc523-ca53-4261-a144-b8d9f2a484e0.png?x-oss-process=style/hd" />
<p>您已经参与过此次调查问卷了</p>
</div>
</section>
</transition>
</div>
</template>
<script>
import Global from './common/global';
export default {
data() {
return {
height: 'auto',
token: "",
checkRead: false,
checkNum:0,
isEiq: 'loading',
isBack: false,
isSubmit: false,
isRedBor: -1,
list: [],
subArr: [],
showToast: false,
toastText: '',
isIphoneX: Global.config.isIPhoneX(),
isIOS:Global.config.hb.hbenv,
}
},
computed: {
},
created() {
const _this = this;
if (Global.config.hb.hbenv === "ios" || Global.config.hb.hbenv === "android") {
setTimeout(function() {
document.addEventListener("deviceready", function() {
isLoaded();
});
}, 0)
} else {
_this.token = "";
_this.getQuestionList();
}
var isLoaded = function() {
if (Global.config.hb.req !== undefined) {
initHB();
} else {
setTimeout(function() {
isLoaded();
}, 10)
}
}
var initHB = function() {
Global.config.hb.req.send("getUserInfo", {}, function(data) {
if (data.token) {
_this.token = data.token;
_this.getQuestionList();
} else {
}
}, "getLocalData");
}
},
mounted() {
const _this = this;
_this.height = document.body.clientHeight / parseFloat(getComputedStyle(window.document.documentElement)['font-size'].split('px')[0]);
},
methods: {
changeCheck(e, name, id, value,i) {
const _this = this;
let checkChose = e.target.checked;
let cks = document.getElementsByName(name);
if (typeof id == 'number') {
id = [id]
}
for (var i = 0, len = cks.length; i < len; i++) {
if (id.length >= 3) {
_this.toast("最多选择3个");
if(!cks[i].checked){
cks[i].disabled = true;
}
}else{
cks[i].disabled = false;
}
}
//readonly
if (cks[cks.length - 1].checked) {
_this.checkRead = true;
}else{
_this.checkRead = false;
}
if (checkChose && (id.length<=3)) {
switch (name) {
case 0:
_this.deelFun(name, value, id);
break;
case 1:
_this.deelFun(name, value, id);
break;
case 2:
_this.deelFun(name, value, id);
break;
case 3:
_this.deelFun(name, value, id);
break;
case 4:
_this.deelFun(name, value, id);
break;
case 5:
_this.deelFun(name, value, id);
break;
case 6:
_this.deelFun(name, value, id);
break;
case 7:
_this.deelFun(name, value, id);
break;
case 8:
_this.deelFun(name, value, id);
break;
case 9:
_this.deelFun(name, value, id);
break;
case 10:
_this.deelFun(name, value, id);
break;
default:
_this.deelFun(name, value, id);
}
}else if(!checkChose){
_this.deelFun(name, value, id);
}
},
iptFun(name, id, value, idx) {
this.deelFun(name, value, id);
},
textFun(e, name) {
this.deelFun(name, e.target.value);
},
deelFun(name, value, id) {
if (name !== 10) {
this.subArr[name - 1] = {
"questionNum": name,
"optionNums": id,
"other": value || ""
}
} else {
this.subArr[name - 1] = {
"questionNum": name,
"other": value || ""
}
}
console.log(this.subArr)
},
getQuestionList() {
const _this = this;
return _this.$http.post('/eiq/question/list').then((res) => {
if (res.data.code == 200 && res.data.data) {
_this.isEiq = 'right';
let data = res.data.data;
_this.list = data || [];
_this.list.map((e, i) => {
e.selected = [];
e.optionVOList ? e.optionVOList.map((sube, subi) => {
if (sube.isOther == 1) {
sube.optionValue = '';
}
}) : null
})
return res.data.code;
} else if (res.data.code == 169) {
_this.isEiq = 'servererror';
return res.data.code;
}
})
},
submitData() {
const _this = this;
let params = {
'token': _this.token,
'questionSubmitDTOS': _this.subArr
}
console.log(_this.subArr)
var sum = 0;
_this.subArr.length > 0 ? _this.subArr.map((e, i) => {
sum += e.questionNum
}) : null;
for (let i = 0, len = 9; i < len; i++) {
if (!_this.subArr[i]) {
_this.isRedBor = i;
_this.toast("您还有题未答完");
break;
}
}
if (sum == 45 || sum == 55) {
return _this.$http.post('/eiq/question/submit', params).then((res) => {
_this.isRedBor = -1;
if (res.data.code == 200) {
_this.isSubmit = true;
}
})
}
},
back() {
this.isBack = true;
if (this.isEiq != 'right') {
Global.config.hb.req.send("backPage", {
needRefresh: 0
}, function(data) {
// console.log(data)
}, "nativeAction");
}
},
isBackFn() {
this.isBack = false;
this.isSubmit = false;
Global.config.hb.req.send("backPage", {
needRefresh: 0
}, function(data) {
// console.log(data)
}, "nativeAction");
},
closeCover() {
this.isBack = false;
this.isSubmit = false;
},
toast(text) {
const _this = this;
this.toastText = text;
this.showToast = true;
setTimeout(() => {
_this.showToast = false;
}, 1500);
},
}
}
</script>
<style lang="scss" scoped>
@function px2rem($px) {
$rem: 75px;
@return ($px/$rem)+rem;
}
.iphoneXTop{
padding-top: constant(safe-area-inset-top);
.container{
.full-header{
top: constant(safe-area-inset-top);
.isIOSHT{
padding-top: 0;
.back-btn{
top: 0;
}
}
}
}
}
.container {
height: 100%;
input{
-webkit-appearance: none;
}
.full-header {
background: #FFFFFF;
position: fixed;
top: 0;
height: 44px;
line-height: 44px;
text-align: center;
z-index: 5;
width: 100%;
border-bottom: 1px solid #DDDDDD ;
h1 {
margin-left: 15%;
width: 70%;
font-size: px2rem(32px);
font-weight: 700;
color: #000;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.back-btn {
width: px2rem(20px);
height: px2rem(36px);
position: absolute;
top: 0;
left: 0;
padding: px2rem(24px) px2rem(30px);
}
}
.isIOSHT{
padding-top: 20px;
.back-btn{
top: 20px;
}
}
.iphoneX {
padding-bottom: constant(safe-area-inset-bottom);
}
.canEiq {
padding-top: 44px;
.top-img {
width: 100%;
height: auto;
}
ul {
padding: px2rem(10px) px2rem(30px);
li p {
padding-top: px2rem(70px);
padding-bottom: px2rem(40px);
font-size: px2rem(32px);
color: #333333;
font-weight: bold;
}
li p:first-of-type {
padding-top: px2rem(40px);
}
li p span {
color: #999999;
}
.item-box {
border: 1px solid #D0D0D0;
border-radius: px2rem(8px);
label {
font-size: px2rem(30px);
display: block;
padding: px2rem(30px);
border-bottom: 1px solid #D0D0D0;
.item-ipt {
position: relative;
display: flex;
align-items: center;
input {
margin: 0;
width: px2rem(35px);
height: px2rem(35px);
}
input[type="radio"] {
display: inline-block ;
// margin-right: 15px ;
opacity: 0 ;
}
input[type="checkbox"] {
display: inline-block ;
// margin-right: 15px ;
opacity: 0 ;
}
input[type="radio"]:checked+div {
background: url('https://img.cdn.zhaoshang800.com/img/2019/01/08/broker/252a9a07-5b04-4614-b697-5bf7a541b039.png') no-repeat;
background-size: cover;
}
input[type="checkbox"]:checked+div {
background: url('https://img.cdn.zhaoshang800.com/img/2019/01/08/broker/1824804f-7c4a-4b83-9160-fe4d6b73e602.png') no-repeat;
background-size: cover;
}
.option{
width: px2rem(35px);
height: px2rem(35px);
position: absolute;
top: 0;
left: 0;
background-size: 100% 100%;
background-image: url('https://img.cdn.zhaoshang800.com/img/2019/01/09/broker/a756d874-8ddd-4f7d-b8eb-e81be40237c0.png');
}
.option-checkbox{
width: px2rem(35px);
height: px2rem(35px);
position: absolute;
top: 0;
left: 0;
background-size: 100% 100%;
background-image: url('https://img.cdn.zhaoshang800.com/img/2019/01/09/broker/86da0cf4-8ce5-44dc-8a0e-99333db1287d.png');
}
span {
display: inline-block;
height: px2rem(35px);
line-height: px2rem(35px);
padding-left: px2rem(20px);
}
}
.item-txt {
box-sizing: border-box;
width: 100%;
border-radius: px2rem(8px);
padding: px2rem(10px) px2rem(10px);
margin-top: px2rem(20px);
border: 1px solid #dddddd;
}
}
label:last-of-type {
border: none;
}
textarea {
box-sizing: border-box;
width: 100%;
font-size: px2rem(30px);
line-height: px2rem(40px);
height: px2rem(240px);
padding: px2rem(30px);
border: none;
resize: none;
}
textarea::-webkit-input-placeholder {
color: #CCCCCC;
}
textarea:-moz-placeholder {
color:#CCCCCC;
}
textarea::-moz-placeholder {
color:#CCCCCC;
}
textarea:-ms-input-placeholder {
color:#CCCCCC;
}
}
.item-box-red {
border: 1px solid #DD2534;
}
}
.bottom-list {
padding: px2rem(30px);
padding-bottom: px2rem(60px);
background: #fff;
width: 100%;
box-sizing: border-box;
button {
width: 100%;
background: #239BFC;
border-radius: px2rem(8px);
text-align: center;
font-size: px2rem(30px);
color: #FFFFFF;
padding: px2rem(24px) 0;
border: none;
}
}
}
.toast {
position: fixed;
z-index: 8;
top: 30%;
left: 30%;
width: 40%;
height: px2rem(90px);
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.5);
border-radius: px2rem(8px);
span {
color: #fff;
font-size: px2rem(30px);
}
}
.notEiq {
width: 100%;
height: calc(100vh - 44px);
background: #FAFAFA;
text-align: center;
padding-top: 40%;
box-sizing: border-box;
}
.notEiq p {
color: #999999;
font-size: px2rem(36px);
padding-top: px2rem(50px);
}
.loadEiq img {
width: 10%;
height: auto;
}
.finishEiq img {
width: 50%;
height: auto;
}
.cover {
width: 100%;
height: calc(100vh);
background: rgba(0, 0, 0, 0.50);
position: fixed;
z-index: 9;
top: 0;
}
.isSubmitBox,
.isBackBox {
z-index: 10;
width: px2rem(600px);
position: fixed;
top: 20%;
left: px2rem(75px);
}
.isBackBox-inner,
.isSubmitBox-inner {
height: px2rem(580px);
width: px2rem(600px);
background: #FFFFFF;
border-radius: px2rem(16px);
box-sizing: border-box;
padding: px2rem(40px);
text-align: center;
}
.isSubmitBox-inner img,
.isBackBox-inner img {
width: px2rem(300px);
height: auto;
margin-bottom: px2rem(30px);
}
.isSubmitBox-inner p,
.isBackBox-inner p {
padding: px2rem(5px) px2rem(30px);
line-height: px2rem(50px);
font-size: px2rem(36px);
color: #333333;
box-sizing: border-box;
}
.isSubmitBox-inner div,
.isBackBox-inner div {
box-sizing: border-box;
padding: px2rem(10px) px2rem(10px);
line-height: px2rem(40px);
font-size: px2rem(28px);
color: #999999;
}
.isSubmitBox-inner button,
.isBackBox-inner button {
margin-top: px2rem(40px);
box-sizing: border-box;
padding: px2rem(5px) px2rem(10px);
line-height: px2rem(40px);
font-size: px2rem(26px);
color: #F4F5FC;
width: px2rem(295px);
height: px2rem(70px);
background: #239BFC;
border-radius: px2rem(100px);
border: none;
}
.isSubmitBox .close,
.isBackBox .close {
margin-top: px2rem(60px);
width: px2rem(600px);
text-align: center;
img {
width: px2rem(70px);
height: px2rem(70px);
}
}
}
</style>