405 lines
9.1 KiB
Vue
405 lines
9.1 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="page-body">
|
|
<view class="loading-box" v-if="questions.length === 0 && !loadError">
|
|
<u-loading mode="circle" size="40"></u-loading>
|
|
<text class="loading-text">加载题目中...</text>
|
|
</view>
|
|
<view class="loading-box" v-if="loadError">
|
|
<text class="error-text">{{ loadError }}</text>
|
|
<button class="retry-btn" @tap="fetchQuestions">重新加载</button>
|
|
</view>
|
|
<template v-if="questions.length > 0">
|
|
<image src="https://aliyunoss.hn12301.net/learnlaw/gift_zt_bj.jpg" mode="widthFix" style="width:750rpx;"></image>
|
|
<view style="position:absolute;top:200rpx;left:0;z-index:0;padding: 30rpx;" >
|
|
<view class="quiz-header">
|
|
<view class="timer-wrap">
|
|
<text class="timer-label">答题时间</text>
|
|
<text class="timer">{{ formatTime(usedSeconds) }}</text>
|
|
</view>
|
|
<text class="answered-count">已答 {{ answeredCount }} / {{ questions.length }}</text>
|
|
</view>
|
|
|
|
|
|
<view class="question-item" v-for="(q, qi) in questions" :key="q.question_id">
|
|
<view class="q-header">
|
|
<text class="q-index">{{ qi + 1 }}</text>
|
|
<text class="q-content">{{ q.question_content }}</text>
|
|
</view>
|
|
<view class="options">
|
|
<view
|
|
class="option"
|
|
v-for="(opt, oi) in q.answerList"
|
|
:key="opt.id"
|
|
:class="{ selected: answers[q.question_id] === oi }"
|
|
@tap="select(q.question_id, oi)"
|
|
>
|
|
<view class="option-radio" :class="{ checked: answers[q.question_id] === oi }">
|
|
<view v-if="answers[q.question_id] === oi" class="radio-dot"></view>
|
|
</view>
|
|
<text class="option-text">{{ opt.answer_content }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="tips" v-if="answers[q.question_id] !== undefined">
|
|
<text class="tips-label">解析</text>
|
|
<text class="tips-text">{{ q.tips }}</text>
|
|
</view>
|
|
</view>
|
|
<button class="submit-btn" @tap="submit">提交</button>
|
|
</view>
|
|
|
|
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
questions: [],
|
|
answers: {},
|
|
loadError: '',
|
|
startTime: 0,
|
|
usedSeconds: 0,
|
|
timer: null
|
|
}
|
|
},
|
|
computed: {
|
|
answeredCount() {
|
|
return Object.keys(this.answers).length
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.fetchQuestions()
|
|
},
|
|
onUnload() {
|
|
this.stopTimer()
|
|
},
|
|
methods: {
|
|
fetchQuestions() {
|
|
this.loadError = ''
|
|
if (uni.getStorageSync('userIdGift')) {
|
|
this.doFetchQuestions()
|
|
return
|
|
}
|
|
const openId = uni.getStorageSync('openIdGift')
|
|
if (!openId) {
|
|
this.loadError = '未获取到用户信息，请返回首页重新进入'
|
|
return
|
|
}
|
|
this.$u.api.wxOpenidLogin({ wenjuan_id: 1003, open_id: openId }).then(loginRes => {
|
|
if (loginRes && loginRes.code === 0 && loginRes.Data && loginRes.Data.user_name && loginRes.Data.user_phone) {
|
|
uni.setStorageSync('isRegisteredGift', true)
|
|
uni.setStorageSync('userIdGift', loginRes.Data.user_id || loginRes.Data.uesr_id)
|
|
uni.setStorageSync('userNameGift', loginRes.Data.user_name)
|
|
uni.setStorageSync('userPhoneGift', loginRes.Data.user_phone)
|
|
}
|
|
if (!uni.getStorageSync('userIdGift')) {
|
|
this.loadError = '未获取到用户信息，请返回首页重新进入'
|
|
return
|
|
}
|
|
this.doFetchQuestions()
|
|
}).catch(err => {
|
|
console.error('同步用户信息失败', err)
|
|
this.loadError = '网络请求失败'
|
|
})
|
|
},
|
|
doFetchQuestions() {
|
|
const userId = uni.getStorageSync('userIdGift')
|
|
const userPhone = uni.getStorageSync('userPhoneGift')
|
|
this.$u.api.queryWenjuanQA({
|
|
wenjuan_id: 1003,
|
|
user_id: userId,
|
|
user_phone: userPhone
|
|
}).then(res => {
|
|
if (res.code === 0 && res.Data?.wenjuanTmList) {
|
|
this.questions = res.Data.wenjuanTmList
|
|
this.startTimer()
|
|
} else {
|
|
this.loadError = res.msg || '数据异常'
|
|
}
|
|
}).catch(err => {
|
|
console.error('获取题目失败', err)
|
|
this.loadError = '网络请求失败'
|
|
})
|
|
},
|
|
startTimer() {
|
|
this.startTime = Date.now()
|
|
this.timer = setInterval(() => {
|
|
this.usedSeconds = (Date.now() - this.startTime) / 1000
|
|
}, 100)
|
|
},
|
|
stopTimer() {
|
|
if (this.timer) {
|
|
clearInterval(this.timer)
|
|
this.timer = null
|
|
}
|
|
},
|
|
formatTime(sec) {
|
|
const m = Math.floor(sec / 60)
|
|
const sFloat = sec - m * 60
|
|
const s = Math.floor(sFloat)
|
|
const cs = Math.floor((sFloat - s) * 100)
|
|
return (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s + '.' + (cs < 10 ? '0' : '') + cs
|
|
},
|
|
select(qId, oi) {
|
|
this.$set(this.answers, qId, oi)
|
|
},
|
|
submit() {
|
|
if (this.answeredCount < this.questions.length) {
|
|
uni.showToast({ title: '还有题目未作答', icon: 'none' })
|
|
return
|
|
}
|
|
const elapsed = Math.round((Date.now() - this.startTime) / 1000 * 100) / 100
|
|
if (elapsed < 9) {
|
|
uni.showToast({ title: '操作繁忙，请重试', icon: 'none' })
|
|
return
|
|
}
|
|
this.stopTimer()
|
|
const userId = uni.getStorageSync('userIdGift')
|
|
const userPhone = uni.getStorageSync('userPhoneGift')
|
|
const details = this.questions.map(q => ({
|
|
question_id: q.question_id,
|
|
user_answer: q.answerList[this.answers[q.question_id]]?.answer_content || ''
|
|
}))
|
|
this.$u.api.submitQA({
|
|
user_id: userId,
|
|
user_phone: userPhone,
|
|
wenjuan_id: 1003,
|
|
use_time: elapsed,
|
|
total_question_num: this.questions.length,
|
|
channel: 1,
|
|
user_answer_details: details
|
|
}).then(res => {
|
|
if (res.code === 0) {
|
|
uni.setStorageSync('resultDataGift', {
|
|
...res.Data,
|
|
use_time: elapsed,
|
|
total_question_num: this.questions.length
|
|
})
|
|
uni.navigateTo({ url: '/pages/result/result' })
|
|
} else {
|
|
uni.showToast({ title: res.msg || '提交失败', icon: 'none' })
|
|
}
|
|
}).catch(() => {
|
|
uni.showToast({ title: '网络异常', icon: 'none' })
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #7CC6EB;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
}
|
|
|
|
.page-body {
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.quiz-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
padding: 16rpx 24rpx;
|
|
background: #71BCFB66;
|
|
border-radius: 12rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.quiz-scroll {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.timer-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.timer-label {
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.timer {
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.answered-count {
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
.question-item {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 20rpx;
|
|
padding: 32rpx 28rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.q-header {
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.q-index {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
line-height: 44rpx;
|
|
text-align: center;
|
|
background: #FD5401;
|
|
color: #fff;
|
|
border-radius: 50%;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
margin-right: 16rpx;
|
|
margin-top: 4rpx;
|
|
}
|
|
|
|
.q-content {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
line-height: 1.6;
|
|
flex: 1;
|
|
}
|
|
|
|
.options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14rpx;
|
|
}
|
|
|
|
.option {
|
|
padding: 22rpx 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border: 2rpx solid #eee;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.option.selected {
|
|
border-color: #FD5401;
|
|
background: rgba(253, 84, 1, 0.05);
|
|
}
|
|
|
|
.option-radio {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 50%;
|
|
border: 3rpx solid #CCC;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 16rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.option-radio.checked {
|
|
border-color: #FD5401;
|
|
}
|
|
|
|
.radio-dot {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
border-radius: 50%;
|
|
background: #FD5401;
|
|
}
|
|
|
|
.option-text {
|
|
font-size: 27rpx;
|
|
color: #333;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.tips {
|
|
background: rgba(255, 247, 237, 0.95);
|
|
border-radius: 12rpx;
|
|
padding: 20rpx;
|
|
margin-top: 16rpx;
|
|
border-left: 6rpx solid #FD5401;
|
|
}
|
|
|
|
.tips-label {
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
color: #FD5401;
|
|
display: block;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
|
|
.tips-text {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.submit-btn {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
background: linear-gradient(135deg, #FD5401, #FF7A3D);
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
border: none;
|
|
border-radius: 44rpx;
|
|
margin: 10rpx 0 40rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(253, 84, 1, 0.3);
|
|
}
|
|
|
|
.loading-box {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.loading-text {
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.error-text {
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
display: block;
|
|
}
|
|
|
|
.retry-btn {
|
|
margin-top: 30rpx;
|
|
width: 240rpx;
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: #FD5401;
|
|
border: none;
|
|
border-radius: 36rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
</style>
|