techtron/pages/weitiandi/deviceList.vue

<template>
  <view class="container">
    <view class="list-item">
      <view class="item" v-for="item in chargeList" :key="item.id">
        <view class="item-header">
          <view class="item-title">
            {{i18('设备编号')}}：{{ item.qrcode }}
          </view>
          <view class="item-status">
            <uni-tag type="success" :text="i18('在线中')" v-if="item.status === 1"></uni-tag>
            <uni-tag type="default" :text="i18('已离线')" v-if="item.status === 0"></uni-tag>
          </view>
        </view>
        <view class="item-body">
          <view style="font-size: 12px; margin: 5px 0;position: relative">
            <view class="item-detail-btn" @click="unbind(item.qrcode)">
              {{i18('解绑设备')}}
            </view>
          </view>
        </view>
        <view class="item-body" style ="height: 10vh;line-height: 10vh">
          <view style="font-size: 12px; margin: 5px 0;position: relative">
            {{i18('创建时间')}}：{{ item.createTime }}
            <view class="item-detail-btn" @click="detail(item)">
              {{i18('设备控制')}}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { deviceList,unBind } from '@/api/device/device.js';
import i18 from '@/utils/i18.js'
export default {
  data() {
    return {
      startText:"more",
      search:{
        pageNum:1,
        pageSize:6,
        reasonable:true,
      },
      contentText: {
        contentdown: i18('点击查看更多'),
        contentrefresh: i18('加载中'),
        contentnomore: i18('没有更多'),
      },
      chargeList: [],
    };
  },
  onShow(){
    uni.setNavigationBarTitle({
      title: this.$t('page.deviceList')
    })
  },
  methods: {
    unbind(qrcode){
      let self = this;
      this.$modal.confirm("确认解绑该设备？").then(res=>{
        unBind(qrcode).then(res=>{
          if(res.data){
            self.deviceList();
          }else{
            this.$modal.showToast("Device is offline.");
          }
        });
      })
    },
    i18(text){
      return i18(text)
    },
    getMore(){
      this.search.pageNum++;
      this.deviceList();
    },
    async deviceList() {
      deviceList().then(res=>{
          this.startText = "more"
          this.chargeList =  res.data;
          if(this.chargeList.length == 1 && this.chargeList[0] == 1){
            this.detail(this.chargeList[0])
          }
      })
    },
    detail(item){
      if(item.status == 0){
        this.$modal.showToast("Device is offline.");
        return;
      }
      let qrcode = item.qrcode;
      let imei = item.imei;
      let ccid = item.ccid;
      uni.navigateTo({
        url: '/pages/weitiandi/device/status?qrcode='+qrcode+'&id='+imei+'&ccid='+ccid
      });
    },
  },
  created() {
    this.deviceList();
  },
};
</script>
<style>
.container {
  background: rgb(249, 252, 255);
  inset: 0;
  position: absolute;
}

.list-item {
  margin: 0vw;
}

.item {
  box-shadow: 0px 5px 27px 0px rgba(195, 195, 195, 0.4);
  border-radius: 4px;
  background: #FFFFFF;
  margin: 4vw;
  padding: 4vw;
}

.item-title {
  display: inline-block;
  float: left;
}

.item-status {
  display: inline-block;
  float: right;
}

.item-header {
  border-bottom: 1px solid lightgray;
  height: 4vh;
  font-size: 12px;
}

.item-body {
  padding-top: 4vw;
  line-height: 3vh;
}

.item-time {
  color: #545454;
  font-size: 12px;
  margin-bottom: 4px
}
.item-detail-btn{
  position: absolute;
  right: 0px;
  top:0px;
  text-decoration: underline;
}
</style>