projectionscreenPc/src/views/assets/withdraw_address.vue

<template>
	<div class="global-width">
		<div class="container">
			<!--当前位置-->
			<div class="hc-breadcrumb">
				<span class="hc-color4" @click="$router.push('/assets/coincoin')">{{$t('币币账户')}}</span>
				<i class="hc-breadcrumb-icon"></i>
				<span class="margin0">{{$t('提币地址管理')}}</span>
			</div>

			<div class="hc-breadcrumb second-position">
				<span class="hc-color1">
					<img src="../../assets/images/icon-money.png" />{{$t('提币地址管理')}}
				</span>
			</div>

			<div class="recharge-warp">
				<div class="withdrawmoney-box">
					<div class="form-box">
						<div class="form-group">
							<label class="form-label">{{$t('选择提币币种')}}</label>

							<div class="form-control">
								<div class="hc-form-warp" @click="showCoin = !showCoin" v-if="withdrawCoin">
									<img class="hc-select-img" :src="'data:img/jpg;base64,' + withdrawCoinImg" v-if="withdrawCoinImg">
									<span class="hc-select-span1">{{withdrawCoin}}</span>

									<span class="hc-form-down-icon">
										<i class="fa-caret-down"></i>
									</span>
								</div>
								<div class="hc-form-warp" @click="showCoin = !showCoin" v-else>
									<span class="hc-select-span1">{{$t('选择提币币种')}}</span>

									<span class="hc-form-down-icon">
										<i class="fa-caret-down"></i>
									</span>
								</div>

								<!-- 选择币种弹框 -->
								<div class="choose-currencies" v-if="showCoin">
									<div class="hc-select-options" v-for="item of allCoinList" :key="item.id" @click="chooseCoin(item)">
										<img class="hc-select-img" :src="'data:img/jpg;base64,' + item.image" v-if="item.image">
										<span class="hc-select-span1">{{item.id}}</span>
									</div>

								</div>
							</div>
						</div>

						<div class="form-group">
							<label class="form-label">
								{{$t('提币地址')}}
							</label>
							
							<div class="form-control">
								<el-input class="text-input" :placeholder="$t('请输入提币地址')" v-model="withdrawAddress" type="text" clearable autocomplete="off" @keyup.enter.native="submit">
								</el-input>
							</div>
						</div>
						
						<div class="form-group">
							<el-button class="form-submit-btn" type="primary" :loading="true" v-if="loading">{{$t('提交中...')}}</el-button>
							<el-button class="form-submit-btn" type="primary" @click="submit" v-else>{{$t('保存地址')}}</el-button>
						</div>
					</div>
				</div>

				<div class="address-line"></div>

				<div class="address-bot">
					<div class="address-div1">
						<div class="address-div2">{{withdrawCoin}} {{$t('地址列表')}}</div>
					</div>

					<table class="table">
						<thead>
							<tr>
								<th>
									<div class="cell">{{$t('币种')}}</div>
								</th>
								<th>
									<div class="cell">{{$t('提币地址')}}</div>
								</th>
								<th>
									<div class="cell">
										{{$t('操作')}}
									</div>
								</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="item of addressList" :key="item.id">
								<td>
									<div class="cell">{{withdrawCoin}}</div>
								</td>
								<td>
									<div class="cell">{{item.addr}}</div>
								</td>
								<td>
									<button class="operatione-btn">选择地址</button>
								</td>
							</tr>
						</tbody>
					</table>
					
					<no-content :isText="$t('暂无数据')" :isContent="isContent"></no-content>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import noContent from '@/components/no_content'
	export default {
		name: 'withdrawAddress',
		components: {
			noContent,
		},
		data() {
			return {
				withdrawCoin: '', //提币币种
				showCoin: false, //选择币种弹窗
				withdrawAddress: '',
				
				addressList: [],
				isContent: false,
				
				loading: false,
			}
		},
		computed: {
			...mapState('trend', ['allCoinList']),

			withdrawCoinImg() { //充值币种的图片
				let img;
				this.allCoinList.forEach(item => {
					if (item.id == this.withdrawCoin) {
						img = item.image;
					}
				})
				return img;
			},
		},
		methods: {
			getAddressList() { //获取地址列表
				this.getAxios('/api/user/withdraw/list/' + this.withdrawCoin)
					.then(data => {
						if (data.data.length == 0) {
							this.isContent = true;
						} else {
							this.isContent = false;
						}
						this.addressList = data.data;
					})
			},
			
			chooseCoin(item) { //选择币种
				this.withdrawCoin = item.id;
				this.showCoin = false;
			},
			submit() {
				if(this.loading) {
					return;
				}
				if(!this.withdrawAddress) {
					this.$message.error(this.$t('请输入提币地址！'));
					return;
				}
				this.loading = true;
				
				let params = {
					coinId: this.withdrawCoin,
					addr: this.withdrawAddress,
					id: ''
				}
				this.postAxios('/api/user/withdraw/add', params)
					.then(() => {
						this.$message.success(this.$t('提币地址添加成功！'));
						
						this.getAddressList();
						this.clearData();
					})
					.catch(() => {
						this.loading = false;
					})
			},
			clearData() {
				this.withdrawAddress = '';
			}
		},
		created() {
			this.withdrawCoin = this.$route.params.id;
			this.getAddressList();
		}
	}
</script>

<style>
</style>