fix -- bug

src/views/ballot/BallotPage.vue

@@ -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">
-                  {{
+                  {{ dataInfo.numberOfInvolved || "-" }}
-                    state.dataInfo.numberOfInvolved ||
-                    state.dataInfo.numberOfInvolved == 0
-                      ? state.dataInfo.numberOfInvolved
-                      : "-"
-                  }}
                 </div>
                 <div class="item2">参与数</div>
               </div>
               <div class="item allbox2">
                 <div class="item1" style="color: #387df7">
-                  {{
+                  {{ dataInfo.votesTotal || "-" }}
-                    state.dataInfo.votesTotal || state.dataInfo.votesTotal == 0
-                      ? state.dataInfo.votesTotal
-                      : "-"
-                  }}
                 </div>
                 <div class="item2">总票数</div>
               </div>
               <div class="item allbox3">
                 <div class="item1" style="color: #00c6ff">
-                  {{
+                  {{ dataInfo.numberOfBrowse || "-" }}
-                    state.dataInfo.numberOfBrowse ||
-                    state.dataInfo.numberOfBrowse == 0
-                      ? state.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
+                      <label @click="choiceQuestion(item,value)">
-                        @click="
+                        <div class="radio-img">
-                          choiceQuestion(key, value.id, state.dataInfo, index)
+                          <div
-                        "
+                            v-if="value.isAnswer"
-                      >
+                            style="
-                        <!-- <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>
+                          <div
-                        <div
+                            v-else
-                          v-else
+                            style="
-                          style="
                             width: 10px;
                             height: 10px;
                             background: #fff;
                             position: relative;
                             left: 15px;
                             border-radius: 10px;
-                          "
+                          "></div>
-                        ></div>
+                          <div class="option"></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="{
+                :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)">
-                  background:
+                {{ dataInfo.isSubmit ? "已提交" : "提交" }}
-                    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>
@@ -188,29 +156,13 @@
             </div>
             <div class="timebox clearfix">
               <div class="innertime">
-                {{
+                {{dataInfo?.voteStartTime }}&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;{{dataInfo?.voteEndTime }}
-                  state.dataInfo?.voteStartTime
-                }}&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;{{
-                  state.dataInfo?.voteEndTime
-                }}
               </div>
               <div class="endtime clearfix">
                 <div class="endtimetext">
                   距离结束还有&nbsp;&nbsp;
                   <span class="te">{{
-                    parseInt(
+                      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>
-                      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>
               </div>
             </div>
             <div class="righttitle">
@@ -224,35 +176,24 @@
             <div class="explain clearfix">
               <div
                 class="explaincontent"
-                v-html="
+                v-html="dataInfo?.voteExplain||'暂无说明'"></div>
-                  state.dataInfo?.voteExplain
-                    ? state.dataInfo?.voteExplain
-                    : '暂无说明'
-                "
-              ></div>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <!-- 详细信息 -->
   </div>
 </template>
 <script setup>
-import { useRequest, request } from "@/api/request";
+import {useRequest} from "@/api/request";
-import { VOTE_DETAIL2, VOTE_DETAIL3, VOTE_DETAIL_SUBMIT } from "@/api/api";
+import {VOTE_DETAIL3, VOTE_DETAIL_SUBMIT} from "@/api/api";
 import dayjs from "dayjs";
 import store from "@/store";
-import { ElMessage } from "element-plus";
+import {ElMessage} from "element-plus";
-import { useRoute, useRouter } from "vue-router/dist/vue-router";
+import {useRoute, useRouter} from "vue-router/dist/vue-router";
-import { computed, reactive, toRefs } from "vue";
+import {computed} from "vue";
-import { useTaskPage } from "@/api/useCommon";
+import {useTaskPage} from "@/api/useCommon";
-// const { data } = useRequest(TASK_VOTE_DETAIL, {});
+
-// console.log("datadatadata", data);
-// const state = reactive({
-//   votedetail: null,
-// });
-// let { votedetail } = toRefs(state);
 const {
   query: { courseId, pName, sName, chapterOrStageId, infoId, id, btype },
 } = useRoute();
@@ -261,135 +202,49 @@ const router = useRouter();
 const returnclick = () => {
   router.back();
 };
-const state = reactive({
+const { data: dataInfo } = useRequest(VOTE_DETAIL3(courseId), {});
-  dataInfo: {},
-});
-//获取基本信息
-// const {data: dataInfo} = useRequest(VOTE_DETAIL2(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) => {
+const choiceQuestion = (item, value) => {
-  // 当已经提交过时候 不让选择题目
+  if (dataInfo.value.isSubmit) {
-  if (state.dataInfo.isSubmit) {
     return;
   }
-  console.log("当前选择题目的id及序号", order, id, dates, torder);
+  item.optionDetailList?.forEach(t => t.isAnswer = false);
-  console.log("state.dataInfo", state.dataInfo);
+  value.isAnswer = true;
-  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;
 };
 // 提交投票
 const submitVote = () => {
-  console.log(state.dataInfo);
   let nowTime = new Date().getTime();
-  let maxTime = new Date(state.dataInfo.voteEndTime).getTime();
+  let maxTime = new Date(dataInfo.value.voteEndTime).getTime();
-  let minTime = new Date(state.dataInfo.voteStartTime).getTime();
+  let minTime = new Date(dataInfo.value.voteStartTime).getTime();
-  console.log(nowTime, maxTime, minTime);
   // 当未到开始时间
   if (nowTime < minTime || nowTime > maxTime) {
     ElMessage.error("未到投票开始时间");
     return;
   }
   // 当已经提交过时候 不让提交即可
-  if (state.dataInfo.isSubmit) {
+  if (dataInfo.value.isSubmit) {
     return;
   }
-  let isSubmit = true;
+  if (dataInfo.value.voteStemDtoList.some(t => t.optionDetailList.every(s => !s.isAnswer))) {
-  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) {
     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,
+    voteId: dataInfo.value.id,
-    voteName: state.dataInfo.voteName,
+    voteName: dataInfo.value.voteName,
   };
-
+  useRequest(VOTE_DETAIL_SUBMIT, obj);
-  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)
-    // });
-  });
 };
 </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,
+                0deg,
-              rgba(160, 193, 230, 0) 0%,
+                rgba(160, 193, 230, 0) 0%,
-              rgba(161, 195, 231, 0.2) 100%
+                rgba(161, 195, 231, 0.2) 100%
             );
           }
+
           .allbox2 {
             margin-right: 22px;
             background: linear-gradient(
-              0deg,
+                0deg,
-              rgba(177, 219, 229, 0) 0%,
+                rgba(177, 219, 229, 0) 0%,
-              rgba(172, 216, 227, 0.2) 100%
+                rgba(172, 216, 227, 0.2) 100%
             );
           }
+
           .allbox3 {
             background: linear-gradient(
-              0deg,
+                0deg,
-              rgba(195, 209, 234, 0) 0%,
+                rgba(195, 209, 234, 0) 0%,
-              rgba(191, 206, 231, 0.2) 100%
+                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;
+            text-align: center;
-            align-items: 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;
+              align-self: center;
-              margin-left: 10px;
+              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;