feat: nfc写入弹窗
This commit is contained in:
parent
698a8ed05b
commit
54ee5d755c
|
|
@ -0,0 +1,208 @@
|
||||||
|
<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">A31栋宿舍楼道口</text>
|
||||||
|
<u-tag class="tag" text="室内" mode="light" />
|
||||||
|
<!-- <u-tag
|
||||||
|
class="tag"
|
||||||
|
:text="areaType"
|
||||||
|
mode="light"
|
||||||
|
:type="
|
||||||
|
areaType === '室外'
|
||||||
|
? 'success'
|
||||||
|
: areaType === '特殊'
|
||||||
|
? 'warning'
|
||||||
|
: 'primary'
|
||||||
|
"
|
||||||
|
/> -->
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 副标题 - 负责人 -->
|
||||||
|
<view class="dialog-subtitle"> 区域主负责人：{{ "张三" }} </view>
|
||||||
|
|
||||||
|
<!-- 中间图片 -->
|
||||||
|
<view class="dialog-image-container">
|
||||||
|
<!-- 替换为实际的图片路径 -->
|
||||||
|
<image
|
||||||
|
src="/static/images/nfc-dialog-icon.png"
|
||||||
|
mode="widthFix"
|
||||||
|
class="dialog-image"
|
||||||
|
></image>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 更换绑定链接 -->
|
||||||
|
<view class="change-binding" @click="handleChangeBinding">
|
||||||
|
更换绑定
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<view class="dialog-footer">
|
||||||
|
<button class="confirm-button" @click="handleConfirm">知道了</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { loginApi } from "@/api/apiList";
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
// 控制弹窗显示/隐藏
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 可以添加更多 props 来传递动态数据，例如标题、负责人等
|
||||||
|
// title: String,
|
||||||
|
// responsiblePerson: String,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
onLoad() {},
|
||||||
|
methods: {
|
||||||
|
// 关闭弹窗（点击遮罩）
|
||||||
|
closeDialog() {
|
||||||
|
// 推荐通过事件通知父组件关闭
|
||||||
|
this.$emit("close");
|
||||||
|
},
|
||||||
|
// 点击更换绑定
|
||||||
|
handleChangeBinding() {
|
||||||
|
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 的情况
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</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 {
|
||||||
|
width: 200rpx; /* 根据图片调整 */
|
||||||
|
height: auto;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-image {
|
||||||
|
width: 100%;
|
||||||
|
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>
|
||||||
|
|
@ -18,23 +18,45 @@
|
||||||
<view class="result-content">NFC卡已成功绑定子区域</view>
|
<view class="result-content">NFC卡已成功绑定子区域</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<view>
|
||||||
|
<button @click="showDialog = true">显示弹窗</button>
|
||||||
|
<bind-dialog
|
||||||
|
:visible="showDialog"
|
||||||
|
@close="showDialog = false"
|
||||||
|
@changeBinding="onChangeBinding"
|
||||||
|
@confirm="onConfirm"
|
||||||
|
></bind-dialog>
|
||||||
|
</view>
|
||||||
|
|
||||||
<u-tabbar :list="vuex_tabbar"></u-tabbar>
|
<u-tabbar :list="vuex_tabbar"></u-tabbar>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { loginApi } from "@/api/apiList";
|
import { loginApi } from "@/api/apiList";
|
||||||
|
import BindDialog from "@/pages/adminNfc/components/bindDialog.vue"; // 确保路径正确
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
BindDialog,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
phone: "13800451500",
|
showDialog: false,
|
||||||
pwd: "123456",
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
onLoad() {},
|
||||||
mounted() {
|
mounted() {
|
||||||
uni.hideLoading(); // 关闭 Loading
|
uni.hideLoading(); // 关闭 Loading
|
||||||
},
|
},
|
||||||
onLoad() {},
|
methods: {
|
||||||
methods: {},
|
onChangeBinding() {
|
||||||
|
console.log("点击了更换绑定");
|
||||||
|
// 处理更换绑定的逻辑
|
||||||
|
},
|
||||||
|
onConfirm() {
|
||||||
|
console.log("点击了知道了");
|
||||||
|
// 处理确认逻辑
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue