wwbsr/pages/assets/recharge.vue

<template>
	<view class="layout-page bg-panel-1" :style="themeStyle">
		<v-header>
			<template #title>
				<span class="color-theme-1 m-r-xs">{{coin}}</span>
				{{$t('assets.e5')}}

			</template>
		</v-header>
		<view class="layout-main p-x-lg">
			<!-- <van-tabs :ellipsis="false" :border="false" :active="tab" @change="changeTab">
				<van-tab class="height-max" :title="$t('assets.g1')"></van-tab>
				<van-tab class="height-max" :title="$t('assets.g3')"></van-tab>
				<van-tab class="height-max" :title="$t('assets.g2')"></van-tab>
			</van-tabs> -->
			<block v-if="tab==0">
				<view class="coin p-md d-flex justify-between bg-panel-3 m-y-md rounded-md box-shadow"
					>
					<view class="fn-lg color-light">{{coin}}</view>
					<view>
						<!-- <van-icon name="arrow" /> -->
					</view>
				</view>
				<view class="m-y-md rounded-md overflow-hidden">
					<view class="bg-panel-3 rounded-md box-shadow">

						<view class="d-flex  justify-center align-center border-b p-x-md p-y-xs color-light"
							v-if="coin=='USDT'">
							<view class="group d-flex fn-12 color-light">

								<!-- <view class="rounded-md color-plain p-x-sm p-y-xs  m-r-sm" size="mini"
									@click="changeRechargeType(2)"
									:class="rechargeType==2?'bg-gradient-green':'bg-gray-7'">
									ERC20</view>

								<view class="rounded-md color-plain  p-x-sm p-y-xs m-r-sm"
									:class="rechargeType==1?'bg-gradient-green':'bg-gray-7'" size="mini"
									@click="changeRechargeType(1)">OMNI</view> -->

								<view class="rounded-md color-plain  p-x-sm p-y-xs m-r-sm" size="mini"
									@click="changeRechargeType(3)"
									:class="rechargeType==3?'bg-gradient-green':'bg-gray-7'">
									TRC20</view>
							</view>
						</view>
						<view class="p-t-md  p-b-md ">
							<view class="fn-center">
								<v-qr v-if="form.address" class="qr-box" :text="form.address||' '"></v-qr>
							</view>
							<view class="tips fn-center color-light m-y-xs">{{$t('assets.e6')}}</view>
						</view>
					</view>
					<view class="info m-t-md p-xs bg-panel-3 rounded-md box-shadow">
						<view class="address">
							<view class="d-flex align-center justify-between">
								<view class="border-r address-txt flex-fill color-light fn-12 fn-center">
									{{form.address}}
								</view>
							</view>
						</view>
					</view>
					<view class="m-b-lg m-t-lg">
						<v-button type="yellow" @click="$copy(form.address,$t('common.a1'))" block
							class="w-max rounded-md" key="loginbtn">
							<text class="color-light" style="color:#2c2c2c">{{$t('assets.g4')}}</text>
							<i class="iconfont" style="color:#2c2c2c;font-size: 34rpx;">&#xe706;</i>
						</v-button>
					</view>
					<view class="m-y-md bg-panel-3 rounded-md box-shadow">
						<ul class=" p-xs fn-sm rounded-md m-y-xs">
							<li>·{{$t('assets.f0')}}{{$t('assets.f1',{num:10,name: coin })}}</li>
							<li>·{{$t('assets.f3',{name:coin})}}</li>
						</ul>
					</view>
				</view>
				<view class=" m-b-lg" v-if="list.length">
					<view class="title d-flex justify-between  p-y-xs align-center color-light">
						<span class="fn-lg">{{$t('assets.f4')}}</span>
					</view>
					<view class="">
						<table class="w-max">
							<thead class="p-x-md">
								<tr class="fn-sm p-x-md ">
									<th class=" p-b-md fn-left p-l-md">{{$t('assets.c9')}}</th>
									<th class=" p-b-md fn-left">{{$t('assets.d0')}}</th>
									<th class=" p-b-md fn-right p-r-md">{{$t('assets.c0')}}</th>
								</tr>
							</thead>
							<tbody>
								<tr class="color-light trChange p-x-md" v-for="(item) in list" :key="item.id">
									<td class="p-y-xs p-l-md rounded-tl-sm rounded-bl-sm" v-if="item.created_at">{{$date(item.created_at)}}
									</td>
									<td>
										<view v-if="item.status==0">{{$t('assets.d1')}}</view>
										<view v-if="item.status==1" class="color-buy">{{$t('assets.d2')}}</view>
										<view v-if="item.status==2" class="color-sell">{{$t('assets.d3')}}</view>
									</td>
									<td class="fn-right p-r-md rounded-tr-sm rounded-br-sm">
										{{item.amount}}
										<span class="color-default">({{item.coin_name}})</span>
									</td>
								</tr>
								<tr v-if="loadMore">
									<td colspan="3" class="fn-center p-xs link-active" @click="more">{{$t('assets.d4')}}
									</td>
								</tr>
							</tbody>
						</table>
					</view>
				</view>
			</block>

			<block v-if="tab==1">
				<view class="coin p-md d-flex justify-between bg-panel-3 m-y-md rounded-md box-shadow"
					@click="fiatListShow=true">
					<view class="fn-lg color-light">{{fiat}}</view>
					<view>
						<van-icon name="arrow" />
					</view>
				</view>
				<view>
					<view class="uni-padding-wrap">
						<view class="uni-title">{{$t('add.a1')}}</view>
						<radio-group class="p-t-md" @change="radioChange">
							<label class="radio m-r-lg">
								<radio  :checked="type==1" value="1" color="#f7427b" style="transform: scale(.7);"/>Credit card-A
							</label>
							<label class="radio">
								<radio :checked="type==2" value="2"  color="#f7427b" style="transform: scale(.7);"/>Credit card-B
							</label>
						</radio-group>
					</view>
				</view>
				<view class="form bg-panel-3 rounded-md p-x-md m-y-md box-shadow">
					<view class="d-flex align-end p-y-xs justify-between">
						<v-input type="number" v-model="form.amount" class="w-8/12 color-light"
							:placeholder="$t('assets.c2')"></v-input>
						<view class="d-flex align-end">
							<span class="unit  flex-shrink">{{ fiat }}</span>
						</view>
					</view>
					<block v-if="type==2">
						<view class="d-flex align-end p-y-xs justify-center">
							<view class="d-flex align-end">
								<span class="unit  flex-shrink">{{$t('reg.a2')}}：</span>
							</view>
							<v-input type="text" v-model="form.cellphone" class="w-8/12 flex-fill color-light"
								:placeholder="$t('assets.h1')">
								 <template v-slot:left>+</template>
							</v-input>
						</view>
						<view class="d-flex align-end p-y-xs justify-center">
							<view class="d-flex align-end">
								<span class="unit  flex-shrink">{{$t('reg.a4')}}：</span>
							</view>
							<v-input type="text" v-model="form.email" class="w-8/12 flex-fill color-light"
								:placeholder="$t('reg.a5')"></v-input>
						</view>
					</block>
					
					
				</view>
				<view style="margin-top:120rpx;">
					<v-button class="w-max rounded-md" block type="green" @click="toRecharge" ref="btn">
						{{$t('assets.e5')}}
					</v-button>
				</view>
			</block>
		</view>
		<coin-list ref="coinList" v-model="coin" @close="coinListShow=false" v-show="coinListShow" />
		<fiat-list ref="fiatList" v-model="fiat" @close="fiatListShow=false" v-show="fiatListShow" />
		<van-toast id="van-toast" />
		<van-dialog id="van-dialog" />
	</view>
</template>
<script>
	import coinList from "./coin-list";
	import fiatList from "./fiat-list";
	import Wallet from "@/api/wallet";
	import formData from "@/utils/class/date";
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			coinList,
			fiatList
		},
		data() {
			return {
				qbList: {},
				tab: 0,
				coinListShow: false,
				fiatListShow: false,
				fiat: "",
				coin: "",

				rechargeType: 3,
				address: "",
				form: {
					coin_id: "",
					amount: "",
					address: "",
					cellphone:'',
					email:''
				},
				list: [],
				page: 1,
				loadMore: true,
				type:1
			};
		},
		computed: {
			activeCoin() {
				if (!this.coin) return {};
				return this.$refs.coinList.coinList.find(
					(item) => item.coin_name == this.coin
				);
			},
			activeFiat() {
				if (!this.coin) return {};
				return this.$refs.fiatList.fiatList.find(
					(item) => item.fiat == this.fiat
				);
			},
			...mapGetters(['themeStyle'])
		},
		filters: {
			parseTime(val) {
				return formData.parseTime(val);
			},
		},
		watch: {
			coin(n) {
				if (n) {
					this.form.address = "";
					if (this.coin != "USDT") {
						this.rechargeType = 1;
					}
					// this.getQb()
					this.walletImage();
				}
			},
			rechargeType() {
				// 优先清空地址  避免用户充错地址
			},
		},
		methods: {
			getQb() {
				Wallet.getQb().then(res => {
				console.log(res)
				this.qbList = res.data
				if(this.coin) {
					this.form.address = this.qbList[this.coin]
				}
				})
			},
			radioChange(e){
				this.type = e.detail.value
			},
			changeTab(e) {
				if (e.detail.index == 0) {
					this.tab = e.detail.index
				} else if (e.detail.index == 1) {
					this.tab = e.detail.index
					
				} else if (e.detail.index == 2) {
					uni.navigateTo({
						url: './web-view'
					})
				}

			},
			changeRechargeType(idx) {
				this.rechargeType = idx;
				this.form.address = "";
				this.walletImage();
			},
			// 获取充币地址
			walletImage() {
				if(!this.activeCoin.coin_id)return
				let data = {
					coin_id: this.activeCoin.coin_id,
					address_type: this.rechargeType,
				};
				uni.showLoading({
					title: ''
				})
				Wallet.walletImage(data).then((res) => {
					if (res.message == 'FAILED') {
						this.$dialog
							.confirm({
								title: this.$t("common.error"),
								message: this.$t("common.error1"),
								cancelButtonText: this.$t('common.cancelButtonText'),
								confirmButtonText: this.$t('common.confirmButtonText'),
							})
							.then(() => {

							});
					} else {
						this.form.address = res.data.address;
					}
					uni.hideLoading()
				}).catch(() => {
					uni.hideLoading()
				});
			},
			// 充值
			recharge() {
				this.form.coin_id = this.activeCoin.coin_id;
				Wallet.recharge(this.form, {
						btn: this.$refs.btn
					})
					.then(() => {
						this.$back();
						this.$toast.success(this.$t('assets.d5') + "！");
						this.reset();
					})
					.catch(() => {});
			},
			// 信用卡充值
			toRecharge() {
				// return this.$toast(this.$t('base.h1'))
				uni.showLoading({
					title: ''
				})
				let cellphone = this.form.cellphone
				if(!this.form.amount){
					return this.$toast(this.$t('assets.c2'))
				}
				if(this.type==2){
					if(!cellphone){
						return this.$toast(this.$t('assets.h1'))
					}
					if(!this.form.email){
						return this.$toast(this.$t('reg.a5'))
					}
				}
				Wallet.xinRecharge({
						amount: this.form.amount,
						fait: this.activeFiat.id,
						type:this.type,
						cellphone:cellphone||'',
						email:this.form.email||''
					}).then((res) => {
						let payUrl = res.data.payUrl
						location.href = payUrl
						// console.log(res)
						// 	this.$back();
						// 	uni.hideLoading()
						// 	this.$toast.success(this.$t('assets.d5') + "！");
					})
					.catch((err) => {
						console.log(err)
						uni.hideLoading()
					});
			},
			reset() {
				this.loadMore = true;
				this.page = 1;
				this.depositHistory();
			},
			more() {
				this.page++;
				this.depositHistory();
			},
			// 获取充值记录
			depositHistory() {
				let data = {
					page: this.page,
				};
				Wallet.depositHistory(data).then((res) => {
					if (res.data.current_page == 1) this.list = [];
					this.list = [...this.list, ...res.data.data];
					if (res.data.data.length < res.data.per_page) this.loadMore = false;
				});
			},
		},
		created() {
			this.depositHistory();
			this.walletImage()
			// this.getQb()
		},
	};
</script>
<style lang="scss" scoped>
	.address {
		.label {
			white-space: nowrap;
		}

		.address-txt {
			// word-break: break-all;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// white-space: nowrap;
			display: -webkit-box;
			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;

		}
	}

	.qr-box {
		height: 150px;
		width: 150px;
		margin: 0 auto;
		border: 4px solid $white;
	}

	.trChange:nth-child(2n-1) {
		box-shadow: $shadow;
		border-radius: $border-radius-xs;

		td {
			background: $panel-3;
			padding-top: $padding-sm;
			padding-bottom: $padding-sm;
		}
	}
</style>