GamePortrait/src/components/Record.vue

883 lines
23 KiB
Vue

<template>
<div class="record">
<div class="nav">
<div class="select-view">
<div
class="select-box left"
:class="{
on:
type == 1 ||
type == 2 ||
type == 4 ||
type == 5 ||
type == 6 ||
type == 7 ||
type == 8
}"
>
<span class="text" @click="gameType()">{{ typetext }}</span>
<i class="icon"></i>
<ul class="animate__animated animate__fadeIn" v-if="showGameType">
<li
class="btn"
:class="{ active: type == 1 }"
@click="choseType('1', $lang[$Type].Baccarat)"
>
{{ $lang[$Type].Baccarat }}
</li>
<li
class="btn"
:class="{ active: type == 2 }"
@click="choseType('2', $lang[$Type].DragonTiger)"
>
{{ $lang[$Type].DragonTiger }}
</li>
<li
class="btn"
:class="{ active: type == 4 }"
@click="choseType('4', $lang[$Type].NN)"
>
{{ $lang[$Type].NN }}
</li>
<li
class="btn"
:class="{ active: type == 5 }"
@click="choseType('5', $lang[$Type].ThreeCard)"
>
{{ $lang[$Type].ThreeCard }}
</li>
<li
class="btn"
:class="{ active: type == 6 }"
@click="choseType('6', $lang[$Type].Toning)"
>
{{ $lang[$Type].Toning }}
</li>
<li
class="btn"
:class="{ active: type == 7 }"
@click="choseType('7', $lang[$Type].Dice)"
>
{{ $lang[$Type].Dice }}
</li>
<li
class="btn"
:class="{ active: type == 8 }"
@click="choseType('8', $lang[$Type].roulette)"
>
{{ $lang[$Type].roulette }}
</li>
</ul>
</div>
<div
class="select-box right"
:class="{ on: type == 10 || type == 11 || type == 12 }"
>
<span class="text" @click="capitalType()">{{ capitaltext }}</span>
<i class="icon"></i>
<ul class="animate__animated animate__fadeIn" v-if="showCapitalType">
<li
class="btn"
:class="{ active: type == 10 }"
@click="choseType('10', $lang[$Type].Upperrecord)"
>
{{ $lang[$Type].Upperrecord }}
</li>
<li
class="btn"
:class="{ active: type == 11 }"
@click="choseType('11', $lang[$Type].Subrecord)"
>
{{ $lang[$Type].Subrecord }}
</li>
<li
class="btn"
:class="{ active: type == 12 }"
@click="choseType('12', $lang[$Type].Rewardrecord)"
>
{{ $lang[$Type].Rewardrecord }}
</li>
</ul>
</div>
</div>
<div class="time">
<span
class="item btn"
@click="choseTime(1)"
:class="{ active: time_interval == 1 }"
>
{{ $lang[$Type].Today }}
</span>
<span
class="item btn"
@click="choseTime(2)"
:class="{ active: time_interval == 2 }"
>
{{ $lang[$Type].Yesterday }}
</span>
<span
class="item btn"
@click="choseTime(3)"
:class="{ active: time_interval == 3 }"
>
{{ $lang[$Type].Week }}
</span>
</div>
</div>
<section class="view" @click="offSelect()">
<div
class="list-box"
v-if="
type == 1 ||
type == 2 ||
type == 4 ||
type == 5 ||
type == 6 ||
type == 7 ||
type == 8
"
>
<table class="hd">
<tr>
<td>{{ $lang[$Type].Notenumber }}</td>
<td>{{ $lang[$Type].Type }}</td>
<td>{{ $lang[$Type].Result }}</td>
<td>{{ $lang[$Type].Play }}</td>
<td>{{ $lang[$Type].Date }}</td>
<td>{{ $lang[$Type].Beforebalance }}</td>
<td>{{ $lang[$Type].bet_amount }}</td>
<td>{{ $lang[$Type].note_win_lose }}</td>
</tr>
</table>
<div class="bd">
<table>
<tr v-for="(item, index) in tableData" :key="index">
<td>{{ item.game_num }}</td>
<td>{{ item.table_name }}</td>
<td>{{ item.card_result }}</td>
<td>
<span
v-if="item.number_is_rob == 1"
@click="
Details(item.number_tab_id, item.table_name, item.win_total)
"
class="btn"
>
{{ item.user_bet }}
</span>
<span v-else>{{ item.user_bet }}</span>
</td>
<td>{{ item.create_time }}</td>
<td>{{ $fk(item.money_before_bet) }}</td>
<td>{{ $fk(item.amount) }}</td>
<td>{{ $fk(item.win_total) }}</td>
</tr>
</table>
</div>
</div>
<div v-if="type == 10 || type == 11" class="list-box">
<table class="hd fadeIn animated0">
<tr>
<td>{{ $lang[$Type].Notenumber }}</td>
<td>{{ $lang[$Type].Type }}</td>
<td>{{ $lang[$Type].Date }}</td>
<td>{{ $lang[$Type].Beforebalance }}</td>
<td>{{ $lang[$Type].bet_amount }}</td>
<td>{{ $lang[$Type].Transaction }}</td>
</tr>
</table>
<div class="bd">
<table>
<tr v-for="item in tableData" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.mode }}</td>
<td>{{ item.create_time }}</td>
<td>{{ $fk(item.old_money) }}</td>
<td>{{ $fk(item.new_money) }}</td>
<td>{{ $fk(item.amount) }}</td>
</tr>
</table>
</div>
</div>
<div v-if="type == 12" class="list-box">
<table class="hd fadeIn animated0">
<tr>
<td>{{ $lang[$Type].Number }}</td>
<td>{{ $lang[$Type].Rewardamount }}</td>
<td>{{ $lang[$Type].RewardTab }}</td>
<td>{{ $lang[$Type].Date }}</td>
</tr>
</table>
<table class="bd">
<tr v-for="item in tableData" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ $fk(item.money) }}</td>
<td>{{ item.table_name }}</td>
<td>{{ item.create_time }}</td>
</tr>
</table>
</div>
<div class="ft fadeIn animated0">
<span v-if="$Type == 'cn'" class="num">共 {{ num }} 条</span>
<span v-if="$Type == 'cn'" class="pagenum">共{{ pagenum }}页</span>
<span class="pages" v-if="pagenum != 0 && $Type == 'cn'">
第{{ page }}页
</span>
<span v-if="$Type == 'tw'" class="num">共 {{ num }} 條</span>
<span v-if="$Type == 'tw'" class="pagenum">共{{ pagenum }}頁</span>
<span class="pages" v-if="pagenum != 0 && $Type == 'tw'">
第{{ page }}頁
</span>
<span v-if="$Type == 'en'" class="num">Total of {{ num }}</span>
<span v-if="$Type == 'en'" class="pagenum">
Total {{ pagenum }} pages
</span>
<span class="pages" v-if="pagenum != 0 && $Type == 'en'">
Page {{ page }}
</span>
<span class="btn" @click="prevPage" v-if="pagenum > 1 && page != 1">
{{ $lang[$Type].Previous }}
</span>
<span
class="btn"
@click="nextPage"
v-if="pagenum > 1 && pagenum != page"
>
{{ $lang[$Type].Next }}
</span>
<span
class="alldown"
v-if="type == 1 || type == 2 || type == 4 || type == 5"
>
{{ $lang[$Type].Totalbet }} {{ $fk(alldown) }}
</span>
<span
class="allwin"
v-if="type == 1 || type == 2 || type == 4 || type == 5"
>
{{ $lang[$Type].TotalWin }} {{ $fk(returnFloat(allwin)) }}
</span>
<span class="allwin" v-if="type == 10">
{{ $lang[$Type].Upperscore }} {{ $fk(recharge_amount) }}
</span>
<span class="allwin" v-if="type == 11">
{{ $lang[$Type].Subordinate }} {{ $fk(recharge_amount) }}
</span>
<span class="allwin" v-if="type == 12">
{{ $lang[$Type].Pagerewarded }} {{ $fk(recharge_amount) }}
</span>
</div>
</section>
<section class="rob-view view" v-if="showRob">
<div class="list-box">
<div class="title">
<small class="btn" @click="backRecord()">
{{ $lang[$Type].Back }}
</small>
{{ robTitle }}
</div>
<table class="hd">
<tr>
<td>{{ $lang[$Type].UserName }}</td>
<td>{{ $lang[$Type].Type }}</td>
<td>{{ $lang[$Type].ThisResults }}</td>
<td>{{ $lang[$Type].Betamount }}</td>
<td>{{ $lang[$Type].msg_win_lose }}</td>
<td>{{ $lang[$Type].Date }}</td>
</tr>
</table>
<div class="bd">
<table>
<tr v-for="(item, index) in robData" :key="index">
<td>{{ item.username }}</td>
<!-- <td>{{item.table_name}}</td> -->
<td>{{ item.user_bet }}</td>
<td>{{ item.card_result }}</td>
<td>{{ $fk(item.amount) }}</td>
<td>{{ $fk(item.win_total) }}</td>
<td>{{ item.create_time }}</td>
</tr>
</table>
</div>
</div>
<div class="ft fadeIn animated0">
<span v-if="$Type == 'cn'" class="num">共 {{ num }} 条</span>
<span v-if="$Type == 'cn'" class="pagenum">共{{ pagenum }}页</span>
<span class="pages" v-if="pagenum != 0 && $Type == 'cn'">
第{{ page }}页
</span>
<span v-if="$Type == 'tw'" class="num">共 {{ num }} 條</span>
<span v-if="$Type == 'tw'" class="pagenum">共{{ pagenum }}頁</span>
<span class="pages" v-if="pagenum != 0 && $Type == 'tw'">
第{{ page }}頁
</span>
<span v-if="$Type == 'en'" class="num">Total of {{ num }}</span>
<span v-if="$Type == 'en'" class="pagenum">
Total {{ pagenum }} pages
</span>
<span class="pages" v-if="pagenum != 0 && $Type == 'en'">
Page {{ page }}
</span>
<span
class="btn"
@click="robprevPage"
v-if="robpagenum > 1 && robpage != 1"
>
{{ $lang[$Type].Previous }}
</span>
<span
class="btn"
@click="robnextPage"
v-if="robpagenum > 1 && robpagenum != page"
>
{{ $lang[$Type].Next }}
</span>
<span class="alldown">
{{ $lang[$Type].Totalbet }} {{ $fk(roballdown) }}
</span>
<span class="allwin">{{ $lang[$Type].TotalWin }} {{ $fk(roballwin) }}</span>
</div>
</section>
</div>
</template>
<script>
import { mapState } from "vuex"
import { showToast, showLoadingToast, closeToast } from "vant"
import { getUserBets, getRobBet, tipRecord, rechargeRecord } from "@/utils/api"
export default {
name: "RecordView",
data() {
return {
frist: true,
showGameType: false,
showCapitalType: false,
num: 0,
pagenum: 0,
page: 1,
alldown: 0,
allwin: 0,
recharge_amount: 0,
time_interval: 1,
tableData: [],
type: 1,
// typetext:this.$lang[this.$Type].Baccarat||'',
// capitaltext:this.$lang[this.$Type].Fundrecord||'',
typetext: "",
capitaltext: "",
showRob: false,
robTitle: "",
robData: [],
robnum: 0,
robpagenum: 0,
roballdown: 0,
roballwin: 0,
robpage: 1,
rob_number_tab_id: 0,
rob_title: "",
rob_win_total: 0
}
},
methods: {
returnFloat(num) {
let value = Math.round(parseFloat(num) * 100) / 100
let xsd = value.toString().split(".")
if (xsd.length == 1) {
value = value.toString() + ".00"
return value
}
if (xsd.length > 1) {
if (xsd[1].length < 2) {
value = value.toString() + "0"
}
return value
}
},
gameType() {
this.showGameType = !this.showGameType
this.showCapitalType = false
},
capitalType() {
this.showCapitalType = !this.showCapitalType
this.showGameType = false
},
offSelect() {
if (this.showGameType) {
this.showGameType = false
}
if (this.showCapitalType) {
this.showCapitalType = false
}
},
choseTime(type) {
this.time_interval = type
this.page = 1
this.getData(this.type)
},
choseType(type, text) {
this.page = 1
if (type <= 7) {
this.typetext = text
this.capitaltext = this.$lang[this.$Type].Betrecord
this.showGameType = false
this.getData(type)
} else {
if (this.userInfo.is_sw != 1) {
this.capitaltext = text
this.typetext = this.$lang[this.$Type].Gamerecord
this.showCapitalType = false
this.getData(type)
} else {
showToast(this.$lang[this.$Type].Not_power)
}
}
},
getData(type) {
this.type = type
if (this.type != 10 && this.type != 11 && this.type != 12) {
// 游戏记录
const params = {
user_id: this.userInfo.id,
api_token: this.userInfo.api_token,
game_id: this.type,
page: this.page,
time_interval: this.time_interval
}
showLoadingToast({
message: "加载中...",
forbidClick: true
})
getUserBets(params)
.then((response) => {
if (response.Success == 1) {
const data = response.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
} else {
console.log(response)
}
})
.catch((error) => {
console.log(error)
})
.finally(() => {
closeToast()
})
} else if (this.type == 12) {
// 打赏记录
const params = {
user_id: this.userInfo.id,
api_token: this.userInfo.api_token,
page: this.page,
time_interval: this.time_interval
}
tipRecord(params)
.then((response) => {
if (response.Success == 1) {
const data = response.Data
this.tableData = data.tip
this.num = data.tip_num
this.pagenum = data.page_num
this.recharge_amount = data.tip_amount
// console.log(data)
} else {
// console.log(data)
}
})
.catch((error) => {
console.log(error)
})
} else {
// 上下分记录
let mode = 1
if (this.type == 10) {
mode = 1
} else if (this.type == 11) {
mode = 2
}
const params = {
user_id: this.userInfo.id,
api_token: this.userInfo.api_token,
page: this.page,
mode: mode,
time_interval: this.time_interval
}
rechargeRecord(params)
.then((response) => {
if (response.Success == 1) {
const data = response.Data
this.tableData = data.recharge
this.num = data.recharge_num
this.pagenum = data.page_num
this.recharge_amount = data.recharge_amount
} else {
// console.log(data)
}
})
.catch((error) => {
console.log(error)
})
}
},
// 查看庄详情
Details(number_tab_id, title, win_total) {
this.rob_number_tab_id = number_tab_id
this.rob_title = title
this.rob_win_total = win_total
const params = {
user_id: this.userInfo.id,
api_token: this.userInfo.api_token,
game_id: this.type,
page: this.robpage,
number_tab_id: number_tab_id
}
if (win_total != 0) {
getRobBet(params)
.then((response) => {
if (response.Success == 1) {
const data = response.Data
// console.log(data)
this.showRob = true
this.robTitle = title
this.robData = data.bet_info
this.robnum = data.bet_num
this.robpagenum = data.page_num
this.roballdown = data.bet_list_amount
this.roballwin = data.bet_list_wintotal
} else {
// console.log(data)
}
})
.catch((error) => {
console.log(error)
})
} else {
showToast(this.$lang[this.$Type].Not_bet)
}
},
backRecord() {
this.showRob = false
},
prevPage() {
this.page = this.page - 1
this.getData(this.type)
},
nextPage() {
this.page = this.page + 1
this.getData(this.type)
},
robprevPage() {
this.robpage = this.robpage - 1
this.Details(this.rob_number_tab_id, this.rob_title, this.rob_win_total)
},
robnextPage() {
this.robpage = this.robpage + 1
this.Details(this.rob_number_tab_id, this.rob_title, this.rob_win_total)
},
goback() {
this.$router.go(-1)
}
},
computed: {
...mapState({
$Type: (state) => state.config.$Type,
$lang: (state) => state.config.$lang,
userInfo: (state) => state.app.userInfo
})
},
watch: {
userInfo: {
handler: function (newData) {
if (newData.api_token) {
this.getData(1)
this.typetext = this.$lang[this.$Type].Baccarat
this.capitaltext = this.$lang[this.$Type].Fundrecord
}
},
deep: true,
immediate: true
}
}
}
</script>
<style lang="scss" scoped>
.record {
width: 100%;
height: 100%;
overflow: hidden;
input {
border: none;
}
}
.record .nav {
color: #ddd;
width: 100%;
padding: 0.2rem 0.15rem;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 90;
}
.record .select-view {
display: flex;
border-radius: 100rem;
box-shadow: 0 0 2px #cba552;
margin-left: 0.2rem;
}
.record .nav .select-box {
background: #2b2e31;
width: 2.8rem;
text-align: center;
position: relative;
z-index: 888;
transform: rotateX(0deg);
}
.record .nav .select-box.on {
color: #000;
background-color: #baa277;
background-image: linear-gradient(
180deg,
#baa277 0%,
#f0d199 50%,
#8b5e25 100%
);
}
.record .nav .select-box.left {
border-top-left-radius: 100rem;
border-bottom-left-radius: 100rem;
}
.record .nav .select-box.right {
border-bottom-right-radius: 100rem;
border-top-right-radius: 100rem;
}
.record .select-box .text {
background: none;
width: 100%;
display: block;
text-align: center;
font-size: 0.4rem;
padding: 0.2rem 0;
padding-right: 0.6rem;
font-weight: bold;
box-sizing: border-box;
line-height: 1.5;
}
.record .select-box .icon {
position: absolute;
top: 50%;
right: 0.2rem;
margin-top: -0.1rem;
width: 0;
height: 0;
border-left: 0.15rem solid transparent;
border-right: 0.15rem solid transparent;
border-top: 0.2rem solid #fff;
}
.record .select-box.on .icon {
border-top-color: #000;
}
.record .nav ul {
position: absolute;
width: 100%;
background: #000;
z-index: 99;
left: 0;
border-radius: 2px;
box-shadow: 0 0 3px #060606;
top: 0.9rem;
transform: rotateX(0deg);
}
.record .nav li {
font-size: 0.4rem;
font-weight: bold;
display: block;
text-align: center;
padding: 0.2rem 0;
color: #fff;
box-sizing: border-box;
transition: 0.3s all;
}
.record .nav .btn.active {
color: #efcd69;
border: 1px solid #efcd69;
}
.record .nav .time {
margin-right: 2rem;
display: flex;
align-items: center;
}
.record .nav .time .item {
font-size: 0.4rem;
padding: 0.2rem 0.4rem;
font-weight: bold;
border-radius: 100rem;
background-color: #4385cd;
background-image: linear-gradient(
180deg,
#4385cd 0%,
#3b7bbe 50%,
#1b4e7d 100%
);
line-height: 1.5;
box-sizing: border-box;
}
.record .nav .time .item:nth-of-type(2) {
margin-left: 0.3rem;
margin-right: 0.3rem;
}
.record .nav .time .item.active {
background-color: #baa277;
background-image: linear-gradient(
180deg,
#baa277 0%,
#f0d199 50%,
#8b5e25 100%
);
color: #000;
}
.record .view {
height: calc(100% - 2.4rem);
width: 100%;
position: relative;
overflow-y: auto;
}
.record .view .hd {
font-size: 0.38rem;
color: #edcf99;
}
.record .view table {
color: #d8cfa9;
font-weight: 500;
table-layout: fixed;
width: 100%;
text-align: center;
border-collapse: collapse;
}
.record .view .bd tr:first-child td {
border-top: none;
}
.record .view .bd tr:nth-child(odd) {
color: #d1cfcc;
background: #6d5e4a;
font-size: 0.35rem;
}
.record .view table td {
padding: 0.05rem 0.2rem;
height: 32px;
font-size: 0.35rem;
color: #d1cfcc;
text-align: left;
font-weight: normal;
}
.record .view table td .btn {
background: #f44336;
color: #fff;
border-radius: 2px;
padding: 2px;
display: block;
font-size: 12px;
}
.record .view .list-box {
width: 100%;
height: 100%;
overflow: hidden;
}
.record .view .bd {
max-height: 100%;
overflow-y: auto;
}
.record .view .bd table {
margin-bottom: 2rem;
}
.record .view .ft {
background: #2b2e31;
color: #edcf99;
position: fixed;
width: 100%;
text-align: center;
line-height: 0.8rem;
height: 0.8rem;
bottom: 0;
left: 0;
right: 0;
display: table;
// border-bottom-right-radius: 10px;
// border-bottom-left-radius: 10px;
overflow: hidden;
}
.record .view .ft span {
display: table-cell;
background: #2b2e31;
font-size: 0.35rem;
}
.record .rob-view {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 10px;
z-index: 9;
/* background: url(../common/images/landscape/record_bg.jpg) repeat-x; */
-webkit-background-size: auto 100%;
background-size: auto 100%;
}
.record .rob-view .title {
text-align: center;
background: #252729;
color: #edcf99;
// border-top-right-radius: 10px;
// border-top-left-radius: 10px;
border-bottom: 1px solid #453312;
line-height: 1.2rem;
font-size: 0.45rem;
font-weight: bold;
position: relative;
}
.record .rob-view .title .btn {
position: absolute;
left: 0.2rem;
top: 0;
padding-left: 0.45rem;
/* background: url(../common/images/icon/goback_icon.png) left 0.35rem no-repeat; */
-webkit-background-size: 0.3rem;
background-size: 0.3rem;
}
</style>