|
|
@@ -0,0 +1,387 @@
|
|
|
+<template>
|
|
|
+ <div class="assets">
|
|
|
+ <div class="head">
|
|
|
+ <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
|
|
|
+ <span>{{ $t('lang186') }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="pd">
|
|
|
+ <div class="">
|
|
|
+ <div class="total_box">
|
|
|
+ <div>
|
|
|
+ <span class="text">{{ $t('lang147') }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="total">
|
|
|
+ <span>{{ Math.floor(assets * 100) / 100 || 0 }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="bo">
|
|
|
+ <!-- <img src="@/assets/images/chance.png" class="icon" />
|
|
|
+ <span>{{ $t('lang121') }}</span> -->
|
|
|
+ </div>
|
|
|
+ <div @click="navigation('share')" class="mx">{{ $t('lang122') }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="list">
|
|
|
+ <div class="box">
|
|
|
+ <div class="box_item">
|
|
|
+ <span class="left">{{ $t('lang207') }}</span>
|
|
|
+ <!-- <van-field v-model="send_address" placeholder="输入对方钱包地址" class="input" input-align="right" /> -->
|
|
|
+ <van-field v-model="send_address" type="textarea" style="height: 46px" :placeholder="$t('lang208')" class="input" input-align="right" />
|
|
|
+ </div>
|
|
|
+ <div class="box_item">
|
|
|
+ <span class="left">{{ $t('lang209') }}</span>
|
|
|
+ <van-field v-model="amount" :placeholder="$t('lang119')" type="number" class="input" input-align="right" />
|
|
|
+ </div>
|
|
|
+ <div class="box_item">
|
|
|
+ <span class="left">{{ $t('lang210') }}</span>
|
|
|
+ <span>{{ parseFloat((networkfee * 100).toFixed(2)) }}%</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="box_item">
|
|
|
+ <span class="left">{{ $t('lang125') }}</span>
|
|
|
+ <van-field v-model="value" :placeholder="$t('lang118')" class="input" input-align="right" />
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="buy" @click="submit">
|
|
|
+ <van-button class="buy_btn" type="primary">{{ $t('lang214') }}</van-button>
|
|
|
+ </div>
|
|
|
+ <div class="tips">
|
|
|
+ <div>{{ $t('lang116') }}</div>
|
|
|
+ <div>{{ tip }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-overlay :show="show">
|
|
|
+ <div class="wrapper" @click.stop>
|
|
|
+ <van-loading type="spinner" class="loading" />
|
|
|
+ </div>
|
|
|
+ </van-overlay>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { homeApi } from '@/api/index';
|
|
|
+import { dateFormat } from '@/utils/formatTool.js';
|
|
|
+import packApi from '@/methods/pack.js';
|
|
|
+import { getErc20Contract } from '@/utils/contractHelp';
|
|
|
+import usdt from '@/methods/usdt.js';
|
|
|
+import { formatAmount } from '@/utils/format.js';
|
|
|
+import { Dialog, Notify, Toast } from 'vant';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ assets: 0,
|
|
|
+ amount: '',
|
|
|
+ payToken: undefined, //支付币种
|
|
|
+ walletBalance: 0,
|
|
|
+ show: false,
|
|
|
+ send_address: '',
|
|
|
+ tip: '',
|
|
|
+ networkfee: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getUserInfo();
|
|
|
+ this.chabaoInfo();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //返回上一页
|
|
|
+ back() {
|
|
|
+ this.$router.back();
|
|
|
+ },
|
|
|
+ navigation(name) {
|
|
|
+ this.$router.push({ name });
|
|
|
+ },
|
|
|
+ chabaoInfo() {
|
|
|
+ homeApi.chabaoInfo().then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ console.log(res.data);
|
|
|
+ this.networkfee = res.data.value;
|
|
|
+ this.tip = res.data.text;
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getUserInfo() {
|
|
|
+ homeApi.getUserInfo().then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.assets = res.data.balance;
|
|
|
+ this.account = res.data.address;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // getPayToken() {
|
|
|
+ // packApi.getPayToken(this.account).then(res => {
|
|
|
+ // this.payToken = res;
|
|
|
+ // // this.handleApproveBtnShow(); //获取授权余额
|
|
|
+ // this.getWalletBalance(); //获取钱包余额
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ // // 查询链上钱包余额
|
|
|
+ // async getWalletBalance() {
|
|
|
+ // const erc20Contract = getErc20Contract(this.payToken);
|
|
|
+ // let bal = await erc20Contract.methods.balanceOf(this.account).call();
|
|
|
+ // this.walletBalance = (formatAmount(bal, 18) * 1).toFixed(2);
|
|
|
+ // },
|
|
|
+ submit() {
|
|
|
+ if (!this.send_address) {
|
|
|
+ return this.$toast(this.$t('lang211'));
|
|
|
+ }
|
|
|
+ if (!this.amount) {
|
|
|
+ return this.$toast(this.$t('lang212'));
|
|
|
+ }
|
|
|
+ let _this = this;
|
|
|
+ Dialog.confirm({
|
|
|
+ title: _this.$t('lang136'),
|
|
|
+ message: _this.$t('lang213'),
|
|
|
+ confirmButtonText: _this.$t('lang111'),
|
|
|
+ cancelButtonText: _this.$t('lang135'),
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ _this.show = true;
|
|
|
+ homeApi
|
|
|
+ .chabaoGift({
|
|
|
+ amount: _this.amount,
|
|
|
+ address: _this.send_address,
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ _this.amount = '';
|
|
|
+ _this.send_address = '';
|
|
|
+ _this.show = false;
|
|
|
+ _this.getUserInfo();
|
|
|
+ Notify({ type: 'success', message: _this.$t('lang152') });
|
|
|
+ } else if (res.code == 15001) {
|
|
|
+ _this.show = false;
|
|
|
+ Toast({ message: `${res.msg}` });
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$router.push('recharge');
|
|
|
+ }, 300);
|
|
|
+ } else {
|
|
|
+ _this.show = false;
|
|
|
+ Toast({ message: `${res.msg}` });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ _this.show = false;
|
|
|
+ _this.$toast(err.msg);
|
|
|
+ return;
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // on cancel
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.head {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: rgba(#000, 0.8);
|
|
|
+ letter-spacing: 1.5px;
|
|
|
+ font-weight: 550;
|
|
|
+ background: #fff;
|
|
|
+ padding: 15px 0;
|
|
|
+ // z-index: 99;
|
|
|
+ .arrow_img {
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+ width: 10px;
|
|
|
+ height: 16px;
|
|
|
+ // transform: translate(0, -50%);
|
|
|
+ }
|
|
|
+}
|
|
|
+.f-sb {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.f-sa {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+.f-sb-n {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.f-col {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.assets {
|
|
|
+ min-height: 100vh;
|
|
|
+ padding: 50px 0 0;
|
|
|
+ // background-color: #fafbfc;
|
|
|
+ .top {
|
|
|
+ color: #000;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ margin: 0 6px;
|
|
|
+ }
|
|
|
+ .pd {
|
|
|
+ padding: 4px;
|
|
|
+ margin-top: 4px;
|
|
|
+ // background-color: #fff;
|
|
|
+ }
|
|
|
+ .total_box {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ // position: relative;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #fff;
|
|
|
+ height: 140px;
|
|
|
+ // border-radius: 16px;
|
|
|
+ padding: 20px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin: 10px;
|
|
|
+ background: linear-gradient(to right, #1ab986, #25d7bb);
|
|
|
+
|
|
|
+ .total {
|
|
|
+ font-size: 28px;
|
|
|
+ // text-align: center;
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+ .bo {
|
|
|
+ font-size: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: rgba(#fff, 0.8);
|
|
|
+ margin: 10px 10px 0 0;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-right: 6px;
|
|
|
+ border-radius: 50%;
|
|
|
+ padding: 4px;
|
|
|
+ background-color: rgba(#000, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mx {
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ width: fit-content;
|
|
|
+ font-size: 11px;
|
|
|
+ color: rgba(#f7f7f7, 0.9);
|
|
|
+ padding: 2px 12px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: rgba(#000, 0.1);
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ color: rgba(#fff, 0.8);
|
|
|
+ }
|
|
|
+ .buy {
|
|
|
+ position: absolute;
|
|
|
+ right: 14px;
|
|
|
+ bottom: 14px;
|
|
|
+
|
|
|
+ &_btn {
|
|
|
+ color: #29b286;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 14px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: none;
|
|
|
+ padding: 0 16px;
|
|
|
+ white-space: nowrap;
|
|
|
+ border-radius: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bare {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 60px 14px;
|
|
|
+ color: #888;
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 0 20px;
|
|
|
+ margin-top: 16px;
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 16px 6px;
|
|
|
+
|
|
|
+ .box {
|
|
|
+ width: 100%;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 18px 0 18px;
|
|
|
+ .box_item:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ .box_item:first-child {
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ &_item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 16px 0;
|
|
|
+ border-bottom: 0.5px solid rgba(190, 190, 190, 0.15);
|
|
|
+
|
|
|
+ .key {
|
|
|
+ color: #aaa;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ .mobile {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000;
|
|
|
+ font-weight: 550;
|
|
|
+ }
|
|
|
+ .input {
|
|
|
+ width: 180px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .buy {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 30px;
|
|
|
+ &_btn {
|
|
|
+ width: 80%;
|
|
|
+ height: 46px;
|
|
|
+ line-height: 46px;
|
|
|
+ font-size: 14px;
|
|
|
+ background-color: #29b286;
|
|
|
+ border: none;
|
|
|
+ padding: 0 10px;
|
|
|
+ white-space: nowrap;
|
|
|
+ border-radius: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tips {
|
|
|
+ color: #aaa;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 180%;
|
|
|
+ padding: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.wrapper {
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: center;
|
|
|
+ .loading {
|
|
|
+ position: absolute;
|
|
|
+ left: 46%;
|
|
|
+ top: 46%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xiaomei