feat(patient-h5): 接入签署令牌与签名上传

patient-h5/src/views/entry/EntryView.vue

@@ -1,14 +1,45 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
+import { computed, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
-import { resetSignFlow, signingState } from '@/composables/useSignFlow'
+import { initializeSignFlow, signingState } from '@/composables/useSignFlow'
 
+const route = useRoute()
 const router = useRouter()
+const loading = ref(true)
+
+const isRealFlow = computed(() => signingState.mode === 'real')
+const canStartSigning = computed(() => signingState.status === 'ready')
+
+function getQueryValue(value: unknown) {
+  if (Array.isArray(value)) {
+    return value[0] ?? ''
+  }
+
+  return typeof value === 'string' ? value : ''
+}
+
+async function initialize() {
+  const token =
+    getQueryValue(route.query.token) ||
+    getQueryValue(route.query.signToken) ||
+    getQueryValue(route.query.t)
+
+  await initializeSignFlow(token)
+  loading.value = false
+}
 
 function startSigning() {
-  resetSignFlow()
+  if (!canStartSigning.value) {
+    return
+  }
+
   void router.push('/consent')
 }
+
+onMounted(() => {
+  void initialize()
+})
 </script>
 
 <template>
@@ -21,36 +52,170 @@ function startSigning() {
       </div>
     </header>
 
-    <section class="mobile-hero">
-      <p class="eyebrow">待签署文书</p>
-      <h1>{{ signingState.documentTitle }}</h1>
-      <p>请确认以下任务信息，并在阅读文书后完成签署。</p>
-    </section>
+    <div v-if="loading" class="mobile-state-card">
+      <p class="eyebrow">安全验证</p>
+      <h1>正在验证签署链接</h1>
+      <p>请稍候，系统正在确认本次签署凭证。</p>
+    </div>
 
-    <section class="mobile-card patient-card">
-      <div class="card-label">患者信息</div>
-      <div class="patient-row">
-        <div class="patient-avatar">{{ signingState.patientName.slice(0, 1) }}</div>
-        <div>
-          <strong>{{ signingState.patientName }}</strong>
-          <span>{{ signingState.visitNo }}</span>
+    <template v-else-if="signingState.status === 'error' || signingState.status === 'blocked'">
+      <section class="mobile-state-card mobile-state-card--error">
+        <p class="eyebrow">链接不可用</p>
+        <h1>无法继续签署</h1>
+        <p>{{ signingState.errorMessage }}</p>
+        <p class="secure-note">请不要重复尝试或转发链接，如有疑问请联系现场医务人员。</p>
+      </section>
+    </template>
+
+    <template v-else>
+      <section class="mobile-hero">
+        <p class="eyebrow">待签署文书</p>
+        <h1>{{ signingState.documentTitle }}</h1>
+        <p v-if="isRealFlow">
+          签署链接已验证。请先核对现场展示的正式文书内容，再继续确认签署人信息。
+        </p>
+        <p v-else>请确认以下任务信息，并在阅读文书后完成签署。</p>
+      </section>
+
+      <section v-if="isRealFlow" class="mobile-card real-session-card">
+        <div class="card-label">签署凭证</div>
+        <div class="real-session-row">
+          <span class="real-session-icon">✓</span>
+          <div>
+            <strong>一次性签署链接已验证</strong>
+            <span>任务编号：{{ signingState.taskNo }}</span>
+          </div>
         </div>
-      </div>
-      <div class="task-number">任务编号：{{ signingState.taskNo }}</div>
-    </section>
+      </section>
 
-    <section class="mobile-card notice-card">
-      <div class="notice-icon">i</div>
-      <div>
-        <strong>请使用实际签署人的信息</strong>
-        <p>如果由家属或监护人代签，请在下一步选择与患者的关系。</p>
-      </div>
-    </section>
+      <section v-else class="mobile-card patient-card">
+        <div class="card-label">患者信息</div>
+        <div class="patient-row">
+          <div class="patient-avatar">{{ signingState.patientName.slice(0, 1) }}</div>
+          <div>
+            <strong>{{ signingState.patientName }}</strong>
+            <span>{{ signingState.visitNo }}</span>
+          </div>
+        </div>
+        <div class="task-number">任务编号：{{ signingState.taskNo }}</div>
+      </section>
 
-    <button class="mobile-primary-button" type="button" @click="startSigning">
-      开始阅读并签署
-    </button>
+      <section class="mobile-card notice-card">
+        <div class="notice-icon">i</div>
+        <div>
+          <strong>请使用实际签署人的信息</strong>
+          <p>如果由家属或监护人代签，请在下一步选择与患者的关系。</p>
+        </div>
+      </section>
 
-    <p class="secure-note">本页面仅用于本次知情同意签署，请勿转发签署链接。</p>
+      <section v-if="isRealFlow" class="mobile-card integration-note">
+        <strong>正式文书内容暂未由公开接口返回</strong>
+        <p>
+          当前后端公开 Token
+          接口只返回一次性上传凭证，没有提供患者端读取任务文书的接口。为避免在未阅读正式内容的情况下签署，本版本不会提交真实签名。
+        </p>
+      </section>
+
+      <button
+        class="mobile-primary-button"
+        type="button"
+        :disabled="isRealFlow"
+        @click="startSigning"
+      >
+        {{ isRealFlow ? '等待文书接口接入' : '开始阅读并签署' }}
+      </button>
+
+      <p class="secure-note">本页面仅用于本次知情同意签署，请勿转发签署链接。</p>
+    </template>
   </main>
 </template>
+
+<style scoped>
+.mobile-state-card,
+.integration-note,
+.real-session-card {
+  padding: 20px;
+  border: 1px solid #e0eceb;
+  border-radius: 18px;
+  background: rgb(255 255 255 / 86%);
+  box-shadow: 0 12px 30px rgb(33 79 92 / 5%);
+}
+
+.mobile-state-card {
+  margin-top: 20vh;
+  text-align: center;
+}
+
+.mobile-state-card h1 {
+  margin: 0;
+  color: #173b56;
+  font-size: 25px;
+}
+
+.mobile-state-card p:not(.eyebrow) {
+  margin: 12px 0 0;
+  color: #788f9d;
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.mobile-state-card--error {
+  border-color: #f0d8d8;
+}
+
+.real-session-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.real-session-icon {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  color: #1f776f;
+  font-weight: 800;
+  background: #dff3ee;
+  border-radius: 12px;
+  place-items: center;
+}
+
+.real-session-row strong,
+.real-session-row span {
+  display: block;
+}
+
+.real-session-row strong {
+  color: #31576c;
+  font-size: 14px;
+}
+
+.real-session-row div span {
+  margin-top: 5px;
+  color: #8aa0aa;
+  font-size: 12px;
+}
+
+.integration-note {
+  margin-top: 14px;
+  background: #fffaf2;
+  border-color: #f0dfc1;
+}
+
+.integration-note strong {
+  color: #876126;
+  font-size: 13px;
+}
+
+.integration-note p {
+  margin: 7px 0 0;
+  color: #927b58;
+  font-size: 12px;
+  line-height: 1.7;
+}
+
+.mobile-primary-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+</style>