yzf/pages/index/recharge.vue

<template>
	<view class="container">
		<view class="recharge">
			<view class="example-title flex_item">
				<view class="titleTip"></view>
				<view class="">充值地址</view>
			</view>
			<view class="infoBox">
				<view class="tplName">链名称</view>
				<view class="tplNum">USDT-TRC20</view>
				<view class="tplAddr">收款地址<text>{{dataMoney.address}}</text></view>
			</view>
			<view class="code">
				<image :src="er_code" mode=""></image>
				<!-- #ifdef H5 || APP-PLUS -->
				<zb-code ref="qrcode" :show="codeShow" :cid="cid" :val="val" :size="size" :unit="unit"
					:background="background" :foreground="foreground" :pdground="pdground" :icon="codeIcon"
					:iconSize="iconsize" :onval="onval" :loadMake="loadMake" @result="qrR" />
				<!-- #endif -->
			</view>
			<view class="flex btnBox">
				<!-- #ifdef APP -->
				<view class="btn margin-r-30" @click="domImage">保存相册</view>
				<!-- #endif -->
				<view class="btn" @click="copy">复制地址</view>
			</view>
		</view>
		<view class="login_text">
			<view class="login_input flex" style="padding-top: 45rpx;">
				<view class="login_img">金额</view>
				<view class="login_name"><input class="uni-input" type="text" v-model="money" placeholder="请输入充值金额" />
				</view>
			</view>
			<view class="login_input flex">
				<view class="login_img"><text>打款凭证</text></view>
				<view class="login_name" @click="scImg">
					<image :src="img"></image>
				</view>
			</view>
			<view class="login_input flex" style="padding-top: 45rpx;border-bottom: none;">
				<view class="login_img">备注</view>
				<view class="login_name"><input class="uni-input" type="text" v-model="remark"
						placeholder="例如：备注用户账号" /></view>
			</view>
			<view class="submission"><button class="golden" type="golden" hover-class="none"
					@click="submission">确认提交</button></view>
		</view>
		<view class="login_text">
			<view class="tip">
				<view>
					<text>
						该地址仅支持 USDT-TRC20 收款请勿用于其他币种，否则资产将不可找回</br>
						从易趣付之外地址转入的资金，需要在完成交易的120分钟后，才能将资产转账给易币付其他用户或提到钱包以外的地址 最小收款金额:
						0.0001USDT小于最小金额的收款将不会上账且无法退回1次网络确认后可到账，1次网络确认后可转账。您的充值地址不会经常改变，可截图保存并重复充值。
					</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script type="text/javascript">
	// import { show_cb,do_cb } from '@/api/recharge.js';
	// import { upload } from '@/api/real.js';
	import {
		qianBao
	} from '@/api/wallet.js';
	import {
		copyText
	} from '@/utils/rocessor.js';
	export default {
		data() {
			return {
				uid: '',
				list: '',
				account: '',
				money: '',
				address: '',
				er_code: '',
				remark: '',
				img: '/static/image/img19.png',
				dataMoney: {},
				uid: '',
				account: '',
				money: '',
				address: '',
				remark: '',
				img: '/static/image/img19.png',
				val: "", // 要生成的二维码值
				size: 200, // 二维码大小
				unit: 'upx', // 单位
				background: '#FFF', // 背景色
				foreground: '#000', // 前景色
				pdground: '#000', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				codeShow: false,
				cid: '1',
				codeIcon: '', // 二维码图标
			};
		},
		onLoad() {
			this.uid = uni.getStorageSync('uid');
			this.qianBao();
		},
		methods: {
			//获取数据
			qianBao() {
				const that = this;
				qianBao({}).then(
					(res) => {
						that.dataMoney = res.data.back.USDT.money
						that.val = that.dataMoney.address;
						console.log(that.dataMoney, 'dataMoney');
					}
				).catch(
					(res) => {
						console.log(res,'err');
					}
				)
			},
			// 下载图片
			domImage() {
				uni.downloadFile({
					url: this.er_code,
					success(re) {
						console.log(re.tempFilePath, 're');
						uni.showToast({
							title: '下载成功'
						});
					}
				})
			},
			// 复制地址
			copy() {
				copyText(this.dataMoney.address)
			},
			// 二维码生成
			qrR(res) {
				this.er_code = res;
			},
			//确认提交
			submission() {
				let obj = this;
				uni.showLoading({
					title: '充币中...',
					mask: true
				});
				//确认充值调接口，成功跳转页面
				do_cb({
						uid: obj.uid,
						img: obj.img,
						address: obj.address,
						money: obj.money,
						bz: obj.remark,
					})
					.then(function(e) {
						uni.showToast({
							title: '请耐心等待系统审核通过',
							duration: 1500,
							mask: false,
							icon: 'none'
						});
						uni.hideLoading();
					})
					.catch(function(e) {
						console.log(e);
					});
			},
			//上传图片
			scImg() {
				upload({
					file: ''
				}).then((e) => {
					console.log(e, 55)
					this.img = e[0].url;
				});
			},
		}
	};
</script>

<style lang="scss">
	/* page {
	min-height: 100%;
	background: linear-gradient(-28deg, rgba(44, 45, 53, 1), rgba(59, 62, 74, 1));
} */
	.body_content {
		width: 100%;
		height: 100%;
	}

	.login_text {
		width: 100%;
		color: #fff !important;
		font-size: 28rpx !important;
		background-color: #1F2A4A;
		margin: 25rpx 0rpx;
		padding: 0rpx 25rpx;
		padding-bottom: 15rpx;
	}

	.recharge {
		text-align: center;
		color: #85858e;
		font-size: 30rpx;
		background-color: #1F2A4A;
	}

	.example-title {
		text-align: left !important;
		padding: 25rpx 25rpx;
		border-bottom: 2rpx solid #2F364E;
		color: #0C5AFA;

		.titleTip {
			width: 5rpx;
			height: 30rpx;
			background: linear-gradient(90deg, #0C5AFA, #1356FF);
			border-radius: 3rpx;
			margin-right: 15rpx;
		}
	}

	.infoBox {
		text-align: left;
		padding: 28rpx 51rpx;

		.tplName {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 24rpx;
		}

		.tplNum {
			margin: 30rpx 0rpx;
			padding: 15rpx 30rpx;
			border-radius: 10rpx;
			border: 1px solid #1356FF;
			font-family: PingFang SC;
			font-size: 26rpx;
			color: #1356FF;
			display: inline-block;
		}

		.tplAddr {
			color: #fff;
			font-size: 32rpx;

			text {
				padding-left: 15rpx;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
	}

	.login_input {
		border-bottom: 1px solid #464755;
		padding: 35rpx;
	}

	.uni-input {
		width: 100%;
		text-align: left !important;
	}

	.code {
		width: 277rpx;
		height: 277rpx;
		margin: 25rpx auto;
		margin-bottom: 35rpx;
		background: #0C5AFA;
	}

	.code image {
		width: 100%;
		height: 100%;
	}

	.btnBox {
		justify-content: center;
		padding-bottom: 50rpx;
		padding-top: 30rpx;

		.btn {
			margin-right: 50rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 26rpx;
			color: #0C5AFA;
			border: 1rpx solid #0C5AFA;
			padding: 15rpx 45rpx;
			border-radius: 15rpx;
		}
	}

	.submission {
		padding: 30rpx 25rpx;

		.golden {
			background: #0C5AFA;
			color: #fff;
		}
	}

	.login_name {
		width: 480rpx;
		color: #ffffff;
	}

	.login_name image {
		width: 100rpx;
		height: 100rpx;
	}

	.tip {
		padding: 29rpx 31rpx;
		line-height: 55rpx;
		font-size: 24rpx;
	}

	.select_img {
		width: 28rpx;
		height: 32rpx;
	}

	.select_img image {
		width: 100%;
		height: 100%;
	}

	.scann {
		margin-bottom: 35rpx;
		margin-top: 15rpx;
	}

	.scanning {
		background-color: #6f6f78;
		color: #ffffff;
		padding: 10rpx 30rpx;
		border-radius: 15rpx;
		font-size: 28rpx;
	}

	.address_code {
		padding: 25rpx 0rpx;
		color: #ffffff;
	}

	.input-placeholder {
		color: #fff !important;
	}
</style>