tianmucloudmobile/pages/device/scan.vue

<template>
  <view class="help-container" >
    <view style="font-size: 12px;padding-bottom: 10rpx">

      TIPS:请通过设备发送指令后，然后在该列表中绑定相应设备。
    </view>
    <view style="background: white;padding-top:00px;position: absolute;top:108rpx;bottom: 10px;left:10px;right:10px;text-align: center">
    <u-list height="100%"
    >
      <view style="position: relative;text-align: center;padding:30rpx">
          消息列表
         <view @click="getList" style="position: absolute;    right: 50rpx;top: 20rpx;">
           <u-icon name="reload" ></u-icon>
         </view>
      </view>
      <u-grid col="5"
              :border="false"
              @click="click"
      >
        <u-grid-item
            v-for="(baseListItem,baseListIndex) in headTitle"
            :key="baseListIndex"
        >

          <text class="grid-text">{{baseListItem}}</text>
        </u-grid-item>
      </u-grid>
      <u-list-item
          v-for="(item, index) in indexList"
          :key="index"
      >
      <view style="padding-top: 10px;text-align: center;height: 100rpx;font-size:10px;;border-bottom:1px solid lightgray">
        <u-grid col="5"
                :border="false"
        >
          <u-grid-item
          >

            <text class="grid-text"> {{item.deviceNo}} </text>
          </u-grid-item>
          <u-grid-item
          >

            <text class="grid-text">  {{item.deviceName}}</text>
          </u-grid-item>
          <u-grid-item
          >

            <text class="grid-text"> {{item.productName}}</text>
          </u-grid-item>
          <u-grid-item
          >

            <text class="grid-text"> {{item.createTime}}</text>
          </u-grid-item>
          <u-grid-item
          >

            <u-icon @click="scanCode(item.deviceNo)" name="scan" color="#2979ff" size="28" ></u-icon>

          </u-grid-item>
        </u-grid>


      </view>
      </u-list-item>
    </u-list>
    </view>
  </view>
</template>

<script>
import { getDeviceMsg,bindDeviceQrcode } from '@/api/device/device.js'
  export default {
    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(){
        getDeviceMsg().then(res=>{
          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: #f8f8f8;
  }

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

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

  .childList {
    background: #ffffff;
    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>