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>ca87ca68ca68c6a986c98a678c7a8</text></view>
			</view>
			<view class="code"><image :src="er_code"></image></view>
			<view class="flex btnBox">
				<view class="btn">保存相册</view>
				<view class="btn">复制地址</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 uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
// import { show_cb,do_cb } from '@/api/recharge.js';
// import { upload } from '@/api/real.js';
export default {
	components: {
		uniList,
		uniListItem
	},
	data() {
		return {
			uid: '',
			list:'',
			account: '',
			money: '',
			address:'',
			er_code:'',
			remark:'',
			img: '/static/image/img19.png'
		};
	},
	onLoad() {
		this.uid = uni.getStorageSync('uid');
		this.loadData();
	},
	methods: {
		//获取数据
		loadData() {
		  // show_cb({})
		  //   .then(data => {
		  //     this.list = data.data;
			 //  this.address = data.data.address;
			 //  this.er_code = data.data.er_code;
		  //   })
		  //   .catch(err => {
		  //     console.log(err);
		  //   });
		},
		//确认提交
		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>