xiangan/userPages/pages/remote-door.vue

<template>
  <view class="min-height bg-gray-light">
    <template v-if="!loading">
      <template v-if="isLogin">
        <view v-if="channelList.length" class="p-20 bg-white flex justify-between items-center text-30"
              @click="showRoom = true">
          <template v-if="currentRoom">
            <text>{{ currentRoom.villageName }}</text>
            <u-icon name="arrow-right"/>
          </template>
        </view>
        <view class="p-20" v-if="isLogin">
          <view class="bg-white rounded flex justify-start items-start flex-wrap" v-if="channelList.length">
            <view v-for="(item, index) in channelList" :key="index"
                  @click="openDoor(item.deviceNo)"
                  class="flex flex-col justify-start items-start channel" style="width: 43%">
              <image src="/userPages/static/无线电波.png" mode="widthFix"/>
              <text class="text-25 text-white m-15 font-bold">{{
                  item.name
                }}({{ parseInt(item.passagewayTypeInout) === 1 ? '进' : '出' }})
              </text>
              <view class="w-100p flex justify-end items-center">
                <view class="tag">一键开门</view>
              </view>
            </view>
          </view>
          <view class="flex flex-col justify-center items-center p-30" style="height: 80vh" v-else>
            <image src="https://img.ggsxiangan.com/认证.png" class="mb-40"
                   style="width: 180rpx; height: 180rpx"/>
            <u-button type="primary" shape="circle" @click="$jump('/pages/user/auth')">暂无房产,去认证</u-button>
          </view>
        </view>
      </template>
      <template v-else>
        <view class="flex flex-col justify-center items-center p-30" style="height: 80vh">
          <image src="https://img.ggsxiangan.com/手机.png" class="mb-40"
                 style="width: 180rpx; height: 180rpx"/>
          <u-button type="primary" shape="circle" @click="login">登录并开门</u-button>
        </view>
      </template>
    </template>
    <u-picker :show="showRoom" :columns="[roomList]" keyName="villageName" @confirm="selectRoom"
              @cancel="showRoom = false"/>
    <Login ref="Login" @done="getUserData"/>
  </view>
</template>

<script>
import {openDoorReq} from "@/api/common";
import {listChannelReq, userRoomListReq} from "@/api/room";
import {userInfoReq} from "@/api/user";
import {getUserInfo} from "@/util/user";
import Login from "@/components/Login.vue";

export default {
  name: "remote-door",
  components: {Login},
  data() {
    return {
      roomList: [],
      channelList: [],
      currentRoom: null,
      showRoom: false,
      isLogin: false,
      loading: false,
    }
  },
  methods: {
    async getChannelList() {
      const {data} = await listChannelReq({
        baseVillageVillageCode: this.currentRoom.baseVillageVillageCode
      })
      const dataList = data.filter(item => !!item.deviceNo)
      const list = JSON.parse(JSON.stringify(dataList))
      this.channelList = dataList.filter(item => parseInt(item.passagewayType) === 1)
      this.channelList = [...this.channelList, ...list.filter(item => {
        return parseInt(item.passagewayType) === 2 && item.baseUnitUnitCode === this.currentRoom.baseUnitUnitCode
      })]
      this.loading = false
      uni.hideLoading()
      // console.log(this.channelList)
    },
    async openDoor(deviceNo) {
      const [serial, _, __] = deviceNo.split('_')
      uni.showLoading({
        title: '正在开锁...',
        mask: true
      })
      const res = await openDoorReq(serial).finally(() => {
        uni.hideLoading()
      })
      if (res && res.data) {
        this.$toast('开锁成功')
      }
    },
    async getRoomList() {
      uni.showLoading()
      this.loading = true
      const {data} = await userRoomListReq()
      this.roomList = data
      if (this.roomList.length) {
        this.currentRoom = this.roomList[0]
        await this.getChannelList()
      }
    },
    selectRoom({value}) {
      this.currentRoom = value[0]
      this.getChannelList()
      this.showRoom = false
    },
    async getUserData() {
      const {data} = await userInfoReq()
      this.userData = data
      this.isLogin = true
      if (this.userData.wechatUser.isAudit === 3) {
        this.$toast('请先完成认证')
        setTimeout(() => {
          this.$jump('/pages/user/auth')
        }, 1500)
        return
      } else {
        if (this.userData.wechatUser.isAudit === 0) {
          this.$toast('认证审核中')
          uni.switchTab({url: '/pages/user/index'})
          return
        }
      }
      await this.getRoomList()
    },
    login() {
      this.$refs.Login.open()
    }
  },
  onShow() {
    if (getUserInfo().token) this.getUserData()
  }
}
</script>

<style scoped lang="scss">
.channel {
  background: linear-gradient(to right, #25a1f1, #3eabf1);
  border-radius: 20rpx;
  margin: 20rpx;
  position: relative;
  height: 140rpx;

  image {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 80rpx;
    width: 80rpx;
    filter: opacity(0.6);
  }

  .tag {
    background: linear-gradient(to right, #fd7600, #fad3b2);
    border-radius: 999rpx 0 0 999rpx;
    color: white;
    font-size: 24rpx;
    padding: 10rpx 20rpx;
  }
}
</style>