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>
|
||||
|
||||
<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>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { loginApi } from "@/api/apiList";
|
||||
import BindDialog from "@/pages/adminNfc/components/bindDialog.vue"; // 确保路径正确
|
||||
export default {
|
||||
components: {
|
||||
BindDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
phone: "13800451500",
|
||||
pwd: "123456",
|
||||
showDialog: false,
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
mounted() {
|
||||
uni.hideLoading(); // 关闭 Loading
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {},
|
||||
methods: {
|
||||
onChangeBinding() {
|
||||
console.log("点击了更换绑定");
|
||||
// 处理更换绑定的逻辑
|
||||
},
|
||||
onConfirm() {
|
||||
console.log("点击了知道了");
|
||||
// 处理确认逻辑
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue