|
|
@@ -0,0 +1,398 @@
|
|
|
+<template>
|
|
|
+ <div class="assets">
|
|
|
+ <div class="head">
|
|
|
+ <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
|
|
|
+ <span>{{ dataInfo.title }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="pd">
|
|
|
+ <div class="">
|
|
|
+ <div class="total_box">
|
|
|
+ <img :src="dataInfo.product_image" alt="" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="list">
|
|
|
+ <div class="box">
|
|
|
+ <div class="box_item">
|
|
|
+ <span class="left black operate" v-html="dataInfo.operate_introd"></span>
|
|
|
+ </div>
|
|
|
+ <div class="box_item">
|
|
|
+ <span class="left black">{{ $t('lang442') }}</span>
|
|
|
+ <div class="address">
|
|
|
+ <span>{{ dataInfo.transfer_address }}</span>
|
|
|
+ <span class="copys" @click="copy" :data-clipboard-text="this.dataInfo.transfer_address">{{ $t('lang449') }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box_item">
|
|
|
+ <span class="left">{{ $t('lang443') }}</span>
|
|
|
+ <van-radio-group v-model="coin" class="f-sb right">
|
|
|
+ <van-radio v-for="(item, index) in dataInfo.currency" :key="index" :name="item" icon-size="16" checked-color="#29b286" shape="square">{{ item }}</van-radio>
|
|
|
+ </van-radio-group>
|
|
|
+ </div>
|
|
|
+ <div class="box_item">
|
|
|
+ <span class="left">{{ $t('lang444') }}</span>
|
|
|
+ <van-field v-model="coin_from_address" type="textarea" :placeholder="$t('lang440')" rows="1" autosize class="input" input-align="right" />
|
|
|
+ </div>
|
|
|
+ <div class="box_item">
|
|
|
+ <span class="left">{{ $t('lang445') }}</span>
|
|
|
+ <van-field v-model="usdt_from_address" type="textarea" :placeholder="$t('lang441')" rows="1" autosize class="input" input-align="right" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="buy" @click="withdrawCash">
|
|
|
+ <van-button class="buy_btn" type="primary">{{ $t('lang446') }}</van-button>
|
|
|
+ </div>
|
|
|
+ <div class="tips">
|
|
|
+ <div>{{ $t('lang116') }}</div>
|
|
|
+ <div v-html="dataInfo.operate_desc"></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 Web3 from 'web3';
|
|
|
+import { Dialog, Notify } from 'vant';
|
|
|
+import Clipboard from 'clipboard';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ page: 0,
|
|
|
+ total: 1,
|
|
|
+ assets: 0,
|
|
|
+ amount: '',
|
|
|
+ // type: 1, // 1udst奖励 2teac奖励
|
|
|
+ coin_from_address: '',
|
|
|
+ usdt_from_address: '',
|
|
|
+ dataInfo: {
|
|
|
+ title: this.$t('lang447'),
|
|
|
+ product_image: '',
|
|
|
+ operate_introd: '',
|
|
|
+ operate_desc: '',
|
|
|
+ transfer_address: '',
|
|
|
+ currency: {
|
|
|
+ 1: '',
|
|
|
+ 2: '',
|
|
|
+ },
|
|
|
+ currency_price: {
|
|
|
+ S1: 0,
|
|
|
+ RAC: 0,
|
|
|
+ USDT: 0,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ show: false,
|
|
|
+ coin: '',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getWelfareRedeConfig();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //返回上一页
|
|
|
+ back() {
|
|
|
+ this.$router.back();
|
|
|
+ },
|
|
|
+ navigation(name) {
|
|
|
+ this.$router.push({ name });
|
|
|
+ },
|
|
|
+ changeNav(item, index) {
|
|
|
+ this.navIndex = index;
|
|
|
+ },
|
|
|
+
|
|
|
+ getWelfareRedeConfig() {
|
|
|
+ homeApi.getWelfareRedeConfig().then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.dataInfo = res.data;
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ copy() {
|
|
|
+ if (this.dataInfo.transfer_address) {
|
|
|
+ var clipboard = new Clipboard('.copys');
|
|
|
+ clipboard.on('success', e => {
|
|
|
+ this.$toast(this.$t('lang45'));
|
|
|
+ clipboard.destroy(); // 释放内存
|
|
|
+ });
|
|
|
+ clipboard.on('error', e => {
|
|
|
+ this.$toast(this.$t('lang46'));
|
|
|
+ clipboard.destroy(); // 释放内存
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ withdrawCash() {
|
|
|
+ if (!this.coin) {
|
|
|
+ this.$toast(this.$t('lang451'));
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.coin_from_address) {
|
|
|
+ this.$toast(this.$t('lang440'));
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.usdt_from_address) {
|
|
|
+ this.$toast(this.$t('lang441'));
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let _this = this;
|
|
|
+ Dialog.confirm({
|
|
|
+ title: _this.$t('lang136'),
|
|
|
+ message: _this.$t('lang450'),
|
|
|
+ confirmButtonText: _this.$t('lang111'),
|
|
|
+ cancelButtonText: _this.$t('lang135'),
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ _this.show = true;
|
|
|
+ let params = {
|
|
|
+ coin: _this.coin,
|
|
|
+ coin_from_address: _this.coin_from_address,
|
|
|
+ usdt_from_address: _this.usdt_from_address,
|
|
|
+ };
|
|
|
+ homeApi
|
|
|
+ .submitWelfare(params)
|
|
|
+ .then(res => {
|
|
|
+ _this.show = false;
|
|
|
+ if (res.code == 200) {
|
|
|
+ _this.currency = '';
|
|
|
+ _this.coin_from_address = '';
|
|
|
+ _this.usdt_from_address = '';
|
|
|
+ _this.getWelfareRedeConfig();
|
|
|
+ Notify({ type: 'success', message: res.msg });
|
|
|
+ } else {
|
|
|
+ // Notify({ message: res.msg });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ _this.show = false;
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .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;
|
|
|
+}
|
|
|
+.f {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.assets {
|
|
|
+ min-height: 100vh;
|
|
|
+ padding: 50px 0 0;
|
|
|
+ background-color: #f6f6f6;
|
|
|
+ .top {
|
|
|
+ color: #000;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ margin: 0 6px;
|
|
|
+ }
|
|
|
+ .pd {
|
|
|
+ padding: 4px;
|
|
|
+ margin-top: 4px;
|
|
|
+ // background-color: #fff;
|
|
|
+ }
|
|
|
+ .total_box {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #fff;
|
|
|
+ // height: 140px;
|
|
|
+ // border-radius: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin: 0 10px 10px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bare {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 60px 14px;
|
|
|
+ color: #888;
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ box-shadow: 0 0 10px rgba(#c5c5c5, 0.4);
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 0 16px;
|
|
|
+ margin: 10px 6px;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .box {
|
|
|
+ width: 100%;
|
|
|
+ color: #3b3b3b;
|
|
|
+ // padding: 18px 0 18px;
|
|
|
+ .box_item:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ // align-items: flex-start;
|
|
|
+ }
|
|
|
+ &_item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 18px 0;
|
|
|
+ border-bottom: 0.5px solid rgba(190, 190, 190, 0.15);
|
|
|
+
|
|
|
+ .key {
|
|
|
+ color: #aaa;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ .address {
|
|
|
+ font-size: 12px;
|
|
|
+ width: 200px;
|
|
|
+ text-align: right;
|
|
|
+ word-wrap: break-word;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ width: 120px;
|
|
|
+ /deep/.van-radio__label {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #3b3b3b;
|
|
|
+ }
|
|
|
+ /deep/.van-icon {
|
|
|
+ border-radius: 2px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .operate {
|
|
|
+ width: 100%;
|
|
|
+ word-break: break-all;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ // overflow-wrap: break-word;
|
|
|
+ }
|
|
|
+ .black {
|
|
|
+ color: #000;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .copys {
|
|
|
+ color: #29b286;
|
|
|
+ padding-left: 4px;
|
|
|
+ }
|
|
|
+ .mobile {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000;
|
|
|
+ font-weight: 550;
|
|
|
+ }
|
|
|
+ .input {
|
|
|
+ font-size: 13px;
|
|
|
+ width: 180px;
|
|
|
+ }
|
|
|
+ /deep/.van-field__control::placeholder {
|
|
|
+ font-size: 12px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ overflow: hidden; //超出的文本隐藏
|
|
|
+ text-overflow: ellipsis; //溢出用省略号显示
|
|
|
+ white-space: nowrap; //溢出不换行
|
|
|
+ }
|
|
|
+ /deep/.van-field__control::-webkit-input-placeholder {
|
|
|
+ font-size: 12px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ overflow: hidden; //超出的文本隐藏
|
|
|
+ text-overflow: ellipsis; //溢出用省略号显示
|
|
|
+ white-space: nowrap; //溢出不换行
|
|
|
+ }
|
|
|
+ /deep/.van-field__control::-moz-placeholder {
|
|
|
+ font-size: 12px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ overflow: hidden; //超出的文本隐藏
|
|
|
+ text-overflow: ellipsis; //溢出用省略号显示
|
|
|
+ white-space: nowrap; //溢出不换行
|
|
|
+ }
|
|
|
+ /deep/.van-field__control::-ms-input-placeholder {
|
|
|
+ font-size: 12px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ overflow: hidden; //超出的文本隐藏
|
|
|
+ text-overflow: ellipsis; //溢出用省略号显示
|
|
|
+ white-space: nowrap; //溢出不换行
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .buy {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ &_btn {
|
|
|
+ width: 70%;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ background-color: #29b286;
|
|
|
+ border: none;
|
|
|
+ padding: 0 10px;
|
|
|
+ white-space: nowrap;
|
|
|
+ border-radius: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tips {
|
|
|
+ color: #616161;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 180%;
|
|
|
+ padding: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.wrapper {
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: center;
|
|
|
+ .loading {
|
|
|
+ position: absolute;
|
|
|
+ left: 46%;
|
|
|
+ top: 46%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xiaomei
