991 lines
30 KiB
Vue
991 lines
30 KiB
Vue
<template>
|
||
<view class="page">
|
||
<base-background />
|
||
<custom-navbar title="NFC配对" />
|
||
|
||
<view class="content">
|
||
<view class="status-card">
|
||
<view class="status-header">
|
||
<view
|
||
:class="['status-dot', socketConnected ? 'online' : 'offline']"
|
||
/>
|
||
<text class="status-title">{{ connectionText }}</text>
|
||
</view>
|
||
<view class="status-desc">
|
||
<text>请保持手机在线，等待刷卡设备将NFC卡号传递到本页面。</text>
|
||
<text v-if="nfcSupported" class="nfc-hint">
|
||
<text class="nfc-hint-text">或使用手机 NFC 功能直接读取卡片</text>
|
||
</text>
|
||
</view>
|
||
<view v-if="nfcSupported" class="nfc-status">
|
||
<view class="nfc-status-header">
|
||
<view
|
||
:class="['status-dot', nfcEnabled ? 'online' : 'offline']"
|
||
/>
|
||
<text class="nfc-status-title">{{ nfcStatusText }}</text>
|
||
</view>
|
||
<view v-if="nfcError" class="nfc-error-text">
|
||
<text class="error-content">{{ nfcError }}</text>
|
||
</view>
|
||
</view>
|
||
<view :class="{ ready: !!cardNo }" class="card-box">
|
||
<text class="card-label">NFC卡号</text>
|
||
<text class="card-value">{{ cardNo || "等待刷卡..." }}</text>
|
||
</view>
|
||
<view v-if="connectionError" class="error-text">
|
||
<text class="error-content">{{ connectionError }}</text>
|
||
</view>
|
||
<view v-else-if="lastMessage" class="hint-text">{{ lastMessage }}</view>
|
||
<view class="status-actions">
|
||
<view class="text-btn" @click="handleRetry">重新连接</view>
|
||
<view v-if="cardNo" class="text-btn" @click="resetCard"
|
||
>清空卡号
|
||
</view>
|
||
<view
|
||
v-if="connectionError"
|
||
class="text-btn"
|
||
@click="testServerConnection"
|
||
>测试服务器
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-card">
|
||
<!-- <view class="field">-->
|
||
<!-- <text class="label">设备 MAC 地址</text>-->
|
||
<!-- <input-->
|
||
<!-- v-model.trim="deviceMac"-->
|
||
<!-- class="input"-->
|
||
<!-- maxlength="32"-->
|
||
<!-- placeholder="请输入设备 MAC"-->
|
||
<!-- placeholder-class="placeholder"-->
|
||
<!-- />-->
|
||
<!-- </view>-->
|
||
<view class="field">
|
||
<text class="label">NFC 卡号</text>
|
||
<input
|
||
v-model="cardNo"
|
||
class="input"
|
||
disabled
|
||
placeholder="等待刷卡"
|
||
placeholder-class="placeholder"
|
||
/>
|
||
</view>
|
||
|
||
<view v-if="unitId" class="field readonly">
|
||
<text class="label">绑定单元 ID</text>
|
||
<text class="unit-value">{{ unitId }}</text>
|
||
</view>
|
||
|
||
<view
|
||
:class="['primary-btn', { disabled: !canSubmit || binding }]"
|
||
@click="handleBind"
|
||
>
|
||
{{ binding ? "提交中..." : "提交绑定" }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import BaseBackground from "@/components/base-background/base-background.vue";
|
||
import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";
|
||
import { getRequestConfig, getToken } from "@/utils/request.js";
|
||
import { bindNfcCard } from "@/api/memorial/index.js";
|
||
|
||
const WS_PATH = "/ws/device";
|
||
const FIXED_MAC = "111111111111";
|
||
|
||
export default {
|
||
components: {
|
||
BaseBackground,
|
||
CustomNavbar,
|
||
},
|
||
data() {
|
||
return {
|
||
unitId: "",
|
||
socketTask: null,
|
||
socketConnected: false,
|
||
deviceMac: "",
|
||
cardNo: "",
|
||
binding: false,
|
||
connectionError: "",
|
||
lastMessage: "",
|
||
usingGlobalSocketEvents: false,
|
||
globalSocketHandlers: null,
|
||
connectTimeout: null,
|
||
// NFC 相关状态
|
||
nfcAdapter: null,
|
||
nfcSupported: false,
|
||
nfcEnabled: false,
|
||
nfcError: "",
|
||
};
|
||
},
|
||
computed: {
|
||
canSubmit() {
|
||
return !!this.cardNo;
|
||
},
|
||
connectionText() {
|
||
if (this.connectionError) {
|
||
return "连接异常";
|
||
}
|
||
return this.socketConnected ? "已连接，等待刷卡" : "连接中...";
|
||
},
|
||
nfcStatusText() {
|
||
if (!this.nfcSupported) {
|
||
return "设备不支持 NFC";
|
||
}
|
||
if (this.nfcError) {
|
||
return `NFC 错误: ${this.nfcError}`;
|
||
}
|
||
return this.nfcEnabled ? "NFC 已开启，请将卡片贴近手机" : "NFC 未开启";
|
||
},
|
||
},
|
||
onLoad(options = {}) {
|
||
if (options.unitId) {
|
||
this.unitId = options.unitId;
|
||
}
|
||
if (options.mac) {
|
||
this.deviceMac = options.mac;
|
||
}
|
||
this.initSocket();
|
||
this.initNFC();
|
||
},
|
||
onUnload() {
|
||
this.cleanupSocket();
|
||
this.cleanupNFC();
|
||
},
|
||
methods: {
|
||
buildSocketUrl() {
|
||
try {
|
||
const { baseUrl } = getRequestConfig();
|
||
if (!baseUrl) {
|
||
console.error("buildSocketUrl: baseUrl 为空");
|
||
return "";
|
||
}
|
||
|
||
// 获取当前登录的 token
|
||
const token = getToken();
|
||
if (!token) {
|
||
console.error("buildSocketUrl: token 为空，请先登录");
|
||
this.connectionError = "未登录，请先登录后再试";
|
||
return "";
|
||
}
|
||
|
||
// 根据 baseUrl 的协议自动选择 ws 或 wss
|
||
const isHttps = baseUrl.startsWith("https://");
|
||
const protocol = isHttps ? "wss" : "ws";
|
||
const host = baseUrl.replace(/^https?:\/\//, "").replace(/\/$/, "");
|
||
|
||
// 构建查询参数：token 和固定的 mac
|
||
const query = `?token=${encodeURIComponent(token)}&mac=${FIXED_MAC}`;
|
||
const url = `${protocol}://${host}${WS_PATH}${query}`;
|
||
|
||
console.log("构建 WebSocket URL:", {
|
||
baseUrl,
|
||
protocol,
|
||
host,
|
||
path: WS_PATH,
|
||
token: token ? `${token.substring(0, 20)}...` : "无",
|
||
mac: FIXED_MAC,
|
||
finalUrl: url.replace(token, "***"), // 日志中隐藏完整token
|
||
});
|
||
|
||
return url;
|
||
} catch (error) {
|
||
console.error("构建WebSocket地址失败", error);
|
||
return "";
|
||
}
|
||
},
|
||
initSocket() {
|
||
this.connectionError = "";
|
||
this.lastMessage = "";
|
||
const url = this.buildSocketUrl();
|
||
if (!url) {
|
||
this.connectionError = "缺少WebSocket地址，请检查配置";
|
||
console.error("initSocket: URL 构建失败");
|
||
return;
|
||
}
|
||
this.cleanupSocket();
|
||
console.log("NFC配对页面发起WebSocket连接:", url);
|
||
|
||
try {
|
||
// 添加连接超时处理
|
||
this.connectTimeout = setTimeout(() => {
|
||
if (!this.socketConnected) {
|
||
console.error("WebSocket 连接超时");
|
||
this.connectionError = "连接超时，请检查网络和服务器状态";
|
||
this.cleanupSocket();
|
||
}
|
||
}, 10000); // 10秒超时
|
||
|
||
this.socketTask = uni.connectSocket({
|
||
url,
|
||
success: (res) => {
|
||
console.log("uni.connectSocket success:", res);
|
||
},
|
||
fail: (err) => {
|
||
console.error("uni.connectSocket fail:", err);
|
||
clearTimeout(this.connectTimeout);
|
||
this.connectionError = `连接失败: ${err.errMsg || "未知错误"}`;
|
||
this.socketConnected = false;
|
||
},
|
||
});
|
||
|
||
if (!this.socketTask) {
|
||
clearTimeout(this.connectTimeout);
|
||
this.connectionError = "当前环境不支持WebSocket";
|
||
console.error("initSocket: socketTask 为 null");
|
||
return;
|
||
}
|
||
|
||
if (typeof this.socketTask.onOpen === "function") {
|
||
console.log("使用 Task 级别事件绑定", this.socketTask);
|
||
this.bindTaskSocketEvents();
|
||
} else {
|
||
console.log("使用全局事件绑定", this.socketTask);
|
||
this.bindGlobalSocketEvents();
|
||
}
|
||
} catch (error) {
|
||
console.error("initSocket 异常:", error);
|
||
clearTimeout(this.connectTimeout);
|
||
this.connectionError = `连接异常: ${error.message || "未知错误"}`;
|
||
}
|
||
},
|
||
cleanupSocket() {
|
||
// 清除连接超时定时器
|
||
if (this.connectTimeout) {
|
||
clearTimeout(this.connectTimeout);
|
||
this.connectTimeout = null;
|
||
}
|
||
|
||
if (this.socketTask && typeof this.socketTask.close === "function") {
|
||
try {
|
||
this.socketTask.close();
|
||
console.log("WebSocket 连接已关闭 (Task级别)");
|
||
} catch (error) {
|
||
console.warn("关闭WebSocket失败", error);
|
||
}
|
||
} else {
|
||
try {
|
||
uni.closeSocket && uni.closeSocket({});
|
||
console.log("WebSocket 连接已关闭 (全局)");
|
||
} catch (error) {
|
||
console.warn("关闭WebSocket失败", error);
|
||
}
|
||
}
|
||
this.unbindGlobalSocketEvents();
|
||
this.socketTask = null;
|
||
this.socketConnected = false;
|
||
},
|
||
bindTaskSocketEvents() {
|
||
if (!this.socketTask) return;
|
||
this.socketTask.onOpen(() => {
|
||
console.log("NFC WebSocket 已连接 (Task级别)");
|
||
if (this.connectTimeout) {
|
||
clearTimeout(this.connectTimeout);
|
||
this.connectTimeout = null;
|
||
}
|
||
this.socketConnected = true;
|
||
this.connectionError = "";
|
||
this.lastMessage = "连接成功，等待刷卡...";
|
||
});
|
||
this.socketTask.onClose((event) => {
|
||
console.warn("NFC WebSocket 连接关闭 (Task级别)", event);
|
||
if (this.connectTimeout) {
|
||
clearTimeout(this.connectTimeout);
|
||
this.connectTimeout = null;
|
||
}
|
||
this.socketConnected = false;
|
||
this.socketTask = null;
|
||
if (!this.connectionError) {
|
||
this.connectionError = "连接已断开";
|
||
}
|
||
});
|
||
this.socketTask.onError((error) => {
|
||
console.error("NFC WebSocket 错误 (Task级别)", error);
|
||
if (this.connectTimeout) {
|
||
clearTimeout(this.connectTimeout);
|
||
this.connectTimeout = null;
|
||
}
|
||
|
||
// 解析错误信息
|
||
let errorMsg = error.errMsg || error.message || "连接失败";
|
||
let userFriendlyMsg = "连接失败";
|
||
|
||
// 处理 Invalid HTTP status 错误
|
||
if (
|
||
errorMsg.includes("Invalid HTTP status") ||
|
||
error.errCode === 1004
|
||
) {
|
||
userFriendlyMsg =
|
||
"服务器不支持WebSocket或路径不存在\n请检查：\n1. 服务器是否正常运行\n2. WebSocket路径是否正确\n3. 服务器是否支持WebSocket协议";
|
||
console.error("WebSocket握手失败，可能原因：", {
|
||
url: this.buildSocketUrl(),
|
||
errorCode: error.errCode,
|
||
errorMsg: errorMsg,
|
||
suggestion: "服务器可能返回了404或500错误，请检查服务器日志",
|
||
});
|
||
} else if (errorMsg.includes("timeout")) {
|
||
userFriendlyMsg = "连接超时，请检查网络连接";
|
||
} else if (errorMsg.includes("fail")) {
|
||
userFriendlyMsg = "网络连接失败，请检查网络和服务器地址";
|
||
}
|
||
|
||
this.connectionError = userFriendlyMsg;
|
||
this.socketConnected = false;
|
||
});
|
||
this.socketTask.onMessage((event) => {
|
||
this.handleSocketMessage(event);
|
||
|
||
console.log("WebSocket <UNK>接收到事件", event);
|
||
});
|
||
},
|
||
bindGlobalSocketEvents() {
|
||
if (this.usingGlobalSocketEvents) return;
|
||
this.usingGlobalSocketEvents = true;
|
||
this.globalSocketHandlers = {
|
||
open: () => {
|
||
console.log("NFC WebSocket 已连接 (全局事件)");
|
||
if (this.connectTimeout) {
|
||
clearTimeout(this.connectTimeout);
|
||
this.connectTimeout = null;
|
||
}
|
||
this.socketConnected = true;
|
||
this.connectionError = "";
|
||
this.lastMessage = "连接成功，等待刷卡...";
|
||
},
|
||
close: (event) => {
|
||
console.warn("NFC WebSocket 连接关闭 (全局事件)", event);
|
||
if (this.connectTimeout) {
|
||
clearTimeout(this.connectTimeout);
|
||
this.connectTimeout = null;
|
||
}
|
||
this.socketConnected = false;
|
||
if (!this.connectionError) {
|
||
this.connectionError = "连接已断开";
|
||
}
|
||
},
|
||
error: (error) => {
|
||
console.error("NFC WebSocket 错误 (全局事件)", error);
|
||
if (this.connectTimeout) {
|
||
clearTimeout(this.connectTimeout);
|
||
this.connectTimeout = null;
|
||
}
|
||
|
||
// 解析错误信息
|
||
let errorMsg = error.errMsg || error.message || "连接失败";
|
||
let userFriendlyMsg = "连接失败";
|
||
|
||
// 处理 Invalid HTTP status 错误
|
||
if (
|
||
errorMsg.includes("Invalid HTTP status") ||
|
||
error.errCode === 1004
|
||
) {
|
||
userFriendlyMsg =
|
||
"服务器不支持WebSocket或路径不存在\n请检查：\n1. 服务器是否正常运行\n2. WebSocket路径是否正确\n3. 服务器是否支持WebSocket协议";
|
||
console.error("WebSocket握手失败，可能原因：", {
|
||
url: this.buildSocketUrl(),
|
||
errorCode: error.errCode,
|
||
errorMsg: errorMsg,
|
||
suggestion: "服务器可能返回了404或500错误，请检查服务器日志",
|
||
});
|
||
} else if (errorMsg.includes("timeout")) {
|
||
userFriendlyMsg = "连接超时，请检查网络连接";
|
||
} else if (errorMsg.includes("fail")) {
|
||
userFriendlyMsg = "网络连接失败，请检查网络和服务器地址";
|
||
}
|
||
this.connectionError = userFriendlyMsg;
|
||
this.socketConnected = false;
|
||
},
|
||
message: (event) => {
|
||
this.handleSocketMessage(event);
|
||
},
|
||
};
|
||
uni.onSocketOpen && uni.onSocketOpen(this.globalSocketHandlers.open);
|
||
uni.onSocketClose && uni.onSocketClose(this.globalSocketHandlers.close);
|
||
uni.onSocketError && uni.onSocketError(this.globalSocketHandlers.error);
|
||
uni.onSocketMessage &&
|
||
uni.onSocketMessage(this.globalSocketHandlers.message);
|
||
},
|
||
unbindGlobalSocketEvents() {
|
||
if (!this.usingGlobalSocketEvents || !this.globalSocketHandlers) return;
|
||
const { open, close, error, message } = this.globalSocketHandlers;
|
||
uni.offSocketOpen && open && uni.offSocketOpen(open);
|
||
uni.offSocketClose && close && uni.offSocketClose(close);
|
||
uni.offSocketError && error && uni.offSocketError(error);
|
||
uni.offSocketMessage && message && uni.offSocketMessage(message);
|
||
this.usingGlobalSocketEvents = false;
|
||
this.globalSocketHandlers = null;
|
||
},
|
||
handleSocketMessage(event) {
|
||
let message = event?.data;
|
||
this.lastMessage = "";
|
||
try {
|
||
if (typeof message === "string") {
|
||
const trimmed = message.trim();
|
||
if (trimmed.startsWith("{") && trimmed.endsWith("}")) {
|
||
const parsed = JSON.parse(trimmed);
|
||
if (parsed.cardNo || parsed.cardNumber || parsed.nfcNo) {
|
||
this.cardNo = parsed.cardNo || parsed.cardNumber || parsed.nfcNo;
|
||
this.lastMessage = "已接收卡号";
|
||
uni.showToast({ title: "收到卡号", icon: "success" });
|
||
return;
|
||
}
|
||
this.lastMessage = parsed.msg || trimmed;
|
||
return;
|
||
} else {
|
||
this.cardNo = trimmed.replace(/^['"]|['"]$/g, "");
|
||
console.log("接收到的卡号", this.cardNo);
|
||
this.lastMessage = "已接收卡号";
|
||
uni.showToast({ title: "收到卡号", icon: "success" });
|
||
return;
|
||
}
|
||
} else if (typeof message === "object" && message) {
|
||
const data = message.data || message;
|
||
if (data.cardNo || data.cardNumber || data.nfcNo) {
|
||
this.cardNo = data.cardNo || data.cardNumber || data.nfcNo;
|
||
this.lastMessage = "已接收卡号";
|
||
uni.showToast({ title: "收到卡号", icon: "success" });
|
||
return;
|
||
}
|
||
}
|
||
this.lastMessage = "收到未知消息";
|
||
} catch (error) {
|
||
console.error("解析WebSocket消息失败", error, message);
|
||
this.lastMessage = "消息解析失败";
|
||
}
|
||
},
|
||
resetCard() {
|
||
this.cardNo = "";
|
||
this.lastMessage = "";
|
||
},
|
||
handleRetry() {
|
||
this.initSocket();
|
||
},
|
||
// 测试服务器连接（用于诊断）
|
||
async testServerConnection() {
|
||
try {
|
||
const { baseUrl } = getRequestConfig();
|
||
console.log("测试服务器连接:", baseUrl);
|
||
|
||
const token = getToken();
|
||
if (!token) {
|
||
uni.showModal({
|
||
title: "未登录",
|
||
content: "请先登录后再测试服务器连接",
|
||
showCancel: false,
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 测试 WebSocket 服务器是否可达
|
||
const isHttps = baseUrl.startsWith("https://");
|
||
const protocol = isHttps ? "wss" : "ws";
|
||
const host = baseUrl.replace(/^https?:\/\//, "").replace(/\/$/, "");
|
||
const testUrl = `${protocol}://${host}${WS_PATH}?token=${encodeURIComponent(token)}&mac=${FIXED_MAC}`;
|
||
|
||
console.log("测试 WebSocket URL:", testUrl.replace(token, "***"));
|
||
|
||
uni.showLoading({ title: "测试连接中...", mask: true });
|
||
|
||
// 尝试连接 WebSocket 来测试服务器
|
||
const testSocket = uni.connectSocket({
|
||
url: testUrl,
|
||
success: () => {
|
||
console.log("WebSocket 连接测试：连接请求已发送");
|
||
},
|
||
fail: (err) => {
|
||
console.error("WebSocket 连接测试失败:", err);
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
title: "服务器连接测试",
|
||
content: `无法连接到 WebSocket 服务器\n错误: ${err.errMsg || "未知错误"}\n\n请检查：\n1. 服务器地址是否正确 (${host})\n2. WebSocket 服务是否运行\n3. 网络是否正常\n4. Token 是否有效`,
|
||
showCancel: false,
|
||
});
|
||
},
|
||
});
|
||
|
||
// 设置超时
|
||
const timeout = setTimeout(() => {
|
||
testSocket.close();
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
title: "连接超时",
|
||
content: `WebSocket 连接超时\n\n请检查：\n1. 服务器地址: ${host}\n2. WebSocket 路径: ${WS_PATH}\n3. 服务器是否正常运行`,
|
||
showCancel: false,
|
||
});
|
||
}, 5000);
|
||
|
||
testSocket.onOpen(() => {
|
||
clearTimeout(timeout);
|
||
testSocket.close();
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: "服务器连接正常",
|
||
icon: "success",
|
||
duration: 2000,
|
||
});
|
||
});
|
||
|
||
testSocket.onError((err) => {
|
||
clearTimeout(timeout);
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
title: "服务器连接测试",
|
||
content: `WebSocket 连接失败\n错误: ${err.errMsg || "未知错误"}\n\n请检查：\n1. 服务器地址是否正确\n2. WebSocket 服务是否运行\n3. Token 是否有效`,
|
||
showCancel: false,
|
||
});
|
||
});
|
||
} catch (error) {
|
||
console.error("测试连接异常:", error);
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: "测试失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
},
|
||
async handleBind() {
|
||
if (!this.canSubmit || this.binding) return;
|
||
this.binding = true;
|
||
uni.showLoading({ title: "提交中...", mask: true });
|
||
try {
|
||
const payload = {
|
||
// memorialMac: this.deviceMac,
|
||
nfcMac: this.cardNo,
|
||
};
|
||
if (this.unitId) {
|
||
payload.memorialId = this.unitId;
|
||
}
|
||
const res = await bindNfcCard(payload);
|
||
if (res && (res.code === 200 || res.status === 200)) {
|
||
uni.showToast({ title: res.msg || "绑定成功", icon: "success" });
|
||
setTimeout(() => {
|
||
uni.navigateBack({ delta: 1 });
|
||
}, 800);
|
||
} else {
|
||
uni.showToast({
|
||
title: (res && res.msg) || "绑定失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error("提交绑定失败", error);
|
||
uni.showToast({ title: "提交失败，请重试", icon: "none" });
|
||
} finally {
|
||
this.binding = false;
|
||
uni.hideLoading();
|
||
}
|
||
},
|
||
// NFC 相关方法
|
||
initNFC() {
|
||
// 检查是否支持 NFC（微信小程序环境）
|
||
// #ifdef MP-WEIXIN
|
||
if (typeof wx === "undefined" || !wx.getNFCAdapter) {
|
||
console.warn("当前环境不支持 NFC 功能");
|
||
this.nfcSupported = false;
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 获取 NFC 适配器
|
||
const nfcAdapter = wx.getNFCAdapter();
|
||
if (!nfcAdapter) {
|
||
console.warn("无法获取 NFC 适配器");
|
||
this.nfcSupported = false;
|
||
return;
|
||
}
|
||
|
||
this.nfcAdapter = nfcAdapter;
|
||
this.nfcSupported = true;
|
||
|
||
// 开始发现 NFC 标签
|
||
this.startNFCDiscovery();
|
||
} catch (error) {
|
||
console.error("初始化 NFC 失败:", error);
|
||
this.nfcSupported = false;
|
||
this.nfcError = error.message || "初始化失败";
|
||
}
|
||
// #endif
|
||
|
||
// #ifndef MP-WEIXIN
|
||
// 非微信小程序环境，不支持 NFC
|
||
console.warn("NFC 功能仅在微信小程序中支持");
|
||
this.nfcSupported = false;
|
||
// #endif
|
||
},
|
||
startNFCDiscovery() {
|
||
if (!this.nfcAdapter) return;
|
||
|
||
try {
|
||
// 监听 NFC 标签发现事件
|
||
this.nfcAdapter.onDiscovered((res) => {
|
||
this.handleNfcDiscovered(res);
|
||
});
|
||
|
||
// 开始发现 NFC 标签
|
||
this.nfcAdapter.startDiscovery({
|
||
success: () => {
|
||
console.log("NFC 发现已启动");
|
||
this.nfcEnabled = true;
|
||
this.nfcError = "";
|
||
this.lastMessage = "NFC 已开启，请将卡片贴近手机";
|
||
},
|
||
fail: (err) => {
|
||
console.error("启动 NFC 发现失败:", err);
|
||
this.nfcEnabled = false;
|
||
this.nfcError = err.errMsg || "启动失败";
|
||
|
||
// 如果是权限问题，给出提示
|
||
if (err.errMsg && err.errMsg.includes("permission")) {
|
||
this.nfcError = "需要 NFC 权限，请在设置中开启";
|
||
} else if (err.errMsg && err.errMsg.includes("not support")) {
|
||
this.nfcError = "设备不支持 NFC 功能";
|
||
this.nfcSupported = false;
|
||
}
|
||
},
|
||
});
|
||
} catch (error) {
|
||
console.error("启动 NFC 发现异常:", error);
|
||
this.nfcEnabled = false;
|
||
this.nfcError = error.message || "启动异常";
|
||
}
|
||
},
|
||
handleNfcDiscovered(res) {
|
||
console.log("发现 NFC 标签:", res);
|
||
|
||
try {
|
||
let cardNo = "";
|
||
|
||
console.log("移动号获取NFC:res", res);
|
||
console.log("res.id 类型:", typeof res.id, res.id);
|
||
console.log("res.techs:", res.techs);
|
||
|
||
// NFC 卡号主要存储在 res.id 中，格式为 ArrayBuffer
|
||
// 对于 MIFARE Classic 等卡片，UID 就存储在 id 字段
|
||
// 根据调试信息：[[ArrayBufferData]]: 1312 表示4字节的数值
|
||
if (res.id) {
|
||
// id 通常是 ArrayBuffer，需要转换为字符串
|
||
if (res.id instanceof ArrayBuffer) {
|
||
// 将 ArrayBuffer 转换为十六进制字符串
|
||
const uint8Array = new Uint8Array(res.id);
|
||
const bytes = Array.from(uint8Array);
|
||
|
||
console.log("=== NFC 卡号提取详情 ===");
|
||
console.log("ArrayBuffer 字节长度:", res.id.byteLength);
|
||
console.log("ArrayBuffer 字节数组（十进制）:", bytes);
|
||
console.log("ArrayBuffer 字节数组（十六进制）:", bytes.map(b => "0x" + b.toString(16).padStart(2, "0").toUpperCase()));
|
||
|
||
// 转换为十六进制字符串（每字节两位，不足补0）
|
||
// NFC 卡号通常按照字节顺序（大端序）存储
|
||
cardNo = bytes
|
||
.join("")
|
||
.toUpperCase();
|
||
|
||
// 如果字节数组是 [0, 0, 5, 32]，则卡号为 "00000520"
|
||
// 如果字节数组是 [32, 5, 0, 0]，则卡号为 "20050000"
|
||
console.log("转换后的卡号（十六进制字符串）:", cardNo);
|
||
console.log("卡号长度:", cardNo.length, "字符");
|
||
console.log("========================");
|
||
} else if (typeof res.id === "string") {
|
||
cardNo = res.id;
|
||
console.log("卡号（字符串）:", cardNo);
|
||
} else {
|
||
console.warn("res.id 格式未知:", res.id);
|
||
}
|
||
}
|
||
|
||
// 如果 id 字段没有值，尝试从 techs 中获取
|
||
if (!cardNo && res.techs && res.techs.length > 0) {
|
||
// 尝试从 techs 中读取数据
|
||
for (const tech of res.techs) {
|
||
if (tech.id) {
|
||
if (tech.id instanceof ArrayBuffer) {
|
||
const uint8Array = new Uint8Array(tech.id);
|
||
cardNo = Array.from(uint8Array)
|
||
.map((b) => b.toString(16).padStart(2, "0"))
|
||
.join("")
|
||
.toUpperCase();
|
||
break;
|
||
} else if (typeof tech.id === "string") {
|
||
cardNo = tech.id;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 如果还是没有获取到，尝试从其他字段获取
|
||
if (!cardNo) {
|
||
// 尝试从 res 的其他字段获取
|
||
if (res.serialNumber) {
|
||
cardNo = res.serialNumber;
|
||
} else if (res.uid) {
|
||
cardNo = res.uid;
|
||
} else if (res.cardId) {
|
||
cardNo = res.cardId;
|
||
}
|
||
}
|
||
|
||
if (cardNo) {
|
||
// 清理卡号格式（去除空格、冒号等）
|
||
cardNo = cardNo.replace(/[\s:]/g, "").toUpperCase();
|
||
this.cardNo = cardNo;
|
||
this.lastMessage = "已通过 NFC 读取卡号";
|
||
uni.showToast({
|
||
title: "读取成功",
|
||
icon: "success",
|
||
duration: 1500,
|
||
});
|
||
console.log("NFC 读取到的卡号:", cardNo);
|
||
} else {
|
||
console.warn("无法从 NFC 标签中提取卡号:", res);
|
||
uni.showToast({
|
||
title: "无法读取卡号",
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error("处理 NFC 标签数据失败:", error);
|
||
uni.showToast({
|
||
title: "读取失败",
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
}
|
||
},
|
||
cleanupNFC() {
|
||
if (this.nfcAdapter) {
|
||
try {
|
||
// 停止 NFC 发现
|
||
this.nfcAdapter.stopDiscovery({
|
||
success: () => {
|
||
console.log("NFC 发现已停止");
|
||
},
|
||
fail: (err) => {
|
||
console.warn("停止 NFC 发现失败:", err);
|
||
},
|
||
});
|
||
} catch (error) {
|
||
console.warn("清理 NFC 资源失败:", error);
|
||
}
|
||
this.nfcAdapter = null;
|
||
}
|
||
this.nfcEnabled = false;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
width: 100%;
|
||
padding-bottom: 40rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.content {
|
||
padding: 0 32rpx 60rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.status-card,
|
||
.form-card {
|
||
background: rgba(255, 255, 255, 0.92);
|
||
border-radius: 24rpx;
|
||
padding: 32rpx;
|
||
margin-top: 32rpx;
|
||
box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.status-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.status-dot {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
border-radius: 50%;
|
||
background: #f0b400;
|
||
}
|
||
|
||
.status-dot.online {
|
||
background: #3ac569;
|
||
}
|
||
|
||
.status-dot.offline {
|
||
background: #f56c6c;
|
||
}
|
||
|
||
.status-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.status-desc {
|
||
margin-top: 12rpx;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.nfc-hint {
|
||
display: block;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.nfc-hint-text {
|
||
color: #4a90e2;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.nfc-status {
|
||
margin-top: 24rpx;
|
||
padding: 20rpx;
|
||
background: rgba(74, 144, 226, 0.08);
|
||
border-radius: 16rpx;
|
||
border-left: 4rpx solid #4a90e2;
|
||
}
|
||
|
||
.nfc-status-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.nfc-status-title {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.nfc-error-text {
|
||
margin-top: 12rpx;
|
||
padding: 12rpx;
|
||
background: #fef0f0;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.card-box {
|
||
margin-top: 24rpx;
|
||
border: 2rpx dashed #f0b400;
|
||
border-radius: 20rpx;
|
||
padding: 24rpx;
|
||
background: #fff9eb;
|
||
}
|
||
|
||
.card-box.ready {
|
||
border-color: #3ac569;
|
||
background: #effbf4;
|
||
}
|
||
|
||
.card-label {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.card-value {
|
||
display: block;
|
||
margin-top: 16rpx;
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.error-text {
|
||
margin-top: 16rpx;
|
||
padding: 16rpx;
|
||
background: #fef0f0;
|
||
border-radius: 12rpx;
|
||
border-left: 4rpx solid #f56c6c;
|
||
}
|
||
|
||
.error-content {
|
||
color: #f56c6c;
|
||
font-size: 24rpx;
|
||
line-height: 1.6;
|
||
white-space: pre-line;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.hint-text {
|
||
margin-top: 16rpx;
|
||
color: #999;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.status-actions {
|
||
margin-top: 24rpx;
|
||
display: flex;
|
||
gap: 32rpx;
|
||
}
|
||
|
||
.text-btn {
|
||
font-size: 26rpx;
|
||
color: #4a90e2;
|
||
}
|
||
|
||
.field {
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.field.readonly {
|
||
padding: 24rpx;
|
||
background: #f9f9f9;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.label {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-bottom: 12rpx;
|
||
display: block;
|
||
}
|
||
|
||
.input {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
border-radius: 16rpx;
|
||
background: #f8f8f8;
|
||
padding: 0 24rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.placeholder {
|
||
color: #bbb;
|
||
}
|
||
|
||
.unit-value {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.primary-btn {
|
||
height: 96rpx;
|
||
border-radius: 16rpx;
|
||
background: linear-gradient(135deg, #f0b400, #f08400);
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.primary-btn.disabled {
|
||
opacity: 0.5;
|
||
}
|
||
</style>
|