|
@@ -1,6 +1,5 @@
|
|
|
<template>
|
|
|
<div class="vote">
|
|
|
-
|
|
|
<div v-if="WarmMessageisOpen" class="warmMessage ">
|
|
|
<div class="messageCard animate__animated animate__fadeInDown ">
|
|
|
<h2>{{ $t("studentWeb.vote.voteSuccess") }}</h2>
|
|
@@ -9,8 +8,7 @@
|
|
|
<p>{{ $t("studentWeb.vote.voteDes") }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
<div v-if="isHintNextItem == true" class="warmMessage">
|
|
|
<div class="messageCard previewNextItemCard animate__animated animate__fadeInDown" >
|
|
|
<h2>前往下一個活動</h2>
|
|
@@ -55,7 +53,8 @@
|
|
|
<br />
|
|
|
<EventBasicInfo />
|
|
|
|
|
|
- <div v-if="this.$store.getters.getItemTitle.isDone == false">
|
|
|
+ <div >
|
|
|
+ <!--超时-->
|
|
|
<div v-if="this.$store.getters.getItemTitle.endTime <= '2020.02.10'">
|
|
|
<br />
|
|
|
<div class="dec animate__animated animate__bounceInLeft">
|
|
@@ -63,57 +62,55 @@
|
|
|
<span class="warm-hint">{{ $t("studentWeb.vote.timeoutHint") }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="this.$store.getters.getItemTitle.endTime > '2020.02.10'">
|
|
|
- <BillBoardandLightBox />
|
|
|
-
|
|
|
- <div class="title-rect-group">
|
|
|
- <div class="title-rect" />
|
|
|
- <h2 class="title-rect-name">{{ $t("studentWeb.vote.bollotbox") }}</h2>
|
|
|
- </div>
|
|
|
- <!--和評測模組一樣-->
|
|
|
- <br />
|
|
|
- Q:{{ this.$store.getters.getItemTitle.vote.voteDes }}
|
|
|
- <br />
|
|
|
- <br />
|
|
|
- <div class="checkAnswer">
|
|
|
- <label
|
|
|
- class="testBtn"
|
|
|
- v-for="(item, index) in this.$store.getters.getItemTitle.vote.voteQA
|
|
|
- .ansDesc"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <input type="checkbox" :value="item" v-model="voteChecked" />
|
|
|
- <div class="testbg">
|
|
|
- <span>{{ index + 1 }}. {{ item }}</span>
|
|
|
- </div>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- <button class="uploadBtn" @click="submitMessage()">
|
|
|
- <svg-icon icon-class="vote" class="uploadBtn-icon" />
|
|
|
- <span v-if="isFirstVoted == false">{{ $t("studentWeb.vote.submit") }}</span>
|
|
|
- <span v-else>{{ $t("studentWeb.vote.reVote") }}</span>
|
|
|
- </button>
|
|
|
- <span
|
|
|
- class="clickbutnoChoosehint"
|
|
|
- v-if="clickbutnoChoose == true && voteChecked == ''"
|
|
|
- >請至少選一個選項,再按送出</span
|
|
|
- >
|
|
|
+ <div>
|
|
|
+ <BillBoardandLightBox :voteData="voteInfo" />
|
|
|
+ <div class="vote-title">
|
|
|
+ <div class="title-rect-group">
|
|
|
+ <div class="title-rect" />
|
|
|
+ <h2 class="title-rect-name">{{ $t("studentWeb.vote.bollotbox") }}</h2>
|
|
|
+ <p style="margin-left:15px;margin-top:2px">剩余票数 <span @click="getVote" style="font-size:16px">{{voteInfo.voteNum}}</span><span> 票</span></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--和評測模組一樣-->
|
|
|
+ <div class="question-box"><p>1.</p><span v-html="voteInfo.description"></span></div>
|
|
|
+ <div class="checkAnswer">
|
|
|
+ <label class="testBtn"
|
|
|
+ v-for="(item, index) in voteInfo.options"
|
|
|
+ :key="index">
|
|
|
+ <input type="checkbox" :value="item" v-model="voteChecked" @click="getVote(item)" />
|
|
|
+ <div class="testbg">
|
|
|
+ <div class="vote-info">
|
|
|
+ <span style="display:flex;margin-right:5px">{{item.code}}.<span v-html="item.value"></span></span>
|
|
|
+ </div>
|
|
|
+ <InputNumber v-model="item.count"
|
|
|
+ :formatter="value => `${value}票`"
|
|
|
+ :parser="value => value.replace('票', '')"
|
|
|
+ :min="1"
|
|
|
+ v-if="voteInfo.repeat"
|
|
|
+ controls-outside
|
|
|
+ >
|
|
|
+ </InputNumber>
|
|
|
+ </div>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <button class="uploadBtn" @click="submitMessage()">
|
|
|
+ <svg-icon icon-class="vote" class="uploadBtn-icon" />
|
|
|
+ <span v-if="isFirstVoted == false">{{ $t("studentWeb.vote.submit") }}</span>
|
|
|
+ <span v-else>{{ $t("studentWeb.vote.reVote") }}</span>
|
|
|
+ </button>
|
|
|
+ <span class="clickbutnoChoosehint"
|
|
|
+ v-if="clickbutnoChoose == true && voteChecked == ''">請至少選一個選項,再按送出</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div
|
|
|
- class="voteResults"
|
|
|
- v-if="this.$store.getters.getItemTitle.isDone == true"
|
|
|
- >
|
|
|
+ <!--<div class="voteResults" >
|
|
|
<br />
|
|
|
<h3 class="voteResultsMainRow ">
|
|
|
{{ $t("studentWeb.vote.voteResult") }}
|
|
|
<span class="voteResultsMainKeyWord animate__animated animate__flash">B</span>
|
|
|
</h3>
|
|
|
-
|
|
|
<br />
|
|
|
<h3>1.{{ $t("studentWeb.vote.voteDesDefault") }}</h3>
|
|
|
-
|
|
|
<br />
|
|
|
<div v-for="item in item" :key="item">
|
|
|
<div class="voteResultsItem" :class="{ voteResultSelect: item == 'B','animate__animated animate__headShake':item == 'B' }">
|
|
@@ -122,10 +119,8 @@
|
|
|
class="voteResultsIcon"
|
|
|
v-if="item == 'B'"
|
|
|
/>
|
|
|
-
|
|
|
<p>{{ item }}. {{ itemRandomDesc() }}</p>
|
|
|
</div>
|
|
|
-
|
|
|
<br />
|
|
|
</div>
|
|
|
<br />
|
|
@@ -135,7 +130,7 @@
|
|
|
</Card>
|
|
|
</div>
|
|
|
<br />
|
|
|
- </div>
|
|
|
+ </div>-->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -144,8 +139,6 @@ import EventBasicInfo from "../../EventBasicInfo";
|
|
|
import BillBoardandLightBox from "../../EventView/BillBoardandLightBox";
|
|
|
import { Random } from "mockjs";
|
|
|
import VoteResultChart from "./VoteResultChart";
|
|
|
-import mockdata from "@/api/newData";
|
|
|
-import mockdataEn from "@/api/newDataEn";
|
|
|
|
|
|
export default {
|
|
|
name: "Vote",
|
|
@@ -154,115 +147,249 @@ export default {
|
|
|
VoteResultChart,
|
|
|
BillBoardandLightBox,
|
|
|
},
|
|
|
- created() {
|
|
|
- this.WarmMessageisOpen = false;
|
|
|
- this.voteChecked = [];
|
|
|
- this.clickbutnoChoose = false;
|
|
|
- this.isFirstVoted = false;
|
|
|
- if(localStorage.getItem("lang") == ""){
|
|
|
- this.mockdata = mockdata.eventList;
|
|
|
- }
|
|
|
- if (localStorage.getItem("lang") == "tw") {
|
|
|
- this.mockdata = mockdata.eventList;
|
|
|
- } else this.mockdata = mockdataEn.eventList;
|
|
|
-
|
|
|
- },
|
|
|
+ mounted() {
|
|
|
+ this.getVoteInfo()
|
|
|
+ this.WarmMessageisOpen = false;
|
|
|
+ this.voteChecked = [];
|
|
|
+ this.clickbutnoChoose = false;
|
|
|
+ this.isFirstVoted = false;
|
|
|
+ },
|
|
|
data() {
|
|
|
- return {
|
|
|
- unhintNextItem: false,
|
|
|
- mockdata: "",
|
|
|
- nextItem: "", //存放下個活動預告
|
|
|
- isHintNextItem: false,
|
|
|
- isFirstVoted: false,
|
|
|
- item: ["A", "B", "C", "D", "E"],
|
|
|
- voteChecked: [],
|
|
|
- WarmMessageisOpen: false,
|
|
|
- clickbutnoChoose: false,
|
|
|
- };
|
|
|
- },
|
|
|
+ return {
|
|
|
+ unhintNextItem: false,
|
|
|
+ mockdata: "",
|
|
|
+ nextItem: "", //存放下個活動預告
|
|
|
+ isHintNextItem: false,
|
|
|
+ isFirstVoted: false,
|
|
|
+ item: ["A", "B", "C", "D", "E"],
|
|
|
+ voteChecked: [],
|
|
|
+ WarmMessageisOpen: false,
|
|
|
+ clickbutnoChoose: false,
|
|
|
+ voteInfo: {},
|
|
|
+ voteRes: {},
|
|
|
+ isVote: false,
|
|
|
+ value11: 1,
|
|
|
+ voteNum: 0,
|
|
|
|
|
|
- methods: {
|
|
|
- itemRandomDesc: function () {
|
|
|
- if (localStorage.getItem("lang") == "tw") {
|
|
|
- return Random.cparagraph(1, 7);
|
|
|
- } else return Random.paragraph(1, 2);
|
|
|
- },
|
|
|
- previewNext() {
|
|
|
- this.isPreviewNextItem = true;
|
|
|
- let eventPageType = ["課前預習", "評量", "作業", "投票"];
|
|
|
- let nextItems = [];
|
|
|
- for (let i = 0; i < this.mockdata.length; i++) {
|
|
|
- if (
|
|
|
- eventPageType.includes(this.mockdata[i].eventType) &&
|
|
|
- this.mockdata[i].isDone == false &&
|
|
|
- this.$store.getters.getFinishedItem.includes(
|
|
|
- this.mockdata[i].eventID
|
|
|
- ) == false
|
|
|
- ) {
|
|
|
- nextItems.push(this.mockdata[i]); //引導使用者前往下一個未完成的項目
|
|
|
- }
|
|
|
- }
|
|
|
- if (nextItems != "") {
|
|
|
- if (
|
|
|
- nextItems[0].eventName ==
|
|
|
- this.mockdata[this.mockdata.length - 1].eventName
|
|
|
- ) {
|
|
|
- console.log("沒有下一個!");
|
|
|
- this.nextItem = "allfinished";
|
|
|
- }
|
|
|
- console.log("下一個:" + nextItems[0].eventName);
|
|
|
- this.nextItem = nextItems[0];
|
|
|
- }
|
|
|
- },
|
|
|
- submitMessage() {
|
|
|
- if (this.voteChecked != "") {
|
|
|
- this.clickbutnoChoose = false;
|
|
|
- this.WarmMessageisOpen = true;
|
|
|
- this.isFirstVoted = true;
|
|
|
- this.$store.commit(
|
|
|
- "SavefinishedItemID",
|
|
|
- this.$store.getters.getItemTitle.eventID
|
|
|
- );
|
|
|
- setTimeout(() => {
|
|
|
- this.WarmMessageisOpen = false;
|
|
|
- }, 2000);
|
|
|
- this.previewNext();
|
|
|
- //加入下一個活動的提示框
|
|
|
- console.log(localStorage.getItem("hintNextItem")); //讀取是否顯示提示下一個
|
|
|
- if (localStorage.getItem("hintNextItem") != "false") {
|
|
|
- setTimeout(() => {
|
|
|
- this.isHintNextItem = true;
|
|
|
- }, 4000);
|
|
|
- }
|
|
|
- } else if (this.voteChecked == "") {
|
|
|
- this.clickbutnoChoose = true;
|
|
|
- }
|
|
|
- },
|
|
|
- cancelPreview() {
|
|
|
- this.isHintNextItem = false;
|
|
|
- },
|
|
|
- gotoNextItem() {
|
|
|
- if (this.unhintNextItem == true) {
|
|
|
- this.$store.commit("sethintNextItem", false);
|
|
|
- }
|
|
|
-
|
|
|
- if (this.nextItem != "allfinished") {
|
|
|
- this.$store.commit("ChangeItemName", this.nextItem);
|
|
|
- this.$router.push("/studentWeb/eventView#" + this.nextItem.eventID);
|
|
|
- this.$store.commit("SetisFromInfoPoptpScroll", true);
|
|
|
- //重置預習活動
|
|
|
- this.$store.commit("PassPhaseTest", 0);
|
|
|
- this.$store.commit("ChangeCurrentPhase", 0);
|
|
|
- this.$store.commit("ChangeCurrentSelectedReadingName", 1);
|
|
|
- this.$store.commit("ToggleSentCurrentphase", false);
|
|
|
- this.$store.commit("SetCurrentQuestionNo", 0);
|
|
|
- this.$store.commit("SetTrytestCount", [0, 0, 0]);
|
|
|
- this.isHintNextItem = false;
|
|
|
- } else {
|
|
|
- this.$router.push("/studentWeb/homeView");
|
|
|
- }
|
|
|
- },
|
|
|
+ };
|
|
|
},
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ //获取投票结果数据
|
|
|
+ getVoteResult() {
|
|
|
+ if (this.$store.getters.getItemTitle.id) {
|
|
|
+ this.voteRes = {}
|
|
|
+
|
|
|
+ let params = {
|
|
|
+ "id": "ff86005f-fc57-4a73-a5b7-551b45e446e7",
|
|
|
+ "code": "Vote-1595321354",
|
|
|
+ "userid": "123132123"
|
|
|
+ }
|
|
|
+ this.$api.studentWeb.getVoteResult(params).then(res => {
|
|
|
+ if (res) {
|
|
|
+ console.log('获取投票结果数据')
|
|
|
+ console.log(res)
|
|
|
+ this.voteRes = res
|
|
|
+ this.timeStatus(this.voteInfo, this.voteRes)
|
|
|
+ //this.voteInfo = res.vote
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取投票数据
|
|
|
+ getVoteInfo() {
|
|
|
+ if (this.$store.getters.getItemTitle.id) {
|
|
|
+ let params = {
|
|
|
+ "id": this.$store.getters.getItemTitle.id,
|
|
|
+ "code": this.$store.getters.getItemTitle.scode
|
|
|
+ }
|
|
|
+ this.$api.studentWeb.getVoteInfo(params).then(res => {
|
|
|
+ if (res) {
|
|
|
+ console.log('获取投票数据')
|
|
|
+ this.voteInfo = res.vote
|
|
|
+ console.log(this.voteInfo)
|
|
|
+ this.getVoteResult()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取投票结果
|
|
|
+ getVote(data) {
|
|
|
+ if (!this.voteInfo.repeat) {
|
|
|
+ this.voteChecked.length = 0
|
|
|
+ this.voteChecked.push(data)
|
|
|
+ }
|
|
|
+ console.log(this.voteChecked)
|
|
|
+ },
|
|
|
+ //获取当前时间状态
|
|
|
+ getDates(day, type) {
|
|
|
+ let zdate = new Date();
|
|
|
+ let edate;
|
|
|
+ if (type == 1) {
|
|
|
+ edate = new Date(zdate.getTime() - (day * 24 * 60 * 60 * 1000));
|
|
|
+ } else {
|
|
|
+ edate = new Date(zdate.getTime() + (day * 24 * 60 * 60 * 1000));
|
|
|
+ }
|
|
|
+ return edate;
|
|
|
+ },
|
|
|
+ //投票活动的时间状态 data投票活动信息 time 已投票数据
|
|
|
+ timeStatus(data, time) {
|
|
|
+ console.log(data,time)
|
|
|
+ let date = (new Date()).getTime() //当前时间
|
|
|
+ let status = false //判断时间是否过期或处于当前时间段
|
|
|
+ //处于活动时间内
|
|
|
+ let inDate = new Date(date)
|
|
|
+ let year = inDate.getFullYear()
|
|
|
+ let month = inDate.getMonth()
|
|
|
+ console.log('时间判定测试')
|
|
|
+ if (data.startTime <= date <= data.endTime && time.records.length > 0) {
|
|
|
+ switch (data.times) {
|
|
|
+ case 'day':
|
|
|
+ let daySart = new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime()
|
|
|
+ let dayEnd = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).getTime()
|
|
|
+ if (daySart <= date <= dayEnd) {
|
|
|
+ console.log('day')
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ //是否为本周
|
|
|
+ case 'week':
|
|
|
+ let curWeek = date.getDay(); //获取当前星期几
|
|
|
+ let monday = this.getDates((curWeek), 1).getTime(); //计算出星期一
|
|
|
+ let sunday = this.getDates((7 - curWeek), 2).getTime(); //计算出星期天
|
|
|
+ if (monday <= date <= sunday) {
|
|
|
+ status = true
|
|
|
+ console.log('week')
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ //是否为本月
|
|
|
+ case 'month':
|
|
|
+ let firstDay = new Date(year, month, 1).getTime()
|
|
|
+ let lastDay = new Date(year, month + 1, 1).getTime() - 1
|
|
|
+ if (firstDay <= date <= lastDay) {
|
|
|
+ console.log('month')
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'year':
|
|
|
+ let firstYear = new Date(year,0,1).getTime()
|
|
|
+ let lastYear = new Date(year + 1, 0, 0).getTime()
|
|
|
+ if (firstYear <= date <= lastYear) {
|
|
|
+ console.log('year')
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ status = false
|
|
|
+ return status
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemRandomDesc: function () {
|
|
|
+ if (localStorage.getItem("lang") == "tw") {
|
|
|
+ return Random.cparagraph(1, 7);
|
|
|
+ } else return Random.paragraph(1, 2);
|
|
|
+ },
|
|
|
+ previewNext() {
|
|
|
+ this.isPreviewNextItem = true;
|
|
|
+ let eventPageType = ["課前預習", "評量", "作業", "投票"];
|
|
|
+ let nextItems = [];
|
|
|
+ for (let i = 0; i < this.mockdata.length; i++) {
|
|
|
+ if (
|
|
|
+ eventPageType.includes(this.mockdata[i].eventType) &&
|
|
|
+ this.mockdata[i].isDone == false &&
|
|
|
+ this.$store.getters.getFinishedItem.includes(
|
|
|
+ this.mockdata[i].eventID
|
|
|
+ ) == false
|
|
|
+ ) {
|
|
|
+ nextItems.push(this.mockdata[i]); //引導使用者前往下一個未完成的項目
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (nextItems != "") {
|
|
|
+ if (
|
|
|
+ nextItems[0].eventName ==
|
|
|
+ this.mockdata[this.mockdata.length - 1].eventName
|
|
|
+ ) {
|
|
|
+ console.log("沒有下一個!");
|
|
|
+ this.nextItem = "allfinished";
|
|
|
+ }
|
|
|
+ console.log("下一個:" + nextItems[0].eventName);
|
|
|
+ this.nextItem = nextItems[0];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ submitMessage() {
|
|
|
+ if (this.voteChecked != "") {
|
|
|
+ this.clickbutnoChoose = false;
|
|
|
+ this.WarmMessageisOpen = true;
|
|
|
+ this.isFirstVoted = true;
|
|
|
+ this.$store.commit(
|
|
|
+ "SavefinishedItemID",
|
|
|
+ this.$store.getters.getItemTitle.eventID
|
|
|
+ );
|
|
|
+ setTimeout(() => {
|
|
|
+ this.WarmMessageisOpen = false;
|
|
|
+ }, 2000);
|
|
|
+ this.previewNext();
|
|
|
+ //加入下一個活動的提示框
|
|
|
+ console.log(localStorage.getItem("hintNextItem")); //讀取是否顯示提示下一個
|
|
|
+ if (localStorage.getItem("hintNextItem") != "false") {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isHintNextItem = true;
|
|
|
+ }, 4000);
|
|
|
+ }
|
|
|
+ } else if (this.voteChecked == "") {
|
|
|
+ this.clickbutnoChoose = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cancelPreview() {
|
|
|
+ this.isHintNextItem = false;
|
|
|
+ },
|
|
|
+ gotoNextItem() {
|
|
|
+ if (this.unhintNextItem == true) {
|
|
|
+ this.$store.commit("sethintNextItem", false);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.nextItem != "allfinished") {
|
|
|
+ this.$store.commit("ChangeItemName", this.nextItem);
|
|
|
+ this.$router.push("/studentWeb/eventView#" + this.nextItem.eventID);
|
|
|
+ this.$store.commit("SetisFromInfoPoptpScroll", true);
|
|
|
+ //重置預習活動
|
|
|
+ this.$store.commit("PassPhaseTest", 0);
|
|
|
+ this.$store.commit("ChangeCurrentPhase", 0);
|
|
|
+ this.$store.commit("ChangeCurrentSelectedReadingName", 1);
|
|
|
+ this.$store.commit("ToggleSentCurrentphase", false);
|
|
|
+ this.$store.commit("SetCurrentQuestionNo", 0);
|
|
|
+ this.$store.commit("SetTrytestCount", [0, 0, 0]);
|
|
|
+ this.isHintNextItem = false;
|
|
|
+ } else {
|
|
|
+ this.$router.push("/studentWeb/homeView");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ listData() {
|
|
|
+ return this.$store.getters.getItemTitle.id;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route: {
|
|
|
+ handler() {
|
|
|
+ this.isExamDown = false
|
|
|
+ this.voteInfo = {}
|
|
|
+ this.getVoteInfo()
|
|
|
+ },
|
|
|
+ // 深度观察监听
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
+ listData: {
|
|
|
+ handler() {
|
|
|
+ if (this.$store.getters.getItemTitle.id !== '') {
|
|
|
+ console.log('88888888888')
|
|
|
+ this.getVoteInfo()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 深度观察监听
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|