LuYaShi
/
InspectionCleaning
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

刷卡与安卓交互

This commit is contained in:
李彪 2025-04-27 10:17:07 +08:00
parent 56db79cc23
commit 98d1fdc287
2 changed files with 105 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
pages/adminNfc/components/bindDialog.vue
View File

@ -8,7 +8,7 @@
<view class="dialog-content">
<!-- 头部标题和标签 -->
<view class="dialog-header">
<text class="title">{{currentRow.name}}</text>
<text class="title">{{ currentRow.name }}</text>
<u-tag class="tag" text="室内" mode="light" />
<!-- <u-tag
class="tag"
@ -48,7 +48,7 @@
<view v-if="step === 1">1.请将标签卡贴靠设备NFC识别处！</view>
<view v-if="step === 2">2.如果确定将该卡片写入该区域,请将标签卡贴靠设备xNFC识别处，否则请退出！</view>
<view v-if="step === 3">3.请再次将标签卡贴靠设备NFC识别处！</view>
<view v-if="step === 4">{{lookData}}</view>
<view v-if="step === 4">{{ lookData }}</view>
</view>
<!-- 底部按钮 -->
@ -86,12 +86,15 @@ export default {
mounted() {
window.nfcInitFn = this.nfcInitFn
},
onLoad() {},
onLoad() { },
methods: {
nfcInitFn(data) {
if (!data) {
return uni.showToast({ title: '未传入参数 initFn', icon: 'none' })
}
if (this.isChange === true) {
return uni.showToast({ title: '请点击更换绑定后刷卡', icon: 'none' })
}
if (data.step === 1) {
this.step = 1
}
@ -121,6 +124,29 @@ export default {
nfcChange() {
this.isChange = false
this.step = 1
try {
if (isAndroid && AndroidJs) {
console.log("%c%s", "color:red", "安卓--调用方法");
const reqRow = {
name: "area",
data: {
state: this.currentRow.state,
areaId: this.currentRow.id,
},
};
console.log(reqRow, 'reqRow--')
AndroidJs.func(JSON.stringify(reqRow)); // 给安卓传参
} else {
console.log("%c%s", "color:red", "苹果--调用方法");
const reqRow = {
name: "back-iphone",
data: "",
};
window.webkit.messageHandlers.func.postMessage(JSON.stringify(reqRow)); // 给ios 传参
}
} catch (e) {
console.log(e, "e-----判断安卓苹果类型出错");
}
// this.$emit('changeBinding')
// this.closeDialogInternal(); // 可以选择点击后是否关闭弹窗
},
@ -136,6 +162,18 @@ export default {
this.$emit('close') // 兼容只使用 :visible 和 @close 的情况
}
}
},
watch: {
visible(newVal) {
if (newVal) {
console.log('打开');
window.nfcInitFn = this.nfcInitFn
} else {
console.log('关闭');
// 清除 nfcInitFn 函数引用，避免内存泄漏
window.nfcInitFn = null
}
}
}
}
</script>
@ -148,7 +186,8 @@ export default {
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999; /* 确保遮罩在底层 */
z-index: 999;
/* 确保遮罩在底层 */
}
.dialog-container {
@ -156,9 +195,11 @@ export default {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%; /* 或者根据需要设置固定宽度 */
width: 90%;
/* 或者根据需要设置固定宽度 */
// max-width: 600rpx;
z-index: 1000; /* 确保弹窗在遮罩上 */
z-index: 1000;
/* 确保弹窗在遮罩上 */
}
.dialog-content {
@ -174,7 +215,8 @@ export default {
.dialog-header {
display: flex;
align-items: center;
justify-content: center; /* 居中显示 */
justify-content: center;
/* 居中显示 */
width: 100%;
margin-bottom: 16rpx;
@ -211,18 +253,23 @@ export default {
// border: 1px solid red;
height: auto;
margin-bottom: 30rpx;
.dialog-image {
width: 100%;
width: 200rpx; /* 根据图片调整 */
height: auto; /* 让图片自适应高度 */
width: 200rpx;
/* 根据图片调整 */
height: auto;
/* 让图片自适应高度 */
}
}
.change-binding {
font-size: 28rpx;
color: #4a90e2; /* 蓝色链接颜色 */
color: #4a90e2;
/* 蓝色链接颜色 */
// margin-bottom: 50rpx;
cursor: pointer; /* 鼠标悬停显示手型 */
cursor: pointer;
/* 鼠标悬停显示手型 */
}
.dialog-footer {
@ -233,12 +280,14 @@ export default {
width: 100%;
height: 88rpx;
line-height: 88rpx;
background-color: #4879e6; /* 蓝色按钮背景 */
background-color: #4879e6;
/* 蓝色按钮背景 */
color: #ffffff;
font-size: 32rpx;
border-radius: 0 0 24rpx 24rpx;
border: none;
text-align: center;
// 移除按钮默认边框（H5）
&::after {
border: none;
@ -248,5 +297,4 @@ export default {
/* 可以添加按钮按下的效果 */
// .confirm-button:active {
// background-color: #4879e6;
// }
</style>
// }</style>

47
pages/adminNfc/index.vue
View File

@ -12,10 +12,12 @@
</view>
</view>
<!-- tabs -->
<u-tabs class="tabs-box" bg-color="#F6F8FC" :list="tabsList" :is-scroll="true" :current="tabCurrent" @change="tabChangeFn"></u-tabs>
<u-tabs class="tabs-box" bg-color="#F6F8FC" :list="tabsList" :is-scroll="true" :current="tabCurrent"
@change="tabChangeFn"></u-tabs>
<!-- 搜索 -->
<view class="search-box">
<u-input class="search-input" v-model="keyword" :clearable="false" border placeholder="搜索名称" @keyup.enter="searchFn"></u-input>
<u-input class="search-input" v-model="keyword" :clearable="false" border placeholder="搜索名称"
@keyup.enter="searchFn"></u-input>
<u-icon name="search" class="search-icon" size="40" @click="searchFn"></u-icon>
<view class="select-box" @click="selectFn">
<view>
@ -26,7 +28,8 @@
</view>
<!-- tip -->
<view v-if="sonList.length" class="tip-box">共{{sonForm.countData}}个子区域，其中{{sonForm.countData - sonForm.bindData}}个未绑定</view>
<view v-if="sonList.length" class="tip-box">共{{ sonForm.countData }}个子区域，其中{{ sonForm.countData -
sonForm.bindData }}个未绑定</view>
<!-- 列表 -->
<view class="list-box">
<scroll-view :scroll-y="true" class="scroll-Y">
@ -42,7 +45,8 @@
<!-- 筛选的下拉 -->
<u-action-sheet :list="options" title="请选择" @click="changeFn" v-model:value="selectShow"></u-action-sheet>
<!-- 弹窗 -->
<bind-dialog ref="dialogRef" :visible="showDialog" @close="showDialog = false" :currentRow="currentRow" @changeBinding="onChangeBinding" @confirm="onConfirm"></bind-dialog>
<bind-dialog ref="dialogRef" :visible="showDialog" @close="showDialog = false" :currentRow="currentRow"
@changeBinding="onChangeBinding" @confirm="onConfirm"></bind-dialog>
<u-tabbar :list="vuex_tabbar"></u-tabbar>
</view>
@ -110,10 +114,43 @@ export default {
},
methods: {
dialogShowFn(row) {
// 给安卓传参
let u = navigator.userAgent;
let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android
// 添加的时候给安卓传参
if (row.state === false) {
try {
if (isAndroid && AndroidJs) {
console.log("%c%s", "color:red", "安卓--调用方法");
const reqRow = {
name: "area",
data: {
state: row.state,
areaId: row.id,
},
};
console.log(reqRow, 'reqRow--')
AndroidJs.func(JSON.stringify(reqRow)); // 给安卓传参
} else {
console.log("%c%s", "color:red", "苹果--调用方法");
const reqRow = {
name: "back-iphone",
data: "",
};
window.webkit.messageHandlers.func.postMessage(JSON.stringify(reqRow)); // 给ios 传参
}
} catch (e) {
console.log(e, "e-----判断安卓苹果类型出错");
}
}
console.log(JSON.parse(JSON.stringify(row)), 'row--')
this.currentRow = row
this.$refs.dialogRef.isChange = row.state // 重置弹窗状态
this.$refs.dialogRef.step = 0 // 重置弹窗状态
if (row.state === false) {
this.$refs.dialogRef.step = 1 // 重置弹窗状态
}
this.showDialog = true
},
async getDataFn() {
@ -233,12 +270,14 @@ export default {
// border: 1px solid red;
// margin-top: 20rpx;
padding: 20rpx;
.search-icon {
position: absolute;
right: 210rpx;
top: 50%;
transform: translateY(-50%);
}
.search-input {
background-color: white;
border-radius: 50rpx;