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: 100vh" ref="showRight" mode="right"
	  			:mask-click="true">
	  			<scroll-view  style="background: linear-gradient(#000000, #5a5a58);font-size: 20px;height: 100%" scroll-y="true">
	  				<view class="prop-item" @click="handleLogout()">
	  					<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-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-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 v-if="chargeList.length==0" class="notice"> - {{ $t('buletooth.nodevice') }} -</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">
			  <view  class="value-tag" v-if="item.status === 1" style="background: #57B03D;color: #f5f5f5;">
			    <span style="margin-top: 5px;">{{ i18('在线中') }}</span>
			  </view>
			  <view  class="value-tag" v-if="item.status === 0" style="background: #a3a5a4;color: #f5f5f5;">
			    <span style="margin-top: 5px;">{{ i18('已离线') }}</span>
			  </view>
            <!-- <uni-tag type="success" style="border-radius: 20px;" :text="i18('在线中')" v-if="item.status === 1"></uni-tag> -->
            <!-- <uni-tag type="default" style="border-radius: 20px;" :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>
		<view style="width: 100%;text-align: center;">
			
		</view>
    <view style="position:fixed;bottom:1vh;display: flex;align-items: center;justify-content: center;text-align: center;left:0px;right:0px;">
		<image style="height: 3vh;width: 35vw;position: absolute;bottom: 13vh;left: 32.5vw;" src="../../static/images/new/starts/login/backImg2.png"></image>
      <view @click="skipPage(0)" style="margin:0px 10px;">
        <image src="@/static/images/new/starts/tabbar/one_off.png"
               style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
      </view>
      <view @click="skipPage(1)" style="margin:0px 10px;">
        <image src="@/static/images/new/starts/tabbar/two_on.png"
               style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
      </view>
      <view @click="skipPage(2)" style="margin:0px 10px;">
        <image src="@/static/images/new/starts/tabbar/three_off.png"
               style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
      </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')
    })
    this.deviceList();
  },
  methods: {
    skipPage(type){
      if(type==0){
        uni.reLaunch({
          url:'/pages/index'
        })
      }else if(type==1){
        uni.reLaunch({
          url:'/pages/weitiandi/deviceList'
        })
      }else if(type==2){
        uni.reLaunch({
          url:'/pages/mine/index'
        })
      }
    },
    skip(){
      this.$modal.showToast("功能开发中..");
    },
	  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
	  	}
	  },
	  handleLogout() {
	  	this.$modal.confirm('确定注销并退出系统吗？').then(() => {
	  		this.$store.dispatch('LogOut').then(() => {
	  			uni.setStorageSync("loginInfo",'');
	  			this.$tab.reLaunch('/pages/index')
	  		})
	  	})
	  			
	  },
    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() {

  },
};
</script>
<style>
	.uni-page-head-bd{
		font-weight: bold;
	}
	
.container {
  background-image: url('../../static/images/new/starts/bg2.jpg');
  background-size: cover;
  background-color: #050609;
  background-repeat: no-repeat;
  inset: 0;
  position: absolute;
  height: 100%;
  width: 100%;
}
.value-tag {
  background: #57B03D;
  color: #f5f5f5;
  width: 14vw;
  height: 3vh;
  line-height: 3.5vh;
  border-radius: 3vw;
  text-align: center;
  margin: 0px 1vw 1px 1vw;
  font-weight: bold;
  font-size: 12px;
}

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

.item {
	color: aliceblue;
  box-shadow: 0px 5px 27px 0px rgba(94, 94, 94, 0.4);
  border-radius: 4px;
  background: linear-gradient(#2b2b2b, #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;
}
.success{
border-radius: 20px 0 0 20px;	
}
.default{
border-radius: 20px 0 0 20px;	
}
.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;
	}
	.notice {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  margin-top: 10px;
	  font-size: 13px;
	  color: #909399;
	}
</style>