|
@@ -1,166 +1,456 @@
|
|
<template>
|
|
<template>
|
|
- <view class="all padding-c-30 padding-v-30">
|
|
|
|
- <view class="top">
|
|
|
|
- <view class="topO"> {{$t('userinfo.u4')}} </view>
|
|
|
|
- <view class="topT flex-start padding-t-30">
|
|
|
|
- <view class="tt">USDT-TRC20</view>
|
|
|
|
|
|
+ <view class="content">
|
|
|
|
+ <view class="main-jg"></view>
|
|
|
|
+ <view class="add-wrapper">
|
|
|
|
+ <view class="add-box">
|
|
|
|
+ <view class="add-log">$</view>
|
|
|
|
+ <input type="text" v-model="money" :placeholder="$t('recharge.请输入充值金额')" placeholder-class="place"
|
|
|
|
+ @keyup="clearNoNum()" />
|
|
</view>
|
|
</view>
|
|
- <view class="topS flex-start">
|
|
|
|
- <view class="S">{{$t('userinfo.u1')}}</view>
|
|
|
|
- <view class="SS clamp padding-c-10">{{ address }}</view>
|
|
|
|
- <image class="SSS" src="/static/icon/cz.png" mode="" @click="copy(address)">
|
|
|
|
- </image>
|
|
|
|
- </view>
|
|
|
|
- <!-- 根据地址生成二维码 -->
|
|
|
|
- <view class="qr flex-center">
|
|
|
|
- <uqrcode h5DownloadName='myqrcode' ref="qrcode" canvas-id="qrcode" :value="address" size="240" sizeUnit='rpx'>
|
|
|
|
- </uqrcode>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- <view class="last flex">
|
|
|
|
- <view class="le" @click="savePic">
|
|
|
|
- <view class="lef">{{$t('userinfo.u2')}}</view>
|
|
|
|
|
|
+ <view class="jg" style="height: 1px; background-color: #E6E6E6;"></view>
|
|
|
|
+ <view class="add-tags">
|
|
|
|
+ <view class="tag" v-for="(item, index) in addTags" :key="item" @click="tagClick(index)"
|
|
|
|
+ :class="{ action: currentIndex === index && money == addTags[index] }">
|
|
|
|
+ <text>{{ item }}</text>
|
|
|
|
+ USDT
|
|
</view>
|
|
</view>
|
|
- <view class="le" style="margin-left: 30rpx;">
|
|
|
|
- <view class="lef" @click="copy(address)">{{$t('userinfo.u3')}}</view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="buttom">
|
|
|
|
- <view class="but">
|
|
|
|
- {{$t('userinfo.u5')}}
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
+ <view class="main-jg"></view>
|
|
|
|
+ <button class="add-btn up" :class="{ 'active-bg': payLoding }"
|
|
|
|
+ @click="!payLoding ? confirm() : ''">{{$t('recharge.立即充值')}}</button>
|
|
|
|
+
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import {
|
|
import {
|
|
- qianBao
|
|
|
|
- } from "@/api/wallet.js"
|
|
|
|
|
|
+ getMoneyStyle
|
|
|
|
+ } from '@/utils/rocessor.js';
|
|
|
|
+
|
|
|
|
+ import {
|
|
|
|
+ gamecharge,
|
|
|
|
+ gamechargePost
|
|
|
|
+ } from '@/api/game.js';
|
|
|
|
+
|
|
|
|
+ import {
|
|
|
|
+ mapState
|
|
|
|
+ } from 'vuex';
|
|
|
|
+ import detectEthereumProvider from '@metamask/detect-provider'
|
|
export default {
|
|
export default {
|
|
|
|
+ filters: {
|
|
|
|
+ getMoneyStyle
|
|
|
|
+ },
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- address: '',
|
|
|
|
- qr:''
|
|
|
|
|
|
+ money: '', //充值金额
|
|
|
|
+ payLoding: false, //是否加载中
|
|
|
|
+ addTags: [300, 200, 150, 100, 50],
|
|
|
|
+ currentIndex: '',
|
|
};
|
|
};
|
|
},
|
|
},
|
|
- mounted() {},
|
|
|
|
- onReady() {},
|
|
|
|
|
|
+ computed: {
|
|
|
|
+ // #ifdef H5
|
|
|
|
+ ...mapState(['weichatObj']),
|
|
|
|
+ // #endif
|
|
|
|
+ ...mapState('user', ['userInfo'])
|
|
|
|
+ },
|
|
onLoad() {
|
|
onLoad() {
|
|
uni.setNavigationBarTitle({
|
|
uni.setNavigationBarTitle({
|
|
- title: this.$t("tab.a3"),
|
|
|
|
|
|
+ title: this.$t('user.a7')
|
|
});
|
|
});
|
|
- this.qianBao()
|
|
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- // 二维码地址
|
|
|
|
- async qianBao() {
|
|
|
|
- const res = await qianBao()
|
|
|
|
- this.address = res.data.back.USDT.money.address;
|
|
|
|
|
|
+ // 跳转
|
|
|
|
+ navTo(url) {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: url
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ // 切换选中对象
|
|
|
|
+ tabRadio(e) {
|
|
|
|
+ console.log(e)
|
|
|
|
+ this.type = e;
|
|
},
|
|
},
|
|
- // 复制地址
|
|
|
|
- copy(value) {
|
|
|
|
- uni.setClipboardData({
|
|
|
|
- data: value,
|
|
|
|
- success: function() {
|
|
|
|
- //调用方法成功
|
|
|
|
- console.log("success");
|
|
|
|
- },
|
|
|
|
|
|
+ // 提交
|
|
|
|
+ async confirm() {
|
|
|
|
+ let obj = this;
|
|
|
|
+ if (this.money == 0) {
|
|
|
|
+ return this.$api.msg(this.$t('recharge.请输入充值金额'));
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ obj.payLoding = true;
|
|
|
|
+ uni.showLoading({
|
|
|
|
+ title: 'loding...',
|
|
|
|
+ mask:true
|
|
});
|
|
});
|
|
|
|
+ try {
|
|
|
|
+ const res = await gamecharge({
|
|
|
|
+ token: "USDT",
|
|
|
|
+ num: this.money,
|
|
|
|
+ })
|
|
|
|
+ const txHash = await ethereum.request({
|
|
|
|
+ method: 'eth_sendTransaction',
|
|
|
|
+ params: [{
|
|
|
|
+ from: obj.userInfo.account, // The user's active address.
|
|
|
|
+ to: res.data.to,
|
|
|
|
+ value: 0,
|
|
|
|
+ data: res.data.data.data,
|
|
|
|
+ }]
|
|
|
|
+ })
|
|
|
|
+ const PKR_RECHARGE = "PKR_RECHARGE" + (new Date()).getTime()
|
|
|
|
+ const sign = await ethereum.request({
|
|
|
|
+ "method": "personal_sign",
|
|
|
|
+ "params": [
|
|
|
|
+ PKR_RECHARGE,
|
|
|
|
+ obj.userInfo.account
|
|
|
|
+ ]
|
|
|
|
+ })
|
|
|
|
+ const req = await gamechargePost({
|
|
|
|
+ num: obj.money,
|
|
|
|
+ token: "USDT",
|
|
|
|
+ transactionHash: txHash,
|
|
|
|
+ msg: PKR_RECHARGE,
|
|
|
|
+ sign:sign
|
|
|
|
+ });
|
|
|
|
+ uni.showToast({
|
|
|
|
+ title:this.$t('userinfo.u24')
|
|
|
|
+ })
|
|
|
|
+ obj.payLoding = false;
|
|
|
|
+ } catch (e) {
|
|
|
|
+ obj.payLoding = false;
|
|
|
|
+ uni.showToast({
|
|
|
|
+ title:this.$t('recharge.申请失败'),
|
|
|
|
+ icon:'error'
|
|
|
|
+ })
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- savePic(Url) {
|
|
|
|
- this.$refs.qrcode.save({});
|
|
|
|
|
|
+ //获取订单列表
|
|
|
|
+ loadData(source) {
|
|
|
|
+ console.log(source);
|
|
|
|
+ //这里是将订单挂载到tab列表下
|
|
|
|
+ let index = this.tabCurrentIndex;
|
|
|
|
+ let navItem = this.navList[index];
|
|
|
|
+ let state = navItem.state;
|
|
|
|
+ if (source === 'tabChange' && navItem.loaded === true) {
|
|
|
|
+ //tab切换只有第一次需要加载数据
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ if (navItem.loadingType === 'loading') {
|
|
|
|
+ //防止重复加载
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ navItem.loadingType = 'loading';
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ let orderList = [];
|
|
|
|
+ orderList.forEach(item => {
|
|
|
|
+ navItem.orderList.push(item);
|
|
|
|
+ });
|
|
|
|
+ //loaded新字段用于表示数据加载完毕,如果为空可以显示空白页
|
|
|
|
+ this.$set(navItem, 'loaded', true);
|
|
|
|
+ //判断是否还有数据, 有改为 more, 没有改为noMore
|
|
|
|
+ navItem.loadingType = 'more';
|
|
|
|
+ }, 600);
|
|
},
|
|
},
|
|
- },
|
|
|
|
|
|
+ tagClick(index) {
|
|
|
|
+ this.currentIndex = index;
|
|
|
|
+ this.money = this.addTags[index];
|
|
|
|
+ },
|
|
|
|
+ clearNoNum() {
|
|
|
|
+ this.money = this.money.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
|
|
|
|
+ switch (this.money) {
|
|
|
|
+ case '300':
|
|
|
|
+ this.currentIndex = 0;
|
|
|
|
+ break;
|
|
|
|
+ case '200':
|
|
|
|
+ this.currentIndex = 1;
|
|
|
|
+ break;
|
|
|
|
+ case '150':
|
|
|
|
+ this.currentIndex = 2;
|
|
|
|
+ break;
|
|
|
|
+ case '100':
|
|
|
|
+ this.currentIndex = 3;
|
|
|
|
+ break;
|
|
|
|
+ case '50':
|
|
|
|
+ this.currentIndex = 4;
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ btnClick() {
|
|
|
|
+ this.isSect = !this.isSect
|
|
|
|
+ },
|
|
|
|
+ }
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
- .all {
|
|
|
|
- line-height: 1;
|
|
|
|
- color: #ffffff;
|
|
|
|
|
|
+ page {
|
|
|
|
+ height: 100%;
|
|
|
|
+ background-color: #fff;
|
|
}
|
|
}
|
|
|
|
|
|
- .top {
|
|
|
|
- padding: 40rpx 30rpx;
|
|
|
|
- background: #191a1f;
|
|
|
|
- border-radius: 20rpx;
|
|
|
|
|
|
+ .add-btn {
|
|
|
|
|
|
- .topO {
|
|
|
|
- font-size: $font-lg;
|
|
|
|
- font-weight: bold;
|
|
|
|
|
|
+ &.modified {
|
|
|
|
+ color: $base-color;
|
|
}
|
|
}
|
|
|
|
|
|
- .topT {
|
|
|
|
- .tt {
|
|
|
|
- padding: 20rpx 24rpx;
|
|
|
|
- border-radius: 10rpx;
|
|
|
|
- border: 2px solid #ddba82;
|
|
|
|
- font-size: 26rpx;
|
|
|
|
- font-weight: bold;
|
|
|
|
- color: #feb041;
|
|
|
|
- }
|
|
|
|
|
|
+ &.up {
|
|
|
|
+
|
|
|
|
+ background: linear-gradient(-90deg, #FAC545, #FFE000);
|
|
|
|
+ color: #6B4216;
|
|
}
|
|
}
|
|
|
|
|
|
- .topS {
|
|
|
|
- padding-top: 30rpx;
|
|
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ width: 604rpx;
|
|
|
|
+ height: 90rpx;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ margin-top: 30rpx;
|
|
|
|
+ font-size: $font-lg;
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
|
|
- .S {
|
|
|
|
- font-size: $font-lg;
|
|
|
|
- font-weight: bold;
|
|
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .row-box {
|
|
|
|
+ margin-top: 30rpx;
|
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
|
+ background: #fff;
|
|
|
|
+
|
|
|
|
+ .title {
|
|
|
|
+ font-size: $font-base + 2rpx;
|
|
|
|
+ color: $font-color-dark;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .row {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ position: relative;
|
|
|
|
+ height: 80rpx;
|
|
|
|
+
|
|
|
|
+ .tit {
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
|
|
+ width: 40rpx;
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ color: $font-color-dark;
|
|
}
|
|
}
|
|
|
|
|
|
- .SS {
|
|
|
|
- font-size: $font-sm;
|
|
|
|
- flex-grow: 1;
|
|
|
|
|
|
+ .input {
|
|
|
|
+ flex: 1;
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ color: $font-color-dark;
|
|
}
|
|
}
|
|
|
|
|
|
- .SSS {
|
|
|
|
- flex-shrink: 0;
|
|
|
|
- width: 29rpx;
|
|
|
|
- height: 29rpx;
|
|
|
|
|
|
+ .iconlocation {
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
+ color: $font-color-light;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .buttom {
|
|
|
|
+ color: $font-color;
|
|
|
|
+ font-size: $font-base;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- .qr {
|
|
|
|
- margin: 0 auto;
|
|
|
|
- margin-top: 34rpx;
|
|
|
|
- width: 275rpx;
|
|
|
|
- height: 275rpx;
|
|
|
|
|
|
+ .list {
|
|
|
|
+ padding-left: 30rpx;
|
|
|
|
+ margin-top: 30rpx;
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+
|
|
|
|
+ .box {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 120rpx;
|
|
|
|
+ border-bottom: 1px solid $border-color-light;
|
|
|
|
+
|
|
|
|
+ .icon {
|
|
|
|
+ font-size: 48rpx;
|
|
|
|
+ padding-right: 20rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .iconweixin1 {
|
|
|
|
+ color: #18bf16;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .iconzhifubao {
|
|
|
|
+ color: #08aaec;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .title-box {
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ text-align: left;
|
|
|
|
+
|
|
|
|
+ .title {
|
|
|
|
+ font-size: $font-base + 2rpx;
|
|
|
|
+ color: $font-color-base;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .node {
|
|
|
|
+ font-size: $font-sm;
|
|
|
|
+ color: $font-color-light;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /deep/ .uni-radio-input {
|
|
|
|
+ width: 45rpx;
|
|
|
|
+ height: 45rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .active-bg {
|
|
|
|
+ background-color: $color-gray !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .now {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 86rpx;
|
|
|
|
+ padding: 0 26rpx 0 47rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ line-height: 86rpx;
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
|
|
+ // margin-bottom: 21rpx;
|
|
|
|
+
|
|
|
|
+ view {
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #333333;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .now-money {
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #FF4C4C;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
- .last {
|
|
|
|
- margin-top: 50rpx;
|
|
|
|
- padding: 0 30rpx;
|
|
|
|
|
|
+ .add-wrapper {
|
|
|
|
+ width: 750rpx;
|
|
|
|
+ height: 338rpx;
|
|
|
|
+ padding-left: 30rpx;
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .le {
|
|
|
|
- padding: 20rpx 0;
|
|
|
|
- width: 250rpx;
|
|
|
|
- border: 2px solid #DDBA82;
|
|
|
|
- text-align: center;
|
|
|
|
- border-radius: 10rpx;
|
|
|
|
|
|
+ // margin-bottom: 22rpx;
|
|
|
|
+ .add-box {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 103rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ padding: 0 39rpx 0 10rpx;
|
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .lef {
|
|
|
|
- font-size: 26rpx;
|
|
|
|
|
|
+ .add-log {
|
|
|
|
+ font-size: 37rpx;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
- color: #FEB041;
|
|
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ input {
|
|
|
|
+ height: 30rpx;
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #000;
|
|
|
|
+ line-height: 40px;
|
|
|
|
+ text-align: right;
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+
|
|
|
|
+ .place {
|
|
|
|
+ color: #bfbfbf;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .jg {
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .add-tags {
|
|
|
|
+ height: 234rpx;
|
|
|
|
+ padding-top: 47rpx;
|
|
|
|
+ padding-bottom: 17rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+
|
|
|
|
+ // justify-content: space-between;
|
|
|
|
+ .tag {
|
|
|
|
+ width: 210rpx;
|
|
|
|
+ height: 70rpx;
|
|
|
|
+ background-color: #f0f0f0;
|
|
|
|
+ border-radius: 4rpx;
|
|
|
|
+ margin: 0 30rpx 30rpx 0;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 70rpx;
|
|
|
|
+ font-size: 22rpx;
|
|
|
|
+
|
|
|
|
+ text {
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .action {
|
|
|
|
+ color: #6B4216;
|
|
|
|
+ background: linear-gradient(-90deg, #FAC545, #FFE000);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- .buttom {
|
|
|
|
- background: #191a1f;
|
|
|
|
- border-radius: 20rpx;
|
|
|
|
- margin-top: 30rpx;
|
|
|
|
- padding: 30rpx;
|
|
|
|
- .but {
|
|
|
|
- font-size: 26rpx;
|
|
|
|
- font-weight: 500;
|
|
|
|
- line-height: 45rpx;
|
|
|
|
|
|
+ .btn-wrapper {
|
|
|
|
+ padding: 49rpx 32rpx 0 40rpx;
|
|
|
|
+ height: 183rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+
|
|
|
|
+ .iconweixin1 {
|
|
|
|
+ color: #18bf16;
|
|
|
|
+ font-size: 48rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+
|
|
|
|
+ view {
|
|
|
|
+ // display: inline-block;
|
|
|
|
+ height: 48rpx;
|
|
|
|
+ text-align: 48rpx;
|
|
|
|
+ padding-left: 20rpx;
|
|
|
|
+ // padding-top: 10rpx;
|
|
|
|
+ color: #000000;
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .btn {
|
|
|
|
+ width: 36rpx;
|
|
|
|
+ height: 36rpx;
|
|
|
|
+ border: 4rpx #333 solid;
|
|
|
|
+ border-radius: 8rpx 8rpx;
|
|
|
|
+
|
|
|
|
+ image {
|
|
|
|
+ // display: none;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .action {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .actiont {
|
|
|
|
+ border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ .main-jg {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 21rpx;
|
|
|
|
+ background-color: #f8f6f6;
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|