388 lines
8.9 KiB
Vue
388 lines
8.9 KiB
Vue
<template>
|
|
<view class="content">
|
|
<myNav :title="showTitle" bgColor="nonoe" titleColor="#614D49" :backIcon="true" :backHome="false" :flex="false">
|
|
</myNav>
|
|
<view class="flex-justify-center">
|
|
<view class="choice-process">
|
|
<text class="chice-show-num" style="margin-left: 36rpx;">
|
|
{{ answerList.length }}/{{ showListData.length }}
|
|
</text>
|
|
<view style="width: 416rpx;margin-left: 15rpx;margin-right: 16rpx;height: 18rpx;">
|
|
<uv-line-progress :percentage="percentage" :showText="false" activeColor="#F37155"
|
|
style=""></uv-line-progress>
|
|
</view>
|
|
<text class="chice-show-title" style="margin-left: 10rpx;">
|
|
单选题
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-justify-center">
|
|
<view class="question-show">
|
|
|
|
<image v-if="showData.questionImgae" style="width:100%;margin-top: 40rpx;" :src="showData.questionImgae"
|
|
mode="aspectFill"></image>
|
|
|
|
<text class="question-content">
|
|
{{ showData.seq + 1 }}、{{ showData.questionText }}
|
|
</text>
|
|
|
|
<view class="option-show" v-for="(item, index) in showData.questionOptionVOList"
|
|
@click="toChoice(item,index)" :key="index">
|
|
<view :style="{color:showData.choiceindex&&showData.choiceindex==(index+1)?'#EA4E2D':'#303044'}">
|
|
<text>{{ getLabel(index) }}</text>
|
|
<text style="margin-left: 10rpx;">{{ item.optionText }}</text>
|
|
</view>
|
|
|
|
<view v-if="showData.choiceindex&&showData.choiceindex==(index+1)" class="no-choice">
|
|
<view class="choice-selected"></view>
|
|
</view>
|
|
<view v-else class="no-choice"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="button-container" style="display: flex;" v-if="showData.seq==(showListData.length-1)">
|
|
<button class="start-btn1" style="margin-left: 120rpx;" @click="toPre">
|
|
<text class="button-text">
|
|
上一题
|
|
</text>
|
|
</button>
|
|
<button class="start-btn1" style="margin-right: 120rpx;" @click="complete">
|
|
<text class="button-text">
|
|
完成
|
|
</text>
|
|
</button>
|
|
</view>
|
|
<view v-if="showData.seq>0&&showData.seq!=(showListData.length-1)" class="button-container">
|
|
<button class="start-btn" @click="toPre">
|
|
|
|
<text class="button-text">
|
|
上一题
|
|
</text>
|
|
|
|
</button>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import myNav from '@/components/my-nav.vue'
|
|
import {
|
|
urls
|
|
} from '@/util/apiUrl.js'
|
|
import dohttp from '@/util/requestConfig.js'
|
|
|
|
const showListData = ref([])
|
|
const showTitle = ref("")
|
|
const answerList = ref([])
|
|
const percentage = ref(0)
|
|
const showData = ref({})
|
|
const testId = ref(null)
|
|
const costTime = ref(0)
|
|
const testPic = ref("")
|
|
|
|
|
|
onLoad((option) => {
|
|
|
|
const instance = getCurrentInstance().proxy
|
|
const eventChannel = instance.getOpenerEventChannel();
|
|
eventChannel.on('acceptDataFromOpenerPage', function(data) {
|
|
|
|
showListData.value = data.data
|
|
showTitle.value = data.showTitle
|
|
testPic.value = data.testPic
|
|
testId.value = data.testId
|
|
|
|
|
|
let index = 0
|
|
showData.value = showListData.value[index]
|
|
showData.value.seq = index
|
|
percentage.value = (answerList.value.length / showListData.value.length).toFixed(2) * 100
|
|
setInterval(() => {
|
|
costTime.value = costTime.value + 1
|
|
}, 1000)
|
|
})
|
|
|
|
})
|
|
onMounted(() => {
|
|
// showListData.value = uni.getStorageSync("data")
|
|
// showTitle.value = uni.getStorageSync("showTitle")
|
|
})
|
|
|
|
const getLabel = (index) => {
|
|
return String.fromCharCode(65 + index) + "" // A. B. C. D.
|
|
}
|
|
const toChoice = (item, index) => {
|
|
for (let i = 0; i < answerList.value.length; i++) {
|
|
if (answerList.value[i].questionId == showData.value.id) {
|
|
answerList.value[i].optionId = item.id
|
|
showData.value.choiceindex = index + 1
|
|
toNext()
|
|
return
|
|
}
|
|
}
|
|
answerList.value.push({
|
|
optionId: item.id,
|
|
questionId: showData.value.id
|
|
})
|
|
percentage.value = (answerList.value.length / showListData.value.length).toFixed(2) * 100
|
|
showData.value.choiceindex = index + 1
|
|
toNext()
|
|
}
|
|
const toNext = () => {
|
|
let currentIndex = showData.value.seq + 1
|
|
if (showListData.value[currentIndex]) {
|
|
showData.value = showListData.value[currentIndex]
|
|
showData.value.seq = currentIndex
|
|
|
|
}
|
|
}
|
|
|
|
const toPre = () => {
|
|
let currentIndex = showData.value.seq - 1
|
|
if (showListData.value[currentIndex]) {
|
|
showData.value = showListData.value[currentIndex]
|
|
showData.value.seq = currentIndex
|
|
}
|
|
}
|
|
|
|
const complete = () => {
|
|
let params = {
|
|
id: testId.value,
|
|
totalTime: costTime.value,
|
|
userChoiceOptionVOList: answerList.value
|
|
}
|
|
if (answerList.value.length != showListData.value.length) {
|
|
// const uniqueIds = showListData.value
|
|
// .filter(item => !answerList.value.some(sItem => sItem.questionId === item.id))
|
|
// .map(item => item.id);
|
|
console.log("ssssssssssss",answerList.value,showListData.value)
|
|
const map = answerList.value.reduce((acc, item) => {
|
|
acc.set(item.questionId, item);
|
|
return acc;
|
|
}, new Map());
|
|
|
|
|
|
for (let i = 0; i < showListData.value.length; i++) {
|
|
let ele= map.get(showListData.value[i].id)
|
|
if(!ele){
|
|
let req = showListData.value[i].seq+1
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '序号为'+req+"的题目还未选择，请选择后再提交",
|
|
showCancel: false,
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
return
|
|
}
|
|
dohttp.post(urls.userChoiceSave, params).then((result) => {
|
|
dohttp.navigateTo("/pages/test-result/test-result?resultId=" + result)
|
|
})
|
|
}
|
|
|
|
const onShareAppMessage = () => {
|
|
return {
|
|
title: '快来体验一下吧~',
|
|
path: '/pages/index/index', // 分享的路径
|
|
};
|
|
};
|
|
|
|
const onShareTimeline = () => {
|
|
return {
|
|
title: '快来体验一下吧~',
|
|
query: 'id=32', // 分享路径的参数
|
|
};
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.content {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #f9f8f8;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: SourceHanSans;
|
|
}
|
|
|
|
.section {
|
|
background: white;
|
|
margin: 20rpx 30rpx;
|
|
padding: 27rpx 20rpx;
|
|
border-radius: 10rpx;
|
|
box-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.01);
|
|
height: fit-content;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 顶部图片 */
|
|
.banner {
|
|
width: 690rpx;
|
|
height: 440rpx;
|
|
object-fit: cover;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
/* 按钮 */
|
|
.button-container {
|
|
text-align: center;
|
|
margin-top: auto;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
|
|
.start-btn {
|
|
width: 550rpx;
|
|
height: 96rpx;
|
|
border-radius: 2002rpx;
|
|
opacity: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 8rpx 40rpx;
|
|
|
|
background: linear-gradient(180deg, #FF9079 0%, #F37155 100%);
|
|
}
|
|
|
|
.start-btn1 {
|
|
width: 250rpx;
|
|
height: 96rpx;
|
|
border-radius: 2002rpx;
|
|
opacity: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 8rpx 40rpx;
|
|
|
|
background: linear-gradient(180deg, #FF9079 0%, #F37155 100%);
|
|
}
|
|
|
|
|
|
.flex-justify-center {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.choice-process {
|
|
/* 正文色/正文色 */
|
|
background: #FFFFFF;
|
|
width: 670rpx;
|
|
height: 128rpx;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.chice-show-num {
|
|
width: 70rpx;
|
|
height: 46rpx;
|
|
opacity: 1;
|
|
|
|
/* 按钮/按钮文本中号加粗 */
|
|
font-family: SourceHanSansBold;
|
|
font-size: 32rpx;
|
|
line-height: normal;
|
|
text-align: center;
|
|
letter-spacing: 0rpx;
|
|
font-variation-settings: "opsz" auto;
|
|
color: #9B918C;
|
|
|
|
}
|
|
|
|
.chice-show-title {
|
|
|
|
/* 正文/正文文本1 */
|
|
font-family: SourceHanSans;
|
|
font-size: 28rpx;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0rpx;
|
|
font-variation-settings: "opsz" auto;
|
|
color: #9B918C;
|
|
|
|
}
|
|
|
|
.question-show {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
width: 670rpx;
|
|
margin-top: 20rpx;
|
|
border-radius: 10rpx;
|
|
background: #FFFFFF;
|
|
padding-left: 40rpx;
|
|
padding-right: 40rpx;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.question-content {
|
|
font-family: SourceHanSansBold;
|
|
font-size: 36rpx;
|
|
line-height: normal;
|
|
letter-spacing: 0rpx;
|
|
|
|
font-variation-settings: "opsz" auto;
|
|
/* 背景色/浅色背景2 */
|
|
color: #614D49;
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.option-show {
|
|
display: flex;
|
|
margin-top: 40rpx;
|
|
align-items: center;
|
|
font-family: SourceHanSans;
|
|
justify-content: space-between;
|
|
font-size: 32rpx;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0px;
|
|
|
|
font-variation-settings: "opsz" auto;
|
|
/* 背景色/浅色背景2 */
|
|
color: #614D49;
|
|
}
|
|
|
|
.no-choice {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
box-sizing: border-box;
|
|
border: 1px solid #606271;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.choice-selected {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
border-radius: 50%;
|
|
background: #EA4E2D;
|
|
}
|
|
|
|
.button-text {
|
|
/* 按钮/按钮文本大号 */
|
|
/* 样式描述：常规大按钮 */
|
|
font-family: SourceHanSansBold;
|
|
font-size: 36rpx;
|
|
line-height: normal;
|
|
letter-spacing: 0px;
|
|
/* 正文色/正文色 */
|
|
color: #FFFFFF;
|
|
}
|
|
</style> |