nzhbsr/pages/transaction/cbdetail.vue

<template>
	<view class="content">
		<view class="vheight"></view>
		<view class="top flex">
			<image @click="back()" class="top-icon1" src="../../static/img/cb2.png" mode=""></image>
			<image @click="navTo('/pages/user/cbRecord')" class="top-icon2" src="../../static/img/cb1.png" mode=""></image>
		</view>
		<view class="title">{{ $t('cb.cb') }}</view>
		<view class="type flex" @click="navTo('/pages/transaction/cblist')">
			<view class="type-left">{{ $t('cb.bz') }}</view>
			<view class="type-right">
				<view class="type-name">{{ info.title }}</view>
				<image class="type-icon" src="../../static/icon/user-back.png" mode=""></image>
			</view>
		</view>
		<view class="main">
			<view class="main-title">{{ $t('cb.cbwl') }}</view>
			<view class="main-list">{{ info.czline }}</view>
			<view class="main-title" style="margin-top: 20rpx;">{{ $t('cb.cbdz') }}</view>
			<view class="erweima">
				<tki-qrcode
					:cid="cid"
					ref="qrcode"
					:val="info.czaddress"
					:size="size"
					:unit="unit"
					:background="background"
					:foreground="foreground"
					:pdground="pdground"
					:iconSize="iconSize"
					:lv="lv"
					:onval="onval"
					:loadMake="loadMake"
					:usingComponents="usingComponents"
					@result="qrR"
				/>
			</view>
			<view class="address">{{ info.czaddress }}</view>
			<view class="btn" @click="copy(info.czaddress)">{{ $t('cb.fzdz') }}</view>
		</view>
		<view class="info">
			<view class="info-item red">{{ $t('cb.zxczje') }}：{{ info.czminnum }}{{ info.title }}，{{ $t('cb.xyzxje') }}</view>
			<view class="info-item">{{ $t('cb.qxzzqd') }}</view>
			<view class="info-item">{{ $t('cb.zxczje') }}：{{ info.czminnum }}{{ info.title }}，{{ $t('cb.xyzxje') }}</view>
			<view class="info-item">{{ $t('cb.ndczdz') }}</view>
			<view class="info-item">{{ $t('cb.qwbqrdn') }}</view>
		</view>
		<view class="sr">
			<view class="sr-title">{{ $t('cb.zzje') }}</view>
			<view class="sr-input"><input :placeholder="$t('cb.qsrzzje')" type="number" v-model="num" /></view>
			<view class="sr-title" style="margin-top: 20rpx;">{{ $t('cb.xczzpz') }}</view>
			<view class="sr-image">
				<image :src="image" mode="" class="upload-img" @click.stop="imgsub" v-if="image"></image>
				<image src="../../static/img/add.png" class="upload-img" mode="" v-if="!image" @click.stop="imgsub"></image>
			</view>
			<view class="sr-btn" @click="submit()">{{ $t('cb.tj') }}</view>
		</view>
	</view>
</template>

<script>
import { czpage, upload, paycoin } from '@/api/wallet.js';
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
export default {
	data() {
		return {
			id: '',
			info: '',
			cid: 'cid',
			size: 100,
			unit: '150',
			background: '#FFFFFF',
			foreground: '#000000',
			pdground: '#000000',
			icon: '',
			iconSize: 40,
			lv: 3,
			onval: true,
			loadMake: true,
			usingComponents: true,
			num: '',
			image: '',
			image1: ''
		};
	},
	onLoad(opt) {
		this.id = opt.type;
		this.loadData();
	},
	onShow() {},
	onReachBottom() {},
	onReady() {},
	methods: {
		loadData() {
			czpage({ id: this.id }).then(e => {
				this.info = e.data;
			});
		},
		qrR(res) {
			console.log(res, '123456');
		},
		back() {
			uni.navigateBack();
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		imgsub() {
			console.log(111);
			upload({
				filename: ''
			}).then(data => {
				console.log('data', data);
				this.image = data[0].src;
				this.image1 = data[0].img;
			});
		},
		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'
				});
			}
		},
		submit() {
			console.log(222);
			if (this.num < 0) {
				return this.$api.msg(this.$t('cb.czjebnw'));
			}
			if (!this.image1) {
				return this.$api.msg(this.$t('cb.qcszzpz'));
			}
			paycoin({ cid: this.id, zznum: this.num, payimg: this.image1, coinname: this.info.title }).then(e => {
				this.num = '';
				this.image = '';
				return this.$api.msg(this.$t('cb.tjsqcg'));
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	min-height: 100%;
	height: auto;
	background: #f5f5f5;
}
.vheight {
	height: var(--status-bar-height);
	background: #f5f5f5;
}
.top {
	padding: 20rpx 40rpx;
	.top-icon1 {
		width: 52rpx;
		height: 36rpx;
	}
	.top-icon2 {
		width: 48rpx;
		height: 48rpx;
	}
}
.title {
	padding: 20rpx 20rpx 0;
	font-size: 52rpx;
	font-weight: 500;
}
.type {
	margin: 20rpx auto 0;
	width: 690rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx 20rpx;
	.type-left {
		font-size: 32rpx;
		color: #000;
	}
	.type-right {
		display: flex;
		align-items: center;
		.type-name {
			font-size: 36rpx;
			font-weight: bold;
			color: #fcd535;
			margin-right: 10rpx;
		}
		.type-icon {
			width: 24rpx;
			height: 24rpx;
		}
	}
}
.main {
	margin: 20rpx auto 0;
	width: 690rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx 20rpx;
	.main-title {
		font-size: 32rpx;
		color: #000;
	}
	.main-list {
		margin-top: 20rpx;
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border: 2px solid #fcd535;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #fcd535;
	}
	.erweima {
		margin-top: 40rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.address {
		margin-top: 20rpx;
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		color: #000;
	}
	.btn {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
		border: 2px solid #fcd535;
		font-size: 28rpx;
		color: #fcd535;
		margin: 20rpx auto 0;
	}
}
.info {
	margin: 20rpx auto 0;
	width: 690rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx 20rpx;
	.info-item {
		font-size: 24rpx;
		color: #000;
		margin-bottom: 20rpx;
	}
	.red {
		color: red;
	}
}
.sr {
	margin: 20rpx auto 0;
	width: 690rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx 20rpx;
	.sr-title {
		font-size: 32rpx;
		color: #000;
	}
	.sr-input {
		display: flex;
		align-items: center;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background: #f5f5f5;
		border-radius: 20rpx;
		padding: 0rpx 30rpx;
		input {
			font-size: 28rpx;
			padding-left: 30rpx;
			background: #f5f5f5;
		}
	}
	.sr-image {
		display: flex;
		justify-content: center;
		margin: 20rpx;
		image {
			width: 200rpx;
			height: 200rpx;
		}
	}
	.sr-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 10rpx;
		margin: 20rpx auto 0;
		background: linear-gradient(to left, #eeb80d, #ffe35b);
		font-size: 28rpx;
		color: #000;
	}
}
</style>