修改竞猜

src/components/quiz/modal.vue

@@ -14,7 +14,9 @@
           <view class="w-170rpx text-center">VS</view>
           <view class="flex-1 flex-center">{{ gameInfo.away }}</view>
         </view>
-
+        <view
+          :class="[successGuessClass, readonly ? 'pointer-events-none' : '']"
+        >
           <template v-if="gameInfo.score_type == 1">
             <view class="guess-table">
               <view class="row herder-title">
@@ -26,31 +28,46 @@
                   <view class="row-1 col-10">
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '1:0' }"
+                      :class="{
+                        'result-active': gameScore === '1:0',
+                        active: userGuess === '1:0',
+                      }"
                       @click="userGuessChange('1:0')"
                       >1:0</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '2:0' }"
+                      :class="{
+                        'result-active': gameScore === '2:0',
+                        active: userGuess === '2:0',
+                      }"
                       @click="userGuessChange('2:0')"
                       >2:0</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '2:1' }"
+                      :class="{
+                        'result-active': gameScore === '2:1',
+                        active: userGuess === '2:1',
+                      }"
                       @click="userGuessChange('2:1')"
                       >2:1</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '3:0' }"
+                      :class="{
+                        'result-active': gameScore === '3:0',
+                        active: userGuess === '3:0',
+                      }"
                       @click="userGuessChange('3:0')"
                       >3:0</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '3:1' }"
+                      :class="{
+                        'result-active': gameScore === '3:1',
+                        active: userGuess === '3:1',
+                      }"
                       @click="userGuessChange('3:1')"
                       >3:1</view
                     >
@@ -58,31 +75,46 @@
                   <view class="row-1 col-10">
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '3:2' }"
+                      :class="{
+                        'result-active': gameScore === '3:2',
+                        active: userGuess === '3:2',
+                      }"
                       @click="userGuessChange('3:2')"
                       >3:2</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '4:0' }"
+                      :class="{
+                        'result-active': gameScore === '4:0',
+                        active: userGuess === '4:0',
+                      }"
                       @click="userGuessChange('4:0')"
                       >4:0</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '4:1' }"
+                      :class="{
+                        'result-active': gameScore === '4:1',
+                        active: userGuess === '4:1',
+                      }"
                       @click="userGuessChange('4:1')"
                       >4:1</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '4:2' }"
+                      :class="{
+                        'result-active': gameScore === '4:2',
+                        active: userGuess === '4:2',
+                      }"
                       @click="userGuessChange('4:2')"
                       >4:2</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '5:0' }"
+                      :class="{
+                        'result-active': gameScore === '5:0',
+                        active: userGuess === '5:0',
+                      }"
                       @click="userGuessChange('5:0')"
                       >5:0</view
                     >
@@ -90,19 +122,28 @@
                   <view class="row-1 col-10">
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '5:1' }"
+                      :class="{
+                        'result-active': gameScore === '5:1',
+                        active: userGuess === '5:1',
+                      }"
                       @click="userGuessChange('5:1')"
                       >5:1</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '5:2' }"
+                      :class="{
+                        'result-active': gameScore === '5:2',
+                        active: userGuess === '5:2',
+                      }"
                       @click="userGuessChange('5:2')"
                       >5:2</view
                     >
                     <view
                       class="table-td col-6"
-                    :class="{ active: userGuess === '胜其他' }"
+                      :class="{
+                        'result-active': gameScore === '胜其他',
+                        active: userGuess === '胜其他',
+                      }"
                       @click="userGuessChange('胜其他')"
                       >胜其他</view
                     >
@@ -115,31 +156,46 @@
                   <view class="row-1 col-10">
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '0:0' }"
+                      :class="{
+                        'result-active': gameScore === '0:0',
+                        active: userGuess === '0:0',
+                      }"
                       @click="userGuessChange('0:0')"
                       >0:0</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '1:1' }"
+                      :class="{
+                        'result-active': gameScore === '1:1',
+                        active: userGuess === '1:1',
+                      }"
                       @click="userGuessChange('1:1')"
                       >1:1</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '2:2' }"
+                      :class="{
+                        'result-active': gameScore === '2:2',
+                        active: userGuess === '2:2',
+                      }"
                       @click="userGuessChange('2:2')"
                       >2:2</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '3:3' }"
+                      :class="{
+                        'result-active': gameScore === '3:3',
+                        active: userGuess === '3:3',
+                      }"
                       @click="userGuessChange('3:3')"
                       >3:3</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '平其他' }"
+                      :class="{
+                        'result-active': gameScore === '平其他',
+                        active: userGuess === '平其他',
+                      }"
                       @click="userGuessChange('平其他')"
                       >平其他</view
                     >
@@ -152,31 +208,46 @@
                   <view class="row-1 col-10">
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '0:1' }"
+                      :class="{
+                        'result-active': gameScore === '0:1',
+                        active: userGuess === '0:1',
+                      }"
                       @click="userGuessChange('0:1')"
                       >0:1</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '0:2' }"
+                      :class="{
+                        'result-active': gameScore === '0:2',
+                        active: userGuess === '0:2',
+                      }"
                       @click="userGuessChange('0:2')"
                       >0:2</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '0:3' }"
+                      :class="{
+                        'result-active': gameScore === '0:3',
+                        active: userGuess === '0:3',
+                      }"
                       @click="userGuessChange('0:3')"
                       >0:3</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '0:4' }"
+                      :class="{
+                        'result-active': gameScore === '0:4',
+                        active: userGuess === '0:4',
+                      }"
                       @click="userGuessChange('0:4')"
                       >0:4</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '0:5' }"
+                      :class="{
+                        'result-active': gameScore === '0:5',
+                        active: userGuess === '0:5',
+                      }"
                       @click="userGuessChange('0:5')"
                       >0:5</view
                     >
@@ -184,31 +255,46 @@
                   <view class="row-1 col-10">
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '1:2' }"
+                      :class="{
+                        'result-active': gameScore === '1:2',
+                        active: userGuess === '1:2',
+                      }"
                       @click="userGuessChange('1:2')"
                       >1:2</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '1:3' }"
+                      :class="{
+                        'result-active': gameScore === '1:3',
+                        active: userGuess === '1:3',
+                      }"
                       @click="userGuessChange('1:3')"
                       >1:3</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '1:4' }"
+                      :class="{
+                        'result-active': gameScore === '1:4',
+                        active: userGuess === '1:4',
+                      }"
                       @click="userGuessChange('1:4')"
                       >1:4</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '1:5' }"
+                      :class="{
+                        'result-active': gameScore === '1:5',
+                        active: userGuess === '1:5',
+                      }"
                       @click="userGuessChange('1:5')"
                       >1:5</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '2:3' }"
+                      :class="{
+                        'result-active': gameScore === '2:3',
+                        active: userGuess === '2:3',
+                      }"
                       @click="userGuessChange('2:3')"
                       >2:3</view
                     >
@@ -216,19 +302,28 @@
                   <view class="row-1 col-10">
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '2:4' }"
+                      :class="{
+                        'result-active': gameScore === '2:4',
+                        active: userGuess === '2:4',
+                      }"
                       @click="userGuessChange('2:4')"
                       >2:4</view
                     >
                     <view
                       class="table-td col-2"
-                    :class="{ active: userGuess === '2:5' }"
+                      :class="{
+                        'result-active': gameScore === '2:5',
+                        active: userGuess === '2:5',
+                      }"
                       @click="userGuessChange('2:5')"
                       >2:5</view
                     >
                     <view
                       class="table-td col-6"
-                    :class="{ active: userGuess === '负其他' }"
+                      :class="{
+                        'result-active': gameScore === '负其他',
+                        active: userGuess === '负其他',
+                      }"
                       @click="userGuessChange('负其他')"
                       >负其他</view
                     >
@@ -258,13 +353,15 @@
                 ></up-avatar>
               </view>
             </view>
-          <view class="w-full type2" :class="successGuessClass">
+            <view class="w-full type2 mt-20px">
-          
+              <view
-            <view class="h-34px flex bg-hex-eeeeef rounded-4px text-hex-303133">
+                class="h-34px flex bg-hex-eeeeef rounded-4px text-hex-303133"
+              >
                 <view
                   v-for="item in subsectionList"
                   :key="item"
                   :class="{
+                    'active-a': gameScore === item,
                     active: userGuess === item,
                   }"
                   @click="userGuessChange(item)"
@@ -275,6 +372,7 @@
               </view>
             </view>
           </template>
+        </view>
 
         <view class="guess-btns" v-if="!readonly">
           <up-button
@@ -308,7 +406,7 @@
   </up-modal>
 </template>
 <script setup>
-import { computed } from 'vue';
+import { computed } from 'vue'
 import { ref, watch, watchEffect } from 'vue'
 const props = defineProps({
   show: {
@@ -322,7 +420,7 @@ const props = defineProps({
   showResult: {
     type: Boolean,
     default: false,
-  }
+  },
 })
 
 const showGuessModalVisible = ref(props.show)
@@ -334,20 +432,31 @@ const readonly = computed(()=>{
   }
   return false
 })
+const gameScore = computed(() => props.gameInfo?.game_score)
+// const gameScore = computed(() => '负')
 const isGuess = computed(() => !!props.gameInfo?.has_guess)
-const successGuess = computed(()=>props.gameInfo?.game_score === props.gameInfo?.has_guess)
+const isResult = computed(() => !!props.gameInfo?.game_score)
+const successGuess = computed(
+  () => gameScore.value === props.gameInfo?.has_guess
+)
 const successGuessClass = computed(() => {
-  if(isGuess.value){
+  if (!isGuess.value) {
+    return ''
+  }
+  if (!isResult.value) {
     return ''
   }
   return successGuess.value ? 'success' : 'fail'
 })
 
-watchEffect(() => {
+watchEffect(
+  () => {
     userGuess.value = props.gameInfo?.has_guess || ''
-},{
+  },
-  deep: true
+  {
-})
+    deep: true,
+  }
+)
 
 watchEffect(() => {
   showGuessModalVisible.value = props.show
@@ -363,7 +472,14 @@ const hideGuessModal = () => {
   emit('hideGuessModal')
 }
 const submitGuessResult = () => {
-  emit('submitGuessResult')
+  if (userGuess.value === '' || !userGuess.value) {
+    return uni.showToast({
+      title: '请选择竞猜结果',
+      icon: 'none',
+    })
+  }
+
+  emit('submitGuessResult', userGuess.value)
 }
 const userGuessChange = (score) => {
   userGuess.value = score
@@ -392,10 +508,14 @@ watch(
 
 .fail {
   .active {
-    background-color: #bbb !important;
+    background-color: #1d2b5c !important;
     color: white;
   }
 }
+.active-a {
+  background-color: red !important;
+  color: white;
+}
 
 .guess-model {
   .slot-content {
@@ -426,6 +546,11 @@ watch(
       width: 48px !important;
     }
 
+    .table-td.result-active {
+      background-color: red;
+      color: #fff;
+    }
+
     .table-td.active {
       background-color: #1d2b5c;
       color: #fff;

src/packages/pages/activeDetail/activeDetail.vue

@@ -236,372 +236,20 @@
           <view class="content">{{ ruleContent }}</view>
         </view>
       </up-modal>
-
-      <view class="guess-model" v-if="gameInfo && isDetailPage">
-        <up-modal
-          :show="showGuessModalVisible"
-          :width="335"
-          :closeOnClickOverlay="true"
-          :showConfirmButton="false"
-          :showCancelButton="false"
-          @close="hideGuessModal"
-        >
-          <view class="slot-content">
-            <view class="guess-title">
-              <view>{{ gameInfo.home_field }}</view>
-              <view>VS</view>
-              <view>{{ gameInfo.away }}</view>
-            </view>
-
-            <view class="guess-table">
-              <view class="row herder-title">
-                <view class="table-td col-12">单</view>
-              </view>
-              <view class="table-tr row row-3">
-                <view class="row-title table-td row-3 col-10">胜</view>
-                <view class="row-content">
-                  <view class="row-1 col-10">
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '1:0',
-                        active: userGuess === '1:0',
-                      }"
-                      @click="userGuessChange('1:0')"
-                      >1:0</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '2:0',
-                        active: userGuess === '2:0',
-                      }"
-                      @click="userGuessChange('2:0')"
-                      >2:0</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '2:1',
-                        active: userGuess === '2:1',
-                      }"
-                      @click="userGuessChange('2:1')"
-                      >2:1</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '3:0',
-                        active: userGuess === '3:0',
-                      }"
-                      @click="userGuessChange('3:0')"
-                      >3:0</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '3:1',
-                        active: userGuess === '3:1',
-                      }"
-                      @click="userGuessChange('3:1')"
-                      >3:1</view
-                    >
-                  </view>
-                  <view class="row-1 col-10">
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '3:2',
-                        active: userGuess === '3:2',
-                      }"
-                      @click="userGuessChange('3:2')"
-                      >3:2</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '4:0',
-                        active: userGuess === '4:0',
-                      }"
-                      @click="userGuessChange('4:0')"
-                      >4:0</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '4:1',
-                        active: userGuess === '4:1',
-                      }"
-                      @click="userGuessChange('4:1')"
-                      >4:1</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '4:2',
-                        active: userGuess === '4:2',
-                      }"
-                      @click="userGuessChange('4:2')"
-                      >4:2</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '5:0',
-                        active: userGuess === '5:0',
-                      }"
-                      @click="userGuessChange('5:0')"
-                      >5:0</view
-                    >
-                  </view>
-                  <view class="row-1 col-10">
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '5:1',
-                        active: userGuess === '5:1',
-                      }"
-                      @click="userGuessChange('5:1')"
-                      >5:1</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '5:2',
-                        active: userGuess === '5:2',
-                      }"
-                      @click="userGuessChange('5:2')"
-                      >5:2</view
-                    >
-                    <view
-                      class="table-td col-6"
-                      :class="{
-                        'result-active': gameScore === '胜其他',
-                        active: userGuess === '胜其他',
-                      }"
-                      @click="userGuessChange('胜其他')"
-                      >胜其他</view
-                    >
-                  </view>
-                </view>
-              </view>
-              <view class="table-tr row row-1">
-                <view class="row-title table-td row-1 col-10">平</view>
-                <view class="row-content">
-                  <view class="row-1 col-10">
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '0:0',
-                        active: userGuess === '0:0',
-                      }"
-                      @click="userGuessChange('0:0')"
-                      >0:0</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '1:1',
-                        active: userGuess === '1:1',
-                      }"
-                      @click="userGuessChange('1:1')"
-                      >1:1</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '2:2',
-                        active: userGuess === '2:2',
-                      }"
-                      @click="userGuessChange('2:2')"
-                      >2:2</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '3:3',
-                        active: userGuess === '3:3',
-                      }"
-                      @click="userGuessChange('3:3')"
-                      >3:3</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '平其他',
-                        active: userGuess === '平其他',
-                      }"
-                      @click="userGuessChange('平其他')"
-                      >平其他</view
-                    >
-                  </view>
-                </view>
-              </view>
-              <view class="table-tr row row-3">
-                <view class="row-title table-td row-3 col-10">负</view>
-                <view class="row-content">
-                  <view class="row-1 col-10">
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '0:1',
-                        active: userGuess === '0:1',
-                      }"
-                      @click="userGuessChange('0:1')"
-                      >0:1</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '0:2',
-                        active: userGuess === '0:2',
-                      }"
-                      @click="userGuessChange('0:2')"
-                      >0:2</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '0:3',
-                        active: userGuess === '0:3',
-                      }"
-                      @click="userGuessChange('0:3')"
-                      >0:3</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '0:4',
-                        active: userGuess === '0:4',
-                      }"
-                      @click="userGuessChange('0:4')"
-                      >0:4</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '0:5',
-                        active: userGuess === '0:5',
-                      }"
-                      @click="userGuessChange('0:5')"
-                      >0:5</view
-                    >
-                  </view>
-                  <view class="row-1 col-10">
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '1:2',
-                        active: userGuess === '1:2',
-                      }"
-                      @click="userGuessChange('1:2')"
-                      >1:2</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '1:3',
-                        active: userGuess === '1:3',
-                      }"
-                      @click="userGuessChange('1:3')"
-                      >1:3</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '1:4',
-                        active: userGuess === '1:4',
-                      }"
-                      @click="userGuessChange('1:4')"
-                      >1:4</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '1:5',
-                        active: userGuess === '1:5',
-                      }"
-                      @click="userGuessChange('1:5')"
-                      >1:5</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '2:3',
-                        active: userGuess === '2:3',
-                      }"
-                      @click="userGuessChange('2:3')"
-                      >2:3</view
-                    >
-                  </view>
-                  <view class="row-1 col-10">
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '2:4',
-                        active: userGuess === '2:4',
-                      }"
-                      @click="userGuessChange('2:4')"
-                      >2:4</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '2:5',
-                        active: userGuess === '2:5',
-                      }"
-                      @click="userGuessChange('2:5')"
-                      >2:5</view
-                    >
-                    <view
-                      class="table-td col-6"
-                      :class="{
-                        'result-active': gameScore === '负其他',
-                        active: userGuess === '负其他',
-                      }"
-                      @click="userGuessChange('负其他')"
-                      >负其他</view
-                    >
-                  </view>
-                </view>
-              </view>
-            </view>
-
-            <view class="guess-btns" v-if="!readonly">
-              <up-button
-                class="more-btn"
-                :customStyle="{
-                  margin: 0,
-                  width: '120px',
-                  backgroundColor: '#D9D9D9',
-                  color: '#000',
-                }"
-                shape="circle"
-                text="取消"
-                @click="hideGuessModal"
-              ></up-button>
-
-              <up-button
-                class="more-btn"
-                :customStyle="{
-                  margin: 0,
-                  width: '120px',
-                  backgroundColor: '#5fb358',
-                  color: '#fff',
-                }"
-                shape="circle"
-                text="确定"
-                @click="submitGuessResult"
-              ></up-button>
-            </view>
-          </view>
-        </up-modal>
-      </view>
     </mescroll-body>
+
+    <QuizModal 
+      :gameInfo="gameInfo"
+			@hideGuessModal="hideGuessModal"
+			@submitGuessResult="submitGuessResult"
+			@userGuessChange="userGuessChange"
+      v-model:show="showGuessModalVisible"
+    ></QuizModal>
   </view>
 </template>
 
 <script setup>
+import QuizModal from '@/components/quiz/modal.vue'
 import { getCurrentInstance, ref } from 'vue'
 import {
   queryActivitiesDetail,
@@ -659,6 +307,7 @@ function useGameDetail() {
           )
           detail.value.end_at = dayjs(detail.value.end_at).format('YYYY-MM-DD')
           detailLoading.false = false
+          detailId.value = res.data.activity.id
           resolve(detail)
         })
         .catch((err) => {
@@ -859,7 +508,10 @@ function hideGuessModal() {
   }, 300)
 }
 
-async function submitGuessResult() {
+async function submitGuessResult(e) {
+  if(e){
+    userGuess.value = e
+  }
   try {
     uni.showLoading({
       title: '加载中...',

src/pages/charts/charts.vue

@@ -236,372 +236,20 @@
           <view class="content">{{ ruleContent }}</view>
         </view>
       </up-modal>
-
-      <view class="guess-model" v-if="gameInfo && isDetailPage">
-        <up-modal
-          :show="showGuessModalVisible"
-          :width="335"
-          :closeOnClickOverlay="true"
-          :showConfirmButton="false"
-          :showCancelButton="false"
-          @close="hideGuessModal"
-        >
-          <view class="slot-content">
-            <view class="guess-title">
-              <view>{{ gameInfo.home_field }}</view>
-              <view>VS</view>
-              <view>{{ gameInfo.away }}</view>
-            </view>
-
-            <view class="guess-table">
-              <view class="row herder-title">
-                <view class="table-td col-12">单</view>
-              </view>
-              <view class="table-tr row row-3">
-                <view class="row-title table-td row-3 col-10">胜</view>
-                <view class="row-content">
-                  <view class="row-1 col-10">
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '1:0',
-                        active: userGuess === '1:0',
-                      }"
-                      @click="userGuessChange('1:0')"
-                      >1:0</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '2:0',
-                        active: userGuess === '2:0',
-                      }"
-                      @click="userGuessChange('2:0')"
-                      >2:0</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '2:1',
-                        active: userGuess === '2:1',
-                      }"
-                      @click="userGuessChange('2:1')"
-                      >2:1</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '3:0',
-                        active: userGuess === '3:0',
-                      }"
-                      @click="userGuessChange('3:0')"
-                      >3:0</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '3:1',
-                        active: userGuess === '3:1',
-                      }"
-                      @click="userGuessChange('3:1')"
-                      >3:1</view
-                    >
-                  </view>
-                  <view class="row-1 col-10">
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '3:2',
-                        active: userGuess === '3:2',
-                      }"
-                      @click="userGuessChange('3:2')"
-                      >3:2</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '4:0',
-                        active: userGuess === '4:0',
-                      }"
-                      @click="userGuessChange('4:0')"
-                      >4:0</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '4:1',
-                        active: userGuess === '4:1',
-                      }"
-                      @click="userGuessChange('4:1')"
-                      >4:1</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '4:2',
-                        active: userGuess === '4:2',
-                      }"
-                      @click="userGuessChange('4:2')"
-                      >4:2</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '5:0',
-                        active: userGuess === '5:0',
-                      }"
-                      @click="userGuessChange('5:0')"
-                      >5:0</view
-                    >
-                  </view>
-                  <view class="row-1 col-10">
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '5:1',
-                        active: userGuess === '5:1',
-                      }"
-                      @click="userGuessChange('5:1')"
-                      >5:1</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '5:2',
-                        active: userGuess === '5:2',
-                      }"
-                      @click="userGuessChange('5:2')"
-                      >5:2</view
-                    >
-                    <view
-                      class="table-td col-6"
-                      :class="{
-                        'result-active': gameScore === '胜其他',
-                        active: userGuess === '胜其他',
-                      }"
-                      @click="userGuessChange('胜其他')"
-                      >胜其他</view
-                    >
-                  </view>
-                </view>
-              </view>
-              <view class="table-tr row row-1">
-                <view class="row-title table-td row-1 col-10">平</view>
-                <view class="row-content">
-                  <view class="row-1 col-10">
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '0:0',
-                        active: userGuess === '0:0',
-                      }"
-                      @click="userGuessChange('0:0')"
-                      >0:0</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '1:1',
-                        active: userGuess === '1:1',
-                      }"
-                      @click="userGuessChange('1:1')"
-                      >1:1</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '2:2',
-                        active: userGuess === '2:2',
-                      }"
-                      @click="userGuessChange('2:2')"
-                      >2:2</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '3:3',
-                        active: userGuess === '3:3',
-                      }"
-                      @click="userGuessChange('3:3')"
-                      >3:3</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '平其他',
-                        active: userGuess === '平其他',
-                      }"
-                      @click="userGuessChange('平其他')"
-                      >平其他</view
-                    >
-                  </view>
-                </view>
-              </view>
-              <view class="table-tr row row-3">
-                <view class="row-title table-td row-3 col-10">负</view>
-                <view class="row-content">
-                  <view class="row-1 col-10">
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '0:1',
-                        active: userGuess === '0:1',
-                      }"
-                      @click="userGuessChange('0:1')"
-                      >0:1</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '0:2',
-                        active: userGuess === '0:2',
-                      }"
-                      @click="userGuessChange('0:2')"
-                      >0:2</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '0:3',
-                        active: userGuess === '0:3',
-                      }"
-                      @click="userGuessChange('0:3')"
-                      >0:3</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '0:4',
-                        active: userGuess === '0:4',
-                      }"
-                      @click="userGuessChange('0:4')"
-                      >0:4</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '0:5',
-                        active: userGuess === '0:5',
-                      }"
-                      @click="userGuessChange('0:5')"
-                      >0:5</view
-                    >
-                  </view>
-                  <view class="row-1 col-10">
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '1:2',
-                        active: userGuess === '1:2',
-                      }"
-                      @click="userGuessChange('1:2')"
-                      >1:2</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '1:3',
-                        active: userGuess === '1:3',
-                      }"
-                      @click="userGuessChange('1:3')"
-                      >1:3</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '1:4',
-                        active: userGuess === '1:4',
-                      }"
-                      @click="userGuessChange('1:4')"
-                      >1:4</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '1:5',
-                        active: userGuess === '1:5',
-                      }"
-                      @click="userGuessChange('1:5')"
-                      >1:5</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '2:3',
-                        active: userGuess === '2:3',
-                      }"
-                      @click="userGuessChange('2:3')"
-                      >2:3</view
-                    >
-                  </view>
-                  <view class="row-1 col-10">
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '2:4',
-                        active: userGuess === '2:4',
-                      }"
-                      @click="userGuessChange('2:4')"
-                      >2:4</view
-                    >
-                    <view
-                      class="table-td col-2"
-                      :class="{
-                        'result-active': gameScore === '2:5',
-                        active: userGuess === '2:5',
-                      }"
-                      @click="userGuessChange('2:5')"
-                      >2:5</view
-                    >
-                    <view
-                      class="table-td col-6"
-                      :class="{
-                        'result-active': gameScore === '负其他',
-                        active: userGuess === '负其他',
-                      }"
-                      @click="userGuessChange('负其他')"
-                      >负其他</view
-                    >
-                  </view>
-                </view>
-              </view>
-            </view>
-
-            <view class="guess-btns" v-if="!readonly">
-              <up-button
-                class="more-btn"
-                :customStyle="{
-                  margin: 0,
-                  width: '120px',
-                  backgroundColor: '#D9D9D9',
-                  color: '#000',
-                }"
-                shape="circle"
-                text="取消"
-                @click="hideGuessModal"
-              ></up-button>
-
-              <up-button
-                class="more-btn"
-                :customStyle="{
-                  margin: 0,
-                  width: '120px',
-                  backgroundColor: '#5fb358',
-                  color: '#fff',
-                }"
-                shape="circle"
-                text="确定"
-                @click="submitGuessResult"
-              ></up-button>
-            </view>
-          </view>
-        </up-modal>
-      </view>
     </mescroll-body>
+
+    <QuizModal 
+      :gameInfo="gameInfo"
+			@hideGuessModal="hideGuessModal"
+			@submitGuessResult="submitGuessResult"
+			@userGuessChange="userGuessChange"
+      v-model:show="showGuessModalVisible"
+    ></QuizModal>
   </view>
 </template>
 
 <script setup>
+import QuizModal from '@/components/quiz/modal.vue'
 import { getCurrentInstance, ref } from 'vue'
 import {
   queryActivitiesDetail,
@@ -861,6 +509,10 @@ function hideGuessModal() {
 }
 
 async function submitGuessResult() {
+  if(e){
+    userGuess.value = e
+  }
+  
   try {
     uni.showLoading({
       title: '加载中...',

src/pages/index/index.vue

@@ -180,130 +180,9 @@
           </view>
         </view>
       </view>
-
-      <!-- <view class="guess-model" v-if="gameInfo">
-				<up-modal v-model:show="showGuessModalVisible" :width="335" :closeOnClickOverlay="true"
-					:showConfirmButton="false" :showCancelButton="false" @close="hideGuessModal">
-					<view class="slot-content">
-						<view class="guess-title">
-							<view>{{ gameInfo.home_field }}</view>
-							<view>VS</view>
-							<view>{{ gameInfo.away }}</view>
-						</view>
-
-						<view class="guess-table">
-							<view class="row herder-title">
-								<view class="table-td col-12">单</view>
-							</view>
-							<view class="table-tr row row-3">
-								<view class="row-title table-td row-3 col-10">胜</view>
-								<view class="row-content">
-									<view class="row-1 col-10">
-										<view class="table-td col-2" :class="{ 'active': userGuess === '1:0' }"
-											@click="userGuessChange('1:0')">1:0</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '2:0' }"
-											@click="userGuessChange('2:0')">2:0</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '2:1' }"
-											@click="userGuessChange('2:1')">2:1</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '3:0' }"
-											@click="userGuessChange('3:0')">3:0</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '3:1' }"
-											@click="userGuessChange('3:1')">3:1</view>
-									</view>
-									<view class="row-1 col-10">
-										<view class="table-td col-2" :class="{ 'active': userGuess === '3:2' }"
-											@click="userGuessChange('3:2')">3:2</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '4:0' }"
-											@click="userGuessChange('4:0')">4:0</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '4:1' }"
-											@click="userGuessChange('4:1')">4:1</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '4:2' }"
-											@click="userGuessChange('4:2')">4:2</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '5:0' }"
-											@click="userGuessChange('5:0')">5:0</view>
-									</view>
-									<view class="row-1 col-10">
-										<view class="table-td col-2" :class="{ 'active': userGuess === '5:1' }"
-											@click="userGuessChange('5:1')">5:1</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '5:2' }"
-											@click="userGuessChange('5:2')">5:2</view>
-										<view class="table-td col-6" :class="{ 'active': userGuess === '胜其他' }"
-											@click="userGuessChange('胜其他')">胜其他</view>
-									</view>
-								</view>
-							</view>
-							<view class="table-tr row row-1">
-								<view class="row-title table-td row-1 col-10">平</view>
-								<view class="row-content">
-									<view class="row-1 col-10">
-										<view class="table-td col-2" :class="{ 'active': userGuess === '0:0' }"
-											@click="userGuessChange('0:0')">0:0</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '1:1' }"
-											@click="userGuessChange('1:1')">1:1</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '2:2' }"
-											@click="userGuessChange('2:2')">2:2</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '3:3' }"
-											@click="userGuessChange('3:3')">3:3</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '平其他' }"
-											@click="userGuessChange('平其他')">平其他</view>
-									</view>
-								</view>
-							</view>
-							<view class="table-tr row row-3">
-								<view class="row-title table-td row-3 col-10">负</view>
-								<view class="row-content">
-									<view class="row-1 col-10">
-										<view class="table-td col-2" :class="{ 'active': userGuess === '0:1' }"
-											@click="userGuessChange('0:1')">0:1</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '0:2' }"
-											@click="userGuessChange('0:2')">0:2</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '0:3' }"
-											@click="userGuessChange('0:3')">0:3</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '0:4' }"
-											@click="userGuessChange('0:4')">0:4</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '0:5' }"
-											@click="userGuessChange('0:5')">0:5</view>
-									</view>
-									<view class="row-1 col-10">
-										<view class="table-td col-2" :class="{ 'active': userGuess === '1:2' }"
-											@click="userGuessChange('1:2')">1:2</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '1:3' }"
-											@click="userGuessChange('1:3')">1:3</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '1:4' }"
-											@click="userGuessChange('1:4')">1:4</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '1:5' }"
-											@click="userGuessChange('1:5')">1:5</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '2:3' }"
-											@click="userGuessChange('2:3')">2:3</view>
-									</view>
-									<view class="row-1 col-10">
-										<view class="table-td col-2" :class="{ 'active': userGuess === '2:4' }"
-											@click="userGuessChange('2:4')">2:4</view>
-										<view class="table-td col-2" :class="{ 'active': userGuess === '2:5' }"
-											@click="userGuessChange('2:5')">2:5</view>
-										<view class="table-td col-6" :class="{ 'active': userGuess === '负其他' }"
-											@click="userGuessChange('负其他')">负其他</view>
-									</view>
-								</view>
-							</view>
-						</view>
-
-						<view class="guess-btns" v-if="!readonly">
-							<up-button class="more-btn"
-								:customStyle="{ margin: 0, width: '120px', backgroundColor: '#D9D9D9', color: '#000', }"
-								shape="circle" text="取消" @click="hideGuessModal"></up-button>
-
-							<up-button class="more-btn"
-								:customStyle="{ margin: 0, width: '120px', backgroundColor: '#5fb358', color: '#fff', }"
-								shape="circle" text="确定" @click="submitGuessResult"></up-button>
-						</view>
-					</view>
-				</up-modal>
-			</view> -->
     </mescroll-body>
     <QuizModal
       :gameInfo="gameInfo"
-      :userGuess="userGuess"
       :readonly="readonly"
 			@hideGuessModal="hideGuessModal"
 			@submitGuessResult="submitGuessResult"
@@ -468,7 +347,10 @@ async function getNewQuiz() {
   }
 }
 
-async function submitGuessResult() {
+async function submitGuessResult(e) {
+  if(e){
+    userGuess.value = e
+  }
   try {
     uni.showLoading({
       title: '加载中...',