tianmucloudmobile/subpkg/device/scan.vue

<template>
  <view class="help-container" >
    <view style="font-size: 22rpx;padding-bottom: 10rpx;    background: rgb(228,240,255);
    color: #3E9CFC;
    height: 54rpx;
    line-height: 54rpx;
    border-radius: 48rpx;text-align: center">

      TIPS:请通过设备发送指令后，然后在该列表中绑定相应设备。
    </view>
    <view @click="getList" style="position: absolute;    right: 50rpx;top: 40rpx;">
      <u-icon name="reload" ></u-icon>
    </view>
    <view>
      <uni-card title="管理员"  extra="额外信息" padding="0"  v-for="item in indexList">
        <template v-slot:cover>
          <view style="position: relative;display: flex;flex-direction: row;margin:20rpx;border-bottom: 1px solid lightgray;height: 60rpx">
            <view style="font-size: 24rpx;position: absolute;top: 8rpx;font-weight: bold">
              {{ item.deviceName }}
            </view>
            <view style="position: absolute;right:-14rpx;top:10rpx;
color: #BBBBBB;font-size: 20rpx">
              {{ item.createTime }}
            </view>
          </view>
        </template>
        <template v-slot:title>
          <view style="position: relative;display: flex;flex-direction: column;margin:20rpx;height: 120rpx;    line-height: 66rpx;
color: #545454; ">
            <view>

              设备编号：{{ item.deviceNo }}
            </view>
            <view>

              产品名称：{{ item.productName }}
            </view>
            <view style="position: absolute;right:10rpx;top:20rpx" @click="scanCode(item.deviceNo)">
              <u-image :showLoading="true" src="/static/images/device/bind.png" width="60rpx" height="60rpx" ></u-image>
              <view style="text-align: center;font-size: 24rpx;position: relative;top:-10rpx">
                绑定
              </view>

            </view>
          </view>
        </template>
      </uni-card>

    </view>
  </view>
</template>

<script>
import { getDeviceMsg,bindDeviceQrcode } from '@/api/device/device.js'
import UImage from "../../uni_modules/uview-ui/components/u--image/u--image";
  export default {
    components: {UImage},
    data() {
      return {
        headTitle:["设备编号","设备名称","产品编号","消息时间","操作"],
        indexList: [
        ]
      }
    },
    onShow(){
      this.getList();
    },
    methods: {
      scanCode(deviceNo){
        uni.scanCode({
          success: function (res) {
            console.log('条码内容：' + res.result);
            bindDeviceQrcode(res.result,deviceNo).then(res=>{
              let code = res.code
              if(code == '200'){
                uni.showToast({title:res.msg})
              }else{
                uni.showToast({title:res.msg,icon:"error"})
              }

            });
          }
        });
      },
      getList(){
        uni.showLoading();
        getDeviceMsg().then(res=>{
          uni.hideLoading();
          this.indexList = res.rows;
        });
      },
      handleText(item) {
        this.$tab.navigateTo(`/pages/common/textview/index?title=${item.title}&content=${item.content}`)
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: white;
  }

  .help-container {
    margin-bottom: 100rpx;
    padding: 30rpx;
    background-color: white;
  }

  .list-title {
    margin-bottom: 30rpx;
  }

  .childList {
    background-color: white;
    box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
    border-radius: 16rpx;
    margin-top: 10rpx;
  }

  .line {
    width: 100%;
    height: 1rpx;
    background-color: #F5F5F5;
  }

  .text-title {
    color: #303133;
    font-size: 32rpx;
    font-weight: bold;
    margin-left: 10rpx;

    .iconfont {
      font-size: 16px;
      margin-right: 10rpx;
    }
  }

  .text-item {
    font-size: 28rpx;
    padding: 24rpx;
  }

  .question {
    color: #606266;
    font-size: 28rpx;
  }
</style>