<template>
|
|
<div class="login_forms">
|
<headers :mess="loginWay" />
|
<div class="top_forms" v-if="issz==false">
|
<el-input style="margin-top: 0.46rem;" :placeholder="$t('hj207')" size="medium" v-model="name" clearable
|
@input="handleInput()">
|
</el-input>
|
|
<el-input style="margin-top: 0.46rem;" :placeholder="$t('hj217')" size="medium"
|
v-model="cardnumber" @input="handleInput()">
|
</el-input>
|
<el-input style="margin-top: 0.46rem;" :placeholder="$t('路由密码')" size="medium" v-model="Password"
|
@input="handleInput()">
|
</el-input>
|
|
<selectcodes style="margin-top: 15px;" @transmit="transmit" @selectinput="selectinput"></selectcodes>
|
|
|
<el-input style="margin-top: 0.46rem;" :placeholder="$t('qsryx')" size="medium" v-model="email" clearable
|
@input="handleInput()">
|
</el-input>
|
</div>
|
<div class="newpage" v-else>
|
<div class="newpage_top">
|
<div @click="typeclick(0)" :class="typeindex==0?'newpage_top_box':'newpage_top_boxs'">
|
<div class="newpage_top_box_top">USDT</div>
|
<div class="newpage_top_box_bottom">Ethereum</div>
|
</div>
|
<div @click="typeclick(1)" :class="typeindex==1?'newpage_top_box':'newpage_top_boxs'">
|
<div class="newpage_top_box_top">USDT</div>
|
<div class="newpage_top_box_bottom">BNB Chain</div>
|
</div>
|
<div @click="typeclick(2)" :class="typeindex==2?'newpage_top_box':'newpage_top_boxs'">
|
<div class="newpage_top_box_top">USDT</div>
|
<div class="newpage_top_box_bottom">Tron</div>
|
</div>
|
</div>
|
|
<div class="newpage_txt">最少充值金额：1 USDT</div>
|
<div class="qrCode" >
|
<div style="width: 100%;height: 100%; " id="qrcode" ref="qrcode"></div>
|
</div>
|
<div class="qrCodeurl">
|
<div>123</div>
|
<div class="right_copya">
|
<span v-clipboard:copy="123" v-clipboard:success="onCopy"
|
v-clipboard:error="onError">{{ $t('hj164')
|
}}</span>
|
</div>
|
</div>
|
|
<div class="price">
|
<div class="price_top">
|
<div class="price_top_top">USDT</div>
|
<div class="price_top_buttom">数量</div>
|
</div>
|
<div class="price_bottom">
|
<div class="price_bottom_left">1USDT = $1</div>
|
<div class="price_bottom_right">x123</div>
|
</div>
|
</div>
|
|
<div class="total">
|
<div class="total_left">总付款金额</div>
|
<div class="total_right">
|
<div class="total_right_top">123 USDT</div>
|
<div class="total_right_right"> ≈₹123</div>
|
</div>
|
</div>
|
</div>
|
<div class="bottom_btns" >
|
<div class="top_btn " @click="gookk" >
|
<span>{{ $t('提交') }}</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as api from "@/axios/api";
|
import headers from './components/header.vue';
|
import QRCode from 'qrcodejs2'
|
import {
|
Toast
|
} from 'mint-ui'
|
import selectcodes from "@/components/selectcode.vue";
|
export default {
|
components: {
|
selectcodes,
|
headers,
|
},
|
created() {},
|
data() {
|
return {
|
loginWay: this.$t('hj26'),
|
yxtips: this.$t('qsryx'),
|
btnClass: false,
|
typeindex:0,
|
name:'',
|
cardnumber:'',
|
Password:'',
|
email:'',
|
phone:'',
|
qcode:'+244',
|
payType:'',
|
issz:'',
|
selectedCountryCode:'',
|
}
|
},
|
mounted() {
|
this.price = this.$route.query.price ? this.$route.query.price : ''
|
this.payType = this.$route.query.payType ? this.$route.query.payType : ''
|
this.issz = this.$route.query.issz ? this.$route.query.issz : ''
|
this.selectedCountryCode = this.$route.query.selectedCountryCode ? this.$route.query.selectedCountryCode : ''
|
},
|
methods: {
|
onCopy() {
|
Toast(this.$t('hj185'))
|
if (navigator.vibrate) {
|
// 支持
|
navigator.vibrate([55])
|
}
|
},
|
onError() {
|
Toast(this.$t('hj186'))
|
},
|
// 生成二维码
|
qrcode(url) {
|
if (url) {
|
document.getElementById('qrcode').innerHTML = ''
|
let qrcode = new QRCode('qrcode', {
|
width: 100, // 二维码宽度，单位像素
|
height: 100, // 二维码高度，单位像素
|
text: 'www.baidu.com' // 生成二维码的链接
|
})
|
}
|
},
|
typeclick(e){
|
this.typeindex = e
|
},
|
selectinput(e){
|
this.phone = e
|
},
|
transmit(e){
|
this.qcode = e
|
},
|
handleInput() {
|
|
if (this.name !== "" && this.cardnumber !== '' && this.userPassword == this.rePassword && this.userName !=
|
"") {
|
this.btnClass = true;
|
} else {
|
this.btnClass = false;
|
}
|
},
|
async gookk(){
|
if(this.payType==3){
|
this.$router.go(-1)
|
return
|
}
|
var option = {
|
payAmt:this.price,
|
payType:this.payType,
|
assetsType:this.selectedCountryCode,
|
payName:this.name,
|
bankNum:this.cardnumber,
|
routeNum:this.Password,
|
payPhone:this.qcode+this.phone,
|
payMail:this.email,
|
}
|
let data = await api.flyPayAmt(option)
|
if (data.status === 0) {
|
Toast(data.msg)
|
this.$router.go(-1)
|
} else {
|
Toast(data.msg)
|
}
|
},
|
handleBack() {
|
// 点击返回/
|
this.$router.go(-1)
|
// this.$router.push('/user')
|
},
|
},
|
|
|
}
|
</script>
|
|
<style scoped lang="less">
|
.total_right_top{
|
color: #EA5847;
|
font-size: 20px;
|
}
|
.total_right_right{
|
margin-top: 20px;
|
font-size: 20px;
|
color: #959595;
|
}
|
.total_right{
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
}
|
.total_left{
|
font-size: 20px;
|
}
|
.total{
|
margin-top: 50px;
|
display: flex;
|
width: 100%;
|
justify-content: space-between;
|
}
|
.price_bottom{
|
font-size: 20px;
|
margin-top: 20px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.price_top{
|
font-size: 20px;
|
color: #959595;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.price{
|
border-radius: 8px;
|
margin-top: 15px;
|
padding: 15px;
|
width: 100%;
|
background-color: #F5F5F5;
|
display: flex;
|
flex-direction: column;
|
}
|
.newpage_txt{
|
margin-top: 50px;
|
padding: 10px;
|
color: #e53e3e;
|
background-color: #FFF5F5;
|
}
|
.qrCode {
|
border: 1px solid #f3f3f3;
|
padding: 0.1rem;
|
height:4rem;
|
width: 4rem;
|
margin: 0.3rem auto;
|
position: relative;
|
|
img {
|
width: 10px;
|
height: 10px;
|
}
|
|
.alert-box {
|
width: 100%;
|
height: 100%;
|
background: rgba(255, 255, 255, 0.9);
|
position: absolute;
|
left: 0;
|
top: 0;
|
color: #333;
|
text-align: center;
|
|
.iconfont {
|
color: #f98700;
|
font-size: 0.6rem;
|
display: block;
|
margin-top: 0.8rem;
|
margin-bottom: 0.4rem;
|
}
|
}
|
}
|
.newpage_top_box_top{
|
margin-bottom: 5px;
|
}
|
.newpage_top_box{
|
width: 145px;
|
color: #EA5847;
|
height: 80px;
|
border: 1px solid #EA5847;
|
border-radius: 8px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
}
|
.newpage_top_boxs{
|
width: 145px;
|
color: #959595;
|
height: 80px;
|
border: 1px solid #959595;
|
border-radius: 8px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
}
|
.newpage_top{
|
width: 100%;
|
display: flex;
|
// flex-direction: column;
|
justify-content: space-evenly;
|
align-items: center;
|
}
|
.newpage{
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
}
|
.top_icon {
|
width: 100%;
|
height: 1.5rem;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.left_back {
|
width: 10%;
|
height: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
img {
|
width: 0.6rem;
|
height: 0.6rem;
|
}
|
}
|
|
.right_icon {
|
width: 18%;
|
height: 35%;
|
padding-right: 0.1rem;
|
display: flex;
|
justify-content: space-between;
|
|
>div {
|
width: auto;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
img {
|
// width: 100%;
|
// height: 100%;
|
}
|
}
|
}
|
}
|
.login_forms {
|
width: 100%;
|
height: auto;
|
padding: 0 0.4564rem;
|
margin-top: 0.35rem;
|
|
.top_forms {
|
width: 100%;
|
height: auto;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
|
.user_name,
|
.password {
|
width: 100%;
|
height: 35%;
|
background: rgb(246, 246, 247);
|
// background: #1e1e1e;
|
border-radius: 0.3564rem;
|
|
>input {
|
width: 100%;
|
height: 100%;
|
padding-left: 0.3564rem;
|
font-size: 0.4615rem;
|
}
|
}
|
}
|
|
/deep/.el-input__inner {
|
width: 100%;
|
height: 1.45rem !important;
|
background-color: rgb(246, 246, 247) !important;
|
// background: #1e1e1e;
|
border-radius: 0.3564rem;
|
font-size: 0.45rem !important;
|
}
|
|
.bottom_btns {
|
width: 100%;
|
height: 3.3333rem;
|
margin-top: 0.8528rem;
|
|
.top_btn {
|
width: 100%;
|
height: 1.25rem;
|
border-radius: 0.3564rem;
|
background: #00B95F;
|
color: #fff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 0.5128rem;
|
margin-top: 0.75rem;
|
|
>span {
|
font-weight: 530 !important;
|
}
|
}
|
|
|
|
.mes {
|
width: 100%;
|
height: 20%;
|
margin-top: 0.4rem;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
font-size: 0.3846rem;
|
}
|
}
|
}
|
</style>
|
