微信公众号前端模版
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

442 lines
19 KiB

<!-- 问题切换版 -->
<template>
<div class="question">
<div class="head">
<van-progress :percentage="questions.length === 0 ? 0 : ((index+1)/questions.length)*100"
:pivot-text="(index+1).toString()"
color="#72b937"
stroke-width="7px"
class="head-progress">
</van-progress>
<div class="head-progress-num">{{ questions.length }}</div>
</div>
<transition mode="out-in">
<div class="card"
v-show="show">
<!-- 题号 -->
<div class="card__head">
<div class="card__head-icon">Q{{ index+1 }}</div>
<div>
<div class="card__head-title">{{ curQuestion.question }}</div>
<div v-if="curQuestion.type === 'input'">
<input v-model="curQuestion.answer"
class="line-input"
max-length="18">
</div>
</div>
</div>
<van-radio-group v-model="curQuestion.answer"
checked-color="#72b937"
v-if="!curQuestion.type">
<van-radio v-if="curQuestion.a"
name="A">A.{{ curQuestion.a }}</van-radio>
<van-radio v-if="curQuestion.b"
name="B">B.{{ curQuestion.b }}</van-radio>
<van-radio v-if="curQuestion.c"
name="C">C.{{ curQuestion.c }}</van-radio>
<van-radio v-if="curQuestion.d"
name="D">D.{{ curQuestion.d }}</van-radio>
<van-radio v-if="curQuestion.e"
name="E">E.{{ curQuestion.e }}</van-radio>
<van-radio v-if="curQuestion.f"
name="F">F.{{ curQuestion.f }}</van-radio>
<van-radio v-if="curQuestion.g"
name="G">G.{{ curQuestion.g }}</van-radio>
</van-radio-group>
<div v-else-if="curQuestion.type === 'text'">
<textarea class="text"
v-model="curQuestion.answer"
rows="6"
maxlength="300"></textarea>
</div>
</div>
</transition>
<div class="footer">
<van-button type="warning"
v-if="index!== 0"
class="footer-btn-prev"
@click="prev">上一题</van-button>
<van-button type="primary"
@click="next"
class="footer-btn-next">{{ nextBtn }}</van-button>
</div>
</div>
</template>
<script>
export default {
name: 'question-list-change',
props: {
params: Object
},
data: function () {
return {
show: true,
index: 0,
curQuestion: {},
questions: [],
}
},
methods: {
submit: function () {
for (var i = 0; i < this.questions.length; i++) {
if (!this.questions[i].answer && this.questions[i].isRequired) {
vant.Toast.fail('请勾选或输入第' + (i + 1) + '的答案')
return
}
}
_that = this
this.show = false
setTimeout(function () {
_that.$emit('change-component', 'end')
_that.api_submit()
}, 200)
},
api_submit: function () {
vant.Toast.loading({ message: '提交中...', forbidClick: true, duration: 20000 })
var o = []
console.log("${openId}")
this.questions.forEach(function (item) {
o.push({ openId: "${openId}", questionId: item.id, answer: item.answer })
})
that = this
$.post('http://ynxbdkj.natapp1.cc/question/answer?command=add_answers', { answers: JSON.stringify(o) },
function (resp) {
console.log(resp)
if (resp.code === 200) {
var ids = JSON.parse(localStorage.getItem("ynxbd_questionnaire"))
if (!ids) ids = []
ids.push({ id: that.params.id })
localStorage.setItem('ynxbd_questionnaire', JSON.stringify(ids))
vant.Toast.success('提交成功')
} else {
vant.Toast.fail(resp.message)
}
}
)
},
api_getQuestion: function () {
_that = this
vant.Toast.loading({ message: '加载中...', forbidClick: true, duration: 0 })
$.get("http://ynxbdkj.natapp1.cc/question/question?command=query_by_qid&id=" + _that.params.id,
function (resp) {
console.log(resp)
if (resp.code === 200) {
resp.data.forEach(function (item) {
item.answer = ''
item.answers = []
if (item.a) item.answers.push({ text: 'A. ' + item.a, value: 'A' })
if (item.b) item.answers.push({ text: 'B. ' + item.b, value: 'B' })
if (item.c) item.answers.push({ text: 'C. ' + item.c, value: 'C' })
if (item.d) item.answers.push({ text: 'D. ' + item.d, value: 'D' })
if (item.e) item.answers.push({ text: 'E. ' + item.e, value: 'E' })
if (item.f) item.answers.push({ text: 'F. ' + item.f, value: 'F' })
if (item.g) item.answers.push({ text: 'G. ' + item.g, value: 'G' })
})
_that.questions = resp.data
vant.Toast.clear()
} else {
vant.Toast.fail(resp.message)
}
}
)
}
},
created: function () {
this.api_getQuestion()
}
}
</script>
<style scoped>
.question-list-change {
width: 100%;
}
body {
background-color: #6fb734;
}
#app {
align-items: center;
width: 100%;
max-width: 1000px;
}
.card {
width: 90%;
height: 300px;
}
.van-radio__icon {
font-size: 18px;
}
.van-radio {
margin-top: 22px;
margin-left: 10px;
}
.head {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
border: none;
}
.head-progress {
margin: 20px 0;
width: 88%;
}
.head-progress-num {
width: 10%;
text-align: center;
color: #8ac55a;
font-size: 16px;
}
.card__head {
display: flex;
}
.card__head-title {
margin-top: 8px;
}
.card__head-icon {
width: 36px;
height: 36px;
padding: 1px;
line-height: 36px;
font-weight: bold;
border-radius: 50%;
background-color: #72b937;
font-size: 15px;
text-align: center;
color: #ffffff;
margin-right: 10px;
flex-shrink: 0;
}
.footer {
position: absolute;
bottom: 60px;
width: 90vw;
display: flex;
justify-content: center;
}
.footer-btn-prev {
padding: 0 26px;
}
.footer-btn-save,
.footer-btn-next {
margin-left: 20px;
padding: 0 26px;
background-color: #72b937;
}
.end__box {
width: 100%;
height: 100%;
background-color: #72b937;
}
.end-title__box {
text-align: center;
background-color: #ffffff;
height: 80vw;
width: 100vw;
border-radius: 0 0 50% 50%;
position: absolute;
top: -40vw;
}
.end-title {
font-size: 24px;
color: #41583c;
font-weight: bold;
margin-top: 50vw;
}
.end-img {
width: 80%;
max-width: 500px;
position: absolute;
bottom: 10px;
right: 10px;
}
.text {
width: 100%;
margin-top: 22px;
border: 1px solid #72b937;
box-sizing: border-box;
font-size: 14px;
opacity: 0.88;
}
.line-input__box {
position: relative;
}
.line-input-label {
position: absolute;
left: 46px;
top: 18px;
z-index: 2;
}
.line-input {
outline: none;
border: none;
border-bottom: 1px solid #6fb734;
text-align: center;
display: inline-block;
font-size: 14px;
margin-top: 10px;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.back-img {
position: absolute;
left: 0;
bottom: 180px;
height: 70%;
opacity: 0.99;
}
.btn__box {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
margin-bottom: 10px;
}
.questionnaire {
position: relative;
height: 100%;
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
align-items: center;
}
.questionnaire-btn__box {
display: flex;
flex-direction: column;
height: 60vh;
overflow-x: hidden;
overflow-y: auto;
padding: 0 20px 20px 20px;
border-bottom: 1px dashed #ffffff;
}
.question-btn {
font-size: 16px;
color: #606266;
background-color: #fff;
border: 1px solid #ebedf0;
box-sizing: border-box;
position: relative;
display: inline-block;
text-align: center;
border-radius: 400px;
cursor: pointer;
margin-top: 20px;
padding: 6px 12px;
box-shadow: 8px 8px 12px 0 rgba(0, 0, 0, 0.3);
transition: all linear 0.6s;
flex-shrink: 0;
border-left: 1px solid #dcdfe6;
border-top: 1px solid #dcdfe6;
}
.question-btn:active {
background-color: #e5e5e5;
}
.title {
position: absolute;
top: 20px;
font-size: 22px;
font-weight: bold;
color: #606266;
text-align: center;
width: 100%;
left: 0;
}
/* 全部列出 */
.question-all__box {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.question-all__card {
flex-shrink: 1;
margin-bottom: 40px;
box-sizing: border-box;
padding: 10px 20px;
}
.question-item {
display: flex;
align-items: center;
position: relative;
}
.dropdown__box {
position: relative;
}
.dropdown-label {
position: absolute;
left: 46px;
top: 10px;
z-index: 2;
}
.van-dropdown-menu__item {
max-width: 360px;
}
.van-dropdown-item--down {
max-width: 1000px;
}
.question-back {
background-image: url(data:image/png;base64,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);
width: 100%;
height: 100vh;
position: fixed;
max-width: 1000px;
}
.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
border: none;
}
</style>