superstar-dice/_src/components/popup/detail/detail.vue

<template>
  <transition name="msgbox-fade">
    <div class="popup-wrap" v-show="visible">
      <div class="popup-modal"></div>
      <div class="popup-box">
        <div class="popup-hd">
          <div class="popup-hd-title"><em>{{$t('popupDetail.title1')}}</em></div>
          <span class="popup-close" @click="visible = false"></span>
        </div>
        <div class="popup-bd">
          <div class="detail-wrap">
            <div class="detail-top">
              <p class="d-tips">{{$t('popupDetail.content1')}}</p>
              <div class="d-filter">
                <p>{{filterName}}</p>
                <ul>
                  <li v-for="(item, index) in filterList"
                    :key="index"
                    @click="handleCommand(item.appid)">
                    {{item.text}}
                  </li>
                </ul>
                <!-- <el-dropdown trigger="click" @command="handleCommand">
                  <span class="el-dropdown-link">
                    {{filterName}}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      v-for="(item, index) in filterList"
                      :key="index"
                      :command="item.appid">
                      {{item.text}}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown> -->
              </div>
            </div>
            <div class="detail-list">
              <div class="list-hd">
                <div class="col-1">{{$t('popupDetail.item1')}}</div>
                <div class="col-2">{{$t('popupDetail.item2')}}</div>
                <div class="col-3">{{$t('popupDetail.item3')}}</div>
              </div>
              <div class="list-bd">
                <ul>
                  <li v-for="(item, index) in logList" :key="index">
                    <div class="col-1">
                      <h5>{{`${item.typeName} (${item.appid})`}}</h5>
                      <p>{{item.create_time}}</p>
                    </div>
                    <div class="col-2">
                      <em>{{item.memo}}</em>
                    </div>
                    <div class="col-3">
                      <span class="tpAdd tpEOS" v-if="item.change_amount_format > 0">+{{item.change_amount_format}}</span>
                      <span class="tpMinus tpEOS" v-else>{{item.change_amount_format}}</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import API from '@/api/'
import Vue from 'vue'
import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui'

Vue.component(Dropdown.name, Dropdown)
Vue.component(DropdownMenu.name, DropdownMenu)
Vue.component(DropdownItem.name, DropdownItem)

export default {
  name: 'detailPopup',
  data () {
    return {
      logList: [],
      filterList: [{
        appid: '',
        text: this.$t('popupDetail.filter.all')
      }, {
        appid: 'box',
        text: this.$t('popupDetail.filter.box')
      }, {
        appid: 'sicbo',
        text: this.$t('popupDetail.filter.sicbo')
      }],
      filterName: this.$t('popupDetail.filter.all'),
      appid: '',
      listGlobalMap: {
        'deposit': this.$t('popupDetail.global.deposit'),
        'withdraw': this.$t('popupDetail.global.withdraw'),
        'vip_return': this.$t('popupDetail.global.vip_return'),
        'luckdraw': this.$t('popupDetail.global.luckdraw')
      },
      listBoxMap: {
        'win': this.$t('popupDetail.box.win'),
        'return': this.$t('popupDetail.box.return'),
        'pledge': this.$t('popupDetail.box.pledge')
      },
      listSicboMap: {
        'win': this.$t('popupDetail.sicbo.win'),
        'bet': this.$t('popupDetail.sicbo.bet'),
        'autobet': this.$t('popupDetail.sicbo.autobet')
      }
    }
  },
  methods: {
    handleCommand (command) {
      this.appid = command
      this.filterList.find(n => {
        if (n.appid === command) {
          this.filterName = n.text
        }
      })
      this.refreshList()
    },
    refreshList () {
      API.eos.getBalanceLog({
        appid: this.appid
      }).then(({ data }) => {
        if (data.code === 0) {
          let list = data.data.list

          list.forEach(n => {
            let listMap

            if (n.appid === 'box') {
              listMap = Object.assign(this.listGlobalMap, this.listBoxMap)
            } else if (n.appid === 'sicbo') {
              listMap = Object.assign(this.listGlobalMap, this.listSicboMap)
            }

            n.typeName = listMap[n.type]
          })

          this.logList = list
        }
      })
    }
  },
  created () {
    this.refreshList()
  }
}
</script>

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