InspectionCleaning/pages/adminNfc/index.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>
    <!-- 搜索 -->
    <view class="search-box">
      <u-input class="search-input" v-model="keyword" border placeholder="搜索名称"></u-input>
      <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>
    <!-- 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 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>
      </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>
    <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"; // 确保路径正确
export default {
  components: {
    BindDialog,
  },
  data() {
    return {
      form: {
        "regionCount": 0,
        "areaCount": 0,
        "bindnfc": 0,
        "noBindnfc": 0
      },
      keyword: "",
      selectShow: false,
      showDialog: false,
      selectVal: "全部",
      options: [
        {
          text: "全部",
        },
        {
          text: "已绑定",
        },
        {
          text: "未绑定",
        },
      ],
      tabCurrent: 0,
      tabsList: [
        {
          name: "区域1",
        },
        {
          name: "区域2",
        },
        {
          name: "区域3",
        },
        {
          name: "区域4",
        },
        {
          name: "区域5",
        },

        {
          name: "区域6",
        },
        {
          name: "区域7",
        },
        {
          name: "区域8",
        },
      ],
    };
  },
  mounted() {
    uni.hideLoading(); // 关闭 Loading
  },
  onLoad() {
    this.getAreaFn();
  },
  onShow() {
    this.getDataFn();
  },
  methods: {
    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
    },
    selectFn() {
      this.selectShow = true;
    },
    changeFn(val) {
      console.log(val, "val--");
      this.selectVal = this.options[val].text;
    },
    tabChangeFn(val) {
      console.log(val, "val--");
      this.tabCurrent = val;
    },
    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 {
    display: flex;
    align-items: center;
    // border: 1px solid red;
    margin-top: 20rpx;
    padding: 20rpx;

    .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;
    }
  }

  .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>