367 lines
9.8 KiB
Vue
367 lines
9.8 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 遮罩层 -->
|
||
<view class="dialog-mask" v-if="visible" @click="closeDialog"></view>
|
||
|
||
<!-- 弹窗内容 -->
|
||
<view class="dialog-container" v-if="visible">
|
||
<view class="dialog-content">
|
||
<!-- 头部标题和标签 -->
|
||
<view class="dialog-header">
|
||
<text class="title">{{ currentRow.name }}</text>
|
||
<u-tag v-if="currentRow.areaType === '室内'" class="tag" text="室内" mode="light" />
|
||
<u-tag v-if="currentRow.areaType === '室外'" class="tag" text="室外" mode="light" type="success" />
|
||
<u-tag v-if="currentRow.areaType === '特殊'" class="tag" text="特殊" mode="light" type="warning" />
|
||
</view>
|
||
<!-- 副标题 - 负责人 -->
|
||
<!-- <view class="dialog-subtitle"> 区域主负责人：张三 </view> -->
|
||
<view>传入参数：{{ showMsg }}</view>
|
||
<view>接口返回结果：{{ resData }}</view>
|
||
|
||
<!-- 已存在卡片时显示图片 -->
|
||
<view class="dialog-image-container" v-if="isChange === true">
|
||
<!-- 替换为实际的图片路径 -->
|
||
<image src="/static/adminImg/nfc-result.png" mode="widthFix" class="dialog-image"></image>
|
||
</view>
|
||
|
||
<!-- 未存在nfc时显示图片 -->
|
||
<view class="dialog-image-container" v-if="isChange === false">
|
||
<!-- 替换为实际的图片路径 -->
|
||
<image src="/static/adminImg/step.png" mode="widthFix" style="width: 500rpx;"></image>
|
||
</view>
|
||
|
||
<!-- 更换绑定链接 -->
|
||
<view v-if="isChange === true" class="change-binding" @click="nfcChange">
|
||
更换绑定
|
||
</view>
|
||
|
||
<!-- -->
|
||
<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>
|
||
|
||
<!-- 底部按钮 -->
|
||
<view class="dialog-footer">
|
||
<button class="confirm-button" @click="handleConfirm">关闭</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { ResetNFCApi } from '@/api/apiAdmin'
|
||
export default {
|
||
props: {
|
||
// 控制弹窗显示/隐藏
|
||
visible: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 可以添加更多 props 来传递动态数据，例如标题、负责人等
|
||
// title: String,
|
||
// responsiblePerson: String,
|
||
currentRow: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
isChange: false,
|
||
step: 0,
|
||
isAdd: false,
|
||
lookData: {},
|
||
resData: {},
|
||
showMsg: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
// window.nfcInitFn = this.nfcInitFn
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
async nfcInitFn(data) {
|
||
if (!data) {
|
||
uni.showToast({ title: '未传入参数nfcInitFn', icon: 'none' })
|
||
return
|
||
}
|
||
this.showMsg = data
|
||
// uni.showModal({
|
||
// title: "提示",
|
||
// content: JSON.stringify(data) || '未传入参数',
|
||
// success: function (res) {
|
||
// },
|
||
// });
|
||
if (data.step === 8) {
|
||
uni.showToast({ title: '刷卡失败', icon: 'none' })
|
||
return
|
||
}
|
||
if (this.isChange === true) {
|
||
uni.showToast({ title: '请点击更换绑定后刷卡', icon: 'none' })
|
||
return
|
||
}
|
||
if (data.step === 1) {
|
||
this.step = 1
|
||
}
|
||
if (data.step === 2) {
|
||
this.step = 2
|
||
}
|
||
if (data.step === 3) {
|
||
this.step = 3
|
||
this.lookData = data
|
||
const req = {
|
||
AreaId: data.areaId,
|
||
pwd: data.pwd,
|
||
isAdd: this.isAdd
|
||
// "isAdd": true,
|
||
}
|
||
// console.log(req, '重置nfc--req')
|
||
// console.log(666)
|
||
|
||
// uni.showLoading({ title: '加载中...' })
|
||
const res = await ResetNFCApi(req).catch(e => e)
|
||
if (!res.succeed) {
|
||
uni.showToast({ title: res.error || '绑定失败', icon: 'none' })
|
||
}
|
||
this.resData = res
|
||
// 给安卓传参
|
||
let u = navigator.userAgent
|
||
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 //android
|
||
try {
|
||
if (isAndroid && AndroidJs) {
|
||
console.log('%c%s', 'color:red', '安卓--调用方法')
|
||
const reqRow = {
|
||
name: 'resetNFCRes',
|
||
data: res
|
||
}
|
||
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-----判断安卓苹果类型出错')
|
||
}
|
||
return
|
||
// uni.hideLoading()
|
||
console.log(res, '重置nfc')
|
||
this.resData = res
|
||
if (res.succeed) {
|
||
uni.showToast({ title: '绑定成功', icon: 'none' })
|
||
} else {
|
||
uni.showToast({ title: res.error || '绑定失败', icon: 'none' })
|
||
}
|
||
return
|
||
}
|
||
// 写入完成
|
||
if (data.step === 4) {
|
||
uni.showToast({ title: '绑定成功', icon: 'none' })
|
||
this.lookData = data
|
||
this.step = 4
|
||
this.$emit('closeRes') // 兼容只使用 :visible 和 @close 的情况
|
||
return
|
||
this.isAdd = true
|
||
this.isChange = true
|
||
// uni.showModal({
|
||
// title: '查看',
|
||
// content: JSON.stringify(data) || '未传入参数 initFn',
|
||
// showCancel: true,
|
||
// success: function (res) {}
|
||
// })
|
||
}
|
||
},
|
||
// 关闭弹窗（点击遮罩）
|
||
closeDialog() {
|
||
// 推荐通过事件通知父组件关闭
|
||
this.$emit('close')
|
||
},
|
||
// 点击更换绑定
|
||
nfcChange() {
|
||
this.isChange = false
|
||
this.step = 1
|
||
console.log(this.currentRow, 'this.currentRow--')
|
||
// 给安卓传参
|
||
let u = navigator.userAgent
|
||
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 //android
|
||
try {
|
||
if (isAndroid && AndroidJs) {
|
||
console.log('%c%s', 'color:red', '安卓--调用方法')
|
||
const reqRow = {
|
||
name: 'area',
|
||
data: {
|
||
// state: this.currentRow.state,
|
||
state: true,
|
||
areaId: this.currentRow.id
|
||
}
|
||
}
|
||
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(); // 可以选择点击后是否关闭弹窗
|
||
},
|
||
// 点击知道了
|
||
handleConfirm() {
|
||
this.$emit('confirm')
|
||
this.closeDialogInternal()
|
||
},
|
||
// 内部关闭，避免重复emit
|
||
closeDialogInternal() {
|
||
if (this.visible) {
|
||
this.$emit('update:visible', false) // 如果使用 v-model
|
||
this.$emit('close') // 兼容只使用 :visible 和 @close 的情况
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
visible(newVal) {
|
||
if (newVal) {
|
||
console.log('打开')
|
||
window.nfcInitFn = this.nfcInitFn
|
||
} else {
|
||
console.log('关闭')
|
||
// 清除 nfcInitFn 函数引用，避免内存泄漏
|
||
window.nfcInitFn = null
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.dialog-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
z-index: 999;
|
||
/* 确保遮罩在底层 */
|
||
}
|
||
|
||
.dialog-container {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 90%;
|
||
/* 或者根据需要设置固定宽度 */
|
||
// max-width: 600rpx;
|
||
z-index: 1000;
|
||
/* 确保弹窗在遮罩上 */
|
||
}
|
||
|
||
.dialog-content {
|
||
background-color: #ffffff;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
padding: 40rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.dialog-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* 居中显示 */
|
||
width: 100%;
|
||
margin-bottom: 16rpx;
|
||
|
||
.title {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.tag {
|
||
font-size: 28rpx;
|
||
padding: 6rpx 10rpx;
|
||
border-radius: 10rpx;
|
||
margin-top: 2rpx;
|
||
}
|
||
|
||
// .tag {
|
||
// background-color: #e6f0ff; /* 淡蓝色背景 */
|
||
// color: #4a90e2; /* 蓝色文字 */
|
||
// font-size: 24rpx;
|
||
// padding: 4rpx 12rpx;
|
||
// border-radius: 8rpx;
|
||
// }
|
||
}
|
||
|
||
.dialog-subtitle {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.dialog-image-container {
|
||
// border: 1px solid red;
|
||
height: auto;
|
||
margin-bottom: 30rpx;
|
||
|
||
.dialog-image {
|
||
width: 100%;
|
||
width: 200rpx;
|
||
/* 根据图片调整 */
|
||
height: auto;
|
||
/* 让图片自适应高度 */
|
||
}
|
||
}
|
||
|
||
.change-binding {
|
||
font-size: 28rpx;
|
||
color: #4a90e2;
|
||
/* 蓝色链接颜色 */
|
||
// margin-bottom: 50rpx;
|
||
cursor: pointer;
|
||
/* 鼠标悬停显示手型 */
|
||
}
|
||
|
||
.dialog-footer {
|
||
width: 100%;
|
||
}
|
||
|
||
.confirm-button {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
background-color: #4879e6;
|
||
/* 蓝色按钮背景 */
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
border-radius: 0 0 24rpx 24rpx;
|
||
border: none;
|
||
text-align: center;
|
||
|
||
// 移除按钮默认边框（H5）
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
/* 可以添加按钮按下的效果 */
|
||
// .confirm-button:active {
|
||
// background-color: #4879e6;
|
||
// }
|
||
</style>
|