uav-uniapp-demo-24-8-18/pages/purse/purse.vue

<!-- 充值界面 -->
<template>
	<view class="purse bx">
		<!-- <navbar :leftClick="leftClick" :title="$t('page.purse.recharge')"></navbar> -->

		<!-- 用户余额信息 -->
		<view class="user-money content">
			<view class="title">Balance</view>
			<view class="money">
				<view class="money-unit">{{ $t('page.purse.unit') }}</view>
				<view class="money-detail">{{ money }}</view>
			</view>
		</view>
		
		<view class="purse-input content">
			<view class="title">Recharge address</view>
			<view class="text">TMzqKBCtFdjzCk293hLS4MgMJbppxUEhp8</view>
			<view @click="copy('TMzqKBCtFdjzCk293hLS4MgMJbppxUEhp8')" class="btn">copy</view>
		</view>
		
		<view class="purse-input content">
			<view class="title">Recharge amount</view>
			<input type="text" placeholder="Please enter recharge amout" />
		</view>
		
		<view class="purse-input content">
			<view class="title">Upload payment screenshot</view>
			<image :src="form.image"
			v-if="form.image" mode=""
			@click="uploadImage"></image>
			
			<view class="image" v-else
			@click="uploadImage">
				<u-icon name="plus"></u-icon>
			</view>
		</view>
		
		<!-- 按钮 -->
		<view class="submit-btn content">I have completed the recharge</view>
		
		<view class="steps content">
			<view class="steps-title">The steps</view>
			<view class="steps-content">
				<view>1. Please copy the TRC-20 wallet address for payment in this mall.</view>
				<view>2. Make the transfer after verification. If I make a mistake, this mall will not bear your loss.</view>
				<view>3. When your payment is successful, please upload the payment voucher.</view>
				<view>4. When you are done with this, click: I have completed the payment.</view>
				<view>5. When you encounter any problems, be sure to contact our online customer service in time to help you solve them.</view>
			</view>
		</view>
		
		<!-- 客服列表 -->
		<serviceList :show="showService" :serverList="serverList" @close="closeServiceList"></serviceList>
		
		<sTabbar select="100" />

	</view>
</template>

<script>
	import navbar from '@/components/base/m-navbar.vue'
	import serviceList from '@/components/serviceList/serviceList.vue';
	import sTabbar from '@/components/base/tabBar.vue'
	
	export default {
		components: {
			navbar,
			serviceList,
			sTabbar
		},
		data() {
			return {
				active : 0,
				money : '',
				form : {
					id : '',
					image : '',
					address : ''
				},
				serverList : [],
				showService : false
			}
		},
		onShow() {
			this.getUserInfo()
			this.forgetPass()
		},
		methods: {
			// leftClick() {
			// 	if(this.$route.query.type){
			// 		return uni.navigateTo({
			// 			url: '/pages/home/home'
			// 		})
			// 	}else{
			// 		uni.navigateTo({
			// 			url: '/pages/center/center'
			// 		})
			// 	}
			// },
			
			uploadImage(){
				let self = this
				uni.chooseImage({
					success(res) {
						self.form.image = res.tempFilePaths[0]
					}
				})
			},
			
			//获取用户信息
			getUserInfo(){
				this.request('userInfo').then(res => {
					if(res.code == 200){
						this.userInfo = res.result.userInfo
						this.money = res.result.userInfo.money
					}
				})
			},
			
			//充值
			recharge(){
				this.$play()
				this.request('recharge2',{},this.form).then(res => {
					if(res.code == 200){
						uni.$u.toast(this.$t('page.purse.success'))
						this.cleanForm()
						this.revealServiceList()
						this.getUserInfo()		//刷新用户信息(更新用户余额)
					}
				})
			},
			
			//显示客服列表
			revealServiceList(){
				this.$play()
				this.showService = true;
			},
			
			//关闭客服列表
			closeServiceList(){
				this.showService = false;
			},
			
			//忘记密码(获取客服列表)
			forgetPass(){
				this.request('forgetPass').then(res => {
					if(res.code == 200){
						this.serverList = res.result
					}
				})
			},
			
			//清空表单数据
			cleanForm(){
				this.form = {
					
				}
			},
			
			//复制内容
			copy(content) {
				if(!content){
					return uni.$u.toast(this.$t('page.purse.addressEmpty'))
				}
				uni.setClipboardData({
					data: content,
					success: () => {
						uni.showToast({
							title: this.$t('page.purse.copySuccess'),
							icon: 'none'
						})
					}
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.purse {
		width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		background-size: 100%;
		background-repeat: no-repeat;
		background: #f6f6f6;

		.content {
			width: 96%;
			margin: 0 auto;
		}

		.user-money {
			background: $uni-bg-color-app;
			margin: 20rpx auto 30rpx auto;
			border: 4rpx solid #D3EA5E;
			border: 4rpx solid $uni-bg-color-app;
			padding: 60rpx 0rpx;
			font-size: 36rpx;
			color: $uni-bg-color;
			border-top-right-radius: 60rpx;
			
			.title,
			.money {
				display: flex;
				align-items: flex-end;
				height: 60rpx;
				font-size: 28rpx;
				color: hsla(0, 0%, 100%, .8);
				box-sizing: border-box;
				padding-left: 30rpx;
				
				.money-unit {
					margin-right: 15rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: white;
				}
				
				.money-detail{
					font-size: 50rpx;
					font-weight: bold;
					color: white;
				}
			}
		}
		
		.purse-input{
			background: white;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 15rpx;
			box-sizing: border-box;
			
			.title{
				padding-bottom: 30rpx;
			}
			
			.text{}
			
			.btn{
				display: flex;
				align-items: center;
				justify-content: center;
				background: black;
				color: white;
				height: 60rpx;
				border-radius: 100rpx;
				font-size: 30rpx;
				margin-top: 30rpx;
			}
			
			.image{
				width: 150rpx;
				height: 150rpx;
				border: 1px solid #333;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 10rpx;
			}
		}
		
		.submit-btn{
			background: rgb(0, 208, 234);
			height: 80rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 30rpx;
		}
		
		.steps {
			width: 90%;
			margin: 0rpx auto;
			padding-top: 30rpx;
		
			.steps-title {
				font-size: 30rpx;
			}
		
			.steps-content {
				color: #8e8e98;
				font-size: 30rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>