up

src/components/GamePage.vue

@@ -43,6 +43,7 @@ import GameMapPanel from '@/components/GameMapPanel.vue'
 import GameScreensPanel from '@/components/GameScreensPanel.vue'
 import GameTeamsPanel from '@/components/GameTeamsPanel.vue'
 import HeaderMenu from '@/components/HeaderMenu.vue'
+import TicketCheckModal from '@/components/TicketCheckModal.vue'
 import UiBlock from '@/components/UiBlock.vue'
 import { useSimplePolling } from '@/composables/useSimplePolling'
 import { applicationFileType, applicationFileURL } from '@/utils/application'
@@ -54,10 +55,10 @@ const isDownloadingQR = ref(false)
 const router = useRouter()
 const route = useRoute()
 const gameId = route.params.id
-type GameTab = 'settings' | 'teams' | 'screens' | 'game' | 'answers'
+type GameTab = 'settings' | 'teams' | 'screens' | 'game' | 'payment' | 'answers'
 
 function isGameTab(value: string): value is GameTab {
-  return ['settings', 'teams', 'screens', 'game', 'answers'].includes(value)
+  return ['settings', 'teams', 'screens', 'game', 'payment', 'answers'].includes(value)
 }
 
 const queryTab = typeof route.query.tab === 'string' ? route.query.tab : ''
@@ -85,6 +86,9 @@ const deletedGameName = ref('')
 const showQR = ref(false)
 const urlQR = ref('')
 const titleQR = ref('')
+const showTicketCheckModal = ref(false)
+const paymentURL =
+  'https://www.sberbank.ru/ru/choise_bank?requisiteNumber=79609361994&bankCode=100000000111'
 const ticketCount = ref(1)
 const issuedTickets = ref<Ticket[]>([])
 const isIssuingTickets = ref(false)
@@ -750,7 +754,14 @@ useSimplePolling(() => {
                 <n-input-number v-model:value="ticketCount" :min="1" :max="100" />
                 <div v-for="ticket in issuedTickets" :key="ticket.ID" class="issued-ticket">
                   <div>Билет №{{ ticket.ID }}</div>
-                  <a :href="ticket.URL" target="_blank" rel="noreferrer">Открыть страницу билета</a>
+                  <a
+                    :href="ticket.URL"
+                    class="payment-link"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    Открыть страницу билета
+                  </a>
                   <n-button size="small" @click="openQR(ticket.URL!, `Билет №${ticket.ID}`)">
                     Показать QR
                   </n-button>
@@ -875,6 +886,34 @@ useSimplePolling(() => {
             />
           </div>
         </n-tab-pane>
+        <n-tab-pane name="payment" tab="Оплата">
+          <div class="game-tab-content">
+            <UiBlock>
+              <n-flex align="center" justify="space-between">
+                <p class="screens-title">Билеты</p>
+                <n-button size="small" @click="showTicketCheckModal = true">
+                  Проверить билет
+                </n-button>
+              </n-flex>
+            </UiBlock>
+            <UiBlock>
+              <p class="screens-title">Оплата игры</p>
+              <div class="qr-block">
+                <n-qr-code :value="paymentURL" :size="300" :padding="0" />
+              </div>
+              <p>
+                <a
+                  :href="paymentURL"
+                  class="payment-link"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Открыть ссылку оплаты
+                </a>
+              </p>
+            </UiBlock>
+          </div>
+        </n-tab-pane>
         <n-tab-pane name="answers" tab="Проверка ответов">
           <div class="game-tab-content">
             <div v-if="answersQuestions.length == 0" class="answers-empty">
@@ -911,6 +950,8 @@ useSimplePolling(() => {
     </div>
   </div>
 
+  <TicketCheckModal v-model:show="showTicketCheckModal" />
+
   <!-- Окно выдачи улик -->
   <n-modal v-model:show="showGiveApplicationModal">
     <n-card
@@ -1211,6 +1252,15 @@ useSimplePolling(() => {
   padding: 16px;
 }
 
+.payment-link {
+  color: #63e2b7;
+}
+
+.payment-link:focus,
+.payment-link:hover {
+  color: #8ff0cc;
+}
+
 .give-application-image-block {
   background-image: url('@/assets/images/paper_white.jpg');
   background-size: cover;