lnyk/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" v-if="isShow">
				<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> -->
			<view class="way-wrapper">
				<view class="way" v-for="item in way" :key="item" @click="goway(item)">
					{{item}}
				</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: '',
			way: [],

			num: '',
			password: '',
			keysAddr: '',
			showBtn: false,
			idx: 1,
			isShow: false,
			cid: 'cid',
			size: 150,
			unit: '150',
			background: '#FFFFFF',
			foreground: '#000000',
			pdground: '#000000',
			icon: '',
			iconSize: 40,
			lv: 3,
			onval: true,
			loadMake: true,
			usingComponents: true,
			wayAddress: []
		};
	},
	onLoad(option) {
		if (option.name) {
			this.way = option.way.split(",")
			this.charge = option.charge;
			this.name = option.name;
			this.logo = option.logo;
			this.code = option.code;
			this.mark = option.mark;
			this.ids = option.ids;
			this.keysAddr = option.keysAddr;
			this.qr = option._address_qr;
			this.address = option.address
			this.ids = option.ids;
			this.addr = option.keysAddr;
			this.wayAddress = JSON.parse(option.waypath)
			if (this.addr == null || this.addr == '') {
				this.showBtn = true;
			}
		}
		this.moneyType();
	},
	onShow() {},
	methods: {
		// 所有币种
		async moneyType() {
			let obj = this;
			moneyType({}).then(({ data }) => {
				
				obj.moneyTypeList = data;
				console.log(obj.moneyTypeList)
				if (obj.logo == '') {
					// obj.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.way = obj.moneyTypeList[0].way.split(",")
					// if(obj.way[0] === "NO"){
					// 	obj.address = ''
					// }else {
					// 	obj.address = obj.moneyTypeList[0].wallet['address'+obj.way[0]]
					// }
					// obj.qr = obj.moneyTypeList[0]._address_qr;
					// obj.mark = obj.moneyTypeList[0].mark;
					// obj.addr = obj.moneyTypeList[0].wallet.address;
					// if (obj.addr == null || obj.addr == '') {
					// 	obj.showBtn = true;
					// }
					// obj.ids = obj.moneyTypeList[0].wallet.id;
					for(let i = 0 ; i < obj.moneyTypeList.length ; i++){
						if(obj.moneyTypeList[i].way !== 'NO') {
							console.log(obj.moneyTypeList[i].way)
							obj.charge = obj.moneyTypeList[i].charge;
							obj.logo = obj.moneyTypeList[i].LOGO;
							obj.name = obj.moneyTypeList[i].name;
							obj.code = obj.moneyTypeList[i].code;
							obj.money = obj.moneyTypeList[i].price;
							obj.way = obj.moneyTypeList[i].way.split(",")
							// if(obj.way[i] === "NO"){
							// 	obj.address = ''
							// }else {
							// 	obj.address = obj.moneyTypeList[i].wallet['address'+obj.way[0]]
							// }
							obj.address = obj.moneyTypeList[i].wallet['address_'+obj.way[0]]
							console.log(obj.address)
							obj.qr = obj.moneyTypeList[i]._address_qr;
							console.log(obj.qr)
							obj.mark = obj.moneyTypeList[i].mark;
							obj.addr = obj.moneyTypeList[i].wallet.address;
							if (obj.addr == null || obj.addr == '') {
								obj.showBtn = true;
							}
							obj.ids = obj.moneyTypeList[i].wallet.id;
							return
						}
					}
				}
			});
		},
		//单张上传图片
		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) {
			console.log("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;
			this.way = options.way.split(",")
			console.log('this.way-----',this.way)
			if(this.way[0] === "NO"){
				this.wayAddress = []
			}else {
				this.way.forEach((item)=> {
					this.wayAddress[item] = options.wallet['address_'+item]
				})
				this.address = this.wayAddress[this.way[0]]
				console.log(this.wayAddress)
			}
			if (options.name == 'USDT') {
				this.isShow = true;
			} else {
				this.isShow = false;
			}
		},
		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();
		},
		goway(data) {
			this.address = this.wayAddress[data]
			// this.address = 'www.baudu.com'
		}
	}
};
</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;
}
.way-wrapper {
	width: 90%;
	padding: 0 5%;
	display: flex;
	height: 40rpx;
	margin-bottom: 60rpx;
	justify-content: start;
	.way {
		width: 120rpx;
		height: 75rpx;
		line-height: 75rpx;
		text-align: center;
		border: 1px solid #7c90e3;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		color: #7c90e3;
		background-color: #eff2ff;
		font-size: 36rpx;
		font-weight: bold;
		margin-right: 30rpx;
	}
}

</style>