wwbsr/pages/contribution/index.vue

<template>
	<v-page>
		<v-header  class="nav-head" :title="$t('contribution.title')">
			<template #right>
				<v-link to="./record">
					<van-icon class="fn-20 m-t-xs" name="todo-list-o" />
				</v-link>
			</template>
		</v-header>
		<view class="d-flex justify-center fn-bold fn-15 fn-center">{{$t('contribution.a1')}}</view>
		<view class="desc p-t-lg p-x-md fn-13 fn-center">
			<view>{{$t('contribution.a2')}}</view>
			<view class="p-t-lg">{{$t('contribution.a3')}}</view>
		</view>
		<!-- <view class="d-flex align-center justify-center">
			<navigator url="./detail" class="h-25 d-flex align-center  m-x-md justify-center label m-t-xs  fn-15" style="max-width:max-content;">{{$t('contribution.b4')}}</navigator>
		</view> -->
		<view class="box-shadow  m-x-md" style="margin-top:50rpx">
			<!-- <van-tabs type="card" color="#DD3F62" :border="false" :active="tab" @change="changeTab">
			  <van-tab :title="$t('assets.g1')"></van-tab>
			  <van-tab :title="$t('assets.g3')"></van-tab>
			  <van-tab :title="$t('assets.g2')"></van-tab>
			</van-tabs> -->
			<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>
		</view>
		<block v-if="tab==0">
			<view class="p-x-lg">
				<!-- <view class="coin p-x-md p-y-xs d-flex justify-between bg-panel-3 m-y-md rounded-md box-shadow"
					@click="coinListShow=true">
					<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   align-center justify-center border-b p-x-md p-y-xs color-light"
							>
							<view class="group d-flex fn-12 color-light justify-center align-center">
				
								<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('contribution.a4')}}</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('contribution.a5')}}</text>
							<i class="iconfont" style="color:#2c2c2c;font-size: 34rpx;">&#xe706;</i>
						</v-button>
					</view>
				</view>
				
			</view>
			
		</block>
		<block v-if="tab==1">
			<view class="p-x-lg">
				<view class="coin p-x-md p-y-xs 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('contribution.title')}}
					</v-button>
				</view>
			</view>
		</block>
		<view style="color:#999;margin-top:120rpx;text-align: center;">
			<view>{{$t('contribution.a6')}}：{{details.sum}} USDT</view>
			<view>{{$t('contribution.a7')}}：{{$date(details.end_time)}}</view>
		</view>
		<view @click="dialogShow=true" class="h-25 d-flex ali gn-center justify-center label m-t-xs  fn-15" style="max-width:max-content;margin: 0 auto;" v-if="details.count > 0">{{$t('contribution.a9')}}</view>
		<view   class="h-25 d-flex align-center justify-center label m-t-xs  fn-15" style="max-width:max-content;margin: 0 auto;background-color: #999;" v-if="details.count == 0">{{$t('contribution.a8')}}</view>
				<view style="padding-bottom:100rpx;"></view>
		<view class="my-dialog" v-if="dialogShow">
			<van-dialog  :show="dialogShow" @close="dialogShow=false"  :confirmButtonText="$t('contribution.b3')" :message="`${$t('contribution.b1')}: ${details.order} ${$t('contribution.b2')}`" />
		</view>
		<fiat-list ref="fiatList" v-model="fiat" @close="fiatListShow=false" v-show="fiatListShow" />
	</v-page>
</template>

<script>
	// import coinList from "./coin-list";
	import Wallet from "@/api/wallet";
	import fiatList from "./fiat-list";
	import Donation from "@/api/donation.js";
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			// coinList,
			fiatList
		},
		data() {
			return {
				tab: 0,
				coinListShow: false,
				fiatListShow: false,
				coin: "",
				fiat: "",
				money:'',
				rechargeType:2,
				type:1,
				form: {
					coin_id: "",
					amount: "",
					address: "",
					coin: "",
				},
				dialogShow:false,
				details:[]
			}
		},
		computed: {
			activeCoin() {
				if (!this.coin) return {};
				return this.$refs.coinList.coinList.find(
					(item) => item.coin_name == this.coin
				);
			},
			activeFiat() {
				return this.$refs.fiatList.fiatList.find(
					(item) => item.fiat == this.fiat
				);
			},
		},
		watch: {
			coin(n) {
				if (n) {
					this.form.address = "";
					if (this.coin != "USDT") {
						this.rechargeType = 1;
					}
					this.walletImage();
				}
			},
		},
		onLoad() {
			this.walletImage();
			this.getDetails()
		},
		methods:{
			radioChange(e){
				this.type = e.detail.value
			},
			changeRechargeType(idx) {
				this.rechargeType = idx;
				this.form.address = "";
				this.walletImage();
			},
			changeTab(e){
				if(e.detail.index==0){
					this.tab = e.detail.index
				}else if(e.detail.index==2){
					// uni.navigateTo({
					// 	url:'/pages/assets/web-view'
					// })
					// window.location.href = 'https://go.crisp.chat/chat/embed/?website_id=c6ffb47c-4db3-4d31-b84c-23c5b95f3255'
					let url = 'https://im.gsras.com/index/index/home?visiter_id=&visiter_name=&avatar=&business_id=2&groupid=0&special=2'
					// #ifdef H5
					window.location.href = url
					// #endif
					// #ifdef APP-PLUS
					plus.runtime.openURL(url)
					// #endif
				}else if(e.detail.index==1){
					this.tab = e.detail.index
				}
			},
			changeRechargeType(idx) {
				this.rechargeType = idx;
				this.form.address = "";
				this.walletImage();
			},
			
			getDetails(){
				Donation.getDetails().then(res=>{
					this.details = res.data
				})
			},
			
			// 获取充币地址
			walletImage() {
				let data = {
					coin_id: this.activeCoin.coin_id,
					type: this.rechargeType,
				};
				uni.showLoading({
					title: ''
				})
				Donation.getAddress(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()
				});
			},
			// 信用卡捐款
			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||'',
						money_type:2,
					}).then((res) => {
						let payUrl = res.data.payUrl
						location.href = payUrl
					})
					.catch((err) => {
						console.log(err)
						uni.hideLoading()
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.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;
		}
	}
	.label {
		border-radius: 5rpx;
		background: #DD3F62;
		padding: 0 20rpx;
		width: max-content;
		color: #fff;
	}
</style>