hqshop/pages/money/chongzhi.vue

<template>
	<view class="content">
		<view class="trc-tit">
			一、TRC20充值地址
		</view>
		<view class="code-content">
			<tki-qrcode :cid="cid" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background"
				:foreground="foreground" :pdground="pdground" :iconSize="iconSize" :lv="lv" :onval="onval"
				:loadMake="loadMake" :usingComponents="usingComponents" @result="qrR" />
		</view>
		<text style="padding-left: 15rpx;display: inline-block;word-break: break-all;text-align: center;">

		</text>
		<view class="" style="width: 750rpx;text-align: center;">
			{{val}}
		</view>
		<view class="trc-dz flex" style="justify-content: flex-start;align-items: flex-start;">
			<!-- <text class="" style="width: 100rpx;display: inline-block;flex-shrink: 0;">
				地址:
			</text> -->


		</view>
		<view class="copy-btn" @click="comfirm(val)">
			复制地址
		</view>
		<view class="trc-tit" style="margin-top: 50rpx;">
			二、上传支付凭证
		</view>
		<view class="up-img" @click="imgsub">
			<image :src="upimg" mode="" v-if="upimg"></image>
			<image src="../../static/img/add.png" mode="" v-else></image>
		</view>
		<!-- 		<view class="" style="text-align: center;font-size: 28rpx;">
			请输入充值金额
		</view> -->
		<input type="text" v-model="payNum" placeholder="请输入充值金额"
			style="text-align: center;display: block;width: 350rpx;margin:20rpx auto 40rpx;border: 1rpx solid  #d9ad7c;line-height: 70rpx;height: 70rpx;border-radius: 10rpx;">
		<view class="up-btn" @click="upPz">
			提交凭证
		</view>
	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	import {
		upload
	} from '@/api/order.js';
	import {
		upPz,
		getQr,
	} from '@/api/index.js'
	export default {
		comments: {
			tkiQrcode
		},
		data() {
			return {
				cid: 'tki-qrcode-canvas', //canvasId，页面存在多个二维码组件时需设置不同的ID
				size: 300, //生成的二维码大小
				unit: 'upx', //大小单位尺寸
				show: true, //默认使用组件中的image标签显示二维码
				val: '', //要生成的内容
				background: '#ffffff', //二维码背景色
				foreground: '#333333', //二维码前景色
				pdground: '#333333', //二维码角标色
				icon: '', //二维码图标URL（必须是本地图片，网络图需要先下载至本地）
				iconSize: 40, //二维码图标大小
				lv: 3, //容错级别
				onval: true, //监听val值变化自动重新生成二维码
				loadMake: true, //组件初始化完成后自动生成二维码，val需要有值
				usingComponents: false, //是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
				showLoading: false, //是否显示loading
				loadingText: '二维码生成中', //loading文字
				src: '', // 二维码生成后的图片地址或base64
				ratio: 1, //页面比例用于计算
				ctxSrc: '', //要显示的图片
				loading: true, //是否载入图片中
				canHeight: '', //画布高度
				canWeidth: '', //画布宽度
				upimg: '', //凭证
				payNum: '', //充值金额
				loading: false
			}
		},
		onLoad() {
			this.getQr()
		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			// 上传图片
			imgsub() {
				console.log('imgsub');
				upload({
					filename: ''
				}).then(data => {
					this.upimg = data[0].url;
					console.log(data[0].url)
				});
			},
			comfirm(text) {
				console.log(text);
				const result = this.uniCopy(text);
				if (result === false) {
					uni.showToast({
						title: '不支持'
					});
				} else {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
				this.$refs.popupkf.close();
			},
			uniCopy(content) {
				/**
				 * 小程序端 和 app端的复制逻辑
				 */
				//#ifndef H5
				uni.setClipboardData({
					data: content,
					success: function() {
						console.log('success');
						return true;
					}
				});
				//#endif

				/**
				 * H5端的复制逻辑
				 */
				// #ifdef H5
				if (!document.queryCommandSupported('copy')) {
					//为了兼容有些浏览器 queryCommandSupported 的判断
					// 不支持
					return false;
				}
				let textarea = document.createElement('textarea');
				textarea.value = content;
				textarea.readOnly = 'readOnly';
				document.body.appendChild(textarea);
				textarea.select(); // 选择对象
				textarea.setSelectionRange(0, content.length); //核心
				let result = document.execCommand('copy'); // 执行浏览器复制命令
				textarea.remove();
				return result;
				// #endif
			},
			// 获取地址
			getQr() {
				let obj = this
				getQr().then(res => {
					console.log(res)
					obj.val = res.data[0]
				})

			},
			qrR() {

			},
			// 上传凭证
			upPz() {
				let obj = this
				if (obj.upimg == '') {
					return obj.$api.msg('请选择要上传的凭证')
				}
				if (obj.payNum == '') {
					return obj.$api.msg('请输入充值金额')
				}
				if (obj.loading) {
					return
				}
				obj.loading = true
				upPz({
					image: obj.upimg,
					money: obj.payNum
				}).then(res => {
					console.log(res)
					uni.showToast({
						title: '提交成功',
						duration: 2000
					});
					obj.loading = false
				})

			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
		height: 100%;
	}

	.copy-btn {
		width: 200rpx;
		border-radius: 50rpx;
		height: 50rpx;
		border: 1rpx solid #eccca2;
		margin: auto;
		text-align: center;
		color: #d9ad7c;
		font-size: 32rpx;
		line-height: 50rpx;
	}

	.content {
		background-color: #fff;
	}

	.code-content {
		width: 300rpx;
		height: 300rpx;
		// background-color: red;
		margin: 0 auto;
	}

	.trc-tit {
		padding: 30rpx 0 30rpx 20rpx;
		text-align: left;
		font-size: 38rpx;
		font-weight: bold;
	}

	.trc-dz {
		// margin: auto;
		padding: 0 20rpx;
		// width: 750rpx;
		text-align: justify;
		// border: 1px #f1d4ab solid;
		line-height: 50rpx;
		font-size: 32rpx;
		padding-top: 20rpx;
	}

	.up-btn {
		width: 200rpx;
		border-radius: 50rpx;
		height: 50rpx;
		border: 1rpx solid #eccca2;
		margin: auto;
		text-align: center;
		color: #fff;
		background-color: #eccca2;
		font-size: 32rpx;
		line-height: 50rpx;
	}

	.up-img {
		width: 300rpx;
		height: 300rpx;
		margin: 50rpx auto 60rpx;

		image {
			width: 300rpx;
			height: 300rpx;

		}
	}
</style>