MiniScm/subpkg/emergencyKey/emergencyKey.vue

<template>
  <view>
    <view v-if="Object.keys(checkinInfo).length > 0">
      <uni-card :title="checkinInfo.hotelName" extra="入住信息" note="Tips">
        <view class="card-item" v-if="checkinInfo.building">
          <view class="card-item-left">
            <text>所属楼栋：</text>
          </view>
          <text>{{ checkinInfo.building }}</text>
        </view>
        <view class="card-item">
          <view class="card-item-left">
            <text>所在楼层：</text>
          </view>
          <text>{{ checkinInfo.floor }}</text>
        </view>
        <view class="card-item">
          <view class="card-item-left">
            <text>房间信息：</text>
          </view>
          <text>{{ checkinInfo.room }}</text>
        </view>
        <view class="card-item">
          <view class="card-item-left">
            <text>起始时间：</text>
          </view>
          <text>{{ checkinInfo.startTime }}\n</text>
        </view>
        <view class="card-item">
          <view class="card-item-left">
            <text>结束时间：</text>
          </view>
          <text>{{ checkinInfo.endTime }}</text>
        </view>
      </uni-card>

      <view class="room__operate">
        <view>
          <view
            v-if="allowedOpenDoor === 0"
            class="room__operate--display"
            @click="bluetoothOperate"
          >
            <u-icon name="lock-open" color="#2979ff" size="70"></u-icon>
            <view class="display__desc">手机开门</view>
          </view>
          <view
            v-else-if="allowedOpenDoor === 1"
            class="room__operate--display"
          >
            <u-loading-icon
              :show="isOpeningDoor"
              :text="loadingContent"
            ></u-loading-icon>
          </view>
          <view
            v-else-if="allowedOpenDoor === 2"
            class="room__operate--display"
            @click="preventOpenDoor"
          >
            <u-icon name="lock-open" color="#2979ff" size="40"></u-icon>
            <view class="display__desc">手机开门</view>
          </view>
        </view>
        <!-- <view class="room__operate--display" @click="customerService">
          <u-icon name="kefu-ermai" color="#2979ff" size="40"></u-icon>
          <view class="display__desc">联系客服</view>
        </view> -->
      </view>
    </view>
    <view v-else class="not-reservation">
      <text class="tip">您还未入住</text>
    </view>
  </view>
</template>

<script>
import { bluetooth } from "../../mixins/bluetoothMixin";
export default {
  mixins: [bluetooth],
  data() {
    return {};
  },
  methods: {
    customerService() {
      uni.showModal({
        title: "联系客服",
        content: "将要拨打客服电话：18888888888",
        success: (res) => {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: "18888888888", //仅为示例
            });
          }
        },
      });
    },
    preventOpenDoor() {
      uni.showModal({
        title: "温馨提示",
        content: "未获取到房间门锁设备信息，请稍后重试",
      });
    },
  },
};
</script>

<style lang="scss">
.card-item {
  margin-bottom: 40rpx;
  display: flex;

  .card-item-left {
    width: 140rpx;
  }
}

.completeBtn {
  left: 80rpx;
  right: 80rpx;
  bottom: 160rpx;
  position: fixed;
  background-color: #0081ff;
  color: #ffffff;
}

.gobackBtn {
  left: 80rpx;
  right: 80rpx;
  bottom: 40rpx;
  position: fixed;
  background-color: #0081ff;
  color: #ffffff;
}

.not-reservation {
  display: flex;
  justify-content: center;
  height: 100%;
  text-align: center;
  vertical-align: 100rpx;
}

.tip {
  padding-top: 40%;
}
.room__operate {
  display: flex;
  border-radius: 2 * 5rpx;
  margin: 4rpx 30rpx;
  padding: 10rpx 70rpx 10rpx 10rpx;
  background-color: #ffffff;
  align-items: center;
  justify-content: center;

  .room__operate--display {
    width: 100%;
    height: 2 * 85rpx;
    margin: 2 * 5rpx;
    padding: 2 * 5rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #ffffff;
    background-color: #ffffff;
    border-radius: 2 * 5rpx;
    .display__desc {
      width: 300rpx;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: start;
      font-size: 70rpx;
    }
  }
}
</style>