wit-uniapp/pages/Workorder/Intelligentdoorlock/Intelligentdoorlock.vue

<template>
  <view class="billall">
    <view class="u-listdata">
      <view style="padding: 10rpx 0 0 30rpx">
        共有 <span style="color: red">{{ totalnumber }}</span
        >条记录
      </view>

      <u-list @scrolltolower="scrolltolower" :pagingEnabled="true">
        <u-list-item v-for="(item, index) in indexList" :key="index">
          <view class="companylist">
            <view class="outstanding" @click="Remotedooropening(item)">
              远程开门
            </view>
            <view class="outstanding1" @click="setPwd(item.deviceId)">
              临时密码
            </view>
            <view class="outstanding2" @click="seedetail(item)">
              查看租户
            </view>
            <h3>{{ item.name }}</h3>
            <view class="Currentamount"> 设备编号:{{ item.deviceId }} </view>
          </view>
        </u-list-item>
      </u-list>
    </view>
    <!-- 门锁信息 -->
    <u-modal
      :show="showms"
      @confirm="confirmPwd"
      title="临时密码设置"
      :showCancelButton="true"
      @cancel="showms = false"
    >
      <view class="slot-content">
        <u--input placeholder="请输入临时密码" v-model="lsmima"></u--input>
      </view>
    </u-modal>
    <u-notify ref="uNotify" message=""></u-notify>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      showms: false,
      totalnumber: 0,
      setyesno: true,
      lsmima: "",
      indexList: [],
      dataList: [],
      dataForm: {
        currentPage: 1,
        deviceId: "",
        pageSize: 10,
        roomId: "",
        tempPwd: "",
        tenantsId: "",
        userName: "",
      },
      showtype: false,
      showdct: false,
      mytitle: "",
      alldata: [],
      showfloor: false,
      loading: false,
      columns: [],
      pd: true,
      columnData: [],
      myday: "",
      mytype: "全部",
      showPicker: false,
    };
  },
  //监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参
  onLoad() {
    this.getalldata();
  },
  //监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {
    // 微信小程序需要用此写法
  },
  //监听页面隐藏
  onHide() {},
  //监听窗口尺寸变化
  onResize() {},
  //监听页面卸载
  onUnload() {},
  //监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {},

  methods: {
    Remotedooropening(e) {
      let postdata = {
        cmdType: "RemoteOpenDoor",
        roomId: e.roomid,
      };
      this.$api.post("/lock/issuedCmd", postdata).then((res) => {
        if (res.data.code == 0) {
          this.$refs.uNotify.success(res.data.data);
        } else {
          this.$refs.uNotify.error(res.data.msg);
        }
      });
    },

    seedetail(e) {
      uni.navigateTo({
        url: `/pages/Workorder/Intelligentdoorlock/Tenantdetails/Tenantdetails?companyOrgId=${e.roomid}`,
      });
    },
    kaimen(e) {
      uni.navigateTo({
        url: `/pages/Workorder/Intelligentdoorlock/Dooropeningrecord/Dooropeningrecord?companyOrgId=${e.roomid}`,
      });
    },
    setPwd(deviceId) {
      this.showms = true;
      this.dataForm.deviceId = deviceId;
    },
    confirmPwd() {
      this.$api
        .post("/lock/getTempPwd", {
          tempPwd: this.lsmima,
          deviceId: this.dataForm.deviceId,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.showms = false;
            this.$refs.uNotify.success(res.data.msg);
          } else {
            this.$refs.uNotify.error(res.data.msg);
          }
        });
    },
    closems() {
      this.showms = false;
    },
    scrolltolower() {
      if (this.pd) {
        this.getalldata();
      } else {
        return;
      }
    },
    getalldata() {
      this.$api.post("/lock/page", this.dataForm).then((res) => {
        this.totalnumber = res.data.data.total;
        if (res.data.data.list.length != 0) {
          this.indexList.push(...res.data.data.list);
          this.dataForm.currentPage = this.dataForm.currentPage + 1;
          this.pd = true;
        } else {
          uni.showToast({
            title: "暂无更多数据了",
            icon: "none",
            duration: 1500,
          });
          this.pd = false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.mensuoxx {
  width: 750rpx;
  height: 300rpx;

  h3 {
    width: 100%;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    margin-bottom: 50rpx;
  }
}
.mjkg {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 120rpx;
  border-top: 2px solid #f6f6f6;
  margin-top: 20rpx;
}
.anniu {
  width: 120rpx;
  margin-left: 30rpx;
}

.Currentamount {
  padding-left: 30rpx;
  min-height: 50rpx;
  line-height: 50rpx;
  color: #bcb3a7;

  span {
    color: #fa5555;
    padding-left: 9rpx;
  }
}

.Callfee {
  width: 100rpx;
  height: 45rpx;
  text-align: center;
  line-height: 45rpx;
  color: #5c8fff;
  border: 1px solid #5c8fff;
  font-size: 22rpx;
  position: absolute;
  bottom: 10rpx;
  right: 10px;
  font-weight: bold;
}

.companylist {
  margin: 20rpx 30rpx;
  background: #fff;
  min-height: 380rpx;
  border-radius: 10px;
  position: relative;

  h3 {
    height: 70rpx;
    line-height: 70rpx;
    padding-left: 30rpx;
  }
}

.settled {
  background-color: #2b60de;
  width: 120rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  color: #fff;
  font-size: 14rpx;
  position: absolute;
  top: 0px;
  right: 0px;
  border-top-right-radius: 10rpx;
  border-bottom-left-radius: 10rpx;
}

.outstanding {
  background-color: #09c700;
  width: 120rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  color: #fff;
  font-size: 14rpx;
  position: absolute;
  top: 110rpx;
  right: 0px;
  border-top-left-radius: 10rpx;
  border-bottom-left-radius: 10rpx;
}

.outstanding1 {
  background-color: #3090c7;
  width: 120rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  color: #fff;
  font-size: 14rpx;
  position: absolute;
  top: 56%;
  right: 0px;
  border-top-left-radius: 10rpx;
  border-bottom-left-radius: 10rpx;
}

.outstanding2 {
  background-color: #4e8975;
  width: 120rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  color: #fff;
  font-size: 14rpx;
  position: absolute;
  bottom: 0px;
  right: 0px;
  border-top-left-radius: 10rpx;
  border-bottom-right-radius: 10rpx;
}

.billall {
}

.topbill {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100rpx;
  background-color: #e6e6e6;
}

.topbilledit {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.changetime1 {
  padding-right: 10rpx;
}
</style>