4dkankan_official/src/page/manage/temp/device.vue

<template>
  <div class="device-layout">
    <div class="d-header">
      <ul class="tab-list">
        <li @click="tabActive = item.id" :class="{active:tabActive === item.id}" v-for="(item,i) in tabList" :key="i">
          {{item.name}}
        </li>
      </ul>
      <div class="tab-search">
        <input v-model="searchKey" @keyup.enter="getList(searchKey)" type="text" placeholder="搜索设备ID">
        <i class="iconfont icon-sousuo" @click="getList(searchKey)"></i>
      </div>
    </div>
    <div class="d-con" v-if="total">
      <div class="edit-item item" @click="addDevice">
        <div class="plus-con">
          <div class="iconplus">
            <span></span>
            <span></span>
          </div>
          <p>添加新设备</p>
        </div>
      </div>
      <div class="d-item item" v-for="(item,i) in mydevice.list" :key="i">
        <div class="i-left" :style="{marginTop:tabActive===4?'15px':'25px'}">
          <template v-if="tabActive===4">
            <p class="d-id">ID:{{item.childName}}</p>
            <p class="p-sub">{{item.spaceEndTime||'云存储空间'}}</p>
            <div class="capacity">
              <div class="c-line">
                <div class="active" :style="{width:getBar(item.usedSpace,item.totalSpace)}"></div>
              </div>
            </div>
            <p class="p-sub">{{item.usedSpaceStr}} / {{item.totalSpaceStr}}</p>
            <div class="d-edit">
              <span @click="$router.push({path:'/privilege'})">升级</span>
              <span @click="$router.push({name:'introduce',params:{id:item.childName}})">扩容</span>
              <span @click="unbind(item)">解绑</span>
            </div>
          </template>
          <template v-else>
            <p class="d-id">ID:{{item.childName}}</p>
            <p class="p-sub">剩余点数：{{item.balance}}</p>
            <div class="d-edit">
              <span @click="$router.push({name:'introtow',params:{id:item.childName}})">充值</span>
              <span @click="unbind(item)">解绑</span>
            </div>
          </template>
        </div>
        <div class="i-right">
          <img :src="tabActive===4?`${$cdn}images/banner_pro.png`:`${$cdn}images/t_product.png`" alt="">
          <img v-if="item.spaceEndTime" class="king" :src="`${$cdn}images/icon-huiyuan.png`" alt="">
        </div>
      </div>
    </div>
    <div class="scene-nothing" v-else>
      <img src="@/assets/images/nothing.png">
      <div>居然还没有新时代空间建模神器<br/>赶紧入手吧</div>
    </div>
    <div class="paging" v-if="total">
      <Paging @clickHandle="pageChange" :current="currentPage" :total="total" :equable="pageSize" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Paging from '@/components/Paging'

export default {
  components: {Paging},
  data () {
    let tabList = [
      {
        name: '四维看看Pro',
        id: 4
      }, {
        name: '四维看看Lite',
        id: 0
      }
    ]
    return {
      tabList,
      tabActive: 4,
      currentPage: 1,
      total: 0,
      searchKey: '',
      pageSize: 8
    }
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
      mydevice: state => {
        let type = Object.prototype.toString.call(state.user.mydevice)
        if (type === '[object Object]') {
          return state.user.mydevice
        }
        let condition = state.user.mydevice && state.user.mydevice !== 'null' && type !== '[object Array]'
        return (condition ? JSON.parse(state.user.mydevice) : {})
      }
    })
  },
  watch: {
    currentPage () {
      this.getList()
    },
    tabActive (newVal) {
      this.currentPage === 1 ? this.getList() : this.currentPage = 1
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getPercent (a, b) {
      let temp = a / b
      if (temp < 1) {
        return '<1'
      }
      return Math.round(temp)
    },
    getBar (a, b) {
      let temp = a / b
      if (temp < 1) {
        return '1%'
      }
      return Math.round(temp) + '%'
    },
    async unbind (item) {
      this.$toast.showConfirm('warn', '确定要解绑当前设备吗？', async () => {
        let params = {
          cameraId: item.id
        }
        let res = await this.$http({
          method: 'post',
          data: params,
          headers: {
            token: this.token
          },
          url: '/user/unbindCamera'
        })
        let data = res.data
        if (data.code === 0) {
          return this.$toast.show('warn', '解绑成功', () => {
            this.getList()
          })
        }
        return this.$toast.show('error', `解绑失败，${data.msg}`)
      })
    },
    pageChange (data) {
      this.currentPage = data
    },
    addDevice () {
      let val = this.tabActive === 4 ? 1 : 0
      this.$toast.showBinding(val)
    },
    async getList (searchKey = '') {
      window.scrollTo(0, 0)

      let params = {
        cameraType: this.tabActive,
        childName: searchKey,
        pageNum: searchKey ? 1 : this.currentPage,
        pageSize: this.pageSize
      }
      await this.$store.dispatch('getUserDevice', params)
      this.pageSize = this.mydevice.pageSize
      this.total = this.mydevice.total || 0
    }
  }
}
</script>

<style lang="scss" scoped>
$theme-color: #1fe4dc;
$font-color: #2d2d2d;

.device-layout{
  margin: 30px 0 30px 0;
  width: 995px;
  color: $font-color;
  .d-header{
    margin-left: 40px;
    height: 30px;
    .tab-list{
      display: inline-block;
      li{
        display: inline-block;
        margin-right: 40px;
        cursor: pointer;
        font-size: 14px;
        line-height: 1.5;
      }
      .active{
        color: $theme-color;
        border-bottom: 1px solid $theme-color;
      }
    }
    .tab-search{
      float: right;
      position: relative;
      width: 200px;
      padding-left: 10px;
      margin-right: 35px;
      border: 1px solid #ccc;
      display: flex;
      .iconfont{
        width: 28px;
        height: 28px;
        padding: 6px;
        background: #e4e4e4;
      }
      input{
        width: 100%;
        font-size: 14px;
        appearance: none;
        line-height: 28px;
        height: 28px;
        border: 0;
      }
    }
  }
  .d-con{
    margin-left: 40px;
    display: inline-block;
    .item{
      display: inline-block;
      box-shadow: 0 4px 4px rgba($color: #000000, $alpha: 0.1);
      position: relative;
      width: 280px;
      height: 180px;
      margin: 36px 36px 0 0;
    }
    .edit-item{
      cursor: pointer;
      vertical-align: top;
      .plus-con{
        position: absolute;
        text-align: center;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        .iconplus{
          position: relative;
          width: 50px;
          height: 50px;
          margin: 0 auto;
          span{
            position: absolute;
            transform: translate(-50%,-50%);
            top: 50%;
            left: 50%;
            display: inline-block;
            width: 50px;
            height: 6px;
            background: $font-color;
            &:last-child{
              transform: translate(-50%,-50%) rotate(90deg)
            }
          }
        }
        p{
          margin-top: 28px;
        }
      }
    }
    .d-item{
      padding: 10px 24px 10px 30px;
      .i-left{
        display: inline-block;
        vertical-align: top;
        width: 145px;
        margin-top: 25px;
        .d-id{
          color: 16px;
          font-weight: bold;
          margin-bottom: 5px;
        }
        .capacity{
          margin: 5px 0;
          .c-line{
            width: 100%;
            height: 10px;
            background-color: #ccc;
            .active{
              background-color:$theme-color;
              height: 100%;
            }
          }
        }
        .p-sub{
          color: #969696;
          font-size: 14px;
        }
        .d-edit{
          margin-top: 10px;
          font-size: 14px;
          position: absolute;
          bottom: 30px;
          span{
            cursor: pointer;
          }
        }
      }
      .i-right{
        vertical-align: top;
        float: right;
        height: 100%;
        position: relative;
        img{
          height:100%;
        }
        .king{
          position: absolute;
          top: -17px;
          right: -22px;
          width: 44px;
          height: 34px;
        }
      }
    }
  }
  .scene-nothing{
    padding: 42px 0 0 40px;
    img{
      padding-bottom: 22px;
    }
    div{
      font-size: 16px;
      color: #969696;
      text-align: center;
      width: 230px;
    }
  }
   .paging {
    // border-left: #e5e5e5 1px solid;
    height: 100%;
    margin: 40px 0;
    & /deep/ .layout {
      text-align: left;
      margin-top: 0;
      margin-left: 15px;
    }
    & /deep/ .layout a:not(:last-child) {
      margin: 10px 8px;
      font-size: 16px;
      display: inline-block;
      font-weight: 500;
      cursor: pointer;
      user-select: none;
      color: #999;
      position: relative;
      transition: color 0.3s;
    }
    & /deep/ .layout a:last-child {
      position: relative;
      top: -5px;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -ms-flex-align: center;
      align-items: center;
      height: 22px;
      padding: 0 9.6px;
      padding: 0 0.6rem;
    }
    & /deep/ .layout a:last-child::before,
    & /deep/ .layout a:last-child::after {
      content: "";
      display: inline-block;
      will-change: transform;
      transition: transform 0.3s;
    }

    & /deep/ .layout a:not(:last-child).active::after,
    & /deep/ .layout a:not(:last-child).active,
    & /deep/ .layout a:not(:last-child):hover,
    & /deep/ .layout a:not(:last-child):hover::after {
      color: #111111;
      transform: scaleX(1);
    }

    & /deep/ .layout a:not(:last-child)::after {
      content: "";
      height: 3px;
      width: 140%;
      background-color: #111;
      display: block;
      margin-left: -20%;
      margin-top: 3px;
      transform-origin: 50% 50%;
      transform: scaleX(0);
      will-change: transform;
      transition: transform 0.3s;
    }
  }
}
</style>