BiKing/pages/content/top-up.vue

<template>
	<view class="">
		<!-- 头部 -->
		<headContent>
			<template #left>
				<reverse-back path="pages/content/top-up" />
			</template>
			<template #content>
				<view class="haed-title">
					充币
				</view>
			</template>
			<template #right>
				<view @click.stop="lookRecord()" class="head-record iconfont">&#xe642;</view>
			</template>
		</headContent>

		<view class="currency-box">
			<view class="currency-item">
				<view class="currency-info">
					<template v-if="biInfo">
						<image class="currency-icon" :src="biInfo.logo" mode="aspectFit"></image>
						<text class="currency-name">{{ biInfo.name|| biInfo.currency_name }}</text>
					</template>
				</view>
				<view class="select-currency" @click.stop="selectCurrency">
					<text>请选择币种</text>
					<text class="iconfont">&#xe8b5;</text>
				</view>
			</view>
			<view class="link-name" v-if="linkVal">
				<view class="link-lable">链名称</view>
				<view class="link-btns">
					<text @click.stop="setCode('erc20')"
						:class="['link-btn' , linkLable === 'erc20' ? 'active-link-btn' : '']">ERC20</text>
					<text @click.stop="setCode('trc20')"
						:class="['link-btn' , linkLable === 'trc20' ? 'active-link-btn' : '']">TRC20</text>
				</view>
			</view>

			<view class="currency-code">
				<!-- https://ext.dcloud.net.cn/plugin?id=39 -->
				<tki-qrcode ref="qrcode" :size="350" :showLoading="false" :val="val" />


			</view>

			<view class="currency-btn" @click.stop="saveCode()">保存二维码</view>
			<view class="link-val">
				{{ val }}
			</view>
			<view class="currency-btn currency-copy" @click.stop="setCopy(val)">复制地址</view>
		</view>
	</view>
</template>

<script>
	import {
		Api_getTopUp
	} from "@/api/index.js"
	import reverseBack from "@/components/headModules/reverse-back.vue"
	export default {
		name: 'top-up',
		components: {
			reverseBack
		},
		data() {
			return {
				biInfo: null,
				linkLable: 'erc20',
				val: '',
				linkVal: null
			};
		},
		onLoad(opt) {
			const key = opt?.key || '';
			this.biInfo = this.$getStorageSync('select')[key];
			this.getTopUp()
		},
		methods: {
			setBiInfo(e){
				console.log('setBiInfo' , e)
				this.biInfo = e;
				this.getTopUp()
			},
			getTopUp() {
				Api_getTopUp({
					currency: this.biInfo.currency_id || this.biInfo.id
				}).then(res => {
					if (this.biInfo.id === 3) {
						this.linkVal = res;
						this.val = null
					} else {
						this.val = res;
						this.linkVal = null
					}
					this.makeCode()
				}).catch(err => {

				}).finally(() => {

				})
			},
			setCode(item) {
				this.linkLable = item;
				this.val = this.linkVal[item]
				this.makeCode()
			},
			makeCode() {
				this.$nextTick(() => {
					this.$refs.qrcode._makeCode()
				})
			},
			saveCode() {
				// #ifndef H5
				this.$nextTick(() => {
					this.$refs.qrcode._saveCode()
				})
				// #endif
			},
			setCopy(val) {
				if (val) {
					uni.setClipboardData({
						data: val,
						success: function() {
							uni.showToast({
								icon: "none",
								title: '复制成功'
							})
						}
					});
				}
			},
			// pages/content/top-up
			selectCurrency() {
				const pages = getCurrentPages()
				console.log('pages = ', pages)
				if (pages.length > 1 && pages[pages.length - 1].route === 'pages/content/select-currency') {
					uni.navigateBack()
				} else {
					uni.navigateTo({
						url: "/pages/content/select-currency?type=recharge"
					});
				}

			},
			// 查看充值记录
			lookRecord() {
				const pages = getCurrentPages()
				if (pages.length > 2 && pages[pages.length - 2].route === 'pages/content/charge-record') {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.navigateTo({
						url: "/pages/content/charge-record"
					});
				};
			}
		}
	}
</script>
<style>
	page {
		background-color: #F6F7FB;
	}
</style>
<style lang="scss" scoped>
	.head-record {
		font-size: 60rpx;
	}

	.currency-box {
		width: 100%;
		padding: 30rpx 40rpx;

		.currency-item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.currency-info {
				flex-shrink: 0;
				display: flex;
				align-items: center;

				.currency-icon {
					width: 46rpx;
					height: 46rpx;
					flex-shrink: 0;
				}

				.currency-name {
					font-size: 28rpx;
					padding-left: 7px;
					font-weight: 700;
				}
			}

			.select-currency {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				font-size: 24rpx;

				.iconfont {
					color: #ccc;
					transform: rotateY(180deg);
				}
			}

		}

		.currency-code {
			margin: 36rpx auto 0;
			width: 350rpx;
			height: 350rpx;
			background-color: #fff;
		}

		.currency-btn {
			width: 360rpx;
			height: 80rpx;
			background-color: $Theme-Color;
			margin: 54rpx auto 0;
			border-radius: 6rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 30rpx;
			color: #fff;
		}

		.link-val {
			width: 100%;
			min-height: 103rpx;
			padding: 35rpx 0;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #1a1a1a;
			line-height: 33rpx;

		}

		.currency-copy {
			color: $Theme-Color;
			background-color: #fff;
			margin: 0 auto;
			border: 1rpx solid $Theme-Color;
			line-height: 78rpx;
		}

	}

	.link-name {
		width: 100%;
		padding-top: 40rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;

		.link-lable {
			// width: 72px;
			// height: 33px;
			color: #1a1a1a;
			line-height: 1.2;
		}

		.link-btns {
			width: 100%;
			padding-top: 16rpx;


			.link-btn {
				display: inline-block;
				width: 180rpx;
				height: 72rpx;
				background: #f6f5f3;
				border-radius: 8px;
				text-align: center;
				line-height: 70rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				border-radius: 8rpx;
				border: 1rpx solid #f6f5f3;

				&:nth-child(n + 2) {
					margin-left: 20rpx;
				}
			}

			.active-link-btn {
				background: #ffffff;
				border-color: #05c175;
				color: #FFBA6A;
			}
		}

	}

	// <view class="link-name">
	// 	<view class="link-lable">链名称</view>
	// 	<view class="link-btns">
	// 		<text class="link-btn">ERC20</text>
	// 		<text class="link-btn">TRC20</text>
	// 	</view>
	// </view>
</style>