feat:合并

src/views/ballot/BallotPage.vue

@@ -8,20 +8,26 @@
       <div style="margin-left: 6px; margin-right: 6px">/</div>
       <div style="font-weight: 700; font-size: 16px">投票详情</div>
       <div class="preNext">
-		   <span @click="prevPage" v-if="hasPrev">
+        <span @click="prevPage" v-if="hasPrev">
           <button class="btn btn01"></button>
           <span class="content" style="margin-left: 6px">上一个</span>
-       </span>
+        </span>
         <span @click="nextPage" v-if="hasNext">
           <span class="content" style="margin-left: 31px">下一个</span>
           <button class="btn btn02" style="margin-left: 6px"></button>
         </span>
       </div>
-<div class="return">
-				<div style="display: flex" @click="returnclick">
-          <el-button style="color:#0073FB">	<img class="img2" style="margin-right:11px;cursor: pointer;" src="../../assets/image/return.png" />返回</el-button>
-				</div>
-			</div>
+      <div class="return">
+        <div style="display: flex" @click="returnclick">
+          <el-button style="color: #0073fb">
+            <img
+              class="img2"
+              style="margin-right: 11px; cursor: pointer"
+              src="../../assets/image/return.png"
+            />返回</el-button
+          >
+        </div>
+      </div>
     </div>
     <!-- 面包屑导航 -->
     <div class="debateTitle">【投票】{{ state.dataInfo?.voteName }}</div>
@@ -32,8 +38,8 @@
           <div class="left">
             <div class="title">
               <img
-                  style="width: 20px; height: 20px"
-                  src="../../assets/image/yuan.png"
+                style="width: 20px; height: 20px"
+                src="../../assets/image/yuan.png"
               />
               <div class="text">参与情况</div>
               <div class="box"></div>
@@ -43,9 +49,10 @@
               <div class="item allbox1">
                 <div class="item1" style="color: #089dff">
                   {{
-                    state.dataInfo.numberOfInvolved || state.dataInfo.numberOfInvolved == 0
-                        ? state.dataInfo.numberOfInvolved
-                        : "-"
+                    state.dataInfo.numberOfInvolved ||
+                    state.dataInfo.numberOfInvolved == 0
+                      ? state.dataInfo.numberOfInvolved
+                      : "-"
                   }}
                 </div>
                 <div class="item2">参与数</div>
@@ -54,8 +61,8 @@
                 <div class="item1" style="color: #387df7">
                   {{
                     state.dataInfo.votesTotal || state.dataInfo.votesTotal == 0
-                        ? state.dataInfo.votesTotal
-                        : "-"
+                      ? state.dataInfo.votesTotal
+                      : "-"
                   }}
                 </div>
                 <div class="item2">总票数</div>
@@ -63,9 +70,10 @@
               <div class="item allbox3">
                 <div class="item1" style="color: #00c6ff">
                   {{
-                    state.dataInfo.numberOfBrowse || state.dataInfo.numberOfBrowse == 0
-                        ? state.dataInfo.numberOfBrowse
-                        : "-"
+                    state.dataInfo.numberOfBrowse ||
+                    state.dataInfo.numberOfBrowse == 0
+                      ? state.dataInfo.numberOfBrowse
+                      : "-"
                   }}
                 </div>
                 <div class="item2">浏览数</div>
@@ -74,8 +82,8 @@
 
             <div class="title">
               <img
-                  style="width: 20px; height: 20px"
-                  src="../../assets/image/yuan.png"
+                style="width: 20px; height: 20px"
+                src="../../assets/image/yuan.png"
               />
               <div class="text">参与投票</div>
               <div class="box"></div>
@@ -83,31 +91,58 @@
 
             <div class="join">
               <div
-                  v-for="(item, index) in state.dataInfo.voteStemDtoList"
-                  :key="index"
-                  style="margin-bottom: 41px"
+                v-for="(item, index) in state.dataInfo?.voteStemDtoList"
+                :key="index"
+                style="margin-bottom: 41px"
               >
                 <div class="stem">
-                  <div>{{ item.orderNumber }}、</div>
+                  <div>{{ index + 1 }}、</div>
                   <div>{{ item.voteStemName }}</div>
                 </div>
                 <div class="options">
                   <div
-                      v-for="(value, key) in item.optionDetailList"
-                      :key="key"
-                      style="
+                    v-for="(value, key) in item.optionDetailList"
+                    :key="key"
+                    style="
                       width: 140px;
                       margin-right: 114px;
-                      margin-bottom: 25px;">
-                    <!-- <img
-                        style="width: 140px; height: 140px; border-radius: 8px"
-                        :src="value.optionPictureAddress"
-                    /> -->
+                      margin-bottom: 25px;
+                    "
+                  >
+                    <img
+                      v-if="value.optionPictureAddress"
+                      style="width: 140px; height: 140px; border-radius: 8px"
+                      :src="value.optionPictureAddress"
+                    />
                     <div class="radio">
-                      <label @click="choiceQuestion(key,value.optionId,state.dataInfo,index)">
+                      <label
+                        @click="
+                          choiceQuestion(key, value.id, state.dataInfo, index)
+                        "
+                      >
                         <!-- <input type="radio" name="one" value="right"/> -->
-                        <div v-if="value.isAnswer" style="width:10px;height:10px;background:#4a9cf8;position:relative;left:15px;border-radius:10px;"></div>
-                        <div v-else style="width:10px;height:10px;background:#fff;position:relative;left:15px;border-radius:10px;"></div>
+                        <div
+                          v-if="value.isAnswer"
+                          style="
+                            width: 10px;
+                            height: 10px;
+                            background: #4a9cf8;
+                            position: relative;
+                            left: 15px;
+                            border-radius: 10px;
+                          "
+                        ></div>
+                        <div
+                          v-else
+                          style="
+                            width: 10px;
+                            height: 10px;
+                            background: #fff;
+                            position: relative;
+                            left: 15px;
+                            border-radius: 10px;
+                          "
+                        ></div>
                         <div class="option"></div>
                         <div class="opt-text">{{ value.optionName }}</div>
                       </label>
@@ -117,23 +152,37 @@
               </div>
             </div>
             <div
-                style="width: 100%;
+              style="
+                width: 100%;
                 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?'已提交':'提交'}}
+                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 ? "已提交" : "提交" }}
               </button>
             </div>
           </div>
           <div class="right">
             <div class="righttitle">
               <img
-                  style="width: 20px; height: 20px"
-                  src="../../assets/image/yuan.png"
+                style="width: 20px; height: 20px"
+                src="../../assets/image/yuan.png"
               />
               <div class="text">投票时间</div>
               <div class="box"></div>
@@ -150,21 +199,25 @@
                 <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
+                    parseInt(
+                      dayjs(state.dataInfo?.voteEndTime).diff(
+                        dayjs(),
+                        "minute"
+                      ) / 60
+                    )
                   }}</span
-                >&nbsp;&nbsp;分钟
+                  >&nbsp;&nbsp; 小时&nbsp;&nbsp;<span class="te">{{
+                    dayjs(state.dataInfo?.voteEndTime).diff(dayjs(), "minute") %
+                    60
+                  }}</span
+                  >&nbsp;&nbsp;分钟
                 </div>
               </div>
             </div>
             <div class="righttitle">
               <img
-                  style="width: 20px; height: 20px"
-                  src="../../assets/image/yuan.png"
+                style="width: 20px; height: 20px"
+                src="../../assets/image/yuan.png"
               />
 
               <div class="text">投票说明</div>
@@ -172,9 +225,11 @@
             </div>
             <div class="explain clearfix">
               <div
-                  class="explaincontent"
-                  v-html="
-                  state.dataInfo?.voteExplain ? state.dataInfo?.voteExplain : '暂无说明'
+                class="explaincontent"
+                v-html="
+                  state.dataInfo?.voteExplain
+                    ? state.dataInfo?.voteExplain
+                    : '暂无说明'
                 "
               ></div>
             </div>
@@ -187,18 +242,14 @@
 </template>
 
 <script setup>
-import {useRequest,request} from "@/api/request";
-import {
-  VOTE_DETAIL2,
-  VOTE_DETAIL3,
-  VOTE_DETAIL_SUBMIT
-} from "@/api/api";
+import { useRequest, request } from "@/api/request";
+import { VOTE_DETAIL2, 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";
+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({
@@ -206,12 +257,12 @@ import {useTaskPage} from "@/api/useCommon";
 // });
 // let { votedetail } = toRefs(state);
 const {
-  query: {courseId, pName, sName, chapterOrStageId, infoId, id, btype},
+  query: { courseId, pName, sName, chapterOrStageId, infoId, id, btype },
 } = useRoute();
-const {nextPage,prevPage,hasPrev, hasNext} = useTaskPage()
+const { nextPage, prevPage, hasPrev, hasNext } = useTaskPage();
 const router = useRouter();
 const returnclick = () => {
-	router.back();
+  router.back();
 };
 const state = reactive({
   dataInfo: {},
@@ -222,107 +273,124 @@ const state = reactive({
 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)
+  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)
+console.log("我是获取的投票基本信息", state.dataInfo);
 
 // 答题时间
-const answerTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
+const answerTime = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
 
 // 选择题目
 const choiceQuestion = (order, id, dates, torder) => {
   // 当已经提交过时候 不让选择题目
-  if(state.dataInfo.isSubmit){
-    return
+  if (state.dataInfo.isSubmit) {
+    return;
   }
-  console.log('当前选择题目的id及序号', order, id, dates,torder)
-  for(let i=0;i<dates.ballotVo.voteStemVoList[torder].optionDetailList.length;i++){
-    dates.ballotVo.voteStemVoList[torder].optionDetailList[i].isAnswer = false;
+  console.log("当前选择题目的id及序号", order, id, dates, torder);
+  for (
+    let i = 0;
+    i < dates.voteStemDtoList[torder].optionDetailList.length;
+    i++
+  ) {
+    dates.voteStemDtoList[torder].optionDetailList[i].isAnswer = false;
   }
-  dates.ballotVo.voteStemVoList[torder].optionDetailList[order].isAnswer = true;
-  console.log(state.dataInfo)
-}
+  dates.voteStemDtoList[torder].optionDetailList[order].isAnswer = true;
+  console.log(state.dataInfo);
+};
 
 // 提交投票
 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(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)
+  console.log(nowTime, maxTime, minTime);
   // 当未到开始时间
-  if(nowTime < minTime || nowTime > maxTime) {
-    ElMessage.error("未到投票开始时间")
-    return
+  if (nowTime < minTime || nowTime > maxTime) {
+    ElMessage.error("未到投票开始时间");
+    return;
   }
 
   // 当已经提交过时候 不让提交即可
-  if(state.dataInfo.isSubmit){
-    return
+  if (state.dataInfo.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
+  let isSubArr = [];
+  console.log("state.dataInfo", state.dataInfo);
+  if (state.dataInfo) {
+    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
+
+  for (let i = 0; i < isSubArr.length; i++) {
+    if (isSubArr[i] == false) {
+      isSubmit = false;
     }
   }
-  
-  if(isSubmit==false){
-    ElMessage.error("请选择投票问题后进行提交")
-    return
-  } 
+
+  if (isSubmit == false) {
+    ElMessage.error("请选择投票问题后进行提交");
+    return;
+  }
 
   let obj = {
-    "beginTime": answerTime,
-    "chapterOrStageId": chapterOrStageId ? chapterOrStageId : 0,
-    "result": JSON.stringify(state.dataInfo),
-    "targetId": infoId, // 项目 路径图 id
-    "taskId": id,
-    "type": btype, // 1 项目  2 路径图
-    "voteId": state.dataInfo.voteId
-  }
-  
-  console.log('我是投票提交的信息', obj)
+    beginTime: answerTime,
+    chapterOrStageId: chapterOrStageId ? chapterOrStageId : 0,
+    result: JSON.stringify(state.dataInfo),
+    targetId: infoId, // 项目 路径图 id
+    taskId: id,
+    type: btype, // 1 项目  2 路径图
+    voteId: state.dataInfo.voteId,
+  };
 
-  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, { 
+  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,
@@ -336,7 +404,7 @@ const submitVote = () => {
     // }).catch(err=>{
     //   console.log(err)
     // });
-  })
+  });
 };
 </script>
 
@@ -357,14 +425,14 @@ const submitVote = () => {
     line-height: 24px;
     position: relative;
   }
-  .return{
+  .return {
     position: absolute;
     right: 10%;
-    .text{
+    .text {
       text-align: center;
-     display: flex;
-     flex-direction: row;
-     align-items: center;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
     }
   }
   .preNext {
@@ -546,26 +614,26 @@ const submitVote = () => {
           .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%
             );
           }