Files
PC/src/components/history-tab/history-tab.vue
T

400 lines
12 KiB
Vue

<template>
<div class="history-tab">
<div class="hd">
<button class="btn" :class="{'on':time_interval==1}" @click="choseTime(1); ">{{Language.today}}</button>
<button class="btn" :class="{'on':time_interval==2}" @click="choseTime(2);">{{Language.yesterday}}</button>
<button class="btn" :class="{'on':time_interval==3}" @click="choseTime(3);">{{Language.latest_week}}</button>
</div>
<el-table v-if="type==1||type==2||type==4||type==5"
class="tabbox"
:data="tableData"
stripe
border
style="width: 100%">
<el-table-column
prop="game_num"
:label="Language.note_number">
</el-table-column>
<el-table-column
prop="table_name"
:label="Language.history_type">
</el-table-column>
<el-table-column
prop="card_result"
:label="Language.history_result">
</el-table-column>
<el-table-column
prop="user_bet"
:label="Language.history_play">
<template name="ss" slot-scope="scope">
<el-button v-if="scope.row.number_is_rob==1" size="small" @click="showRobRecord(scope.row.number_tab_id)">{{scope.row.user_bet}}</el-button>
<span style="color: #e6ac66" v-else>{{scope.row.user_bet}}</span>
</template>
</el-table-column>
<el-table-column
prop="create_time"
:label="Language.bet_time"
width="180">
</el-table-column>
<el-table-column
prop="money_before_bet"
:label="Language.pre_transaction_balance">
</el-table-column>
<el-table-column
prop="amount"
:label="Language.bet_amount">
</el-table-column>
<el-table-column
prop="win_total"
:label="Language.win_or_lose">
</el-table-column>
<el-table-column
prop="ximaliang"
:label="Language.xima_liang">
</el-table-column>
<el-table-column
prop="maliang"
:label="Language.ma_liang">
</el-table-column>
</el-table>
<el-table v-else-if="type==10||type==11"
class="tabbox"
:data="tableData"
stripe
border
style="width: 100%">
<el-table-column
prop="id"
:label="Language.note_number">
</el-table-column>
<el-table-column
prop="mode"
:label="Language.history_type">
</el-table-column>
<el-table-column
prop="create_time"
:label="Language.create_time"
width="180">
</el-table-column>
<el-table-column
prop="old_money"
:label="Language.pre_transaction_balance" >
</el-table-column>
<el-table-column
prop="new_money"
:label="Language.post_trade_balance">
</el-table-column>
<el-table-column
prop="amount"
:label="Language.merchandise_amount">
</el-table-column>
</el-table>
<el-table v-else-if="type==12"
class="tabbox"
:data="tableData"
stripe
border
style="width: 100%">
<el-table-column
prop="id"
:label="Language.note_number" >
</el-table-column>
<el-table-column
prop="money"
:label="Language.reward_amount" >
</el-table-column>
<el-table-column
prop="table_name"
:label="Language.reward_table_num" >
</el-table-column>
<el-table-column
prop="create_time"
:label="Language.create_time"
width="180">
</el-table-column>
</el-table>
<div class="detailTable-pop-mast " v-if="(type==5||type==4)&&isShowDetail"></div>
<div class="detailTable-pop animated bounceInLeft" v-if="(type==5||type==4)&&isShowDetail">
<button class="detail-close-btn" @click="offDetailPop"> {{Language.close}} </button>
<el-table
class="tabbox detailTable"
:data="tableDetailData"
stripe
border
style="width: 100%">
<el-table-column
prop="game_num"
:label="Language.note_number" >
</el-table-column>
<el-table-column
prop="username"
:label="Language.history_username" >
</el-table-column>
<el-table-column
prop="table_name"
:label="Language.history_type" >
</el-table-column>
<el-table-column
prop="card_result"
:label="Language.history_result" >
</el-table-column>
<el-table-column
prop="user_bet"
:label="Language.history_play" >
</el-table-column>
<el-table-column
prop="create_time"
:label="Language.bet_time"
width="180">
</el-table-column>
<el-table-column
prop="amount"
:label="Language.bet_amount">
</el-table-column>
<el-table-column
prop="win_total"
:label="Language.win_or_lose">
</el-table-column>
</el-table>
</div>
<div class="detailTable-ft animated bounceInLeft" v-if="(type==5||type==4)&&isShowDetail">
<span class="num">{{Language.total}} {{dnum}} {{Language.slip}}</span>
<span class="pagenum">{{Language.total}}{{dpagenum}}{{Language.page}}</span>
<span class="pages" v-if="pagenum!=0">{{Language.history_num}}{{dpage}}{{Language.page}}</span>
<span class="btn" @click="prevPageD" v-if="dpagenum>1&&dpage!=1">{{Language.pre_page}}</span>
<span class="btn" @click="nextPageD" v-if="dpagenum>1&&dpagenum!=dpage">{{Language.next_page}}</span>
</div>
<div class="ft">
<span class="num">{{Language.total}} {{num}} {{Language.slip}}</span>
<span class="pagenum">{{Language.total}}{{pagenum}}{{Language.page}}</span>
<span class="pages" v-if="pagenum!=0">{{Language.history_num}}{{page}}{{Language.page}}</span>
<span class="btn" @click="prevPage" v-if="pagenum>1&&page!=1">{{Language.pre_page}}</span>
<span class="btn" @click="nextPage" v-if="pagenum>1&&pagenum!=page">{{Language.next_page}}</span>
<span class="alldown" v-if="type==1||type==2||type==4">{{Language.total_bet}} {{alldown}}</span>
<span class="allwin" v-if="type==1||type==2||type==4">{{Language.total_win}} {{allwin}}</span>
<span class="allwin" v-if="type==10">{{Language.total_score_p}} {{recharge_amount}}</span>
<span class="allwin" v-if="type==11">{{Language.total_score_n}} {{recharge_amount}}</span>
<span class="allwin" v-if="type==12">当页打赏总额 {{recharge_amount}}</span>
</div>
</div>
</template>
<style>
.history-tab{position: relative}
.detailTable-pop-mast{width: 100%;height: 100%;background: #000;opacity: 0.8;position: absolute;top: 0px;left: 0px;}
.detailTable-pop{position: absolute;top: 0px;left: 0px;background: #fff; width: 90%}
.detailTable{}
.detail-close-btn{position:absolute;top: 0px;right: -50px; padding: 0 10px; }
.tabbox .el-button{ border: none;padding: 5px;line-height: normal;color: #000 }
.tabbox .el-button:hover{ border: none;padding: 0;padding: 5px;color: #000}
.history-tab .detailTable{ height: auto;background: #553e31;}
.history-tab .detailTable-ft{position: absolute;bottom: 55px;left: 0px; color: #fff; }
.history-tab .detailTable-ft span{ padding-right: 5px;}
</style>
<script>
import './history-tab.css';
import { mapState } from 'vuex'
import {encrypt,decrypt} from '../../common/js/secret.js'
import {Table,TableColumn,Button } from 'element-ui';
export default {
data (){
return {
num:0,
pagenum:0,
page:1,
dnum:0,
dpagenum:0,
dpage:1,
alldown:0,
allwin:0,
recharge_amount:0,
time_interval:1,
tableData: [],
ApiUrl:JSON.parse(localStorage.getItem('ApiUrl')),
isShowDetail:false,
number_tab_id:null
}
},
components: {
'el-table':Table,
'el-table-column':TableColumn,
'el-button':Button
},
mounted: function() {
this.getData();
},
methods: {
showRobRecord(number_tab_id){
const that=this;
const userInfo=this.userInfo;
this.number_tab_id=number_tab_id||this.number_tab_id;
const encryptstring={
user_id:userInfo.uid,
game_id:this.type,
page:this.dpage,
api_token:userInfo.api_token,
number_tab_id:this.number_tab_id
};
////////////////////////////下单详细
this.$axios.post(this.ApiUrl+'/get_rob_bet', {encryptData:encrypt(JSON.stringify(encryptstring)).toString()})
.then(response=>{
if(response.data.Success==1){
that.isShowDetail=true;
const data=JSON.parse(decrypt(response.data.Data));
that.tableDetailData=data.bet_info;
that.dnum=data.bet_num;
that.dpagenum=data.page_num;
}
}).catch(error=>{
console.log(error)
});
},
offDetailPop(){
this.isShowDetail=false
},
choseTime(type){
this.time_interval=type;
this.page=1;
this.getData();
},
getData(){
const userInfo=this.userInfo;
var _this=this;
if(this.type!=10&&this.type!=11&&this.type!=12){
// 游戏记录
const encryptstring={
user_id:userInfo.uid,
game_id:this.type,
page:this.page,
api_token:userInfo.api_token,
time_interval:this.time_interval
}
this.$axios.post(this.ApiUrl+'/get_user_bets', {encryptData:encrypt(JSON.stringify(encryptstring)).toString()})
.then(response=>{
if(response.data.Success==1){
const data=JSON.parse(decrypt(response.data.Data));
_this.tableData=data.bet_info;
_this.num=data.bet_num;
_this.pagenum=data.page_num;
_this.alldown=data.bet_list_amount;
_this.allwin=data.bet_list_wintotal;
console.log(data)
}
}).catch(error=>{
console.log(error)
});
}else if(this.type==12){
// 打赏记录
const encryptstring={
user_id:userInfo.uid,
page:this.page,
api_token:userInfo.api_token,
time_interval:this.time_interval
}
console.log(encryptstring)
this.$axios.post(this.ApiUrl+'/tip_record', {encryptData:encrypt(JSON.stringify(encryptstring)).toString()})
.then(response=>{
if(response.data.Success==1){
const data=JSON.parse(decrypt(response.data.Data));
this.tableData=data.tip;
this.num=data.tip_num;
this.pagenum=data.page_num;
this.recharge_amount=data.tip_amount;
console.log(data)
}
}).catch(error=>{
console.log(error)
});
}else{
// 上下分记录
if(this.type==10){
var mode=1;
}else if(this.type==11){
var mode=2;
}
const encryptstring={
user_id:userInfo.uid,
page:this.page,
mode:mode,
api_token:userInfo.api_token,
time_interval:this.time_interval
}
// console.log(encrypt(JSON.stringify(encryptstring)).toString())
this.$axios.post(this.ApiUrl+'/recharge_record', {encryptData:encrypt(JSON.stringify(encryptstring)).toString()})
.then(response=>{
if(response.data.Success==1){
const data=JSON.parse(decrypt(response.data.Data));
this.tableData=data.recharge;
this.num=data.recharge_num;
this.pagenum=data.page_num;
this.recharge_amount=data.recharge_amount;
// console.log(data)
}
}).catch(error=>{
console.log(error)
});
}
},
prevPage(){
this.page=this.page-1;
this.getData();
},
nextPage(){
this.page=this.page+1;
this.getData();
},
prevPageD(){
this.dpage=this.dpage-1;
this.showRobRecord();
},
nextPageD(){
this.dpage=this.dpage+1;
this.showRobRecord();
}
},
computed: {
...mapState(['userInfo','Language'])
},
watch:{
},
props: {
type: Number,
required: true
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>