4dkankan_mobile/src/pages/account/manage/device/index.vue

<template>
  <div class="device-layout">
    <div class="plate">
      <template v-if="tabActive===4">
        <div class="d-item" v-for="(item,i) in mydevice.list" :key="i" >
          <img :src="`${$cdn}images/banner_pro.png`" alt="">
          <img v-if="item.spaceEndTime" class="king" :src="`${$cdn}images/icon-huiyuan.png`" alt="">

          <div class="eight-right">
            <p class="i-title">ID:{{item.childName}}</p>
            <p class="i-dec">云存储空间</p>
            <div class="capacity">
              <div class="c-line">
                <div class="active" :style="{width:getBar(item.usedSpace,item.totalSpace)}"></div>
              </div>
            </div>
            <p class="i-dec">{{item.usedSpaceStr}} / {{item.totalSpaceStr}}</p>

            <div class="btn-con">
              <span class="btn" @click="unbind(item)">解绑</span>
              <span class="btn" @click="$router.push({name:'introduce',params:{id:item.childName}})">扩容</span>
              <span class="btn primary"  v-if="!item.spaceEndTime" @click="$router.push({name:'privilege',params: {
          cameraId: item.id,
          childName: item.childName
        }})">升级</span>
              <span class="btn" @click="$router.push({name:'introduce',params:{id:item.childName}})" v-else >续期</span>
            </div>
          </div>
        </div>
      </template>

      <template v-else>
        <div class="d-item"  v-for="(item,i) in mydevice.list" :key="i">
          <img :src="`${$cdn}images/t_product.png`" alt="">
          <div class="item-right">
            <p class="i-title">ID:{{item.childName}}</p>
            <p class="i-dec">剩余点数：</p>
            <div class="btn-con">
              <span>{{item.balance}}</span>
              <div>
                <span class="btn" @click="unbind(item)">解绑</span>
                <span class="btn primary" @click="$router.push({name:'introtow',params:{id:item.childName}})">充值</span>
              </div>
            </div>
          </div>
        </div>
      </template>

      <div class="scene-nothing" v-if="!total">
        <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>
  </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) : {})
      }
    })
  },
  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/camera/unbind'
        })
        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, () => {
        this.getList()
      })
    },
    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)

      if (!this.mydevice.total && searchKey) {
        return this.$toast.show('warn', '没有找到对应的设备', () => {
          this.getList()
        })
      }
      this.pageSize = this.mydevice.pageSize
      this.total = this.mydevice.total || 0
    }
  },
  mounted () {
    this.getList()
    this.$bus.$on('selectdevice', id => {
      this.tabActive = id
    })
  },
  watch: {
    currentPage () {
      this.getList()
    },
    tabActive (newVal) {
      this.currentPage === 1 ? this.getList() : this.currentPage = 1
    }
  }
}
</script>

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

.btn{
  width: 72px;
  display: inline-block;
  border: solid 1px #ddd;
  line-height: 32px;
  height: 32px;
  text-align: center;
  border-radius: 2px;
}
.primary{
  background-color: $theme-color;
  border-color: $theme-color;
}
.device-layout{
  background: #f6f9fd;
  .plate{
    .scene-nothing{
      background: #fff;
      text-align: center;
      padding:40px 0;
      img{
        padding-bottom: 22px;
      }
      div{
        font-size: 14px;
        color: #969696;
      }
    }
    .d-item{
      position: relative;
      background: #fff;
      margin: 10px 0;
      padding: 10px 0;
      img{
        position: absolute;
        width: 30px;
        top: 50%;
        left: 15%;
        transform: translate(-50%, -50%);
      }
      .king{
        top: 21%;
        left: 19.5%;
      }
      .item-right,.eight-right{
        height: 90px;
        margin-left: 30%;
        margin-right: 16px;
        .i-title{
          font-size: 16px;
          color: #2d2d2d;
          margin-bottom: 10px;
          font-weight: bold;
        }
        .i-dec{
          margin-bottom: 10px;
          font-size: 14px;
          color: #777;
        }
        .capacity{
          margin: 5px 0;
          .c-line{
            width: 64%;
            height: 8px;
            background-color: #ccc;
            .active{
              background-color:$theme-color;
              height: 100%;
            }
          }
        }
        .btn-con{
          display: flex;
          width: 100%;
          justify-content: space-between;
        }
      }
      .eight-right{
        height: 130px;
      }
    }
  }
  .paging {
    // border-left: #e5e5e5 1px solid;
    height: 100%;
    padding-bottom: 20px;
    & /deep/ .layout {
      text-align: center;
      margin-top: 20px;
    }
    & /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: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>