nzhbsr/pages/transaction/tbdetail.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/tbRecord')" class="top-icon2" src="../../static/img/cb1.png" mode=""></image>
		</view>
		<view class="title">{{ $t('tb.tb') }}</view>
		<view class="type flex" @click="navTo('/pages/transaction/tblist')">
			<view class="type-left">{{ $t('tb.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('tb.tbwl') }}</view>
			<view class="main-list">{{ info.czline }}</view>
			<view class="main-title" style="margin-top: 20rpx;">{{ $t('tb.tbdz') }}</view>
			<view class="sr-input"><input :placeholder="$t('tb.qsrtbdz')" type="text" v-model="address" /></view>
			<view class="sr-sl flex">
				<view class="sr-title">{{ $t('tb.tbsl') }}</view>
				<view class="sr-num" v-if="info">{{ $t('tb.ky') }} {{ money }} {{ info.name.toLocaleUpperCase() }}</view>
			</view>
			<view class="sr-input flex">
				<input :placeholder="$t('tb.qsrtbsl')" type="number" v-model="num" />
				<view class="main-type-box">
					<view class="main-type" v-if="info">{{ info.name.toLocaleUpperCase() }}</view>
					<view class="all" @click="qb()">{{ $t('tb.qb') }}</view>
				</view>
			</view>
			<view class="sr-btn" @click="submit()">{{ $t('tb.tj') }}</view>
			<view class="sr-tip flex" v-if="num">
				<view class="sr-tip-item">{{ $t('tb.sjdz') }}</view>
				<view class="sr-tip-item" v-if="info.sxftype == 1">{{ num * 1 * (1 - (info.txsxf * 1) / 100) }}</view>
				<view class="sr-tip-item" v-if="info.sxftype == 2">{{ num * 1 - info.txsxf_n * 1 }}</view>
			</view>
		</view>
		<view class="info">
			<view class="info-item red">
				{{ $t('tb.tbkc') }}{{ info.sxftype == 1 ? info.txsxf + '%' : info.txsxf_n + info.title }}{{ $t('tb.sxfsxt') }}：{{ info.txminnum }}{{ info.title }}，{{
					$t('tb.wyzxjed')
				}}
			</view>
			<view class="info-item">{{ $t('tb.wbzzjaq') }}</view>
			<view class="info-item">{{ $t('cb.qwbqrdn') }}</view>
		</view>
	</view>
</template>

<script>
import { txpage, tbhandle } 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: '',
			address: '',
			num: '',
			money: ''
		};
	},
	onLoad(opt) {
		uni.setNavigationBarTitle({ title: this.$t('tb.tbxq') });
		this.id = opt.type;
		this.loadData();
	},
	onShow() {},
	onReachBottom() {},
	onReady() {},
	methods: {
		loadData() {
			txpage({ id: this.id }).then(({ data }) => {
				this.info = data.info;
				this.money = data.money;
			});
		},
		qrR(res) {
			console.log(res, '123456');
		},
		back() {
			uni.navigateBack();
		},
		qb() {
			this.num = this.money;
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		submit() {
			console.log(222);
			if (this.num < 0) {
				return this.$api.msg(this.$t('tbslbnw'));
			}
			if (!this.address) {
				return this.$api.msg(this.$t('qsrscdz'));
			}
			tbhandle({ id: this.id, num: this.num, address: this.address }).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);
}
.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;
	}
	.sr-input {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background: #f5f5f5;
		border-radius: 20rpx;
		padding: 0rpx 30rpx;
		input {
			width: 292rpx;
			font-size: 28rpx;
			padding-left: 30rpx;
			background: #f5f5f5;
		}
	}
	.sr-sl {
		margin-top: 20rpx;
		.sr-num {
			color: #707a8a;
			font-size: 24rpx;
		}
	}
	.main-type-box {
		display: flex;
		align-items: center;
		.main-type {
			font-size: 28rpx;
			color: #707a8a;
			margin-right: 20rpx;
		}
		.all {
			font-size: 28rpx;
			color: #707a8a;
		}
	}
	.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;
	}
	.sr-tip {
		margin-top: 20rpx;
		.sr-tip-item {
			font-size: 24rpx;
			color: #707a8a;
		}
	}
}
.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;
	}
}
</style>