1. 家族アーカイブ画面における患者選択モードの実装

既存の家族アーカイブ画面を流用し、ルーティングパラメータに応じて「患者選択」モードへ切り替える機能を実装する。

実装のポイント：

• URLクエリパラメータによるモード判定とUIの出し分け
• 患者カードのクリックによる選択状態の管理
• デフォルト患者の自動選択
• 選択された患者IDの保存と決済画面への遷移

1.1 モード判定とUIの出し分け

views/UserProfile/UserList.vue において、クエリパラメータを検知してモードを切り替える。

import { useRoute } from 'vue-router'
import { computed } from 'vue'

const currentRoute = useRoute()
const isSelectMode = computed(() => currentRoute.query.mode === 'select')

テンプレート側では、このフラグに基づいてタイトルや補足説明、アクションボタンを表示する。

<app-header :title="isSelectMode ? '患者の選択' : '家族アーカイブ'" />

<div class="select-notice" v-if="isSelectMode">
  <h3>診療対象の患者を選択してください</h3>
  <p>適切な診療を行うための参考情報となり、医師のみ閲覧可能です</p>
</div>

<!-- 患者選択モード時のアクションボタン -->
<div class="action-area" v-if="isSelectMode">
  <van-button type="primary" round block @click="goToCheckout">支払いへ進む</van-button>
</div>

1.2 クリックによる選択状態の管理

選択モード時、リスト内の患者カードをクリックすることでアクティブ状態を切り替える。

import { ref } from 'vue'

const activeUserId = ref('')

const handleUserClick = (userProfile) => {
  if (isSelectMode.value) {
    activeUserId.value = userProfile.id
  }
}

テンプレートにはクリックイベントと動的クラスをバインドする。

<div 
  v-for="profile in userList" 
  :key="profile.id" 
  class="user-card"
  @click="handleUserClick(profile)"
  :class="{ active: activeUserId === profile.id }"
>
  <!-- コンテンツ -->
</div>

1.3 デフォルト患者の自動選択

リスト取得時、選択モードであればデフォルト設定されている患者、もしくは先頭の患者を自動で選択状態にする。

const fetchUserList = async () => {
  const response = await getUserList()
  userList.value = response.data
  
  if (isSelectMode.value && userList.value.length > 0) {
    const primaryUser = userList.value.find(u => u.isDefault)
    activeUserId.value = primaryUser ? primaryUser.id : userList.value[0].id
  }
}

1.4 決済画面への遷移

選択された患者IDをストアに保存し、注文確認画面へ遷移させる。

import { useRouter } from 'vue-router'
import { useMedicalStore } from '@/stores/medical'

const router = useRouter()
const medicalStore = useMedicalStore()

const goToCheckout = () => {
  if (!activeUserId.value) return showToast('患者を選択してください')
  medicalStore.setSelectedUser(activeUserId.value)
  router.push('/medical/payment')
}

2. 決済画面のルーティングと事前決済情報の取得

患者選択後の事前決済情報（注文概要）を表示する画面を構築する。

2.1 ルーティング設定

router/index.ts に決済画面のルートを追加する。

{
  path: '/medical/payment',
  name: 'MedicalPayment',
  component: () => import('@/views/medical/CheckoutView.vue'),
  meta: { title: '診療支払い' }
}

2.2 事前決済情報取得APIの定義

支払いに必要な情報と患者詳細を取得するための型定義とAPI関数を用意する。

types/medical.ts