kunpeng/pages/finance/recharge.vue

<template>
	<view class="container">
		<view class="list-box">
			<view class="list flex">
				<view class="flex_item list-item">
					<image :src="logo"></image>
					<view>{{name}}</view>
				</view>
				<view class="flex_item list-tpl">
					<view class="content" @click="useOutClickSide">
						<selectss ref="easySelect" :options='moneyTypeList' :value="name" @selectOne="selectOne">
						</selectss>
					</view>
					<image src="../../static/img/img23.png"></image>
				</view>
			</view>
			
		</view>
		
		<view class="image-box" v-if="charge != 0">
			<view class="tuijianbox" >
				<view class="item" @click="gogo()" >
					<image v-if="idx == 2" src="../../static/img/befor.png"></image>
					<image v-else src="../../static/img/after.png"></image>
				</view>
			</view>
			<tki-qrcode
				:cid="cid"
				ref="qrcode"
				:val="address"
				:size="size"
				:unit="unit"
				:background="background"
				:foreground="foreground"
				:pdground="pdground"
				:iconSize="iconSize"
				:lv="lv"
				:onval="onval"
				:loadMake="loadMake"
				:usingComponents="usingComponents"
				@result="qrR"
			/>
			<!-- <image :src="qr" mode="aspectFit"></image> -->
		</view>
		<view class="from-box" v-if="charge != 0">
			<view class="from-title">充币地址</view>
			<view class="flex input-tpl">
				<input class="input-box" disabled="disabled" type="text" v-model="address" />
				<view class="all" @click="copy(address)">复制</view>
			</view>
			<!-- <view class="from-title">充币数量</view>
			<input class="input-box" type="text" v-model="num" placeholder="请输入充币数量" /> -->
			<!-- <view class="submit" v-if="showBtn" @click="bangidng">绑定钱包</view> -->
			<!-- <view class="" v-if="orderShow == true">
				<view class="from-title">订单号</view>
				<view class="flex input-tpl">
					<input class="input-box" disabled="disabled" type="text" v-model="order_id" />
					<view class="all" @click="copy(order_id)">复制</view>
				</view>
				<view class="add-img-item" @click.stop="scImg()">
					<image class="add-img" :src="image" mode="aspectFit"></image>
				</view>
				<view class="addr-text" @click="moneyList">上传凭证</view>
			</view> -->
			<view class="text-box">{{mark}}</view>
		</view>
		<view class="qidai" v-else>
			{{mark}}
		</view>
		
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="cancel flex" @click="close">
					<view></view>
					<view class="tip">x</view>
				</view>
				<view class="list-boxs">
					<view class="popup-text">绑定地址：</view>
					<view class="password"><input type="text" v-model="keysAddr" placeholder="请输入绑定地址"></view>
					<view class="confirm-btn" @click="bd"><text>确认绑定</text></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		recharge,edit
	} from '@/api/finance.js';
	import {
		upload,
		money
	} from '@/api/finance.js';
	import selectss from '@/components/select.vue';
	import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
	import {
		moneyType
	} from '@/api/index.js';
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	export default {
		components: {
			selectss,
			tkiQrcode
		},
		data() {
			return {
				moneyTypeList: [],
				charge: 0,
				logo: '',
				name: '',
				code: '',
				qr: '',
				address: '',
				image: '../../static/img/add.png',
				order_id:'',
				id:'',
				orderShow:false,
				mark:'',
                addr:'',
				ids:'',

				num: '',
				password: '',
				keysAddr:'',
				showBtn:false,
				idx: 1,
				cid: 'cid',
				size: 150,
				unit: '150',
				background: '#FFFFFF',
				foreground: '#000000',
				pdground: '#000000',
				icon: '',
				iconSize: 40,
				lv: 3,
				onval: true,
				loadMake: true,
				usingComponents: true,
				way: '',
			};
		},
		onLoad(option) {
			console.log(option)
			if (option.name) {
				this.name = option.name;
				this.logo = option.logo;
				this.charge = option.charge;
				this.code = option.code;
				this.mark = option.mark;
				this.ids = option.ids;
				this.keysAddr = option.keysAddr;
				this.qr = option._address_qr;
				
				
				this.ids = option.ids;
				this.addr = option.keysAddr;
				if(this.addr == null || this.addr == ''){
					this.showBtn = true
				}
			}
			this.moneyType();
			
			
		},
		onShow() {

		},
		methods: {
			// 所有币种
			async moneyType() {
				let obj = this;
				moneyType({}).then(({
					data
				}) => {
					obj.moneyTypeList = data;
					obj.address = obj.moneyTypeList[1].wallet.address_TRC20;
					if (obj.logo == '') {
						this.charge = obj.moneyTypeList[0].charge;
						obj.logo = obj.moneyTypeList[0].LOGO;
						obj.name = obj.moneyTypeList[0].name;
						obj.code = obj.moneyTypeList[0].code;
						obj.money = obj.moneyTypeList[0].price;
						// obj.address = obj.moneyTypeList[0].wallet.address_TRC20;
						obj.qr = obj.moneyTypeList[0]._address_qr;
						obj.mark = obj.moneyTypeList[0].mark;
						obj.address = obj.moneyTypeList[1].wallet.address_TRC20;
						obj.addr = obj.moneyTypeList[0].wallet.address;
						if(obj.addr == null || obj.addr == ''){
							obj.showBtn = true
						}
						obj.ids = obj.moneyTypeList[0].wallet.id;
					}
				});
			},
			//单张上传图片
			scImg() {
				let obj = this;
				upload({
					file: ''
				}).then(function(e) {
					if (e[0] == undefined || e[0] == '') {
						obj.$api.msg('图片上传失败!');
					} else {
						obj.image = e[0].url;
						obj.$api.msg('图片上传成功!');
					}
				})
			},
			close() {
				this.$refs.popup.close();
			},
			bd(){
				let obj = this;
				edit({
					key: obj.keysAddr
				},obj.ids).then(e => {
					obj.showBtn = false;
				     obj.$api.msg(e.msg);
					 obj.$refs.popup.close();
				});
			},
			bangidng(){
				let obj = this;
				obj.$refs.popup.open();
			},
			moneyList() {
				let obj = this;
				if (obj.image == '../../static/img/add.png') {
					obj.$api.msg('请上传凭证！');
					return;
				}
				money({
					proof: obj.image
				}, obj.id).then(e => {
					obj.$api.msg(e.msg);
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/finance/index'
						})
					}, 1000);
				});
			},
			//复制
			copy(item) {
				let obj = this;
				let content = item; //需要复制的内容
				content = typeof content === 'string' ? content : content.toString() // 复制内容，必须字符串，数字需要转换为字符串
				const result = uniCopy(content)
				if (result === false) {
					uni.showToast({
						title: '不支持',
					})
				} else {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					})
				}
			},
			recharge() {
				let obj = this;
				if (obj.num == '') {
					obj.$api.msg('请输入充币数量！');
					return;
				}
				recharge({
					money_type: obj.code,
					num: obj.num,
				}).then((data) => {
					obj.order_id = data.data.order_id;
					obj.id = data.data.id;
					obj.num = '';
					obj.$api.msg(data.msg);
					obj.orderShow = true;
				});
			},
			selectOne(options) {
				this.logo = options.LOGO;
				this.charge = options.charge;
				this.name = options.name;
				this.code = options.code;
				this.money = options.price;
				this.address = options.wallet.address_TRC20;
				this.qr = options._address_qr;
				this.qr = options._address_qr;
				this.mark = options.mark;
				this.addr = options.wallet.address;
				this.ids = options.wallet.id;
				
			},
			useOutClickSide() {
				this.$refs.easySelect.hideOptions && this.$refs.easySelect.hideOptions()
			},
			sub() {
				this.idx = 2;
				this.$api.msg('敬请期待！');
			},
			gogo() {
				this.idx = 1;
				
			},
			qrR(res) {
				this.src = res;
			},
			creatQrcode() {
				this.$refs.qrcode._makeCode();
			},
		}
	};
</script>

<style lang="scss">
	page {
		min-height: 100%;
		background-color: #ffffff;

		.container {
			width: 100%;
		}
	}

	.list-box {
		padding: 60rpx 30rpx;
		height: 350rpx;
		background-color: #5771DF;

		.list {
			background-color: #FFFFFF;
			border-radius: 15rpx;
			padding: 15rpx 23rpx;

			.list-item {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;

				image {
					width: 43rpx;
					height: 43rpx;
					margin-right: 15rpx;
				}
			}

			.list-tpl {
				image {
					width: 15rpx;
					height: 25rpx;
					margin-left: 20rpx;
				}
			}
		}
	}

	.image-box {
		position: relative;
		top: -100rpx;
		padding: 50rpx 0rpx;
		text-align: center;

		image {
			width: 300rpx;
			height: 300rpx;
			border-radius: 15rpx;
		}
	}

	.from-box {
		margin: 30rpx 30rpx;
		padding: 44rpx 25rpx;
		background-color: #FFFFFF;
		border-radius: 15rpx;
		position: relative;
		top: -180rpx;

		.from-title {
			font-size: 24rpx;
			font-weight: bold;
			color: #333333;
		}

		.input-box {
			font-size: 26rpx;
			font-weight: 500;
			color: #666666;
			margin: 35rpx 0rpx;
			width: 85%;
		}
 
		.all {
			font-size: 30rpx;
			font-weight: 500;
			color: #5771DF;
		}

		.all-num {
			font-size: 24rpx;
			font-weight: bold;
			color: #333333;

			text {
				font-size: 26rpx;
				padding: 0rpx 10rpx;
				color: #5771DF;
			}
		}

		.submit {
			background-color: #5771DF;
			margin-top: 160rpx;
			margin-bottom: 80rpx;
			color: #FFFFFF;
			text-align: center;
			padding: 26rpx 0rpx;
			border-radius: 15rpx;
		}

		.tpl-box {
			text-align: left;
			font-size: 28rpx;
			font-weight: 500;
			color: #FB3A2F;
			margin-top: 26rpx;
		}
	}

	.add-img-item {
		text-align: center;
		width: 100%;
		padding: 80rpx 0rpx;

		.add-img {
			width: 280rpx;
			height: 280rpx;
		}
	}

	.image {
		text-align: center;
		padding: 77rpx 0rpx 36rpx 0rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;

		.addr-img {
			width: 188rpx;
			height: 188rpx;
			margin-top: 18rpx;
		}
	}

	.addr-text {
		text-align: center;
		width: 500rpx;
		margin: 0rpx auto;
		line-height: 80rpx;
		color: #FFFFFF;
		background-color: #5771DF;
		border-radius: 50rpx;
		margin-bottom: 114rpx;
	}
	.text-box{
		font-size: 24rpx;
		padding: 25rpx 0rpx;
		line-height: 50rpx;
	}
	//弹窗
	.popup{
		background-color: #FFFFFF;
		border-radius: 25rpx;
		font-size: 30rpx;
		.cancel{
			text-align: center;
			width: 100%;
			line-height: 60rpx;
			.tip{
				background-color: #5771DF;
				color: #FFFFFF;
				width:70rpx;
				height: 70rpx;
				border-top-right-radius:25rpx ;
			}
		}
		.list-boxs{
			padding: 0rpx 80rpx;
			
			.password{
				padding: 50rpx 0rpx;
				width: 100%;
				input{
					width: 90%;
					height: 80rpx;
					border: 2rpx solid #999999;
					padding-left: 25rpx;
					box-shadow:0px 3px 5px 0px rgba(0, 0, 0, 0.27);
					border-radius:11rpx;
				}
			}
			.confirm-btn{
				margin-left: 80rpx;
				padding-bottom: 120rpx;
				padding-top: 30rpx;
				text{
					background-color: #5771DF;
					color: #FFFFFF;
					width: 100%;
					text-align: center;
					padding:25rpx 90rpx;
					border-radius: 15rpx;
				}
			}
		}
	}

	.tuijianbox{
		width: 100%;
		display: flex;
		height: 40rpx;
		margin-bottom: 60rpx;
		.item {
			margin-left: 40rpx;
			font-size: 20rpx;
			position: relative;
			line-height: 40rpx;
			color: #FFFFFF;
			image {
				width: 150rpx;
				height: 100rpx;
			}
		}
	}
	.qidai {
		width: 100%;
		font-size: 100rpx;
		text-align: center;
	}
</style>