Initial commit
This commit is contained in:
jackyu66git
@@ -0,0 +1,388 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user