dtx_store/pages/account/transfer.vue

<template>
	<view class="transfer">
		<!-- 账户余额 -->
		<view class="transfer-block">
			<view class="unit">DT积分</view>
			<view class="transfer-flex">
				<view class="item ellipsis">
					<label>余额</label>{{balance || '0.00'}}
				</view>
			</view>
		</view>
		<view class="sub-title">
			<text>请认真确认地址及数量，地址错误无法找回</text>
		</view>
		<!-- 转账信息 -->
		<view class="password">
			<view class="group">
				<view class="inputs input-scan">
					<label>接收地址</label>
					<input type="text" placeholder="请输入接收地址" v-model="address" />
					<view class="input-scan-icon" @click="scanCode">
						<uni-icons type="scan" size="22" color="#34CE98"></uni-icons>
					</view>
				</view>
				<view class="inputs">
					<label>转账数量</label>
					<input type="number" placeholder="请输入转账数量" v-model="number" />
				</view>
			</view>
			<view class="group">
				<view class="inputs">
					<label>交易密码</label>
					<input type="password" placeholder="请输入安全密码" v-model="password" />
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="buttons">
			<button type="default" @click="submitTransfer">转账</button>
		</view>
	</view>
</template>

<script>
	import { transfer, submitTransfer } from '@/apis/interfaces/account'
	export default {
		data() {
			return {
				balance		: '0.00',
				address		: '',
				number		: '',
				password	: ''
			}
		},
		onLoad(e){
			if(e.hashAddress) this.address = e.hashAddress
		},
		onShow() {
			uni.showLoading({
				title: '获取账户信息',
			})
			transfer().then(res => {
				let phone = res.mobile
				this.balance = res.balance
				if(!res.has_transfer_password){
					uni.showModal({
						title		: '提示',
						content		: '暂未设置账户支付密码，无法发起转账，请设置后重试',
						cancelText	: '稍后设置',
						confirmText	: '立即设置',
						success		: modalRes => {
							if(modalRes.confirm){
								this.$Router.push({name: 'AccountResetPassword', params: {phone}})
								return
							}
							this.$Router.back()
						}
					})
				}
				uni.hideLoading()
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			// 转账
			submitTransfer(){
				if(this.address === '' || this.number === '' || this.password === ''){
					let messageText
					if(this.address === '') messageText = '请输入接收地址'
					else if(this.number === '') messageText = '请输入转账数量'
					else if(this.password === '') messageText = '请输入支付密码'
					uni.showToast({
						icon: 'none',
						title: messageText
					})
					return
				}
				// 提交转账信息
				submitTransfer({
					addr: this.address,
					amount: this.number,
					transfer_password: this.password
				}).then(res => {
					uni.redirectTo({
						url: './results?hash=' + res.hash + '&number=' + this.amount
					})
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.message
					})
				})
			},
			// 扫码
			scanCode(){
				uni.scanCode({
					scanType: ['qrCode'],
					success: res=> {
						this.address = res.result
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.transfer{
		background: $window-color;
		min-height: 100vh;
		overflow: hidden;
	}
	// 账户余额
	.transfer-block{
		background-color: window-color;
		margin: $margin;
		border-radius: $radius;
		box-shadow: 0 0 4rpx 4rpx rgba($color: $text-color, $alpha: .02);
		background-color: white;
		padding: $padding $padding + 10;
		.unit{
			font-weight: bold;
			font-size: $title-size + 10;
			line-height: 90rpx;
			color: $text-color;
		}
		.transfer-flex{
			display: flex;
			padding: $padding 0;
			border-top: solid 1rpx $border-color;
			.item{
				width: 100%;
				font-size: $title-size-m;
				& > label{
					color: $text-gray;
					padding-right: $padding/2;
				}
			}
		}
	}
	// 提示信息
	.sub-title{
		color: $text-gray;
		text-align: center;
		margin: $margin*2 $margin $margin $margin;
		font-size: $title-size-m;
	}
	// 转账信息
	.password{
		padding: 0 $padding;
		.group{
			margin-top: $margin;
			border-radius: $radius;
			box-shadow: 0 0 4rpx 4rpx rgba($color: $text-color, $alpha: .02);
			background-color: white;
			.inputs{
				padding: $padding $padding + 10;
				border-bottom: solid 1rpx $border-color;
				&:last-child{
					border-bottom: none;
				}
				label{
					color: $text-gray;
					font-size: $title-size-m;
				}
				input{
					height: 70rpx;
					line-height: 70rpx;
					font-size: $title-size;
				}
			}
			.input-scan{
				position: relative;
				padding-right: ($padding*2) + 70;
				.input-scan-icon{
					position: absolute;
					bottom: $padding;
					right: $padding;
					height: 70rpx;
					width: 70rpx;
					line-height: 70rpx;
					text-align: center;
				}
			}
		}
	}
	// 按钮
	.buttons{
		padding: $padding*2 $padding;
		button{
			height: 90rpx;
			line-height: 90rpx;
			background-color: $main-color;
			border-radius: 45rpx;
			color: white;
			font-weight: bold;
			font-size: $title-size;
			&::after{
				display: none;
			}
		}
	}
</style>