<template>
|
|
<div class="login_forms">
|
<headers :mess="loginWay" />
|
<div class="pages">
|
<div class="pages_top">
|
<div class="pages_top_txt">{{dataprice.totleAssets}}</div>
|
<div class="pages_top_txta">{{$t('当前可用余额')}}</div>
|
</div>
|
<div class="pages_zj">
|
<div class="pages_price" v-if="dataitem.userRecharge.payAmt">{{$t('hj170')}}:{{dataitem.userRecharge.payAmt}}</div>
|
<div class="pages_price_body" v-if="sitePay">
|
<div class="pages_price_body_box">
|
<div class="pages_price_body_left">{{$t('姓名')}}</div>
|
<div class="pages_price_body_right">
|
<div class="pages_price_body_right_left">{{dataitem.sitePay.channelName}}</div>
|
|
</div>
|
</div>
|
<div class="pages_price_body_box">
|
<div class="pages_price_body_left">{{$t('hj215')}}</div>
|
<div class="pages_price_body_right">
|
<div class="pages_price_body_right_left">{{dataitem.sitePay.bankAddress}}</div>
|
<div class="right_copya">
|
<span v-clipboard:copy="dataitem.sitePay.bankAddress" v-clipboard:success="onCopy"
|
v-clipboard:error="onError">{{ $t('hj164')
|
}}</span>
|
</div>
|
</div>
|
</div>
|
<div class="pages_price_body_box">
|
<div class="pages_price_body_left">{{$t('hj213')}}</div>
|
<div class="pages_price_body_right">
|
<div class="pages_price_body_right_left">{{dataitem.sitePay.channelType}}</div>
|
<div class="right_copya">
|
<span v-clipboard:copy="dataitem.sitePay.channelType" v-clipboard:success="onCopy"
|
v-clipboard:error="onError">{{ $t('hj164')
|
}}</span>
|
</div>
|
</div>
|
</div>
|
<!-- <div class="pages_price_body_box">
|
<div class="pages_price_body_left">123</div>
|
<div class="pages_price_body_right">
|
<div class="pages_price_body_right_left">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>
|
<div class="pages_price_body_box">
|
<div class="pages_price_body_left">123</div>
|
<div class="pages_price_body_right">
|
<div class="pages_price_body_right_left">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>
|
<div class="pages_price_body_box">
|
<div class="pages_price_body_left">123</div>
|
<div class="pages_price_body_right">
|
<div class="pages_price_body_right_left">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>
|
<div class="pages_price_body_box">
|
<div class="pages_price_body_left">123</div>
|
<div class="pages_price_body_right">
|
<div class="pages_price_body_right_left">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>
|
<div class="pages_price_body_box">
|
<div class="pages_price_body_left">123</div>
|
<div class="pages_price_body_right">
|
<div class="pages_price_body_right_left">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>
|
<div class="pages_price_body_box">
|
<div class="pages_price_body_left">123</div>
|
<div class="pages_price_body_right">
|
<div class="pages_price_body_right_left">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 -->
|
|
</div>
|
<div class="pages_price_body" style="justify-content: center;align-items: center;display: flex;padding: 20px 0;" v-if="!sitePay">
|
{{$t('复制啊')}}
|
</div>
|
<div class="pages_input" v-if="sitePay">
|
<div class="pages_input_txt">{{$t('付款姓名')}}：</div>
|
<input class="pages_input_input" type="text" v-model="username" :placeholder="$t('请输入付款人姓名')"/>
|
</div>
|
<div class="pages_input" v-if="sitePay">
|
<div class="pages_input_txt">{{$t('付款姓名')}}：</div>
|
<div class="pages_input_input" style="height: auto;">
|
<div class="uploads">
|
<div class="rights">
|
<el-upload :with-credentials="true" class="avatar-uploader" :action="admin + '/user/upload.do'"
|
list-type="picture-card" name="upload_file" :show-file-list="false" :on-success="handleAvatarSuccess"
|
:on-error="handleError" :before-upload="beforeAvatarUpload" :disabled="!showBtn">
|
<img v-if="form.img1key" :src="form.img1key" class="id-img avatar" style="width: 100%;height: 100%;" />
|
<i v-else class="iconfont icon-zhaopian"></i>
|
<!-- <span v-if="!form.img1key && !imgStatus" class="btn-title">{{$t('请上传充值记录')}}</span>
|
<span v-if="imgStatus" class="btn-title">{{$t('hj198')}}</span> -->
|
</el-upload>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="btns" @click="gopay" v-if="sitePay">
|
<div class="btns_price" >{{$t('确认付款')}}</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import * as api from "@/axios/api";
|
import headers from './components/header.vue';
|
import {
|
Toast
|
} from 'mint-ui'
|
export default {
|
components: {
|
headers,
|
},
|
created() {},
|
data() {
|
return {
|
loginWay:'123',
|
username:'',
|
showBtn: true,
|
admin: '',
|
imgStatus: false,
|
id:'',
|
sitePay:'',
|
dataitem:{},
|
dataprice:'',
|
listid:'',
|
form: {
|
img1key: "",
|
},
|
}
|
},
|
mounted() {
|
this.listid = this.$route.query.id ? this.$route.query.id : ''
|
this.admin = process.env.API_HOST;
|
console.log(this.admin)
|
if (this.admin == undefined) {
|
this.admin = "https://apistock.innovcoins.com";
|
}
|
this.getUserInfo()
|
this.getmoney()
|
},
|
methods: {
|
async getmoney(){
|
var option = {accectType:'IN'}
|
let data = await api.getmoney(option)
|
if (data.status === 0) {
|
this.dataprice = data.data
|
Toast(data.msg)
|
} else {
|
Toast(data.msg)
|
}
|
},
|
async gopay(){
|
var option = {
|
id:this.listid,
|
channelName:this.username,
|
img:this.form.img1key
|
}
|
let data = await api.editRecharge(option)
|
if (data.status === 0) {
|
this.$router.go(-1)
|
Toast(data.msg)
|
} else {
|
Toast(data.msg)
|
}
|
},
|
async getUserInfo() {
|
var option = {
|
id:this.listid
|
}
|
let data = await api.rechargeinfo(option)
|
if (data.status === 0) {
|
this.dataitem = data.data
|
this.sitePay = data.data.sitePay
|
this.id = data.data.userRecharge.id
|
} else {
|
Toast(data.msg)
|
}
|
},
|
handleAvatarSuccess(res, file) {
|
this.imgStatus = false;
|
this.form.img1key = res.data.url;
|
},
|
beforeAvatarUpload(file) {
|
this.imgStatus = true;
|
},
|
onCopy() {
|
Toast(this.$t('hj185'))
|
if (navigator.vibrate) {
|
// 支持
|
navigator.vibrate([55])
|
}
|
},
|
onError() {
|
Toast(this.$t('hj186'))
|
},
|
handleError() {
|
this.imgStatus = false;
|
},
|
handleBack() {
|
// 点击返回/
|
this.$router.go(-1)
|
// this.$router.push('/user')
|
},
|
},
|
|
|
}
|
</script>
|
|
<style scoped lang="less">
|
.btns{
|
width: 94%;
|
margin-top: 15px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #fff;
|
height: 68px;
|
border-radius: 14px;
|
margin-bottom: 10px;
|
background-color: #EA5B47;
|
}
|
/deep/ .el-upload--picture-card {
|
border: 0px;
|
background: none;
|
width: 100%;
|
height: 100%;
|
line-height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.avatar-uploader {
|
width: 100px;
|
height: 100px;
|
}
|
.rights {
|
// width: 200px;
|
// height: 200px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
input {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.uploads {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
// margin-top: 0.3rem;
|
|
>div {
|
width: 100%;
|
// background: rgb(247, 247, 247);
|
}
|
}
|
/deep/ .el-upload__input {
|
display: none;
|
}
|
.pages_input_input{
|
padding-left: 15px;
|
background-color: #F5F5F5;
|
border-radius: 10px;
|
height: 50px;
|
flex: 1;
|
}
|
.pages_input{
|
margin-top: 20px;
|
width: 94%;
|
display: flex;
|
align-items: center;
|
// padding: 30px 20px;
|
}
|
.pages_price_body_right_left{
|
margin-right: 10px;
|
}
|
.pages_price_body_box{
|
height: 50px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.pages_price_body_right{
|
display: flex;
|
}
|
.pages_price_body_left{
|
color: #7b7b7c;
|
}
|
.pages_price_body{
|
border-radius: 14px;
|
width: 94%;
|
padding: 30px 20px;
|
|
background-color: #F5F5F5;
|
}
|
.pages_price{
|
margin: 35px 0;
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 25px;
|
}
|
.pages_zj{
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
border-radius: 24px;
|
margin-top: -10px;
|
background-color: #fff;
|
}
|
.pages_top_txta{
|
color:#cfd0d1;
|
}
|
.pages_top_txt{
|
font-size: 45px;
|
font-weight: bold;
|
color: rgba(255,255,255,var(--text-opacity));
|
margin-bottom: 28px;
|
color: #fff;
|
}
|
/deep/.header_history{
|
background-color: #EA5B47;
|
}
|
.pages_top{
|
width: 100%;
|
height: 180px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
background-color: #EA5B47;
|
}
|
.pages{
|
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>
|
