|
@@ -1,22 +1,227 @@
|
|
|
<template>
|
|
|
<view class="center">
|
|
|
-
|
|
|
-
|
|
|
+ <view class="rateBox">
|
|
|
+ <view class="rateTitle">实时汇率</view>
|
|
|
+ <view class="rate">{{ exchange }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="rateConetnt" v-if="lodingType">
|
|
|
+ <view class="titleBox flex">
|
|
|
+ <view class="leftTip"></view>
|
|
|
+ <view class="title">兑换币种</view>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="moneyText">兑出币种</view>
|
|
|
+ <view class="Type flex">
|
|
|
+ <image class="moneylogo" :src="moneyType[index].LOGO" mode="scaleToFill"></image>
|
|
|
+ <view class="moneyName clamp" @click="show = true">{{moneyType[index].name}}</view>
|
|
|
+ <u-icon name="arrow-down-fill" color="#0F253A" size="10"></u-icon>
|
|
|
+ <u-input :height="45" class="input" v-model="pushMoney" type="number" :border="false" placeholder="请输入需要兑换的数量" />
|
|
|
+ </view>
|
|
|
+ <view class="contentImg"><image class="img" src="../../static/img/tab.png" mode="scaleToFill"></image></view>
|
|
|
+ <view class="moneyText">兑入币种</view>
|
|
|
+ <view class="Type flex">
|
|
|
+ <image class="moneylogo" :src="add.LOGO" mode="scaleToFill"></image>
|
|
|
+ <view class="moneyName clamp">{{ add.name }}</view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view class="input">{{ moneyReta }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="lsButtom" @click="buy()">确认兑换</view>
|
|
|
+ <u-action-sheet :list="moneyType" v-model="show" @click="changeIndex"></u-action-sheet>
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import { recharge, wallet, moneyType } from '@/api/finance.js';
|
|
|
export default {
|
|
|
data() {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ index: 0, //当前选中的兑出币种
|
|
|
+ moneyType: [],
|
|
|
+ add: { LOGO: '', name: '' }, //兑入币种
|
|
|
+ pushMoney: '',
|
|
|
+ lodingType: false, //判断是否已经载入币种分类分类数据
|
|
|
+ show: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 转换金额
|
|
|
+ moneyReta() {
|
|
|
+ // 保存当前选中的对象
|
|
|
+ const obj = this.moneyType[this.index];
|
|
|
+ return (this.pushMoney * +obj.usdt_price) / +this.add.usdt_price;
|
|
|
+ },
|
|
|
+ // 实时汇率
|
|
|
+ exchange() {
|
|
|
+ try {
|
|
|
+ const data = this.moneyType[this.index];
|
|
|
+ return 1 + data.name + '≈' + data.usdt_price / this.add.usdt_price + this.add.name;
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e);
|
|
|
+ return '加载中...';
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
//页面加载即刻发生
|
|
|
- onload() {},
|
|
|
- methods: {}
|
|
|
+ onLoad() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 初始化页面
|
|
|
+ init() {
|
|
|
+ this.wallet();
|
|
|
+ },
|
|
|
+ // 弹出层选择事件
|
|
|
+ changeIndex(e){
|
|
|
+ console.log(e);
|
|
|
+ this.index = e;
|
|
|
+ },
|
|
|
+ // 加载币种分类
|
|
|
+ wallet() {
|
|
|
+ let that = this;
|
|
|
+ console.log('请求兑换');
|
|
|
+ uni.showLoading({
|
|
|
+ title: '载入数据中...',
|
|
|
+ mask: true
|
|
|
+ });
|
|
|
+ wallet()
|
|
|
+ .then(e => {
|
|
|
+ uni.hideLoading();
|
|
|
+ that.lodingType = true;
|
|
|
+ const moneyType = Object.keys(e.data.back);
|
|
|
+ moneyType.forEach(es => {
|
|
|
+ const data = e.data.back[es];
|
|
|
+ data.text = data.name;
|
|
|
+ if (+data.do_exchange == 1) {
|
|
|
+ that.moneyType.push(data);
|
|
|
+ }
|
|
|
+ if (+data.exchange == 1) {
|
|
|
+ that.add = data;
|
|
|
+ console.log(e.data.back[es], '555');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ console.log(that.moneyType);
|
|
|
+ console.log(that.add, '兑入');
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (e.status != 410000) {
|
|
|
+ that.lodingType = true;
|
|
|
+ uni.showModal({
|
|
|
+ title: '错误',
|
|
|
+ content: '加载失败请刷新页面',
|
|
|
+ cancelText: '关闭',
|
|
|
+ confirmText: '刷新',
|
|
|
+ success: res => {
|
|
|
+ if (res.confirm) {
|
|
|
+ that.init();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
.center {
|
|
|
- height: 0;
|
|
|
min-height: 100%;
|
|
|
}
|
|
|
+.lsButtom {
|
|
|
+ font-size: 30rpx;
|
|
|
+ background-image: $bg-green-gradual;
|
|
|
+ text-align: center;
|
|
|
+ color: $font-color-white;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ border-radius: 99rpx;
|
|
|
+ margin: 20rpx 30rpx 0rpx 30rpx;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+.rateBox {
|
|
|
+ padding: $page-row-spacing;
|
|
|
+ background-color: #ffffff;
|
|
|
+ .rateTitle {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: $font-color-dark;
|
|
|
+ }
|
|
|
+ .rate {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: $font-color-light;
|
|
|
+ }
|
|
|
+}
|
|
|
+.rateConetnt {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ line-height: 1;
|
|
|
+ padding-bottom: 60rpx;
|
|
|
+ .titleBox {
|
|
|
+ align-items: stretch;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding: $page-row-spacing;
|
|
|
+ border-bottom: 1px solid $border-color-light;
|
|
|
+ .leftTip {
|
|
|
+ width: 7rpx;
|
|
|
+ border-radius: 99rpx;
|
|
|
+ background-color: $base-color;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: $font-color-dark;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ .moneyText {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: $font-color-dark;
|
|
|
+ padding: $page-row-spacing;
|
|
|
+ }
|
|
|
+ .Type {
|
|
|
+ padding: 0 $page-row-spacing;
|
|
|
+ .moneylogo {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ border-radius: 99rpx;
|
|
|
+ }
|
|
|
+ .moneyName {
|
|
|
+ width: 180rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: $font-color-dark;
|
|
|
+ margin: 0 20rpx;
|
|
|
+ }
|
|
|
+ .input {
|
|
|
+ flex-grow: 1;
|
|
|
+ height: 45rpx;
|
|
|
+ line-height: 45rpx;
|
|
|
+ margin-left: 40rpx;
|
|
|
+ color: $font-color-light;
|
|
|
+ border-bottom: 1px solid $border-color-light;
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ width: 2rpx;
|
|
|
+ background-color: $font-color-dark;
|
|
|
+ margin: 0 10rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .contentImg {
|
|
|
+ width: 70rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ margin: 40rpx auto 0;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|