projectionscreenPc/src/views/assets/currency_assets.vue

<template>
	<div class="global-width">
		<div class="container">
			<!--当前位置-->
			<div class="hc-breadcrumb">
				<router-link to="/assets/coincoin" class="otc-index-btn">{{$t('币币账户')}}</router-link>
				<router-link to="/assets/currency" class="otc-index-btn hc-btn-active">{{$t('法币账户')}}</router-link>
			</div>

			<div class="order-table-top hc-bgColor3">
				<div class="order-top-div1">
					<span class="assetManang-span1">
						{{$t('总资产折合')}}：{{currencyBalance}} BTC<span class="assetManang-span2">≈ {{currencyTransfer}} CNY</span>
					</span>

					<label role="checkbox" class="el-checkbox set-default">
						<el-checkbox v-model="isView"></el-checkbox>
						<span class="el-checkbox_label">{{$t('隐藏数量为0的币种')}}</span>
					</label>
				</div>

				<div class="order-top-div1">
					<div class="soso-box soso-boxs">
						<el-input class="inp" :placeholder="$t('搜索币种')" v-model="searchKeywords" type="text" clearable autocomplete="off">
						</el-input>
						<i class="icon-search icon-searchs"></i>
					</div>
				</div>

				<div class="order-top-div2">
					<span class="hc-color4" @click="$router.push('/assets/currencyRecords')">{{$t('财务记录')}}</span>
					<!-- <span class="hc-color4">{{$t('提币地址管理')}}</span> -->
				</div>
			</div>

			<div class="account-table">
				<table class="table">
					<thead>
						<tr>
							<th>
								<div class="cell">{{$t('币种')}}</div>
							</th>
							<th>
								<div class="cell">
									{{$t('可用')}}
									<!-- <span class="caret-wrapper">
										<i class="sort-caret ascending active"></i>
										<i class="sort-caret descending"></i>
									</span> -->
								</div>
							</th>
							<th>
								<div class="cell">
									{{$t('冻结')}}
									<!-- <span class="caret-wrapper">
										<i class="sort-caret ascending"></i>
										<i class="sort-caret descending"></i>
									</span> -->
								</div>
							</th>
							<th class="is-right">{{$t('操作')}}</th>
						</tr>
					</thead>

					<tbody>
						<tr v-for="(item, index) of currencyList" :key="index">
							<td>
								<div class="cell">
									<img class="quotation-table-img" :src="'data:img/jpg;base64,' + item.iconUrl" v-if="item.iconUrl">
									<div class="quotation-table-text">{{item.coinEngName}}</div>
								</div>
							</td>
							<td>
								<div class="cell">{{item.normalAmount}}</div>
							</td>
							<td>
								<div class="cell">{{item.freezeAmount}}</div>
							</td>
							<td class="is-right">
								<div class="cell">
									<ul class="operation-ul nav-dropdown">
										<li>
											<span class="hc-color4 el-dropdown-selfdefine" @click="gotoTrade(item.coinEngName)">
												<img src="../../assets/images/icon-deal-with.png">
												<span>{{$t('去交易')}}</span>
											</span>
										</li>
										<li>
											<span class="hc-color2 el-dropdown-selfdefine" @click="$router.push('/assets/transfer/2/' + item.coinEngName)">
												<img src="../../assets/images/trade/icon-transfer.png">
												<span>{{$t('划转')}}</span>
											</span>
										</li>
										<li class="chdui">
											<span class="hc-color1 el-dropdown-selfdefine" @click="$router.push('/assets/exchange/2/' + item.coinEngName)">
												<img src="../../assets/images/dui.png">
												<span>{{$t('兑换')}}</span>
											</span>
										</li>
									</ul>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
				
				<no-content :isText="$t('暂无数据')" :isContent="currencyList.length == 0"></no-content>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import noContent from '@/components/no_content'
	export default {
		name: 'coincoinAssets',
		components: {
			noContent,
		},
		data() {
			return {
				assetsList: [], //所有资产
				isView: false, //是否隐藏小额币种
				searchKeywords: '', //搜索关键字
			}
		},
		computed: {
			...mapState('trend', ['allCoinList']),
			
			currencyBalance() { //法币总资产
				let value = 0;
				this.assetsList.forEach(item => {
					value = value + parseFloat(item.toTargetCoin);
				})
				return value;
			},
			currencyTransfer() { //法币总资产转换
				let value = 0;
				this.assetsList.forEach(item => {
					value = value + parseFloat(item.toCurrency);
				})
				return value;
			},
			currencyList() { //法币资产列表
				let list = [];
				if(this.searchKeywords && this.isView) {
					this.assetsList.forEach(item => {
						if (item.coinEngName.toUpperCase().indexOf(this.searchKeywords.toUpperCase()) > -1 && item.normalAmount > 0) {
							let icon = this.getIcon(item.coinId);
							this.$set(item, 'iconUrl', icon);
							list.push(item);
						}
					});
				} else if (!this.searchKeywords && this.isView) { //过滤余额为0的资产
					this.assetsList.forEach(item => {
						if (item.normalAmount > 0) {
							let icon = this.getIcon(item.coinId);
							this.$set(item, 'iconUrl', icon);
							list.push(item);
						}
					})
				} else if(this.searchKeywords && !this.isView) {
					this.assetsList.forEach(item => {
						if (item.coinEngName.toUpperCase().indexOf(this.searchKeywords.toUpperCase()) > -1) {
							let icon = this.getIcon(item.coinId);
							this.$set(item, 'iconUrl', icon);
							list.push(item);
						}
					});
				} else {
					list = this.assetsList;
					list.forEach(item => {
						let icon = this.getIcon(item.coinId);
						this.$set(item, 'iconUrl', icon);
					});
				}
				return list;
			},
		},
		methods: {
			getAssetsList() { //获取法币账户
				this.getAxios('/api/user/assets/list?type=F_COIN')
					.then(data => {
						this.assetsList = data.data;
					})
			},
			getIcon(id) { //获取币种图标
				let img;
				this.allCoinList.forEach(item => {
					if(item.id == id) {
						img = item.image;
					}
				})
				return img;
			},
			
			gotoTrade(id) { //去交易
				this.$router.push({
					path: '/currency/trade',
					query: {
						id: id,
					}
				});
			}
		},
		created() {
			this.getAssetsList();
		}
	}
</script>

<style>
</style>