chushih
This commit is contained in:
li
@@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<view class="transfer">
|
||||
<u-navbar
|
||||
title=""
|
||||
bgColor="#000"
|
||||
:placeholder="true"
|
||||
:fixed="true"
|
||||
leftIcon=""
|
||||
height="60"
|
||||
>
|
||||
<view slot="left">
|
||||
<text class="navbar-lab">{{ $lang.transfer }}</text>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view class="content">
|
||||
<view class="list">
|
||||
<view class="lable money"
|
||||
>{{ $lang.accountBalance }}：{{ userInfo.money }}</view
|
||||
>
|
||||
<view class="lable gmoney">{{ $lang.gameBalance }}：{{ gmoney }}</view>
|
||||
</view>
|
||||
|
||||
<view class="list transfer-box">
|
||||
<u-input
|
||||
class="input"
|
||||
color="#947b2b"
|
||||
clearable
|
||||
border="none"
|
||||
v-model="from"
|
||||
readonly
|
||||
>
|
||||
<u--text
|
||||
:text="$lang.from"
|
||||
slot="prefix"
|
||||
margin="0 3px 0 0"
|
||||
type="tips"
|
||||
></u--text>
|
||||
</u-input>
|
||||
<view class="down_icon"></view>
|
||||
<u-input
|
||||
class="input"
|
||||
color="#947b2b"
|
||||
clearable
|
||||
border="none"
|
||||
v-model="to"
|
||||
readonly
|
||||
>
|
||||
<u--text
|
||||
:text="$lang.to"
|
||||
slot="prefix"
|
||||
margin="0 3px 0 0"
|
||||
type="tips"
|
||||
></u--text>
|
||||
</u-input>
|
||||
<view class="transfer-btn" @tap="switchFlow"></view>
|
||||
</view>
|
||||
|
||||
<view class="picker-view" @click="show = true">
|
||||
<u-input
|
||||
readonly
|
||||
:placeholder="$lang.pleaseChoose"
|
||||
color="#93979b"
|
||||
v-model="type"
|
||||
border="none"
|
||||
>
|
||||
<u--text
|
||||
:text="$lang.transferType"
|
||||
slot="prefix"
|
||||
margin="0 3px 0 0"
|
||||
type="tips"
|
||||
></u--text>
|
||||
<u-icon
|
||||
slot="suffix"
|
||||
name="arrow-down-fill"
|
||||
color="#757272"
|
||||
size="16"
|
||||
></u-icon>
|
||||
</u-input>
|
||||
</view>
|
||||
<u-picker
|
||||
:title="$lang.pleaseChooseTransferType"
|
||||
closeOnClickOverlay
|
||||
:show="show"
|
||||
:columns="columns"
|
||||
:cancelText="$lang.cancel"
|
||||
:confirmText="$lang.confirm"
|
||||
@cancel="close"
|
||||
@close="close"
|
||||
@confirm="confirm"
|
||||
></u-picker>
|
||||
<view class="list">
|
||||
<view class="lable">{{ $lang.amount }}</view>
|
||||
<u-input
|
||||
class="input"
|
||||
color="#947b2b"
|
||||
clearable
|
||||
:placeholder="$lang.pleaseEnterTransferAmount"
|
||||
border="surround"
|
||||
v-model="money"
|
||||
></u-input>
|
||||
</view>
|
||||
<view class="list">
|
||||
<u-button
|
||||
@tap="submit"
|
||||
class="button"
|
||||
color="#e5b932"
|
||||
:text="$lang.transfer"
|
||||
></u-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mb60"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
from: "",
|
||||
to: "",
|
||||
flow: true, //"upper"
|
||||
money: "",
|
||||
gmoney: "",
|
||||
type: "USDT",
|
||||
show: false,
|
||||
columns: [["USDT"]],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
userInfo: (state) => state.app.userInfo,
|
||||
$lang: (state) => state.app.lang[state.app.language],
|
||||
}),
|
||||
},
|
||||
onLoad() {
|
||||
this.from = this.$lang.capitalAccount;
|
||||
this.to = this.$lang.gameAccount;
|
||||
this.getGameInfo();
|
||||
},
|
||||
methods: {
|
||||
confirm(chose) {
|
||||
this.type = chose.value[0];
|
||||
this.close();
|
||||
},
|
||||
close() {
|
||||
this.show = false;
|
||||
},
|
||||
switchFlow() {
|
||||
this.flow = !this.flow;
|
||||
if (this.flow) {
|
||||
this.from = this.$lang.capitalAccount;
|
||||
this.to = this.$lang.gameAccount;
|
||||
} else {
|
||||
this.from = this.$lang.gameAccount;
|
||||
this.to = this.$lang.capitalAccount;
|
||||
}
|
||||
},
|
||||
getGameInfo() {
|
||||
this.$api
|
||||
.gameInfo()
|
||||
.then((res) => {
|
||||
if (res.status_code == 200) {
|
||||
this.gmoney = res.data.totalmoney;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
submit() {
|
||||
const params = {
|
||||
money: this.money,
|
||||
};
|
||||
if (!params.money) {
|
||||
this.$toast({
|
||||
message: this.$lang.amountCannotBe0,
|
||||
duration: 2000,
|
||||
});
|
||||
} else {
|
||||
this.$toast({
|
||||
type: "loading",
|
||||
message: this.$lang.submittingApplication,
|
||||
duration: 200000,
|
||||
});
|
||||
const type = this.flow ? "gameUpper" : "gameUnder";
|
||||
this.$api[type](params)
|
||||
.then((res) => {
|
||||
if (res.status_code == 200) {
|
||||
this.$toast({
|
||||
type: "success",
|
||||
message: res.message,
|
||||
duration: 2000,
|
||||
});
|
||||
this.getGameInfo();
|
||||
this.$store.dispatch("app/getUserInfo");
|
||||
this.money = "";
|
||||
} else {
|
||||
this.$toast({
|
||||
message: res.message,
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
})
|
||||
.finally(() => {
|
||||
this.$toastHide();
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.transfer {
|
||||
background: #0b1520;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
.navbar-lab {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
}
|
||||
.content {
|
||||
margin: 5px 5px;
|
||||
border: 2px solid #947b2b;
|
||||
background: #222222;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
min-height: 400px;
|
||||
.transfer-box {
|
||||
border: 2px solid #947b2b;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
.down_icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background: url("~@/static/images/down_icon.png") no-repeat -3px center;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
.transfer-btn {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: url("~@/static/images/transfer_btn.png") no-repeat;
|
||||
background-size: 100% auto;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
margin-top: -25px;
|
||||
&:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.picker-view {
|
||||
border: 2px solid #947b2b;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.list {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
.lab {
|
||||
color: #757272;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.lable {
|
||||
text-align: left;
|
||||
color: #ddd;
|
||||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.money {
|
||||
font-size: 16px;
|
||||
margin-top: 0;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 5px;
|
||||
color: #e5b932;
|
||||
}
|
||||
.gmoney {
|
||||
font-size: 16px;
|
||||
margin-top: 0;
|
||||
padding-bottom: 15px;
|
||||
color: #e5b932;
|
||||
}
|
||||
.btn {
|
||||
height: 30px;
|
||||
font-weight: 600;
|
||||
color: #0b1520 !important;
|
||||
}
|
||||
.type {
|
||||
width: 70px;
|
||||
height: 35px;
|
||||
background: #e5b932;
|
||||
border-radius: 40px;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
font-weight: 600;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.input {
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.button {
|
||||
line-height: 45px;
|
||||
height: 45px;
|
||||
color: #0b1520 !important;
|
||||
font-weight: bold;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.tip {
|
||||
color: #cc4c0e;
|
||||
font-size: 13px;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user