realtorEasier-webSite/pc/src/page/manage/index.vue

<template>
  <div class="manage-layout">
    <div class="manage-bg" v-if="deviceLogin">
      <div class="manage-con">
          <div class="info deviceLogin">
            <div class="member">
              <p>{{language!=='en'?(detail.nickName||'--'):(detail.nickName==='Pro设备用户'?'4DKanKan Pro User':(detail.nickName||'--'))}}</p>
              <p>
                <span class="child-name">
                  {{detail.snCode||(detail.childName&&detail.childName.replace('4DKKPRO_',''))||'--'}}
                </span>
              </p>
            </div>
            <div class="capacity">
              <div class="c-dec">
                <span>{{langMain.used}}{{detail.totalSpaceStr?(detail.usedSpaceStr+' / '+detail.totalSpaceStr):'--'}} </span>
              </div>
              <div class="c-line">
                <div class="active" :style="{width:getBar(detail.usedSpace,detail.totalSpace),background:getColor(detail.usedSpace,detail.totalSpace)}"></div>
              </div>
              <div class="c-detail">
                <span>{{langMain.space}}{{detail.spaceStr||'--'}} &nbsp;&nbsp;&nbsp;{{langMain.expire}}{{detail.spaceEndStr||'--'}}</span>
              </div>
            </div>
          </div>
          <div class="open-btn" :style="{backgroundColor:'#1fe4dc'}" @click="toastKR(detail.userId)">{{langMain.btnType.buy[detail.spaceId?'xufei':'name']}}</div>
      </div>
    </div>
    <div class="manage-body ">
      <div class="container">
        <div class="mc-left">
          <div v-for="(item,index) in settings" :key="index">
            <ul class="list-items">
              <li v-for="(sub,i) in item.items" :key="i" :class="{'is-en': language !== 'zh'}">
                <span @click="tabHandle(sub)" :class="{active:active.name===sub.name,'logout-span':sub.name === '退出登录'||sub.name === 'Log out'}">{{sub.name}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="mc-right">
          <div class="mc-title">{{active.name}}</div>
          <router-view />
          <!-- <component :is="active.cp"/> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex'

export default {
  data () {
    return {
      content: {
        cameraList: []
      },
      detail: '',
      activeCamera: {},
      selectActive: false,
      isSelect: false
    }
  },
  mounted () {
    if (!this.token) {
      this.$router.push('/login/login')
      return
    }
    document.addEventListener('click', (e) => {
      if (this.$refs.selectMenu) {
        if (!this.$refs.selectMenu.contains(e.target)) {
          this.selectActive = false
        }
      }
    })
    this.deviceLogin ? this.getDetail() : this.getInfo()
  },
  methods: {
    selectInId (item) {
      this.activeCamera = item
    },
    selectChange () {
      if (this.isSelect) {
        this.selectActive = !this.selectActive
      }
    },
    addstar (item) {
      let back = ''
      let font = ''
      if (item) {
        back = item.substring(7, 12) || ''
        font = item.substring(0, 3) || ''
        return font + '****' + back
      }
      return item
    },
    toastKR (userId) {
      let key = userId ? 40 : 43
      this.$toast.showConfirm('warn', this.langToast[key], async () => {
        await this.$store.dispatch('logout')
        this.$router.push({name: 'home', query: {open: true}})
      }, '', this.langToast['41'])
    },
    tabHandle (sub) {
      switch (sub.to) {
        case 'logout':
          this.$toast.showConfirm('warn', this.language === 'en' ? 'Are you sure to log out?' : '确定要退出登录吗？', async () => {
            await this.$store.dispatch('logout')
            this.$router.push({
              name: 'home'
            })
          })
          break

        default:

          this.active = sub
          this.$router.push(sub.to)
          if (sub.to.name === 'scene') {
            if (this.deviceLogin) {
              setTimeout(() => {
                this.$bus.$emit('mycid')
              }, 70)
            }
          }
          break
      }
    },

    getBar (a, b) {
      if (a === 0) {
        return 0
      }
      let temp = (a / b) * 100
      if (temp < 1) {
        return '1%'
      }

      return temp > 100 ? 100 : Math.round(temp) + '%'
    },
    getColor (a, b) {
      if (a === undefined || b === undefined) {
        return '#e2e2e2'
      }
      let temp = (a / b) * 100
      let point = 80
      let color = ''
      switch (true) {
        case temp < point:
          color = '#1fe4dc'
          break
        default:
          color = '#ff0000'
          break
      }
      return color
    },
    async getDetail () {
      let params = {
        childName: this.deviceLogin
      }
      let result = await this.$http({
        method: 'post',
        data: params,
        headers: {
          token: this.token
        },
        url: '/user/camera/detail'
      })
      let data = result.data
      if (data.code !== 0) {
        return this.$toast.show('error', this.langToast['13'])
      }
      this.detail = data.data
      await this.$store.commit('CAMERADERTAIL', this.detail)
      this.$bus.$emit('mycid')
    },
    async getInfo () {
      let res = await this.$http
        .post('/user/camera/deadline', {}, {
          headers: {
            token: this.token
          }
        })
      let data = res.data
      if (data.code !== 0) {
        return false
      }
      this.content = data.data
      this.isSelect = data.data.cameraList.length > 0
      this.activeCamera = this.isSelect ? data.data.cameraList[0] : {}
    }
  },
  computed: {
    ...mapState({
      split: state => state.ui.navDivision,
      token: state => state.user.token,
      info: state => state.user.info,
      deviceLogin: state => state.user.deviceLogin,
      langManage: state => state.language.home.manage,
      language: state => state.language.current,
      langToast: state => state.language.home.toast,
      langMain: state => state.language.home.manage.main,
      settings: state => {
        return state.user.deviceLogin ? state.language.home.manage.information.deviceSettings : state.language.home.manage.information.settings
      }
    }),
    active: {
      get () {
        return {
          name: this.langManage.information.nameArr[this.$route.name] || '',
          to: {name: this.$route.name} || ''
        }
      },
      set () {}
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>