| New file |
| | |
| | | <template> |
| | | <div class="exchange-page"> |
| | | <van-nav-bar left-arrow @click-left="onClickLeft"> |
| | | <!-- <template #right> |
| | | <van-icon class="exchange-icon" @click="$router.push('/exchange/exchangeHistory')" name="clock-o" /> |
| | | </template> --> |
| | | <template #title> |
| | | <div class="flex items-center" > |
| | | {{ $t("划转") }} |
| | | <div class="fee ex-bg">{{ $t("0手续费") }}</div> |
| | | </div> |
| | | </template> |
| | | </van-nav-bar> |
| | | <!-- <list-account show class="mt-94" type="exchange" @exchange="onPopup" ref="exchange" /> --> |
| | | <div class="pages"> |
| | | <div class="pages_box"> |
| | | <!-- <div class="pages_box_txt">{{$t('从')}}</div> --> |
| | | |
| | | <div class="pages_bot_top"> |
| | | {{toptitle}} |
| | | </div> |
| | | |
| | | <div class="flex ex-bg justify-center my-42 items-center w-100 ml-20 mr-20" @click="onSwitch"> |
| | | <img src="@/assets/image/exchange/icon_3.png" alt="" class="w-25 h-25" /> |
| | | </div> |
| | | <!-- <div class="pages_box_txt">{{$t('至')}}</div> --> |
| | | |
| | | <div class="pages_bot_top"> |
| | | {{buttitle}} |
| | | </div> |
| | | </div> |
| | | <div style="width: 100%;"> |
| | | <input v-model="amount" :placeholder="$t('请输入数量')" type="number" style="width: 83%;" class="h-100 border-none inputBackground textColor mt-20 pl-20 ml-23" |
| | | @input="onInput" :disabled="disabled" /> |
| | | <span @click="clickall">{{$t('全部')}}</span> |
| | | </div> |
| | | <div class="pages_bot_tps"> |
| | | {{$t('可用数量')}}:{{usdcMoney}} {{bzlist[typeindex]}} |
| | | </div> |
| | | <div class="pages_list" > |
| | | <div @click="clicktype(index)" :class="typeindex==index?'pages_list_boxa':'pages_list_box'" v-for="(item,index) in bzlist" :key="index">{{item}}</div> |
| | | </div> |
| | | </div> |
| | | <div class="exchange-btn w-full flex justify-center mt-20"> |
| | | <p class="h-100 btnMain mx-auto flex justify-center items-center text-white w-768" @click="ceshi"> |
| | | {{ $t('划转') }} |
| | | </p> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import assetsHead from "@/components/assets-head"; |
| | | import ListAccount from "@/components/mining-account"; |
| | | import { |
| | | _initExchange, |
| | | _exchange, |
| | | walletGrther, |
| | | walletGrthertransfer, |
| | | getwalletGrther |
| | | } from "@/API/fund.api"; |
| | | // import walletGrther from "@/API/fund.api"; |
| | | import { |
| | | Popup |
| | | } from "vant"; |
| | | import { |
| | | HOST_URL |
| | | } from "@/config"; |
| | | export default { |
| | | components: { |
| | | assetsHead, |
| | | ListAccount, |
| | | [Popup.name]: Popup, |
| | | }, |
| | | data() { |
| | | return { |
| | | show: false, |
| | | session_token: "", |
| | | detail: {}, |
| | | interval: null, |
| | | count: 5, |
| | | HOST_URL, |
| | | disabled:false, |
| | | fromTo:1, |
| | | typeindex:0, |
| | | amount:'', |
| | | bzlist:['USDT','BTC','ETH','USDC'], |
| | | usdcMoney:'', |
| | | toptitle:this.$t('资金')+this.$t('账户'), |
| | | buttitle:this.$t('交易')+this.$t('账户'), |
| | | }; |
| | | }, |
| | | created() { |
| | | this.getwallet() |
| | | }, |
| | | methods: { |
| | | clickall(){ |
| | | this.amount=this.usdcMoney |
| | | }, |
| | | async onSwitch(){ |
| | | var a = this.toptitle |
| | | var b = this.buttitle |
| | | this.toptitle = b |
| | | this.buttitle = a |
| | | var newcurrency = '' |
| | | if(this.typeindex==0){ |
| | | newcurrency = 'usdt' |
| | | }else if (this.typeindex == 1){ |
| | | newcurrency = 'btc' |
| | | }else if (this.typeindex == 2){ |
| | | newcurrency = 'eth' |
| | | }else if (this.typeindex == 3){ |
| | | newcurrency = 'usdc' |
| | | } |
| | | var data = { |
| | | currency: newcurrency, |
| | | fromTo: this.toptitle==(this.$t('资金')+this.$t('账户'))?'1':'2', |
| | | } |
| | | await getwalletGrther(data).then((res) => { |
| | | console.log(res); |
| | | }).catch((err)=>{ |
| | | console.log(err); |
| | | this.usdcMoney = err.data |
| | | }); |
| | | }, |
| | | onInput(e){ |
| | | console.log(e); |
| | | this.amount = this.amount.replace(/[^0-9]/g, ''); |
| | | }, |
| | | async clicktype(e){ |
| | | this.typeindex = e |
| | | |
| | | var newcurrency = '' |
| | | if(this.typeindex==0){ |
| | | newcurrency = 'usdt' |
| | | }else if (this.typeindex == 1){ |
| | | newcurrency = 'btc' |
| | | }else if (this.typeindex == 2){ |
| | | newcurrency = 'eth' |
| | | }else if (this.typeindex == 3){ |
| | | newcurrency = 'usdc' |
| | | } |
| | | var data = { |
| | | currency: newcurrency, |
| | | fromTo: this.toptitle==(this.$t('资金')+this.$t('账户'))?'1':'2', |
| | | } |
| | | await getwalletGrther(data).then((res) => { |
| | | console.log(res); |
| | | }).catch((err)=>{ |
| | | console.log(err); |
| | | this.usdcMoney = err.data |
| | | }); |
| | | }, |
| | | async ceshi() { |
| | | |
| | | var newcurrency = '' |
| | | if(this.typeindex==0){ |
| | | newcurrency = 'usdt' |
| | | }else if (this.typeindex == 1){ |
| | | newcurrency = 'btc' |
| | | }else if (this.typeindex == 2){ |
| | | newcurrency = 'eth' |
| | | }else if (this.typeindex == 3){ |
| | | newcurrency = 'usdc' |
| | | } |
| | | this.$router.push({ |
| | | path: "/Fundverification", |
| | | query: { |
| | | currency: newcurrency, |
| | | fromTo: this.toptitle==(this.$t('资金')+this.$t('账户'))?'1':'2', |
| | | amount: this.amount |
| | | }, |
| | | }); |
| | | // return |
| | | // var data = { |
| | | // currency: newcurrency, |
| | | // fromTo: this.toptitle==(this.$t('资金')+this.$t('账户'))?'1':'2', |
| | | // amount: this.amount |
| | | // } |
| | | // await walletGrthertransfer(data).then((res) => { |
| | | // console.log(res); |
| | | // }); |
| | | }, |
| | | async getwallet() { |
| | | await walletGrther().then((data) => { |
| | | console.log(data.id); |
| | | }).catch((err)=>{ |
| | | console.log(err.id); |
| | | this.usdcMoney = err.usdtMoney |
| | | }); |
| | | }, |
| | | onClickLeft() { |
| | | this.$router.go(-1); |
| | | }, |
| | | }, |
| | | // beforeRouteLeave(to, from, next) { |
| | | // this.clearInterval(); |
| | | // next(); |
| | | // }, |
| | | }; |
| | | </script> |
| | | <style> |
| | | .van-popup.van-popup--bottom { |
| | | border-top-left-radius: 30px; |
| | | border-top-right-radius: 30px; |
| | | } |
| | | </style> |
| | | <style lang="scss" scoped> |
| | | .pages_list_boxa{ |
| | | width: 20%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | height: 6.25rem; |
| | | border-radius: 8px; |
| | | border: 1px solid #38aeea; |
| | | color:#38aeea; |
| | | } |
| | | .pages_list_box{ |
| | | width: 20%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | height: 6.25rem; |
| | | border-radius: 8px; |
| | | border: 1px solid #c8cad2; |
| | | } |
| | | .pages_list{ |
| | | margin-top: 20px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | width: 48rem; |
| | | } |
| | | .pages_box_txt{ |
| | | display: flex; |
| | | flex-direction: row; |
| | | width: 48rem; |
| | | } |
| | | .pages_bot_tps{ |
| | | margin-top: 20px; |
| | | display: flex; |
| | | |
| | | } |
| | | .pages_bot_top{ |
| | | // padding-left: 20px; |
| | | display: flex; |
| | | justify-content: center; |
| | | margin-top: 20px; |
| | | background-color: #F5F5F5; |
| | | width: 43%; |
| | | height: 6.25rem; |
| | | align-items: center; |
| | | } |
| | | .pages_box{ |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | width: 100%; |
| | | // flex-direction: column; |
| | | } |
| | | .pages{ |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | width: 100%; |
| | | flex-direction: column; |
| | | } |
| | | .exchange-page { |
| | | height: 100vh - 6vh; |
| | | |
| | | @include themify() { |
| | | background: themed("main_background"); |
| | | } |
| | | |
| | | ::v-deep .van-tab--active { |
| | | @include themify() { |
| | | background: themed("main_background"); |
| | | color: themed("active_line"); |
| | | } |
| | | } |
| | | |
| | | ::v-deep .van-nav-bar { |
| | | @include themify() { |
| | | background: themed("main_background"); |
| | | } |
| | | } |
| | | |
| | | ::v-deep .van-tabs__nav { |
| | | @include themify() { |
| | | background: themed("main_background"); |
| | | } |
| | | } |
| | | |
| | | ::v-deep .van-nav-bar__title { |
| | | @include themify() { |
| | | color: themed("text_color"); |
| | | } |
| | | } |
| | | |
| | | ::v-deep .van-hairline--bottom::after { |
| | | border-bottom-width: 0px; |
| | | } |
| | | |
| | | ::v-deep .van-nav-bar .van-icon { |
| | | @include themify() { |
| | | color: themed("text_color"); |
| | | } |
| | | |
| | | font-size: 40px; |
| | | } |
| | | } |
| | | |
| | | .bg-grey-light { |
| | | background: #f5f5f5; |
| | | } |
| | | |
| | | .bg-grey-dark { |
| | | background: #c8cad2; |
| | | } |
| | | |
| | | .fee { |
| | | // background: #21353A; |
| | | border-radius: 4px; |
| | | color: #00b087; |
| | | font-size: 24px; |
| | | padding: 5px 10px; |
| | | margin-left: 10px; |
| | | } |
| | | |
| | | .tab_background { |
| | | @include themify() { |
| | | background: themed("tab_background"); |
| | | } |
| | | |
| | | box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.21); |
| | | border-radius: 24px; |
| | | } |
| | | |
| | | .bgDark { |
| | | @include themify() { |
| | | background: themed("tab_background2"); |
| | | } |
| | | } |
| | | |
| | | .btnMain { |
| | | background: linear-gradient(90deg, #2c64d4 0%, #38aeea 100%); |
| | | } |
| | | |
| | | .color-green { |
| | | color: #00b087; |
| | | } |
| | | |
| | | .exchange-icon { |
| | | margin-left: 10px; |
| | | |
| | | @include themify() { |
| | | color: themed("text_color"); |
| | | } |
| | | } |
| | | </style> |