读取卡片与安卓对接
This commit is contained in:
李彪
parent
3f9d75d597
commit
56db79cc23
|
|
@ -7,6 +7,10 @@ export const GetHomeDataApi = (data) =>
|
|||
export const GetRegionDataListApi = (data) =>
|
||||
request.get("/api/AdminApp/GetRegionDataList", data);
|
||||
|
||||
// 子区域列表
|
||||
export const GetAreaListApi = (data) =>
|
||||
request.get("/api/AdminApp/GetAreaList", data);
|
||||
|
||||
// 用户数据
|
||||
export const GetUserDataApi = (data) =>
|
||||
request.get("/api/AdminApp/GetUserData", data);
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<view class="dialog-content">
|
||||
<!-- 头部标题和标签 -->
|
||||
<view class="dialog-header">
|
||||
<text class="title">A31栋宿舍楼道口</text>
|
||||
<text class="title">{{currentRow.name}}</text>
|
||||
<u-tag class="tag" text="室内" mode="light" />
|
||||
<!-- <u-tag
|
||||
class="tag"
|
||||
|
|
@ -27,20 +27,28 @@
|
|||
<!-- 副标题 - 负责人 -->
|
||||
<view class="dialog-subtitle"> 区域主负责人：{{ "张三" }} </view>
|
||||
|
||||
<!-- 中间图片 -->
|
||||
<view class="dialog-image-container">
|
||||
<!-- 已存在卡片时显示图片 -->
|
||||
<view class="dialog-image-container" v-if="isChange === true">
|
||||
<!-- 替换为实际的图片路径 -->
|
||||
<image
|
||||
src="/static/adminImg/nfc-result.png"
|
||||
mode="widthFix"
|
||||
class="dialog-image"
|
||||
></image>
|
||||
<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 class="change-binding" @click="handleChangeBinding">
|
||||
<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 v-if="step === 4">{{lookData}}</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
|
|
@ -52,48 +60,84 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { loginApi } from "@/api/apiList";
|
||||
import { loginApi } from '@/api/apiList'
|
||||
export default {
|
||||
props: {
|
||||
// 控制弹窗显示/隐藏
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
// 可以添加更多 props 来传递动态数据，例如标题、负责人等
|
||||
// title: String,
|
||||
// responsiblePerson: String,
|
||||
currentRow: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
isChange: false,
|
||||
step: 0,
|
||||
lookData: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.nfcInitFn = this.nfcInitFn
|
||||
},
|
||||
mounted() {},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
nfcInitFn(data) {
|
||||
if (!data) {
|
||||
return uni.showToast({ title: '未传入参数 initFn', icon: 'none' })
|
||||
}
|
||||
if (data.step === 1) {
|
||||
this.step = 1
|
||||
}
|
||||
if (data.step === 2) {
|
||||
this.step = 2
|
||||
}
|
||||
if (data.step === 3) {
|
||||
this.step = 3
|
||||
}
|
||||
if (data.step === 4) {
|
||||
this.lookData = data
|
||||
this.step = 4
|
||||
// uni.showModal({
|
||||
// title: '查看',
|
||||
// content: JSON.stringify(data) || '未传入参数 initFn',
|
||||
// showCancel: true,
|
||||
// success: function (res) {}
|
||||
// })
|
||||
}
|
||||
},
|
||||
// 关闭弹窗（点击遮罩）
|
||||
closeDialog() {
|
||||
// 推荐通过事件通知父组件关闭
|
||||
this.$emit("close");
|
||||
this.$emit('close')
|
||||
},
|
||||
// 点击更换绑定
|
||||
handleChangeBinding() {
|
||||
this.$emit("changeBinding");
|
||||
nfcChange() {
|
||||
this.isChange = false
|
||||
this.step = 1
|
||||
// this.$emit('changeBinding')
|
||||
// this.closeDialogInternal(); // 可以选择点击后是否关闭弹窗
|
||||
},
|
||||
// 点击知道了
|
||||
handleConfirm() {
|
||||
this.$emit("confirm");
|
||||
this.closeDialogInternal();
|
||||
this.$emit('confirm')
|
||||
this.closeDialogInternal()
|
||||
},
|
||||
// 内部关闭，避免重复emit
|
||||
closeDialogInternal() {
|
||||
if (this.visible) {
|
||||
this.$emit("update:visible", false); // 如果使用 v-model
|
||||
this.$emit("close"); // 兼容只使用 :visible 和 @close 的情况
|
||||
this.$emit('update:visible', false) // 如果使用 v-model
|
||||
this.$emit('close') // 兼容只使用 :visible 和 @close 的情况
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -164,14 +208,14 @@ export default {
|
|||
}
|
||||
|
||||
.dialog-image-container {
|
||||
width: 200rpx; /* 根据图片调整 */
|
||||
// border: 1px solid red;
|
||||
height: auto;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.dialog-image {
|
||||
.dialog-image {
|
||||
width: 100%;
|
||||
width: 200rpx; /* 根据图片调整 */
|
||||
height: auto; /* 让图片自适应高度 */
|
||||
}
|
||||
}
|
||||
|
||||
.change-binding {
|
||||
|
|
|
|||
|
|
@ -11,9 +11,12 @@
|
|||
<view class="card-totel">{{ form.noBindnfc }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 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" border placeholder="搜索名称"></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>
|
||||
{{ selectVal }}
|
||||
|
|
@ -21,129 +24,163 @@
|
|||
<image src="/static/svg/down.svg" style="width: 30rpx; height: 30rpx; margin-left: 10rpx"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- tabs -->
|
||||
<u-tabs class="tabs-box" bg-color="#F6F8FC" :list="tabsList" :is-scroll="true" :current="tabCurrent"
|
||||
@change="tabChangeFn"></u-tabs>
|
||||
|
||||
<!-- tip -->
|
||||
<view class="tip-box">共10个子区域，其中5个未绑定</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">
|
||||
<view v-for="i in 80" class="item-box">
|
||||
<view class="item-title">子区域{{ i }}</view>
|
||||
<view v-if="i % 2 === 0" class="btn-have btn">已绑定</view>
|
||||
<view v-if="i % 2 !== 0" class="btn-none btn" @click="showDialog = true">去绑定</view>
|
||||
<view v-for="item in sonList" class="item-box">
|
||||
<view class="item-title">{{ item.name }}</view>
|
||||
<view v-if="item.state === true" class="btn-have btn" @click="dialogShowFn(item)">已绑定</view>
|
||||
<view v-if="item.state === false" class="btn-none btn" @click="dialogShowFn(item)">去绑定</view>
|
||||
</view>
|
||||
<view v-if="!sonList.length" style="height:100rpx;"></view>
|
||||
<u-empty v-if="!sonList.length" text="数据为空" mode="list"></u-empty>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 筛选的下拉 -->
|
||||
<u-action-sheet :list="options" title="请选择" @click="changeFn" v-model:value="selectShow"></u-action-sheet>
|
||||
<bind-dialog :visible="showDialog" @close="showDialog = false" @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>
|
||||
</template>
|
||||
<script>
|
||||
import { GetRegionDataListApi, GetHomeDataApi } from "@/api/apiAdmin.js";
|
||||
import BindDialog from "@/pages/adminNfc/components/bindDialog.vue"; // 确保路径正确
|
||||
import { GetRegionDataListApi, GetHomeDataApi, GetAreaListApi } from '@/api/apiAdmin.js'
|
||||
import BindDialog from '@/pages/adminNfc/components/bindDialog.vue' // 确保路径正确
|
||||
export default {
|
||||
components: {
|
||||
BindDialog,
|
||||
BindDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
"regionCount": 0,
|
||||
"areaCount": 0,
|
||||
"bindnfc": 0,
|
||||
"noBindnfc": 0
|
||||
regionCount: 0,
|
||||
areaCount: 0,
|
||||
bindnfc: 0,
|
||||
noBindnfc: 0
|
||||
},
|
||||
keyword: "",
|
||||
keyword: '',
|
||||
selectShow: false,
|
||||
showDialog: false,
|
||||
selectVal: "全部",
|
||||
selectVal: '筛选',
|
||||
options: [
|
||||
{
|
||||
text: "全部",
|
||||
text: '全部',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
text: "已绑定",
|
||||
text: '已绑定',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
text: "未绑定",
|
||||
},
|
||||
text: '未绑定',
|
||||
value: 2
|
||||
}
|
||||
],
|
||||
tabCurrent: 0,
|
||||
tabCurrentId: '',
|
||||
tabsList: [
|
||||
{
|
||||
name: "区域1",
|
||||
},
|
||||
{
|
||||
name: "区域2",
|
||||
},
|
||||
{
|
||||
name: "区域3",
|
||||
},
|
||||
{
|
||||
name: "区域4",
|
||||
},
|
||||
{
|
||||
name: "区域5",
|
||||
},
|
||||
|
||||
{
|
||||
name: "区域6",
|
||||
},
|
||||
{
|
||||
name: "区域7",
|
||||
},
|
||||
{
|
||||
name: "区域8",
|
||||
},
|
||||
// {
|
||||
// name: '区域1'
|
||||
// },
|
||||
// {
|
||||
// name: '区域2'
|
||||
// },
|
||||
],
|
||||
};
|
||||
// 子区域列表
|
||||
sonList: [],
|
||||
sonForm: {
|
||||
bindData: 0,
|
||||
countData: 0
|
||||
},
|
||||
currentRow: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
uni.hideLoading(); // 关闭 Loading
|
||||
uni.hideLoading() // 关闭 Loading
|
||||
},
|
||||
onLoad() {
|
||||
this.getAreaFn();
|
||||
this.getAreaFn()
|
||||
},
|
||||
onShow() {
|
||||
this.getDataFn();
|
||||
this.getDataFn()
|
||||
},
|
||||
methods: {
|
||||
async getDataFn() {
|
||||
const res = await GetHomeDataApi();
|
||||
console.log(res, "首页数据");
|
||||
Object.assign(this.form, res.data);
|
||||
dialogShowFn(row) {
|
||||
console.log(JSON.parse(JSON.stringify(row)), 'row--')
|
||||
this.currentRow = row
|
||||
this.$refs.dialogRef.isChange = row.state // 重置弹窗状态
|
||||
this.$refs.dialogRef.step = 0 // 重置弹窗状态
|
||||
this.showDialog = true
|
||||
},
|
||||
async getDataFn() {
|
||||
const res = await GetHomeDataApi()
|
||||
console.log(res, '首页数据')
|
||||
Object.assign(this.form, res.data)
|
||||
},
|
||||
// 获取区域列表
|
||||
async getAreaFn() {
|
||||
const res = await GetRegionDataListApi()
|
||||
console.log(res, "区域数据");
|
||||
this.tabsList = res.data.areaList
|
||||
console.log(res, '区域数据')
|
||||
this.tabsList = res.data
|
||||
if (this.tabsList.length > 0) {
|
||||
this.tabCurrentId = this.tabsList[0].id
|
||||
this.getSonAreaFn()
|
||||
}
|
||||
},
|
||||
// 获取子区域列表
|
||||
async getSonAreaFn() {
|
||||
const req = {
|
||||
regionId: this.tabCurrentId
|
||||
}
|
||||
if (this.keyword) {
|
||||
req.keyword = this.keyword
|
||||
}
|
||||
const findRow = this.options.find(x => x.text === this.selectVal)
|
||||
if (findRow) {
|
||||
req.type = findRow.value
|
||||
}
|
||||
const res = await GetAreaListApi(req)
|
||||
console.log(res, '子区域数据')
|
||||
this.sonList = res.data.data
|
||||
this.sonForm.bindData = res.data.bindData
|
||||
this.sonForm.countData = res.data.countData
|
||||
},
|
||||
async searchFn() {
|
||||
this.getSonAreaFn()
|
||||
},
|
||||
selectFn() {
|
||||
this.selectShow = true;
|
||||
this.selectShow = true
|
||||
},
|
||||
changeFn(val) {
|
||||
console.log(val, "val--");
|
||||
this.selectVal = this.options[val].text;
|
||||
console.log(val, 'val--')
|
||||
this.selectVal = this.options[val].text
|
||||
this.getSonAreaFn()
|
||||
},
|
||||
//
|
||||
tabChangeFn(val) {
|
||||
console.log(val, "val--");
|
||||
this.tabCurrent = val;
|
||||
// 清空已选的值
|
||||
this.keyword = ''
|
||||
this.selectVal = '筛选'
|
||||
console.log(val, 'val--')
|
||||
console.log(this.tabsList[val], 'tabsList--current')
|
||||
this.tabCurrent = val
|
||||
this.tabCurrentId = this.tabsList[val].id
|
||||
this.getSonAreaFn()
|
||||
},
|
||||
onChangeBinding() {
|
||||
console.log("点击了更换绑定");
|
||||
console.log('点击了更换绑定')
|
||||
// 处理更换绑定的逻辑
|
||||
},
|
||||
onConfirm() {
|
||||
console.log("点击了知道了");
|
||||
console.log('点击了知道了')
|
||||
// 处理确认逻辑
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
|
|
@ -178,24 +215,30 @@ export default {
|
|||
}
|
||||
|
||||
.card-left {
|
||||
background: url("/static/adminImg/icon-bg1.png") no-repeat right 32rpx bottom 20rpx / 60rpx 60rpx;
|
||||
background: url('/static/adminImg/icon-bg1.png') no-repeat right 32rpx bottom 20rpx / 60rpx 60rpx;
|
||||
background-color: #4974f3;
|
||||
}
|
||||
|
||||
.card-right {
|
||||
margin-left: 20rpx;
|
||||
background: url("/static/adminImg/icon-bg2.png") no-repeat right 32rpx bottom 20rpx / 60rpx 60rpx;
|
||||
background: url('/static/adminImg/icon-bg2.png') no-repeat right 32rpx bottom 20rpx / 60rpx 60rpx;
|
||||
background-color: #53d5a9;
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// border: 1px solid red;
|
||||
margin-top: 20rpx;
|
||||
// margin-top: 20rpx;
|
||||
padding: 20rpx;
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
right: 210rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.search-input {
|
||||
background-color: white;
|
||||
border-radius: 50rpx;
|
||||
|
|
@ -213,6 +256,7 @@ export default {
|
|||
text-align: center;
|
||||
padding-top: 10rpx;
|
||||
padding-bottom: 10rpx;
|
||||
// color: #4974f3;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Loading…
Reference in New Issue