hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-07 01:46:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix -- bug

Browse Source
This commit is contained in:
yuping
2023-02-27 02:24:22 +08:00
parent 8c8d346cc2
commit d1931e854b
1 changed files with 137 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

348
src/views/ballot/BallotPage.vue
View File

@@ -25,13 +25,14 @@
class="img2"
style="margin-right: 11px; cursor: pointer"
src="../../assets/image/return.png"
/>返回</el-button
/>返回
</el-button
>
</div>
</div>
</div>
<!-- 面包屑导航 -->
<div class="debateTitle">【投票】{{ state.dataInfo?.voteName }}</div>
<div class="debateTitle">【投票】{{ dataInfo?.voteName }}</div>
<!-- 详细信息 -->
<div class="detailinfo">
<div class="detail">
@@ -49,40 +50,26 @@
<div class="all">
<div class="item allbox1">
<div class="item1" style="color: #089dff">
{{
state.dataInfo.numberOfInvolved ||
state.dataInfo.numberOfInvolved == 0
? state.dataInfo.numberOfInvolved
: "-"
}}
{{ dataInfo.numberOfInvolved || "-" }}
</div>
<div class="item2">参与数</div>
</div>
<div class="item allbox2">
<div class="item1" style="color: #387df7">
{{
state.dataInfo.votesTotal || state.dataInfo.votesTotal == 0
? state.dataInfo.votesTotal
: "-"
}}
{{ dataInfo.votesTotal || "-" }}
</div>
<div class="item2">总票数</div>
</div>
<div class="item allbox3">
<div class="item1" style="color: #00c6ff">
{{
state.dataInfo.numberOfBrowse ||
state.dataInfo.numberOfBrowse == 0
? state.dataInfo.numberOfBrowse
: "-"
}}
{{ dataInfo.numberOfBrowse || "-" }}
</div>
<div class="item2">浏览数</div>
</div>
</div>
<div class="title">
<img
style="width: 20px; height: 20px"
style="width: 20px; height: 20px;border-radius: 5px"
src="../../assets/image/yuan.png"
/>
<div class="text">参与投票</div>
@@ -90,20 +77,19 @@
</div>
<div class="join">
<div
v-for="(item, index) in state.dataInfo.voteStemDtoList"
v-for="(item, index) in dataInfo.voteStemDtoList"
:key="index"
style="margin-bottom: 41px"
style="margin-bottom: 10px"
>
<div class="stem">
<div>{{ index + 1 }}、</div>
<div>{{ item.voteStemName }}</div>
</div>
<div class="options">
<div class="options" :style="item.optionDetailList?.some(t=>t.optionPictureAddress)?'display:flex;':'display:block;'">
<div
v-for="(value, key) in item.optionDetailList"
:key="key"
style="
width: 140px;
margin-right: 114px;
margin-bottom: 25px;
"
@@ -114,35 +100,30 @@
:src="value.optionPictureAddress"
/>
<div class="radio">
<label
@click="
choiceQuestion(key, value.id, state.dataInfo, index)
"
>
<!-- <input type="radio" name="one" value="right"/> -->
<div
v-if="value.isAnswer"
style="
<label @click="choiceQuestion(item,value)">
<div class="radio-img">
<div
v-if="value.isAnswer"
style="
width: 10px;
height: 10px;
background: #4a9cf8;
position: relative;
left: 15px;
border-radius: 10px;
"
></div>
<div
v-else
style="
"></div>
<div
v-else
style="
width: 10px;
height: 10px;
background: #fff;
position: relative;
left: 15px;
border-radius: 10px;
"
></div>
<div class="option"></div>
"></div>
<div class="option"></div>
</div>
<div class="opt-text">{{ value.optionName }}</div>
</label>
</div>
@@ -156,24 +137,11 @@
display: flex;
justify-content: center;
margin-top: 30px;
"
>
">
<button
class="submitbtn btn01"
:style="{
background:
new Date().getTime() >
new Date(state.dataInfo.voteEndTime).getTime() ||
new Date().getTime() <
new Date(state.dataInfo.voteStartTime).getTime()
? '#ccc'
: state.dataInfo.isSubmit
? '#ccc'
: '',
}"
@click="submitVote(state.dataInfo)"
>
{{ state.dataInfo.isSubmit ? "已提交" : "提交" }}
:style="{ background: new Date().getTime() > new Date(dataInfo.voteEndTime).getTime() ||new Date().getTime() < new Date(dataInfo.voteStartTime).getTime() ? '#ccc': dataInfo.isSubmit? '#ccc': '', }" @click="submitVote(dataInfo)">
{{ dataInfo.isSubmit ? "已提交" : "提交" }}
</button>
</div>
</div>
@@ -188,29 +156,13 @@
</div>
<div class="timebox clearfix">
<div class="innertime">
{{
state.dataInfo?.voteStartTime
}}&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;{{
state.dataInfo?.voteEndTime
}}
{{dataInfo?.voteStartTime }}&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;{{dataInfo?.voteEndTime }}
</div>
<div class="endtime clearfix">
<div class="endtimetext">
距离结束还有&nbsp;&nbsp;
<span class="te">{{
parseInt(
dayjs(state.dataInfo?.voteEndTime).diff(
dayjs(),
"minute"
) / 60
)
}}</span
>&nbsp;&nbsp; 小时&nbsp;&nbsp;<span class="te">{{
dayjs(state.dataInfo?.voteEndTime).diff(dayjs(), "minute") %
60
}}</span
>&nbsp;&nbsp;分钟
</div>
parseInt(dayjs(dataInfo?.voteEndTime).diff(dayjs(), "minute") / 60)}}</span>&nbsp;&nbsp; 小时&nbsp;&nbsp;<span class="te">{{dayjs(dataInfo?.voteEndTime).diff(dayjs(), "minute") % 60 }}</span>&nbsp;&nbsp;分钟</div>
</div>
</div>
<div class="righttitle">
@@ -224,35 +176,24 @@
<div class="explain clearfix">
<div
class="explaincontent"
v-html="
state.dataInfo?.voteExplain
? state.dataInfo?.voteExplain
: '暂无说明'
"
></div>
v-html="dataInfo?.voteExplain||'暂无说明'"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 详细信息 -->
</div>
</template>
<script setup>
import { useRequest, request } from "@/api/request";
import { VOTE_DETAIL2, VOTE_DETAIL3, VOTE_DETAIL_SUBMIT } from "@/api/api";
import {useRequest} from "@/api/request";
import {VOTE_DETAIL3, VOTE_DETAIL_SUBMIT} from "@/api/api";
import dayjs from "dayjs";
import store from "@/store";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router/dist/vue-router";
import { computed, reactive, toRefs } from "vue";
import { useTaskPage } from "@/api/useCommon";
// const { data } = useRequest(TASK_VOTE_DETAIL, {});
// console.log("datadatadata", data);
// const state = reactive({
// votedetail: null,
// });
// let { votedetail } = toRefs(state);
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router/dist/vue-router";
import {computed} from "vue";
import {useTaskPage} from "@/api/useCommon";
const {
query: { courseId, pName, sName, chapterOrStageId, infoId, id, btype },
} = useRoute();
@@ -261,135 +202,49 @@ const router = useRouter();
const returnclick = () => {
router.back();
};
const state = reactive({
dataInfo: {},
});
//获取基本信息
// const {data: dataInfo} = useRequest(VOTE_DETAIL2(courseId));
const { data: dataInfo } = useRequest(VOTE_DETAIL3(courseId), {});
const userInfo = computed(() => store.state.userInfo);
let timer = setInterval(() => {
if (userInfo.value.id) {
clearInterval(timer);
console.log("获取信息传递参数", {
chapterOrStageId: chapterOrStageId ? chapterOrStageId : 0,
courseId: courseId,
studentId: userInfo.value.id,
targetId: infoId,
type: btype,
});
request(VOTE_DETAIL3(courseId), {})
.then((res) => {
console.log(res);
state.dataInfo = res.data;
})
.catch((err) => {
console.log(err);
});
}
}, 500);
console.log("我是获取的投票基本信息", state.dataInfo);
// 答题时间
const answerTime = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
// 选择题目
const choiceQuestion = (order, id, dates, torder) => {
// 当已经提交过时候 不让选择题目
if (state.dataInfo.isSubmit) {
const choiceQuestion = (item, value) => {
if (dataInfo.value.isSubmit) {
return;
}
console.log("当前选择题目的id及序号", order, id, dates, torder);
console.log("state.dataInfo", state.dataInfo);
for (
let i = 0;
i < state.dataInfo.voteStemDtoList[torder].optionDetailList.length;
i++
) {
state.dataInfo.voteStemDtoList[torder].optionDetailList[i].isAnswer = false;
}
state.dataInfo.voteStemDtoList[torder].optionDetailList[
order
].isAnswer = true;
item.optionDetailList?.forEach(t => t.isAnswer = false);
value.isAnswer = true;
};
// 提交投票
const submitVote = () => {
console.log(state.dataInfo);
let nowTime = new Date().getTime();
let maxTime = new Date(state.dataInfo.voteEndTime).getTime();
let minTime = new Date(state.dataInfo.voteStartTime).getTime();
console.log(nowTime, maxTime, minTime);
let maxTime = new Date(dataInfo.value.voteEndTime).getTime();
let minTime = new Date(dataInfo.value.voteStartTime).getTime();
// 当未到开始时间
if (nowTime < minTime || nowTime > maxTime) {
ElMessage.error("未到投票开始时间");
return;
}
// 当已经提交过时候 不让提交即可
if (state.dataInfo.isSubmit) {
if (dataInfo.value.isSubmit) {
return;
}
let isSubmit = true;
let isSubArr = [];
for (let i = 0; i < state.dataInfo.voteStemDtoList.length; i++) {
for (
let j = 0;
j < state.dataInfo.voteStemDtoList[i].optionDetailList.length;
j++
) {
if (state.dataInfo.voteStemDtoList[i].optionDetailList[j].isAnswer) {
isSubArr[i] =
state.dataInfo.voteStemDtoList[i].optionDetailList[j].isAnswer;
break;
} else {
isSubArr[i] = false;
}
}
}
for (let i = 0; i < isSubArr.length; i++) {
if (isSubArr[i] == false) {
isSubmit = false;
}
}
if (isSubmit == false) {
if (dataInfo.value.voteStemDtoList.some(t => t.optionDetailList.every(s => !s.isAnswer))) {
ElMessage.error("请选择投票问题后进行提交");
return;
}
dataInfo.value.isSubmit = !dataInfo.value.isSubmit;
ElMessage.success("投票成功");
let obj = {
beginTime: answerTime,
chapterOrStageId: chapterOrStageId ? chapterOrStageId : 0,
result: JSON.stringify(state.dataInfo),
result: JSON.stringify(dataInfo.value),
targetId: infoId, // 项目 路径图 id
taskId: id,
type: btype, // 1 项目 2 路径图
voteId: state.dataInfo.id,
voteName: state.dataInfo.voteName,
voteId: dataInfo.value.id,
voteName: dataInfo.value.voteName,
};
console.log("我是投票提交的信息", obj);
useRequest(VOTE_DETAIL_SUBMIT, obj, (e) => {
console.log(e);
request(VOTE_DETAIL3(courseId), {})
.then((res) => {
console.log(res);
ElMessage.success("投票成功");
state.dataInfo = res.data;
})
.catch((err) => {
console.log(err);
});
// request(VOTE_DETAIL2, {
// "chapterOrStageId": chapterOrStageId ? chapterOrStageId : 0,
// "courseId": courseId,
// "studentId": userInfo.value.id,
// "targetId": infoId,
// "type": btype,
// taskId: id
// }).then(res=>{
// console.log(res)
// ElMessage.success("投票成功")
// state.dataInfo = res.data
// }).catch(err=>{
// console.log(err)
// });
});
useRequest(VOTE_DETAIL_SUBMIT, obj);
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
@@ -400,6 +255,7 @@ const submitVote = () => {
display: table;
clear: both;
}
.moreactive {
.crumb {
color: #fff;
@@ -408,9 +264,11 @@ const submitVote = () => {
line-height: 24px;
position: relative;
}
.return {
position: absolute;
right: 10%;
.text {
text-align: center;
display: flex;
@@ -418,9 +276,11 @@ const submitVote = () => {
align-items: center;
}
}
.preNext {
position: absolute;
right: 0px;
.content {
font-size: 14px;
color: #fff;
@@ -431,6 +291,7 @@ const submitVote = () => {
top: -6px;
cursor: pointer;
}
.btn {
width: 23px;
height: 23px;
@@ -438,13 +299,16 @@ const submitVote = () => {
border: 0;
cursor: pointer;
}
.btn01 {
background-image: url("../../assets/image/prev.png");
}
.btn02 {
background-image: url("../../assets/image/next.png");
}
}
.debateTitle {
margin-top: 15px;
font-size: 20px;
@@ -454,10 +318,12 @@ const submitVote = () => {
color: #fff;
margin-left: -10px;
}
.detailinfo {
width: 100%;
margin-top: 20px;
display: flex;
.detail {
flex: 1;
// margin-right: 20px;
@@ -468,23 +334,28 @@ const submitVote = () => {
color: rgba(51, 51, 51, 1);
display: flex;
padding-bottom: 20px;
.left {
margin-left: 48px;
flex: 1;
}
.right {
width: 417px;
margin-right: 48px;
.righttitle {
display: flex;
padding-top: 39px;
position: relative;
.text {
margin-left: 8px;
font-size: 16px;
color: rgba(51, 51, 51, 1);
font-weight: 800;
}
.box {
width: 75px;
height: 10px;
@@ -494,6 +365,7 @@ const submitVote = () => {
top: 53px;
}
}
.timebox {
width: 417px;
height: 149px;
@@ -501,6 +373,7 @@ const submitVote = () => {
border-radius: 4px;
margin-top: 42px;
}
.innertime {
margin-top: 17px;
margin-left: 55px;
@@ -509,6 +382,7 @@ const submitVote = () => {
color: #ffffff;
line-height: 24px;
}
.endtime {
margin-left: 10px;
margin-top: 16px;
@@ -516,9 +390,11 @@ const submitVote = () => {
height: 81px;
background: #f2f5f7;
border-radius: 0px 8px 0px 8px;
.endtimetext {
margin-top: 25px;
margin-left: 46px;
.te {
font-size: 28px;
font-weight: 800;
@@ -527,6 +403,7 @@ const submitVote = () => {
}
}
}
.explain {
margin-top: 30px;
width: 416px;
@@ -534,6 +411,7 @@ const submitVote = () => {
background: #f2f5f7;
border-radius: 8px;
}
.explaincontent {
width: 368px;
font-size: 16px;
@@ -544,18 +422,21 @@ const submitVote = () => {
margin-top: 47px;
}
}
.title {
display: flex;
align-items: center;
padding-top: 39px;
position: relative;
}
.title .text {
margin-left: 8px;
font-size: 16px;
color: rgba(51, 51, 51, 1);
font-weight: 800;
}
.title .box {
width: 75px;
height: 10px;
@@ -564,47 +445,54 @@ const submitVote = () => {
left: 23px;
top: 53px;
}
.all {
display: flex;
justify-content: space-between;
// width: 1280px;
margin-right: 48px;
margin-top: 43px;
.allbox1 {
margin-right: 22px;
background: linear-gradient(
0deg,
rgba(160, 193, 230, 0) 0%,
rgba(161, 195, 231, 0.2) 100%
0deg,
rgba(160, 193, 230, 0) 0%,
rgba(161, 195, 231, 0.2) 100%
);
}
.allbox2 {
margin-right: 22px;
background: linear-gradient(
0deg,
rgba(177, 219, 229, 0) 0%,
rgba(172, 216, 227, 0.2) 100%
0deg,
rgba(177, 219, 229, 0) 0%,
rgba(172, 216, 227, 0.2) 100%
);
}
.allbox3 {
background: linear-gradient(
0deg,
rgba(195, 209, 234, 0) 0%,
rgba(191, 206, 231, 0.2) 100%
0deg,
rgba(195, 209, 234, 0) 0%,
rgba(191, 206, 231, 0.2) 100%
);
}
.item {
// width: 410px;
width: calc(100% - 44px);
height: 149px;
text-align: center;
border-radius: 4px;
.item1 {
color: #089dff;
font-size: 24px;
font-weight: bold;
margin-top: 36px;
}
.item2 {
color: #333330;
font-size: 14px;
@@ -612,6 +500,7 @@ const submitVote = () => {
}
}
}
.join {
// width: 1280px;
margin-right: 48px;
@@ -621,6 +510,7 @@ const submitVote = () => {
margin-top: 32px;
margin-left: 21px;
flex: 1;
.stem {
display: flex;
font-size: 16px;
@@ -628,30 +518,48 @@ const submitVote = () => {
color: #333330;
line-height: 38px;
}
.options {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.radio {
margin-top: 14px;
margin-left: -16px;
position: relative;
.radio-img{
display: flex;
align-items: center;
}
}
.radio label {
width:100%;
line-height: 20px;
position: relative;
display: flex;
align-items: center;
text-align: center;
display: grid;
grid-template-columns: 40px 1fr;
justify-content: center;
height: 35px;
font-weight: normal;
.opt-text {
justify-self: stretch;
font-size: 14px;
font-weight: bold;
color: #333330;
line-height: 18px;
margin-left: 10px;
align-self: center;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
text-overflow: ellipsis;
text-align: left;
}
}
.radio .option {
width: 19px;
height: 18px;
@@ -659,21 +567,24 @@ const submitVote = () => {
// top: 1px;
// // top: 32px;
// left: 0px;
background-size: cover;
background-size: 100%;
background: url(../../assets/image/noselect.png) no-repeat;
background-size: cover;
}
.radio input[type="radio"] {
display: inline-block;
margin-right: -3px;
opacity: 0;
}
.radio input[type="radio"]:checked + div {
background: url(../../assets/image/select.png) no-repeat;
background-size: cover;
}
.imgcontent {
display: flex;
.imgone {
width: 140px;
height: 140px;
@@ -683,6 +594,7 @@ const submitVote = () => {
background-position: center;
}
}
.ontitle {
margin-top: 27px;
font-size: 14px;
@@ -690,20 +602,24 @@ const submitVote = () => {
}
}
}
.detailB {
min-height: 363px;
background: #ffffff;
border-radius: 8px;
margin-top: 20px;
.el-tabs__item {
height: 69px;
padding: 25px 7px 0px 52px;
font-size: 14px;
font-weight: 500;
}
.el-tabs__nav-wrap::after {
background-color: rgba(56, 125, 247, 0.2);
}
.enclosure {
height: 89px;
margin-left: 51px;
@@ -712,6 +628,7 @@ const submitVote = () => {
display: flex;
justify-content: space-between;
align-items: center;
.enclosureL {
display: flex;
align-items: center;
@@ -720,6 +637,7 @@ const submitVote = () => {
color: #677d86;
line-height: 24px;
}
.download {
display: flex;
align-items: center;
@@ -730,6 +648,7 @@ const submitVote = () => {
cursor: pointer;
}
}
.work {
margin-left: 51px;
margin-right: 40px;
@@ -738,12 +657,14 @@ const submitVote = () => {
align-items: center;
margin-top: 37px;
}
.work .question {
font-size: 14px;
font-weight: 500;
color: #333330;
line-height: 18px;
}
.work .active {
width: 82px;
height: 28px;
@@ -759,6 +680,7 @@ const submitVote = () => {
cursor: pointer;
margin-right: 11px;
}
.work .unactive {
width: 80px;
height: 26px;
@@ -774,15 +696,19 @@ const submitVote = () => {
margin-right: 11px;
cursor: pointer;
}
.work .btncolor {
background: linear-gradient(90deg, #84aad2 0%, #a4c5e9 100%);
}
.work .bordercolor {
border: 1px solid #85aad2;
}
.work .fontcolor {
color: rgba(133, 170, 210, 1);
}
.work .submit {
width: 126px;
height: 46px;