310 lines
7.9 KiB
Vue
310 lines
7.9 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">
|
|
<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" :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 }}
|
|
</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">
|
|
<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 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, 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() {
|
|
this.getAreaFn()
|
|
},
|
|
onShow() {
|
|
this.getDataFn()
|
|
},
|
|
methods: {
|
|
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
|
|
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
|
|
},
|
|
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;
|
|
right: 210rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.search-input {
|
|
background-color: white;
|
|
border-radius: 50rpx;
|
|
}
|
|
|
|
.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>
|