realtorEasier-webSite/mobile/src/pages/account/manage/index.vue

<template>
  <div class="manage-layout">
    <div class="m-nav" v-if="!noNavs">
      <span>{{title}}</span>
      <span v-if="title==='我的设备'||title==='My Devices'" @click="addDevice" class="btns">
        {{langDevices.add}}
      </span>
      <span v-if="Number(consumpselected.id)===2&&(title==='消费记录'||title==='Billing Records')" @click="openInvoice" class="btns">
        开具发票
      </span>
      <div v-if="title==='我的场景'||title==='My Scene'">
        <i class="iconfont icon-sousuo" @click="$router.push({name:'scenesearch'})"></i>
      </div>
      <div v-if="title==='我的设备'||title==='My Devices'" style="min-width:12%;" class="select" ref="mbMenu1" @click="selectedActive=!selectedActive">
        {{selected.name}}
        <div class="s-sub" :class="{'s-active':selectedActive}">
          <div v-for="(item,i) in selectType" :key="i" :class="{'item-active':selected.name===item.name}" @click="emithandle(item)" class="s-item">{{item.name}}</div>
        </div>
      </div>
      <div v-if="title==='消费记录'||title==='Billing Records'" class="select" ref="mbMenu1" @click="selectedActive=!selectedActive">
        {{consumpselected.name}}
        <div class="s-sub" :class="{'s-active':selectedActive}">
          <div v-for="(item,i) in consumpType" :key="i" :class="{'item-active':consumpselected.name===item.name}" @click="emithandlerecord(item)" class="s-item">{{item.name}}</div>
        </div>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
import {mapState} from 'vuex'

let titleName = {
  'information': '个人中心',
  'order': '我的订单',
  'myscene': '我的场景',
  'device': '我的设备',
  'consumption': '消费记录',
  'consumpdetail': '记录详细',
  'change': '修改密码',
  'confirm': '确认订单',
  'submit': '确认订单',
  'paytype': '确认订单',
  'openInvoice': '开具发票',
  'payselect': '支付方式',
  'cart': '购物车',
  'vieworder': '确认订单'
}

let titleNameEn = {
  'information': 'Account Information',
  'order': 'My Order',
  'myscene': 'My Scene',
  'device': 'My Devices',
  'consumption': 'Billing Records',
  'consumpdetail': 'Detail',
  'change': 'Change Password',
  'confirm': 'Confirm',
  'submit': 'Confirm',
  'paytype': 'Confirm',
  'openInvoice': '开具发票',
  'payselect': 'Payment method:',
  'cart': 'cart',
  'vieworder': 'Confirm'
}

let noNav = ['consumpdetail', 'information', 'openInvoice', 'openInvoice', 'orderInvoice']

let recid = {
  0: '扩容记录',
  1: '充值记录',
  2: '增值发票'
}

let recidEn = {
  0: 'Expansion Records',
  1: '充值记录',
  2: '增值发票'
}

let deviceid = {
  0: 'Lite',
  4: 'Pro'
}
let consumpType = [
  {
    name: '扩容记录',
    id: 0
  }, {
    name: '充值记录',
    id: 1
  }, {
    name: '增值发票',
    id: 2
  }
]

let consumpTypeEn = [
  {
    name: 'Expansion Records',
    id: 0
  }
]
export default {
  watch: {
    language (newVal) {

    }
  },
  computed: {
    ...mapState({
      langDevices: state => state.language.home.manage.myDevices,
      language: state => state.language.current
      // iscart: state => state.user.iscart
    }),
    title: function () {
      if (this.$route.name === 'consumpdetail') {
        return this.consumpselected.name
      }
      // if (this.$route.name === 'cart' && this.iscart === 'order') {
      //   return titleName['cartorder']
      // }

      return this.language === 'en' ? titleNameEn[this.$route.name] : titleName[this.$route.name]
    },

    consumpselected: function () {
      return {
        name: this.language === 'en' ? recidEn[this.$route.params.id] : recid[this.$route.params.id],
        id: this.$route.params.id
      }
    },
    consumpType: function () {
      return this.language === 'en' ? consumpTypeEn : consumpType
    },
    noNavs: function () {
      for (let i = 0; i < noNav.length; i++) {
        let ele = noNav[i]
        if (this.$route.name === ele) {
          return true
        }
      }
      return false
    },
    selected: function () {
      return {
        name: deviceid[this.$route.params.id],
        id: this.$route.params.id
      }
    }
  },
  methods: {
    addDevice () {
      let val = this.selected.id === 4 ? 1 : 0
      this.$toast.showBinding(val, () => {
      })
    },
    openInvoice () {
      this.$router.push({
        name: 'openInvoice'
      })
    },
    emithandle (item) {
      let name = this.$route.name
      console.log(name)
      switch (name) {
        case 'device':
          this.$router.push({name: 'device', params: {id: item.id}})
          break
        default:
          this.$router.push({name: 'myscene'})
          break
      }
    },
    emithandlerecord (item) {
      this.$router.push({name: 'consumption', params: {id: item.id}})
      // this.consumpselected = item
      // this.$bus.$emit('selectdevice', item.id)
    }
  },
  data () {
    let selectType = [
      {
        name: 'Pro',
        id: 4
      }, {
        name: 'Lite',
        id: 0
      }
    ]

    return {
      selectedActive: false,
      selectType
    }
  },
  mounted () {
    document.addEventListener('click', (e) => {
      if (this.$refs.mbMenu1) {
        if (!this.$refs.mbMenu1.contains(e.target)) {
          this.selectedActive = false
        }
      }
    })
  }
}
</script>

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