techtron/pages/weitiandi/deviceList.vue

<template>
  <view class="container">
	  <view style="height: 0vh;place-items: center;display: grid;">
	  	<image style="height: 3vh;width: 15vh;margin-top: 5vh;top: 3vh;"
	  		src="../../static/images/new/starts/login/backImg2.png"></image>
	  	<text @click="clickRight()" style="color: #ffffff;font-size: 15px;margin: 0 0 0 31vh;font-weight: bold;">· · ·</text>
	  	<view>
	  		<uni-drawer @change="changeDrawer"  style="top:20vh;height: 23vh" ref="showRight" mode="right"
	  			:mask-click="true">
	  			<scroll-view  style="background: linear-gradient(#000000, #5a5a58);font-size: 20px;" scroll-y="true">
	  				<view class="prop-item" @click="handleLogout()">
	  					<!-- <view class="prop-item-image">
	  												<image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
	  											</view> -->
	  					<view class="prop-item-right">{{i18('退出登录')}}</view>
	  					<view class="prop-item-left">
	  						<uni-icons type="forward" color="lightgray" size="16"></uni-icons>
	  					</view>
	  				</view>
	  				<u-divider/>
	  				<view class="prop-item" @click="skip(2)">
	  					<!-- <view class="prop-item-image">
	  												<image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
	  											</view> -->
	  					<view class="prop-item-right">{{i18('关于我们')}}</view>
	  					<view class="prop-item-left">
	  						<uni-icons type="forward" color="lightgray" size="16"></uni-icons>
	  					</view>
	  				</view>
	  				<u-divider/>
	  				<view class="prop-item" @click="skip(3)">
	  					<!-- <view class="prop-item-image">
	  												<image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
	  											</view> -->
	  					<view class="prop-item-right">{{i18('帮助')}}</view>
	  					<view class="prop-item-left">
	  						<uni-icons type="forward" color="lightgray" size="16"></uni-icons>
	  					</view>
	  				</view>
	  				<u-divider/>
	  			</scroll-view>
	  		</uni-drawer>
	  	</view>
	  </view>
    <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.stop="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: [],
	  clickRightTag: 0
    };
  },
  onShow(){
    uni.setNavigationBarTitle({
      title: this.$t('page.deviceList')
    })
  },
  methods: {
	  changeDrawer(event) {
	  	if (event) {
	  		// 抽屉打开时的逻辑
	  		
	  		this.clickRightTag = 1
	  	} else {
	  		// 抽屉关闭时的逻辑
	  		this.clickRightTag = 0
	  	}
	  },
	  //自定义头右操作函数
	  clickRight() {
	  	//打开抽屉
	  	if (this.clickRightTag == 0) {
	  		this.$refs.showRight.open();
	  		this.clickRightTag = 1
	  	} else {
	  		this.$refs.showRight.close()
	  		this.clickRightTag = 0
	  	}
	  },
    unbind(qrcode){
      let self = this;
      this.$modal.confirm("确认解绑该设备？").then(res=>{
        unBind(qrcode).then(res=>{
			console.log('?>>>'+JSON.stringify(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-image: url('../../static/images/new/starts/bg1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  inset: 0;
  position: absolute;
}

.list-item {
  margin: 0vw;
  margin-top: 15vh;
}

.item {
	color: aliceblue;
  box-shadow: 0px 5px 27px 0px rgba(94, 94, 94, 0.4);
  border-radius: 4px;
  background: linear-gradient(#565656, #050609);
  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;
}
	.prop-item {
		position: relative;
		display: flex;
		flex-direction: row;
		height: 40px;
		line-height: 40px;
		margin: 0 20rpx;
	}

	.prop-item-left {
		color: #BCBCBF;
		;
		width: 30%;
		font-size: 14px;
		//margin-left: 36px;
	}

	.prop-item-image {
		width: 15px;
		height: 15px;
		position: absolute;
		left: 2vw;
		top: 0.5vh;
	}

	.prop-item-right {
		position: absolute;
		right: 10rpx;
		top: 5rpx;
		color: #BCBCBF;
	}
</style>