<template>
	<v-page>
		<v-header :title="$t('service.a0')"></v-header>
		<view class="layout-main" style="background-color: #121212;color: #fff;padding: 0px 15px !important;">
			<view class="title1">{{$t('service.a1')}}</view>
			<view class="title2">{{$t('service.a2')}}</view>
			<!-- <view class="title3">{{$t('service.a3')}}</view> -->
			<!-- 存入金额 -->
			<!-- <v-input placeholder="0.000" v-model="form.amount" class="fn-20" style="background-color: #242424;">
			  <template #right>
				<view class="right_txt">EGP</view>
			  </template>
			</v-input> -->
			<!-- 存入数量 -->
			<view class="title3">{{$t('service.a4')}}</view>
			<v-input placeholder="0" v-model="form.amount1" class="fn-20" style="border: 1px dashed #414141;background-color: #242424;">
			  <template #right>
				<view class="right_txt" style="color: #d2de8e;">USDT</view>
			  </template>
			</v-input>
			<!-- 参考汇率 -->
			<!-- <view class="flex-text">
				<view>{{$t('service.a5')}}</view>
				<view>1 EGP ≈ 0.0211 USDT</view>
			</view> -->
			<view class="banking_box">
				<!-- <view>{{$t('service.a6')}}</view>
				<view class="banking_title2">{{$t('service.a7')}}<span class="banking_span">EGP</span>{{$t('service.a8')}}</view> -->
				<view>
					<view class="banking_box1">
						<view class="banking_border"></view>
						<view class="banking_txt">E-Banking</view>
					</view>
					<view class="banking_box2">
						<view style="color: #717171;">{{$t('service.a9')}}<span style="color: #fff;">**** ****</span></view>
					</view>
					<view class="banking_box2">
						<view style="color: #717171;">{{$t('service.a10')}}<span style="color: #fff;">********</span></view>
					</view>
					<view class="banking_box2">
						<view style="color: #717171;">{{$t('service.a11')}}<span style="color: #fff;">********</span></view>
					</view>
				</view>
				<view class="banking_title3">{{$t('service.a12')}}</view>
			</view>
			<view style="margin: 20rpx 0rpx;font-size: 30rpx;">{{$t('service.a13')}}</view>
			<view @click="getFile('images')" class="upload-box d-flex justify-center align-center rounded-sm  bg-panel-3 box-shadow"
			 style="width: 200rpx;height: 200rpx;">
				<van-icon v-if="!form.images" class="color-light fn-30" name="plus"/>
				<image v-else :src="form.images" mode="widthFix" style="width: 200rpx;">
			</view>
			<view style="margin-top: 15px;margin-bottom: 200rpx;">* {{$t('service.a14')}}</view>
		</view>
		<view class="bot w-max bg-panel-3 p-lg box-size" style="background-color: #121212;">
			<van-button class="green w-max m-y-md rounded-xs" block @click="toDraw">{{$t('service.a15')}}</van-button>
		</view>
		<van-popup :show="show" @close="show=false" closeable close-on-popstate>
			<view style="padding: 30rpx 60rpx 0px 60rpx;width: 550rpx;">
				<view style="text-align: center;"><image src="@/assets/img/home/service2.png" mode="widthFix" style="width: 100rpx;"></image></view>
				<view style="text-align: center;color: #fff;margin: 30rpx 0px;">{{$t('service.a16')}}</view>
				<view style="display: flex;justify-content: center;margin-bottom: 20rpx;text-align: center;">
					{{$t('service.a17')}}{{$t('common.email')}}: sevice@bigtcoins.com
					<!-- <van-button class="green1 m-y-md rounded-xs" style="margin-right: 10rpx;" @click="toservice">{{$t('service.a17')}} 1</van-button> -->
					<!-- <van-button class="green1 m-y-md rounded-xs" style="margin-left: 10rpx;" @click="toservice">{{$t('service.a17')}} 2</van-button> -->
				</view>
			</view>
		</van-popup>
	</v-page>
</template>

<script>
	import Member from "@/api/member";
	export default {
		data() {
			return {
				form: {
				  images: '',
				  amount:'',
				  amount1:''
				},
				show: false
			}
		},
		methods: {
			getFile(name) {
			  this.$getFile({count:9}).then((res) => {
			    this.upLoadImg(res, name);
			  })
			},
			// 上传图片
			upLoadImg(chooseImageRes, name) {
			  Member.uploadImage(chooseImageRes).then((res) => {
			    this.form[name] = res.data.url;
			    this.$toast.success(this.$t('auth.c1'));
			  });
			},
			toDraw(){
				this.show = true;
			},
			toservice(){
				uni.navigateTo({
					url:'/pages/oncs/onservice'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.title1{
	margin-top: 50rpx;
	font-weight: bold;
	font-size: 45rpx;
}
.title2{
	margin-top: 10rpx;
	font-weight: bold;
}
.title3{
	margin-top: 40rpx;
	margin-bottom: 20rpx;
	font-weight: bold;
	color: #6e6c6d;
}
.right_txt{
	height: 80rpx;
	font-size: 30rpx;
	line-height: 80rpx;
	padding-right: 20rpx;
	background-color: #242424;
	border-radius: 0px 5px 5px 0px;
}
::v-deep uni-input{
	border-radius: 5px 0px 0px 5px;
}
.flex-text{
	display: flex;
	color: #6e6c6d;
	font-size: 24rpx;
	justify-content: space-between;
	margin-top: 10rpx;
}
.banking_box{
	margin-top: 45rpx;
	border-radius: 10rpx;
	padding: 30rpx 20rpx;
	background-color: #202020;
	
	.banking_title2{
		margin-top: 20rpx;
		.banking_span{
			color: #d2de8e;
			font-weight: bold;
			padding-left: 20rpx;
		}
	}
	
	.banking_box1{
		display: flex;
		// margin-top: 40rpx;
		.banking_border{
			height: 10px;
			margin-top: 10rpx;
			border: 1px solid #5479c2;
		}
		.banking_txt{
			font-size: 32rpx;
			margin-left: 10rpx;
		}
	}
	
	.banking_box2{
		display: flex;
		margin-top: 20rpx;
		justify-content: space-between;
	}
	
	.banking_title3{
		font-size: 26rpx;
		margin-top: 50rpx;
	}
}
.bot {
	position: fixed;
	bottom: 0;
}
.green{
	::v-deep uni-button {
		background: #abbb62;
		border:none;
		border-radius:5px;
	}
	::v-deep .van-button__text{
		color: #000!important;
	}
}
.green1{
	::v-deep uni-button {
		background: #e7fa93;
		border:none;
		border-radius:5px;
		padding: 0px 60rpx;
	}
	::v-deep .van-button__text{
		color: #000!important;
	}
}
</style>
