personalhubs/src/views/pc/order/components/rechargeOrder.vue

<template>
  <div>
    <div v-if="total">
      <div class="order-item" v-for="(item,i) in data" :key="item.orderSn">
        <InterestsItem :item="item" :i="i"  />
      </div>
    </div>
    <div class="scene-nothing" v-else>
      <img :src="`${$cdn}images/nothing.png`" alt>
      <div>{{$t('manage.myOrders.norecord')}} 
        <!-- <a class="gotoBuy" >{{$t('manage.gotoBuy')}}</a> -->
      </div>
    </div>
    <div class="paging" v-if="total">
      <Paging @clickHandle="pageChange" @maxPage="data=>maxPage=data" :current="currentPage" :total="total" :equable="pageSize"/>
    </div>
  </div>
</template>

<script>

import InterestsItem from './rechargeItem'
import { mapState } from 'vuex'
import tableList from '@/components/table'
import {capacity, recharge, invoice} from './iconsumption'
import Paging from '@/components/Paging'
import vcenter from '@/components/vcenter'
import MemberApi from '@/apis/member'
import MallConfig from '@/config/mall'
import { i18n } from '@/lang'

let AMOUNTSTR = {
  0: '￥',
  1: '￥',
  2: '$'
}

let methodStr = {
  0: 'getMemberOrderList',
  1: 'getChargeList',
  2: 'getInvoiceList'
}
let rechargeType = {
  0: i18n.t('manage.Spending.rechargeValue.0'),
  '-1': i18n.t('manage.Spending.rechargeValue.-1'),
  1: i18n.t('manage.Spending.rechargeValue.1'),
  2: i18n.t('manage.Spending.rechargeValue.2')
}

let invoceStatusType = {
  0: '未开票',
  1: '已开票'
}

let invoiceType = {
  1: '不需要发票',
  2: '增值税普通发票',
  3: '增值税专用发票'
}

export default {
  components: {
    tableList,
    Paging,
    vcenter,
    InterestsItem
  },
  data () {
    let cameraList = [
      {
        name: '全部',
        id: ''
      },
      {
        name: '二目充值',
        id: 0
      },
      {
        name: '会员权益',
        id: 4
      }
    ]
    return {
      PAYSIDMAP: MallConfig.PAYSIDMAP,
      tabHeader: capacity,
      data: [],
      cameraList,
      active: 1,
      recharge,
      total: 30,
      pageSize: 5,
      currentPage: 1,
      tabActive: false,
      deviceActive: false,
      max: 0,
      activeDevice: '',
      activeType: '全部',
      activeId: '',
      activeTypeId: '',
      tabList: [
        {
          name: this.$t('manage.Spending.tabListMember')
        },
        {
          name: this.$t('manage.Spending.tabListRecharge')
        },
        {
          name: this.$t('manage.Spending.tabListInvoice')
        },
      ]
    }
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
      language: state => state.language.current,
      deviceLogin: state => state.user.deviceLogin,
      // myexpansion: state => {
      //   let type = Object.prototype.toString.call(state.user.myexpansion)
      //   if (type === '[object Object]') {
      //     return state.user.myexpansion
      //   }
      //   let condition = state.user.myexpansion && state.user.myexpansion !== 'null' && type !== '[object Array]'
      //   return (condition ? JSON.parse(state.user.myexpansion) : {})
      // },
      mycharge: state => {
        let type = Object.prototype.toString.call(state.user.mycharge)
        if (type === '[object Object]') {
          return state.user.mycharge
        }
        let condition = state.user.mycharge && state.user.mycharge !== 'null' && type !== '[object Array]'
        return (condition ? JSON.parse(state.user.mycharge) : {})
      },
      myinvoicelist: state => {
        let type = Object.prototype.toString.call(state.user.myinvoicelist)
        if (type === '[object Object]') {
          return state.user.myinvoicelist
        }
        let condition = state.user.myinvoicelist && state.user.myinvoicelist !== 'null' && type !== '[object Array]'
        return (condition ? JSON.parse(state.user.myinvoicelist) : {})
      },
      invoicedevice: state => {
        let type = Object.prototype.toString.call(state.user.invoicedevice)
        if (type === '[object Object]') {
          return state.user.invoicedevice
        }
        let condition = state.user.invoicedevice && state.user.invoicedevice !== 'null'
        return (condition ? state.user.invoicedevice : [])
      },
      searchKey () {
        return this.$parent.searchKey
      }
    })
  },
  watch: {
    currentPage (newVal) {
      this.getList()
    },
    language (newVal) {
      this.active = 0
      this.data.forEach(item => {
        let condition = item['validDate'] === '终身有效' ? (newVal === 'en' ? 'N/A' : '终身有效') : item['validDate']
        item['validDateStr'] = condition
        item['unitSize1'] = item['unitSize'] + item['unit'] + '/' + this.$t(`manage.shixian.${item['month']}`)
        item['channel'] = this.$t(`manage.channelType.${item['status']}`)
        item['amount1'] = AMOUNTSTR[item['payType']] + item['amount']
        item['payTypeStr'] = this.$t(`manage.PAYSSTR.${item['payType']}`)
      })
    },
    activeId (newVal) {
      if (this.active === 2) {
        this.getList()
      }
      this.getInvoiceMax()
    },
    activeTypeId (newVal) {
      if (this.active === 2) {
        this.getList()
      }
    },
    active (newVal) {
      switch (newVal) {
        case 1:
          this.tabHeader = recharge
          break
        case 2:
          !this.deviceLogin && this.getAllDevice()
          this.tabHeader = invoice
          break
        default:
          this.tabHeader = capacity
          break
      }
      if (newVal !== 1) {
        this.$emit('changeSearchShow', false)
      } else {
        this.$emit('changeSearchShow', true)
      }
      this.currentPage === 1 ? this.getList() : this.currentPage = 1
    }
  },
  methods: {
    pageChange (data) {
      this.currentPage = data
    },
    selectInId (item) {
      this.activeDevice = item.childName
      this.activeId = item.id
    },
    selectCamTy (item) {
      this.activeType = item.name
      this.activeTypeId = item.id
    },
    showDetail (item) {
      this.$toast.showInvoiceDetail(item)
    },
    getList (searchKey = '') {
      window.scrollTo(0, 0)
      let str = methodStr[this.active]
      this[str](searchKey)
    },
    openInvice () {
      let params = {
        max: this.max,
        cameraId: this.activeId
      };
      (this.max && !this.deviceLogin) && this.$toast.showInvoice(params)
    },
    async getAllDevice (searchKey = '') {
      let params = {
        cameraType: ''
      }
      await this.$store.dispatch('getInvoiceDevice', params)
      this.activeDevice = this.invoicedevice[0].childName
      this.activeId = this.invoicedevice[0].id
    },

    // 扩容记录
    async getConsumpList (searchKey = '') {
      if (this.deviceLogin) {
        searchKey = this.deviceLogin
      }
      let data = {
        params: {
          childName: searchKey.trim(),
          pageNum: searchKey ? 1 : this.currentPage,
          pageSize: this.pageSize
        },
        url: this.deviceLogin ? '/device/virtualOrder/expansionList' : '/user/virtualOrder/expansionList'
      }
      await this.$store.dispatch('getUserExpansion', data)
      if (!this.myexpansion.total && searchKey && !this.deviceLogin) {
        return this.$toast.show('warn', this.$t('toast.25'), () => {
          this.getList()
        })
      }
      console.log(this.myexpansion, 'this.myexpansion')
      this.pageSize = this.myexpansion.pageSize
      this.total = this.myexpansion.total || 0
      this.data = this.myexpansion.list
      this.data.forEach(item => {
        let condition = item['validDate'] === '终身有效' ? (this.language === 'en' ? 'N/A' : '终身有效') : item['validDate']
        item['validDateStr'] = condition
        item['statusStr'] = this.$t(`manage.myOrders.${item['status']}`)
        item['unitSize1'] = item['unitSize'] + item['unit'] + '/' + this.$t(`manage.shixian.${item['month']}`)
        item['channel'] = this.$t(`manage.channelType.${item['status']}`)
        item['amount1'] = AMOUNTSTR[item['payType']] + item['amount']
        item['payTypeStr'] = this.$t(`manage.PAYSSTR.${item['payType']}`)
      })
    },
    getMemberOrderList () {
      let data = {
        snCode: this.searchKey,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
      MemberApi.getVirtualOrderList(data).then(res => {
        this.data = res.data.data.list
        console.log(this.data)
        this.total = res.data.data.total
      })
    },
    async getInvoiceMax () {
      let res = await this.$http({
        method: 'post',
        data: {
          cameraId: this.activeId
        },
        headers: {
          token: this.token
        },
        url: '/user/invoice/max'
      })

      let data = res.data
      if (data.code !== 0) return
      this.max = data.data.maxInvoice
    },

    // 充值记录
    async getChargeList (searchKey = '') {
      if (this.deviceLogin) {
        searchKey = this.deviceLogin
      }
      let data = {
        params: {
          childName: searchKey,
          pageNum: searchKey ? 1 : this.currentPage,
          pageSize: this.pageSize
        },
        url: this.deviceLogin ? '/device/virtualOrder/chargeList' : '/user/virtualOrder/chargeList'
      }
      await this.$store.dispatch('getChargeList', data)
      if (!this.mycharge.total && searchKey && !this.deviceLogin) {
        return this.$toast.show('warn', this.$t('toast.25'), () => {
          this.getList()
        })
      }
      this.pageSize = this.mycharge.pageSize
      this.total = this.mycharge.total || 0
      this.data = this.mycharge.list
      this.data.forEach(item => {
        item['status'] = rechargeType[item['status']]
      })

      console.log(this.data)
    },

    // 发票记录
    async getInvoiceList () {
      let data = {
        params: {
          cameraId: this.activeId,
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          type: this.activeTypeId
        },
        url: this.deviceLogin ? '/device/invoice/list' : '/user/invoice/list'
      }

      await this.$store.dispatch('getInvoiceList', data)
      this.pageSize = this.myinvoicelist.pageSize
      this.total = this.myinvoicelist.total || 0
      this.data = this.myinvoicelist.list
      this.data.forEach(item => {
        item['detail'] = '详细'
        item['money'] = '￥' + item['money']
        item['finish'] = invoceStatusType[item['finish']]
        item['type'] = invoiceType[item['type']]
      })
    },
    handleSearch (keyword) {
      this.getList(keyword)
    }
  },
  mounted () {
    this.getList()

    this.$bus.$off('refreshInvoice')
    this.$bus.$on('refreshInvoice', () => {
      if (this.active === 2) {
        this.getList()
      }
      this.getInvoiceMax()
    })

    document.addEventListener('click', (e) => {
      if (this.$refs.invoiceMenu) {
        if (!this.$refs.invoiceMenu.contains(e.target)) {
          this.tabActive = false
        }
      }
      if (this.$refs.deviceMenu) {
        if (!this.$refs.deviceMenu.contains(e.target)) {
          this.deviceActive = false
        }
      }
    })
  }
}
</script>

<style lang="less" scoped>
.scene-nothing {
  text-align: center;
  padding: 42px 0 210px 0;
  img {
    padding-bottom: 22px;
  }
  div {
    font-size: 16px;
    color: #969696;
  }
}
</style>