402 lines
10 KiB
Vue
402 lines
10 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 头部两个卡片 -->
|
|
<view class="card">
|
|
<view class="card-item card-left">
|
|
<view class="card-title">已绑定子区域数</view>
|
|
<view class="card-totel">{{ form.bindnfc }}</view>
|
|
</view>
|
|
<view class="card-item card-right" @click="changeFn(2)">
|
|
<view class="card-title">未绑定子区域数</view>
|
|
<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="搜索名称" @keyup.enter="searchFn" @clear="searchFn"></u-input>
|
|
<!-- <u-icon name="search" class="search-icon" size="40" @click="searchFn"></u-icon> -->
|
|
<u-button class="btn btn-search" type="primary" @click="searchFn">搜索</u-button>
|
|
<view class="select-box" @click="selectFn">
|
|
<view>
|
|
{{ selectVal }}
|
|
</view>
|
|
<image src="/static/svg/down.svg" style="width: 30rpx; height: 30rpx; margin-left: 10rpx"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- tip -->
|
|
<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="item in sonList" class="item-box" @click="dialogShowFn(item)">
|
|
<view class="item-title">{{ item.name }}</view>
|
|
<view v-if="item.state === true" class="btn-have btn">已绑定</view>
|
|
<view v-if="item.state === false" class="btn-none btn">去绑定</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 ref="dialogRef" :visible="showDialog" @close="showDialog = false" :currentRow="currentRow" @changeBinding="onChangeBinding" @confirm="onConfirm" @closeRes="closeResFn"></bind-dialog>
|
|
|
|
<u-tabbar :list="vuex_tabbar" :before-switch="beforeSwitch" :border-top="false"></u-tabbar>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { GetRegionDataListApi, GetHomeDataApi, GetAreaListApi } from '@/api/apiAdmin.js'
|
|
import BindDialog from '@/pages/adminNfc/components/bindDialog.vue' // 确保路径正确
|
|
export default {
|
|
components: {
|
|
BindDialog
|
|
},
|
|
data() {
|
|
return {
|
|
form: {
|
|
regionCount: 0,
|
|
areaCount: 0,
|
|
bindnfc: 0,
|
|
noBindnfc: 0
|
|
},
|
|
keyword: '',
|
|
selectShow: false,
|
|
showDialog: false,
|
|
selectVal: '筛选',
|
|
options: [
|
|
{
|
|
text: '全部',
|
|
value: 0
|
|
},
|
|
{
|
|
text: '已绑定',
|
|
value: 1
|
|
},
|
|
{
|
|
text: '未绑定',
|
|
value: 2
|
|
}
|
|
],
|
|
tabCurrent: 0,
|
|
tabCurrentId: '',
|
|
tabsList: [
|
|
// {
|
|
// name: '区域1'
|
|
// },
|
|
// {
|
|
// name: '区域2'
|
|
// },
|
|
],
|
|
// 子区域列表
|
|
sonList: [],
|
|
sonForm: {
|
|
bindData: 0,
|
|
countData: 0
|
|
},
|
|
currentRow: {}
|
|
}
|
|
},
|
|
mounted() {
|
|
uni.hideLoading() // 关闭 Loading
|
|
},
|
|
onLoad(e) {
|
|
console.log(e, 'e---')
|
|
this.getAreaFn()
|
|
},
|
|
onShow(e) {
|
|
console.log(e, 'e---onshow')
|
|
const searchType = uni.getStorageSync('search')
|
|
console.log(searchType, 'searchType---')
|
|
if (searchType === 1) {
|
|
this.selectVal = '筛选'
|
|
this.getAreaFn()
|
|
}
|
|
if (searchType === 2) {
|
|
this.selectVal = '已绑定'
|
|
this.getAreaFn()
|
|
}
|
|
if (searchType === 3) {
|
|
this.selectVal = '未绑定'
|
|
this.getAreaFn()
|
|
}
|
|
this.getDataFn()
|
|
console.log('%c%s', 'color:red', 'onSHow')
|
|
},
|
|
methods: {
|
|
beforeSwitch(e) {
|
|
console.log(e, 'e-')
|
|
uni.$emit('reset')
|
|
return true
|
|
},
|
|
|
|
dialogShowFn(row) {
|
|
// console.log(this.vuex_userData.nfcwrite)
|
|
// return
|
|
// 给安卓传参
|
|
let u = navigator.userAgent
|
|
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 //android
|
|
console.log(row.state, 'row.state--')
|
|
// 添加的时候给安卓传参
|
|
if (row.state === false) {
|
|
try {
|
|
if (isAndroid && AndroidJs) {
|
|
console.log('%c%s', 'color:red', '安卓--调用方法')
|
|
const reqRow = {
|
|
name: 'area',
|
|
data: {
|
|
// state: row.state,
|
|
state: true,
|
|
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.resData = ''
|
|
this.$refs.dialogRef.showMsg = ''
|
|
this.$refs.dialogRef.isAdd = !row.state
|
|
this.$refs.dialogRef.step = 0 // 重置弹窗状态
|
|
if (row.state === false) {
|
|
this.$refs.dialogRef.step = 1 // 重置弹窗状态
|
|
}
|
|
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
|
|
if (this.tabsList?.length > 0) {
|
|
this.tabCurrentId = this.tabsList[0].id
|
|
this.getSonAreaFn()
|
|
}
|
|
},
|
|
// 绑定成功
|
|
closeResFn() {
|
|
this.showDialog = false
|
|
uni.showToast({ title: '绑定成功', icon: 'none' })
|
|
setTimeout(() => {
|
|
this.getSonAreaFn()
|
|
this.getDataFn()
|
|
}, 500)
|
|
},
|
|
// 获取子区域列表
|
|
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
|
|
},
|
|
changeFn(val) {
|
|
console.log(val, 'val--')
|
|
this.selectVal = this.options[val].text
|
|
this.getSonAreaFn()
|
|
},
|
|
//
|
|
tabChangeFn(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('点击了更换绑定')
|
|
// 处理更换绑定的逻辑
|
|
},
|
|
onConfirm() {
|
|
console.log('点击了知道了')
|
|
// 处理确认逻辑
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
min-height: calc(100vh - 180rpx); // 确保容器有明确高度
|
|
// overflow: hidden;
|
|
background-color: #f6f8fc;
|
|
padding-bottom: 100rpx;
|
|
|
|
.card {
|
|
display: flex;
|
|
// margin-top: 30rpx;
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
|
|
.card-item {
|
|
position: relative;
|
|
flex: 1;
|
|
height: 150rpx;
|
|
border-radius: 30rpx;
|
|
color: white;
|
|
padding: 20rpx;
|
|
font-size: 30rpx;
|
|
|
|
.card-title {
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.card-totel {
|
|
padding-left: 20rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
|
|
.card-left {
|
|
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-color: #53d5a9;
|
|
}
|
|
}
|
|
|
|
.search-box {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
// border: 1px solid red;
|
|
// margin-top: 20rpx;
|
|
padding: 20rpx;
|
|
|
|
.search-icon {
|
|
position: absolute;
|
|
left: 320rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.search-input {
|
|
background-color: white;
|
|
border-radius: 50rpx;
|
|
}
|
|
.btn{
|
|
margin-left:20rpx;
|
|
width: 120rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
border-radius: 20rpx;
|
|
|
|
text-align: center;
|
|
}
|
|
.btn-search {
|
|
}
|
|
.btn-cancel {
|
|
background-color: white;
|
|
border: 1px solid transparent;
|
|
}
|
|
.select-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
// border: 1px solid red;
|
|
margin-left: 20rpx;
|
|
background-color: white;
|
|
width: 150rpx;
|
|
border-radius: 20rpx;
|
|
text-align: center;
|
|
padding-top: 10rpx;
|
|
padding-bottom: 10rpx;
|
|
// color: #4974f3;
|
|
}
|
|
}
|
|
|
|
.tip-box {
|
|
color: grey;
|
|
padding-left: 30rpx;
|
|
}
|
|
|
|
.list-box {
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
|
|
.item-box {
|
|
background-color: white;
|
|
margin-top: 20rpx;
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
height: 100rpx;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.item-title {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
// font-weight: bold;
|
|
}
|
|
|
|
.btn {
|
|
padding-left: 20rpx;
|
|
padding-right: 20rpx;
|
|
border-radius: 20rpx;
|
|
padding-top: 5rpx;
|
|
padding-bottom: 5rpx;
|
|
}
|
|
|
|
.btn-have {
|
|
background-color: #f5f5f5;
|
|
color: black;
|
|
}
|
|
|
|
.btn-none {
|
|
background-color: #4274dc;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|