mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-07 18:06:48 +08:00
516 lines
15 KiB
Vue
516 lines
15 KiB
Vue
<template>
|
|
<div class="ballotpage">
|
|
<!-- <TitleHead text="【投票】管理者进阶腾飞班 - 授课方式"></TitleHead> -->
|
|
<ReturnHead text="投票详情"></ReturnHead>
|
|
<div class="notice">
|
|
<div class="noticebox">
|
|
<div class="mani">
|
|
<div class="joininfo" style="margin-left: -8px">
|
|
【投票】{{ data?.voteName }}
|
|
</div>
|
|
<div class="contenttitle">
|
|
<img class="timeimg" src="../../assets/image/ballotpage/time.png" />
|
|
<div class="timee">
|
|
{{ data?.voteStartTime + " 至 " + data?.voteEndTime }}
|
|
</div>
|
|
</div>
|
|
<div class="timebox">
|
|
<div class="samez" style="margin-left: 18px">{{ hour }}</div>
|
|
<div class="samey">时</div>
|
|
<div class="samez">{{ minute }}</div>
|
|
<div class="samey">分</div>
|
|
<div class="samez">{{ seconds }}</div>
|
|
<div class="samey">秒</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notice">
|
|
<div class="noticebox">
|
|
<div class="mani">
|
|
<div class="joininfo">参与情况</div>
|
|
<div class="line"></div>
|
|
<div class="contentone">
|
|
<div class="same ba">
|
|
<div class="samenum" style="color: #089dff">
|
|
{{
|
|
data?.numberOfInvolved || data?.numberOfInvolved == 0
|
|
? data?.numberOfInvolved
|
|
: "-"
|
|
}}
|
|
</div>
|
|
<div class="samego">参与数</div>
|
|
</div>
|
|
<div class="same bt">
|
|
<div class="samenum" style="color: #387df7">
|
|
{{
|
|
data?.votesTotal || data?.votesTotal == 0
|
|
? data?.votesTotal
|
|
: "-"
|
|
}}
|
|
</div>
|
|
<div class="samego">总票数</div>
|
|
</div>
|
|
<div class="same bh">
|
|
<div class="samenum" style="color: #00c1fc">
|
|
{{
|
|
data?.numberOfBrowse || data?.numberOfBrowse == 0
|
|
? data?.numberOfBrowse
|
|
: "-"
|
|
}}
|
|
</div>
|
|
<div class="samego">浏览数</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="notice">
|
|
<div class="noticebox">
|
|
<div class="mani">
|
|
<div class="joininfo">投票说明</div>
|
|
<div class="line"></div>
|
|
<div class="contentone">
|
|
<div class="ballotdetail">
|
|
{{ data?.voteExplain }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="notice">
|
|
<div class="noticebox">
|
|
<div class="mani">
|
|
<div class="joininfo">参加投票</div>
|
|
<div class="line"></div>
|
|
<div class="contentone" style="margin-top: 15px">
|
|
<div class="ballotjoincontainer">
|
|
<div class="ballotjoin">
|
|
<div
|
|
class="ballotitem"
|
|
v-for="(item, index) in data?.voteStemDtoList"
|
|
:key="index"
|
|
>
|
|
<div class="stem">
|
|
{{ item.voteStemName }}
|
|
</div>
|
|
<div
|
|
class="upitem"
|
|
v-for="(elem, key) in item?.optionDetailList"
|
|
:key="key"
|
|
>
|
|
<div class="left">
|
|
<div style="display: flex; align-items: center">
|
|
<img
|
|
class="leftimg"
|
|
src="../../assets/image/ballotpage/left.png"
|
|
/>
|
|
<div class="leftcontent">{{ elem.optionName }}</div>
|
|
</div>
|
|
<img
|
|
v-if="elem.optionPictureAddress"
|
|
:src="elem.optionPictureAddress"
|
|
style="
|
|
width: 70px;
|
|
height: 70px;
|
|
margin-left: 20px;
|
|
margin-top: 10px;
|
|
"
|
|
/>
|
|
</div>
|
|
<button
|
|
class="btn"
|
|
:style="{
|
|
backgroundColor: elem.isAnswer ? '#ddd' : '#2478ff',
|
|
}"
|
|
@click="choiceQuestion(item, elem)"
|
|
>
|
|
投票
|
|
</button>
|
|
</div>
|
|
<!-- <div
|
|
:class="
|
|
index === data?.ballotVo?.voteStemVoList.length - 1
|
|
? null
|
|
: 'thinline'
|
|
"
|
|
></div> -->
|
|
</div>
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 30px;
|
|
"
|
|
>
|
|
<button
|
|
class="submitbtn btn01"
|
|
:style="{
|
|
background:
|
|
new Date().getTime() >
|
|
new Date(changeTime(data?.voteEndTime)).getTime() ||
|
|
new Date().getTime() <
|
|
new Date(changeTime(data?.voteStartTime)).getTime()
|
|
? '#ccc'
|
|
: data.isSubmit
|
|
? '#ccc'
|
|
: '',
|
|
}"
|
|
@click="submitVote(data)"
|
|
>
|
|
{{ data.isSubmit ? "已提交" : "提交" }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, toRefs, computed, onUnmounted, ref, watch } from "vue";
|
|
import ReturnHead from "@/components/ReturnHead.vue";
|
|
// import TitleHead from "@/components/TitleHead.vue";
|
|
import { useRequest, request } from "@/api/request";
|
|
import {
|
|
VOTE_DETAIL3,
|
|
VOTE_DETAIL_SUBMIT,
|
|
EditVoteInvolvedAndBrowse,
|
|
} 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 { changeTime } from "@/api/method";
|
|
const router = useRouter();
|
|
const {
|
|
query: { courseId, chapterOrStageId, infoId, id, btype, type },
|
|
} = useRoute();
|
|
onUnmounted(() => {
|
|
if (timer) {
|
|
clearInterval(timer);
|
|
}
|
|
});
|
|
|
|
const userInfo = computed(() => store.state.userInfo);
|
|
const { data } = useRequest(VOTE_DETAIL3, { voteId: courseId, type }, (e) => {
|
|
if (e.code === 6) {
|
|
router.push({
|
|
path: "/notpath",
|
|
});
|
|
}
|
|
});
|
|
// 增加浏览量
|
|
watch(data, () => {
|
|
data.value.numberOfBrowse = Number(data.value.numberOfBrowse) + 1;
|
|
useRequest(EditVoteInvolvedAndBrowse, {
|
|
operationType: "2",
|
|
voteId: data.value.id,
|
|
});
|
|
});
|
|
console.log("投票基本信息", data);
|
|
//投票倒计时
|
|
let hour = ref(0);
|
|
let minute = ref(0);
|
|
let seconds = ref(0);
|
|
let timer = setInterval(function () {
|
|
if (data && data.value && data.value.voteEndTime) {
|
|
let newEndTime = changeTime(data.value.voteEndTime);
|
|
let endTime = parseInt(new Date(newEndTime).getTime() / 1000);
|
|
let nowTime = parseInt(new Date().getTime() / 1000);
|
|
if (endTime > nowTime) {
|
|
hour.value = parseInt(dayjs(newEndTime).diff(dayjs(), "minute") / 60);
|
|
minute.value = parseInt(dayjs(newEndTime).diff(dayjs(), "minute") % 60);
|
|
seconds.value = parseInt(
|
|
dayjs(newEndTime).diff(dayjs(), "seconds") -
|
|
(hour.value * 60 + minute.value) * 60
|
|
);
|
|
} else {
|
|
clearInterval(timer);
|
|
}
|
|
}
|
|
}, 1000);
|
|
|
|
// 答题时间
|
|
const answerTime = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
|
|
// 选择题目
|
|
const choiceQuestion = (item, value) => {
|
|
// 当已经提交过时候 不让选择题目
|
|
if (data.value.isSubmit) {
|
|
return;
|
|
}
|
|
console.log("value", value);
|
|
item.optionDetailList?.forEach((t) => (t.isAnswer = false));
|
|
value.isAnswer = true;
|
|
};
|
|
// 提交投票
|
|
const submitVote = () => {
|
|
console.log("投票详情", data.value);
|
|
let nowTime = new Date().getTime();
|
|
let maxTime = new Date(changeTime(data.value.voteEndTime)).getTime();
|
|
let minTime = new Date(changeTime(data.value.voteStartTime)).getTime();
|
|
console.log(nowTime, maxTime, minTime);
|
|
// 当未到开始时间
|
|
if (nowTime < minTime || nowTime > maxTime) {
|
|
ElMessage.error("未到投票开始时间");
|
|
return;
|
|
}
|
|
|
|
// 当已经提交过时候 不让提交即可
|
|
if (data.value.isSubmit) {
|
|
return;
|
|
}
|
|
if (
|
|
data.value.voteStemDtoList.some((t) =>
|
|
t.optionDetailList.every((s) => !s.isAnswer)
|
|
)
|
|
) {
|
|
ElMessage.error("请选择投票问题后进行提交");
|
|
return;
|
|
}
|
|
|
|
let obj = {
|
|
beginTime: answerTime,
|
|
chapterOrStageId: chapterOrStageId ? chapterOrStageId : 0,
|
|
result: JSON.stringify(data.value),
|
|
targetId: infoId, // 项目 路径图 id
|
|
taskId: id,
|
|
type: btype, // 1 项目 2 路径图
|
|
voteId: data.value.id,
|
|
voteName: data.value.voteName,
|
|
};
|
|
data.value.isSubmit = !data.value.isSubmit;
|
|
console.log("我是投票提交的信息", obj, data);
|
|
ElMessage.success("投票成功");
|
|
data.value.votesTotal = Number(data.value.votesTotal) + 1;
|
|
data.value.numberOfInvolved = Number(data.value.numberOfInvolved) + 1;
|
|
// data.value.numberOfBrowse = Number(data.value.numberOfBrowse) + 1;
|
|
useRequest(VOTE_DETAIL_SUBMIT, obj);
|
|
// 增加参与数目
|
|
useRequest(EditVoteInvolvedAndBrowse, {
|
|
operationType: "1",
|
|
voteId: data.value.id,
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style lang="scss">
|
|
.clearfix:before,
|
|
.clearfix:after {
|
|
content: " ";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
.ballotpage {
|
|
width: 100%;
|
|
|
|
.notice {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
// margin-top: -17.5px;
|
|
// margin-top: 20px;
|
|
.noticebox {
|
|
width: 100%;
|
|
background: #fff;
|
|
// border-radius: 4px;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
.line {
|
|
width: 100%;
|
|
height: 0;
|
|
border-top: 1px solid #f1f2f3;
|
|
margin-top: 17px;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
.mani {
|
|
width: 90%;
|
|
margin-top: 20px;
|
|
// position:relative;
|
|
.joininfo {
|
|
color: #0d233a;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.samenum {
|
|
margin-top: 18.5px;
|
|
position: absolute;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
.samego {
|
|
margin-top: 45px;
|
|
position: absolute;
|
|
font-size: 13px;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
.contenttitle {
|
|
width: 100%;
|
|
// height:10px;
|
|
margin-top: 15px;
|
|
// background-color: #bfa;
|
|
display: flex;
|
|
.timeimg {
|
|
width: 12.8px;
|
|
height: 13px;
|
|
}
|
|
.timee {
|
|
color: #6e7b84;
|
|
font-size: 14px;
|
|
line-height: 13px;
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
.timebox {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 49px;
|
|
background-color: #f2f5f7;
|
|
margin-top: 17.5px;
|
|
margin-bottom: 27.5px;
|
|
border-radius: 10px;
|
|
.samez {
|
|
color: #0060ff;
|
|
font-size: 18px;
|
|
line-height: 49px;
|
|
margin-left: 13px;
|
|
}
|
|
.samey {
|
|
color: #6e7b84;
|
|
font-size: 14px;
|
|
line-height: 49px;
|
|
|
|
margin-left: 13px;
|
|
}
|
|
}
|
|
.contentone {
|
|
margin-top: 43px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
// height: 200px;
|
|
.same {
|
|
position: relative;
|
|
width: 108px;
|
|
height: 75px;
|
|
// background-color: red;
|
|
}
|
|
.ba {
|
|
background-image: url(../../assets/image/ballotpage/baccone.png);
|
|
}
|
|
.bt {
|
|
background-image: url(../../assets/image/ballotpage/bacctwo.png);
|
|
}
|
|
.bh {
|
|
background-image: url(../../assets/image/ballotpage/baccthr.png);
|
|
}
|
|
.ballotdetail {
|
|
color: #6e7b84;
|
|
line-height: 30px;
|
|
font-size: 13px;
|
|
}
|
|
.ballotjoincontainer {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
.ballotjoin {
|
|
width: 100%;
|
|
// height:100px;
|
|
// background-color: #bfa;
|
|
.ballotitem {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.stem {
|
|
width: 95%;
|
|
height: 49px;
|
|
background: #f2f5f7;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #333330;
|
|
line-height: 24px;
|
|
padding-left: 5%;
|
|
}
|
|
.upitem {
|
|
width: 90%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid rgba(241, 242, 243, 1);
|
|
padding-bottom: 13px;
|
|
.left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
.leftimg {
|
|
width: 4.5px;
|
|
height: 14.5px;
|
|
// margin-top: 1px;
|
|
}
|
|
.leftcontent {
|
|
margin-left: 9px;
|
|
color: #6e7b84;
|
|
font-size: 13px;
|
|
line-height: 30px;
|
|
// margin-top: -5px;
|
|
}
|
|
}
|
|
.btn {
|
|
background-color: #2478ff;
|
|
color: #fff;
|
|
width: 64px;
|
|
height: 21px;
|
|
border-radius: 10px;
|
|
border: 0;
|
|
font-size: 12px;
|
|
line-height: 19px;
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
.thinline {
|
|
width: 100%;
|
|
border-top: 1px solid #f1f2f3;
|
|
margin-top: 17px;
|
|
margin-bottom: 17px;
|
|
}
|
|
}
|
|
.submitbtn {
|
|
width: 73px;
|
|
height: 30px;
|
|
background: #2478ff;
|
|
box-shadow: 0px 1px 4px 0px rgba(56, 125, 247, 0.7);
|
|
border-radius: 2px;
|
|
// width: 66px;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
color: #ffffff;
|
|
line-height: 24px;
|
|
border: 0;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|