From 73257368728b79dec115de40aa0cfed7a9f53991 Mon Sep 17 00:00:00 2001
From: zjk <852185829@qq.com>
Date: 星期一, 07 九月 2026 09:47:36 +0800
Subject: [PATCH] feat(appointment-scan): 同步身份证、人脸、接待人及打印凭条的横屏左右布局
---
pages/appointment-scan/n-index.nvue | 204 ++++++++++++++++++++++++++++----------------------
1 files changed, 113 insertions(+), 91 deletions(-)
diff --git a/pages/appointment-scan/n-index.nvue b/pages/appointment-scan/n-index.nvue
index 3770687..5abc831 100644
--- a/pages/appointment-scan/n-index.nvue
+++ b/pages/appointment-scan/n-index.nvue
@@ -18,43 +18,43 @@
<!-- 步骤: 预约码验证 -->
<template v-if="currentStepName === 'qr'">
- <view class="main-card qr-main-card">
- <view class="qr-main-content">
- <view class="qr-text-panel">
- <view class="qr-title-group">
- <text class="main-title qr-main-title">请将您的预约二维码放置到扫码位置</text>
- <text class="main-desc qr-main-desc">保持二维码完整、清晰，距离扫码口约 10-20 厘米</text>
+ <view class="main-card ls-main-card">
+ <view class="ls-main-content">
+ <view class="ls-text-panel">
+ <view class="ls-title-group">
+ <text class="main-title ls-main-title">请将您的预约二维码放置到扫码位置</text>
+ <text class="main-desc ls-main-desc">保持二维码完整、清晰，距离扫码口约 10-20 厘米</text>
</view>
- <text class="helper-text qr-helper-text">若识别失败，请调整手机亮度、避免反光，或联系工作人员协助</text>
+ <text class="helper-text ls-helper-text">若识别失败，请调整手机亮度、避免反光，或联系工作人员协助</text>
</view>
- <view class="device-area qr-device-area">
- <image :src="deviceScanImage" class="device-img qr-device-img" mode="aspectFit"></image>
+ <view class="device-area ls-device-area">
+ <image :src="deviceScanImage" class="device-img ls-device-img" mode="aspectFit"></image>
</view>
</view>
</view>
- <view class="bottom-area qr-bottom-area">
- <view class="help-card qr-help-card">
+ <view class="bottom-area ls-bottom-area">
+ <view class="help-card ls-help-card">
<view class="highlight-bar"></view>
- <view class="card-title-row qr-card-title-row" style="margin-top: 16px;">
+ <view class="card-title-row ls-card-title-row" style="margin-top: 16px;">
<view class="icon-base">
<image :src="hintIconImage" class="icon-base-img" mode="aspectFit"></image>
</view>
<text class="card-title">扫码小贴士</text>
</view>
- <text class="help-content qr-help-content">请使用预约成功后收到的二维码，\n保持二维码完整显示后再靠近扫码区域</text>
+ <text class="help-content ls-help-content">请使用预约成功后收到的二维码，\n保持二维码完整显示后再靠近扫码区域</text>
</view>
- <view class="action-card qr-action-card">
+ <view class="action-card ls-action-card">
<view class="highlight-bar"></view>
- <view class="card-title-row qr-card-title-row">
+ <view class="card-title-row ls-card-title-row">
<view class="icon-base">
<image :src="returnIconImage" class="icon-base-img" mode="aspectFit"></image>
</view>
<text class="card-title">需要返回？</text>
</view>
- <view class="main-btn qr-main-btn" @click="goBack">
+ <view class="main-btn ls-main-btn" @click="goBack">
<text class="btn-text">返回上一步</text>
</view>
</view>
@@ -64,45 +64,51 @@
<!-- 步骤: 身份证验证 -->
<template v-else-if="currentStepName === 'idcard'">
<template v-if="!isManualInput">
- <view class="main-card">
- <text class="main-title">请将您的身份证放置读卡器位置</text>
- <text class="main-desc">请将身份证贴近设备感应区，系统将自动读取身份信息</text>
+ <view class="main-card ls-main-card">
+ <view class="ls-main-content">
+ <view class="ls-text-panel">
+ <view class="ls-title-group">
+ <text class="main-title ls-main-title">请将您的身份证放置读卡器位置</text>
+ <text class="main-desc ls-main-desc">请将身份证贴近设备感应区，系统将自动读取身份信息</text>
+ </view>
- <view class="name-hint-row" v-if="mode === 'appointment'">
- <view class="name-icon-box">
- <text class="name-icon-text">人</text>
+ <view class="name-hint-row" v-if="mode === 'appointment'">
+ <view class="name-icon-box">
+ <text class="name-icon-text">人</text>
+ </view>
+ <text class="name-text">姓名：{{ appointmentVisitorName }}</text>
+ </view>
+
+ <text class="helper-text ls-helper-text">若识别失败，请联系工作人员协助</text>
</view>
- <text class="name-text">姓名：{{ appointmentVisitorName }}</text>
- </view>
- <view class="device-area">
- <image :src="deviceIdScanImage" class="device-img" mode="aspectFit"></image>
+ <view class="device-area ls-device-area">
+ <image :src="deviceIdScanImage" class="device-img ls-device-img" mode="aspectFit"></image>
+ </view>
</view>
-
- <text class="helper-text">若识别失败，请联系工作人员协助</text>
</view>
- <view class="bottom-area">
- <view class="help-card">
+ <view class="bottom-area ls-bottom-area">
+ <view class="help-card ls-help-card">
<view class="highlight-bar"></view>
- <view class="card-title-row">
+ <view class="card-title-row ls-card-title-row">
<view class="icon-base">
<image :src="hintIconImage" class="icon-base-img" mode="aspectFit"></image>
</view>
<text class="card-title">读卡小贴士</text>
</view>
- <text class="help-content">请使用二代身份证原件放至读卡区位置</text>
+ <text class="help-content ls-help-content">请使用二代身份证原件放至读卡区位置</text>
</view>
- <view class="action-card" v-if="allowManualIdCard">
+ <view class="action-card ls-action-card" v-if="allowManualIdCard">
<view class="highlight-bar"></view>
- <view class="card-title-row">
+ <view class="card-title-row ls-card-title-row">
<view class="icon-base">
<image :src="keyboardIconImage" class="icon-base-img" mode="aspectFit"></image>
</view>
<text class="card-title">未携带身份证？</text>
</view>
- <view class="main-btn" @click="openManualInput">
+ <view class="main-btn ls-main-btn" @click="openManualInput">
<text class="btn-text">手动录入信息</text>
</view>
</view>
@@ -203,10 +209,12 @@
<!-- 步骤: 人脸验证 -->
<template v-else-if="currentStepName === 'face'">
- <view class="main-card">
- <view class="title-group">
- <text class="main-title">请面向屏幕完成人脸验证</text>
- <text class="sub-title">请摘下口罩和帽子，保持面部位于取景框内并正视摄像头</text>
+ <view class="main-card ls-main-card">
+ <view class="ls-main-content">
+ <view class="ls-text-panel">
+ <view class="title-group ls-title-group">
+ <text class="main-title ls-main-title">请面向屏幕完成人脸验证</text>
+ <text class="sub-title ls-main-desc">请摘下口罩和帽子，保持面部位于取景框内并正视摄像头</text>
<view class="name-pill">
<view class="name-icon">
<text class="name-icon-text">人</text>
@@ -215,7 +223,9 @@
</view>
</view>
- <view class="face-capture-card">
+ <text class="bottom-subtext ls-helper-text">系统将自动完成人脸采集与比对，请勿频繁移动或离开识别区域</text>
+ </view>
+ <view class="face-capture-card ls-device-area">
<view class="status-pill">
<view class="status-dot"></view>
<text class="status-text">{{ faceVerifyStatusText }}</text>
@@ -273,30 +283,31 @@
</view>
</view>
- <text class="bottom-subtext">系统将自动完成人脸采集与比对，请勿频繁移动或离开识别区域</text>
+
+ </view>
</view>
- <view class="bottom-area">
- <view class="help-card">
+ <view class="bottom-area ls-bottom-area">
+ <view class="help-card ls-help-card">
<view class="highlight-bar"></view>
- <view class="card-title-row">
+ <view class="card-title-row ls-card-title-row">
<view class="icon-base">
<image :src="hintIconImage" class="icon-base-img" mode="aspectFit"></image>
</view>
<text class="card-title">识别提示</text>
</view>
- <text class="help-content">{{ faceVerifyHelpText }}</text>
+ <text class="help-content ls-help-content">{{ faceVerifyHelpText }}</text>
</view>
- <view class="action-card">
+ <view class="action-card ls-action-card">
<view class="highlight-bar"></view>
- <view class="card-title-row">
+ <view class="card-title-row ls-card-title-row">
<view class="icon-base">
<image :src="retryIconImage" class="icon-base-img" mode="aspectFit"></image>
</view>
<text class="card-title">识别失败？</text>
</view>
- <view class="main-btn" @click="handleFaceVerifyNextStep">
+ <view class="main-btn ls-main-btn" @click="handleFaceVerifyNextStep">
<text class="btn-text">重新采集人脸</text>
<!-- <text class="btn-text">跳过人脸采集</text> -->
</view>
@@ -306,10 +317,12 @@
<!-- 步骤: 接待人验证 -->
<template v-else-if="currentStepName === 'host'">
- <view class="main-card">
- <view class="title-group">
- <text class="main-title">请接待人面向屏幕</text>
- <text class="sub-title">请接待人站在设备前，正视屏幕完成身份确认</text>
+ <view class="main-card ls-main-card">
+ <view class="ls-main-content">
+ <view class="ls-text-panel">
+ <view class="title-group ls-title-group">
+ <text class="main-title ls-main-title">请接待人面向屏幕</text>
+ <text class="sub-title ls-main-desc">请接待人站在设备前，正视屏幕完成身份确认</text>
<view class="name-pill" v-if="mode === 'appointment'">
<view class="name-icon">
<text class="name-icon-text">人</text>
@@ -318,7 +331,9 @@
</view>
</view>
- <view class="face-capture-card">
+ <text class="bottom-subtext ls-helper-text">系统将自动完成人脸采集与比对，请勿频繁移动或离开识别区域</text>
+ </view>
+ <view class="face-capture-card ls-device-area">
<view class="status-pill">
<view class="status-dot"></view>
<text class="status-text">{{ hostVerifyStatusText }}</text>
@@ -374,30 +389,31 @@
</view>
</view>
- <text class="bottom-subtext">系统将自动完成人脸采集与比对，请勿频繁移动或离开识别区域</text>
+
+ </view>
</view>
- <view class="bottom-area">
- <view class="help-card">
+ <view class="bottom-area ls-bottom-area">
+ <view class="help-card ls-help-card">
<view class="highlight-bar"></view>
- <view class="card-title-row">
+ <view class="card-title-row ls-card-title-row">
<view class="icon-base">
<image :src="hintIconImage" class="icon-base-img" mode="aspectFit"></image>
</view>
<text class="card-title">验证提示</text>
</view>
- <text class="help-content">请由接待人本人操作；\n接待人可以直接使用门禁卡刷卡验证</text>
+ <text class="help-content ls-help-content">请由接待人本人操作；\n接待人可以直接使用门禁卡刷卡验证</text>
</view>
- <view class="action-card">
+ <view class="action-card ls-action-card">
<view class="highlight-bar" style="background: #6EA2FF;"></view>
- <view class="card-title-row">
+ <view class="card-title-row ls-card-title-row">
<view class="icon-base">
<image :src="retryIconImage" class="icon-base-img" mode="aspectFit"></image>
</view>
<text class="card-title">验证失败？</text>
</view>
- <view class="main-btn" @click="retryFaceVerify">
+ <view class="main-btn ls-main-btn" @click="retryFaceVerify">
<text class="btn-text">重新验证接待人</text>
<!-- <text class="btn-text">跳过人脸采集</text> -->
</view>
@@ -454,35 +470,41 @@
<!-- 步骤: 打印凭条 -->
<template v-else-if="currentStepName === 'print'">
- <view class="main-card">
- <text class="main-title">请等待打印凭条</text>
+ <view class="main-card ls-main-card">
+ <view class="ls-main-content">
+ <view class="ls-text-panel">
+ <view class="ls-title-group">
+ <text class="main-title ls-main-title">请等待打印凭条</text>
+ </view>
+ </view>
+ <view class="print-demo-card ls-device-area" style="align-items: center; justify-content: center;">
+ <image :src="printTicketDemoImage" class="print-demo-img ls-device-img" mode="aspectFit"></image>
+ </view>
- <view class="print-demo-card">
- <image :src="printTicketDemoImage" class="print-demo-img" mode="aspectFit"></image>
</view>
</view>
- <view class="bottom-area">
- <view class="help-card">
+ <view class="bottom-area ls-bottom-area">
+ <view class="help-card ls-help-card">
<view class="highlight-bar"></view>
- <view class="card-title-row">
+ <view class="card-title-row ls-card-title-row">
<view class="icon-base">
<image :src="hintIconImage" class="icon-base-img" mode="aspectFit"></image>
</view>
<text class="card-title">取条提示</text>
</view>
- <text class="help-content">请在凭条完全打印后再取走；\n如长时间未出条，请联系现场工作人员协助</text>
+ <text class="help-content ls-help-content">请在凭条完全打印后再取走；\n如长时间未出条，请联系现场工作人员协助</text>
</view>
- <view class="action-card">
+ <view class="action-card ls-action-card">
<view class="highlight-bar" style="background: #6EA2FF;"></view>
- <view class="card-title-row">
+ <view class="card-title-row ls-card-title-row">
<view class="icon-base">
<image :src="retryIconImage" class="icon-base-img" mode="aspectFit"></image>
</view>
<text class="card-title">未打印成功？</text>
</view>
- <view class="main-btn" @click="startPrintTicket">
+ <view class="main-btn ls-main-btn" @click="startPrintTicket">
<text class="btn-text">重新打印凭条</text>
</view>
</view>
@@ -4720,7 +4742,7 @@
height: 320px;
}
-.page-container.landscape .qr-main-card {
+.page-container.landscape .ls-main-card {
height: 560px;
padding-top: 40px;
padding-right: 56px;
@@ -4730,7 +4752,7 @@
flex-direction: row;
}
-.page-container.landscape .qr-main-content {
+.page-container.landscape .ls-main-content {
width: 100%;
flex: 1;
display: flex;
@@ -4739,7 +4761,7 @@
justify-content: space-between;
}
-.page-container.landscape .qr-text-panel {
+.page-container.landscape .ls-text-panel {
width: 760px;
display: flex;
flex-direction: column;
@@ -4749,55 +4771,55 @@
padding-bottom: 18px;
}
-.page-container.landscape .qr-title-group {
+.page-container.landscape .ls-title-group {
display: flex;
flex-direction: column;
align-items: flex-start;
}
-.page-container.landscape .qr-main-title,
-.page-container.landscape .qr-main-desc,
-.page-container.landscape .qr-helper-text {
+.page-container.landscape .ls-main-title,
+.page-container.landscape .ls-main-desc,
+.page-container.landscape .ls-helper-text {
width: 100%;
text-align: left;
}
-.page-container.landscape .qr-main-title {
+.page-container.landscape .ls-main-title {
font-size: 56px;
line-height: 74px;
height: auto;
}
-.page-container.landscape .qr-main-desc {
+.page-container.landscape .ls-main-desc {
margin-top: 14px;
margin-bottom: 0;
font-size: 24px;
line-height: 34px;
}
-.page-container.landscape .qr-helper-text {
+.page-container.landscape .ls-helper-text {
font-size: 20px;
line-height: 30px;
}
-.page-container.landscape .qr-device-area {
+.page-container.landscape .ls-device-area {
width: 620px;
height: 100%;
margin-bottom: 0;
}
-.page-container.landscape .qr-device-img {
+.page-container.landscape .ls-device-img {
width: 620px;
height: 420px;
}
-.page-container.landscape .qr-bottom-area {
+.page-container.landscape .ls-bottom-area {
height: 176px;
align-items: stretch;
}
-.page-container.landscape .qr-help-card,
-.page-container.landscape .qr-action-card {
+.page-container.landscape .ls-help-card,
+.page-container.landscape .ls-action-card {
width: 900px;
height: 176px;
padding-top: 22px;
@@ -4806,21 +4828,21 @@
padding-left: 28px;
}
-.page-container.landscape .qr-card-title-row {
+.page-container.landscape .ls-card-title-row {
margin-top: 14px;
}
-.page-container.landscape .qr-help-content {
+.page-container.landscape .ls-help-content {
margin-top: 14px;
font-size: 17px;
line-height: 26px;
}
-.page-container.landscape .qr-action-card {
+.page-container.landscape .ls-action-card {
justify-content: flex-start;
}
-.page-container.landscape .qr-main-btn {
+.page-container.landscape .ls-main-btn {
width: 100%;
height: 56px;
margin-top: 18px;
--
Gitblit v1.7.1