initial commit: giftlaw ni xue fa wo you li - natural resources session
This commit is contained in:
lcj
@@ -0,0 +1,404 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user