338 lines
7.7 KiB
Vue
338 lines
7.7 KiB
Vue
|
<template>
|
||
|
|
<view class="background" :style="backgroundStyle">
|
||
|
|
<view class="paper">
|
||
|
|
<view v-if="curQuIndex < questions.length ">
|
||
|
|
<view class="question">
|
||
|
|
<text class="question-label">问题{{curQuIndex+1}}</text>
|
||
|
|
<view class="question-panel">
|
||
|
|
<text class="question-content">{{questions[curQuIndex].question}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="questions[curQuIndex].answers.length > 0">
|
||
|
|
<view class="select-list">
|
||
|
|
<view size="12" activeColor="#00A8EA" labelSize="24rpx"
|
||
|
|
v-for="(aitem,aindex) in questions[curQuIndex].answers" :key="aitem.answer" :name="aitem.answer"
|
||
|
|
@click="selectChange(aitem.answer)" :class="(curQuIndex < form.length && aitem.answer== form[curQuIndex].value)?'select-item-active':'select-item'"
|
||
|
|
>
|
||
|
|
<view class="item-answer">{{aitem.answer}}</view>
|
||
|
|
<view class="item-content">{{aitem.item}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<u-toast ref="uToast"></u-toast>
|
||
|
|
<view class="bottom">
|
||
|
|
<!-- <u-button class="button" type="primary" shape="circle" color="#00A8EA" text="提交问券" @click="submit"></u-button> -->
|
||
|
|
<view v-if="curQuIndex<questions.length-1" @click="nextQuestion" class="button">
|
||
|
|
<view>下一题</view>
|
||
|
|
</view>
|
||
|
|
<view v-else @click="submit" class="button">
|
||
|
|
<view>提交</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import form from '@/uni_modules/uview-ui/libs/config/props/form'
|
||
|
|
import api from '@/api/api.js'
|
||
|
|
import {store} from '@/store/coupon.js'
|
||
|
|
import {acstore} from '@/store/activities.js'
|
||
|
|
import {
|
||
|
|
authState,
|
||
|
|
checkPage
|
||
|
|
} from '@/util/auth'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
form: [],
|
||
|
|
curQuIndex:0,
|
||
|
|
rules: {},
|
||
|
|
img: require('@/static/images/couponback.png'),
|
||
|
|
backgroundStyle: {},
|
||
|
|
questions: [],
|
||
|
|
activityId:undefined
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getQuestionList(){
|
||
|
|
api.getquestionlist(this.activityId).then((res)=>{
|
||
|
|
if(res.data.code == 200){
|
||
|
|
const data = res.data.data
|
||
|
|
this.questions = data.data.map((item,index)=>{
|
||
|
|
return {
|
||
|
|
id: item.id,
|
||
|
|
question: item.name,
|
||
|
|
type: 'select',
|
||
|
|
answers: item.items.map((val)=>{
|
||
|
|
return {
|
||
|
|
answer: val.answer,
|
||
|
|
item: val.item.substring(2)
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
}
|
||
|
|
})
|
||
|
|
// console.log(this.questions)
|
||
|
|
}else{
|
||
|
|
uni.showToast({
|
||
|
|
title: res.data.message,
|
||
|
|
icon: "none"
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
submit() {
|
||
|
|
if (this.form.length < this.questions.length) {
|
||
|
|
this.showToast({
|
||
|
|
type: 'default',
|
||
|
|
message: "请回答所有问题"
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
//提交问券
|
||
|
|
store.commit('setanswer',this.form)
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/coupons/finish/index'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
nextQuestion(){
|
||
|
|
if(this.curQuIndex < this.form.length){
|
||
|
|
this.curQuIndex = this.curQuIndex+1
|
||
|
|
}else{
|
||
|
|
this.showToast({
|
||
|
|
type: 'default',
|
||
|
|
message: "完成题目后才能查看下一道哦",
|
||
|
|
duration:1000,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
selectChange(anwser) {
|
||
|
|
if (this.curQuIndex == this.form.length) {
|
||
|
|
this.form.push({
|
||
|
|
id: this.questions[this.curQuIndex].id,
|
||
|
|
value: anwser
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
this.$set(this.form[this.curQuIndex],"value",anwser)
|
||
|
|
}
|
||
|
|
// console.log(this.form)
|
||
|
|
},
|
||
|
|
showToast(params) {
|
||
|
|
this.$refs.uToast.show({
|
||
|
|
...params,
|
||
|
|
complete() {
|
||
|
|
params.url && uni.navigateTo({
|
||
|
|
url: params.url
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
onShow(){
|
||
|
|
const acid = this.$route.query['acid']
|
||
|
|
|
||
|
|
acstore.dispatch('getactivitId').then((res)=>{
|
||
|
|
console.log(acid,this.activityId)
|
||
|
|
if(acid){
|
||
|
|
this.activityId = acid
|
||
|
|
if(res.activitId != acid){
|
||
|
|
acstore.commit('setactivitId',acid)
|
||
|
|
authState.logout()
|
||
|
|
}
|
||
|
|
}else{
|
||
|
|
this.activityId = parseInt(res.activitId)
|
||
|
|
}
|
||
|
|
this.getQuestionList()
|
||
|
|
}).catch(error => {
|
||
|
|
if(acid){
|
||
|
|
this.activityId = acid
|
||
|
|
acstore.commit('setactivitId',acid)
|
||
|
|
}
|
||
|
|
this.getQuestionList()
|
||
|
|
});
|
||
|
|
|
||
|
|
if(authState.isLogin()){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/pages/coupons/hinge/index'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
checkPage()
|
||
|
|
store.commit('setanswer',[])
|
||
|
|
this.backgroundStyle = {
|
||
|
|
backgroundImage: `url('${this.img}') `,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.background {
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
background-color: #F5F5F5;
|
||
|
|
height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.paper {
|
||
|
|
/* background-color: #fff; */
|
||
|
|
padding: 18rpx;
|
||
|
|
margin-top: 300rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.coupon-block {
|
||
|
|
margin-bottom: 86rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question {
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #00A8EA;
|
||
|
|
line-height: 32rpx;
|
||
|
|
text-align: left;
|
||
|
|
font-style: normal;
|
||
|
|
text-transform: none;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: flex-start;
|
||
|
|
background-image: url('@/static/images/questionblock.png');
|
||
|
|
height: 260rpx;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: 100% auto;
|
||
|
|
padding-top: 46rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-label{
|
||
|
|
font-family: Source Han Sans, Source Han Sans;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #00A8EA;
|
||
|
|
line-height: 32rpx;
|
||
|
|
text-align: left;
|
||
|
|
font-style: normal;
|
||
|
|
text-transform: none;
|
||
|
|
margin-left: 62rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-panel{
|
||
|
|
height: 190rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
/* background-color: rebeccapurple; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-content{
|
||
|
|
font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #00A8EA;
|
||
|
|
line-height: 44rpx;
|
||
|
|
text-align: justify;
|
||
|
|
font-style: normal;
|
||
|
|
text-transform: none;
|
||
|
|
padding: 64rpx;
|
||
|
|
/* margin-left: 64rpx; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.select-list {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 12rpx;
|
||
|
|
padding-left: 40rpx;
|
||
|
|
padding-right: 40rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #333333;
|
||
|
|
line-height: 32rpx;
|
||
|
|
text-align: left;
|
||
|
|
font-style: normal;
|
||
|
|
text-transform: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.select-item {
|
||
|
|
margin-top: 16rpx;
|
||
|
|
width: 100%;
|
||
|
|
height: 115rpx;
|
||
|
|
background: linear-gradient( 180deg, #F7FBFE 0%, #CFEFFB 100%);
|
||
|
|
/* border-radius: 51rpx 51rpx 51rpx 51rpx; */
|
||
|
|
/* border: 2rpx solid #DBFFFF; */
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
background-image: url("@/static/images/selectitem.png");
|
||
|
|
background-size: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.select-item-active {
|
||
|
|
margin-top: 16rpx;
|
||
|
|
width: 100%;
|
||
|
|
height: 115rpx;
|
||
|
|
background: linear-gradient( 180deg, #F7FBFE 0%, #CFEFFB 100%);
|
||
|
|
/* border-radius: 51rpx 51rpx 51rpx 51rpx; */
|
||
|
|
/* border: 2rpx solid #DBFFFF; */
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
background-image: url("@/static/images/selectitem2.png");
|
||
|
|
background-size: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-answer{
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 40rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
line-height: 28rpx;
|
||
|
|
text-align: justify;
|
||
|
|
font-style: normal;
|
||
|
|
text-transform: none;
|
||
|
|
margin-left: 38rpx;
|
||
|
|
margin-bottom: 12rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-content{
|
||
|
|
width: 100%;
|
||
|
|
margin-left: 50rpx;
|
||
|
|
margin-right: 30rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #333333;
|
||
|
|
line-height: 32rpx;
|
||
|
|
text-align: left;
|
||
|
|
font-style: normal;
|
||
|
|
text-transform: none;
|
||
|
|
display:flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom{
|
||
|
|
height: 180rpx;
|
||
|
|
background: #F7FBFE;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
padding-left: 140rpx;
|
||
|
|
padding-right: 140rpx;
|
||
|
|
border-radius: 50rpx 50rpx 0rpx 0rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button{
|
||
|
|
background-image: url('@/static/images/couponbutton.png');
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
width: 470rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|